diff options
| author |   Einav Weiss Keidar <einavw@amdocs.com> | 2018-08-13 16:19:46 +0300 |
|---|---|---|
| committer |   Avi Gaffa <avi.gaffa@amdocs.com> | 2019-02-11 13:50:22 +0000 |
| commit | 1801b24389baa8e3f7298ff2c41e2512b19c1290 (patch) | |
| tree | d3d2a15f53aa28698280d609548298d177f9280d /openecomp-ui/resources/scss/components | |
| parent | af8e36eb7f43803bd9cf40e9b46a0c0c8f47c781 (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')
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 + } +} |