diff options
Diffstat (limited to 'sdc-workflow-designer-ui/src/main/frontend/resources/scss/features/_catalog.scss')
-rw-r--r-- | sdc-workflow-designer-ui/src/main/frontend/resources/scss/features/_catalog.scss | 102 |
1 files changed, 102 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; + } + } + } + } +} |