diff options
Diffstat (limited to 'openecomp-ui/resources/scss/modules')
10 files changed, 195 insertions, 211 deletions
diff --git a/openecomp-ui/resources/scss/modules/_featureGroup.scss b/openecomp-ui/resources/scss/modules/_featureGroup.scss index 9d395f98c8..5f98ed2c05 100644 --- a/openecomp-ui/resources/scss/modules/_featureGroup.scss +++ b/openecomp-ui/resources/scss/modules/_featureGroup.scss @@ -1,23 +1,37 @@ .feature-groups-list-editor { - .list-editor-view-list { - .list-editor-item-view { - min-height: 110px; - height: 110px; - } - .list-editor-item-view-field { - .feature-groups-count-field { - display: inline-block; - &:first-child { - margin-right: 95px; - } - } - .feature-groups-count-ep { - @extend .heading-1; - color: $light-blue; + .list-editor-view{ + .list-editor-view-list { + .list-editor-item-view { + min-height: 110px; + height: 110px; } - .feature-groups-count-lk { - @extend .heading-1; - color: $light-green; + .list-editor-item-view-content { + .list-editor-item-view-field { + &.smaller-field { + flex: 0.35; + } + .feature-groups-count-field { + display: inline-block; + &:first-child { + margin-right: 95px; + } + } + .feature-groups-count-ep { + @extend .heading-1; + color: $light-blue; + } + .feature-groups-mrn-ep { + @extend .body-1; + color: $light-blue; + } + .feature-groups-count-lk { + @extend .heading-1; + color: $light-green; + } + .title-no-wrap { + white-space: nowrap; + } + } } } } @@ -39,7 +53,7 @@ .nav.nav-tabs { padding-left: 50px; } - + .tab-content { padding: 50px; .field-section { diff --git a/openecomp-ui/resources/scss/modules/_licenseModelOverview.scss b/openecomp-ui/resources/scss/modules/_licenseModelOverview.scss index 1c133a1dce..15bb9a7033 100644 --- a/openecomp-ui/resources/scss/modules/_licenseModelOverview.scss +++ b/openecomp-ui/resources/scss/modules/_licenseModelOverview.scss @@ -61,26 +61,34 @@ $lkg-ep-color: $light-blue; &:not(.read-only) .vendor-description { border: 1px solid transparent; + width: 100%; padding: 2px 0 2px 6px; margin-top: 10px; - + position: relative; + .svg-icon-wrapper { + position: absolute;; + right:0; + top:0; + opacity: 0; + } $hover-padding-right: 16px; @include percent-plus-value($property: width, $percent: 100%, $value: -$hover-padding-right); // compensate for padding added on hover &:hover { padding-right: $hover-padding-right; - width: 100%; border: 1px solid $light-gray; cursor: pointer; - background-position: calc(100% - 4px) 4px; - background-size: 14px; - background-image: url($pencil-icon); - background-repeat: no-repeat; - background-color: white; - + background-color: $white; + .svg-icon-wrapper { + opacity: 1; + z-index: 10; + } .description-data:after { background: white; } + .description-data { + width: 100%; + } } } @@ -167,20 +175,23 @@ $lkg-ep-color: $light-blue; flex-grow: 2; margin-left: 5px; } - .add-button { - cursor: pointer; - font-size: larger; - background-image: url($vlm-summary-plus); - background-size: 20px; - background-repeat: no-repeat; - width:20px; - height:20px; - margin-top: 3px; - margin-left: auto; - &:hover { - cursor: pointer; - background-image: url($vlm-summary-plus-blue); - } + .summary-name-and-count { + width: 100%; + } + .svg-icon-wrapper { + + .svg-icon { + &.__plusCircle { + width: 20px; + height: 20px; + margin-top: 3px; + margin-left: auto; + fill: $dark-gray; + &:hover { + fill: $blue; + } + } + } } .summary-name-and-count { @@ -205,7 +216,7 @@ $lkg-ep-color: $light-blue; } } .vlm-list-tab-panel { - + @extend .flex; margin-bottom: 7px; .section-title { @@ -221,6 +232,7 @@ $lkg-ep-color: $light-blue; margin-left:10px; cursor: pointer; } + /** .vlm-list-icon { background-size: 32px; background-repeat: no-repeat; @@ -237,7 +249,7 @@ $lkg-ep-color: $light-blue; background-image: url($vlm-summary-orphans-blue); } } - + **/ } } @@ -260,7 +272,7 @@ $lkg-ep-color: $light-blue; .vlm-list-item.orphan-list-item { @include overview-tile-shadow(); margin-left: 0; - + .vlm-list-item-title { .item-name { @@ -304,7 +316,7 @@ $lkg-ep-color: $light-blue; .clickable { cursor: pointer; } - + .list-item-section { .count-value { @extend .body-3; @@ -365,7 +377,7 @@ $lkg-ep-color: $light-blue; } .arrow-icon { align-self: center; - + } .vlm-item-info { flex: 1; @@ -424,7 +436,7 @@ $lkg-ep-color: $light-blue; @include create-circle($circle-icon-size,$fg-color,'FG'); color: $white; } - + .vlm-list-item-title { .item-name { color: $fg-color; @@ -465,7 +477,7 @@ $lkg-ep-color: $light-blue; margin-left: 52px; } } - + } &.vlm-list-item-lkg { margin-top: 10px; diff --git a/openecomp-ui/resources/scss/modules/_softwareProductAttachmentPage.scss b/openecomp-ui/resources/scss/modules/_softwareProductAttachmentPage.scss index bab2872691..0e092dd8bb 100644 --- a/openecomp-ui/resources/scss/modules/_softwareProductAttachmentPage.scss +++ b/openecomp-ui/resources/scss/modules/_softwareProductAttachmentPage.scss @@ -22,20 +22,7 @@ right: 40px; top: 15px; display: flex; - .icon-label { - color: $dark-gray; - } - .go-to-overview-icon { - .icon-label { - color: $blue; - } - &.disabled { - .icon-label { - color: $gray; - } - } - } .icon-component { margin-right: 30px; @@ -104,6 +91,11 @@ z-index: 1; padding-right: 20px; .counter { + .svg-icon { + &.__exclamationTriangleLine { + fill :$orange; + } + } display: flex; &:first-child { margin-right: 20px; @@ -145,8 +137,8 @@ justify-content: space-between; height: 40px; align-items: center; - .svg-icon-wrapper.chevronDown, .svg-icon-wrapper.chevronUp { - .svg-icon { + .svg-icon { + &.__chevronUp, &.__chevronDown { height: 10px; width: 10px; } @@ -224,6 +216,13 @@ .error-item { display: flex; margin: 10px 0; + .large { + .svg-icon { + width: 20px; + height: 20px; + fill: $orange; + } + } .error-item-file-type { margin-left: 15px; } @@ -231,6 +230,9 @@ @extend .body-1-semibold; margin-right: 5px; } + + + } } diff --git a/openecomp-ui/resources/scss/modules/_softwareProductComponentImage.scss b/openecomp-ui/resources/scss/modules/_softwareProductComponentImage.scss index 068404fcb6..dad837f356 100644 --- a/openecomp-ui/resources/scss/modules/_softwareProductComponentImage.scss +++ b/openecomp-ui/resources/scss/modules/_softwareProductComponentImage.scss @@ -16,6 +16,12 @@ } } +.vsp-components-image-editor { + .note-text { + color: $red; + } +} + .image-modal-edit, .image-modal-new { .modal-body { padding: 0; diff --git a/openecomp-ui/resources/scss/modules/_softwareProductLandingPage.scss b/openecomp-ui/resources/scss/modules/_softwareProductLandingPage.scss index 56860101b2..9b0375d24a 100644 --- a/openecomp-ui/resources/scss/modules/_softwareProductLandingPage.scss +++ b/openecomp-ui/resources/scss/modules/_softwareProductLandingPage.scss @@ -28,21 +28,19 @@ .missing-license { display: flex; align-items: baseline; - .svg-icon-wrapper.exclamationTriangleFull .svg-icon{ - fill: $orange; + .svg-icon{ + margin-right: 7px; + margin-left: 3px; + &.__exclamationTriangleFull { + fill: $orange; + width: 17px; + height: 17px; + } } .warning-text { position: relative; top: -2px; } - .svg-icon-wrapper { - margin-right: 7px; - margin-left: 3px; - .svg-icon { - height: 17px; - width: 17px; - } - } } } .name { diff --git a/openecomp-ui/resources/scss/modules/_softwareproductComponentLoadBalancing.scss b/openecomp-ui/resources/scss/modules/_softwareproductComponentLoadBalancing.scss index ceae4a00de..d1f3f488bd 100644 --- a/openecomp-ui/resources/scss/modules/_softwareproductComponentLoadBalancing.scss +++ b/openecomp-ui/resources/scss/modules/_softwareproductComponentLoadBalancing.scss @@ -1,13 +1,7 @@ .vsp-components-load-balancing { .svg-icon-wrapper { position: relative; - top: -3px; - &.chevronUp, &.chevronDown { - .svg-icon { - width: 10px; - height: 10px; - } - } + top: -4px; } .halb-data { diff --git a/openecomp-ui/resources/scss/modules/_vspComponentMonitoring.scss b/openecomp-ui/resources/scss/modules/_vspComponentMonitoring.scss index 4bcf7940eb..bda8512f36 100644 --- a/openecomp-ui/resources/scss/modules/_vspComponentMonitoring.scss +++ b/openecomp-ui/resources/scss/modules/_vspComponentMonitoring.scss @@ -1,6 +1,6 @@ .vsp-component-monitoring { - .snmp-dropzone { + .dropzone { .section-title { padding-bottom: 20px; } @@ -22,7 +22,7 @@ } .drag-text { color: $blue; - @extend .body-1-semibold; + @extend .body-1-semibold } .or-text { margin-top: 10px; @@ -30,6 +30,20 @@ } } + .monitoring-file { + display: flex; + .filename { + opacity: 1; + width: auto; + border-right-style: none; + } + .delete { + display: flex; + width: 30px; + justify-content: center; + align-items: center; + } + } } .delete-button { diff --git a/openecomp-ui/resources/scss/modules/_vspHeatSetup.scss b/openecomp-ui/resources/scss/modules/_vspHeatSetup.scss index 75d96b4c85..bd216c794b 100644 --- a/openecomp-ui/resources/scss/modules/_vspHeatSetup.scss +++ b/openecomp-ui/resources/scss/modules/_vspHeatSetup.scss @@ -24,10 +24,12 @@ position: relative; top: -2px; } + .modules-list-wrapper { - padding-bottom: 20px; - margin-bottom: 20px; - border-bottom: 1px solid $tlv-light-gray; + &.modules-list-wrapper-divider { + border-bottom: 1px solid $tlv-light-gray; + } + ul { .undefined-dragging { opacity: 0.5; @@ -36,7 +38,7 @@ display: flex; justify-content: space-between; flex-wrap: wrap; - + padding-bottom: 3px; .Select-value-label { @include ellipsis(85%); } @@ -55,24 +57,6 @@ } } - .modules-list-controllers { - text-align: right; - .btn-link { - &[disabled] { - color: $gray; - } - @extend .body-1; - color: $blue; - &:last-child { - padding-right: 0; - } - &:hover { - color: $dark-blue; - text-decoration: none; - } - } - } - .modules-list-item-controllers { display: flex; justify-content: space-between; @@ -82,16 +66,15 @@ min-width: 0; } - .svg-icon-wrapper.trashO { - .svg-icon { - fill: $dark-gray; - height: 18px; - width: 18px; - &:hover { - fill: $black; + .svg-icon { + &.__trashO { + fill: $dark-gray; + &:hover { + fill: $black; + } } - } } + .module-title-by-type { @extend .heading-5-semibold; margin-right: 3px; @@ -100,15 +83,15 @@ display: flex; align-items: center; - .svg-icon-wrapper.pencil { - .svg-icon { - height: 15px; - width: 15px; + .svg-icon { + &.__pencil { + margin-left: 3px; + opacity: 0; } - margin-left: 3px; - opacity: 0; } + + .filename-text { @extend .heading-5-semibold; @@ -144,14 +127,16 @@ border-color: transparent; } } - .svg-icon-wrapper.pencil { - margin-left: 10px; - opacity: 1; - .svg-icon { - stroke: $dark-gray; - &:hover { - stroke: $black; - } + .svg-icon { + &.__pencil { + margin-left: 10px; + opacity: 1; + .svg-icon { + stroke: $dark-gray; + &:hover { + stroke: $black; + } + } } } } @@ -173,23 +158,8 @@ } } .add-or-delete-volumes { - .svg-icon-wrapper { - margin-right: 8px; - .svg-icon { - height: 10px; - width: 10px; - fill: $blue; - } - } - cursor: pointer; - color: $blue; + margin-right: 8px; margin-bottom: 11px; - &:hover { - color: $dark-blue; - .svg-icon { - fill: $dark-blue; - } - } } &:before { content: "\00B7\00B7\00B7\00B7\00B7\00B7"; @@ -208,7 +178,9 @@ .artifact-files { @include modules-and-artifacts-list-items; - margin-top: 20px; + &.with-list-items { + margin-top: 10px; + } &.nested { .nested-list { @@ -238,21 +210,20 @@ display: flex; } - .add-all-unassigned { - @extend .body-1; - margin-bottom: 0; - color: $blue; - cursor: pointer; - &:hover { - color: $dark-blue; - } - } } } } + .modules-list-header { + height: 30px; + display: flex; + flex-direction: row; + flex-wrap: nowrap; + justify-content: flex-end; + align-items: baseline; + } + .unassigned-files { - margin-top: 30px; border: 1px solid $light-gray; background-color: $white; height: 250px; @@ -283,26 +254,12 @@ @extend .heading-4; margin-bottom: 10px; } - .link { - color: $blue; - cursor: pointer; - display: flex; - align-items: center; + .svg-icon-wrapper { margin-bottom: 10px; - .svg-icon-wrapper.angleRight { - .svg-icon { - height: 10px; - width: 10px; - margin-left: 7px; - fill: $blue; - } - } - &:hover { - color: $dark-blue; - .svg-icon-wrapper.angleRight { - .svg-icon { - fill: $dark-blue; - } + .svg-icon { + &.__angleRight { + width: 10px; + height: 10px; } } } diff --git a/openecomp-ui/resources/scss/modules/onboardingCatalog/_catalogTile.scss b/openecomp-ui/resources/scss/modules/onboardingCatalog/_catalogTile.scss index 87a852f755..612ec495cd 100644 --- a/openecomp-ui/resources/scss/modules/onboardingCatalog/_catalogTile.scss +++ b/openecomp-ui/resources/scss/modules/onboardingCatalog/_catalogTile.scss @@ -79,36 +79,22 @@ width: 58px; margin-left: 122px; background-repeat: no-repeat; - .svg-icon-wrapper { - &.vendor { - .svg-icon { + .svg-icon { + &.__vendor { fill: $dark-gray; - width: 53px; - height: 47px; &:hover { fill: $dark-gray; } - } margin-top: 22px; - } - &.vsp { - .svg-icon { + &.__vsp { fill: $light-blue; - width: 60px; - height: 40px; } margin-top: 18px; margin-left: 3px; - } - &.vlm { + &.__vlm { margin-top: 18px; - .svg-icon { fill: $purple; - - width: 45px; - height: 53px; - } } } } @@ -121,13 +107,11 @@ margin-top: 2px; padding-bottom: 3px; @extend .body-2-semibold; - .svg-icon-wrapper { - &.plus { - .svg-icon { - height: 9px; - width: 9px; + .svg-icon { + &.__plus { + width: 20px; + height: 20px; fill: $blue; - } } } .catalog-tile-item-details { @@ -136,6 +120,13 @@ .catalog-tile-add-new-vsp { color: $blue; + .svg-icon { + &.__plus { + width: 20px; + height: 20px; + + } + } margin-left: 40px; } .catalog-tile-locking-user-name { @@ -143,18 +134,12 @@ @include ellipsis(auto, inline-block, 180px); } .catalog-tile-check-in-status { - .svg-icon-wrapper { - &.locked { - .svg-icon { - width: 11px; + .svg-icon { + &.__locked { fill: $gray; - } } - &.unlocked { - .svg-icon { - width: 11px; + &.__unlocked { fill: $gray; - } } } } diff --git a/openecomp-ui/resources/scss/modules/onboardingCatalog/_createItemTile.scss b/openecomp-ui/resources/scss/modules/onboardingCatalog/_createItemTile.scss index aa3cf04c4f..d17dcdd685 100644 --- a/openecomp-ui/resources/scss/modules/onboardingCatalog/_createItemTile.scss +++ b/openecomp-ui/resources/scss/modules/onboardingCatalog/_createItemTile.scss @@ -37,12 +37,14 @@ } } .create-item-plus-icon{ - width: 19px; - height: 19px; - margin: -5px 12px 0 0; - .svg-icon.plus { - height: 19px; - width: 19px; + margin: -5px 12px 0 0; + height: 19px; + width: 19px; + .svg-icon { + &.__plus { + width: 19px; + height: 19px; + } } } &.vlm-type { |