diff options
Diffstat (limited to 'openecomp-ui/resources/scss/components')
13 files changed, 115 insertions, 99 deletions
diff --git a/openecomp-ui/resources/scss/components/_activityLog.scss b/openecomp-ui/resources/scss/components/_activityLog.scss index 1e31e06814..9ada804934 100644 --- a/openecomp-ui/resources/scss/components/_activityLog.scss +++ b/openecomp-ui/resources/scss/components/_activityLog.scss @@ -29,7 +29,7 @@ $message-info-icon-size: 16px; height: 36px; @extend .body-1; &.header { - @extend .body-1-medium; + @extend .body-1-semibold; background-color: $tlv-light-gray; color: $text-black; } @@ -39,7 +39,7 @@ $message-info-icon-size: 16px; .svg-icon-wrapper { float: right; } - .check-circle { + .checkCircle { fill: $green; width: 16px; height: 16px; diff --git a/openecomp-ui/resources/scss/components/_buttons.scss b/openecomp-ui/resources/scss/components/_buttons.scss index fbf2c3e728..357a799e93 100644 --- a/openecomp-ui/resources/scss/components/_buttons.scss +++ b/openecomp-ui/resources/scss/components/_buttons.scss @@ -2,8 +2,7 @@ border: 1px solid; border-color: $blue; color: $blue; - font-weight: bolder; - @extend .body-1; + @extend .body-1-semibold; text-align: center; padding: 7px; border-radius: 5px; diff --git a/openecomp-ui/resources/scss/components/_datepicker.scss b/openecomp-ui/resources/scss/components/_datepicker.scss new file mode 100644 index 0000000000..593bb09d7d --- /dev/null +++ b/openecomp-ui/resources/scss/components/_datepicker.scss @@ -0,0 +1,51 @@ +.customized-date-picker { + margin-bottom: 24px; + .date-picker-label { + &.required { + &:before { + content: "*"; + color: $red; + margin: 0 4px 0 0; + } + } + + @extend .body-2-semibold; + color: $dark-gray; + margin-bottom: 8px; + } + .datepicker-custom-input { + display: flex; + justify-content: space-between; + width: 243px; + height: 30px; + border-radius: 2px; + color: $dark-gray; + border: 1px solid $light-gray; + padding: 6px 12px; + &:hover { + border-color: $gray; + .clear-input { + &:before { + cursor: pointer; + content: 'x'; + } + } + } + .datepicker-text { + cursor: pointer; + width: 170px; + @extend .body-1; + &.placeholder { + color: $light-gray; + } + + } + .calendar-input { + fill: $light-gray; + } + } + + + +} + diff --git a/openecomp-ui/resources/scss/components/_forms.scss b/openecomp-ui/resources/scss/components/_forms.scss index 23c58ea4ac..b662ce873c 100644 --- a/openecomp-ui/resources/scss/components/_forms.scss +++ b/openecomp-ui/resources/scss/components/_forms.scss @@ -1,5 +1,5 @@ .section-title { - @extend .heading-3-medium; + @extend .heading-3-semibold; padding: 50px 0 30px 0; &:first-child { padding: 0 0 30px 0; diff --git a/openecomp-ui/resources/scss/components/_grid.scss b/openecomp-ui/resources/scss/components/_grid.scss index d4d1fa7ccd..9a76f97546 100644 --- a/openecomp-ui/resources/scss/components/_grid.scss +++ b/openecomp-ui/resources/scss/components/_grid.scss @@ -1,7 +1,9 @@ $gridItemSpace: 15%; .grid-section { - padding-bottom: 30px; + &:not(:last-of-type) { + padding-bottom: 30px; + } .grid-items { display: flex; flex-direction: row; diff --git a/openecomp-ui/resources/scss/components/_listEditorView.scss b/openecomp-ui/resources/scss/components/_listEditorView.scss index 18d5426eb7..1c837ca4c2 100644 --- a/openecomp-ui/resources/scss/components/_listEditorView.scss +++ b/openecomp-ui/resources/scss/components/_listEditorView.scss @@ -15,16 +15,16 @@ border-bottom: 1px solid $light-gray; padding-bottom: 5px; .list-editor-view-title { - @extend .heading-3-medium; + @extend .heading-3-semibold; } .list-editor-view-add-controller { - @extend .heading-4-medium; + @extend .body-1-semibold; color: $blue; display: table; cursor: pointer; position: relative; - padding-top: 0px; - padding-bottom: 0px; + padding-top: 0; + padding-bottom: 0; margin-left: auto; .list-editor-view-add-title { display: flex; @@ -151,6 +151,13 @@ } } + .details-col{ + flex-direction: column; + .title { + padding-bottom: 0; + } + } + .description { @extend .body-1; @include multiline-ellipsis(1.3em, 3); diff --git a/openecomp-ui/resources/scss/components/_navigationSideBar.scss b/openecomp-ui/resources/scss/components/_navigationSideBar.scss index 36c14a2785..daf5025bee 100644 --- a/openecomp-ui/resources/scss/components/_navigationSideBar.scss +++ b/openecomp-ui/resources/scss/components/_navigationSideBar.scss @@ -16,7 +16,7 @@ flex-direction: column; background-color: $tlv-gray; .group-name { - @extend .heading-4-medium; + @extend .heading-4-semibold; @include ellipsis; min-height: 56px; display: block; @@ -47,13 +47,13 @@ @include ellipsis; white-space: normal; &.selected { - @extend .body-1-medium; + @extend .body-1-semibold; border-left: 4px solid $blue; padding-left: 18px; color: $blue; } &.bold-name { - @extend .body-1-medium; + @extend .body-1-semibold; } } } diff --git a/openecomp-ui/resources/scss/components/_notifications.scss b/openecomp-ui/resources/scss/components/_notifications.scss index 426f05cd89..7165e57ef9 100644 --- a/openecomp-ui/resources/scss/components/_notifications.scss +++ b/openecomp-ui/resources/scss/components/_notifications.scss @@ -5,12 +5,12 @@ .modal-header { padding: 15px 10px 10px; .modal-title { - @extend .heading-5-medium; + @extend .heading-5-semibold; } } .modal-body { padding: 30px 15px; - @extend .body-1-medium; + @extend .body-1-semibold; } } diff --git a/openecomp-ui/resources/scss/components/_selectActionTable.scss b/openecomp-ui/resources/scss/components/_selectActionTable.scss index fa17733374..4e42b6ce5b 100644 --- a/openecomp-ui/resources/scss/components/_selectActionTable.scss +++ b/openecomp-ui/resources/scss/components/_selectActionTable.scss @@ -1,16 +1,16 @@ .select-action-table-view { .svg-icon-wrapper { flex-direction: row; - + &::before { - content:""; + content:""; } .svg-icon { margin-left: 5px; margin-right: 5px; width:16px; height:16px; - } + } } .dummy-icon { background-color: $white; @@ -39,34 +39,39 @@ .select-action-table-headers { display: flex; background-color: $tlv-light-gray; - border-color: inherit; + border-color: inherit; .select-action-table-header { - @extend .body-1-medium; + @extend .body-1-semibold; flex: 1; border-top: 1px solid; - border-right: 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; + flex-direction: row; margin-bottom: 14px; - .svg-icon.trash-o { - - fill: $dark-gray; + .svg-icon-wrapper.trashO { + .svg-icon { + fill: $dark-gray; + } + } + .svg-icon-wrapper.errorCircle { + .svg-icon { + fill: $red; + } } - .svg-icon.error-circle { - fill: $red; + .svg-icon-wrapper.checkCircle { + .svg-icon { + fill: $green; + } } - .svg-icon.check-circle { - fill: $green; - } .select-action-table-row { display: flex; flex: 1; @@ -90,7 +95,7 @@ } } .form-group { - margin: 0; + margin: 0; .Select-control { height:36px; border: none; @@ -102,7 +107,7 @@ padding-left: 20px; padding-right: 50px; padding-top: 4px; - + } .Select-placeholder { color: $dark-gray; @@ -110,23 +115,23 @@ .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-menu { display: inline-block; - .Select-option { + .Select-option { width: 100%; display: inline-block; - border-bottom: 1px solid $light-gray; + border-bottom: 1px solid $light-gray; &:hover { background-color: $blue; color: $white; @@ -142,9 +147,9 @@ } &.is-focused { background-color: transparent; - } + } } - } + } } } } diff --git a/openecomp-ui/resources/scss/components/_submitErrorResponse.scss b/openecomp-ui/resources/scss/components/_submitErrorResponse.scss index e34be01af2..b917dfefeb 100644 --- a/openecomp-ui/resources/scss/components/_submitErrorResponse.scss +++ b/openecomp-ui/resources/scss/components/_submitErrorResponse.scss @@ -26,7 +26,7 @@ background-color: $tlv-gray; padding: 5px; cursor: pointer; - .chevron-down { + .chevronDown { width:10px; height:10px; margin-right: 10px; @@ -54,7 +54,7 @@ .component-name-header { margin-left: 45px; margin-top: 10px; - @extend .heading-5-medium; + @extend .heading-5-semibold; } } } diff --git a/openecomp-ui/resources/scss/components/_svgIcon.scss b/openecomp-ui/resources/scss/components/_svgIcon.scss deleted file mode 100644 index fc02f81fd4..0000000000 --- a/openecomp-ui/resources/scss/components/_svgIcon.scss +++ /dev/null @@ -1,51 +0,0 @@ -@mixin overrideBootstrapClose(){ - opacity: 1; - float: none; - &:hover { - opacity: 1; - } -} - -.svg-icon-wrapper { - display: inline-flex; - justify-content: center; - align-items: center; - &.bottom { - flex-direction: column; - .svg-icon-label { - margin-bottom: 5px; - } - } - &.right { - float: none; - .svg-icon-label { - margin-left: 5px; - } - } - &.top { - flex-direction: column-reverse;; - .svg-icon-label { - margin-top: 5px; - } - } - &.left { - flex-direction: row-reverse;; - .svg-icon-label { - margin-right: 5px; - } - } - // bootstrap override - &.close { - @include overrideBootstrapClose(); - } - .close { - @include overrideBootstrapClose(); - } - .svg-icon { - width: 20px; - height: 20px; - } - .svg-icon-label { - @extend .body-1; - } -} diff --git a/openecomp-ui/resources/scss/components/_validationForm.scss b/openecomp-ui/resources/scss/components/_validationForm.scss index 9404f2841a..46269ad699 100644 --- a/openecomp-ui/resources/scss/components/_validationForm.scss +++ b/openecomp-ui/resources/scss/components/_validationForm.scss @@ -4,6 +4,9 @@ form { position: relative; flex: 1; } + .validation-radio-wrapper { + position: relative; + } .nav-tabs { position: relative; .invalid-tab:not(.active) { diff --git a/openecomp-ui/resources/scss/components/_versionController.scss b/openecomp-ui/resources/scss/components/_versionController.scss index 3c30cdcc37..b454d3496b 100644 --- a/openecomp-ui/resources/scss/components/_versionController.scss +++ b/openecomp-ui/resources/scss/components/_versionController.scss @@ -20,7 +20,7 @@ padding-right: 10px; margin-right: 15px; margin-left: 10px; - @extend .body-1; + @extend .body-1; } .version-section { .form-group { @@ -59,7 +59,7 @@ margin-right: 20px; padding-bottom: 5px; - .version-controller-lock-closed { + .versionControllerLockClosed { fill: $dark-gray; width: 21px; height: 23px; @@ -71,7 +71,7 @@ fill: $black; } } - .version-controller-lock-open { + .versionControllerLockOpen { fill: $dark-gray; width: 24px; height: 28px; @@ -80,7 +80,7 @@ fill: $black; } } - .version-controller-submit { + .versionControllerSubmit { fill: $blue; &.disabled { fill: $light-gray; @@ -90,7 +90,7 @@ } } - .version-controller-revert { + .versionControllerRevert { fill: $dark-gray; &.disabled { fill: $light-gray; @@ -99,7 +99,7 @@ fill: $black; } } - .version-controller-save { + .versionControllerSave { fill: $dark-gray; &.disabled { fill: $light-gray; |