Fix name convention issue

Rename modules:
	workflow-designer-init to sdc-workflow-designer-init
	workflow-designer-be to sdc-workflow-designer-be
	workflow-designer-ui to sdc-workflow-designer-ui
Rename docker images:
	onap/workflow-init to onap/sdc-workflow-init
	onap/workflow-backend to onap/sdc-workflow-backend
	onap/workflow-frontend to onap/sdc-workflow-frontend

List of changed files:
	modified:   README.md
	modified:   docker-compose/debug.yml
	modified:   docker-compose/docker-compose.yml
	modified:   pom.xml
	modified:   sdc-workflow-bdd/pom.xml
	modified:   sdc-workflow-designer-be/pom.xml
	modified:   sdc-workflow-designer-init/pom.xml
	modified:   sdc-workflow-designer-ui/pom.xml
	modified:   sdc-workflow-designer-ui/src/main/frontend/yarn.lock
	modified:   version.properties

All others changes are relaited to rename/move.

Change-Id: Ic989b6347b815f85e77e23fc8d7884c05b650a27
Issue-ID: SDC-2334
Issue-ID: SDC-2335
Signed-off-by: Vasyl Razinkov <vasyl.razinkov@est.tech>

13 files changed, 890 insertions, 0 deletions

diff --git a/sdc-workflow-designer-ui/src/main/frontend/resources/scss/components/_archiveLabel.scss b/sdc-workflow-designer-ui/src/main/frontend/resources/scss/components/_archiveLabel.scss
new file mode 100644
index 00000000..a3fa8479
--- /dev/null
+++ b/sdc-workflow-designer-ui/src/main/frontend/resources/scss/components/_archiveLabel.scss
@@ -0,0 +1,10 @@
+.archive-label {
+    @include body-3;
+    color: $white;
+    background-color: $dark-purple;
+    margin-left: 20px;
+    border-radius: 3px;
+    padding: 1px 10px;
+    align-self: center;
+    text-transform: none;
+}
\ No newline at end of file
diff --git a/sdc-workflow-designer-ui/src/main/frontend/resources/scss/components/_customModal.scss b/sdc-workflow-designer-ui/src/main/frontend/resources/scss/components/_customModal.scss
new file mode 100644
index 00000000..fe8bd0cf
--- /dev/null
+++ b/sdc-workflow-designer-ui/src/main/frontend/resources/scss/components/_customModal.scss
@@ -0,0 +1,24 @@
+.sdc-modal {
+  .custom-modal-wrapper {
+    width: auto;
+  }
+
+  .form-custom-modal {
+    padding: 30px 35px 20px 35px;
+
+    .sdc-input {
+        margin-bottom: 15px;
+    }
+  }
+
+}
+
+.modal-action-bar {
+  display: flex;
+  justify-content: flex-end;
+}
+
+textarea.field-section.sdc-input__input {
+   height: 75px;
+   padding-top: 5px;
+}
\ No newline at end of file
diff --git a/sdc-workflow-designer-ui/src/main/frontend/resources/scss/components/_expandableInput.scss b/sdc-workflow-designer-ui/src/main/frontend/resources/scss/components/_expandableInput.scss
new file mode 100644
index 00000000..2484a73e
--- /dev/null
+++ b/sdc-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/sdc-workflow-designer-ui/src/main/frontend/resources/scss/components/_inputOptions.scss b/sdc-workflow-designer-ui/src/main/frontend/resources/scss/components/_inputOptions.scss
new file mode 100644
index 00000000..4f7e309a
--- /dev/null
+++ b/sdc-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/sdc-workflow-designer-ui/src/main/frontend/resources/scss/components/_layout.scss b/sdc-workflow-designer-ui/src/main/frontend/resources/scss/components/_layout.scss
new file mode 100644
index 00000000..6862d554
--- /dev/null
+++ b/sdc-workflow-designer-ui/src/main/frontend/resources/scss/components/_layout.scss
@@ -0,0 +1,34 @@
+.workflow-app {
+    position: fixed;
+    top: 0;
+    left: 0;
+    right: 0;
+    bottom: 0;
+
+    * {
+        box-sizing: border-box;
+    }
+
+    .custom-textarea {
+        resize: none;
+    }
+
+    .version-wrapper {
+        display: grid;
+        grid-template-rows: 70px 1fr;
+        height: 100vh;
+    }
+
+    .disabled {
+        pointer-events: none;
+        opacity: 0.4;
+    }
+
+    .selectable {
+        user-select: text;
+    }
+
+    .separator {
+        border-left: 1px solid $silver;
+    }
+}
diff --git a/sdc-workflow-designer-ui/src/main/frontend/resources/scss/components/_loader.scss b/sdc-workflow-designer-ui/src/main/frontend/resources/scss/components/_loader.scss
new file mode 100644
index 00000000..36488e93
--- /dev/null
+++ b/sdc-workflow-designer-ui/src/main/frontend/resources/scss/components/_loader.scss
@@ -0,0 +1,159 @@
+.onboarding-loader {
+    .onboarding-loader-backdrop {
+      top: 0;
+      right: 0;
+      bottom: 0;
+      left: 0;
+      position: absolute;
+      background-color: #E1E4E6;
+      opacity: 0.5;
+      z-index: 99999;
+    }
+    .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;
+      }
+    }
+  }
diff --git a/sdc-workflow-designer-ui/src/main/frontend/resources/scss/components/_navigationSideBar.scss b/sdc-workflow-designer-ui/src/main/frontend/resources/scss/components/_navigationSideBar.scss
new file mode 100644
index 00000000..c830c028
--- /dev/null
+++ b/sdc-workflow-designer-ui/src/main/frontend/resources/scss/components/_navigationSideBar.scss
@@ -0,0 +1,60 @@
+.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-emphasis;
+        @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-emphasis;
+            border-left: 4px solid $blue;
+            padding-left: 18px;
+            color: $blue;
+          }
+          &.bold-name {
+            @include body-1-emphasis;
+          }
+        }
+      }
+    }
+  }
+}
diff --git a/sdc-workflow-designer-ui/src/main/frontend/resources/scss/components/_notifications.scss b/sdc-workflow-designer-ui/src/main/frontend/resources/scss/components/_notifications.scss
new file mode 100644
index 00000000..855c372e
--- /dev/null
+++ b/sdc-workflow-designer-ui/src/main/frontend/resources/scss/components/_notifications.scss
@@ -0,0 +1,8 @@
+.workflow-notifications-container {
+  position: absolute;
+  z-index: 99999;
+  &.position-top-right {
+    right: 30px;
+    top: 50px;
+  }
+}
\ No newline at end of file
diff --git a/sdc-workflow-designer-ui/src/main/frontend/resources/scss/components/_scrollbars.scss b/sdc-workflow-designer-ui/src/main/frontend/resources/scss/components/_scrollbars.scss
new file mode 100644
index 00000000..d036c714
--- /dev/null
+++ b/sdc-workflow-designer-ui/src/main/frontend/resources/scss/components/_scrollbars.scss
@@ -0,0 +1,63 @@
+.ps__rail-x {
+    opacity: 1;
+    height: 4px;
+    /* there must be 'bottom' or 'top' for ps__rail-x */
+    bottom: 0px;
+}
+
+.ps__rail-y {
+    opacity: 1;
+    width: 4px;
+    /* there must be 'right' or 'left' for ps__rail-y */
+    right: 0;
+}
+
+.ps__thumb-x {
+    background-color: $light-gray;
+    border-radius: 0px;
+    height: 4px;
+    /* there must be 'bottom' for ps__thumb-x */
+    bottom: 0px;
+}
+
+.ps__thumb-y {
+    background-color: $light-gray;
+    border-radius: 0px;
+    width: 4px;
+    /* there must be 'right' for ps__thumb-y */
+    right: 0px;
+}
+
+.ps:hover > .ps__rail-x,
+.ps:hover > .ps__rail-y,
+.ps--focus > .ps__rail-x,
+.ps--focus > .ps__rail-y,
+.ps--scrolling-x > .ps__rail-x,
+.ps--scrolling-y > .ps__rail-y {
+    opacity: 1;
+    background-color: transparent;
+}
+
+.ps .ps__rail-x:hover,
+.ps .ps__rail-y:hover,
+.ps .ps__rail-x:focus,
+.ps .ps__rail-y:focus,
+.ps .ps__rail-x.ps--clicking,
+.ps .ps__rail-y.ps--clicking {
+    opacity: 1;
+    background-color: transparent;
+}
+
+.ps__rail-x:hover > .ps__thumb-x,
+.ps__rail-x:focus > .ps__thumb-x,
+.ps__rail-x.ps--clicking .ps__thumb-x {
+    background-color: $light-gray;
+    height: 4px;
+}
+
+.ps__rail-y:hover > .ps__thumb-y,
+.ps__rail-y:focus > .ps__thumb-y,
+.ps__rail-y.ps--clicking .ps__thumb-y {
+    background-color: $light-gray;
+    width: 4px;
+}
diff --git a/sdc-workflow-designer-ui/src/main/frontend/resources/scss/components/_searchInput.scss b/sdc-workflow-designer-ui/src/main/frontend/resources/scss/components/_searchInput.scss
new file mode 100644
index 00000000..efd68496
--- /dev/null
+++ b/sdc-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/sdc-workflow-designer-ui/src/main/frontend/resources/scss/components/_tree.scss b/sdc-workflow-designer-ui/src/main/frontend/resources/scss/components/_tree.scss
new file mode 100644
index 00000000..58f1f995
--- /dev/null
+++ b/sdc-workflow-designer-ui/src/main/frontend/resources/scss/components/_tree.scss
@@ -0,0 +1,56 @@
+
+.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-emphasis;
+			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/sdc-workflow-designer-ui/src/main/frontend/resources/scss/components/_validationForm.scss b/sdc-workflow-designer-ui/src/main/frontend/resources/scss/components/_validationForm.scss
new file mode 100644
index 00000000..176e5469
--- /dev/null
+++ b/sdc-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/sdc-workflow-designer-ui/src/main/frontend/resources/scss/components/_versionController.scss b/sdc-workflow-designer-ui/src/main/frontend/resources/scss/components/_versionController.scss
new file mode 100644
index 00000000..3cf9b05e
--- /dev/null
+++ b/sdc-workflow-designer-ui/src/main/frontend/resources/scss/components/_versionController.scss
@@ -0,0 +1,196 @@
+.version-controller-bar {
+    display: flex;
+    height: 70px;
+    border-bottom: 1px solid $silver;
+    background-color: transparent;
+    justify-content: space-between;
+    .group-name-wrapper {
+        width: 245px;
+        .group-name {
+            @include heading-4-emphasis;
+            @include ellipsis;
+            display: block;
+            padding: 24px 12px 13px 20px;
+            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: 100px;
+        border-left: 1px solid #eaeaea;
+        height: 45px;
+        &.vs-container-operation {
+            flex: inherit;
+        }
+        .vc-separator {
+            border-left: 1px solid $silver;
+            height: 37px;
+        }
+
+        .version-status-container {
+            display: flex;
+            align-items: center;
+            .version-selector-more-versions {
+                @include body-1-emphasis;
+                color: $blue;
+                cursor: pointer;
+            }
+
+            .version-selector {
+                margin-top: 0;
+                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: 20px;
+                }
+
+                .version-control-buttons {
+                    display: flex;
+                }
+
+                .action-button-wrapper {
+                    display: flex;
+                    align-items: center;
+                    height: 70px;
+                    padding: 10px;
+
+                    &:hover {
+                        background-color: $silver;
+                    }
+
+                    &:active {
+                        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;
+                            }
+                        }
+                        .vs-back-btn {
+                            height: '35px';
+                            width: '35px';
+                            .svg-icon {
+                                height: '35px';
+                                width: '35px';
+                                transform: rotate(90deg);
+                            }
+                        }
+                    }
+                }
+
+                .action-button-label {
+                    @include body-4;
+                    display: block;
+                    height: 1em;
+                    margin-top: 5px;
+                    margin-bottom: 0;
+                }
+            }
+        }
+    }
+}