diff options
Diffstat (limited to 'openecomp-ui/resources/scss/components')
16 files changed, 927 insertions, 281 deletions
diff --git a/openecomp-ui/resources/scss/components/_activityLog.scss b/openecomp-ui/resources/scss/components/_activityLog.scss new file mode 100644 index 0000000000..1e31e06814 --- /dev/null +++ b/openecomp-ui/resources/scss/components/_activityLog.scss @@ -0,0 +1,104 @@ +$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; +} + +.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; + } + .activity-list-item { + display: flex; + height: 36px; + @extend .body-1; + &.header { + @extend .body-1-medium; + background-color: $tlv-light-gray; + color: $text-black; + } + } + + .activity-status { + .svg-icon-wrapper { + float: right; + } + .check-circle { + fill: $green; + width: 16px; + height: 16px; + } + .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; + } + + .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; + } + +} diff --git a/openecomp-ui/resources/scss/components/_buttons.scss b/openecomp-ui/resources/scss/components/_buttons.scss index b39ea495ab..fbf2c3e728 100644 --- a/openecomp-ui/resources/scss/components/_buttons.scss +++ b/openecomp-ui/resources/scss/components/_buttons.scss @@ -1,18 +1,3 @@ - -$plus-circle-icon-size: 18px; -.plus-icon-button { - background: url($plus-circle-icon) no-repeat; - background-size: $plus-circle-icon-size; - width: $plus-circle-icon-size; - height: $plus-circle-icon-size; - cursor: pointer; - &.small { - background-size: $plus-circle-icon-size - 6; - width: $plus-circle-icon-size - 6; - height: $plus-circle-icon-size - 6; - } -} - .primary-btn{ border: 1px solid; border-color: $blue; diff --git a/openecomp-ui/resources/scss/components/_dualListBox.scss b/openecomp-ui/resources/scss/components/_dualListBox.scss index 543c1c8b92..4a1a940c34 100644 --- a/openecomp-ui/resources/scss/components/_dualListBox.scss +++ b/openecomp-ui/resources/scss/components/_dualListBox.scss @@ -1,6 +1,10 @@ .dual-list-box { display: flex; margin: 25px 0 10px 0; + .svg-icon.search { + height: 14px; + width: 14px; + } .dual-search-multi-select-section { $multi-select-box-width: 398px; @@ -32,6 +36,10 @@ .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; @@ -40,7 +48,7 @@ height: 15px; cursor: pointer; margin-top: 20px; - color: $blue; + fill: $blue; } } } diff --git a/openecomp-ui/resources/scss/components/_expandableInput.scss b/openecomp-ui/resources/scss/components/_expandableInput.scss index 52f410a61b..52b72d7c91 100644 --- a/openecomp-ui/resources/scss/components/_expandableInput.scss +++ b/openecomp-ui/resources/scss/components/_expandableInput.scss @@ -1,61 +1,55 @@ -$transitionLength: 0.5s; - -@mixin expand-transition($tl){ - transition: width $tl, background-color $tl, cursor $tl; -} - -@mixin color-transition($tl){ - transition: color $tl; -} - -.expandable-input-wrapper { - display: flex; - &:hover{ - .form-control { - border-color: $gray; - } - } - .expandable-input-control { - flex: 1 1; - margin: 0; - .form-control { - border-radius: 20px; - } - align-self: center; - } - .expandable-active { - @include expand-transition($transitionLength); - width: 215px; - cursor: text; - } - .expandable-not-active { - @include expand-transition($transitionLength); - width: 28px; - cursor: pointer; - background-color: transparent; - color: transparent; +.expandable-input-top { + display: flex; + height: 22px; + .svg-icon-wrapper { + height: 17px; + width: 17px; } - - .expandable-icon { - @include color-transition($transitionLength); - position: relative; - left: -20px; - align-self: center; - width: 0; - cursor: pointer; - color: $dark-gray; - } - - .expandable-close-button{ - @extend .expandable-icon; - color: $gray; - opacity: 0.5; - &:hover { - opacity: 1; + .expandable-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 { + transition: fill 0.5s ease-in; + fill: $dark-blue; + } + } + } + &.opened { + .svg-icon-wrapper { + margin-left: 3px; + } + .svg-icon.search { + fill: $dark-blue; + } + .svg-icon.close { + margin-left: 7px; + height: 10px; + width: 10px; + 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; } - } - .expandable-icon-active { - @include color-transition($transitionLength); - color: $blue; } } diff --git a/openecomp-ui/resources/scss/components/_forms.scss b/openecomp-ui/resources/scss/components/_forms.scss index 3c50fe694a..23c58ea4ac 100644 --- a/openecomp-ui/resources/scss/components/_forms.scss +++ b/openecomp-ui/resources/scss/components/_forms.scss @@ -5,10 +5,37 @@ padding: 0 0 30px 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; + } + } + } + } +} + .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; @@ -26,20 +53,24 @@ &.Select--multi { .Select-value { color: $text-black; - background-color: transparent; - border-color: $light-gray; - margin-top: 2px; - margin-left: 2px; - border-radius: 1px; + background-color: $background-gray; + border: none; + margin: 3px 0 3px 10px; + border-radius: 10px; + padding-left: 8px; + padding-right: 6px; } .Select-value-icon { - border-right-color: $light-gray; + border: none; + float: right; + &:hover { + background-color: inherit; + color: inherit; + } } .Select-arrow-zone { - padding-top: 4px; + padding-top: 4px; } } } } - - diff --git a/openecomp-ui/resources/scss/components/_grid.scss b/openecomp-ui/resources/scss/components/_grid.scss new file mode 100644 index 0000000000..d4d1fa7ccd --- /dev/null +++ b/openecomp-ui/resources/scss/components/_grid.scss @@ -0,0 +1,64 @@ +$gridItemSpace: 15%; + +.grid-section { + padding-bottom: 30px; + .grid-items { + display: flex; + flex-direction: row; + flex-wrap: wrap; + } + + %grid-col-base { + flex-shrink: 0; + display: flex; + } + + .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-col-1 { + @extend %grid-col-base; + flex-basis: 25%; + &:after { + flex-basis: $gridItemSpace; + content: ' '; + } + } + + .grid-col-2 { + @extend %grid-col-base; + flex-basis: 50%; + &:after { + flex-basis: $gridItemSpace / 2; + content: ' '; + } + } + .grid-col-3 { + @extend %grid-col-base; + flex-basis: 75%; + &:after { + flex-basis: $gridItemSpace / 3; + content: ' '; + } + } + .grid-col-4 { + @extend %grid-col-base; + flex-basis: 100%; + &:after { + flex-basis: $gridItemSpace / 4; + content: ' '; + } + } +} diff --git a/openecomp-ui/resources/scss/components/_icon.scss b/openecomp-ui/resources/scss/components/_icon.scss new file mode 100644 index 0000000000..c80055d055 --- /dev/null +++ b/openecomp-ui/resources/scss/components/_icon.scss @@ -0,0 +1,164 @@ +$image-icon-normal-size: 20px; + +.icon-component { + display: inline-flex; + align-items: center; + + &.clickable:hover { + cursor: pointer; + } + .icon-label { + color: $blue; + } + &.disabled { + .icon-label { + color: $tlv-light-gray; + opacity: 0.7; + } + } + .icon { + width: $image-icon-normal-size; + height: $image-icon-normal-size; + margin: 0 6px; + background-repeat: no-repeat; + + &.trash { + background-image: url($trash-icon); + } + + &.artifacts { + background-image: url($artifacts-icon); + } + + &.base { + background-image: url($base-module-icon); + } + + &.module { + background-image: url($module-icon); + } + + &.pencil { + background-image: url($pencil-icon); + } + + &.check { + background-image: url($check-icon); + width: 30px; + height: 30px; + } + + &.download { + background-image: url($download-icon); + width: 16px; + height: 14px; + } + + &.upload { + background-image: url($upload-icon); + width: 16px; + height: 14px; + } + &.validation-artifacts { + width: 13px; + height: 17px; + position: relative; + top: 3px; + background-image: url($artifacts-regular-icon); + &.selected { + background-image: url($artifacts-selected-icon); + } + } + &.network { + background-image: url($network-icon); + width: 12px; + height: 12px; + &.selected { + background-image: url($network-selected-icon); + } + } + &.validation-other { + background-image: url($others-icon); + width: 12px; + height: 12px; + &.selected { + background-image: url($others-selected-icon); + } + } + &.volume { + width: 15px; + height: 16px; + background-image: url($volume-icon); + &.selected { + background-image: url($volume-selected-icon); + } + } + &.zip { + background-image: url($zip-icon); + height: 23px; + width: 29px; + &.selected { + background-image: url($zip-selected-icon); + } + } + &.heat { + background-image: url($heat-icon); + height: 14px; + width: 16px; + &.selected { + background-image: url($heat-selected-icon); + } + } + &.env { + background-image: url($env-icon); + height: 15px; + width: 16px; + &.selected { + background-image: url($env-selected-icon); + } + } + &.error { + width: 14px; + min-width: 14px; + height: 14px; + background-image: url($error-icon-sm); + } + &.warning { + height: 13px; + width: 15px; + min-width: 15px; + background-image: url($warning-icon-sm); + } + &.error-lg { + width: 17px; + min-width: 17px; + height: 17px; + background-image: url($error-icon-lg); + } + &.warning-lg { + width: 19px; + min-width: 19px; + height: 17px; + background-image: url($warning-icon-lg); + } + &.chevron-up { + background-image: url($chevron_down); + transform: rotate(180deg); + height: 7px; + width: 11px; + } + &.chevron-down { + background-image: url($chevron_down); + height: 7px; + width: 11px; + } + &.go-to-overview { + background-image: url($go-to-overview-icon); + height: 15px; + width: 18px; + &.disabled { + background-image: url($go-to-overview-disabled-icon); + } + } + } +} diff --git a/openecomp-ui/resources/scss/components/_inputOptions.scss b/openecomp-ui/resources/scss/components/_inputOptions.scss index 107751b07b..face03d64d 100644 --- a/openecomp-ui/resources/scss/components/_inputOptions.scss +++ b/openecomp-ui/resources/scss/components/_inputOptions.scss @@ -1,3 +1,12 @@ +.disabled { + .Select-control { + background-color: $tlv-light-gray; + .Select-placeholder { + color: $dark-gray; + } + } +} + .input-options { display: flex; border: 1px solid $light-gray; @@ -14,6 +23,7 @@ padding-top:0px; padding-bottom: 0px; height:28px; + } .input-options-other{ @@ -34,6 +44,42 @@ } .input-options.has-error { - border-color: #A94442; + 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; + } +} diff --git a/openecomp-ui/resources/scss/components/_listEditorView.scss b/openecomp-ui/resources/scss/components/_listEditorView.scss index 704faaf098..18d5426eb7 100644 --- a/openecomp-ui/resources/scss/components/_listEditorView.scss +++ b/openecomp-ui/resources/scss/components/_listEditorView.scss @@ -2,49 +2,42 @@ @extend .flex-column; background-color: $content-background-color; - .list-editor-view-title { - @extend .section-title; - } - - .list-editor-view-title-inline { - @extend .list-editor-view-title; - position: relative; - top: 9px; - &:first-child { - padding: 0; - } - } - - .list-editor-view-add-section { - display: inline-block; - padding: 0 10px 0 10px; + .expandble-search-wrapper { + display: flex; + justify-content: flex-end; + margin-top: 10px; } - .list-editor-view-actions { + .list-editor-view-header { display: flex; justify-content: space-between; - align-items: center; + align-items: flex-end; border-bottom: 1px solid $light-gray; - padding-bottom: 18px; + padding-bottom: 5px; + .list-editor-view-title { + @extend .heading-3-medium; + } .list-editor-view-add-controller { - @extend .body-1-medium; + @extend .heading-4-medium; color: $blue; display: table; cursor: pointer; position: relative; - top: 9px; + padding-top: 0px; + padding-bottom: 0px; + margin-left: auto; + .list-editor-view-add-title { + display: flex; + } span { display: table-cell; vertical-align: middle; + margin-top:4px; &:nth-child(2) { padding-left: 10px; } } } - - .search-wrapper { - width: 265px; - } } .list-editor-view-list-scroller { @@ -56,21 +49,17 @@ .list-editor-view-list { @extend .flex-column; - .list-editor-item-view { margin: 8px 0; border: 1px solid $light-gray; background-color: $white; - cursor: pointer; display: flex; - height: 100px; min-height: 100px; overflow: hidden; .list-editor-item-view-content { padding: 10px 28px; display: flex; - flex-basis: 95%; - width: 95%; + flex: 1 1 auto; .list-editor-item-view-field { flex: 1 1; color: $black; @@ -91,6 +80,12 @@ .text { @extend .body-1; } + .textEllipses { + white-space: nowrap; + text-overflow: ellipsis; + overflow: hidden; + padding-right: 5px; + } } } .list-editor-item-view-controller { @@ -99,59 +94,79 @@ align-self: center; justify-content: center; flex-direction: column; - .fa { - transition: color .3s; - font-size: 22px; - color: $white; - &:first-child{ + .svg-icon-wrapper { + &:first-child { margin-bottom: 10px; } } + .svg-icon { + transition: fill .3s; + height: 18px; + width: 18px; + fill: $white; + } } - &:hover { + &.selectable:hover{ @extend .box-hover; + cursor: pointer; .list-editor-item-view-controller { - .fa { - color: $gray; + .svg-icon { + fill: $dark-gray; + &:hover { + fill: $black; + } } } } } - } + &.two-columns { - &.thinner-list { - background-color: $white; - padding: 0; - margin-top: 35px; + flex-direction: row; + flex-wrap: wrap; - .list-editor-view-list { - border-top: 0; - padding-top: 0; - margin-top: 23px; .list-editor-item-view { - &:hover { - border-color: $light-gray; - } - margin: 5px 0 0 0; - height: 30px; - border-top: 0; - border-left: 0; - border-right: 0; .list-editor-item-view-content { - padding: 4px; - .name { - @extend .body-2-medium; - flex-basis: 36%; + 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; + } + } + + .description { + @extend .body-1; + @include multiline-ellipsis(1.3em, 3); + } } } - .list-editor-item-view-controller { - .fa-trash-o { - font-size: 20px; - } + + &: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/_navigationSideBar.scss b/openecomp-ui/resources/scss/components/_navigationSideBar.scss index 404f43ca68..36c14a2785 100644 --- a/openecomp-ui/resources/scss/components/_navigationSideBar.scss +++ b/openecomp-ui/resources/scss/components/_navigationSideBar.scss @@ -3,7 +3,7 @@ height: 100%; background-color: $white; border-right: 1px solid $light-gray; - box-shadow: 1px -1px 3px 0px $tlv-light-gray; + @include box-shadow(1px -1px 3px 0px $tlv-light-gray); border-bottom: 0; .navigation-side-content { @@ -16,11 +16,11 @@ flex-direction: column; background-color: $tlv-gray; .group-name { - @extend .heading-5-medium; + @extend .heading-4-medium; @include ellipsis; min-height: 56px; display: block; - padding: 18px 12px 16px 40px; + padding: 18px 12px 13px 40px; background-color: $white; border-bottom: 1px solid $tlv-light-gray; } diff --git a/openecomp-ui/resources/scss/components/_selectActionTable.scss b/openecomp-ui/resources/scss/components/_selectActionTable.scss new file mode 100644 index 0000000000..fa17733374 --- /dev/null +++ b/openecomp-ui/resources/scss/components/_selectActionTable.scss @@ -0,0 +1,152 @@ +.select-action-table-view { + .svg-icon-wrapper { + flex-direction: row; + + &::before { + content:""; + } + .svg-icon { + 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-headers { + display: flex; + background-color: $tlv-light-gray; + border-color: inherit; + .select-action-table-header { + @extend .body-1-medium; + 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.trash-o { + + fill: $dark-gray; + } + .svg-icon.error-circle { + fill: $red; + } + .svg-icon.check-circle { + fill: $green; + } + .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 { + display: inline-block; + .Select-option { + width: 100%; + display: inline-block; + 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/_slidePanel.scss b/openecomp-ui/resources/scss/components/_slidePanel.scss deleted file mode 100644 index 61c9a189f0..0000000000 --- a/openecomp-ui/resources/scss/components/_slidePanel.scss +++ /dev/null @@ -1,35 +0,0 @@ - -.slide-panel { - transition: left .5s,right .5s; - - .slide-panel-header { - padding: 10px; - height: 45px; - display: table; - width: 100%; - .slide-panel-header-title, .collapse-double-icon { - display: table-cell; - vertical-align: middle; - } - .slide-panel-header-title { - @extend .body-2; - text-align: center; - width: 100%; - color: $text-black; - } - .collapse-double-icon { - color: $text-black; - cursor: pointer; - } - } - - .slide-panel-content { - opacity: 1; - transition: opacity .5s, visibility .5s; - - &.closed { - opacity: 0; - visibility: hidden; - } - } -} diff --git a/openecomp-ui/resources/scss/components/_submitErrorResponse.scss b/openecomp-ui/resources/scss/components/_submitErrorResponse.scss index fdac5ebe45..e34be01af2 100644 --- a/openecomp-ui/resources/scss/components/_submitErrorResponse.scss +++ b/openecomp-ui/resources/scss/components/_submitErrorResponse.scss @@ -20,4 +20,41 @@ } } } + .error-block { + margin: 10px 0; + .error-block-header { + background-color: $tlv-gray; + padding: 5px; + cursor: pointer; + .chevron-down { + width:10px; + height:10px; + margin-right: 10px; + &.right { + transform: rotate(270deg); + } + } + + } + .error-code-list-item { + .icon-label { + @extend .body-1; + color: $dark-gray; + } + .icon-component { + align-items: baseline; + } + } + .list-group-item { + .error-item-text { + margin-top:-2px; + //position: fixed; + } + } + .component-name-header { + margin-left: 45px; + margin-top: 10px; + @extend .heading-5-medium; + } + } } diff --git a/openecomp-ui/resources/scss/components/_svgIcon.scss b/openecomp-ui/resources/scss/components/_svgIcon.scss new file mode 100644 index 0000000000..fc02f81fd4 --- /dev/null +++ b/openecomp-ui/resources/scss/components/_svgIcon.scss @@ -0,0 +1,51 @@ +@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 93444c2e88..9404f2841a 100644 --- a/openecomp-ui/resources/scss/components/_validationForm.scss +++ b/openecomp-ui/resources/scss/components/_validationForm.scss @@ -5,6 +5,7 @@ form { flex: 1; } .nav-tabs { + position: relative; .invalid-tab:not(.active) { a { color: $red; @@ -73,14 +74,17 @@ form { flex: 0.2; content: ' '; } - &.add-line-break { - .control-label { - &:after { - content: "\00a0"; - display: block; + @media (min-width: 1349px) { + &.add-line-break { + .control-label { + &:after { + content: "\00a0"; + display: block; + } } } } + } } } @@ -91,6 +95,16 @@ form { button:first-child { margin-right: 15px; } + .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 3511470bfb..3c30cdcc37 100644 --- a/openecomp-ui/resources/scss/components/_versionController.scss +++ b/openecomp-ui/resources/scss/components/_versionController.scss @@ -1,109 +1,125 @@ .version-controller-bar { - .navbar-inverse { - @extend .body-1-medium; + display: flex; + min-height: 57px; + border-bottom: 1px solid $tlv-light-gray; + background-color: transparent; + .vc-container { + display: flex; + flex: 1; + align-self: center; background-color: transparent; - border-bottom: $tlv-light-gray thin solid; - padding-top: 14px; - padding-bottom: 12px; - margin-bottom: 0; - .container { - width: 100%; - padding: 0 52px; + justify-content: space-between; + padding-left: 16px; + padding-right: 40px; + .version-status-container { + display: flex; height: 30px; - .navbar-collapse { - padding-left: 0; - .items-in-left { - display: flex; - height: 30px; - .version-section { - .form-group { - margin-right: 5px; - .input-options { - border: none; - .input-options-select { - padding-top: 4px; - } - } + .version-selector { + border: none; + margin-top: 7px; + padding-right: 10px; + margin-right: 15px; + margin-left: 10px; + @extend .body-1; + } + .version-section { + .form-group { + margin-right: 20px; + .input-options { + border: none; + .input-options-select { + padding-top: 4px; } } - .vc-status { - display: flex; - padding-left: 14px; - border-left: $light-gray thin solid; - .status-text { - align-self: center; - display: flex; - padding-left: 3px; - .status-text-dash { - padding: 0 9px; - } + } + } + .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; + } + } + } + .save-submit-cancel-container { + display: flex; + height: 30px; + .action-buttons { + display: flex; + padding: 0 13px; + .version-control-buttons { + display: flex; + } + .action-buttons-svg { + padding-top: 5px; + margin-right: 20px; + padding-bottom: 5px; + + .version-controller-lock-closed { + fill: $dark-gray; + width: 21px; + height: 23px; + margin-top: -3px; + &.disabled { + fill: $light-gray; } - .onboarding-status-icon { - width: 25px; - height: 19px; - background-image: url('../images/ecomp/ASDC_Sprite.png'); - background-position: -306px 674px; - align-self: center; + &:hover { + fill: $black; } - .checkout-status-icon { - display: flex; - & > .catalog-tile-check-in-status.sprite-new.checkout-editable-status-icon { - width: 25px; - height: 19px; - align-self: center; - margin-left: 5px; - } + } + .version-controller-lock-open { + fill: $dark-gray; + width: 24px; + height: 28px; + margin-top: -6px; + &:hover { + fill: $black; } } - } - .items-in-right { - display: flex; - height: 30px; - .action-buttons { - display: flex; - border-right: $gray thin solid; - padding: 0 13px; - .version-control-buttons { - display: flex; + .version-controller-submit { + fill: $blue; + &.disabled { + fill: $light-gray; } - .vc-nav-item-button { - border: 1px solid $light-gray; - border-radius: 5px; - cursor: pointer; - margin-right:10px; - padding: 6px 20px; - &:hover, &:focus { - background-color: lightgrey; - } - &.button-submit{ - background-color: transparent; - color: $green; - border-color: $green; - } - &.button-checkin-checkout { - background-color: $white; - @extend .body-1; - } + &:hover { + fill: $dark-blue; } - .revert-btn, .save-btn { - height: 24px; - width: 24px; - align-self: center; - cursor: pointer; - margin-right: 10px; + } + + .version-controller-revert { + fill: $dark-gray; + &.disabled { + fill: $light-gray; + } + &:hover { + fill: $black; } } - .vc-nav-item-close { - display: flex; - padding-left: 18px; - padding-top: 3px; - align-self: center; - @extend .body-1; - color: $gray; - cursor: pointer; + .version-controller-save { + fill: $dark-gray; + &.disabled { + fill: $light-gray; + } + &:hover { + fill: $black; + } } } } + .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; + } } } } |