aboutsummaryrefslogtreecommitdiffstats
path: root/openecomp-ui/resources/scss/components
diff options
context:
space:
mode:
authorEinav Weiss Keidar <einavw@amdocs.com>2018-08-13 16:19:46 +0300
committerAvi Gaffa <avi.gaffa@amdocs.com>2019-02-11 13:50:22 +0000
commit1801b24389baa8e3f7298ff2c41e2512b19c1290 (patch)
treed3d2a15f53aa28698280d609548298d177f9280d /openecomp-ui/resources/scss/components
parentaf8e36eb7f43803bd9cf40e9b46a0c0c8f47c781 (diff)
react 16 upgrade
Issue-ID: SDC-1762 Change-Id: I7701f12fc63bb09f8c985c7c893b984701dcbfab Signed-off-by: Einav Keidar <einavw@amdocs.com>
Diffstat (limited to 'openecomp-ui/resources/scss/components')
-rw-r--r--openecomp-ui/resources/scss/components/_activityLog.scss173
-rw-r--r--openecomp-ui/resources/scss/components/_commitModal.scss17
-rw-r--r--openecomp-ui/resources/scss/components/_datepicker.scss222
-rw-r--r--openecomp-ui/resources/scss/components/_dropzone.scss53
-rw-r--r--openecomp-ui/resources/scss/components/_dualListBox.scss92
-rw-r--r--openecomp-ui/resources/scss/components/_expandableInput.scss107
-rw-r--r--openecomp-ui/resources/scss/components/_forms.scss132
-rw-r--r--openecomp-ui/resources/scss/components/_grid.scss114
-rw-r--r--openecomp-ui/resources/scss/components/_inputOptions.scss145
-rw-r--r--openecomp-ui/resources/scss/components/_listEditorView.scss284
-rw-r--r--openecomp-ui/resources/scss/components/_loader.scss312
-rw-r--r--openecomp-ui/resources/scss/components/_navigationSideBar.scss108
-rw-r--r--openecomp-ui/resources/scss/components/_notifications.scss35
-rw-r--r--openecomp-ui/resources/scss/components/_overlay.scss50
-rw-r--r--openecomp-ui/resources/scss/components/_progressBar.scss38
-rw-r--r--openecomp-ui/resources/scss/components/_selectActionTable.scss281
-rw-r--r--openecomp-ui/resources/scss/components/_sequenceDiagram.scss32
-rw-r--r--openecomp-ui/resources/scss/components/_submitErrorResponse.scss116
-rw-r--r--openecomp-ui/resources/scss/components/_toggleInput.scss119
-rw-r--r--openecomp-ui/resources/scss/components/_tree.scss105
-rw-r--r--openecomp-ui/resources/scss/components/_userNotifications.scss225
-rw-r--r--openecomp-ui/resources/scss/components/_validationForm.scss204
-rw-r--r--openecomp-ui/resources/scss/components/_versionController.scss513
-rw-r--r--openecomp-ui/resources/scss/components/_vnfBrowse.scss192
-rw-r--r--openecomp-ui/resources/scss/components/_vspDetailsVendorSelect.scss6
25 files changed, 1863 insertions, 1812 deletions
diff --git a/openecomp-ui/resources/scss/components/_activityLog.scss b/openecomp-ui/resources/scss/components/_activityLog.scss
index 7a5b77b58c..dbe805f215 100644
--- a/openecomp-ui/resources/scss/components/_activityLog.scss
+++ b/openecomp-ui/resources/scss/components/_activityLog.scss
@@ -1,101 +1,98 @@
$message-info-icon-size: 16px;
@mixin status-icon-class {
- @extend .body-1-light;
- width: $message-info-icon-size;
- height: $message-info-icon-size;
- margin-left: 8px;
- color: $white;
- border-radius: $message-info-icon-size / 2;
- display: inline-block;
- text-align: center;
+ @extend .body-1-light;
+ width: $message-info-icon-size;
+ height: $message-info-icon-size;
+ margin-left: 8px;
+ color: $white;
+ border-radius: $message-info-icon-size / 2;
+ display: inline-block;
+ text-align: center;
}
.activity-log-view {
+ .list-editor-view .list-editor-view-header {
+ border: none;
+ .list-editor-view-title {
+ @extend .heading-1;
+ color: $blue;
+ }
+ }
+ .list-editor-view-list {
+ border: 1px solid $light-gray;
+ border-bottom: none;
+ overflow-y: hidden;
+ }
+ .activity-list-item {
+ display: flex;
+ height: 36px;
+ @extend .body-1;
+ &.header {
+ @extend .body-1-semibold;
+ background-color: $tlv-light-gray;
+ color: $text-black;
+ }
+ }
- .list-editor-view .list-editor-view-header {
- border: none;
- .list-editor-view-title {
- @extend .heading-1;
- color: $blue;
- }
- }
- .list-editor-view-list {
- border: 1px solid $light-gray;
- border-bottom: none;
- overflow-y: hidden;
- }
- .activity-list-item {
- display: flex;
- height: 36px;
- @extend .body-1;
- &.header {
- @extend .body-1-semibold;
- background-color: $tlv-light-gray;
- color: $text-black;
- }
- }
+ .activity-status {
+ .svg-icon-wrapper {
+ float: right;
+ }
- .activity-status {
- .svg-icon-wrapper {
- float: right;
- }
+ .status-icon.false:after {
+ @include status-icon-class;
+ float: right;
+ background-color: $red;
+ content: '!';
+ }
+ }
- .status-icon.false:after {
- @include status-icon-class;
- float: right;
- background-color: $red;
- content: "!";
- }
- }
+ .message-further-info-icon {
+ @include status-icon-class;
+ background-color: $gray;
+ }
- .message-further-info-icon {
- @include status-icon-class;
- background-color: $gray;
- }
+ .table-cell {
+ border-right: 1px solid $light-gray;
+ border-bottom: 1px solid $light-gray;
+ &:last-child {
+ border-right: none;
+ }
+ flex-basis: 20%;
+ display: flex;
+ padding: 0 20px;
+ justify-content: center;
+ flex-direction: column;
+ &.activity-comment {
+ min-width: 0;
+ span {
+ @include ellipsis(100%);
+ }
+ }
+ }
- .table-cell {
- border-right: 1px solid $light-gray;
- border-bottom: 1px solid $light-gray;
- &:last-child {
- border-right: none;
- }
- flex-basis: 20%;
- display: flex;
- padding: 0 20px;
- justify-content: center;
- flex-direction: column;
- &.activity-comment {
- min-width: 0;
- span {
- @include ellipsis(100%);
- }
- }
- }
-
- .date-header {
- cursor: pointer;
- display: flex;
- align-items: center;
- .header-sort-arrow {
- width: 0;
- height: 0;
- border-left: 5px solid transparent;
- border-right: 5px solid transparent;
- margin-left: 9px;
- &.up {
- border-bottom: 5px solid $black;
- }
- &.down {
- border-top: 5px solid $black;
- }
-
- }
- }
-
- .date-cell {
- display: flex;
- justify-content: space-between;
- }
+ .date-header {
+ cursor: pointer;
+ display: flex;
+ align-items: center;
+ .header-sort-arrow {
+ width: 0;
+ height: 0;
+ border-left: 5px solid transparent;
+ border-right: 5px solid transparent;
+ margin-left: 9px;
+ &.up {
+ border-bottom: 5px solid $black;
+ }
+ &.down {
+ border-top: 5px solid $black;
+ }
+ }
+ }
+ .date-cell {
+ display: flex;
+ justify-content: space-between;
+ }
}
diff --git a/openecomp-ui/resources/scss/components/_commitModal.scss b/openecomp-ui/resources/scss/components/_commitModal.scss
index e7f5d28933..47036ea22c 100644
--- a/openecomp-ui/resources/scss/components/_commitModal.scss
+++ b/openecomp-ui/resources/scss/components/_commitModal.scss
@@ -1,10 +1,9 @@
-
.comment-commit-form {
- .commit-modal-text {
- padding-bottom: 30px;
- }
- .validation-buttons .sdc-button-default{
- min-width: 94px;
- width: auto;
- }
-} \ No newline at end of file
+ .commit-modal-text {
+ padding-bottom: 30px;
+ }
+ .validation-buttons .sdc-button-default {
+ min-width: 94px;
+ width: auto;
+ }
+}
diff --git a/openecomp-ui/resources/scss/components/_datepicker.scss b/openecomp-ui/resources/scss/components/_datepicker.scss
index d51a1b690e..e9c0f40425 100644
--- a/openecomp-ui/resources/scss/components/_datepicker.scss
+++ b/openecomp-ui/resources/scss/components/_datepicker.scss
@@ -1,67 +1,163 @@
.customized-date-picker {
- margin-bottom: 24px;
- display: flex;
- .date-picker-label {
- &.required {
- &:before {
- content: "*";
- color: $red;
- margin: 0 4px 0 0;
- }
- }
+ margin-bottom: 24px;
+ display: flex;
+ > div:first-child {
+ flex: 1;
+ display: flex;
+ }
+ .react-datepicker-wrapper {
+ display: flex;
+ flex: 1;
+ }
+ .date-picker-label {
+ &.required {
+ &:before {
+ content: '*';
+ color: $red;
+ margin: 0 4px 0 0;
+ }
+ }
- @extend .body-2-semibold;
- color: $dark-gray;
- margin-bottom: 8px;
- }
- .react-datepicker__input-container {
- flex: 1;
- cursor: pointer;
- }
- .datepicker-custom-input {
- display: flex;
- justify-content: space-between;
- align-items: center;
- height: 30px;
- border-radius: 2px;
- color: $dark-gray;
- border: 1px solid $light-gray;
- padding: 6px 8px 6px 12px;
- .clear-input {
- margin-left: auto;
- margin-right: 8px;
- .svg-icon {
- fill: transparent;
- height: 8px;
- width: 8px;
- }
- }
- &:hover {
- border-color: $gray;
- .clear-input {
- .svg-icon {
- fill: initial;
- }
- }
- }
- .datepicker-text {
- cursor: pointer;
- @extend .body-1;
- &.placeholder {
- color: $light-gray;
- }
+ @extend .body-2-semibold;
+ color: $dark-gray;
+ margin-bottom: 8px;
+ }
+ .react-datepicker__input-container {
+ flex: 1;
+ cursor: pointer;
+ }
+ .datepicker-custom-input {
+ display: flex;
+ justify-content: space-between;
+ align-items: center;
+ height: 30px;
+ border-radius: 2px;
+ color: $dark-gray;
+ border: 1px solid $light-gray;
+ padding: 6px 8px 6px 12px;
+ .clear-input {
+ margin-left: auto;
+ margin-right: 8px;
+ .svg-icon {
+ fill: transparent;
+ height: 8px;
+ width: 8px;
+ }
+ }
+ &:hover {
+ border-color: $gray;
+ .clear-input {
+ .svg-icon {
+ fill: initial;
+ }
+ }
+ }
+ .datepicker-text {
+ cursor: pointer;
+ @extend .body-1;
+ &.placeholder {
+ color: $light-gray;
+ }
+ }
+ .calendar-input {
+ fill: $light-gray;
+ }
+ .svg-icon-wrapper.calendar {
+ .svg-icon {
+ fill: $dark-gray;
+ width: 17px;
+ height: 17px;
+ }
+ }
+ }
+ /* Out of namespace context for datepicker */
+ div.customized-date-picker-calendar {
+ @import 'common/variables';
+ @import 'common/typography';
+ border-color: $light-gray;
+ //margin-top: -8px;
+ color: $black;
+ .react-datepicker__triangle {
+ margin-top: 0px;
+ display: none;
+ }
- }
- .calendar-input {
- fill: $light-gray;
- }
- .svg-icon-wrapper.calendar {
- .svg-icon {
- fill: $dark-gray;
- width: 17px;
- height: 17px;
- }
- }
- }
-}
+ .react-datepicker__navigation--previous::before,
+ .react-datepicker__navigation--next::before {
+ width: 8px;
+ height: 8px;
+ display: inline-block;
+ position: absolute;
+ top: -4px;
+ }
+ .react-datepicker__navigation--previous::before {
+ left: 0;
+ content: url(../../node_modules/sdc-ui/assets/icons/angleLeft.svg);
+ }
+ .react-datepicker__navigation--next::before {
+ right: 0;
+ content: url(../../node_modules/sdc-ui/assets/icons/angleRight.svg);
+ }
+
+ .react-datepicker__navigation--previous,
+ .react-datepicker__navigation--next {
+ border: none;
+ }
+
+ .react-datepicker__month-container {
+ .react-datepicker__header {
+ background-color: $background-gray;
+ border-bottom: none;
+ .react-datepicker__current-month {
+ @extend .body-1-semibold;
+ background-color: $background-gray;
+ margin-bottom: 10px;
+ }
+ .react-datepicker__day-names {
+ @extend .body-1;
+ background-color: $white;
+ }
+ }
+ .react-datepicker__day--selected,
+ .react-datepicker__day--keyboard-selected {
+ @extend .body-1;
+ background-color: $blue;
+ color: $white;
+ }
+ .react-datepicker__day {
+ border-radius: 0px;
+ margin: 0;
+ flex: 1;
+ @extend .body-1;
+ }
+ .react-datepicker__day--in-range,
+ .react-datepicker__day--in-selecting-range {
+ background-color: $tlv-hover;
+ color: $black;
+ &.react-datepicker__day--selected,
+ &.react-datepicker__day--keyboard-selected,
+ &.react-datepicker__day--range-start,
+ &.react-datepicker__day--range-end {
+ background-color: $blue;
+ color: $white;
+ }
+ &.react-datepicker__day--selecting-range-start,
+ &.react-datepicker__day--selecting-range-end {
+ background-color: lighten($blue, 40%);
+ color: $black;
+ }
+ &.react-datepicker__day--selecting-range-start.react-datepicker__day--range-start,
+ &.react-datepicker__day--selecting-range-end.react-datepicker__day--range-end,
+ &.react-datepicker__day--selecting-range-start.react-datepicker__day--keyboard-selected {
+ background-color: $blue;
+ color: $white;
+ }
+ }
+
+ .react-datepicker__week {
+ display: flex;
+ }
+ }
+ }
+}
diff --git a/openecomp-ui/resources/scss/components/_dropzone.scss b/openecomp-ui/resources/scss/components/_dropzone.scss
index 2479ae7f0c..31a67d9e6b 100644
--- a/openecomp-ui/resources/scss/components/_dropzone.scss
+++ b/openecomp-ui/resources/scss/components/_dropzone.scss
@@ -1,31 +1,30 @@
-
.active-dragging {
- border: 3px dashed $dark-blue;
- border-radius: 20px;
- .draggable-wrapper {
- opacity: 0.5;
- }
+ border: 3px dashed $dark-blue;
+ border-radius: 20px;
+ .draggable-wrapper {
+ opacity: 0.5;
+ }
}
.file-upload-box {
- @extend .body-1;
- display: flex;
- text-align: center;
- flex-direction: column;
- justify-content: center;
- border: 2px dashed $light-gray;
- padding-top: 20px;
- padding-bottom: 20px;
- width: 382px;
- align-items: center;
- .upload-btn {
- padding: 4px 20px;
- }
- .drag-text {
- color: $blue;
- @extend .body-1-semibold;
- }
- .or-text {
- margin-top: 10px;
- margin-bottom: 10px;
- }
+ @extend .body-1;
+ display: flex;
+ text-align: center;
+ flex-direction: column;
+ justify-content: center;
+ border: 2px dashed $light-gray;
+ padding-top: 20px;
+ padding-bottom: 20px;
+ width: 382px;
+ align-items: center;
+ .upload-btn {
+ padding: 4px 20px;
+ }
+ .drag-text {
+ color: $blue;
+ @extend .body-1-semibold;
+ }
+ .or-text {
+ margin-top: 10px;
+ margin-bottom: 10px;
+ }
}
diff --git a/openecomp-ui/resources/scss/components/_dualListBox.scss b/openecomp-ui/resources/scss/components/_dualListBox.scss
index 0c7d82e31c..65702df88a 100644
--- a/openecomp-ui/resources/scss/components/_dualListBox.scss
+++ b/openecomp-ui/resources/scss/components/_dualListBox.scss
@@ -1,53 +1,53 @@
.dual-list-box {
- display: flex;
- margin: 25px 0 10px 0;
- .svg-icon.search {
- height: 14px;
- width: 14px;
- }
+ display: flex;
+ margin: 25px 0 10px 0;
+ .svg-icon.search {
+ height: 14px;
+ width: 14px;
+ }
- .dual-search-multi-select-section {
- flex: 1;
+ .dual-search-multi-select-section {
+ flex: 1;
- .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-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;
+ }
+ }
+ option:checked {
+ background: $blue linear-gradient(0deg, $blue 0%, $blue 100%);
+ }
}
- }
- option:checked {
- background: $blue linear-gradient(0deg, $blue 0%, $blue 100%);
- }
}
- }
- .dual-list-options-bar {
- margin: 62px 54px 27px 54px;
- padding-top: 23px;
- .svg-icon {
- width: 14px;
- height: 14px;
- }
- .dual-list-option {
- text-align: center;
- line-height: 10px;
- font-size: 25px;
- width: 20px;
- height: 15px;
- cursor: pointer;
- margin-top: 20px;
- fill: $blue;
+ .dual-list-options-bar {
+ margin: 62px 54px 27px 54px;
+ padding-top: 23px;
+ .svg-icon {
+ width: 14px;
+ height: 14px;
+ }
+ .dual-list-option {
+ text-align: center;
+ line-height: 10px;
+ font-size: 25px;
+ width: 20px;
+ height: 15px;
+ cursor: pointer;
+ margin-top: 20px;
+ fill: $blue;
+ }
}
- }
}
diff --git a/openecomp-ui/resources/scss/components/_expandableInput.scss b/openecomp-ui/resources/scss/components/_expandableInput.scss
index 2484a73e8a..0508facbf4 100644
--- a/openecomp-ui/resources/scss/components/_expandableInput.scss
+++ b/openecomp-ui/resources/scss/components/_expandableInput.scss
@@ -1,56 +1,55 @@
.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;
- }
- }
+ 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/openecomp-ui/resources/scss/components/_forms.scss b/openecomp-ui/resources/scss/components/_forms.scss
index 58e843047f..40c1aa16c4 100644
--- a/openecomp-ui/resources/scss/components/_forms.scss
+++ b/openecomp-ui/resources/scss/components/_forms.scss
@@ -1,76 +1,76 @@
.section-title {
- @extend .heading-3-semibold;
- padding: 50px 0 20px 0;
- &:first-child {
- padding-top: 0;
- }
+ @extend .heading-3-semibold;
+ padding: 50px 0 20px 0;
+ &:first-child {
+ padding-top: 0;
+ }
}
.validation-form-content {
- fieldset[disabled] {
- .form-group {
- opacity: 0.7;
- cursor: auto;
- pointer-events: none;
- .dropdown-multi-select {
- .form-group {
- opacity: 1;
- }
- .Select-control {
- background-color: $tlv-light-gray;
- }
- }
- }
- }
+ fieldset[disabled] {
+ .form-group {
+ opacity: 0.7;
+ cursor: auto;
+ pointer-events: none;
+ .dropdown-multi-select {
+ .form-group {
+ opacity: 1;
+ }
+ .Select-control {
+ background-color: $tlv-light-gray;
+ }
+ }
+ }
+ }
}
.dropdown-multi-select {
- .Select {
- display: block;
- width: 100%;
- .Select-menu-outer {
- .Select-option {
- &:hover {
- background-color: $blue;
- color: $white;
- }
- }
- }
- .Select-control {
- height: 28px;
- border-radius: 2px;
- .Select-input {
- height: 28px;
- input {
- height: 28px;
- padding: 0;
+ .Select {
+ display: block;
+ width: 100%;
+ .Select-menu-outer {
+ .Select-option {
+ &:hover {
+ background-color: $blue;
+ color: $white;
+ }
+ }
+ }
+ .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: $background-gray;
+ border: none;
+ margin: 3px 0 3px 10px;
+ border-radius: 10px;
+ padding-left: 8px;
+ padding-right: 6px;
+ }
+ .Select-value-icon {
+ border: none;
+ float: right;
+ &:hover {
+ background-color: inherit;
+ color: inherit;
+ }
+ }
+ .Select-arrow-zone {
+ padding-top: 4px;
+ }
}
- }
- .Select-placeholder {
- line-height: 30px;
- }
- }
- &.Select--multi {
- .Select-value {
- color: $text-black;
- background-color: $background-gray;
- border: none;
- margin: 3px 0 3px 10px;
- border-radius: 10px;
- padding-left: 8px;
- padding-right: 6px;
- }
- .Select-value-icon {
- border: none;
- float: right;
- &:hover {
- background-color: inherit;
- color: inherit;
- }
- }
- .Select-arrow-zone {
- padding-top: 4px;
- }
}
- }
}
diff --git a/openecomp-ui/resources/scss/components/_grid.scss b/openecomp-ui/resources/scss/components/_grid.scss
index f210b64df6..595b0cde4d 100644
--- a/openecomp-ui/resources/scss/components/_grid.scss
+++ b/openecomp-ui/resources/scss/components/_grid.scss
@@ -1,71 +1,71 @@
.grid-section {
- $gridItemSpace: 15%;
+ $gridItemSpace: 15%;
- @mixin gridCol($numOfCols, $flexBasis) {
- .#{grid-col- + $numOfCols} {
- @extend %grid-col-base;
- flex-basis: $flexBasis;
- &:not(.last-col-in-row):after {
- flex-basis: $gridItemSpace / $numOfCols;
- content: ' ';
- }
+ @mixin gridCol($numOfCols, $flexBasis) {
+ .#{grid-col- + $numOfCols} {
+ @extend %grid-col-base;
+ flex-basis: $flexBasis;
+ &:not(.last-col-in-row):after {
+ flex-basis: $gridItemSpace / $numOfCols;
+ content: ' ';
+ }
+ }
}
- }
- @mixin gridColWithLastColumn($numOfCols, $flexBasis, $flexBasisLast) {
- .#{grid-col- + $numOfCols} {
- @extend %grid-col-base;
- &:not(.last-col-in-row) {
- flex-basis: $flexBasis;
- margin-right: 5%;
- }
- &.last-col-in-row {
- flex-basis: $flexBasisLast;
- }
+ @mixin gridColWithLastColumn($numOfCols, $flexBasis, $flexBasisLast) {
+ .#{grid-col- + $numOfCols} {
+ @extend %grid-col-base;
+ &:not(.last-col-in-row) {
+ flex-basis: $flexBasis;
+ margin-right: 5%;
+ }
+ &.last-col-in-row {
+ flex-basis: $flexBasisLast;
+ }
+ }
}
- }
- &:not(:last-of-type) {
- padding-bottom: 30px;
- }
+ &:not(:last-of-type) {
+ padding-bottom: 30px;
+ }
- .grid-items {
- display: flex;
- flex-direction: row;
- flex-wrap: wrap;
- }
+ .grid-items {
+ display: flex;
+ flex-direction: row;
+ flex-wrap: wrap;
+ }
- %grid-col-base {
- flex-shrink: 0;
- display: flex;
- }
+ %grid-col-base {
+ flex-shrink: 0;
+ display: flex;
+ }
- .grid-item {
- flex: 1;
- display: flex;
- flex-direction: column;
- }
+ .grid-item {
+ flex: 1;
+ display: flex;
+ flex-direction: column;
+ }
- .grid-item-stretch {
- @extend .grid-item;
- & *:last-child {
- flex: 1;
- display: flex;
- flex-direction: column;
+ .grid-item-stretch {
+ @extend .grid-item;
+ & *:last-child {
+ flex: 1;
+ display: flex;
+ flex-direction: column;
+ }
}
- }
- &.has-last-col-set {
- @include gridColWithLastColumn(1, 21%, 22%);
- @include gridColWithLastColumn(2, 47%, 48%);
- @include gridColWithLastColumn(3, 73%, 74%);
- @include gridColWithLastColumn(4, 100%, 100%);
- }
+ &.has-last-col-set {
+ @include gridColWithLastColumn(1, 21%, 22%);
+ @include gridColWithLastColumn(2, 47%, 48%);
+ @include gridColWithLastColumn(3, 73%, 74%);
+ @include gridColWithLastColumn(4, 100%, 100%);
+ }
- &:not(.has-last-col-set) {
- @include gridCol(1, 25%);
- @include gridCol(2, 50%);
- @include gridCol(3, 75%);
- @include gridCol(4, 100%);
- }
+ &:not(.has-last-col-set) {
+ @include gridCol(1, 25%);
+ @include gridCol(2, 50%);
+ @include gridCol(3, 75%);
+ @include gridCol(4, 100%);
+ }
}
diff --git a/openecomp-ui/resources/scss/components/_inputOptions.scss b/openecomp-ui/resources/scss/components/_inputOptions.scss
index face03d64d..eb0fe79ea6 100644
--- a/openecomp-ui/resources/scss/components/_inputOptions.scss
+++ b/openecomp-ui/resources/scss/components/_inputOptions.scss
@@ -1,85 +1,84 @@
.disabled {
- .Select-control {
- background-color: $tlv-light-gray;
- .Select-placeholder {
- color: $dark-gray;
- }
- }
+ .Select-control {
+ background-color: $tlv-light-gray;
+ .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;
+ display: flex;
+ border: 1px solid $light-gray;
+ border-radius: 2px;
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;
- }
+ &: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: $crimson;
+ border-color: $crimson;
}
.bootstrap-input-options {
- display: flex;
- flex-direction: column;
- .input-options-select {
- border: 1px solid $light-gray;
- border-radius: 2px;
- height: 30px;
- float: left;
- transition-property: width;
- transition-duration: 300ms;
- padding-top: 0px;
- padding-bottom: 0px;
- width: 100%;
- &:hover {
- border-color: $gray;
- }
- }
- .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;
- }
- &.has-error {
- border-color: $crimson;
- }
+ display: flex;
+ flex-direction: column;
+ .input-options-select {
+ border: 1px solid $light-gray;
+ border-radius: 2px;
+ height: 30px;
+ float: left;
+ transition-property: width;
+ transition-duration: 300ms;
+ padding-top: 0;
+ padding-bottom: 0;
+ width: 100%;
+ &:hover {
+ border-color: $gray;
+ }
+ }
+ .input-options-other {
+ float: left;
+ height: 30px;
+ border: none;
+ padding-top: 0;
+ padding-bottom: 0;
+ height: 28px;
+ }
+ .input-options-separator {
+ width: 1px;
+ height: 24px;
+ margin-top: 2px;
+ margin-bottom: 2px;
+ border: 1px solid $light-gray;
+ }
+ &.has-error {
+ border-color: $crimson;
+ }
}
diff --git a/openecomp-ui/resources/scss/components/_listEditorView.scss b/openecomp-ui/resources/scss/components/_listEditorView.scss
index 354a6a1f70..9bda78e007 100644
--- a/openecomp-ui/resources/scss/components/_listEditorView.scss
+++ b/openecomp-ui/resources/scss/components/_listEditorView.scss
@@ -1,162 +1,160 @@
.list-editor-view {
- @extend .flex-column;
- background-color: $content-background-color;
-
- .expandble-search-wrapper {
- display: flex;
- justify-content: flex-end;
- margin-top: 10px;
- }
-
- .list-editor-view-header {
- display: flex;
- justify-content: space-between;
- align-items: flex-end;
- border-bottom: 1px solid $light-gray;
- padding-bottom: 5px;
- .list-editor-view-title {
- @extend .heading-3-semibold;
- }
- }
-
- .list-editor-view-list-scroller {
- @extend .flex;
- overflow: auto;
- margin: 18px 0 30px 0;
- }
-
- .list-editor-view-list {
@extend .flex-column;
+ background-color: $content-background-color;
- .list-editor-item-view {
- margin: 8px 0;
- border: 1px solid $light-gray;
- background-color: $white;
- display: flex;
- min-height: 100px;
- overflow: hidden;
- .list-editor-item-view-content {
- padding: 10px 28px;
+ .expandble-search-wrapper {
display: flex;
- flex: 1 1;
- .list-editor-item-view-field {
- flex: 1 1;
- color: $black;
- padding: 0;
- @include ellipsis;
- overflow-wrap: break-word;
- white-space: initial;
-
+ justify-content: flex-end;
+ margin-top: 10px;
+ }
- .number-field {
- align-content: center;
- }
- .title {
- @extend .body-1;
- padding-bottom: 5px;
- &:not(:first-child) {
- line-height: 0.9;
- }
- }
- .description {
- @include multiline-ellipsis(1.3em, 3);
- }
- .text {
- @extend .body-1;
- }
- .textEllipses {
- white-space: nowrap;
- text-overflow: ellipsis;
- overflow: hidden;
- padding-right: 5px;
- }
- }
- }
- .list-editor-item-view-controller {
+ .list-editor-view-header {
display: flex;
- flex-basis: 5%;
- align-self: center;
- justify-content: center;
- flex-direction: column;
- .svg-icon-wrapper {
- &:first-child {
- margin-bottom: 10px;
- }
- }
- .svg-icon {
- margin-top: 5px;
- transition: fill .3s;
- fill: $white;
- }
- }
- &.selectable:hover{
- @extend .box-hover;
- cursor: pointer;
- .list-editor-item-view-controller {
- .svg-icon {
- fill: $dark-gray;
- &:hover {
- fill: $black;
- }
- }
+ justify-content: space-between;
+ align-items: flex-end;
+ border-bottom: 1px solid $light-gray;
+ padding-bottom: 5px;
+ .list-editor-view-title {
+ @extend .heading-3-semibold;
}
- }
}
- &.two-columns {
- flex-direction: row;
- flex-wrap: wrap;
+ .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 {
- .list-editor-item-view-content {
- display: flex;
- flex-direction: row;
- align-items: center;
- padding: 10px 18px 10px 0;
- .list-editor-item-view-field {
- flex: 0.3 1;
+ .list-editor-item-view {
+ margin: 8px 0;
+ border: 1px solid $light-gray;
+ background-color: $white;
display: flex;
- justify-content: center;
- flex-direction: column;
- height: 100%;
- border-right : 1px solid $light-gray;
- margin-left: 18px;
- &:last-child{
- border: none;
- flex: 1;
- }
- .details{
- display: flex;
- flex-direction: row;
- .title {
- padding: 0;
- margin-right: 5px;
- }
- }
+ min-height: 100px;
+ overflow: hidden;
+ .list-editor-item-view-content {
+ padding: 10px 28px;
+ display: flex;
+ flex: 1 1;
+ .list-editor-item-view-field {
+ flex: 1 1;
+ color: $black;
+ padding: 0;
+ @include ellipsis;
+ overflow-wrap: break-word;
+ white-space: initial;
- .details-col{
- flex-direction: column;
- .title {
- padding-bottom: 0;
- }
+ .number-field {
+ align-content: center;
+ }
+ .title {
+ @extend .body-1;
+ padding-bottom: 5px;
+ &:not(:first-child) {
+ line-height: 0.9;
+ }
+ }
+ .description {
+ @include multiline-ellipsis(1.3em, 3);
+ }
+ .text {
+ @extend .body-1;
+ }
+ .textEllipses {
+ white-space: nowrap;
+ text-overflow: ellipsis;
+ overflow: hidden;
+ padding-right: 5px;
+ }
+ }
}
-
- .description {
- @extend .body-1;
- @include multiline-ellipsis(1.3em, 3);
+ .list-editor-item-view-controller {
+ display: flex;
+ flex-basis: 5%;
+ align-self: center;
+ justify-content: center;
+ flex-direction: column;
+ .svg-icon-wrapper {
+ &:first-child {
+ margin-bottom: 10px;
+ }
+ }
+ .svg-icon {
+ margin-top: 5px;
+ transition: fill 0.3s;
+ fill: $white;
+ }
+ }
+ &.selectable:hover {
+ @extend .box-hover;
+ cursor: pointer;
+ .list-editor-item-view-controller {
+ .svg-icon {
+ fill: $dark-gray;
+ &:hover {
+ fill: $black;
+ }
+ }
+ }
}
- }
}
+ &.two-columns {
+ flex-direction: row;
+ flex-wrap: wrap;
- &:nth-child(odd){
- flex: 0 0 48.5%;
- margin-right: 50px;
- }
- &:nth-child(even) {
- flex: 1;
- margin-right: 0;
+ .list-editor-item-view {
+ .list-editor-item-view-content {
+ display: flex;
+ flex-direction: row;
+ align-items: center;
+ padding: 10px 18px 10px 0;
+ .list-editor-item-view-field {
+ flex: 0.3 1;
+ display: flex;
+ justify-content: center;
+ flex-direction: column;
+ height: 100%;
+ border-right: 1px solid $light-gray;
+ margin-left: 18px;
+ &:last-child {
+ border: none;
+ flex: 1;
+ }
+ .details {
+ display: flex;
+ flex-direction: row;
+ .title {
+ padding: 0;
+ margin-right: 5px;
+ }
+ }
+
+ .details-col {
+ flex-direction: column;
+ .title {
+ padding-bottom: 0;
+ }
+ }
+
+ .description {
+ @extend .body-1;
+ @include multiline-ellipsis(1.3em, 3);
+ }
+ }
+ }
+
+ &:nth-child(odd) {
+ flex: 0 0 48.5%;
+ margin-right: 50px;
+ }
+ &:nth-child(even) {
+ flex: 1;
+ margin-right: 0;
+ }
+ }
}
- }
}
- }
}
diff --git a/openecomp-ui/resources/scss/components/_loader.scss b/openecomp-ui/resources/scss/components/_loader.scss
index ddff9af6e3..ee7f6f372d 100644
--- a/openecomp-ui/resources/scss/components/_loader.scss
+++ b/openecomp-ui/resources/scss/components/_loader.scss
@@ -1,159 +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;
+ .onboarding-loader-backdrop {
+ top: 0;
+ right: 0;
+ bottom: 0;
+ left: 0;
+ position: absolute;
+ background-color: $loader-background;
+ 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;
+ }
}
- 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
index ab4d15fd90..adb3688e5f 100644
--- a/openecomp-ui/resources/scss/components/_navigationSideBar.scss
+++ b/openecomp-ui/resources/scss/components/_navigationSideBar.scss
@@ -1,63 +1,63 @@
.software-product-navigation-side-bar {
- width: 245px;
- height: 100%;
- background-color: $white;
- border-right: 1px solid $light-gray;
- @include box-shadow(1px -1px 3px 0px $tlv-light-gray);
- border-bottom: 0;
-
- .navigation-side-content {
- overflow: hidden;
+ width: 245px;
height: 100%;
+ background-color: $white;
+ border-right: 1px solid $light-gray;
+ @include box-shadow(1px -1px 3px 0px $tlv-light-gray);
+ border-bottom: 0;
- .navigation-group {
- height: 100%;
- display: flex;
- flex-direction: column;
- background-color: $tlv-gray;
- .group-name {
- @extend .heading-4-semibold;
- @include ellipsis;
- min-height: 70px;
- display: block;
- height: 70px;
- padding: 24px 12px 13px 40px;
- background-color: $white;
- border-bottom: 1px solid $tlv-light-gray;
- }
- }
+ .navigation-side-content {
+ overflow: hidden;
+ height: 100%;
- .navigation-group-items {
- padding-left: 20px;
- overflow-y: auto;
+ .navigation-group {
+ height: 100%;
+ display: flex;
+ flex-direction: column;
+ background-color: $tlv-gray;
+ .group-name {
+ @extend .heading-4-semibold;
+ @include ellipsis;
+ min-height: 70px;
+ display: block;
+ height: 70px;
+ padding: 24px 12px 13px 40px;
+ background-color: $white;
+ border-bottom: 1px solid $tlv-light-gray;
+ }
+ }
- .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 {
+ .navigation-group-items {
padding-left: 20px;
- }
- }
- .navigation-group-item-name {
- @include ellipsis;
- white-space: normal;
- &.selected {
- @extend .body-1-semibold;
- border-left: 4px solid $blue;
- padding-left: 18px;
- color: $blue;
- }
- &.bold-name {
- @extend .body-1-semibold;
- }
+ 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-semibold;
+ border-left: 4px solid $blue;
+ padding-left: 18px;
+ color: $blue;
+ }
+ &.bold-name {
+ @extend .body-1-semibold;
+ }
+ }
+ }
}
- }
}
- }
}
diff --git a/openecomp-ui/resources/scss/components/_notifications.scss b/openecomp-ui/resources/scss/components/_notifications.scss
deleted file mode 100644
index 5b10dee0ee..0000000000
--- a/openecomp-ui/resources/scss/components/_notifications.scss
+++ /dev/null
@@ -1,35 +0,0 @@
-
-.notification-modal {
-
- .modal-content {
- .modal-header {
- padding: 15px 10px 10px;
- .modal-title {
- @extend .heading-5-semibold;
- }
- }
- .modal-body {
- padding: 30px 15px;
- @extend .body-1-semibold;
- }
- }
-
- &.danger {
- .modal-content .modal-header {
- border-top: 3px solid $red;
- }
- }
-
- &.negative {
- .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/_overlay.scss b/openecomp-ui/resources/scss/components/_overlay.scss
index 7c310bf1a6..3d2d0bbaae 100644
--- a/openecomp-ui/resources/scss/components/_overlay.scss
+++ b/openecomp-ui/resources/scss/components/_overlay.scss
@@ -1,26 +1,26 @@
.onboarding-overlay {
- z-index: 1000;
- border: 1px solid $light-gray;
- position: absolute;
- background-color: $white;
- border-radius: 2px;
- box-shadow: 0 3px 7px 1px rgba(0, 0, 0, 0.2);
- display: flex;
- flex-direction: column;
- justify-content: space-around;
- margin-top: 5px;
- margin-left: -86px;
- .arrow-up {
- width: 0;
- height: 0;
- border-left: 5px solid transparent;
- border-right: 5px solid transparent;
- background-color: transparent;
- border-bottom: 5px solid $blue;
- margin-left: 114px;
- margin-top: -5px;
- }
- .arrow-border {
- border-top: 5px solid $blue;
- }
-} \ No newline at end of file
+ z-index: 1000;
+ border: 1px solid $light-gray;
+ position: absolute;
+ background-color: $white;
+ border-radius: 2px;
+ box-shadow: 0 3px 7px 1px rgba(0, 0, 0, 0.2);
+ display: flex;
+ flex-direction: column;
+ justify-content: space-around;
+ margin-top: 5px;
+ margin-left: -86px;
+ .arrow-up {
+ width: 0;
+ height: 0;
+ border-left: 5px solid transparent;
+ border-right: 5px solid transparent;
+ background-color: transparent;
+ border-bottom: 5px solid $blue;
+ margin-left: 114px;
+ margin-top: -5px;
+ }
+ .arrow-border {
+ border-top: 5px solid $blue;
+ }
+}
diff --git a/openecomp-ui/resources/scss/components/_progressBar.scss b/openecomp-ui/resources/scss/components/_progressBar.scss
index 040c8cefd7..5529a550c5 100644
--- a/openecomp-ui/resources/scss/components/_progressBar.scss
+++ b/openecomp-ui/resources/scss/components/_progressBar.scss
@@ -1,24 +1,24 @@
- .progress-bar-view {
+.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;
- }
+ 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;
- }
- }
+ margin-right: -30px;
+ margin-top: -2px;
+ margin-left: 10px;
+ color: black;
+ }
+}
diff --git a/openecomp-ui/resources/scss/components/_selectActionTable.scss b/openecomp-ui/resources/scss/components/_selectActionTable.scss
index fa8eb3110c..90b45a5a49 100644
--- a/openecomp-ui/resources/scss/components/_selectActionTable.scss
+++ b/openecomp-ui/resources/scss/components/_selectActionTable.scss
@@ -1,145 +1,146 @@
.select-action-table-view {
- .svg-icon-wrapper {
- flex-direction: row;
- .svg-icon {
- &:not(.__plus) {
- margin-left: 5px;
- margin-right: 5px;
- width:16px;
- height:16px;
- }
- }
- }
- .dummy-icon {
- background-color: $white;
- fill: $white;
- .locked {
- fill: $white;
- }
- }
+ .svg-icon-wrapper {
+ flex-direction: row;
+ .svg-icon {
+ &:not(.__plus) {
+ margin-left: 5px;
+ margin-right: 5px;
+ width: 16px;
+ height: 16px;
+ }
+ }
+ }
+ .dummy-icon {
+ background-color: $white;
+ fill: $white;
+ .locked {
+ fill: $white;
+ }
+ }
- .select-action-table-controllers {
- display: flex;
- .svg-icon-wrapper {
- &:hover {
- cursor: pointer;
- }
- &:first-child {
- margin-left: auto;
- }
- }
- }
- .select-action-table {
- display: flex;
- flex-direction: column;
- border-color: $light-gray;
+ .select-action-table-controllers {
+ display: flex;
+ .svg-icon-wrapper {
+ &:hover {
+ cursor: pointer;
+ }
+ &:first-child {
+ margin-left: auto;
+ }
+ }
+ }
+ .select-action-table {
+ display: flex;
+ flex-direction: column;
+ border-color: $light-gray;
- .select-action-table-headers {
- display: flex;
- background-color: $tlv-light-gray;
- border-color: inherit;
- .select-action-table-header {
- @extend .body-1-semibold;
- flex: 1;
- border-top: 1px solid;
- border-right: 1px solid;
- border-color: inherit;
- padding: 8px 0 7px 20px;
- &:first-child {
- border-left: 1px solid;
- border-color: inherit;
- }
- }
- }
- .select-action-table-row-wrapper {
- display: flex;
- flex-direction: row;
- margin-bottom: 14px;
- .svg-icon-wrapper.hideDelete {
- .svg-icon {
- fill: $white;
- }
- }
- .select-action-table-row {
- display: flex;
- flex: 1;
- border: 1px solid;
- border-color: $light-gray;
- &.has-error {
- border-color: $red;
- }
+ .select-action-table-headers {
+ display: flex;
+ background-color: $tlv-light-gray;
+ border-color: inherit;
+ .select-action-table-header {
+ @extend .body-1-semibold;
+ flex: 1;
+ border-top: 1px solid;
+ border-right: 1px solid;
+ border-color: inherit;
+ padding: 8px 0 7px 20px;
+ &:first-child {
+ border-left: 1px solid;
+ border-color: inherit;
+ }
+ }
+ }
+ .select-action-table-row-wrapper {
+ display: flex;
+ flex-direction: row;
+ margin-bottom: 14px;
+ .svg-icon-wrapper.hideDelete {
+ .svg-icon {
+ fill: $white;
+ }
+ }
+ .select-action-table-row {
+ display: flex;
+ flex: 1;
+ border: 1px solid;
+ border-color: $light-gray;
+ &.has-error {
+ border-color: $red;
+ }
- .select-action-table-cell {
- flex: 1;
- border-right: 1px solid;
- border-color: $light-gray;
- @extend .body-1;
- .dropdown-multi-select {
- .form-group {
- .Select{
- &.is-open {
- border: 1px solid $blue;
- }
- }
- }
- }
- .form-group {
- margin: 0;
- .Select-control {
- height:36px;
- border: none;
- .is-open {
- border-left-color: $blue;
- border-right-color: $blue;
- }
- .Select-value, .Select-placeholder, .Select-input {
- padding-left: 20px;
- padding-right: 50px;
- padding-top: 4px;
-
- }
- .Select-placeholder {
- color: $dark-gray;
- }
- .Select-arrow-zone {
- padding-right: 15px;
- }
- }
- }
- &:last-child {
- border-right: none;
- }
- }
- .Select-menu-outer {
- border-left: 1px solid $blue;
- border-right: 1px solid $blue;
- border-bottom: 1px solid $blue;
- overflow: auto;
- .Select-menu {
- .Select-option {
- overflow: hidden;
- text-overflow: ellipsis;
- border-bottom: 1px solid $light-gray;
- &:hover {
- background-color: $blue;
- color: $white;
- &.is-focused {
- background-color: $blue;
- }
- &.is-focused {
- background-color: $blue;
- }
- }
- &.is-selected {
- background-color: transparent;
- }
- &.is-focused {
- background-color: transparent;
- }
- }
- }
- }
- }
- }
- }
+ .select-action-table-cell {
+ flex: 1;
+ border-right: 1px solid;
+ border-color: $light-gray;
+ @extend .body-1;
+ .dropdown-multi-select {
+ .form-group {
+ .Select {
+ &.is-open {
+ border: 1px solid $blue;
+ }
+ }
+ }
+ }
+ .form-group {
+ margin: 0;
+ .Select-control {
+ height: 36px;
+ border: none;
+ .is-open {
+ border-left-color: $blue;
+ border-right-color: $blue;
+ }
+ .Select-value,
+ .Select-placeholder,
+ .Select-input {
+ padding-left: 20px;
+ padding-right: 50px;
+ padding-top: 4px;
+ }
+ .Select-placeholder {
+ color: $dark-gray;
+ }
+ .Select-arrow-zone {
+ padding-right: 15px;
+ }
+ }
+ }
+ &:last-child {
+ border-right: none;
+ }
+ }
+ .Select-menu-outer {
+ border-left: 1px solid $blue;
+ border-right: 1px solid $blue;
+ border-bottom: 1px solid $blue;
+ overflow: auto;
+ .Select-menu {
+ .Select-option {
+ overflow: hidden;
+ text-overflow: ellipsis;
+ border-bottom: 1px solid $light-gray;
+ &:hover {
+ background-color: $blue;
+ color: $white;
+ &.is-focused {
+ background-color: $blue;
+ }
+ &.is-focused {
+ background-color: $blue;
+ }
+ }
+ &.is-selected {
+ background-color: transparent;
+ }
+ &.is-focused {
+ background-color: transparent;
+ }
+ }
+ }
+ }
+ }
+ }
+ }
}
diff --git a/openecomp-ui/resources/scss/components/_sequenceDiagram.scss b/openecomp-ui/resources/scss/components/_sequenceDiagram.scss
index d89c342d47..f567e07667 100644
--- a/openecomp-ui/resources/scss/components/_sequenceDiagram.scss
+++ b/openecomp-ui/resources/scss/components/_sequenceDiagram.scss
@@ -1,18 +1,18 @@
.sequence-diagram {
- .sequence-diagram-sequencer {
- .asdcs-diagram {
- overflow: auto;
- max-height: 60vh;
- }
- .asdcs-editor {
- height: 60vh;
- }
- }
- .sequence-diagram-action-buttons {
- margin-left: 20px;
- margin-top: 20px;
- button:first-of-type {
- margin-right: 20px;
- }
- }
+ .sequence-diagram-sequencer {
+ .asdcs-diagram {
+ overflow: auto;
+ max-height: 60vh;
+ }
+ .asdcs-editor {
+ height: 60vh;
+ }
+ }
+ .sequence-diagram-action-buttons {
+ margin-left: 20px;
+ margin-top: 20px;
+ button:first-of-type {
+ margin-right: 20px;
+ }
+ }
}
diff --git a/openecomp-ui/resources/scss/components/_submitErrorResponse.scss b/openecomp-ui/resources/scss/components/_submitErrorResponse.scss
index cd5284059d..e2e7b1bca9 100644
--- a/openecomp-ui/resources/scss/components/_submitErrorResponse.scss
+++ b/openecomp-ui/resources/scss/components/_submitErrorResponse.scss
@@ -1,65 +1,63 @@
.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;
- }
+ max-height: 500px;
+ overflow: auto;
+ .list-group-item {
+ border-top: none;
}
- }
- .error-block {
- margin: 10px 0;
- .error-block-header {
- background-color: $tlv-gray;
- padding: 5px;
- cursor: pointer;
- .svg-icon {
- &.__chevronDown {
- margin-right: 10px;
- }
- }
- .collapse-right {
- .svg-icon {
- &.__chevronDown {
- transform: rotate(270deg);
- }
+ .panel-title {
+ a {
+ &:after {
+ content: '(details)';
+ color: $link-blue;
+ float: right;
+ }
+ &:hover {
+ color: $blue;
+ text-decoration: underline;
+ }
}
- }
-
- }
- .error-code-list-item {
- display: flex;
- justify-content: flex-start;
- .icon-label {
- @extend .body-1;
- color: $dark-gray;
- margin-left: 10px;
- }
- .icon-component {
- align-items: baseline;
- }
- }
- .list-group-item {
- .error-item-text {
- margin-top:-2px;
- max-width: 100px;
- }
}
- .component-name-header {
- margin-left: 45px;
- margin-top: 10px;
- @extend .heading-5-semibold;
+ .error-block {
+ margin: 10px 0;
+ .error-block-header {
+ background-color: $tlv-gray;
+ padding: 5px;
+ cursor: pointer;
+ .svg-icon {
+ &.__chevronDown {
+ margin-right: 10px;
+ }
+ }
+ .collapse-right {
+ .svg-icon {
+ &.__chevronDown {
+ transform: rotate(270deg);
+ }
+ }
+ }
+ }
+ .error-code-list-item {
+ display: flex;
+ justify-content: flex-start;
+ .icon-label {
+ @extend .body-1;
+ color: $dark-gray;
+ margin-left: 10px;
+ }
+ .icon-component {
+ align-items: baseline;
+ }
+ }
+ .list-group-item {
+ .error-item-text {
+ margin-top: -2px;
+ max-width: 100px;
+ }
+ }
+ .component-name-header {
+ margin-left: 45px;
+ margin-top: 10px;
+ @extend .heading-5-semibold;
+ }
}
- }
}
diff --git a/openecomp-ui/resources/scss/components/_toggleInput.scss b/openecomp-ui/resources/scss/components/_toggleInput.scss
index fcf0902adf..6bcf3a359b 100644
--- a/openecomp-ui/resources/scss/components/_toggleInput.scss
+++ b/openecomp-ui/resources/scss/components/_toggleInput.scss
@@ -1,62 +1,63 @@
.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;
- }
+ $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;
- }
+ 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/_tree.scss b/openecomp-ui/resources/scss/components/_tree.scss
index e03594ee64..380fb64aec 100644
--- a/openecomp-ui/resources/scss/components/_tree.scss
+++ b/openecomp-ui/resources/scss/components/_tree.scss
@@ -1,56 +1,53 @@
-
.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;
- @extend .body-2-semibold;
- 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;
- }
-
+ 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;
+ @extend .body-2-semibold;
+ 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/openecomp-ui/resources/scss/components/_userNotifications.scss b/openecomp-ui/resources/scss/components/_userNotifications.scss
index 74cafae438..649e636541 100644
--- a/openecomp-ui/resources/scss/components/_userNotifications.scss
+++ b/openecomp-ui/resources/scss/components/_userNotifications.scss
@@ -1,123 +1,122 @@
-
.onboarding-notifications {
- margin-left: 10px;
- .notifications-icon {
- display: flex;
- @extend .clickable;
- .notifications-count {
- color: $white;
- font-size: 11px;
- text-align: center;
- width: 16px;
- height: 16px;
- background-color: $orange;
- border-radius: 50%;
- position: relative;
- right: 7px;
- top: -2px;
- &.hidden-count {
- background-color: transparent;
- color: transparent;
- }
- }
- }
- .onboarding-overlay {
- width: 520px;
- right: 39px;
- margin-top: 18px;
- .arrow-up {
- margin-left: 487px;
+ margin-left: 10px;
+ .notifications-icon {
+ display: flex;
+ @extend .clickable;
+ .notifications-count {
+ color: $white;
+ font-size: 11px;
+ text-align: center;
+ width: 16px;
+ height: 16px;
+ background-color: $orange;
+ border-radius: 50%;
+ position: relative;
+ right: 7px;
+ top: -2px;
+ &.hidden-count {
+ background-color: transparent;
+ color: transparent;
+ }
+ }
}
+ .onboarding-overlay {
+ width: 520px;
+ right: 39px;
+ margin-top: 18px;
+ .arrow-up {
+ margin-left: 487px;
+ }
- .user-notifications {
- .notifications-title {
- color: $blue;
- @extend .heading-5-semibold;
- @extend .text-uppercase !optional;
- padding: 13px 20px 10px 20px;
- border-bottom: 1px solid $tlv-light-gray;
- }
- .notifications-list {
- max-height: 600px;
- overflow-y: auto;
- .notification {
- border-bottom: 1px solid $tlv-light-gray;
- padding: 16px 20px 18px 20px;
- display: flex;
- &.unread {
- background-color: lighten($gray, 38%);
- .item-name {
- display: flex;
- @include base-font-bold;
- }
- .unread-circle-icon {
- width: 8px;
- height: 8px;
- border-radius: 50%;
- background-color: $blue;
- align-self: center;
- margin-bottom: 3px;
- margin-left: 9px;
- }
- }
- .notification-data {
- width: 366px;
- margin-right: 30px;
- color: $dark-gray;
- .item-name {
- @extend .body-2-semibold;
- @extend .text-uppercase !optional;
- margin-bottom: 6px;
- }
- .flex-items {
- display: flex;
- margin: 6px 0 11px 0;
- @extend .body-3;
- line-height: 20px;
- @extend .text-uppercase !optional;
- color: $gray;
- .separator {
- border-left: 1px solid $dark-gray;
- margin: 5px 8px;
- }
- }
- .description {
- @extend .body-3;
- margin: 11px 0 8px 0;
- .more-less {
- font-size: $icon-font-size;
+ .user-notifications {
+ .notifications-title {
color: $blue;
- }
- }
- .date {
- font-size: $icon-font-size;
- @include base-font-regular;
- color: $gray;
- margin-top: 8px;
+ @extend .heading-5-semibold;
+ @extend .text-uppercase !optional;
+ padding: 13px 20px 10px 20px;
+ border-bottom: 1px solid $tlv-light-gray;
}
- }
+ .notifications-list {
+ max-height: 600px;
+ overflow-y: auto;
+ .notification {
+ border-bottom: 1px solid $tlv-light-gray;
+ padding: 16px 20px 18px 20px;
+ display: flex;
+ &.unread {
+ background-color: lighten($gray, 38%);
+ .item-name {
+ display: flex;
+ @include base-font-bold;
+ }
+ .unread-circle-icon {
+ width: 8px;
+ height: 8px;
+ border-radius: 50%;
+ background-color: $blue;
+ align-self: center;
+ margin-bottom: 3px;
+ margin-left: 9px;
+ }
+ }
+ .notification-data {
+ width: 366px;
+ margin-right: 30px;
+ color: $dark-gray;
+ .item-name {
+ @extend .body-2-semibold;
+ @extend .text-uppercase !optional;
+ margin-bottom: 6px;
+ }
+ .flex-items {
+ display: flex;
+ margin: 6px 0 11px 0;
+ @extend .body-3;
+ line-height: 20px;
+ @extend .text-uppercase !optional;
+ color: $gray;
+ .separator {
+ border-left: 1px solid $dark-gray;
+ margin: 5px 8px;
+ }
+ }
+ .description {
+ @extend .body-3;
+ margin: 11px 0 8px 0;
+ .more-less {
+ font-size: $icon-font-size;
+ color: $blue;
+ }
+ }
+ .date {
+ font-size: $icon-font-size;
+ @include base-font-regular;
+ color: $gray;
+ margin-top: 8px;
+ }
+ }
- .notification-action .action-button {
- @extend .clickable;
- width: 74px;
- height: 28px;
- color: $white;
- background-color: $blue;
- border-radius: 2px;
- text-align: center;
- line-height: 2;
- margin-top: 4px;
- &.active {
- background-color: #0091c7;
- border: solid 1px #006186;
- }
- &:hover {
- background-color: #1ec2ff;
- border: solid 1px #0091c8;
+ .notification-action .action-button {
+ @extend .clickable;
+ width: 74px;
+ height: 28px;
+ color: $white;
+ background-color: $blue;
+ border-radius: 2px;
+ text-align: center;
+ line-height: 2;
+ margin-top: 4px;
+ &.active {
+ background-color: $action-button-active-bg;
+ border: solid 1px $action-button-active-border;
+ }
+ &:hover {
+ background-color: $action-button-hover-bg;
+ border: solid 1px $action-button-hover-border;
+ }
+ }
+ }
}
- }
}
- }
}
- }
}
diff --git a/openecomp-ui/resources/scss/components/_validationForm.scss b/openecomp-ui/resources/scss/components/_validationForm.scss
index 52408f5952..9f708c4c2a 100644
--- a/openecomp-ui/resources/scss/components/_validationForm.scss
+++ b/openecomp-ui/resources/scss/components/_validationForm.scss
@@ -1,118 +1,110 @@
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;
+ .validation-form-content {
+ .validation-input-wrapper {
+ position: relative;
+ flex: 1;
}
- }
- &.right {
- .tooltip-arrow {
- border-right-color: $red;
+ .validation-radio-wrapper {
+ position: relative;
}
- }
- &.left {
- .tooltip-arrow {
- border-left-color: $red;
+ .sdc-tabs {
+ position: relative;
+ .invalid-tab:not(.sdc-tab-active) {
+ 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: ' ';
+ .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;
+ }
}
- @media (min-width: 1389px) {
- &.add-line-break {
- .control-label {
- &:after {
- content: "\00a0";
- display: block;
- }
+ .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: ' ';
+ }
- .validation-buttons {
- padding: 20px 0;
- text-align: right;
- button:first-child {
- margin-right: 15px;
- min-width: 120px;
+ .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;
+ }
+ }
+ }
+ }
+ }
+ }
}
- .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: $tlv-gray;
- }
+ .validation-buttons {
+ padding: 20px 0;
+ text-align: right;
+ button:first-child {
+ margin-right: 15px;
+ min-width: 120px;
+ }
+ .svg-icon {
+ height: 14px;
+ width: 14px;
+ }
+ .svg-icon.check {
+ fill: $white;
+ }
+ .svg-icon.close {
+ fill: $blue;
+ }
+ }
}
diff --git a/openecomp-ui/resources/scss/components/_versionController.scss b/openecomp-ui/resources/scss/components/_versionController.scss
index 98771f1dbd..cc839995cb 100644
--- a/openecomp-ui/resources/scss/components/_versionController.scss
+++ b/openecomp-ui/resources/scss/components/_versionController.scss
@@ -1,281 +1,294 @@
.version-controller-bar {
- display: flex;
- min-height: 70px;
- border-bottom: 1px solid $tlv-light-gray;
- background-color: transparent;
+ display: flex;
+ min-height: 70px;
+ border-bottom: 1px solid $tlv-light-gray;
+ background-color: transparent;
- .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;
+ .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;
- .vc-separator {
- border-left: 1px solid $tlv-light-gray;
- height: 37px;
- margin-left: 5px;
- margin-right: 5px;
- }
+ .vc-separator {
+ border-left: 1px solid $tlv-light-gray;
+ height: 37px;
+ margin-left: 5px;
+ margin-right: 5px;
+ }
- .version-status-container {
- display: flex;
- height: 30px;
+ .version-status-container {
+ display: flex;
+ height: 30px;
- .version-selector-more-versions {
- color: $blue;
- cursor: pointer;
- }
+ .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;
- @extend .body-1;
- }
+ .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;
+ @extend .body-1;
+ }
- .version-section {
- .form-group {
- margin-right: 20px;
+ .version-section {
+ .form-group {
+ margin-right: 20px;
- .input-options {
- border: none;
+ .input-options {
+ border: none;
- .input-options-select {
- padding-top: 4px;
- }
- }
- }
- }
+ .input-options-select {
+ padding-top: 4px;
+ }
+ }
+ }
+ }
- .vc-status {
- display: flex;
- padding-left: 20px;
- border-left: $light-gray thin solid;
+ .vc-status {
+ display: flex;
+ padding-left: 20px;
+ border-left: $light-gray thin solid;
- .status-text {
- align-self: center;
- margin-top: 2px;
- @extend .heading-5;
- color: $dark-gray;
- }
- }
- .depricated-item-status {
- @extend .body-3;
- color: $white;
- background-color: $dark-purple;
- margin-left: 10px;
- padding: 1px 10px;
- align-self: center;
- border-radius: 3px;
- }
- }
+ .status-text {
+ align-self: center;
+ margin-top: 2px;
+ @extend .heading-5;
+ color: $dark-gray;
+ }
+ }
+ .depricated-item-status {
+ @extend .body-3;
+ color: $white;
+ background-color: $dark-purple;
+ margin-left: 10px;
+ padding: 1px 10px;
+ align-self: center;
+ border-radius: 3px;
+ }
+ }
- .save-submit-cancel-container {
- display: flex;
- align-items: center;
- height: 100%;
+ .save-submit-cancel-container {
+ display: flex;
+ align-items: center;
+ height: 100%;
- .action-buttons, .collaborator-action-buttons, .vc-save-section, .vc-submit-section {
- display: flex;
- align-items: center;
- height: 100%;
+ .action-buttons,
+ .collaborator-action-buttons,
+ .vc-save-section,
+ .vc-submit-section {
+ display: flex;
+ align-items: center;
+ height: 100%;
- .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;
+ .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: $tlv-light-gray;
- }
+ &:hover:not(.disabled) {
+ cursor: pointer;
+ background-color: $tlv-light-gray;
+ }
- &.disabled {
- border-color: $light-gray;
- }
+ &.disabled {
+ border-color: $light-gray;
+ }
- .vc-v-submit {
- width: 11px;
- height: 8px;
- margin-right: 10px;
- position: relative;
- top: -1px;
- }
- }
+ .vc-v-submit {
+ width: 11px;
+ height: 8px;
+ margin-right: 10px;
+ position: relative;
+ top: -1px;
+ }
+ }
- .version-control-buttons {
- display: flex;
- }
+ .version-control-buttons {
+ display: flex;
+ }
- .action-button-wrapper {
- display: flex;
- align-items: center;
- height: 70px;
+ .action-button-wrapper {
+ display: flex;
+ align-items: center;
+ height: 70px;
- &:hover:not(.disabled) {
- background-color: $tlv-light-gray;
- }
+ &:hover:not(.disabled) {
+ background-color: $tlv-light-gray;
+ }
- &:active:not(.disabled) {
- background-color: $light-gray;
- }
+ &:active:not(.disabled) {
+ background-color: $light-gray;
+ }
- .action-buttons-svg {
- padding-left: 10px;
- padding-right: 10px;
+ .action-buttons-svg {
+ padding-left: 10px;
+ padding-right: 10px;
- .svg-icon {
- fill: $text-black;
- height: 20px;
+ .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; }
- }
- }
+ &,
+ &.__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;
+ }
+ }
+ }
- .version-controller-permissions {
- width: 32px;
- height: 20px;
- fill: $dark-gray;
- }
- }
+ .version-controller-permissions {
+ width: 32px;
+ height: 20px;
+ fill: $dark-gray;
+ }
+ }
- .action-button-label {
- display: block;
- font-size: $icon-font-size;
- font-family: $icon-font-family;
- height: 1em;
- margin-top: 5px;
- margin-bottom: 0;
- }
+ .action-button-label {
+ display: block;
+ font-size: $icon-font-size;
+ font-family: $icon-font-family;
+ height: 1em;
+ margin-top: 5px;
+ margin-bottom: 0;
+ }
- .onboarding-overlay {
- margin-top: -6px;
- .permissions-overlay {
- width: 237px;
+ .onboarding-overlay {
+ margin-top: -6px;
+ .permissions-overlay {
+ width: 237px;
- .permissions-overlay-header {
- text-align: left;
- color: $blue;
- padding-bottom: 15px;
- padding-top: 15px;
- border-bottom: 1px solid $light-gray;
- .permissions-overlay-header-title {
- margin-left: 20px;
- }
- }
- .permissions-overlay-content {
- max-height: 290px;
- overflow-y: auto;
- padding-left: 10px;
- padding-right: 10px;
- .contributor {
- &:last-child {
- border-bottom: none;
- }
- border-bottom: 1px solid $tlv-light-gray;
- .contributor-content {
- padding-top: 12px;
- padding-bottom: 10px;
- margin-left: 10px;
- display: flex;
- .contributor-icon-circle {
- &.selected {
- border: 1px solid $blue;
- }
+ .permissions-overlay-header {
+ text-align: left;
+ color: $blue;
+ padding-bottom: 15px;
+ padding-top: 15px;
+ border-bottom: 1px solid $light-gray;
+ .permissions-overlay-header-title {
+ margin-left: 20px;
+ }
+ }
+ .permissions-overlay-content {
+ max-height: 290px;
+ overflow-y: auto;
+ padding-left: 10px;
+ padding-right: 10px;
+ .contributor {
+ &:last-child {
+ border-bottom: none;
+ }
+ border-bottom: 1px solid $tlv-light-gray;
+ .contributor-content {
+ padding-top: 12px;
+ padding-bottom: 10px;
+ margin-left: 10px;
+ display: flex;
+ .contributor-icon-circle {
+ &.selected {
+ border: 1px solid $blue;
+ }
- border-radius: 65px;
- padding: 2px;
- width: 32px;
- height: 32px;
- margin-top: 4px;
- .contributer-icon {
- width: 26px;
- border-radius: 50px;
- height: 26px;
- margin-top: 0px;
- .__user {
- height: 18px;
- width: 16px;
- stroke: $blue;
- fill: transparent;
- margin-left: 5px;
- margin-top: 3px;
- }
- &.selected {
- border: 1px solid $blue;
- background-color: $blue;
- .__user {
- stroke: $white;
- margin-left: 4px;
- }
- }
- }
- }
+ border-radius: 65px;
+ padding: 2px;
+ width: 32px;
+ height: 32px;
+ margin-top: 4px;
+ .contributer-icon {
+ width: 26px;
+ border-radius: 50px;
+ height: 26px;
+ margin-top: 0px;
+ .__user {
+ height: 18px;
+ width: 16px;
+ stroke: $blue;
+ fill: transparent;
+ margin-left: 5px;
+ margin-top: 3px;
+ }
+ &.selected {
+ border: 1px solid $blue;
+ background-color: $blue;
+ .__user {
+ stroke: $white;
+ margin-left: 4px;
+ }
+ }
+ }
+ }
- .contributer-info {
- padding-left: 11px;
- .contributer-name {
- @extend .body-2-semibold;
- text-transform: uppercase;
- color: $dark-gray;
- }
- .contributer-role {
- @extend .body-3;
- color: $gray;
- display: flex;
- text-transform: lowercase;
- p:first-letter {
- text-transform: uppercase;
- }
- justify-content: space-between;
- }
- }
- }
- }
- }
- .permissions-overlay-footer {
- .manage-permissions-btn {
- @extend .body-2-semibold;
- margin-top: 20px;
- padding-top: 10px;
- padding-bottom: 10px;
- color: $blue;
- text-align: center;
- cursor: pointer;
- background-color: $tlv-gray;
- }
- }
-
- }
- }
- }
- }
- .vc-nav-item-close {
- display: flex;
- padding-left: 18px;
- padding-top: 3px;
- align-self: center;
- @extend .body-1;
- color: $gray;
- cursor: pointer;
- border-left: $gray thin solid;
- }
- }
+ .contributer-info {
+ padding-left: 11px;
+ .contributer-name {
+ @extend .body-2-semibold;
+ text-transform: uppercase;
+ color: $dark-gray;
+ }
+ .contributer-role {
+ @extend .body-3;
+ color: $gray;
+ display: flex;
+ text-transform: lowercase;
+ p:first-letter {
+ text-transform: uppercase;
+ }
+ justify-content: space-between;
+ }
+ }
+ }
+ }
+ }
+ .permissions-overlay-footer {
+ .manage-permissions-btn {
+ @extend .body-2-semibold;
+ margin-top: 20px;
+ padding-top: 10px;
+ padding-bottom: 10px;
+ color: $blue;
+ text-align: center;
+ cursor: pointer;
+ background-color: $tlv-gray;
+ }
+ }
+ }
+ }
+ }
+ }
+ .vc-nav-item-close {
+ display: flex;
+ padding-left: 18px;
+ padding-top: 3px;
+ align-self: center;
+ @extend .body-1;
+ color: $gray;
+ cursor: pointer;
+ border-left: $gray thin solid;
+ }
+ }
}
diff --git a/openecomp-ui/resources/scss/components/_vnfBrowse.scss b/openecomp-ui/resources/scss/components/_vnfBrowse.scss
index 7e0085af8a..f47b736ce2 100644
--- a/openecomp-ui/resources/scss/components/_vnfBrowse.scss
+++ b/openecomp-ui/resources/scss/components/_vnfBrowse.scss
@@ -1,109 +1,107 @@
$message-info-icon-size: 16px;
.vnf-creation-page {
- .list-editor-view-header {
- border-bottom: none;
- }
- .vnfBrowse-list-item {
- display: flex;
- height: 36px;
- @extend .body-1;
- &.header {
- @extend .body-1-semibold;
- background-color: $tlv-light-gray;
- color: $text-black;
- }
- &.selectedRow {
- background-color: $blue;
- color: $white;
- .svg-icon-wrapper {
- &.__positive {
- fill: $white;
- color: $white;
- }
- }
- }
- .svg-icon-wrapper {
- &.__positive {
- fill: $dark-gray;
- color: $dark-gray;
- }
- }
- }
+ .list-editor-view-header {
+ border-bottom: none;
+ }
+ .vnfBrowse-list-item {
+ display: flex;
+ height: 36px;
+ @extend .body-1;
+ &.header {
+ @extend .body-1-semibold;
+ background-color: $tlv-light-gray;
+ color: $text-black;
+ }
+ &.selectedRow {
+ background-color: $blue;
+ color: $white;
+ .svg-icon-wrapper {
+ &.__positive {
+ fill: $white;
+ color: $white;
+ }
+ }
+ }
+ .svg-icon-wrapper {
+ &.__positive {
+ fill: $dark-gray;
+ color: $dark-gray;
+ }
+ }
+ }
- .activity-action {
- .svg-icon-wrapper {
- float: left;
- }
- }
+ .activity-action {
+ .svg-icon-wrapper {
+ float: left;
+ }
+ }
- .message-further-info-icon {
- background-color: $gray;
- }
+ .message-further-info-icon {
+ background-color: $gray;
+ }
- .table-cell {
- border-right: 1px solid $light-gray;
- border-bottom: 1px solid $light-gray;
- &:last-child {
- border-right: none;
- }
- flex-basis: 22%;
- display: flex;
- padding: 0 20px;
- justify-content: center;
- flex-direction: column;
+ .table-cell {
+ border-right: 1px solid $light-gray;
+ border-bottom: 1px solid $light-gray;
+ &:last-child {
+ border-right: none;
+ }
+ flex-basis: 22%;
+ display: flex;
+ padding: 0 20px;
+ justify-content: center;
+ flex-direction: column;
- &.vnftable-action {
- flex-basis: 12%;
- span {
- margin: auto;
- }
- }
-}
-
- .vnf-table-header {
- cursor: pointer;
- display: flex;
- align-items: center;
- .header-sort-arrow {
- width: 0;
- height: 0;
- border-left: 5px solid transparent;
- border-right: 5px solid transparent;
- margin-left: 9px;
- &.up {
- border-bottom: 5px solid $black;
- }
- &.down {
- border-top: 5px solid $black;
- }
+ &.vnftable-action {
+ flex-basis: 12%;
+ span {
+ margin: auto;
+ }
+ }
+ }
- }
- }
+ .vnf-table-header {
+ cursor: pointer;
+ display: flex;
+ align-items: center;
+ .header-sort-arrow {
+ width: 0;
+ height: 0;
+ border-left: 5px solid transparent;
+ border-right: 5px solid transparent;
+ margin-left: 9px;
+ &.up {
+ border-bottom: 5px solid $black;
+ }
+ &.down {
+ border-top: 5px solid $black;
+ }
+ }
+ }
- .vnf-table-cell {
- display: flex;
- justify-content: space-between;
- span {
- overflow: hidden;
- text-overflow: ellipsis;
- }
- }
- .vnftable-name {
- max-width: 22%;
- }
+ .vnf-table-cell {
+ display: flex;
+ justify-content: space-between;
+ span {
+ overflow: hidden;
+ text-overflow: ellipsis;
+ }
+ }
+ .vnftable-name {
+ max-width: 22%;
+ }
- .vnf-grid-section {
- margin: 20px 20px 20px 50px;
- }
+ .vnf-grid-section {
+ margin: 20px 20px 20px 50px;
+ }
- .vnf-modal {
- text-align: right;
- margin-top: 22px;
- }
-
- .vnf-submit {
- margin-right: 15px;
- }
+ .vnf-modal {
+ text-align: right;
+ margin-top: 22px;
+ }
-} \ No newline at end of file
+ .vnf-submit {
+ margin-right: 15px;
+ }
+}
diff --git a/openecomp-ui/resources/scss/components/_vspDetailsVendorSelect.scss b/openecomp-ui/resources/scss/components/_vspDetailsVendorSelect.scss
index 294fd817b9..5938dc2808 100644
--- a/openecomp-ui/resources/scss/components/_vspDetailsVendorSelect.scss
+++ b/openecomp-ui/resources/scss/components/_vspDetailsVendorSelect.scss
@@ -1,4 +1,4 @@
-.vsp-details-vendor-select {
+.vsp-details-vendor-select {
.validation-form-content {
padding-top: 20px;
.vendor-selector-modal-title {
@@ -9,5 +9,5 @@
margin-top: 10px;
margin-bottom: 20px;
}
- }
-} \ No newline at end of file
+ }
+}