1 files changed, 155 insertions, 0 deletions
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);
+        }
+    }
+}