Replaced old implementation at root

Old project files and directories has been moved
under 'deprecated-workflow-designer'. The old project
is not built by the CI anymore, but can be still built manually.
New modules/directories have been moved up and integrated with
the CI system.

Change-Id: I1528c792bcbcce9e50bfc294a1328a20e72c91cf
Issue-ID: SDC-1559
Signed-off-by: vempo <vitaliy.emporopulo@amdocs.com>

24 files changed, 1779 insertions, 0 deletions

diff --git a/workflow-designer-ui/src/main/frontend/resources/scss/_common.scss b/workflow-designer-ui/src/main/frontend/resources/scss/_common.scss
new file mode 100644
index 00000000..6f4e6e91
--- /dev/null
+++ b/workflow-designer-ui/src/main/frontend/resources/scss/_common.scss
@@ -0,0 +1,5 @@
+@import 'common/fonts';
+@import '../../node_modules/sdc-ui/lib/style/scss/common/variables.scss';
+@import '../../node_modules/sdc-ui/lib/style/scss/common/typography.scss';
+@import 'common/customVariables';
+@import 'common/utils';
diff --git a/workflow-designer-ui/src/main/frontend/resources/scss/_components.scss b/workflow-designer-ui/src/main/frontend/resources/scss/_components.scss
new file mode 100644
index 00000000..974317e8
--- /dev/null
+++ b/workflow-designer-ui/src/main/frontend/resources/scss/_components.scss
@@ -0,0 +1,12 @@
+@import 'components/layout';
+@import 'components/inputOptions';
+@import 'components/navigationSideBar';
+@import 'components/versionController';
+@import 'components/expandableInput';
+@import 'components/notifications';
+@import 'components/searchInput';
+@import 'components/loader';
+@import 'components/tree';
+@import 'components/customModal';
+
+
diff --git a/workflow-designer-ui/src/main/frontend/resources/scss/_features.scss b/workflow-designer-ui/src/main/frontend/resources/scss/_features.scss
new file mode 100644
index 00000000..c83b6e75
--- /dev/null
+++ b/workflow-designer-ui/src/main/frontend/resources/scss/_features.scss
@@ -0,0 +1,6 @@
+@import "features/general";
+@import "features/workflow";
+@import "features/catalog";
+@import "features/composition";
+@import "features/overview";
+@import "features/inputOutput";
diff --git a/workflow-designer-ui/src/main/frontend/resources/scss/common/_customVariables.scss b/workflow-designer-ui/src/main/frontend/resources/scss/common/_customVariables.scss
new file mode 100644
index 00000000..997e0a21
--- /dev/null
+++ b/workflow-designer-ui/src/main/frontend/resources/scss/common/_customVariables.scss
@@ -0,0 +1,44 @@
+$cursor-disabled: not-allowed !default;
+$cursor-pointer: pointer;
+
+.flex {
+    display: flex;
+    flex: 1;
+}
+
+.flex-column {
+    @extend .flex;
+    flex-direction: column;
+}
+
+.text-uppercase {
+    text-transform: uppercase;
+}
+
+.content-area {
+    padding: 30px 60px 70px 60px;
+    overflow-y: auto;
+    overflow-x: hidden;
+    height: 100%;
+    &.no-padding-content-area {
+        padding: 0;
+    }
+}
+
+.page-title {
+    @include heading-1;
+    @extend .text-uppercase !optional;
+    margin-bottom: 20px;
+    color: $blue;
+}
+
+.disabled {
+    opacity: 0.7 !important;
+    cursor: $cursor-disabled;
+}
+
+@mixin semi-bold() {
+    font-weight: 600;
+};
+
+
diff --git a/workflow-designer-ui/src/main/frontend/resources/scss/common/_fonts.scss b/workflow-designer-ui/src/main/frontend/resources/scss/common/_fonts.scss
new file mode 100644
index 00000000..9d71cf7e
--- /dev/null
+++ b/workflow-designer-ui/src/main/frontend/resources/scss/common/_fonts.scss
@@ -0,0 +1,31 @@
+/* Fonts */
+@font-face {
+    font-family: 'OpenSans-Regular';
+    font-style: normal;
+    font-weight: 400;
+    src:
+            local('Open Sans Regular'),
+            local('OpenSans-Regular'),
+            url(https://fonts.gstatic.com/s/opensans/v15/cJZKeOuBrn4kERxqtaUH3ZBw1xU1rKptJj_0jans920.woff2) format('woff2'),
+            url(http://fonts.gstatic.com/s/opensans/v15/cJZKeOuBrn4kERxqtaUH3T8E0i7KZn-EPnyo3HZu7kw.woff)  format('woff');
+  }
+  @font-face {
+    font-family: 'OpenSans-Italic';
+    font-style: normal;
+    font-weight: 400;
+    src:
+            local('Open Sans Italic'),
+            local('OpenSans-Italic'),
+            url(https://fonts.gstatic.com/s/opensans/v15/xjAJXh38I15wypJXxuGMBogp9Q8gbYrhqGlRav_IXfk.woff2) format('woff2'),
+            url(http://fonts.gstatic.com/s/opensans/v15/xjAJXh38I15wypJXxuGMBobN6UDyHWBl620a-IRfuBk.woff) format('woff');
+  }
+  @font-face {
+    font-family: 'OpenSans-Semibold';
+    font-style: normal;
+    font-weight: 400;
+    src:
+            local('Open Sans Semibold'),
+            local('OpenSans-Semibold'),
+            url(https://fonts.gstatic.com/s/opensans/v15/MTP_ySUJH_bn48VBG8sNShampu5_7CjHW5spxoeN3Vs.woff2) format('woff2'),
+            url(http://fonts.gstatic.com/s/opensans/v15/MTP_ySUJH_bn48VBG8sNSnhCUOGz7vYGh680lGh-uXM.woff)   format('woff');
+  }
\ No newline at end of file
diff --git a/workflow-designer-ui/src/main/frontend/resources/scss/common/_utils.scss b/workflow-designer-ui/src/main/frontend/resources/scss/common/_utils.scss
new file mode 100644
index 00000000..99b1ff5d
--- /dev/null
+++ b/workflow-designer-ui/src/main/frontend/resources/scss/common/_utils.scss
@@ -0,0 +1,313 @@
+
+
+/* Prefix */
+
+$box-sizing-prefix: webkit moz spec;
+$border-radius-prefix: webkit spec;
+$box-shadow-radius-prefix: webkit moz spec;
+$text-shadow-radius-prefix: spec;
+$text-shadow-prefix: spec;
+$box-shadow-prefix: all;
+$linear-gradient-prefix: all;
+$transition-prefix: webkit moz o spec;
+$flex-prefix: webkit spec;
+$browserPrefixes: webkit moz o ms;
+
+@mixin prefix($property, $value, $prefixeslist: 'all') {
+  @if $prefixeslist == all {
+    -webkit-#{$property}: $value;
+    -moz-#{$property}: $value;
+    -ms-#{$property}: $value;
+    -o-#{$property}: $value;
+    #{$property}: $value;
+  } @else {
+    @each $prefix in $prefixeslist {
+      @if $prefix == webkit {
+        -webkit-#{$property}: $value;
+      } @else if $prefix == moz {
+        -moz-#{$property}: $value;
+      } @else if $prefix == ms {
+        -ms-#{$property}: $value;
+      } @else if $prefix == o {
+        -o-#{$property}: $value;
+      } @else if $prefix == spec {
+        #{$property}: $value;
+      } @else {
+        @warn "No such prefix: #{$prefix}";
+      }
+    }
+  }
+}
+
+/* Value Prefix*/
+@mixin value-suffix-with-range($property, $valuesuffix, $from, $to, $prefixeslist) {
+
+  @if $prefixeslist == all {
+    #{property} : -webkit-#{$valuesuffix}($from, $to);
+    #{property} : -moz-#{$valuesuffix}($from, $to);
+    #{property} : -o-#{$valuesuffix}($from, $to);
+    #{property} : -ms-#{$valuesuffix}($from, $to);
+
+  } @else {
+    @each $prefix in $prefixeslist {
+      @if $prefix == webkit {
+        #{property} : -webkit-#{$valuesuffix}($from, $to);
+      } @else if $prefix == moz {
+        #{property} : -moz-#{$valuesuffix}($from, $to);
+      } @else if $prefix == ms {
+        #{property} : -ms-#{$valuesuffix}($from, $to);
+      } @else if $prefix == o {
+        #{property} : -o-#{$valuesuffix}($from, $to);
+      } @else {
+        @warn "No such prefix: #{$prefix}";
+      }
+    }
+  }
+}
+
+/* Box sizing */
+@mixin box-sizing($value: border-box) {
+  @include prefix(box-sizing, $value, $box-sizing-prefix);
+}
+
+/* Borders & Shadows */
+@mixin box-shadow($value) {
+  @include prefix(box-shadow, $value, $box-shadow-radius-prefix);
+}
+
+@mixin text-shadow($value) {
+  @include prefix(text-shadow, $value, $text-shadow-radius-prefix);
+}
+
+@mixin border-radius($value, $positions: all) {
+  @if ($positions == all) {
+    @include prefix(border-radius, $value, $border-radius-prefix);
+  } @else {
+    @each $position in $positions {
+      @include prefix(border-#{$position}-radius, $value, $border-radius-prefix);
+    }
+  }
+
+}
+
+@mixin transition($value) {
+  @include prefix(transition, $value, $transition-prefix);
+}
+
+/* Opacity */
+@mixin opacity($alpha) {
+  $ie-opacity: round($alpha * 100);
+  opacity: $alpha;
+  filter: unquote("alpha(opacity = #{$ie-opacity})");
+}
+
+/* Ellipsis */
+@mixin ellipsis($width: 100%, $display: inline-block, $max-width: none) {
+  overflow: hidden;
+  text-overflow: ellipsis;
+  width: $width;
+  white-space: nowrap;
+  display: $display;
+  max-width: $max-width;
+}
+
+@mixin multiline-ellipsis($lineHeight: 1.3em, $lineCount: 2, $bgColor: $white){
+  overflow: hidden;
+  position: relative;
+  line-height: $lineHeight;
+  max-height: $lineHeight * $lineCount;
+  text-align: justify;
+  word-break: break-all;
+  // margin-right: -1em;
+  padding-right: 1em;
+  &:before {
+    content: '...';
+    position: absolute;
+    right: 3px;
+    bottom: 0;
+  }
+  &:after {
+    content: '';
+    position: absolute;
+    right: 0;
+    width: 1em;
+    height: 1em;
+    margin-top: 0.2em;
+    background: $bgColor;
+  }
+}
+
+@mixin gradient($from, $to) {
+  /* fallback/image non-cover color */
+  background-color: $from;
+  background-image: -webkit-gradient(linear, 0% 0%, 0% 100%, from($from), to($to));
+  @include value-suffix-with-range(background-color, linear-gradient, $from, $to, $linear-gradient-prefix);
+}
+
+/* Vertical placement of multuple lines of text */
+@mixin vertical-text($height) {
+  position: absolute;
+  top: 50%;
+  margin-top: -$height/2;
+}
+
+@mixin text-vertical-align($align: middle) {
+  display: table;
+  width: 100%;
+
+  & > * {
+    vertical-align: $align;
+    display: table-cell;
+  }
+}
+
+@mixin center-element($width) {
+  width: $width;
+  margin-left: auto;
+  margin-right: auto;
+}
+
+@mixin center-content($width) {
+  & > * {
+    @include center-element($width);
+  }
+}
+
+/* transform-rotate */
+// @mixin
+//	   Defines a 2D rotation, the angle is specified in the parameter
+// @param
+//     $deg - angle in degrees
+@mixin transform-rotate($deg) {
+  transform: rotate($deg + deg); /* IE10 and Mozilla */
+  -ms-transform: rotate($deg + deg); /* IE 9 */
+  -webkit-transform: rotate($deg + deg); /* Safari and Chrome */
+}
+
+/* transform-translate */
+// @mixin
+//	   Defines a 2D rotation, the angle is specified in the parameter
+// @param
+//     $deg - angle in degrees
+@mixin transform-translate($x, $y) {
+  transform: translate($x, $y); /* IE10 and Mozilla */
+  -ms-transform: translate($x, $y); /* IE 9 */
+  -webkit-transform: translate($x, $y); /* Safari and Chrome */
+}
+
+/* transform-scale */
+// @mixin
+//	   Defines a 2D scale transformation, changing the elements width and height
+// @param
+//     $width - width
+// @param
+//     $height - height
+@mixin transform-scale($width, $height) {
+  transform: scale($width, $height); /* IE10 and Mozilla */
+  -ms-transform: scale($width, $height); /* IE 9 */
+  -webkit-transform: scale($width, $height); /* Safari and Chrome */
+}
+
+@mixin scrollable() {
+  ::-webkit-scrollbar {
+    width: 8px;
+  }
+}
+
+@mixin create-circle($size, $bgcolor) {
+  border-radius: 50%;
+  width: $size;
+  height: $size;
+  background: $bgcolor;
+	border: 3px solid $bgcolor;
+	display: flex;
+	align-items: center;
+	justify-content: center;
+}
+
+/**/
+@mixin keyframe-animation($animationType, $properties, $fromValue, $toValue) {
+
+  @keyframes #{$animationType} {
+    from {
+      $startIndex: 1;
+      @each $property in $properties {
+        #{$property}: nth($fromValue, $startIndex);
+        $startIndex: $startIndex + 1;
+      }
+    }
+    to {
+      $startIndex: 1;
+      @each $property in $properties {
+        #{$property}: nth($toValue, $startIndex);
+        $startIndex: $startIndex + 1;
+      }
+    }
+  }
+  @-moz-keyframes #{$animationType}{
+    /* Firefox */
+    from {
+      $startIndex: 1;
+      @each $property in $properties {
+        #{$property}: nth($fromValue, $startIndex);
+        $startIndex: $startIndex + 1;
+      }
+    }
+    to {
+      $startIndex: 1;
+      @each $property in $properties {
+        #{$property}: nth($toValue, $startIndex);
+        $startIndex: $startIndex + 1;
+      }
+    }
+  }
+  @-webkit-keyframes #{$animationType} {
+    /* Safari and Chrome */
+    from {
+      $startIndex: 1;
+      @each $property in $properties {
+        #{$property}: nth($fromValue, $startIndex);
+        $startIndex: $startIndex + 1;
+      }
+    }
+    to {
+      $startIndex: 1;
+      @each $property in $properties {
+        #{$property}: nth($toValue, $startIndex);
+        $startIndex: $startIndex + 1;
+      }
+    }
+  }
+  @-o-keyframes #{$animationType} {
+    /* Opera */
+    from {
+      $startIndex: 1;
+      @each $property in $properties {
+        #{$property}: nth($fromValue, $startIndex);
+        $startIndex: $startIndex + 1;
+      }
+    }
+    to {
+      $startIndex: 1;
+      @each $property in $properties {
+        #{$property}: nth($toValue, $startIndex);
+        $startIndex: $startIndex + 1;
+      }
+    }
+  }
+}
+
+
+/**/
+@mixin border-shadow($xShadow: 0.545px, $yShadow: 0.839px, $blur: 4px, $spread: 0, $color: $light-gray, $opacity: 0.2) {
+  @include box-shadow($xShadow $yShadow $blur $spread rgba($color, $opacity));
+}
+
+/* percent-plus-value */
+// @mixin
+//     Calculate length property (e.g. width, margin) by adding a value (e.g. in pixels)
+//     to a percentage of container height/width
+@mixin percent-plus-value($property, $value, $percent: 100%) {
+  $string: 'calc(' + $percent + ' + ' + $value + ')';
+  #{$property}: unquote($string);
+}
diff --git a/workflow-designer-ui/src/main/frontend/resources/scss/components/_customModal.scss b/workflow-designer-ui/src/main/frontend/resources/scss/components/_customModal.scss
new file mode 100644
index 00000000..48cd4cff
--- /dev/null
+++ b/workflow-designer-ui/src/main/frontend/resources/scss/components/_customModal.scss
@@ -0,0 +1,16 @@
+.sdc-modal {
+  .custom-modal-wrapper {
+    padding: 35px 60px 60px 60px;
+    width: auto;
+  }
+
+}
+
+.modal-action-bar {
+  display: flex;
+  justify-content: flex-end;
+
+  button:first-child {
+    margin-right: 2em;
+  }
+}
\ No newline at end of file
diff --git a/workflow-designer-ui/src/main/frontend/resources/scss/components/_expandableInput.scss b/workflow-designer-ui/src/main/frontend/resources/scss/components/_expandableInput.scss
new file mode 100644
index 00000000..2484a73e
--- /dev/null
+++ b/workflow-designer-ui/src/main/frontend/resources/scss/components/_expandableInput.scss
@@ -0,0 +1,56 @@
+.expandable-input-top {
+	display: flex;
+	height: 22px;
+	.expandable-input-wrapper {
+		display: flex;
+		&.closed {
+			.svg-icon
+			{
+				&.__search {
+					height: 17px;
+					width: 17px;
+					transition: fill 0.5s ease-in;
+					fill: $blue;
+					cursor: pointer;
+					&:hover {
+						transition: fill 0.5s ease-in;
+						fill: $dark-blue;
+					}
+				}
+			}
+		}
+		&.opened {
+			.svg-icon-wrapper {
+				margin-left: 3px;
+			}
+			.svg-icon {
+				&.__search {
+					height: 17px;
+					width: 17px;
+					fill: $dark-blue;
+				}
+			}
+			.svg-icon {
+				&.__close {
+					margin-left: 7px;
+					opacity: 0.6;
+					fill: $dark-gray;
+					&:hover {
+						opacity: 1;
+					}
+				}
+			}
+		}
+		.expandable-input-control {
+			.form-control {
+				border: none;
+				background-color: transparent;
+				border-radius: 0;
+				border-bottom: 1px solid $gray;
+				height: 22px;
+				padding: 0 5px;
+			}
+			margin: 0;
+		}
+	}
+}
diff --git a/workflow-designer-ui/src/main/frontend/resources/scss/components/_inputOptions.scss b/workflow-designer-ui/src/main/frontend/resources/scss/components/_inputOptions.scss
new file mode 100644
index 00000000..4f7e309a
--- /dev/null
+++ b/workflow-designer-ui/src/main/frontend/resources/scss/components/_inputOptions.scss
@@ -0,0 +1,48 @@
+.disabled {
+	.Select-control {
+		background-color: $silver;
+		.Select-placeholder {
+			color: $dark-gray;
+		}
+	}
+}
+
+.input-options {
+  display: flex;
+  border: 1px solid $light-gray;
+  border-radius: 2px;
+  height: 30px;
+  &:hover {
+    border-color: $gray;
+  }
+  .input-options-select {
+    float: left;
+    border: none;
+    transition-property: width;
+    transition-duration: 300ms;
+    padding-top:0px;
+    padding-bottom: 0px;
+    height:28px;
+
+  }
+
+  .input-options-other{
+    float: left;
+    height: 30px;
+    border: none;
+    padding-top:0px;
+    padding-bottom: 0px;
+    height:28px;
+  }
+  .input-options-separator {
+    width: 1px;
+    height: 24px;
+    margin-top: 2px;
+    margin-bottom: 2px;
+    border:1px solid $light-gray;
+  }
+}
+
+.input-options.has-error {
+   border-color: $red;
+}
diff --git a/workflow-designer-ui/src/main/frontend/resources/scss/components/_layout.scss b/workflow-designer-ui/src/main/frontend/resources/scss/components/_layout.scss
new file mode 100644
index 00000000..bcd07ebe
--- /dev/null
+++ b/workflow-designer-ui/src/main/frontend/resources/scss/components/_layout.scss
@@ -0,0 +1,16 @@
+.workflow-app {
+  height: 100%;
+  * {
+    box-sizing: border-box;
+  }
+
+  .version-wrapper {
+    height: 100%;
+    display: flex;
+    flex-direction: column;
+  }
+}
+
+#root {
+  height: 100%;
+}
\ No newline at end of file
diff --git a/workflow-designer-ui/src/main/frontend/resources/scss/components/_loader.scss b/workflow-designer-ui/src/main/frontend/resources/scss/components/_loader.scss
new file mode 100644
index 00000000..eb91d7c7
--- /dev/null
+++ b/workflow-designer-ui/src/main/frontend/resources/scss/components/_loader.scss
@@ -0,0 +1,160 @@
+.onboarding-loader {
+    .onboarding-loader-backdrop {
+      top: 0;
+      right: 0;
+      bottom: 0;
+      left: 0;
+      position: absolute;
+      background-color: #E1E4E6;
+      opacity: 0.5;
+    }
+    .tlv-loader {
+      height: 63px;
+      width: 63px;
+      position: absolute;
+      top: 30%;
+      left: 50%;
+      margin-top: -10.5px;
+      margin-left: -10.5px;
+    }
+    .tlv-loader.large {
+      transform: scale(1);
+    }
+    .tlv-loader::before {
+      background-color: $gray;
+      border-radius: 50%;
+      box-shadow: 21px 21px 0px 0px $gray, 0px 42px 0px 0px $gray, -21px 21px 0px 0px $gray;
+      content: '';
+      display: block;
+      height: 21px;
+      width: 21px;
+      position: absolute;
+      left: 50%;
+      margin-left: -10.5px;
+    }
+    .tlv-loader::after {
+      border-radius: 50%;
+      content: '';
+      display: block;
+      position: absolute;
+      height: 21px;
+      width: 21px;
+      animation: dot-move-2 4.5s infinite ease-in;
+    }
+    @keyframes dot-move {
+      0% {
+        background-color: $blue;
+        left: 21px;
+        top: 0;
+      }
+      25% {
+        background-color: $yellow;
+        left: 42px;
+        top: 21px;
+      }
+      50% {
+        background-color: $light-purple;
+        left: 21px;
+        top: 42px;
+      }
+      75% {
+        background-color: $light-green;
+        left: 0;
+        top: 21px;
+      }
+      100% {
+        background-color: $blue;
+        left: 21px;
+        top: 0;
+      }
+    }
+    @keyframes dot-move-2 {
+      0% {
+        background-color: $blue;
+        left: 21px;
+        top: 0;
+      }
+      6.25% {
+        background-color: $blue;
+        left: 42px;
+        top: 21px;
+      }
+      12.5% {
+        background-color: $blue;
+        left: 21px;
+        top: 42px;
+      }
+      18.75% {
+        background-color: $blue;
+        left: 0;
+        top: 21px;
+      }
+      25% {
+        background-color: $yellow;
+        left: 21px;
+        top: 0;
+      }
+      31.25% {
+        background-color: $yellow;
+        left: 42px;
+        top: 21px;
+      }
+      37.5% {
+        background-color: $yellow;
+        left: 21px;
+        top: 42px;
+      }
+      43.75% {
+        background-color: $yellow;
+        left: 0;
+        top: 21px;
+      }
+      50% {
+        background-color: $light-purple;
+        left: 21px;
+        top: 0;
+      }
+      56.25% {
+        background-color: $light-purple;
+        left: 42px;
+        top: 21px;
+      }
+      62.5% {
+        background-color: $light-purple;
+        left: 21px;
+        top: 42px;
+      }
+      68.75% {
+        background-color: $light-purple;
+        left: 0;
+        top: 21px;
+      }
+      75% {
+        background-color: $light-green;
+        left: 21px;
+        top: 0;
+      }
+      81.25% {
+        background-color: $light-green;
+        left: 42px;
+        top: 21px;
+      }
+      87.5% {
+        background-color: $light-green;
+        left: 21px;
+        top: 42px;
+      }
+      93.75% {
+        background-color: $light-green;
+        left: 0;
+        top: 21px;
+      }
+      100% {
+        background-color: $blue;
+        left: 21px;
+        top: 0;
+      }
+    }
+  }
+  
+  
\ No newline at end of file
diff --git a/workflow-designer-ui/src/main/frontend/resources/scss/components/_navigationSideBar.scss b/workflow-designer-ui/src/main/frontend/resources/scss/components/_navigationSideBar.scss
new file mode 100644
index 00000000..695dc6a5
--- /dev/null
+++ b/workflow-designer-ui/src/main/frontend/resources/scss/components/_navigationSideBar.scss
@@ -0,0 +1,63 @@
+.workflow-navigation-side-bar {
+  width: 245px;
+  height: 100%;
+  background-color: $white;
+  border-right: 1px solid $light-gray;
+  @include box-shadow(1px -1px 3px 0px $silver);
+  border-bottom: 0;
+
+  .navigation-side-content {
+    overflow: hidden;
+    height: 100%;
+
+    .navigation-group {
+      height: 100%;
+      display: flex;
+      flex-direction: column;
+      background-color: $light-silver;
+      .group-name {
+        @include heading-4; 
+        @include semi-bold;       
+        @include ellipsis;        
+        display: block;        
+        padding: 24px 12px 13px 40px;
+        background-color: $white;
+        border-bottom: 1px solid $silver;
+      }
+    }
+
+    .navigation-group-items {
+      padding-left: 20px;
+
+      .navigation-group-item {
+        @include body-1;
+        cursor: pointer;
+        margin: 18px 0;
+        padding-left: 20px;
+        color: $dark-gray;
+        line-height: 17px;
+        &.selected-item {
+          padding-left: 0;
+          .collapse.in {
+            padding-left: 20px;
+          }
+        }
+        .navigation-group-item-name {
+          @include ellipsis;
+          white-space: normal;
+          &.selected {
+            @include body-1;
+            @include semi-bold;
+            border-left: 4px solid $blue;
+            padding-left: 18px;
+            color: $blue;
+          }
+          &.bold-name {
+            @include body-1;
+            @include semi-bold;
+          }
+        }
+      }
+    }
+  }
+}
diff --git a/workflow-designer-ui/src/main/frontend/resources/scss/components/_notifications.scss b/workflow-designer-ui/src/main/frontend/resources/scss/components/_notifications.scss
new file mode 100644
index 00000000..cc44cfbc
--- /dev/null
+++ b/workflow-designer-ui/src/main/frontend/resources/scss/components/_notifications.scss
@@ -0,0 +1,7 @@
+.workflow-notifications-container {
+  position: absolute;
+  &.position-top-right {
+    right: 30px;
+    top: 50px;
+  }
+}
\ No newline at end of file
diff --git a/workflow-designer-ui/src/main/frontend/resources/scss/components/_searchInput.scss b/workflow-designer-ui/src/main/frontend/resources/scss/components/_searchInput.scss
new file mode 100644
index 00000000..efd68496
--- /dev/null
+++ b/workflow-designer-ui/src/main/frontend/resources/scss/components/_searchInput.scss
@@ -0,0 +1,59 @@
+.search-input-top {
+    display: flex;
+    height: 22px;
+    .search-input-wrapper {
+        display: flex;
+        &.closed {
+            .svg-icon {
+                &.__search {
+                    height: 17px;
+                    width: 17px;
+                    transition: fill 0.5s ease-in;
+                    fill: $blue;
+                    cursor: pointer;
+                    &:hover {
+                        transition: fill 0.5s ease-in;
+                        fill: $dark-blue;
+                    }
+                }
+            }
+        }
+        &.opened {
+            .svg-icon-wrapper {
+                margin-left: 3px;
+            }
+            .svg-icon {
+                &.__search {
+                    height: 17px;
+                    width: 17px;
+                    fill: $dark-blue;
+                }
+            }
+            .svg-icon {
+                &.__close {
+                    margin-left: 7px;
+                    opacity: 0.6;
+                    fill: $dark-gray;
+                    &:hover {
+                        opacity: 1;
+                    }
+                }
+            }
+        }
+        .search-input-control {
+            .input-control {
+                border: none;
+                background-color: transparent;
+                border-radius: 0;
+                border-bottom: 1px solid $gray;
+                height: 22px;
+                padding: 0 5px;
+                outline: 0;
+                box-shadow: none;
+                transition: border-color ease-in-out 0.95s,
+                    box-shadow ease-in-out 0.95s;
+            }
+            margin: 0;
+        }
+    }
+}
diff --git a/workflow-designer-ui/src/main/frontend/resources/scss/components/_tree.scss b/workflow-designer-ui/src/main/frontend/resources/scss/components/_tree.scss
new file mode 100644
index 00000000..1847ff30
--- /dev/null
+++ b/workflow-designer-ui/src/main/frontend/resources/scss/components/_tree.scss
@@ -0,0 +1,57 @@
+
+.tree-view {
+	overflow: hidden;
+
+	&.scrollable {
+		overflow: auto;
+	}
+
+	.node {
+		text-shadow: none;
+		stroke: none;
+
+		.outer-circle {
+			stroke: $blue;
+			stroke-width: 2px;
+			fill: $white;
+		}
+
+		.inner-circle {
+			fill: $blue;
+		}
+
+		text {
+			text-anchor: end;
+			@include body-2;
+			@include semi-bold;
+			fill: $blue;
+		}
+
+		&.clickable {
+			cursor: pointer;
+		}
+
+		&.selectedNode {
+			.outer-circle {
+				fill: $blue;
+			}
+
+			.inner-circle {
+				fill: $blue;
+			}
+
+			text {
+				fill: $blue;
+			}
+		}
+	}
+
+
+	.link {
+		fill: none;
+		stroke: $dark-gray;
+		stroke-opacity: 0.4;
+		stroke-width: 1.5px;
+	}
+
+}
diff --git a/workflow-designer-ui/src/main/frontend/resources/scss/components/_validationForm.scss b/workflow-designer-ui/src/main/frontend/resources/scss/components/_validationForm.scss
new file mode 100644
index 00000000..176e5469
--- /dev/null
+++ b/workflow-designer-ui/src/main/frontend/resources/scss/components/_validationForm.scss
@@ -0,0 +1,117 @@
+form {
+  .validation-form-content {
+    .validation-input-wrapper {
+      position: relative;
+      flex: 1;
+    }
+    .validation-radio-wrapper {
+      position: relative;
+    }
+    .sdc-tabs {
+      position: relative;
+      .invalid-tab:not(.sdc-tab-active) {
+        color: $red;
+      }
+    }
+    .validation-error-message {
+      &.bottom {
+        .tooltip-arrow {
+          border-bottom-color: $red;
+        }
+      }
+      &.right {
+        .tooltip-arrow {
+          border-right-color: $red;
+        }
+      }
+      &.left {
+        .tooltip-arrow {
+          border-left-color: $red;
+        }
+      }
+      .tooltip-inner {
+        background-color: $red;
+      }
+    }
+    .input-row {
+      padding-bottom: 32px;
+      &:only-child {
+        padding-bottom: 0;
+      }
+      &:last-child {
+        padding-bottom: 0;
+      }
+      .form-group {
+        margin-bottom: 0;
+      }
+    }
+
+    .rows-section {
+      .row-flex-components {
+        display: flex;
+      }
+      .validation-input-wrapper {
+        flex: 1;
+      }
+      .empty-col {
+        flex: 1.2;
+        content: ' ';
+      }
+      .empty-two-col {
+        flex: 2.4;
+        content: ' ';
+      }
+
+      .two-col {
+        flex: 2.2;
+      }
+      .three-col {
+        flex: 3.4;
+      }
+      .single-col {
+        flex: 1.2;
+        display: flex;
+        &:after {
+          flex: 0.2;
+          content: ' ';
+        }
+        @media (min-width: 1389px) {
+          &.add-line-break {
+            .control-label {
+              &:after {
+                content: "\00a0";
+                display: block;
+              }
+            }
+          }
+        }
+
+      }
+    }
+  }
+
+  .validation-buttons {
+    padding: 20px 0;
+    text-align: right;
+    button:first-child {
+      margin-right: 15px;
+    }
+    .svg-icon {
+      height: 14px;
+      width: 14px;
+    }
+    .svg-icon.check {
+      fill: $white;
+    }
+    .svg-icon.close {
+      fill: $blue;
+    }
+  }
+}
+
+.modal-body {
+  .validation-buttons {
+    padding: 20px 15px;
+    background-color: $light-silver;
+  }
+}
diff --git a/workflow-designer-ui/src/main/frontend/resources/scss/components/_versionController.scss b/workflow-designer-ui/src/main/frontend/resources/scss/components/_versionController.scss
new file mode 100644
index 00000000..fe397d31
--- /dev/null
+++ b/workflow-designer-ui/src/main/frontend/resources/scss/components/_versionController.scss
@@ -0,0 +1,171 @@
+.version-controller-bar {
+	display: flex;
+	height: 70px;
+	border-bottom: 1px solid $silver;
+	background-color: transparent;
+
+	.group-name-wrapper {
+		width: 245px;
+		.group-name {
+			@include heading-4;
+			@include semi-bold;
+			@include ellipsis;
+			display: block;
+			padding: 24px 12px 13px 40px;
+			background-color: $white;
+		}
+	}
+
+	.vc-container {
+		display: flex;
+		flex: 1;
+		align-self: center;
+		background-color: transparent;
+		justify-content: space-between;
+		align-items: center;
+		padding-left: 16px;
+		padding-right: 40px;
+		border-left: 1px solid #eaeaea;
+
+		.vc-separator {
+			border-left: 1px solid $silver;
+			height: 37px;
+			margin-left: 5px;
+			margin-right: 5px;
+		}
+
+		.version-status-container {
+			.version-selector-more-versions {
+				color: $blue;
+				cursor: pointer;
+			}
+
+			.version-selector {
+				margin-top: 0px;
+				padding-right: 10px;
+				margin-right: 15px;
+				margin-left: 10px;
+				border-color: $light-gray;
+				border-radius: 2px;
+				width: 243px;
+				height: 30px;
+				@include body-1;
+			}
+
+			.version-section {
+				.form-group {
+					margin-right: 20px;
+
+					.input-options {
+						border: none;
+
+						.input-options-select {
+							padding-top: 4px;
+						}
+					}
+				}
+			}
+
+			.vc-status {
+				display: flex;
+				padding-left: 20px;
+				border-left: $light-gray thin solid;
+
+				.status-text {
+					align-self: center;
+					margin-top: 2px;
+					@include heading-5;
+					color: $dark-gray;
+				}
+			}
+		}
+
+		.save-submit-cancel-container {
+			display: flex;
+			align-items: center;
+			height: 100%;
+
+			.action-buttons, .select-action-buttons, .vc-save-section, .vc-submit-section {
+				display: flex;
+				align-items: center;
+				height: 100%;
+				cursor: $cursor-pointer;
+
+				.vc-submit-button {
+					border: 1px solid $dark-gray;
+					width: 94px;
+					height: 30px;
+					border-radius: 2px;
+					padding-top: 5px;
+					padding-left: 10px;
+					margin-left: 10px;
+					margin-right: 10px;
+
+					&:hover:not(.disabled) {
+						cursor: pointer;
+						background-color: $silver;
+					}
+
+					&.disabled {
+						border-color: $light-gray;
+					}
+
+					.vc-v-submit {
+						width: 11px;
+						height: 8px;
+						margin-right: 10px;
+						position: relative;
+						top: -1px;
+					}
+				}
+
+				.certifyBtn {
+					margin-left: 10px;
+				}
+
+				.version-control-buttons {
+					display: flex;
+				}
+
+				.action-button-wrapper {
+					display: flex;
+					align-items: center;
+					height: 70px;
+
+					&:hover:not(.disabled) {
+						background-color: $silver;
+					}
+
+					&:active:not(.disabled) {
+						background-color: $light-gray;
+					}
+
+					.action-buttons-svg {
+						padding-left: 10px;
+						padding-right: 10px;
+
+						.svg-icon {
+							fill: $text-black;
+							height: 20px;
+
+							&, &.__version-controller-save { width: 20px; }
+							&.__version-controller-permissions { width: 32px; }
+							&.__version-controller-undo, &.__version-controller-revert { width: 20px; }
+							&.__version-controller-sync, &.__version-controller-commit { width: 28px; }
+						}
+					}
+
+				}
+
+				.action-button-label {
+					@include body-4;
+					display: block;
+					height: 1em;
+					margin-top: 5px;
+					margin-bottom: 0;
+				}
+
+			}
+		}
+	}
+}
diff --git a/workflow-designer-ui/src/main/frontend/resources/scss/features/_catalog.scss b/workflow-designer-ui/src/main/frontend/resources/scss/features/_catalog.scss
new file mode 100644
index 00000000..debb8b81
--- /dev/null
+++ b/workflow-designer-ui/src/main/frontend/resources/scss/features/_catalog.scss
@@ -0,0 +1,95 @@
+.wf-catalog {
+    background-color: $light-silver;
+    height: 100%;
+    display: flex;
+    flex-direction: column;
+    .header {
+        align-items: center;
+        display: flex;
+        justify-content: flex-end;
+        background-color: $silver;
+        margin-bottom: 2px;
+        @include box-shadow(0px 1px 3px 0 rgba(0, 0, 0, 0.2));
+        padding: 8px 60px 0 60px;
+        &__search {
+            height: 25px;
+        }
+    }
+    .main {
+        flex: 1;
+        &__header {
+            display: flex;
+            justify-content: space-between;
+            align-items: center;
+            padding: 25px 60px;
+            &__total {
+                @include body-1;
+                @include semi-bold;
+                color: $dark-gray;
+            }
+            &__order {
+                display: flex;
+                &__label {
+                    @include body-1;
+                    @include semi-bold;
+                    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;
+            }
+            &:hover {
+                color: $blue;
+                .svg-icon-wrapper {
+                    color: $blue;
+                    fill: $blue;
+                }
+            }
+        }
+    }
+}
diff --git a/workflow-designer-ui/src/main/frontend/resources/scss/features/_composition.scss b/workflow-designer-ui/src/main/frontend/resources/scss/features/_composition.scss
new file mode 100644
index 00000000..7ab294a2
--- /dev/null
+++ b/workflow-designer-ui/src/main/frontend/resources/scss/features/_composition.scss
@@ -0,0 +1,15 @@
+.composition-view {
+	display: flex;
+	width: 100%;
+
+	.bpmn-container {
+		flex-basis: 100%;
+		height: 100%;
+	}
+
+	.properties-panel {
+		&, .bpp-properties-panel {
+			height: 100%;
+		}
+	}
+}
diff --git a/workflow-designer-ui/src/main/frontend/resources/scss/features/_general.scss b/workflow-designer-ui/src/main/frontend/resources/scss/features/_general.scss
new file mode 100644
index 00000000..f99b8aad
--- /dev/null
+++ b/workflow-designer-ui/src/main/frontend/resources/scss/features/_general.scss
@@ -0,0 +1,39 @@
+.general-page {
+    @include body-1;
+    padding: 0 100px 20px 100px;
+    background-color: #fff;
+
+    .general-page-title {
+        height: 110px;
+        line-height: 110px;
+        @include heading-1;
+        @include semi-bold;
+        color: $dark-gray;
+    }
+
+    .general-page-content {
+        display: grid;
+        grid-template-columns: 50% 50%;
+        grid-gap: 30px;
+        color: #444;
+
+        .description-part textarea {
+            height: 200px;
+        }
+
+        .version-info-part {
+            background-color: $light-silver;
+            height: 200px;
+            margin-top: 25px;
+            padding: 20px;
+            box-sizing: border-box;
+            .label {
+                @include body-3;
+                margin-bottom: 5px;
+            }
+            .value {
+                margin-bottom: 10px;
+            }
+        }
+    }
+}
diff --git a/workflow-designer-ui/src/main/frontend/resources/scss/features/_inputOutput.scss b/workflow-designer-ui/src/main/frontend/resources/scss/features/_inputOutput.scss
new file mode 100644
index 00000000..45338039
--- /dev/null
+++ b/workflow-designer-ui/src/main/frontend/resources/scss/features/_inputOutput.scss
@@ -0,0 +1,149 @@
+.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;
+
+    &__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;
+            @include semi-bold;
+            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 {
+        .sdc-checkbox {
+            height: 14px;
+        }
+        &--unflex {
+            flex: unset;
+            justify-content: center;
+            text-align: center;
+            width: 140px;
+        }
+        &--icon {
+            width: 100px;
+            .svg-icon-wrapper {
+                cursor: pointer;
+                &:hover {
+                    fill: $blue;
+                }
+            }
+        }
+        & + & {
+            @include border(0, 0, 0, 1px);
+        }
+    }
+}
diff --git a/workflow-designer-ui/src/main/frontend/resources/scss/features/_overview.scss b/workflow-designer-ui/src/main/frontend/resources/scss/features/_overview.scss
new file mode 100644
index 00000000..b713b93f
--- /dev/null
+++ b/workflow-designer-ui/src/main/frontend/resources/scss/features/_overview.scss
@@ -0,0 +1,290 @@
+.overview-page {
+  @include body-1;
+  @include base-font-regular;
+  padding: 25px;
+
+  .overview-content {
+    display: flex;
+    flex-wrap: wrap;
+
+    .workflow-details {
+      @extend .flex;
+      padding: 20px 0 0 60px;
+      flex-direction: column;
+
+      .description-part 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-3;
+          margin-bottom: 5px;
+        }
+        .value {
+          margin-bottom: 10px;
+        }
+      }
+    }
+
+    .workflow-versions {
+      display: flex;
+      flex: 2;
+    }
+  }
+
+  .overview-header {
+    @include heading-1;
+    text-transform: uppercase;
+    margin: 35px 0 35px 60px;
+    color: $blue;
+  }
+
+  @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;
+    //background-color: $white;
+    border-bottom: 1px solid $light-gray;
+    padding: 12px 0 10px 45px;
+  }
+
+  .versions-page-view {
+    height: 100%;
+    overflow: auto;
+    padding: 0 35px 0 90px;
+    display: flex;
+    flex: 2;
+    flex-direction: column;
+
+    .svg-icon-wrapper {
+      justify-content: flex-start;
+    }
+
+    .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: 20px;
+
+      .version-tree-wrapper {
+        display: flex;
+        flex-direction: column;
+        transition: all 1s ease;
+        @include version-page-box-shadow();
+
+        .version-tree-title-container {
+          @include base-font-semibold();
+          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 {
+          //background-color: $white;
+          flex: 1;
+
+          .node:not(.selectedNode):hover {
+            .outer-circle, .inner-circle {
+              transform: scale(1.1);
+            }
+          }
+        }
+      }
+    }
+
+    .version-list {
+      @extend .flex;
+      color: $text-black;
+      flex-direction: column;
+
+      .version-list-items {
+        @extend .flex-column;
+
+        .version-item-row {
+          border-bottom: 1px solid $silver;
+
+          &:last-child {
+            border-bottom: none;
+          }
+        }
+      }
+
+      .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;
+
+        &: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;
+
+          @include base-font-semibold();
+          @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;
+            color: $dark-gray;
+          }
+
+          &.item-description, &.header-description {
+            flex: 2 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/workflow-designer-ui/src/main/frontend/resources/scss/features/_workflow.scss b/workflow-designer-ui/src/main/frontend/resources/scss/features/_workflow.scss
new file mode 100644
index 00000000..58d1df98
--- /dev/null
+++ b/workflow-designer-ui/src/main/frontend/resources/scss/features/_workflow.scss
@@ -0,0 +1,6 @@
+.workflow-view {
+    display: grid;
+    grid-template-columns: 245px 1fr;
+    height: auto;
+    flex: 1;
+}
\ No newline at end of file
diff --git a/workflow-designer-ui/src/main/frontend/resources/scss/style.scss b/workflow-designer-ui/src/main/frontend/resources/scss/style.scss
new file mode 100644
index 00000000..95828ae2
--- /dev/null
+++ b/workflow-designer-ui/src/main/frontend/resources/scss/style.scss
@@ -0,0 +1,4 @@
+@import 'common';
+@import '../../node_modules/sdc-ui/lib/css/style.css';
+@import 'components';
+@import 'features';