summaryrefslogtreecommitdiffstats
path: root/openecomp-ui/resources/scss/components
diff options
context:
space:
mode:
Diffstat (limited to 'openecomp-ui/resources/scss/components')
-rw-r--r--openecomp-ui/resources/scss/components/_buttons.scss46
-rw-r--r--openecomp-ui/resources/scss/components/_dropzone.scss8
-rw-r--r--openecomp-ui/resources/scss/components/_dualListBox.scss46
-rw-r--r--openecomp-ui/resources/scss/components/_expandableInput.scss61
-rw-r--r--openecomp-ui/resources/scss/components/_forms.scss45
-rw-r--r--openecomp-ui/resources/scss/components/_inputOptions.scss39
-rw-r--r--openecomp-ui/resources/scss/components/_listEditorView.scss157
-rw-r--r--openecomp-ui/resources/scss/components/_loader.scss159
-rw-r--r--openecomp-ui/resources/scss/components/_navigationSideBar.scss62
-rw-r--r--openecomp-ui/resources/scss/components/_notifications.scss29
-rw-r--r--openecomp-ui/resources/scss/components/_progressBar.scss24
-rw-r--r--openecomp-ui/resources/scss/components/_punchOut.scss12
-rw-r--r--openecomp-ui/resources/scss/components/_sequenceDiagram.scss11
-rw-r--r--openecomp-ui/resources/scss/components/_slidePanel.scss35
-rw-r--r--openecomp-ui/resources/scss/components/_submitErrorResponse.scss23
-rw-r--r--openecomp-ui/resources/scss/components/_toggleInput.scss62
-rw-r--r--openecomp-ui/resources/scss/components/_validationForm.scss102
-rw-r--r--openecomp-ui/resources/scss/components/_versionController.scss109
18 files changed, 1030 insertions, 0 deletions
diff --git a/openecomp-ui/resources/scss/components/_buttons.scss b/openecomp-ui/resources/scss/components/_buttons.scss
new file mode 100644
index 0000000000..b39ea495ab
--- /dev/null
+++ b/openecomp-ui/resources/scss/components/_buttons.scss
@@ -0,0 +1,46 @@
+
+$plus-circle-icon-size: 18px;
+.plus-icon-button {
+ background: url($plus-circle-icon) no-repeat;
+ background-size: $plus-circle-icon-size;
+ width: $plus-circle-icon-size;
+ height: $plus-circle-icon-size;
+ cursor: pointer;
+ &.small {
+ background-size: $plus-circle-icon-size - 6;
+ width: $plus-circle-icon-size - 6;
+ height: $plus-circle-icon-size - 6;
+ }
+}
+
+.primary-btn{
+ border: 1px solid;
+ border-color: $blue;
+ color: $blue;
+ font-weight: bolder;
+ @extend .body-1;
+ text-align: center;
+ padding: 7px;
+ border-radius: 5px;
+ cursor: pointer;
+ align-self: center;
+ background-color: $white;
+ .primary-btn-text {
+ width: 100%;
+ }
+ &:hover {
+ color: $blue;
+ border-color: $blue;
+ background-color: $tlv-hover;
+ &:active {
+ color: $blue;
+ border-color: $blue;
+ }
+ }
+
+ &:focus:not(:hover) {
+ color: $blue;
+ border-color: $blue;
+ background-color: $white;
+ }
+}
diff --git a/openecomp-ui/resources/scss/components/_dropzone.scss b/openecomp-ui/resources/scss/components/_dropzone.scss
new file mode 100644
index 0000000000..cad752d415
--- /dev/null
+++ b/openecomp-ui/resources/scss/components/_dropzone.scss
@@ -0,0 +1,8 @@
+
+.active-dragging {
+ border: 3px dashed $dark-blue;
+ border-radius: 20px;
+ .draggable-wrapper {
+ opacity: 0.5;
+ }
+}
diff --git a/openecomp-ui/resources/scss/components/_dualListBox.scss b/openecomp-ui/resources/scss/components/_dualListBox.scss
new file mode 100644
index 0000000000..543c1c8b92
--- /dev/null
+++ b/openecomp-ui/resources/scss/components/_dualListBox.scss
@@ -0,0 +1,46 @@
+.dual-list-box {
+ display: flex;
+ margin: 25px 0 10px 0;
+
+ .dual-search-multi-select-section {
+ $multi-select-box-width: 398px;
+ width: $multi-select-box-width;
+ .dual-text-box-search-title, .dual-list-box-multi-select-text {
+ @extend .body-1;
+ color: $dark-gray;
+ }
+ .dual-text-box-search {
+ margin: 5px 0 30px 0;
+ }
+ .dual-list-box-multi-select {
+ flex: 1 1;
+ display: flex;
+ height: 166px;
+ margin-bottom: 0;
+ select {
+ width: 100%;
+ margin: 0;
+ padding: 0;
+ overflow-y: scroll;
+ height: inherit;
+ option {
+ padding: 4px 0 4px 10px;
+ }
+ }
+ }
+ }
+ .dual-list-options-bar {
+ margin: 62px 54px 27px 54px;
+ padding-top: 23px;
+ .dual-list-option {
+ text-align: center;
+ line-height: 10px;
+ font-size: 25px;
+ width: 20px;
+ height: 15px;
+ cursor: pointer;
+ margin-top: 20px;
+ color: $blue;
+ }
+ }
+}
diff --git a/openecomp-ui/resources/scss/components/_expandableInput.scss b/openecomp-ui/resources/scss/components/_expandableInput.scss
new file mode 100644
index 0000000000..52f410a61b
--- /dev/null
+++ b/openecomp-ui/resources/scss/components/_expandableInput.scss
@@ -0,0 +1,61 @@
+$transitionLength: 0.5s;
+
+@mixin expand-transition($tl){
+ transition: width $tl, background-color $tl, cursor $tl;
+}
+
+@mixin color-transition($tl){
+ transition: color $tl;
+}
+
+.expandable-input-wrapper {
+ display: flex;
+ &:hover{
+ .form-control {
+ border-color: $gray;
+ }
+ }
+ .expandable-input-control {
+ flex: 1 1;
+ margin: 0;
+ .form-control {
+ border-radius: 20px;
+ }
+ align-self: center;
+ }
+ .expandable-active {
+ @include expand-transition($transitionLength);
+ width: 215px;
+ cursor: text;
+ }
+ .expandable-not-active {
+ @include expand-transition($transitionLength);
+ width: 28px;
+ cursor: pointer;
+ background-color: transparent;
+ color: transparent;
+ }
+
+ .expandable-icon {
+ @include color-transition($transitionLength);
+ position: relative;
+ left: -20px;
+ align-self: center;
+ width: 0;
+ cursor: pointer;
+ color: $dark-gray;
+ }
+
+ .expandable-close-button{
+ @extend .expandable-icon;
+ color: $gray;
+ opacity: 0.5;
+ &:hover {
+ opacity: 1;
+ }
+ }
+ .expandable-icon-active {
+ @include color-transition($transitionLength);
+ color: $blue;
+ }
+}
diff --git a/openecomp-ui/resources/scss/components/_forms.scss b/openecomp-ui/resources/scss/components/_forms.scss
new file mode 100644
index 0000000000..3c50fe694a
--- /dev/null
+++ b/openecomp-ui/resources/scss/components/_forms.scss
@@ -0,0 +1,45 @@
+.section-title {
+ @extend .heading-3-medium;
+ padding: 50px 0 30px 0;
+ &:first-child {
+ padding: 0 0 30px 0;
+ }
+}
+.dropdown-multi-select {
+ .Select {
+ display: block;
+ width: 100%;
+ .Select-control {
+ height: 28px;
+ border-radius: 2px;
+ .Select-input {
+ height: 28px;
+ input {
+ height: 28px;
+ padding: 0;
+ }
+ }
+ .Select-placeholder {
+ line-height: 30px;
+ }
+ }
+ &.Select--multi {
+ .Select-value {
+ color: $text-black;
+ background-color: transparent;
+ border-color: $light-gray;
+ margin-top: 2px;
+ margin-left: 2px;
+ border-radius: 1px;
+ }
+ .Select-value-icon {
+ border-right-color: $light-gray;
+ }
+ .Select-arrow-zone {
+ padding-top: 4px;
+ }
+ }
+ }
+}
+
+
diff --git a/openecomp-ui/resources/scss/components/_inputOptions.scss b/openecomp-ui/resources/scss/components/_inputOptions.scss
new file mode 100644
index 0000000000..107751b07b
--- /dev/null
+++ b/openecomp-ui/resources/scss/components/_inputOptions.scss
@@ -0,0 +1,39 @@
+.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: #A94442;
+}
+
diff --git a/openecomp-ui/resources/scss/components/_listEditorView.scss b/openecomp-ui/resources/scss/components/_listEditorView.scss
new file mode 100644
index 0000000000..704faaf098
--- /dev/null
+++ b/openecomp-ui/resources/scss/components/_listEditorView.scss
@@ -0,0 +1,157 @@
+.list-editor-view {
+ @extend .flex-column;
+ background-color: $content-background-color;
+
+ .list-editor-view-title {
+ @extend .section-title;
+ }
+
+ .list-editor-view-title-inline {
+ @extend .list-editor-view-title;
+ position: relative;
+ top: 9px;
+ &:first-child {
+ padding: 0;
+ }
+ }
+
+ .list-editor-view-add-section {
+ display: inline-block;
+ padding: 0 10px 0 10px;
+ }
+
+ .list-editor-view-actions {
+ display: flex;
+ justify-content: space-between;
+ align-items: center;
+ border-bottom: 1px solid $light-gray;
+ padding-bottom: 18px;
+ .list-editor-view-add-controller {
+ @extend .body-1-medium;
+ color: $blue;
+ display: table;
+ cursor: pointer;
+ position: relative;
+ top: 9px;
+ span {
+ display: table-cell;
+ vertical-align: middle;
+ &:nth-child(2) {
+ padding-left: 10px;
+ }
+ }
+ }
+
+ .search-wrapper {
+ width: 265px;
+ }
+ }
+
+ .list-editor-view-list-scroller {
+ @extend .flex;
+ overflow: auto;
+ margin: 18px 0 30px 0;
+ }
+
+ .list-editor-view-list {
+ @extend .flex-column;
+
+
+ .list-editor-item-view {
+ margin: 8px 0;
+ border: 1px solid $light-gray;
+ background-color: $white;
+ cursor: pointer;
+ display: flex;
+ height: 100px;
+ min-height: 100px;
+ overflow: hidden;
+ .list-editor-item-view-content {
+ padding: 10px 28px;
+ display: flex;
+ flex-basis: 95%;
+ width: 95%;
+ .list-editor-item-view-field {
+ flex: 1 1;
+ color: $black;
+ padding: 0;
+ @include ellipsis;
+ overflow-wrap: break-word;
+ white-space: initial;
+ .number-field {
+ align-content: center;
+ }
+ .title {
+ @extend .body-1;
+ padding-bottom: 5px;
+ &:not(:first-child) {
+ line-height: 0.9;
+ }
+ }
+ .text {
+ @extend .body-1;
+ }
+ }
+ }
+ .list-editor-item-view-controller {
+ display: flex;
+ flex-basis: 5%;
+ align-self: center;
+ justify-content: center;
+ flex-direction: column;
+ .fa {
+ transition: color .3s;
+ font-size: 22px;
+ color: $white;
+ &:first-child{
+ margin-bottom: 10px;
+ }
+ }
+ }
+ &:hover {
+ @extend .box-hover;
+ .list-editor-item-view-controller {
+ .fa {
+ color: $gray;
+ }
+ }
+ }
+ }
+ }
+
+ &.thinner-list {
+ background-color: $white;
+ padding: 0;
+ margin-top: 35px;
+
+ .list-editor-view-list {
+ border-top: 0;
+ padding-top: 0;
+ margin-top: 23px;
+ .list-editor-item-view {
+ &:hover {
+ border-color: $light-gray;
+ }
+ margin: 5px 0 0 0;
+ height: 30px;
+ border-top: 0;
+ border-left: 0;
+ border-right: 0;
+ .list-editor-item-view-content {
+ padding: 4px;
+ .name {
+ @extend .body-2-medium;
+ flex-basis: 36%;
+ }
+ }
+ .list-editor-item-view-controller {
+ .fa-trash-o {
+ font-size: 20px;
+ }
+ }
+ }
+ }
+ }
+}
+
+
diff --git a/openecomp-ui/resources/scss/components/_loader.scss b/openecomp-ui/resources/scss/components/_loader.scss
new file mode 100644
index 0000000000..ddff9af6e3
--- /dev/null
+++ b/openecomp-ui/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;
+ }
+ .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: $orange;
+ 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: $orange;
+ left: 21px;
+ top: 0;
+ }
+ 31.25% {
+ background-color: $orange;
+ left: 42px;
+ top: 21px;
+ }
+ 37.5% {
+ background-color: $orange;
+ left: 21px;
+ top: 42px;
+ }
+ 43.75% {
+ background-color: $orange;
+ 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/openecomp-ui/resources/scss/components/_navigationSideBar.scss b/openecomp-ui/resources/scss/components/_navigationSideBar.scss
new file mode 100644
index 0000000000..404f43ca68
--- /dev/null
+++ b/openecomp-ui/resources/scss/components/_navigationSideBar.scss
@@ -0,0 +1,62 @@
+.software-product-navigation-side-bar {
+ width: 245px;
+ height: 100%;
+ background-color: $white;
+ border-right: 1px solid $light-gray;
+ box-shadow: 1px -1px 3px 0px $tlv-light-gray;
+ border-bottom: 0;
+
+ .navigation-side-content {
+ overflow: hidden;
+ height: 100%;
+
+ .navigation-group {
+ height: 100%;
+ display: flex;
+ flex-direction: column;
+ background-color: $tlv-gray;
+ .group-name {
+ @extend .heading-5-medium;
+ @include ellipsis;
+ min-height: 56px;
+ display: block;
+ padding: 18px 12px 16px 40px;
+ background-color: $white;
+ border-bottom: 1px solid $tlv-light-gray;
+ }
+ }
+
+ .navigation-group-items {
+ padding-left: 20px;
+ overflow-y: auto;
+
+ .navigation-group-item {
+ @extend .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 {
+ @extend .body-1-medium;
+ border-left: 4px solid $blue;
+ padding-left: 18px;
+ color: $blue;
+ }
+ &.bold-name {
+ @extend .body-1-medium;
+ }
+ }
+ }
+ }
+ }
+}
diff --git a/openecomp-ui/resources/scss/components/_notifications.scss b/openecomp-ui/resources/scss/components/_notifications.scss
new file mode 100644
index 0000000000..426f05cd89
--- /dev/null
+++ b/openecomp-ui/resources/scss/components/_notifications.scss
@@ -0,0 +1,29 @@
+
+.notification-modal {
+
+ .modal-content {
+ .modal-header {
+ padding: 15px 10px 10px;
+ .modal-title {
+ @extend .heading-5-medium;
+ }
+ }
+ .modal-body {
+ padding: 30px 15px;
+ @extend .body-1-medium;
+ }
+ }
+
+ &.danger {
+ .modal-content .modal-header {
+ border-top: 3px solid $red;
+ }
+ }
+
+ &.warning {
+ .modal-content .modal-header {
+ border-top: 3px solid $yellow;
+ }
+ }
+
+}
diff --git a/openecomp-ui/resources/scss/components/_progressBar.scss b/openecomp-ui/resources/scss/components/_progressBar.scss
new file mode 100644
index 0000000000..040c8cefd7
--- /dev/null
+++ b/openecomp-ui/resources/scss/components/_progressBar.scss
@@ -0,0 +1,24 @@
+ .progress-bar-view {
+ display: -webkit-box;
+ padding: 5px;
+ .progress-bar-outside {
+ display: flex;
+ width: 90%;
+ justify-content: space-between;
+ background-color: lightgray;
+ border-radius: 15px;
+ height: 10px;
+ .progress-bar-inside {
+ display: block;
+ border: 1px solid gainsboro;
+ background-color: #4faa39;
+ border-radius: inherit;
+ }
+ }
+ .progress-bar-view-label {
+ margin-right: -30px;
+ margin-top: -2px;
+ margin-left: 10px;
+ color: black;
+ }
+ }
diff --git a/openecomp-ui/resources/scss/components/_punchOut.scss b/openecomp-ui/resources/scss/components/_punchOut.scss
new file mode 100644
index 0000000000..65ba24d884
--- /dev/null
+++ b/openecomp-ui/resources/scss/components/_punchOut.scss
@@ -0,0 +1,12 @@
+&.dox-ui-punch-out {
+ background-color: $content-background-color;
+}
+
+&.dox-ui-punch-out.dox-ui-punch-out-full-page {
+ position: absolute;
+ top: 0;
+ bottom: 0;
+ left: 0;
+ right: 0;
+ overflow-y: auto;
+}
diff --git a/openecomp-ui/resources/scss/components/_sequenceDiagram.scss b/openecomp-ui/resources/scss/components/_sequenceDiagram.scss
new file mode 100644
index 0000000000..5fad92a668
--- /dev/null
+++ b/openecomp-ui/resources/scss/components/_sequenceDiagram.scss
@@ -0,0 +1,11 @@
+.sequence-diagram {
+ @extend .flex-column;
+ .sequence-diagram-sequencer {
+ flex: 0 1 auto;
+ margin-bottom: 30px;
+ }
+ .sequence-diagram-action-buttons {
+ flex: 0.1;
+ text-align: center;
+ }
+}
diff --git a/openecomp-ui/resources/scss/components/_slidePanel.scss b/openecomp-ui/resources/scss/components/_slidePanel.scss
new file mode 100644
index 0000000000..61c9a189f0
--- /dev/null
+++ b/openecomp-ui/resources/scss/components/_slidePanel.scss
@@ -0,0 +1,35 @@
+
+.slide-panel {
+ transition: left .5s,right .5s;
+
+ .slide-panel-header {
+ padding: 10px;
+ height: 45px;
+ display: table;
+ width: 100%;
+ .slide-panel-header-title, .collapse-double-icon {
+ display: table-cell;
+ vertical-align: middle;
+ }
+ .slide-panel-header-title {
+ @extend .body-2;
+ text-align: center;
+ width: 100%;
+ color: $text-black;
+ }
+ .collapse-double-icon {
+ color: $text-black;
+ cursor: pointer;
+ }
+ }
+
+ .slide-panel-content {
+ opacity: 1;
+ transition: opacity .5s, visibility .5s;
+
+ &.closed {
+ opacity: 0;
+ visibility: hidden;
+ }
+ }
+}
diff --git a/openecomp-ui/resources/scss/components/_submitErrorResponse.scss b/openecomp-ui/resources/scss/components/_submitErrorResponse.scss
new file mode 100644
index 0000000000..fdac5ebe45
--- /dev/null
+++ b/openecomp-ui/resources/scss/components/_submitErrorResponse.scss
@@ -0,0 +1,23 @@
+
+.submit-error-response-view {
+ max-height: 500px;
+ overflow: auto;
+ .list-group-item {
+ border-top: none;
+ }
+ .panel-title {
+ a {
+ &:after {
+
+ content: "(details)";
+ color: $link-blue;
+ float: right;
+
+ }
+ &:hover {
+ color: $blue;
+ text-decoration: underline;
+ }
+ }
+ }
+}
diff --git a/openecomp-ui/resources/scss/components/_toggleInput.scss b/openecomp-ui/resources/scss/components/_toggleInput.scss
new file mode 100644
index 0000000000..fcf0902adf
--- /dev/null
+++ b/openecomp-ui/resources/scss/components/_toggleInput.scss
@@ -0,0 +1,62 @@
+.toggle-input-wrapper {
+ $toggle-width: 40px;
+ $toggle-height: 20px;
+ display: table;
+ .toggle-switch, .toggle-input-label {
+ display: table-cell;
+ vertical-align: middle;
+ padding-left: 10px;
+ }
+ .toggle {
+ position: absolute;
+ margin-left: -9999px;
+ visibility: hidden;
+ }
+ .toggle + label {
+ @extend %noselect;
+ display: block;
+ position: relative;
+ cursor: pointer;
+ outline: none;
+ }
+
+ input.toggle-round-flat + label {
+ padding: 1px;
+ width: $toggle-width;
+ height: $toggle-height;
+ background-color: $dark-gray;
+ border-radius: $toggle-height;
+ transition: background 0.4s;
+ }
+ input.toggle-round-flat + label:before,
+ input.toggle-round-flat + label:after {
+ display: block;
+ position: absolute;
+ content: "";
+ }
+ input.toggle-round-flat + label:before {
+ top: 1px;
+ left: 1px;
+ bottom: 1px;
+ right: 1px;
+ background-color: $white;
+ border-radius: $toggle-height;
+ transition: background 0.4s;
+ }
+ input.toggle-round-flat + label:after {
+ top: 4px;
+ left: 4px;
+ bottom: 4px;
+ width: $toggle-height - 8;
+ background-color: $dark-gray;
+ border-radius: $toggle-height - 8;
+ transition: margin 0.4s, background 0.4s;
+ }
+ input.toggle-round-flat:checked + label {
+ background-color: $link-blue;
+ }
+ input.toggle-round-flat:checked + label:after {
+ margin-left: $toggle-height;
+ background-color: $link-blue;
+ }
+}
diff --git a/openecomp-ui/resources/scss/components/_validationForm.scss b/openecomp-ui/resources/scss/components/_validationForm.scss
new file mode 100644
index 0000000000..93444c2e88
--- /dev/null
+++ b/openecomp-ui/resources/scss/components/_validationForm.scss
@@ -0,0 +1,102 @@
+form {
+ .validation-form-content {
+ .validation-input-wrapper {
+ position: relative;
+ flex: 1;
+ }
+ .nav-tabs {
+ .invalid-tab:not(.active) {
+ a {
+ 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: ' ';
+ }
+ &.add-line-break {
+ .control-label {
+ &:after {
+ content: "\00a0";
+ display: block;
+ }
+ }
+ }
+ }
+ }
+ }
+
+ .validation-buttons {
+ padding: 20px 0;
+ text-align: right;
+ button:first-child {
+ margin-right: 15px;
+ }
+ }
+}
+
+.modal-body {
+ .validation-buttons {
+ padding: 20px 15px;
+ background-color: $tlv-gray;
+ }
+}
diff --git a/openecomp-ui/resources/scss/components/_versionController.scss b/openecomp-ui/resources/scss/components/_versionController.scss
new file mode 100644
index 0000000000..3511470bfb
--- /dev/null
+++ b/openecomp-ui/resources/scss/components/_versionController.scss
@@ -0,0 +1,109 @@
+.version-controller-bar {
+ .navbar-inverse {
+ @extend .body-1-medium;
+ background-color: transparent;
+ border-bottom: $tlv-light-gray thin solid;
+ padding-top: 14px;
+ padding-bottom: 12px;
+ margin-bottom: 0;
+ .container {
+ width: 100%;
+ padding: 0 52px;
+ height: 30px;
+ .navbar-collapse {
+ padding-left: 0;
+ .items-in-left {
+ display: flex;
+ height: 30px;
+ .version-section {
+ .form-group {
+ margin-right: 5px;
+ .input-options {
+ border: none;
+ .input-options-select {
+ padding-top: 4px;
+ }
+ }
+ }
+ }
+ .vc-status {
+ display: flex;
+ padding-left: 14px;
+ border-left: $light-gray thin solid;
+ .status-text {
+ align-self: center;
+ display: flex;
+ padding-left: 3px;
+ .status-text-dash {
+ padding: 0 9px;
+ }
+ }
+ .onboarding-status-icon {
+ width: 25px;
+ height: 19px;
+ background-image: url('../images/ecomp/ASDC_Sprite.png');
+ background-position: -306px 674px;
+ align-self: center;
+ }
+ .checkout-status-icon {
+ display: flex;
+ & > .catalog-tile-check-in-status.sprite-new.checkout-editable-status-icon {
+ width: 25px;
+ height: 19px;
+ align-self: center;
+ margin-left: 5px;
+ }
+ }
+ }
+ }
+ .items-in-right {
+ display: flex;
+ height: 30px;
+ .action-buttons {
+ display: flex;
+ border-right: $gray thin solid;
+ padding: 0 13px;
+ .version-control-buttons {
+ display: flex;
+ }
+ .vc-nav-item-button {
+ border: 1px solid $light-gray;
+ border-radius: 5px;
+ cursor: pointer;
+ margin-right:10px;
+ padding: 6px 20px;
+ &:hover, &:focus {
+ background-color: lightgrey;
+ }
+ &.button-submit{
+ background-color: transparent;
+ color: $green;
+ border-color: $green;
+ }
+ &.button-checkin-checkout {
+ background-color: $white;
+ @extend .body-1;
+ }
+ }
+ .revert-btn, .save-btn {
+ height: 24px;
+ width: 24px;
+ align-self: center;
+ cursor: pointer;
+ margin-right: 10px;
+ }
+ }
+ .vc-nav-item-close {
+ display: flex;
+ padding-left: 18px;
+ padding-top: 3px;
+ align-self: center;
+ @extend .body-1;
+ color: $gray;
+ cursor: pointer;
+ }
+ }
+ }
+ }
+ }
+}