diff options
Diffstat (limited to 'sdc-workflow-designer-ui/src/main/frontend/resources/scss/features')
6 files changed, 731 insertions, 0 deletions
diff --git a/sdc-workflow-designer-ui/src/main/frontend/resources/scss/features/_catalog.scss b/sdc-workflow-designer-ui/src/main/frontend/resources/scss/features/_catalog.scss new file mode 100644 index 00000000..c5c32030 --- /dev/null +++ b/sdc-workflow-designer-ui/src/main/frontend/resources/scss/features/_catalog.scss @@ -0,0 +1,102 @@ +.wf-catalog { + overflow: auto; + background-color: $light-silver; + grid-template-rows: 35px 1fr; + height: 100vh; + padding-bottom: 20px; + .header { + align-items: center; + display: flex; + justify-content: space-between; + background-color: $silver; + margin-bottom: 2px; + @include box-shadow(0px 1px 3px 0 rgba(0, 0, 0, 0.2)); + padding: 8px 60px 0 0px; + .wf-status-select { + + display: grid; + width: 200px; + height: 34px; + margin-top: -8px; + background-color: $light-silver; + color: $blue; + } + &__search { + height: 25px; + } + } + .main { + &__header { + display: flex; + justify-content: space-between; + align-items: center; + padding: 25px 60px; + &__total { + @include body-1; + color: $dark-gray; + } + &__order { + display: flex; + &__label { + @include body-1; + color: $dark-gray; + } + &__alphabetical { + cursor: pointer; + display: flex; + &__label { + margin-left: 5px; + @include body-1; + color: $blue; + } + &__icon { + display: flex; + align-items: center; + margin-left: 5px; + .svg-icon { + width: 9px; + height: 9px; + } + &--flip { + transform: rotate(180deg); + } + } + } + } + } + &__content { + display: grid; + grid-template-columns: repeat(auto-fit, 204px); + grid-gap: 20px; + padding: 0 60px; + } + .add-workflow { + border: 2px dashed #a8b3b9; + width: 204px; + height: 204px; + padding: 10px; + box-sizing: border-box; + cursor: pointer; + display: flex; + flex-direction: column; + align-items: center; + justify-content: center; + color: $gray; + &__icon { + color: $gray; + fill: $gray; + } + &__label { + text-transform: uppercase; + @include body-1-emphasis; + } + &:hover { + color: $blue; + .svg-icon-wrapper { + color: $blue; + fill: $blue; + } + } + } + } +} diff --git a/sdc-workflow-designer-ui/src/main/frontend/resources/scss/features/_composition.scss b/sdc-workflow-designer-ui/src/main/frontend/resources/scss/features/_composition.scss new file mode 100644 index 00000000..b2b701b2 --- /dev/null +++ b/sdc-workflow-designer-ui/src/main/frontend/resources/scss/features/_composition.scss @@ -0,0 +1,94 @@ +.composition-view { + display: flex; + width: 100%; + + .bpmn-container { + flex-basis: 100%; + flex-grow: 1; + .djs-palette.open { + border: none; + } + .djs-palette-entries { + border: solid 1px $light-gray; + &:empty { + border: none; + } + } + } + .bpmn-sidebar { + background-color: $light-silver; + height: 100%; + width: 320px; + + label { + @include body-1; + } + .group-label { + @include heading-4-emphasis; + font-size: 110%; + } + .properties-panel { + background-color: $light-silver; + overflow-y: auto; + max-height: calc(100vh - 70px); + &, .bpp-properties-panel { + [disabled], [editable-readonly=false] { + background-color: $light-gray; + color: $dark-gray; + pointer-events: none; + } + label[for] { + cursor: default; + background: transparent; + } + background-color: $light-silver; + #camunda-activitySelect-select { + &.invalid { + border-color: $camunda-panel-error-border-color; + background-color: $camunda-panel-error-background-color; + } + } + } + } + [editable-readonly] { + font-family: OpenSans-Regular, Arial, sans-serif; + font-style: normal; + font-weight: 400; + font-size: 14px; + box-sizing: border-box; + } + + .composition-buttons { + position: fixed; + background-color: $light-silver; + left: 265px; + bottom: 46px; + border: 1px solid $light-gray; + width: 189px; + display: flex; + flex-direction: row; + justify-content: space-around; + height: 57px; + align-items: center; + padding: 10px; + .divider { + height: 35px; + border: 1px solid $light-gray; + } + .diagram-btn { + + &:hover { + fill: $blue; + cursor: pointer; + } + &.disabled { + fill: $gray; + } + .svg-icon { + width: 25px; + height: 23px; + } + } + } + } +} diff --git a/sdc-workflow-designer-ui/src/main/frontend/resources/scss/features/_general.scss b/sdc-workflow-designer-ui/src/main/frontend/resources/scss/features/_general.scss new file mode 100644 index 00000000..f11c2c0a --- /dev/null +++ b/sdc-workflow-designer-ui/src/main/frontend/resources/scss/features/_general.scss @@ -0,0 +1,39 @@ +.general-page { + @include body-1; + padding: 35px 90px 0 50px; + background-color: #fff; + + .general-page-title { + height: 110px; + line-height: 110px; + @include heading-1-emphasis; + color: $dark-gray; + } + + .general-page-content { + display: grid; + grid-template-columns: 60% 40%; + grid-gap: 40px; + color: #444; + + .description-part textarea { + height: 200px; + padding-top: 5px; + } + + .version-info-part { + background-color: $light-silver; + height: 200px; + margin-top: 22px; + padding: 20px; + box-sizing: border-box; + .label { + @include body-3; + margin-bottom: 5px; + } + .value { + margin-bottom: 10px; + } + } + } +} diff --git a/sdc-workflow-designer-ui/src/main/frontend/resources/scss/features/_inputOutput.scss b/sdc-workflow-designer-ui/src/main/frontend/resources/scss/features/_inputOutput.scss new file mode 100644 index 00000000..56a8dd6b --- /dev/null +++ b/sdc-workflow-designer-ui/src/main/frontend/resources/scss/features/_inputOutput.scss @@ -0,0 +1,155 @@ +.input-output { + @mixin border($top: 1px, $right: 1px, $bottom: 1px, $left: 1px) { + border-width: $top $right $bottom $left; + border-style: solid; + border-color: $light-gray; + } + padding: 44px; + max-width: 1567px; + + &__title { + height: 110px; + line-height: 110px; + @include heading-1-emphasis; + color: $dark-gray; + } + + &__header { + display: flex; + &__right { + flex: 1; + display: flex; + justify-content: flex-end; + align-items: center; + } + } + + &__tab { + padding: 12px; + @include body-1-emphasis; + @include border(1px, 1px, 0, 1px); + background-color: $light-silver; + color: $gray; + min-width: 128px; + text-align: center; + cursor: pointer; + &--active { + color: $blue; + padding-top: 9px; + border-top: 4px solid $blue; + background-color: $white; + } + & + & { + border-left: none; + } + } + + &__table { + &__thead { + background-color: $silver; + @include body-1-emphasis; + } + .scrollbars { + min-height: 102px; + max-height: calc(100vh - 243px); + overflow: auto; + position: relative; + } + + &__tbody { + } + } + + &__tr { + display: flex; + @include border(); + &:hover:not(&--no-hover) { + background-color: $light-silver; + } + & + & { + border-top: none; + } + } + + &__th { + flex: 1; + padding: 10px; + color: $black; + display: flex; + align-items: center; + } + + &__td { + flex: 1; + display: flex; + align-items: center; + padding: 22px 17px; + &--empty { + padding: 20px; + color: $dark-gray; + @include body-1; + text-transform: uppercase; + justify-content: center; + } + + .input-output-select { + width: 100%; + height: 32px; + @include border(); + border-radius: 2px; + padding-left: 5px; + color: $text-black; + } + + .sdc-input { + width: 100%; + position: relative; + margin: unset; + .sdc-input__label { + display: none; + } + .sdc-input__input { + height: 32px; + } + .sdc-label__error { + margin: unset; + position: absolute; + bottom: -22px; + } + } + } + + &__add { + cursor: pointer; + @include body-1; + text-transform: uppercase; + @include border(0, 0, 0, 1px); + padding-left: 10px; + margin-left: 10px; + } + + &__td, + &__th { + .sdc-checkbox { + height: 14px; + } + &--unflex { + flex: unset; + justify-content: center; + text-align: center; + width: 127px; + } + &--icon { + width: 98px; + .svg-icon-wrapper { + cursor: pointer; + &:hover { + fill: $blue; + } + } + } + & + & { + @include border(0, 0, 0, 1px); + } + } +} diff --git a/sdc-workflow-designer-ui/src/main/frontend/resources/scss/features/_overview.scss b/sdc-workflow-designer-ui/src/main/frontend/resources/scss/features/_overview.scss new file mode 100644 index 00000000..c1c371fd --- /dev/null +++ b/sdc-workflow-designer-ui/src/main/frontend/resources/scss/features/_overview.scss @@ -0,0 +1,337 @@ +.overview-page { + @include body-1; + color: $dark-gray; + overflow-y: auto; + height: 100vh; + + .overview-content { + display: flex; + flex-wrap: wrap; + min-height: 775px; + + .overview-separator { + border-left: 1px solid $silver; + } + + .workflow-details { + @extend .flex; + @media (min-width: 1076px) { + @include sticky(30px); + } + max-height: 600px; + padding: 0 45px 0 56px; + flex-direction: column; + + .description-part { + padding-top: 20px; + textarea{ + height: 200px; + } + } + + .save-description { + display: flex; + justify-content: flex-end; + } + + .version-info-part { + background-color: $light-silver; + margin-top: 25px; + padding: 20px; + box-sizing: border-box; + .label { + @include body-1; + margin-bottom: 5px; + } + .value { + margin-bottom: 20px; + &:last-child { + margin-bottom: 0; + } + } + } + } + + .workflow-versions { + display: flex; + flex: 2; + } + } + + .overview-header { + display: flex; + margin: 35px 60px 35px 60px; + color: $blue; + justify-content: space-between; + .title { + display: flex; + @include heading-1; + text-transform: uppercase; + } + .go-catalog-btn { + fill: $blue; + @include heading-4; + &:hover { + fill: $light-blue; + color: $light-blue; + cursor: pointer; + } + .svg-icon { + width: 16px; + height: 16px; + } + } + .restore-btn { + margin-left: 20px; + } + .archive-btn { + margin-left: 20px; + fill: $gray; + &:hover { + fill: $blue; + color: $light-blue; + cursor: pointer; + } + } + } + + @mixin version-page-box-shadow() { + box-shadow: 1px 1px 0 0 rgba(24, 24, 24, 0.06); + } + + @mixin version-page-sub-title(){ + color: $text-black; + text-transform: uppercase; + border-bottom: 1px solid $light-gray; + padding: 12px 0 10px 45px; + } + + .versions-page-view { + padding: 0 56px 0 45px; + display: flex; + flex: 2; + flex-direction: column; + + .create-new-version { + @extend .text-uppercase; + display: flex; + flex-direction: row-reverse; + color: $blue; + margin-left: auto; + cursor: pointer; + } + .newVersionDisabled > *, .svg-icon-wrapper{ + pointer-events: none; + color: $gray; + } + .version-page-header { + display: flex; + justify-content: space-between; + .versions-page-title { + @include heading-1; + text-transform: uppercase; + margin-bottom: 29px; + color: $blue; + } + .depricate-btn-wrapper { + display: flex; + justify-content: flex-end; + margin-bottom: 10px; + } + } + + .versions-page-list-and-tree { + display: flex; + margin-top: 10px; + + .version-tree-wrapper { + display: flex; + flex-direction: column; + transition: all 1s ease; + @include version-page-box-shadow(); + + .version-tree-title-container { + @include body-1-emphasis(); + @media (min-width: 1076px) { + @include sticky(1px); + } + background-color: $light-silver; + display: flex; + align-items: center; + height: 40px; + @include version-page-sub-title(); + padding-right: 10px; + + .version-tree-full-screen { + margin-left: auto; + } + } + + .tree-view { + flex: 1; + border-left: 1px solid $silver; + &:last-child { + border-bottom: 1px solid $silver; + } + .node:not(.selectedNode):hover { + .outer-circle, .inner-circle { + transform: scale(1.1); + } + } + } + } + } + + .version-list { + @extend .flex; + flex-direction: column; + + .version-list-items { + @extend .flex-column; + + .item-version, .item-status { + font-size: 12px; + font-weight: 600; + } + .version-item-row { + &:last-child { + border-bottom: 1px solid $silver; + } + } + } + + .version-item-row { + $row-hover-color: lighten($blue, 54%); + $row-active-color: lighten($blue, 51%); + cursor: $cursor-pointer; + + display: flex; + align-items: center; + padding: 15px 30px; + @include version-page-box-shadow(); + height: 70px; + max-height: 70px; + + &:hover { + background-color: $row-hover-color; + } + + &.selected { + box-shadow: 0 1px 4px 0 rgba(24, 24, 24, 0.06), inset 5px 0 0 0 $blue; + background-color: $row-active-color; + + &:hover { + box-shadow: 0 1px 4px 0 rgba(24, 24, 24, 0.06), inset 5px 0 0 0 lighten($blue, 35%); + } + } + + &.header-row { + height: 40px; + background-color: $light-silver; + @media (min-width: 1076px) { + @include sticky(1px); + } + @include body-1-emphasis(); + @include version-page-sub-title(); + padding: 15px 27px; + + &:hover { + pointer-events: none; + &:active { + @include version-page-box-shadow(); + } + } + .header-field.actions { + margin-right: 57px; + } + } + + .version-item-field { + @extend .flex; + margin-right: 10px; + + &.item-version, &.item-status { + flex: 0 1 10%; + color: $text-black; + } + + &.item-description, &.item-last-edited { + @include body-1; + } + + &.item-description, &.header-description { + flex: 1 1 0; + } + + &.item-description > .description-text { + margin-right: 10px; + @include ellipsis($max-width: 280px); + width: initial; + } + + &.item-actions { + display: flex; + flex: 1 1 3%; + justify-content: space-between; + } + + &.item-select, &.item-create { + @include body-1; + flex: 0 1 auto; + margin-right: 0; + + .svg-icon-wrapper { + fill: $blue; + color: $blue; + + &[disabled] { + cursor: default; + } + + .svg-icon { + width: 16px; + height: 16px; + } + + &:hover:not([disabled]) { + fill: $dark-blue; + color: $dark-blue; + } + } + } + + } + + /* To keep ellipsis hider's background the same color as row background */ + &:not(.selected):hover .item-description > .description-text:after { + background: $row-hover-color; + } + + &:hover:active .item-description > .description-text:after { + background: $row-active-color; + } + + } + + } + + &.clickable { + cursor: pointer; + } + } + +} + +.inputinput-selector { + padding-right: 10px; + border-color: $light-gray; + border-radius: 2px; + width: 100%; + height: 30px; + @include body-1; + + &:disabled { + @extend .disabled; + background-color: $silver; + } +} diff --git a/sdc-workflow-designer-ui/src/main/frontend/resources/scss/features/_workflow.scss b/sdc-workflow-designer-ui/src/main/frontend/resources/scss/features/_workflow.scss new file mode 100644 index 00000000..f959d17f --- /dev/null +++ b/sdc-workflow-designer-ui/src/main/frontend/resources/scss/features/_workflow.scss @@ -0,0 +1,4 @@ +.workflow-view { + display: grid; + grid-template-columns: 245px 1fr; +} |