diff options
Diffstat (limited to 'workflow/workflow-designer-ui/src/main/frontend/resources/scss/features/_inputOutput.scss')
-rw-r--r-- | workflow/workflow-designer-ui/src/main/frontend/resources/scss/features/_inputOutput.scss | 143 |
1 files changed, 143 insertions, 0 deletions
diff --git a/workflow/workflow-designer-ui/src/main/frontend/resources/scss/features/_inputOutput.scss b/workflow/workflow-designer-ui/src/main/frontend/resources/scss/features/_inputOutput.scss new file mode 100644 index 00000000..9bfe6cbc --- /dev/null +++ b/workflow/workflow-designer-ui/src/main/frontend/resources/scss/features/_inputOutput.scss @@ -0,0 +1,143 @@ +.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: 0 100px 20px 100px; + flex: 1; + overflow: auto; + + &__title { + height: 110px; + line-height: 110px; + @include heading-1; + @include semi-bold; + color: $dark-gray; + } + + &__header { + display: flex; + @include body-1; + @include semi-bold; + &__right { + flex: 1; + display: flex; + justify-content: flex-end; + align-items: center; + } + } + + &__tab { + padding: 12px; + @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; + @include semi-bold; + } + } + + &__tr { + display: flex; + @include border(); + &:hover:not(.no-data) { + 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: 25px 30px; + &--empty { + padding: 20px; + color: $dark-gray; + @include body-1; + justify-content: center; + } + + .input-output-select { + width: 100%; + height: 32px; + border: solid 1px #d2d2d2; + border-radius: 2px; + color: #5a5a5a; + } + + .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: -20px; + } + } + } + + &__add { + cursor: pointer; + @include border(0, 0, 0, 1px); + padding-left: 10px; + margin-left: 10px; + } + + &__search { + } + + &__td, + &__th { + &--unflex { + flex: unset; + justify-content: center; + text-align: center; + width: 140px; + } + &--icon { + width: 100px; + .svg-icon-wrapper { + cursor: pointer; + } + } + & + & { + @include border(0, 0, 0, 1px); + } + } +} |