diff options
Diffstat (limited to 'openecomp-ui/resources/scss/components')
9 files changed, 101 insertions, 115 deletions
diff --git a/openecomp-ui/resources/scss/components/_activityLog.scss b/openecomp-ui/resources/scss/components/_activityLog.scss index 9ada804934..5e9418ed7d 100644 --- a/openecomp-ui/resources/scss/components/_activityLog.scss +++ b/openecomp-ui/resources/scss/components/_activityLog.scss @@ -39,11 +39,7 @@ $message-info-icon-size: 16px; .svg-icon-wrapper { float: right; } - .checkCircle { - fill: $green; - width: 16px; - height: 16px; - } + .status-icon.false:after { @include status-icon-class; float: right; diff --git a/openecomp-ui/resources/scss/components/_datepicker.scss b/openecomp-ui/resources/scss/components/_datepicker.scss index 593bb09d7d..d51a1b690e 100644 --- a/openecomp-ui/resources/scss/components/_datepicker.scss +++ b/openecomp-ui/resources/scss/components/_datepicker.scss @@ -1,5 +1,6 @@ .customized-date-picker { margin-bottom: 24px; + display: flex; .date-picker-label { &.required { &:before { @@ -13,27 +14,38 @@ color: $dark-gray; margin-bottom: 8px; } + .react-datepicker__input-container { + flex: 1; + cursor: pointer; + } .datepicker-custom-input { display: flex; justify-content: space-between; - width: 243px; + align-items: center; height: 30px; border-radius: 2px; color: $dark-gray; border: 1px solid $light-gray; - padding: 6px 12px; + 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 { - &:before { - cursor: pointer; - content: 'x'; + .svg-icon { + fill: initial; } } } .datepicker-text { cursor: pointer; - width: 170px; @extend .body-1; &.placeholder { color: $light-gray; @@ -43,9 +55,13 @@ .calendar-input { fill: $light-gray; } + .svg-icon-wrapper.calendar { + .svg-icon { + fill: $dark-gray; + width: 17px; + height: 17px; + } + } } - - - } diff --git a/openecomp-ui/resources/scss/components/_dualListBox.scss b/openecomp-ui/resources/scss/components/_dualListBox.scss index 4a1a940c34..4353ab39e8 100644 --- a/openecomp-ui/resources/scss/components/_dualListBox.scss +++ b/openecomp-ui/resources/scss/components/_dualListBox.scss @@ -7,8 +7,7 @@ } .dual-search-multi-select-section { - $multi-select-box-width: 398px; - width: $multi-select-box-width; + flex: 1; .dual-text-box-search-title, .dual-list-box-multi-select-text { @extend .body-1; color: $dark-gray; diff --git a/openecomp-ui/resources/scss/components/_expandableInput.scss b/openecomp-ui/resources/scss/components/_expandableInput.scss index 52b72d7c91..2484a73e8a 100644 --- a/openecomp-ui/resources/scss/components/_expandableInput.scss +++ b/openecomp-ui/resources/scss/components/_expandableInput.scss @@ -1,24 +1,21 @@ .expandable-input-top { display: flex; height: 22px; - .svg-icon-wrapper { - height: 17px; - width: 17px; - } .expandable-input-wrapper { display: flex; - .svg-icon.search { - height: 17px; - width: 17px; - } &.closed { - .svg-icon.search { - transition: fill 0.5s ease-in; - fill: $blue; - cursor: pointer; - &:hover { + .svg-icon + { + &.__search { + height: 17px; + width: 17px; transition: fill 0.5s ease-in; - fill: $dark-blue; + fill: $blue; + cursor: pointer; + &:hover { + transition: fill 0.5s ease-in; + fill: $dark-blue; + } } } } @@ -26,17 +23,21 @@ .svg-icon-wrapper { margin-left: 3px; } - .svg-icon.search { - fill: $dark-blue; + .svg-icon { + &.__search { + height: 17px; + width: 17px; + fill: $dark-blue; + } } - .svg-icon.close { - margin-left: 7px; - height: 10px; - width: 10px; - opacity: 0.6; - fill: $dark-gray; - &:hover { - opacity: 1; + .svg-icon { + &.__close { + margin-left: 7px; + opacity: 0.6; + fill: $dark-gray; + &:hover { + opacity: 1; + } } } } diff --git a/openecomp-ui/resources/scss/components/_notifications.scss b/openecomp-ui/resources/scss/components/_notifications.scss index 7165e57ef9..5b10dee0ee 100644 --- a/openecomp-ui/resources/scss/components/_notifications.scss +++ b/openecomp-ui/resources/scss/components/_notifications.scss @@ -18,6 +18,12 @@ .modal-content .modal-header { border-top: 3px solid $red; } + } + + &.negative { + .modal-content .modal-header { + border-top: 3px solid $red; + } } &.warning { diff --git a/openecomp-ui/resources/scss/components/_selectActionTable.scss b/openecomp-ui/resources/scss/components/_selectActionTable.scss index 4e42b6ce5b..fa8eb3110c 100644 --- a/openecomp-ui/resources/scss/components/_selectActionTable.scss +++ b/openecomp-ui/resources/scss/components/_selectActionTable.scss @@ -1,15 +1,13 @@ .select-action-table-view { .svg-icon-wrapper { flex-direction: row; - - &::before { - content:""; - } .svg-icon { - margin-left: 5px; - margin-right: 5px; - width:16px; - height:16px; + &:not(.__plus) { + margin-left: 5px; + margin-right: 5px; + width:16px; + height:16px; + } } } .dummy-icon { @@ -57,21 +55,11 @@ display: flex; flex-direction: row; margin-bottom: 14px; - .svg-icon-wrapper.trashO { + .svg-icon-wrapper.hideDelete { .svg-icon { - fill: $dark-gray; + fill: $white; } } - .svg-icon-wrapper.errorCircle { - .svg-icon { - fill: $red; - } - } - .svg-icon-wrapper.checkCircle { - .svg-icon { - fill: $green; - } - } .select-action-table-row { display: flex; flex: 1; @@ -80,6 +68,7 @@ &.has-error { border-color: $red; } + .select-action-table-cell { flex: 1; border-right: 1px solid; @@ -127,10 +116,9 @@ border-bottom: 1px solid $blue; overflow: auto; .Select-menu { - display: inline-block; .Select-option { - width: 100%; - display: inline-block; + overflow: hidden; + text-overflow: ellipsis; border-bottom: 1px solid $light-gray; &:hover { background-color: $blue; diff --git a/openecomp-ui/resources/scss/components/_submitErrorResponse.scss b/openecomp-ui/resources/scss/components/_submitErrorResponse.scss index b917dfefeb..f045038193 100644 --- a/openecomp-ui/resources/scss/components/_submitErrorResponse.scss +++ b/openecomp-ui/resources/scss/components/_submitErrorResponse.scss @@ -26,14 +26,19 @@ background-color: $tlv-gray; padding: 5px; cursor: pointer; - .chevronDown { - width:10px; - height:10px; - margin-right: 10px; - &.right { - transform: rotate(270deg); + .svg-icon { + &.__chevronDown { + margin-right: 10px; } } + .collapse-right { + .svg-icon { + &.__chevronDown { + transform: rotate(270deg); + } + } + + } } .error-code-list-item { diff --git a/openecomp-ui/resources/scss/components/_validationForm.scss b/openecomp-ui/resources/scss/components/_validationForm.scss index 46269ad699..e1adb5650f 100644 --- a/openecomp-ui/resources/scss/components/_validationForm.scss +++ b/openecomp-ui/resources/scss/components/_validationForm.scss @@ -7,12 +7,10 @@ form { .validation-radio-wrapper { position: relative; } - .nav-tabs { + .sdc-tabs { position: relative; - .invalid-tab:not(.active) { - a { + .invalid-tab:not(.sdc-tab-active) { color: $red; - } } } .validation-error-message { @@ -77,7 +75,7 @@ form { flex: 0.2; content: ' '; } - @media (min-width: 1349px) { + @media (min-width: 1389px) { &.add-line-break { .control-label { &:after { diff --git a/openecomp-ui/resources/scss/components/_versionController.scss b/openecomp-ui/resources/scss/components/_versionController.scss index b454d3496b..57610986c3 100644 --- a/openecomp-ui/resources/scss/components/_versionController.scss +++ b/openecomp-ui/resources/scss/components/_versionController.scss @@ -59,56 +59,33 @@ margin-right: 20px; padding-bottom: 5px; - .versionControllerLockClosed { + + .svg-icon { fill: $dark-gray; - width: 21px; - height: 23px; - margin-top: -3px; - &.disabled { - fill: $light-gray; - } &:hover { fill: $black; } - } - .versionControllerLockOpen { - fill: $dark-gray; - width: 24px; - height: 28px; - margin-top: -6px; - &:hover { - fill: $black; + &.__versionControllerLockClosed { + margin-top: -3px; } - } - .versionControllerSubmit { - fill: $blue; - &.disabled { - fill: $light-gray; + &.__versionControllerLockOpen { + margin-top: -6px; } - &:hover { - fill: $dark-blue; + &.__versionControllerSubmit { + fill: $blue; + &:hover { + fill: $dark-blue; + } + &.disabled { + fill: $dark-gray; + } } } - - .versionControllerRevert { - fill: $dark-gray; - &.disabled { - fill: $light-gray; - } - &:hover { - fill: $black; - } - } - .versionControllerSave { - fill: $dark-gray; - &.disabled { - fill: $light-gray; - } - &:hover { - fill: $black; - } } - } + + + + } .vc-nav-item-close { display: flex; |