diff options
Diffstat (limited to 'openecomp-ui/resources/scss')
77 files changed, 5478 insertions, 5655 deletions
diff --git a/openecomp-ui/resources/scss/_common.scss b/openecomp-ui/resources/scss/_common.scss index 6ade0abfe5..6d6a68512e 100644 --- a/openecomp-ui/resources/scss/_common.scss +++ b/openecomp-ui/resources/scss/_common.scss @@ -1,6 +1,5 @@ -@import "common/variables"; -@import "common/typography"; -@import "common/base"; -@import "common/layout"; -@import "common/utils"; - +@import 'common/variables'; +@import 'common/typography'; +@import 'common/base'; +@import 'common/layout'; +@import 'common/utils'; diff --git a/openecomp-ui/resources/scss/_components.scss b/openecomp-ui/resources/scss/_components.scss index 7bd90100e2..5458cbc411 100644 --- a/openecomp-ui/resources/scss/_components.scss +++ b/openecomp-ui/resources/scss/_components.scss @@ -1,102 +1,100 @@ -@import "components/forms"; -@import "components/validationForm"; -@import "components/dualListBox"; -@import "components/listEditorView"; -@import "components/toggleInput"; -@import "components/notifications"; -@import "components/inputOptions"; -@import "components/progressBar"; -@import "components/versionController"; -@import "components/sequenceDiagram"; -@import "components/navigationSideBar"; -@import "components/loader"; -@import "components/dropzone"; -@import "components/submitErrorResponse"; -@import "components/expandableInput"; -@import "components/grid"; -@import "components/activityLog"; -@import "components/selectActionTable"; -@import "components/datepicker"; -@import "components/tree"; -@import "components/commitModal"; -@import "components/userNotifications"; -@import "components/overlay"; -@import "components/vspDetailsVendorSelect"; -@import "components/vnfBrowse"; +@import 'components/forms'; +@import 'components/validationForm'; +@import 'components/dualListBox'; +@import 'components/listEditorView'; +@import 'components/toggleInput'; +@import 'components/inputOptions'; +@import 'components/progressBar'; +@import 'components/versionController'; +@import 'components/sequenceDiagram'; +@import 'components/navigationSideBar'; +@import 'components/loader'; +@import 'components/dropzone'; +@import 'components/submitErrorResponse'; +@import 'components/expandableInput'; +@import 'components/grid'; +@import 'components/activityLog'; +@import 'components/selectActionTable'; +@import 'components/datepicker'; +@import 'components/tree'; +@import 'components/commitModal'; +@import 'components/userNotifications'; +@import 'components/overlay'; +@import 'components/vspDetailsVendorSelect'; +@import 'components/vnfBrowse'; %noselect { - -webkit-touch-callout: none; - -webkit-user-select: none; - -moz-user-select: none; - -ms-user-select: none; - user-select: none; + -webkit-touch-callout: none; + -webkit-user-select: none; + -moz-user-select: none; + -ms-user-select: none; + user-select: none; } .clickable { - cursor: pointer; + cursor: pointer; } .no-padding { - padding: 0; + padding: 0; } .next-to-icon-label { - $margin: 10px; - margin-left: $margin; - &.right { - margin-left: 0; - margin-right: $margin; - } + $margin: 10px; + margin-left: $margin; + &.right { + margin-left: 0; + margin-right: $margin; + } } .search-wrapper { - display: flex; - .search-input-control { - flex: 1 1; - margin: 0; - .form-control { - font-style: italic; + display: flex; + .search-input-control { + flex: 1 1; + margin: 0; + .form-control { + font-style: italic; + } + } + .search-icon { + position: relative; + left: -23px; + align-self: center; + width: 0; + color: $dark-gray; + } + .filter-icon { + position: relative; + left: -20px; + align-self: center; + width: 0; + background-color: $white; } - } - .search-icon { - position: relative; - left: -23px; - align-self: center; - width: 0; - color: $dark-gray; - } - .filter-icon { - position: relative; - left: -20px; - align-self: center; - width: 0; - background-color: $white; - } } - .chevron::before { - border-style: solid; - border-width: 0.15em 0.15em 0 0; - content: ''; - display: inline-block; - height: 0.8em; - left: 0.15em; - position: relative; - top: 0.15em; - vertical-align: top; - width: 0.8em; + border-style: solid; + border-width: 0.15em 0.15em 0 0; + content: ''; + display: inline-block; + height: 0.8em; + left: 0.15em; + position: relative; + top: 0.15em; + vertical-align: top; + width: 0.8em; } .chevron.right:before { - left: 0; - transform: rotate(45deg); + left: 0; + transform: rotate(45deg); } .chevron.down:before { - transform: rotate(135deg); + transform: rotate(135deg); } .chevron.left:before { - transform: rotate(-135deg); + transform: rotate(-135deg); } .chevron.top:before { - transform: rotate(-45deg); + transform: rotate(-45deg); } diff --git a/openecomp-ui/resources/scss/_modules.scss b/openecomp-ui/resources/scss/_modules.scss index 6fe6e30ab6..ad33275b6d 100644 --- a/openecomp-ui/resources/scss/_modules.scss +++ b/openecomp-ui/resources/scss/_modules.scss @@ -1,30 +1,29 @@ -@import "modules/licenseModelOverview"; -@import "modules/licenseModelLimits"; -@import "modules/licenseAgreement"; -@import "modules/featureGroup"; -@import "modules/entitlementPools"; -@import "modules/licenseKeyGroup"; -@import "modules/softwareProductLandingPage"; -@import "modules/softwareProductCreatePage"; -@import "modules/_softwareProductAttachmentPage"; -@import "modules/_softwareProductProcessesPage"; -@import "modules/_vspComponentQuestionnaire"; -@import "modules/_softwareProductComponentNetwork"; -@import "modules/_softwareProductComponentGeneral"; -@import "modules/_softwareproductComponentLoadBalancing"; -@import "modules/_softwareProductComponentProcessesPage"; -@import "modules/_softwareProductComponentImage"; -@import "modules/softwareProductComponentCompute"; -@import "modules/vspComponentCompute"; -@import "modules/vspComponentMonitoring"; -@import "modules/licenseModel"; -@import "modules/onboardingCatalog"; -@import "modules/workflows"; -@import "modules/uploadScreen"; -@import "modules/vspHeatSetup"; -@import "modules/softwareProductDependencies"; -@import "modules/_permissions.scss"; -@import "modules/_revisions.scss"; -@import "modules/softwareProductDeployment"; -@import "modules/versionsPage"; -@import "modules/mergeEditor"; +@import 'modules/licenseModelOverview'; +@import 'modules/licenseModelLimits'; +@import 'modules/licenseAgreement'; +@import 'modules/featureGroup'; +@import 'modules/entitlementPools'; +@import 'modules/licenseKeyGroup'; +@import 'modules/softwareProductLandingPage'; +@import 'modules/softwareProductCreatePage'; +@import 'modules/_softwareProductAttachmentPage'; +@import 'modules/_softwareProductProcessesPage'; +@import 'modules/_vspComponentQuestionnaire'; +@import 'modules/_softwareProductComponentNetwork'; +@import 'modules/_softwareProductComponentGeneral'; +@import 'modules/_softwareproductComponentLoadBalancing'; +@import 'modules/_softwareProductComponentProcessesPage'; +@import 'modules/_softwareProductComponentImage'; +@import 'modules/softwareProductComponentCompute'; +@import 'modules/vspComponentMonitoring'; +@import 'modules/licenseModel'; +@import 'modules/onboardingCatalog'; +@import 'modules/workflows'; +@import 'modules/uploadScreen'; +@import 'modules/vspHeatSetup'; +@import 'modules/softwareProductDependencies'; +@import 'modules/_permissions.scss'; +@import 'modules/_revisions.scss'; +@import 'modules/softwareProductDeployment'; +@import 'modules/versionsPage'; +@import 'modules/mergeEditor'; diff --git a/openecomp-ui/resources/scss/bootstrap.scss b/openecomp-ui/resources/scss/bootstrap.scss index 32890b35f0..7b6fed7509 100644 --- a/openecomp-ui/resources/scss/bootstrap.scss +++ b/openecomp-ui/resources/scss/bootstrap.scss @@ -1,55 +1,43 @@ // DOX CORE -@import "common/variables"; -@import "common/typography"; +@import 'common/variables'; +@import 'common/typography'; // Core variables and mixins -@import "bootstrap-cust/variables"; -@import "bootstrap/variables"; -@import "bootstrap/mixins"; -// Reset and dependencies -//@import "bootstrap/normalize"; -//@import "bootstrap/print"; -//@import "bootstrap/glyphicons"; +@import 'bootstrap-cust/variables'; +@import 'bootstrap/variables'; +@import 'bootstrap/mixins'; -// Core CSS -//@import "bootstrap/scaffolding"; -@import "bootstrap/type"; -@import "bootstrap/code"; -@import "bootstrap/grid"; -@import "bootstrap/tables"; -@import "bootstrap-cust/tables"; -@import "bootstrap/forms"; -@import "bootstrap-cust/forms"; +@import 'bootstrap/type'; +@import 'bootstrap/code'; +@import 'bootstrap/grid'; +@import 'bootstrap/tables'; +@import 'bootstrap-cust/tables'; +@import 'bootstrap/forms'; +@import 'bootstrap-cust/forms'; // Components -@import "bootstrap/component-animations"; -@import "bootstrap/dropdowns"; -@import "bootstrap-cust/dropdowns"; -@import "bootstrap/button-groups"; -@import "bootstrap/input-groups"; -@import "bootstrap/breadcrumbs"; -@import "bootstrap/pagination"; -@import "bootstrap/pager"; -@import "bootstrap/labels"; -@import "bootstrap/badges"; -@import "bootstrap/jumbotron"; -// @import "bootstrap/thumbnails"; -@import "bootstrap/alerts"; -@import "bootstrap/progress-bars"; -@import "bootstrap/media"; -@import "bootstrap/list-group"; -@import "bootstrap-cust/list-group"; -@import "bootstrap/panels"; -@import "bootstrap-cust/panels"; -// @import "bootstrap/responsive-embed"; -//@import "bootstrap/wells"; -@import "bootstrap/close"; -@import "bootstrap-cust/close"; -// Components w/ JavaScript -@import "bootstrap/modals"; -@import "bootstrap-cust/modals"; -@import "bootstrap/tooltip"; -@import "bootstrap/popovers"; -// @import "bootstrap/carousel"; -// Utility classes -@import "bootstrap/utilities"; -@import "bootstrap/responsive-utilities"; +@import 'bootstrap/component-animations'; +@import 'bootstrap/dropdowns'; +@import 'bootstrap-cust/dropdowns'; +@import 'bootstrap/button-groups'; +@import 'bootstrap/input-groups'; +@import 'bootstrap/breadcrumbs'; +@import 'bootstrap/pagination'; +@import 'bootstrap/pager'; +@import 'bootstrap/labels'; +@import 'bootstrap/badges'; +@import 'bootstrap/jumbotron'; +@import 'bootstrap/alerts'; +@import 'bootstrap/progress-bars'; +@import 'bootstrap/media'; +@import 'bootstrap/list-group'; +@import 'bootstrap-cust/list-group'; +@import 'bootstrap/panels'; +@import 'bootstrap-cust/panels'; +@import 'bootstrap/close'; +@import 'bootstrap-cust/close'; +@import 'bootstrap/modals'; +@import 'bootstrap-cust/modals'; +@import 'bootstrap/tooltip'; +@import 'bootstrap/popovers'; +@import 'bootstrap/utilities'; +@import 'bootstrap/responsive-utilities'; diff --git a/openecomp-ui/resources/scss/common/_base.scss b/openecomp-ui/resources/scss/common/_base.scss index e4aa23f876..b9cfd7906a 100644 --- a/openecomp-ui/resources/scss/common/_base.scss +++ b/openecomp-ui/resources/scss/common/_base.scss @@ -1,6 +1,6 @@ html { - font-size: 100%; - height: 100%; + font-size: 100%; + height: 100%; } body { @@ -16,65 +16,70 @@ $scrollbar-height: 8px; $ff-scrollbar-width: 17px; /* scrollbar styling for Google Chrome | Safari | Opera */ ::-webkit-scrollbar { - width: $scrollbar-width; - height: $scrollbar-height; + width: $scrollbar-width; + height: $scrollbar-height; } ::-webkit-scrollbar-track { - background-color: transparent; - border-radius: 10px; + background-color: transparent; + border-radius: 10px; } ::-webkit-scrollbar-thumb { - border-radius: 10px; - background-color: $light-gray; - border-right: 2px solid $content-background-color; + border-radius: 10px; + background-color: $light-gray; + border-right: 2px solid $content-background-color; } /* Mozilla Firefox currently doesn't support scrollbar styling */ ul { - list-style: none; + list-style: none; } -h1, h2, h3, h4, h5, h6, ul { - margin: 0; - padding: 0; +h1, +h2, +h3, +h4, +h5, +h6, +ul { + margin: 0; + padding: 0; } input { - - padding: 7px 10px; + padding: 7px 10px; } .disabled { - opacity: 0.7 !important; + opacity: 0.7 !important; } fieldset { - border: none; + border: none; } fieldset { - label { - display: inline-block; - } + label { + display: inline-block; + } } .nav-tabs > li > a:focus, .btn:focus, .btn:active:focus, .btn.active:focus { - outline: none; + outline: none; } .box-hover { - border: 1px solid $light-blue; + border: 1px solid $light-blue; } /* monkey patch */ .sdc-button.sdc-button__link.sdc-button.sdc-button__link { - width: initial; - &:focus { - border: none; - } + width: initial; + &:focus { + border: none; + } } diff --git a/openecomp-ui/resources/scss/common/_layout.scss b/openecomp-ui/resources/scss/common/_layout.scss index 6c6a0cf165..58ed1227ce 100644 --- a/openecomp-ui/resources/scss/common/_layout.scss +++ b/openecomp-ui/resources/scss/common/_layout.scss @@ -1,35 +1,53 @@ .sdc-app { - height: 100%; - + height: 100%; } .flex { - display: flex; - flex: 1; + display: flex; + flex: 1; } .flex-column { - @extend .flex; - flex-direction: column; + @extend .flex; + flex-direction: column; } .content-area { - padding: 30px 60px 70px 60px; - overflow-y: auto; - overflow-x: hidden; - height: 100%; - &.no-padding-content-area { - padding: 0; - } + padding: 30px 60px 70px 60px; + overflow-y: auto; + overflow-x: hidden; + height: 100%; + &.no-padding-content-area { + padding: 0; + } } -.onborading-modal { - .modal-title { - text-transform: uppercase; - } -} .page-title { - @extend .heading-1; - @extend .text-uppercase !optional; - margin-bottom: 20px; - color: $blue; + @extend .heading-1; + @extend .text-uppercase !optional; + margin-bottom: 20px; + color: $blue; +} +.sdc-modal { + .sdc-modal__wrapper.sdc-modal-type-custom { + .sdc-modal__content { + padding: 0; + .entitlement-pools-modal, + .license-key-groups-modal, + .manage-permissions-page { + .validation-form-content { + overflow-y: visible; + } + } + .validation-form-content { + padding: 20px 40px; + overflow-y: auto; + .no-bottom-margin { + margin-bottom: 0; + .customized-date-picker { + margin-bottom: 0; + } + } + } + } + } } diff --git a/openecomp-ui/resources/scss/common/_typography.scss b/openecomp-ui/resources/scss/common/_typography.scss index c4ae856b5f..230881022f 100644 --- a/openecomp-ui/resources/scss/common/_typography.scss +++ b/openecomp-ui/resources/scss/common/_typography.scss @@ -1,23 +1,24 @@ /* Fonts */ @mixin base-font-regular() { - font-family: OpenSans, OpenSans-Regular, 'Open Sans',omnes-regular, Arial, sans-serif; + font-family: OpenSans, OpenSans-Regular, 'Open Sans', omnes-regular, Arial, + sans-serif; } @mixin base-font-light() { - font-family: OpenSans-Light, 'Open Sans', omnes-light, Arial, sans-serif; + font-family: OpenSans-Light, 'Open Sans', omnes-light, Arial, sans-serif; } -@mixin base-font-italic(){ - font-family: OpenSans-Italic, 'Open Sans', omnes-italic, Arial, sans-serif; +@mixin base-font-italic() { + font-family: OpenSans-Italic, 'Open Sans', omnes-italic, Arial, sans-serif; } @mixin base-font-semibold() { - font-family: OpenSans-Semibold, 'Open Sans', omnes-medium, Arial, sans-serif; + font-family: OpenSans-Semibold, 'Open Sans', omnes-medium, Arial, sans-serif; } @mixin base-font-bold() { - font-family: OpenSans-Bold, 'Open Sans', omnes-bold, Arial, sans-serif; + font-family: OpenSans-Bold, 'Open Sans', omnes-bold, Arial, sans-serif; } $heading-font-1: 28px; @@ -34,109 +35,107 @@ $body-font-4: 10px; $icon-font-size: 10px; $icon-font-family: Arial; - .heading-1 { - @include base-font-light; - font-size: $heading-font-1; + @include base-font-light; + font-size: $heading-font-1; } .heading-2 { - @include base-font-light; - font-size: $heading-font-2; + @include base-font-light; + font-size: $heading-font-2; } .heading-3-light { - @include base-font-light; - font-size: $heading-font-3; - @extend .text-uppercase !optional; + @include base-font-light; + font-size: $heading-font-3; + @extend .text-uppercase !optional; } .heading-3 { - @include base-font-regular; - font-size: $heading-font-3; - @extend .text-uppercase !optional; + @include base-font-regular; + font-size: $heading-font-3; + @extend .text-uppercase !optional; } .heading-3-semibold { - @include base-font-semibold; - font-size: $heading-font-3; - @extend .text-uppercase !optional; + @include base-font-semibold; + font-size: $heading-font-3; + @extend .text-uppercase !optional; } .heading-4 { - @include base-font-regular; - font-size: $heading-font-4; + @include base-font-regular; + font-size: $heading-font-4; } .heading-4-semibold { - @include base-font-semibold; - font-size: $heading-font-4; + @include base-font-semibold; + font-size: $heading-font-4; } .heading-5 { - @include base-font-regular; - font-size: $heading-font-5; + @include base-font-regular; + font-size: $heading-font-5; } .heading-5-semibold { - @include base-font-semibold; - font-size: $heading-font-5; + @include base-font-semibold; + font-size: $heading-font-5; } .body-1 { - @include base-font-regular; - font-size: $body-font-1; + @include base-font-regular; + font-size: $body-font-1; } .body-1-semibold { - @include base-font-semibold; - font-size: $body-font-1; + @include base-font-semibold; + font-size: $body-font-1; } .body-1-light { - @include base-font-light; - font-size: $body-font-1; + @include base-font-light; + font-size: $body-font-1; } .body-2 { - @include base-font-regular; - font-size: $body-font-2; + @include base-font-regular; + font-size: $body-font-2; } .body-2-semibold { - @include base-font-semibold; - font-size: $body-font-2; + @include base-font-semibold; + font-size: $body-font-2; } .body-3 { - @include base-font-regular; - font-size: $body-font-3; + @include base-font-regular; + font-size: $body-font-3; } .body-3-semibold { - @include base-font-semibold; - font-size: $body-font-3; + @include base-font-semibold; + font-size: $body-font-3; } .body-4 { - @include base-font-regular; - font-size: $body-font-4; + @include base-font-regular; + font-size: $body-font-4; } .body-4-semibold { - @include base-font-semibold; - font-size: $body-font-4; + @include base-font-semibold; + font-size: $body-font-4; } .body-3-light { - @include base-font-light; - font-size: $body-font-3; + @include base-font-light; + font-size: $body-font-3; } - .warning-text { - color: $yellow; + color: $yellow; } .error-text { - color: $red; + color: $red; } diff --git a/openecomp-ui/resources/scss/common/_utils.scss b/openecomp-ui/resources/scss/common/_utils.scss index 99b1ff5d9a..aa1c0b6ff0 100644 --- a/openecomp-ui/resources/scss/common/_utils.scss +++ b/openecomp-ui/resources/scss/common/_utils.scss @@ -1,5 +1,3 @@ - - /* Prefix */ $box-sizing-prefix: webkit moz spec; @@ -14,163 +12,166 @@ $flex-prefix: webkit spec; $browserPrefixes: webkit moz o ms; @mixin prefix($property, $value, $prefixeslist: 'all') { - @if $prefixeslist == all { - -webkit-#{$property}: $value; - -moz-#{$property}: $value; - -ms-#{$property}: $value; - -o-#{$property}: $value; - #{$property}: $value; - } @else { - @each $prefix in $prefixeslist { - @if $prefix == webkit { + @if $prefixeslist == all { -webkit-#{$property}: $value; - } @else if $prefix == moz { -moz-#{$property}: $value; - } @else if $prefix == ms { -ms-#{$property}: $value; - } @else if $prefix == o { -o-#{$property}: $value; - } @else if $prefix == spec { #{$property}: $value; - } @else { - @warn "No such prefix: #{$prefix}"; - } + } @else { + @each $prefix in $prefixeslist { + @if $prefix == webkit { + -webkit-#{$property}: $value; + } @else if $prefix == moz { + -moz-#{$property}: $value; + } @else if $prefix == ms { + -ms-#{$property}: $value; + } @else if $prefix == o { + -o-#{$property}: $value; + } @else if $prefix == spec { + #{$property}: $value; + } @else { + @warn "No such prefix: #{$prefix}"; + } + } } - } } /* Value Prefix*/ @mixin value-suffix-with-range($property, $valuesuffix, $from, $to, $prefixeslist) { - - @if $prefixeslist == all { - #{property} : -webkit-#{$valuesuffix}($from, $to); - #{property} : -moz-#{$valuesuffix}($from, $to); - #{property} : -o-#{$valuesuffix}($from, $to); - #{property} : -ms-#{$valuesuffix}($from, $to); - - } @else { - @each $prefix in $prefixeslist { - @if $prefix == webkit { - #{property} : -webkit-#{$valuesuffix}($from, $to); - } @else if $prefix == moz { - #{property} : -moz-#{$valuesuffix}($from, $to); - } @else if $prefix == ms { - #{property} : -ms-#{$valuesuffix}($from, $to); - } @else if $prefix == o { - #{property} : -o-#{$valuesuffix}($from, $to); - } @else { - @warn "No such prefix: #{$prefix}"; - } + @if $prefixeslist == all { + #{property}: -webkit-#{$valuesuffix}($from, $to); + #{property}: -moz-#{$valuesuffix}($from, $to); + #{property}: -o-#{$valuesuffix}($from, $to); + #{property}: -ms-#{$valuesuffix}($from, $to); + } @else { + @each $prefix in $prefixeslist { + @if $prefix == webkit { + #{property}: -webkit-#{$valuesuffix}($from, $to); + } @else if $prefix == moz { + #{property}: -moz-#{$valuesuffix}($from, $to); + } @else if $prefix == ms { + #{property}: -ms-#{$valuesuffix}($from, $to); + } @else if $prefix == o { + #{property}: -o-#{$valuesuffix}($from, $to); + } @else { + @warn "No such prefix: #{$prefix}"; + } + } } - } } /* Box sizing */ @mixin box-sizing($value: border-box) { - @include prefix(box-sizing, $value, $box-sizing-prefix); + @include prefix(box-sizing, $value, $box-sizing-prefix); } /* Borders & Shadows */ @mixin box-shadow($value) { - @include prefix(box-shadow, $value, $box-shadow-radius-prefix); + @include prefix(box-shadow, $value, $box-shadow-radius-prefix); } @mixin text-shadow($value) { - @include prefix(text-shadow, $value, $text-shadow-radius-prefix); + @include prefix(text-shadow, $value, $text-shadow-radius-prefix); } @mixin border-radius($value, $positions: all) { - @if ($positions == all) { - @include prefix(border-radius, $value, $border-radius-prefix); - } @else { - @each $position in $positions { - @include prefix(border-#{$position}-radius, $value, $border-radius-prefix); + @if ($positions == all) { + @include prefix(border-radius, $value, $border-radius-prefix); + } @else { + @each $position in $positions { + @include prefix(border-#{$position}-radius, $value, $border-radius-prefix); + } } - } - } @mixin transition($value) { - @include prefix(transition, $value, $transition-prefix); + @include prefix(transition, $value, $transition-prefix); } /* Opacity */ @mixin opacity($alpha) { - $ie-opacity: round($alpha * 100); - opacity: $alpha; - filter: unquote("alpha(opacity = #{$ie-opacity})"); + $ie-opacity: round($alpha * 100); + opacity: $alpha; + filter: unquote('alpha(opacity = #{$ie-opacity})'); } /* Ellipsis */ @mixin ellipsis($width: 100%, $display: inline-block, $max-width: none) { - overflow: hidden; - text-overflow: ellipsis; - width: $width; - white-space: nowrap; - display: $display; - max-width: $max-width; + overflow: hidden; + text-overflow: ellipsis; + width: $width; + white-space: nowrap; + display: $display; + max-width: $max-width; } -@mixin multiline-ellipsis($lineHeight: 1.3em, $lineCount: 2, $bgColor: $white){ - overflow: hidden; - position: relative; - line-height: $lineHeight; - max-height: $lineHeight * $lineCount; - text-align: justify; - word-break: break-all; - // margin-right: -1em; - padding-right: 1em; - &:before { - content: '...'; - position: absolute; - right: 3px; - bottom: 0; - } - &:after { - content: ''; - position: absolute; - right: 0; - width: 1em; - height: 1em; - margin-top: 0.2em; - background: $bgColor; - } +@mixin multiline-ellipsis($lineHeight: 1.3em, $lineCount: 2, $bgColor: $white) { + overflow: hidden; + position: relative; + line-height: $lineHeight; + max-height: $lineHeight * $lineCount; + text-align: justify; + word-break: break-all; + // margin-right: -1em; + padding-right: 1em; + &:before { + content: '...'; + position: absolute; + right: 3px; + bottom: 0; + } + &:after { + content: ''; + position: absolute; + right: 0; + width: 1em; + height: 1em; + margin-top: 0.2em; + background: $bgColor; + } } @mixin gradient($from, $to) { - /* fallback/image non-cover color */ - background-color: $from; - background-image: -webkit-gradient(linear, 0% 0%, 0% 100%, from($from), to($to)); - @include value-suffix-with-range(background-color, linear-gradient, $from, $to, $linear-gradient-prefix); + /* fallback/image non-cover color */ + background-color: $from; + background-image: -webkit-gradient( + linear, + 0% 0%, + 0% 100%, + from($from), + to($to) + ); + @include value-suffix-with-range(background-color, linear-gradient, $from, $to, $linear-gradient-prefix); } /* Vertical placement of multuple lines of text */ @mixin vertical-text($height) { - position: absolute; - top: 50%; - margin-top: -$height/2; + position: absolute; + top: 50%; + margin-top: -$height/2; } @mixin text-vertical-align($align: middle) { - display: table; - width: 100%; + display: table; + width: 100%; - & > * { - vertical-align: $align; - display: table-cell; - } + & > * { + vertical-align: $align; + display: table-cell; + } } @mixin center-element($width) { - width: $width; - margin-left: auto; - margin-right: auto; + width: $width; + margin-left: auto; + margin-right: auto; } @mixin center-content($width) { - & > * { - @include center-element($width); - } + & > * { + @include center-element($width); + } } /* transform-rotate */ @@ -179,9 +180,9 @@ $browserPrefixes: webkit moz o ms; // @param // $deg - angle in degrees @mixin transform-rotate($deg) { - transform: rotate($deg + deg); /* IE10 and Mozilla */ - -ms-transform: rotate($deg + deg); /* IE 9 */ - -webkit-transform: rotate($deg + deg); /* Safari and Chrome */ + transform: rotate($deg + deg); /* IE10 and Mozilla */ + -ms-transform: rotate($deg + deg); /* IE 9 */ + -webkit-transform: rotate($deg + deg); /* Safari and Chrome */ } /* transform-translate */ @@ -190,9 +191,9 @@ $browserPrefixes: webkit moz o ms; // @param // $deg - angle in degrees @mixin transform-translate($x, $y) { - transform: translate($x, $y); /* IE10 and Mozilla */ - -ms-transform: translate($x, $y); /* IE 9 */ - -webkit-transform: translate($x, $y); /* Safari and Chrome */ + transform: translate($x, $y); /* IE10 and Mozilla */ + -ms-transform: translate($x, $y); /* IE 9 */ + -webkit-transform: translate($x, $y); /* Safari and Chrome */ } /* transform-scale */ @@ -203,104 +204,102 @@ $browserPrefixes: webkit moz o ms; // @param // $height - height @mixin transform-scale($width, $height) { - transform: scale($width, $height); /* IE10 and Mozilla */ - -ms-transform: scale($width, $height); /* IE 9 */ - -webkit-transform: scale($width, $height); /* Safari and Chrome */ + transform: scale($width, $height); /* IE10 and Mozilla */ + -ms-transform: scale($width, $height); /* IE 9 */ + -webkit-transform: scale($width, $height); /* Safari and Chrome */ } @mixin scrollable() { - ::-webkit-scrollbar { - width: 8px; - } + ::-webkit-scrollbar { + width: 8px; + } } @mixin create-circle($size, $bgcolor) { - border-radius: 50%; - width: $size; - height: $size; - background: $bgcolor; - border: 3px solid $bgcolor; - display: flex; - align-items: center; - justify-content: center; + border-radius: 50%; + width: $size; + height: $size; + background: $bgcolor; + border: 3px solid $bgcolor; + display: flex; + align-items: center; + justify-content: center; } /**/ @mixin keyframe-animation($animationType, $properties, $fromValue, $toValue) { - - @keyframes #{$animationType} { - from { - $startIndex: 1; - @each $property in $properties { - #{$property}: nth($fromValue, $startIndex); - $startIndex: $startIndex + 1; - } - } - to { - $startIndex: 1; - @each $property in $properties { - #{$property}: nth($toValue, $startIndex); - $startIndex: $startIndex + 1; - } + @keyframes #{$animationType} { + from { + $startIndex: 1; + @each $property in $properties { + #{$property}: nth($fromValue, $startIndex); + $startIndex: $startIndex + 1; + } + } + to { + $startIndex: 1; + @each $property in $properties { + #{$property}: nth($toValue, $startIndex); + $startIndex: $startIndex + 1; + } + } } - } - @-moz-keyframes #{$animationType}{ - /* Firefox */ - from { - $startIndex: 1; - @each $property in $properties { - #{$property}: nth($fromValue, $startIndex); - $startIndex: $startIndex + 1; - } + @-moz-keyframes #{$animationType} { + /* Firefox */ + from { + $startIndex: 1; + @each $property in $properties { + #{$property}: nth($fromValue, $startIndex); + $startIndex: $startIndex + 1; + } + } + to { + $startIndex: 1; + @each $property in $properties { + #{$property}: nth($toValue, $startIndex); + $startIndex: $startIndex + 1; + } + } } - to { - $startIndex: 1; - @each $property in $properties { - #{$property}: nth($toValue, $startIndex); - $startIndex: $startIndex + 1; - } + @-webkit-keyframes #{$animationType} { + /* Safari and Chrome */ + from { + $startIndex: 1; + @each $property in $properties { + #{$property}: nth($fromValue, $startIndex); + $startIndex: $startIndex + 1; + } + } + to { + $startIndex: 1; + @each $property in $properties { + #{$property}: nth($toValue, $startIndex); + $startIndex: $startIndex + 1; + } + } } - } - @-webkit-keyframes #{$animationType} { - /* Safari and Chrome */ - from { - $startIndex: 1; - @each $property in $properties { - #{$property}: nth($fromValue, $startIndex); - $startIndex: $startIndex + 1; - } + @-o-keyframes #{$animationType} { + /* Opera */ + from { + $startIndex: 1; + @each $property in $properties { + #{$property}: nth($fromValue, $startIndex); + $startIndex: $startIndex + 1; + } + } + to { + $startIndex: 1; + @each $property in $properties { + #{$property}: nth($toValue, $startIndex); + $startIndex: $startIndex + 1; + } + } } - to { - $startIndex: 1; - @each $property in $properties { - #{$property}: nth($toValue, $startIndex); - $startIndex: $startIndex + 1; - } - } - } - @-o-keyframes #{$animationType} { - /* Opera */ - from { - $startIndex: 1; - @each $property in $properties { - #{$property}: nth($fromValue, $startIndex); - $startIndex: $startIndex + 1; - } - } - to { - $startIndex: 1; - @each $property in $properties { - #{$property}: nth($toValue, $startIndex); - $startIndex: $startIndex + 1; - } - } - } } - /**/ @mixin border-shadow($xShadow: 0.545px, $yShadow: 0.839px, $blur: 4px, $spread: 0, $color: $light-gray, $opacity: 0.2) { - @include box-shadow($xShadow $yShadow $blur $spread rgba($color, $opacity)); + @include box-shadow($xShadow $yShadow $blur $spread rgba($color, $opacity)); } /* percent-plus-value */ @@ -308,6 +307,6 @@ $browserPrefixes: webkit moz o ms; // Calculate length property (e.g. width, margin) by adding a value (e.g. in pixels) // to a percentage of container height/width @mixin percent-plus-value($property, $value, $percent: 100%) { - $string: 'calc(' + $percent + ' + ' + $value + ')'; - #{$property}: unquote($string); + $string: 'calc(' + $percent + ' + ' + $value + ')'; + #{$property}: unquote($string); } diff --git a/openecomp-ui/resources/scss/common/_variables.scss b/openecomp-ui/resources/scss/common/_variables.scss index 6ea204aa76..48d9f4b68e 100644 --- a/openecomp-ui/resources/scss/common/_variables.scss +++ b/openecomp-ui/resources/scss/common/_variables.scss @@ -1,4 +1,3 @@ - // primary colors $blue: #009fdb; $dark-blue: #0568ae; @@ -29,7 +28,7 @@ $tlv-gray: #f8f8f8; $tlv-light-gray: #eaeaea; $tlv-hover: #e6f6fb; $highlight-gray: #eceff3; -$transparent-black: rgba(0,0,0,.3); +$transparent-black: rgba(0, 0, 0, 0.3); $content-background-color: $white; @@ -44,8 +43,9 @@ $tablet-max-width: 1024px; $laptop-min-width: 1224px; $desktop-min-width: 1824px; +$loader-background: #e1e4e6; - - - - +$action-button-active-bg: #0091c7; +$action-button-active-border: #006186; +$action-button-hover-bg: #1ec2ff; +$action-button-hover-border: #0091c8; 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 + } +} diff --git a/openecomp-ui/resources/scss/modules/_entitlementPools.scss b/openecomp-ui/resources/scss/modules/_entitlementPools.scss index 06ef4d21fd..736927fb51 100644 --- a/openecomp-ui/resources/scss/modules/_entitlementPools.scss +++ b/openecomp-ui/resources/scss/modules/_entitlementPools.scss @@ -1,37 +1,37 @@ - -.entitlement-pools-list-editor { +.entitlement-pools-list-editor { .list-editor-item-view-field { - - .entitlement-pools-count { - @extend .heading-1; - color: $purple; + .entitlement-pools-count { + @extend .heading-1; + color: $purple; + } } - } } .entitlement-pools-modal { - .entitlement-pools-form { - .threshold-section, .date-section { - display: flex; - justify-content: space-between; - .validation-input-wrapper { - flex: 0 0 46%; - } - } - .uuid-row-wrapper { - display: flex; - .separator{ - margin-left: 30px; - margin-right: 30px; - height: 35px; - border: 1px solid $tlv-light-gray; - } - .uuid-container { - .uuid-value { - @extend .body-3; - user-select: text; + .entitlement-pools-form { + .threshold-section, + .date-section { + display: flex; + justify-content: space-between; + .validation-input-wrapper { + flex: 0 0 46%; + } + } + .uuid-row-wrapper { + display: flex; + margin-top: 20px; + .separator { + margin-left: 30px; + margin-right: 30px; + height: 35px; + border: 1px solid $tlv-light-gray; + } + .uuid-container { + .uuid-value { + @extend .body-3; + user-select: text; + } + } } - } } - } } diff --git a/openecomp-ui/resources/scss/modules/_featureGroup.scss b/openecomp-ui/resources/scss/modules/_featureGroup.scss index cf681b8758..375bb2c08e 100644 --- a/openecomp-ui/resources/scss/modules/_featureGroup.scss +++ b/openecomp-ui/resources/scss/modules/_featureGroup.scss @@ -1,41 +1,38 @@ .feature-groups-list-editor { - .list-editor-view{ - .list-editor-view-list { - .list-editor-item-view { - min-height: 110px; - height: 110px; - } - .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; + .list-editor-view { + .list-editor-view-list { + .list-editor-item-view { + min-height: 110px; + height: 110px; + } + .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; + } + } } - } - .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; - } } - } } - } } - - - diff --git a/openecomp-ui/resources/scss/modules/_licenseAgreement.scss b/openecomp-ui/resources/scss/modules/_licenseAgreement.scss index 579e9bab2b..acde2edcb8 100644 --- a/openecomp-ui/resources/scss/modules/_licenseAgreement.scss +++ b/openecomp-ui/resources/scss/modules/_licenseAgreement.scss @@ -1,26 +1,24 @@ - .license-agreement-list-editor { - - .list-editor-view-list { - .list-editor-item-view-field { - .list-editor-item-view-field-tight { - vertical-align: top; - display: inline-block; - &:first-child { - @include ellipsis; - margin-right: 95px; - width: 20%; - overflow-wrap: break-word; + .list-editor-view-list { + .list-editor-item-view-field { + .list-editor-item-view-field-tight { + vertical-align: top; + display: inline-block; + &:first-child { + @include ellipsis; + margin-right: 95px; + width: 20%; + overflow-wrap: break-word; + } + } + .feature-groups-count, + .type { + color: $light-green; + } + .feature-groups-count { + @extend .heading-1; + padding-top: 2px; + } } - } - .feature-groups-count, .type { - color: $light-green; - } - .feature-groups-count { - @extend .heading-1; - padding-top: 2px; - } - } - } } diff --git a/openecomp-ui/resources/scss/modules/_licenseKeyGroup.scss b/openecomp-ui/resources/scss/modules/_licenseKeyGroup.scss index b7681fef9d..d873c3998c 100644 --- a/openecomp-ui/resources/scss/modules/_licenseKeyGroup.scss +++ b/openecomp-ui/resources/scss/modules/_licenseKeyGroup.scss @@ -1,31 +1,32 @@ .license-key-groups-list-editor { - .list-editor-view-list { - .list-editor-item-view-field { - - .operational-scope, .type { - color: $orange; - } - .operational-scope { - @include ellipsis; - } + .list-editor-view-list { + .list-editor-item-view-field { + .operational-scope, + .type { + color: $orange; + } + .operational-scope { + @include ellipsis; + } + } } - } } .license-keygroup-editor { - .uuid-row-wrapper { - display: flex; - .separator{ - margin-left: 30px; - margin-right: 30px; - height: 35px; - border: 1px solid $tlv-light-gray; - } - .uuid-container { - .uuid-value { - @extend .body-3; - user-select: text; - } + .uuid-row-wrapper { + display: flex; + margin-top: 20px; + .separator { + margin-left: 30px; + margin-right: 30px; + height: 35px; + border: 1px solid $tlv-light-gray; + } + .uuid-container { + .uuid-value { + @extend .body-3; + user-select: text; + } + } } - } } diff --git a/openecomp-ui/resources/scss/modules/_licenseModel.scss b/openecomp-ui/resources/scss/modules/_licenseModel.scss index e93ea989fd..da43e3e3cf 100644 --- a/openecomp-ui/resources/scss/modules/_licenseModel.scss +++ b/openecomp-ui/resources/scss/modules/_licenseModel.scss @@ -1,55 +1,42 @@ .license-model-modal { - .modal-body { - padding: 0; - } - .modal-header { - border-bottom: none; - padding-bottom: 30px; - } - .sdc-tabs-list { - padding-left: 50px; - border-bottom: 1px solid $tlv-light-gray; - display: flex; - align-items: baseline; - } - .sdc-tab-content { - margin-top: 0; - } - .add-limit-button { - margin-left: auto; - margin-right: 50px; - padding-right: 0; - text-align: end; - } - .license-model-form { - .validation-form-content, .validation-buttons { - padding: 20px 50px; + .sdc-tabs { + margin-top: 20px; } - &.license-agreement-form, &.feature-group-form { - .validation-form-content { - padding: 0; - } - .sdc-tab-content { - padding: 20px 50px; - } - } - } - .license-model-modal-buttons { - padding: 21px 50px; - display: flex; - justify-content: flex-end; - background-color: $tlv-gray; - margin-top: 2px; - .sdc-button { - margin-left: 20px; + .sdc-tabs-list { + padding-left: 40px; + border-bottom: 1px solid $tlv-light-gray; + display: flex; + align-items: baseline; + } + .sdc-tab-content { + margin-top: 0; + } + .add-limit-button { + margin-left: auto; + margin-right: 50px; + padding-right: 0; + text-align: end; + } + .license-model-form { + &.license-agreement-form, + &.feature-group-form { + .validation-form-content { + padding: 0; + } + .sdc-tab-content { + padding: 20px 40px; + .dual-list-box { + margin: 0; + } + } + } } - } } .license-model-list-editor { - .list-editor-view-list { - .list-editor-item-view { - min-height: 110px; - height: 110px; - } - } + .list-editor-view-list { + .list-editor-item-view { + min-height: 110px; + height: 110px; + } + } } diff --git a/openecomp-ui/resources/scss/modules/_licenseModelLimits.scss b/openecomp-ui/resources/scss/modules/_licenseModelLimits.scss index 16b6af7cf9..794ed388e4 100644 --- a/openecomp-ui/resources/scss/modules/_licenseModelLimits.scss +++ b/openecomp-ui/resources/scss/modules/_licenseModelLimits.scss @@ -1,133 +1,132 @@ .license-model-limits-view { - max-height: 490px; - overflow: auto; - - .limit-editor-title { - padding: 10px 50px; - background-color: $blue; - color: $white; - - } - .list-editor-view-add-title { - margin-right: 20px; - } - - .no-limits-text { - padding-left: 50px; - } - - .list-editor-view { - .list-editor-view-header { - border-bottom: none; - padding-top: 30px; - padding-bottom: 0; - } - - .list-editor-view-list-scroller { - margin-top: 0; - margin-bottom: 30px; - } - .list-editor-view-list { - width: 100%; - .list-editor-item-view { - min-height: 50px; - height: 50px; - background-color: $tlv-light-gray; - border-color: transparent; - margin: 1px 0; - .list-editor-item-view-content { - padding-left: 0; - } - - .svg-icon { - margin-top: 10px; - margin-right: 50px; - fill: $gray; - &:hover { - fill: $dark-gray; - } - } - - &.selectable { - &:hover { - .list-editor-item-view-field { - .text.description, .text-name { - &:after { - background-color: darken($tlv-light-gray, 4%); - } - } - - } - background-color: darken($tlv-light-gray, 4%); - cursor: pointer; - } - - } - &:hover { - border-color: transparent; - cursor: default; - } - .list-editor-item-view-content { - .list-editor-item-view-field { - display: flex; - align-items: center; - white-space: nowrap; - - &.limit-name { - .text.name { - @extend .body-1-semibold; - color: $blue; - text-transform: uppercase; - margin-left : 45px; - } - - border-right: 1px solid $light-gray; - margin-right: 22px; - flex: 0.4; - display: flex; - justify-content: left; - } - - &.limit-description { - max-width: 300px; - margin-right: 22px; - } - - &.limit-metric-details { - max-width: 300px; - } - - - .text.description, .text.name { - overflow: hidden; - text-overflow: ellipsis; - white-space: nowrap; - &:after { - background: $tlv-light-gray; - } - - } - } - - } - } - } - } - .limit-editor{ - .limit-editor-form { - .limit-editor-form-grid-section { - padding-bottom: 0; - } - .validation-form-content { - padding: 21px 45px; - } - .limit-editor-buttons { - display: flex; - justify-content: flex-end; - .sdc-button { - margin-left: 20px; - } - } - } - } -}
\ No newline at end of file + max-height: 490px; + overflow: auto; + + .limit-editor-title { + padding: 10px 50px; + background-color: $blue; + color: $white; + } + .list-editor-view-add-title { + margin-right: 20px; + } + + .no-limits-text { + padding-left: 50px; + } + + .list-editor-view { + .list-editor-view-header { + border-bottom: none; + padding-top: 30px; + padding-bottom: 0; + } + + .list-editor-view-list-scroller { + margin-top: 0; + margin-bottom: 30px; + } + .list-editor-view-list { + width: 100%; + .list-editor-item-view { + min-height: 50px; + height: 50px; + background-color: $tlv-light-gray; + border-color: transparent; + margin: 1px 0; + .list-editor-item-view-content { + padding-left: 0; + } + + .svg-icon { + margin-top: 10px; + margin-right: 50px; + fill: $gray; + &:hover { + fill: $dark-gray; + } + } + + &.selectable { + &:hover { + .list-editor-item-view-field { + .text.description, + .text-name { + &:after { + background-color: darken( + $tlv-light-gray, + 4% + ); + } + } + } + background-color: darken($tlv-light-gray, 4%); + cursor: pointer; + } + } + &:hover { + border-color: transparent; + cursor: default; + } + .list-editor-item-view-content { + .list-editor-item-view-field { + display: flex; + align-items: center; + white-space: nowrap; + + &.limit-name { + .text.name { + @extend .body-1-semibold; + color: $blue; + text-transform: uppercase; + margin-left: 45px; + } + + border-right: 1px solid $light-gray; + margin-right: 22px; + flex: 0.4; + display: flex; + justify-content: left; + } + + &.limit-description { + max-width: 300px; + margin-right: 22px; + } + + &.limit-metric-details { + max-width: 300px; + } + + .text.description, + .text.name { + overflow: hidden; + text-overflow: ellipsis; + white-space: nowrap; + &:after { + background: $tlv-light-gray; + } + } + } + } + } + } + } + .limit-editor { + .limit-editor-form { + .limit-editor-form-grid-section { + padding-bottom: 0; + } + .validation-form-content { + padding: 21px 45px; + } + .limit-editor-buttons { + display: flex; + justify-content: flex-end; + .sdc-button { + margin-left: 20px; + } + } + } + } +} diff --git a/openecomp-ui/resources/scss/modules/_licenseModelOverview.scss b/openecomp-ui/resources/scss/modules/_licenseModelOverview.scss index 21c5bd8007..eca87b6962 100644 --- a/openecomp-ui/resources/scss/modules/_licenseModelOverview.scss +++ b/openecomp-ui/resources/scss/modules/_licenseModelOverview.scss @@ -4,236 +4,233 @@ $icon-margin: 30px; $arrow-element-width: 30px; $list-item-padding: 15px; - - $la-color: $dark-blue; $fg-color: $blue; $lkg-ep-color: $light-blue; @mixin overview-tile-shadow() { - @include box-shadow(0.5px 0.8px 4px 0 rgba(24, 24, 25, 0.05)); + @include box-shadow(0.5px 0.8px 4px 0 rgba(24, 24, 25, 0.05)); } .license-model-overview { - .overview-top-section { - .overview-title{ - @extend .heading-1; - @extend .text-uppercase !optional; - margin-bottom: 20px; - color: $blue; - } - .license-model-overview-top { - display: flex; - justify-content: flex-start; - flex-direction: row; - padding-bottom: 10px; - min-height: 155px; - .separator { - width: 1px; - border-right: 1px solid $tlv-light-gray; - margin-left: 20px; - } - .vendor-data-view { - @extend .flex-column; - background-color: $tlv-gray; - padding: 13px 30px; - border: 1px solid $tlv-light-gray; - @include overview-tile-shadow(); - .vendor-title { - margin-top:5px; + .overview-top-section { + .overview-title { + @extend .heading-1; + @extend .text-uppercase !optional; + margin-bottom: 20px; + color: $blue; } - .vendor-name { - @extend .heading-4-semibold; - text-transform: none; - padding-bottom: 10px; - border-bottom: 1px solid $tlv-light-gray; - } - .vendor-description, .vendor-description-readonly { - @extend .flex; - @extend .body-1; - justify-content: space-between; - overflow: hidden; - position: relative; - flex: initial; - } - - &: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; - border: 1px solid $light-gray; - cursor: pointer; - - background-color: $white; - .svg-icon-wrapper { - opacity: 1; - z-index: 10; - } - .description-data:after { - background: white; - } - .description-data { - width: 100%; + .license-model-overview-top { + display: flex; + justify-content: flex-start; + flex-direction: row; + padding-bottom: 10px; + min-height: 155px; + .separator { + width: 1px; + border-right: 1px solid $tlv-light-gray; + margin-left: 20px; } - } - } + .vendor-data-view { + @extend .flex-column; + background-color: $tlv-gray; + padding: 13px 30px; + border: 1px solid $tlv-light-gray; + @include overview-tile-shadow(); + .vendor-title { + margin-top: 5px; + } + .vendor-name { + @extend .heading-4-semibold; + text-transform: none; + padding-bottom: 10px; + border-bottom: 1px solid $tlv-light-gray; + } + .vendor-description, + .vendor-description-readonly { + @extend .flex; + @extend .body-1; + justify-content: space-between; + overflow: hidden; + position: relative; + flex: initial; + } - .vendor-description-readonly { - margin-top: 16px; - } + &: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; + border: 1px solid $light-gray; + cursor: pointer; - .description-data { - @include multiline-ellipsis($lineCount: 3, $bgColor: $tlv-gray); - flex: initial; - } + background-color: $white; + .svg-icon-wrapper { + opacity: 1; + z-index: 10; + } + .description-data:after { + background: white; + } + .description-data { + width: 100%; + } + } + } - .vendor-description-edit { - @extend .flex; - flex-direction: column; - border: none; - margin-top: 10px; - position: relative; - left: -6px; - width: 101%; - textarea { - padding-left: 6px; - resize: vertical; - } - .buttons-row { - @extend .flex; - justify-content: flex-end; - flex-direction: row; - margin-top: -25px; - .buttons-wrapper { - @extend .flex; - @extend .body-3; - border: 1px solid $light-gray; - width: 95px; - height: 19px; - background-color: $tlv-light-gray; - border-radius: 2px; - position: relative; - flex: 0 1 auto; - text-align: center; - .description-button { - cursor: pointer; - flex: 1; - &:hover { - background-color: $white; + .vendor-description-readonly { + margin-top: 16px; } - } - .description-save { - cursor: pointer; - flex: 1; - color:$blue; - &:hover { - background-color: $white; + + .description-data { + @include multiline-ellipsis($lineCount: 3, $bgColor: $tlv-gray); + flex: initial; } - } - } - } - .description-edit-textarea { - height:67px; - border: 1px solid $tlv-light-gray; - resize: none; - position: relative; - left: -12px; - } - .validation-error-message.tooltip { - z-index: 1000; - .tooltip-inner { - background-color: $red; - } - } - } - } - .summary-count-list { - @extend .flex-column; - flex: 0.6; - margin-left: 20px; - justify-content: space-between; - border: 1px solid $tlv-light-gray; - @include overview-tile-shadow(); - background-color: $tlv-gray; - .summary-count-item { - @extend .flex; - @extend .heading-5-semibold; - align-items: center; - padding-left: 45px; - padding-right: 45px; - border-bottom: 1px solid $tlv-light-gray; - &:last-child { border-bottom: none; } - .item-count { - flex-grow: 2; - margin-left: 5px; - } - .summary-name-and-count { - width: 100%; - } - .svg-icon-wrapper { - .svg-icon { - &.__plusCircle { - margin-top: 3px; - margin-left: auto; - fill: $dark-gray; - &:hover { - fill: $blue; + + .vendor-description-edit { + @extend .flex; + flex-direction: column; + border: none; + margin-top: 10px; + position: relative; + left: -6px; + width: 101%; + textarea { + padding-left: 6px; + resize: vertical; + } + .buttons-row { + @extend .flex; + justify-content: flex-end; + flex-direction: row; + margin-top: -25px; + .buttons-wrapper { + @extend .flex; + @extend .body-3; + border: 1px solid $light-gray; + width: 95px; + height: 19px; + background-color: $tlv-light-gray; + border-radius: 2px; + position: relative; + flex: 0 1 auto; + text-align: center; + .description-button { + cursor: pointer; + flex: 1; + &:hover { + background-color: $white; + } + } + .description-save { + cursor: pointer; + flex: 1; + color: $blue; + &:hover { + background-color: $white; + } + } + } + } + .description-edit-textarea { + height: 67px; + border: 1px solid $tlv-light-gray; + resize: none; + position: relative; + left: -12px; + } + .validation-error-message.tooltip { + z-index: 1000; + .tooltip-inner { + background-color: $red; + } + } } - } } + .summary-count-list { + @extend .flex-column; + flex: 0.6; + margin-left: 20px; + justify-content: space-between; + border: 1px solid $tlv-light-gray; + @include overview-tile-shadow(); + background-color: $tlv-gray; + .summary-count-item { + @extend .flex; + @extend .heading-5-semibold; + align-items: center; + padding-left: 45px; + padding-right: 45px; + border-bottom: 1px solid $tlv-light-gray; + &:last-child { + border-bottom: none; + } + .item-count { + flex-grow: 2; + margin-left: 5px; + } + .summary-name-and-count { + width: 100%; + } + .svg-icon-wrapper { + .svg-icon { + &.__plusCircle { + margin-top: 3px; + margin-left: auto; + fill: $dark-gray; + &:hover { + fill: $blue; + } + } + } + } - } - - .summary-name-and-count { - &:hover { - cursor: pointer; - color: $blue; + .summary-name-and-count { + &:hover { + cursor: pointer; + color: $blue; + } + } + } + } + .plus-icon { + font-size: $icon-font-size; + border-radius: 50%; + border: 1px solid $black; + color: $black; + height: 16px; + width: 16px; + padding: 2px 2px 2px 3px; } - } - - } - } - .plus-icon { - font-size: $icon-font-size; - border-radius: 50%; - border: 1px solid $black; - color: $black; - height: 16px; - width: 16px; - padding: 2px 2px 2px 3px; - } - } - } - .vlm-list-tab-panel { - - @extend .flex; - margin-bottom: 7px; - .section-title { - flex: 1; } - .overview-buttons-section { - margin-top: 20px; - display: flex; - justify-content: flex-start; - .button-vlm-list-view { - height: 32px; - width: 34px; - margin-left:10px; - cursor: pointer; - } - /** + .vlm-list-tab-panel { + @extend .flex; + margin-bottom: 7px; + .section-title { + flex: 1; + } + .overview-buttons-section { + margin-top: 20px; + display: flex; + justify-content: flex-start; + .button-vlm-list-view { + height: 32px; + width: 34px; + margin-left: 10px; + cursor: pointer; + } + /** .vlm-list-icon { background-size: 32px; background-repeat: no-repeat; @@ -251,262 +248,253 @@ $lkg-ep-color: $light-blue; } } **/ - } - } - - .overview-list-section { - @extend .flex-column; - margin-top: 35px; - .section-title { - @extend .heading-2; - padding-top: 20px; - margin-bottom: 15px; - padding-bottom: 0px; - } - &.overview-list-orphans { - .chevron::before - { - display: none; - } - .vlm-list-view { - .vlm-list { - .vlm-list-item.orphan-list-item { - @include overview-tile-shadow(); - margin-left: 0; - - .vlm-list-item-title { - - .item-name { - color: $dark-gray; - } - } - .list-item-icon-col { - .overview-list-icon { - background-color: $gray; - border-color: $gray; - } - } - .list-item-section { - &:first-child { - display: flex; - color: $white; - min-width: $arrow-element-width; - } - &.list-item-icon-col { - margin-left: 65px; - margin-right: 65px - $list-item-padding; - } - } - } } - } } - .vlm-list-view { - flex: 1; - .vlm-list { - @extend .flex; - flex-direction: column; - .vlm-list-item { - @include border-shadow(); - min-height: 90px; - height: 90px; - background-color: $tlv-gray; - @extend .flex; - border: 1px solid $tlv-light-gray; - margin-bottom: 0px; - .clickable { - cursor: pointer; - } - .list-item-section { - .count-value { - @extend .body-3; - } - &.list-item-icon-col { - display: flex; - flex-direction: column; - justify-content: center; - align-items: center; - padding: 0; - margin-right: 40px - $list-item-padding; - margin-left: $icon-margin; - .overview-list-icon { - @extend .body-2; - } - } - padding: 15px; - &.list-item-arrow-col { - padding: 0; - } - .children-count { - @extend .body-1; - color: $gray; - padding-left: 5px; - .count-value { - padding: 0 5px; - } - } - .additional-data { - padding-left: 60px; - display: flex; - flex-direction: column; - justify-content: space-between; - *:last-child { - margin-top: 20px; - } - *:only-child { - margin-top: 0; - } - .additional-data-name { - @extend .body-2-semibold; - } - } - .additional-data-col-border { - border-left: 1px solid $tlv-light-gray; - min-height: 100%; - height: 100%; - } - } - .list-item-additional-data-col { - @extend .body-2; - @extend .flex; - align-items: stretch; - flex: 0.8; - margin-left: 30px; - padding-top: 17px; - padding-bottom: 11px; - } - .arrow-icon { - align-self: center; - - } - .vlm-item-info { - flex: 1; - } - .vlm-list-item-title { - @extend .flex; - align-items: baseline; - .item-name { - @extend .heading-5-semibold; - flex: 0 1 auto; - margin-bottom: 4px; - text-transform: uppercase; - } - } - .vlm-list-item-description { - @extend .body-1; - @include multiline-ellipsis($lineCount: 3, $bgColor: $tlv-gray); - max-height: 38px; - } - &.vlm-list-item-la { - margin-top: 10px; - .la-icon { - @include create-circle($circle-icon-size, $la-color); - color: $white; - } - .vlm-list-item-title { - .item-name { - color: $la-color; - } - } - .list-item-section { - - &:first-child { - display: flex; - color: $la-color; - min-width: $arrow-element-width; - } - } - .list-item-arrow-col { - flex: 0.01; - margin-left: $arrow-margin; - justify-content: center; + .overview-list-section { + @extend .flex-column; + margin-top: 35px; + .section-title { + @extend .heading-2; + padding-top: 20px; + margin-bottom: 15px; + padding-bottom: 0px; + } + &.overview-list-orphans { + .chevron::before { + display: none; } - } - &.vlm-list-item-fg { - margin-left: $list-indentation; - margin-top: 10px; - .fg-pipeline-separator { - color: $dark-gray; - padding: 0 5px; - } - .list-item-icon-col { - margin-left: 29px; - } - .fg-icon { - @include create-circle($circle-icon-size, $fg-color); - color: $white; - } - - .vlm-list-item-title { - .item-name { - color: $fg-color; - } - } - .list-item-section { - &:first-child { - display: flex; - color: $fg-color; - min-width: $arrow-element-width; + .vlm-list-view { + .vlm-list { + .vlm-list-item.orphan-list-item { + @include overview-tile-shadow(); + margin-left: 0; - } - } - .list-item-arrow-col { - flex: 0.01; - margin-left: $arrow-margin - $list-indentation; - padding-left: $list-indentation; - } - } - &.vlm-list-item-ep { - margin-left: $list-indentation * 2; - margin-top: 10px; - cursor: default; - .ep-icon { - @include create-circle($circle-icon-size, $lkg-ep-color); - color: $white; - } - .vlm-list-item-title { - .item-name { - color: $lkg-ep-color; - } - } - .list-item-section { - &:first-child { - display: none; - } - &.list-item-icon-col { - margin-left: 52px; - } + .vlm-list-item-title { + .item-name { + color: $dark-gray; + } + } + .list-item-icon-col { + .overview-list-icon { + background-color: $gray; + border-color: $gray; + } + } + .list-item-section { + &:first-child { + display: flex; + color: $white; + min-width: $arrow-element-width; + } + &.list-item-icon-col { + margin-left: 65px; + margin-right: 65px - $list-item-padding; + } + } + } + } } + } + .vlm-list-view { + flex: 1; + .vlm-list { + @extend .flex; + flex-direction: column; + .vlm-list-item { + @include border-shadow(); + min-height: 90px; + height: 90px; + background-color: $tlv-gray; + @extend .flex; + border: 1px solid $tlv-light-gray; + margin-bottom: 0px; + .clickable { + cursor: pointer; + } - } - &.vlm-list-item-lkg { - margin-top: 10px; - margin-left: $list-indentation * 2; - cursor: default; - .lkg-icon { - @include create-circle($circle-icon-size, $lkg-ep-color); - color: $white; - } - .vlm-list-item-title { - .item-name { - color: $lkg-ep-color; - } - } - .list-item-section { - &:first-child { - display: none; - } - &.list-item-icon-col { - margin-left: 52px; - } + .list-item-section { + .count-value { + @extend .body-3; + } + &.list-item-icon-col { + display: flex; + flex-direction: column; + justify-content: center; + align-items: center; + padding: 0; + margin-right: 40px - $list-item-padding; + margin-left: $icon-margin; + .overview-list-icon { + @extend .body-2; + } + } + padding: 15px; + &.list-item-arrow-col { + padding: 0; + } + .children-count { + @extend .body-1; + color: $gray; + padding-left: 5px; + .count-value { + padding: 0 5px; + } + } + .additional-data { + padding-left: 60px; + display: flex; + flex-direction: column; + justify-content: space-between; + *:last-child { + margin-top: 20px; + } + *:only-child { + margin-top: 0; + } + .additional-data-name { + @extend .body-2-semibold; + } + } + .additional-data-col-border { + border-left: 1px solid $tlv-light-gray; + min-height: 100%; + height: 100%; + } + } + .list-item-additional-data-col { + @extend .body-2; + @extend .flex; + align-items: stretch; + flex: 0.8; + margin-left: 30px; + padding-top: 17px; + padding-bottom: 11px; + } + .arrow-icon { + align-self: center; + } + .vlm-item-info { + flex: 1; + } + .vlm-list-item-title { + @extend .flex; + align-items: baseline; + .item-name { + @extend .heading-5-semibold; + flex: 0 1 auto; + margin-bottom: 4px; + text-transform: uppercase; + } + } + .vlm-list-item-description { + @extend .body-1; + @include multiline-ellipsis($lineCount: 3, $bgColor: $tlv-gray); + max-height: 38px; + } + &.vlm-list-item-la { + margin-top: 10px; + .la-icon { + @include create-circle($circle-icon-size, $la-color); + color: $white; + } + .vlm-list-item-title { + .item-name { + color: $la-color; + } + } + .list-item-section { + &:first-child { + display: flex; + color: $la-color; + min-width: $arrow-element-width; + } + } + .list-item-arrow-col { + flex: 0.01; + margin-left: $arrow-margin; + justify-content: center; + } + } + &.vlm-list-item-fg { + margin-left: $list-indentation; + margin-top: 10px; + .fg-pipeline-separator { + color: $dark-gray; + padding: 0 5px; + } + .list-item-icon-col { + margin-left: 29px; + } + .fg-icon { + @include create-circle($circle-icon-size, $fg-color); + color: $white; + } + .vlm-list-item-title { + .item-name { + color: $fg-color; + } + } + .list-item-section { + &:first-child { + display: flex; + color: $fg-color; + min-width: $arrow-element-width; + } + } + .list-item-arrow-col { + flex: 0.01; + margin-left: $arrow-margin - $list-indentation; + padding-left: $list-indentation; + } + } + &.vlm-list-item-ep { + margin-left: $list-indentation * 2; + margin-top: 10px; + cursor: default; + .ep-icon { + @include create-circle($circle-icon-size, $lkg-ep-color); + color: $white; + } + .vlm-list-item-title { + .item-name { + color: $lkg-ep-color; + } + } + .list-item-section { + &:first-child { + display: none; + } + &.list-item-icon-col { + margin-left: 52px; + } + } + } + &.vlm-list-item-lkg { + margin-top: 10px; + margin-left: $list-indentation * 2; + cursor: default; + .lkg-icon { + @include create-circle($circle-icon-size, $lkg-ep-color); + color: $white; + } + .vlm-list-item-title { + .item-name { + color: $lkg-ep-color; + } + } + .list-item-section { + &:first-child { + display: none; + } + &.list-item-icon-col { + margin-left: 52px; + } + } + } + } } - } } - - } } - } - } diff --git a/openecomp-ui/resources/scss/modules/_mergeEditor.scss b/openecomp-ui/resources/scss/modules/_mergeEditor.scss index 96648dd20f..000e42d5b4 100644 --- a/openecomp-ui/resources/scss/modules/_mergeEditor.scss +++ b/openecomp-ui/resources/scss/modules/_mergeEditor.scss @@ -5,203 +5,201 @@ $selected-width: 1px; $selected-color: $blue; @mixin levels { - @for $i from 1 to 6 { - .level-#{$i} { - padding-left: 18px + 10 * $i; - } - } + @for $i from 1 to 6 { + .level-#{$i} { + padding-left: 18px + 10 * $i; + } + } } .merge-editor-modal { - .modal-lg { - width: 1300px; - } + .modal-lg { + width: 1300px; + } } .merge-editor { - margin: 30px 40px; - max-height: 600px; - border: 1px solid $light-gray; - .grid-section { - &.conflict-titles-section { - @extend .body-1; - background-color: $blue; - height: 33px; - padding-top: 6px; - padding-bottom: 3px; - color: $white; - position: sticky; - top: 0; - z-index: 2; - border-bottom: 1px solid $tlv-light-gray; - .grid-item { - padding-left: 10px; - } - .form-group { - margin-bottom: 0; - .checkbox { - label { - margin-right: 0; - } - - text-align: right; - - input[type="checkbox"] { - cursor: pointer; - margin-top: 1px; - } - } - } - } - } - .merge-editor-body { - max-height: 500px; - overflow-y: scroll; - padding: 10px; - .conflict-section { - margin-bottom: 0; - border-left: 0; - border-right: 0; - padding: 5px 0; - - .conflict-resolve-btn { - align-self: flex-end; - } - - .grid-items { - align-items: center; - - input[type="radio"]:not(:checked) { - cursor: pointer; - } - } - } - - .collapsible-section { - display: flex; - cursor: pointer; - - .conflict-title { - @extend .heading-5-semibold; - text-transform: uppercase; - } - } - - .merge-chevron { - margin-right: 7px; - &.right { - transform: rotate(90deg); - } - } - - .grid-section .grid-items .field-col:not(.grid-col-title) { - &.grid-col-yours { - border-top: $selected-width solid $yours-bg-color; - border-bottom: $selected-width solid $yours-bg-color; - } - - &.theirs-color { - border-top: $selected-width solid $theirs-bg-color; - border-bottom: $selected-width solid $theirs-bg-color; - } - } - - .merge-editor-text-field { - display: flex; - justify-content: space-between; - // margin: 0 0 10px 0; - margin: 0; - - .field { - color: $text-black; - - &.field-name:not(.field-object-name) { - color: $gray; - } - } - - &.diff { - .field { - color: $red; - } - } - - &.grid-section { - padding-bottom: 0; - - .grid-items { - flex: 1; - - - .field-col { - padding: 7px 0; - height: 100%; - - &:not(:first-child) { - padding-left: 8px; - } - - &.grid-col-yours { - background-color: $yours-bg-color; - } - - &.grid-col-theirs { - background-color: $theirs-bg-color; - } - - @include levels; - - - .field { - @extend .body-1; - flex: 2; - min-width: 0; - - &.field-name { - @include multiline-ellipsis($bgColor: white); - &.diff { - color: $red; - } - text-transform: uppercase; - &.field-object-name { - @extend .body-1-semibold; - margin-bottom: 5px; - margin-top: 10px; - - } - } - - &.field-yours { - @include multiline-ellipsis($bgColor: $yours-bg-color); - } - - &.field-theirs { - @include multiline-ellipsis($bgColor: $theirs-bg-color); - } - &.field-name, &.field.field-yours, &.field.field-theirs { - word-break: break-word; - text-align: initial; - } - &.empty-field { - padding-top: 2px; - } - } - - *::after { - bottom: 0; - } - } - } - } - - &.field-error { - @extend .body-1; - color: $error-text-color; - min-width: 0; - white-space: nowrap; - overflow: hidden; - text-overflow: ellipsis; - } - } - } + margin: 30px 40px; + max-height: 600px; + border: 1px solid $light-gray; + .grid-section { + &.conflict-titles-section { + @extend .body-1; + background-color: $blue; + height: 33px; + padding-top: 6px; + padding-bottom: 3px; + color: $white; + position: sticky; + top: 0; + z-index: 2; + border-bottom: 1px solid $tlv-light-gray; + .grid-item { + padding-left: 10px; + } + .form-group { + margin-bottom: 0; + .checkbox { + label { + margin-right: 0; + } + + text-align: right; + + input[type='checkbox'] { + cursor: pointer; + margin-top: 1px; + } + } + } + } + } + .merge-editor-body { + max-height: 500px; + overflow-y: scroll; + padding: 10px; + .conflict-section { + margin-bottom: 0; + border-left: 0; + border-right: 0; + padding: 5px 0; + + .conflict-resolve-btn { + align-self: flex-end; + } + + .grid-items { + align-items: center; + + input[type='radio']:not(:checked) { + cursor: pointer; + } + } + } + + .collapsible-section { + display: flex; + cursor: pointer; + + .conflict-title { + @extend .heading-5-semibold; + text-transform: uppercase; + } + } + + .merge-chevron { + margin-right: 7px; + &.right { + transform: rotate(90deg); + } + } + + .grid-section .grid-items .field-col:not(.grid-col-title) { + &.grid-col-yours { + border-top: $selected-width solid $yours-bg-color; + border-bottom: $selected-width solid $yours-bg-color; + } + + &.theirs-color { + border-top: $selected-width solid $theirs-bg-color; + border-bottom: $selected-width solid $theirs-bg-color; + } + } + + .merge-editor-text-field { + display: flex; + justify-content: space-between; + margin: 0; + + .field { + color: $text-black; + + &.field-name:not(.field-object-name) { + color: $gray; + } + } + + &.diff { + .field { + color: $red; + } + } + + &.grid-section { + padding-bottom: 0; + + .grid-items { + flex: 1; + + .field-col { + padding: 7px 0; + height: 100%; + + &:not(:first-child) { + padding-left: 8px; + } + + &.grid-col-yours { + background-color: $yours-bg-color; + } + + &.grid-col-theirs { + background-color: $theirs-bg-color; + } + + @include levels; + + .field { + @extend .body-1; + flex: 2; + min-width: 0; + + &.field-name { + @include multiline-ellipsis($bgColor: white); + &.diff { + color: $red; + } + text-transform: uppercase; + &.field-object-name { + @extend .body-1-semibold; + margin-bottom: 5px; + margin-top: 10px; + } + } + + &.field-yours { + @include multiline-ellipsis($bgColor: $yours-bg-color); + } + + &.field-theirs { + @include multiline-ellipsis($bgColor: $theirs-bg-color); + } + &.field-name, + &.field.field-yours, + &.field.field-theirs { + word-break: break-word; + text-align: initial; + } + &.empty-field { + padding-top: 2px; + } + } + + *::after { + bottom: 0; + } + } + } + } + + &.field-error { + @extend .body-1; + color: $error-text-color; + min-width: 0; + white-space: nowrap; + overflow: hidden; + text-overflow: ellipsis; + } + } + } } diff --git a/openecomp-ui/resources/scss/modules/_onboardingCatalog.scss b/openecomp-ui/resources/scss/modules/_onboardingCatalog.scss index 39f7636e79..bf0c14649e 100644 --- a/openecomp-ui/resources/scss/modules/_onboardingCatalog.scss +++ b/openecomp-ui/resources/scss/modules/_onboardingCatalog.scss @@ -1,63 +1,63 @@ $transitionLength: 0.6s; .catalog-view { - background-color: $background-gray; - overflow: hidden; - height: 100%; - display: flex; - @import "onboardingCatalog/catalogFilter.scss"; - .catalog-parts { - width: 100%; - @import "onboardingCatalog/onboardHeader"; - @import "onboardingCatalog/catalogHeader"; - } - @import "onboardingCatalog/vendorPageHeader"; - @import "onboardingCatalog/catalogList"; - @import "onboardingCatalog/vspOverlay"; - .catalog-wrapper { - height: 100%; - overflow: auto; - .tab-separator { - content: ''; - height: 25px; - border-right: 1px solid $dark-gray; - } - .catalog-list { - overflow: hidden; - height: auto; - .sdc-tile { - margin: 9px; - .sdc-tile-header { - position: initial; - display: block; - flex-shrink: initial; - align-items: initial; - flex-direction: initial; - } - .sdc-tile-content { - position: initial; - flex: initial; - display: flex; - align-items: initial; - flex-direction: column; - justify-content: space-between; - overflow: initial; - .sdc-tile-info-line { - .with-overlay { - line-height: 1.2em; - @include ellipsis($width: initial, $max-width: 100%); - } - } - } - .sdc-tile-footer { - position: initial; - flex-shrink: initial; - display: flex; - align-items: center; - flex-direction: row; - text-transform: none; - } - } - } - } + background-color: $background-gray; + overflow: hidden; + height: 100%; + display: flex; + @import 'onboardingCatalog/catalogFilter.scss'; + .catalog-parts { + width: 100%; + @import 'onboardingCatalog/onboardHeader'; + @import 'onboardingCatalog/catalogHeader'; + } + @import 'onboardingCatalog/vendorPageHeader'; + @import 'onboardingCatalog/catalogList'; + @import 'onboardingCatalog/vspOverlay'; + .catalog-wrapper { + height: 100%; + overflow: auto; + .tab-separator { + content: ''; + height: 25px; + border-right: 1px solid $dark-gray; + } + .catalog-list { + overflow: hidden; + height: auto; + .sdc-tile { + margin: 9px; + .sdc-tile-header { + position: initial; + display: block; + flex-shrink: initial; + align-items: initial; + flex-direction: initial; + } + .sdc-tile-content { + position: initial; + flex: initial; + display: flex; + align-items: initial; + flex-direction: column; + justify-content: space-between; + overflow: initial; + .sdc-tile-info-line { + .with-overlay { + line-height: 1.2em; + @include ellipsis($width: initial, $max-width: 100%); + } + } + } + .sdc-tile-footer { + position: initial; + flex-shrink: initial; + display: flex; + align-items: center; + flex-direction: row; + text-transform: none; + } + } + } + } } diff --git a/openecomp-ui/resources/scss/modules/_permissions.scss b/openecomp-ui/resources/scss/modules/_permissions.scss index e652d9d82f..5f83dc2fe9 100644 --- a/openecomp-ui/resources/scss/modules/_permissions.scss +++ b/openecomp-ui/resources/scss/modules/_permissions.scss @@ -1,55 +1,50 @@ -.modal-content { - .modal-body { - .manage-permissions-page { - .validation-form-content { - overflow-y: visible; - } +.manage-permissions-page { + .validation-form-content { + overflow-y: visible; + } - .manage-permissions-title { - @extend .body-1-semibold; - margin-bottom: 10px; - } - .owner-details { - @extend .body-2; - display: flex; - margin-bottom: 30px; - .change-owner { - margin-left: auto; - color: $blue; - cursor: pointer; - &:hover { - color: $dark-blue; - } - } - } - .change-owner-wrapper { - .form-group { - margin-bottom: 30px; - } - - } - .change-owner-title { - display: flex; - align-items: center; - margin-bottom: 10px; - .manage-permissions-title { - margin-bottom: 0; - } - .svg-icon-wrapper { - margin-left: 5px; - .svg-icon { - width: 13px; - height: 13px; - fill: $dark-gray; - } - } - } - .contributors-select { - .Select-menu { - max-height: 150px; - overflow-y: auto - } - } - } - } + .manage-permissions-title { + @extend .body-1-semibold; + margin-bottom: 10px; + } + .owner-details { + @extend .body-2; + display: flex; + margin-bottom: 30px; + .change-owner { + margin-left: auto; + color: $blue; + cursor: pointer; + &:hover { + color: $dark-blue; + } + } + } + .change-owner-wrapper { + .form-group { + margin-bottom: 30px; + } + } + .change-owner-title { + display: flex; + align-items: center; + margin-bottom: 10px; + .manage-permissions-title { + margin-bottom: 0; + } + .svg-icon-wrapper { + margin-left: 5px; + .svg-icon { + width: 13px; + height: 13px; + fill: $dark-gray; + } + } + } + .contributors-select { + .Select-menu { + max-height: 150px; + overflow-y: auto; + } + } } diff --git a/openecomp-ui/resources/scss/modules/_revisions.scss b/openecomp-ui/resources/scss/modules/_revisions.scss index 2b196c132c..619fe7e53e 100644 --- a/openecomp-ui/resources/scss/modules/_revisions.scss +++ b/openecomp-ui/resources/scss/modules/_revisions.scss @@ -1,86 +1,68 @@ .manage-revisions-modal { - .modal-dialog { - width: 700px; - } - .modal-content { - .modal-body { - .validation-form-content { - padding-top: 30px; - } - //.selected { - // .selectable { - // border-color: $light-blue; - // } - // .selectable:hover{ - // border-color: hotpink; - // } - //} - - .revision-list-item { + .revision-list-item { &.selected { - .selectable, .selectable:hover { - border-width: 2px; - border-color: $light-blue; - } + .selectable, + .selectable:hover { + border-width: 2px; + border-color: $light-blue; + } } - .selectable:hover{ - border-color: $gray; + .selectable:hover { + border-color: $gray; } .selectable:active { - border-color: $light-blue; + border-color: $light-blue; } - } + } - .list-editor-view-list-scroller { - margin-top : 0px; - } + .list-editor-view-list-scroller { + margin-top: 0px; + } - .list-editor-view-header { + .list-editor-view-header { border-bottom: none; .list-editor-view-title { - @extend .heading-5; - text-transform: none; - color: $blue; + @extend .heading-5; + text-transform: none; + color: $blue; } - } + } - .list-editor-item-view-content { + .list-editor-item-view-content { background-color: $background-gray; - } - .revision-list-item-fields { + } + .revision-list-item-fields { width: 100%; display: flex; flex-wrap: wrap; .revision-user { - flex-basis: 50%; - fill: transparent; - stroke: $blue; - .svg-icon-label { - margin-left: 13px; - } + flex-basis: 50%; + fill: transparent; + stroke: $blue; + .svg-icon-label { + margin-left: 13px; + } } .revision-date { - flex-basis: 50%; - text-align: right; - @extend .body-3; - color: $gray; - .revision-time { - margin-left: 5px; - } + flex-basis: 50%; + text-align: right; + @extend .body-3; + color: $gray; + .revision-time { + margin-left: 5px; + } } .revision-message { - flex-basis: 100%; - margin-top: 5px; - @extend .body-2; - .more-less { - @extend .body-3; - color: $blue; - margin-left: 5px; - } + flex-basis: 100%; + margin-top: 5px; + @extend .body-2; + .more-less { + @extend .body-3; + color: $blue; + margin-left: 5px; + } } - } } - } } diff --git a/openecomp-ui/resources/scss/modules/_softwareProductAttachmentPage.scss b/openecomp-ui/resources/scss/modules/_softwareProductAttachmentPage.scss index 81a109c97f..f24198cf59 100644 --- a/openecomp-ui/resources/scss/modules/_softwareProductAttachmentPage.scss +++ b/openecomp-ui/resources/scss/modules/_softwareProductAttachmentPage.scss @@ -1,267 +1,262 @@ - .vsp-attachments-view { - position: relative; - .attachments-tabs { - .sdc-tabs-list { - padding-left: 28px; - background-color: $tlv-gray; - box-shadow: none; - border-bottom: 1px solid $light-gray; - .sdc-tab { - @extend .heading-2; - padding-top: 10px; - margin-top: 0; - &.sdc-tab-active { - color: $blue; - font-weight: bold; + position: relative; + .attachments-tabs { + .sdc-tabs-list { + padding-left: 28px; + background-color: $tlv-gray; + box-shadow: none; + border-bottom: 1px solid $light-gray; + .sdc-tab { + @extend .heading-2; + padding-top: 10px; + margin-top: 0; + &.sdc-tab-active { + color: $blue; + font-weight: bold; + } + } + } + .sdc-tab-content { + margin-top: 0; } - } - } - .sdc-tab-content { - margin-top: 0; } - } - .attachments-view-controllers { - position: absolute; - right: 40px; - top: 10px; - display: flex; + .attachments-view-controllers { + position: absolute; + right: 40px; + top: 10px; + display: flex; - - .icon-component { - margin-right: 30px; - } + .icon-component { + margin-right: 30px; + } - input[type="file"] { - visibility: hidden; - width: 1px; - padding: 0; - margin-left: -1px; - } + input[type='file'] { + visibility: hidden; + width: 1px; + padding: 0; + margin-left: -1px; + } - .proceed-to-validation-btn { - margin-right: 30px; - } - .go-to-overview-btn { - width: 191px; - margin-right: 36px; - height: 36px; - } - .separator { - height: 27px; - border: 1px solid $light-gray; - margin-right: 31px; - margin-left: 0px; - margin-top: 3px; + .proceed-to-validation-btn { + margin-right: 30px; + } + .go-to-overview-btn { + width: 191px; + margin-right: 36px; + height: 36px; + } + .separator { + height: 27px; + border: 1px solid $light-gray; + margin-right: 31px; + margin-left: 0px; + margin-top: 3px; + } + .abort-btn { + fill: $blue; + color: $blue; + &:hover { + color: $light-blue; + fill: $light-blue; + } + } } - .abort-btn { - fill: $blue; - color: $blue; - &:hover { - color: $light-blue; - fill: $light-blue; - } - } - } } .vsp-attachments-heat-validation { - @extend .body-1; - display: flex; - .svg-icon.exclamationTriangleFull { - fill: $orange; - width: 15px; - height: 15px; - &.large { - width: 20px; - height: 20px; - } - } - .validation-tree-section { + @extend .body-1; display: flex; - width: 400px; - justify-content: space-between; - } - .vsp-attachments-heat-validation-tree { - @extend .flex-column; - margin: 0; - overflow: auto; - height: 100%; - .attachments-tree-header { - display: flex; - justify-content: space-between; - height: 55px; - align-items: center; - &.header-selected { - background: $tlv-gray; - } - .header-icon { - top: -3px; - position: relative; - margin-left: 20px; - } - .tree-header-title-text { - @extend .heading-4-semibold; - padding-left: 32px; - cursor: pointer; - &.tree-header-title-selected{ - color: $blue; + .svg-icon.exclamationTriangleFull { + fill: $orange; + width: 15px; + height: 15px; + &.large { + width: 20px; + height: 20px; } - } - .tree-header-title { - display: flex; - } } - .counters { - display: flex; - justify-content: space-between; - z-index: 1; - padding-right: 20px; - .counter { - .svg-icon { - &.__exclamationTriangleLine { - fill: $orange; - } - } + .validation-tree-section { display: flex; - &:first-child { - margin-right: 20px; - } - &:only-child { - margin-right: 0; - } - .svg-icon-wrapper { - margin-right: 5px; - } - .counter-icon { - margin-right: 5px; - } - .error-text, .warning-text { - @extend .body-3; - &.large { - @extend .heading-4-semibold; - } - } - } + width: 400px; + justify-content: space-between; } - .tree-wrapper { - flex: 1 1; - position: relative; - padding-bottom: 10px; - - @-moz-document url-prefix() { - .tree-block-inside { - top: 0; - position: relative; + .vsp-attachments-heat-validation-tree { + @extend .flex-column; + margin: 0; + overflow: auto; + height: 100%; + .attachments-tree-header { + display: flex; + justify-content: space-between; + height: 55px; + align-items: center; + &.header-selected { + background: $tlv-gray; + } + .header-icon { + top: -3px; + position: relative; + margin-left: 20px; + } + .tree-header-title-text { + @extend .heading-4-semibold; + padding-left: 32px; + cursor: pointer; + &.tree-header-title-selected { + color: $blue; + } + } + .tree-header-title { + display: flex; + } } - } - .tree-block-inside { - padding-left: 20px; - .tree-node-row { - cursor: default; - white-space: nowrap; - display: flex; - justify-content: space-between; - height: 40px; - align-items: center; - .svg-icon { - &.__chevronUp, &.__chevronDown { - height: 10px; - width: 10px; + .counters { + display: flex; + justify-content: space-between; + z-index: 1; + padding-right: 20px; + .counter { + .svg-icon { + &.__exclamationTriangleLine { + fill: $orange; + } + } + display: flex; + &:first-child { + margin-right: 20px; + } + &:only-child { + margin-right: 0; + } + .svg-icon-wrapper { + margin-right: 5px; + } + .counter-icon { + margin-right: 5px; + } + .error-text, + .warning-text { + @extend .body-3; + &.large { + @extend .heading-4-semibold; + } + } } - } + } + .tree-wrapper { + flex: 1 1; + position: relative; + padding-bottom: 10px; - &:after { - border-top: 1px solid $tlv-gray; - height: 40px; - position: absolute; - left: 0; - right: 0; - content: ' '; - } - @-moz-document url-prefix() { - &:after { - top: 0; + @-moz-document url-prefix() { + .tree-block-inside { + top: 0; + position: relative; + } } - } - &.tree-node-selected::before { - position: absolute; - left: 0; - right: 0; - height: 20px; - display: inline-block; - content: ' '; - background-color: $tlv-gray; - color: $blue; - } + .tree-block-inside { + padding-left: 20px; + .tree-node-row { + cursor: default; + white-space: nowrap; + display: flex; + justify-content: space-between; + height: 40px; + align-items: center; + .svg-icon { + &.__chevronUp, + &.__chevronDown { + height: 10px; + width: 10px; + } + } - &.tree-node-clicked { - color: $blue; - &:after { - background: $tlv-gray; - height: 40px; - position: absolute; - left: 0; - right: 0; - content: ' '; + &:after { + border-top: 1px solid $tlv-gray; + height: 40px; + position: absolute; + left: 0; + right: 0; + content: ' '; + } + @-moz-document url-prefix() { + &:after { + top: 0; + } + } + &.tree-node-selected::before { + position: absolute; + left: 0; + right: 0; + height: 20px; + display: inline-block; + content: ' '; + background-color: $tlv-gray; + color: $blue; + } + + &.tree-node-clicked { + color: $blue; + &:after { + background: $tlv-gray; + height: 40px; + position: absolute; + left: 0; + right: 0; + content: ' '; + } + } + .tree-node-name { + cursor: pointer; + } + .name-section { + z-index: 1; + flex: 1; + @include ellipsis(auto); + } + .tree-node-expander { + position: relative; + display: inline-block; + cursor: pointer; + } + .tree-node-icon { + margin: 0 7px; + } + } } - } - .tree-node-name { - cursor: pointer; - } - .name-section { - z-index: 1; - flex: 1; - @include ellipsis(auto); - } - .tree-node-expander { - position: relative; - display: inline-block; - cursor: pointer; - } - .tree-node-icon { - margin: 0 7px; - } } - } } - } - .vsp-attachments-heat-validation-separator { - border-left: 1px solid $tlv-light-gray; - height: 100%; - width: 5px; - cursor: e-resize; - } + .vsp-attachments-heat-validation-separator { + border-left: 1px solid $tlv-light-gray; + height: 100%; + width: 5px; + cursor: e-resize; + } - .message-board-section { - @extend .flex-column; - padding-left: 25px; - padding-top: 10px; - padding-right: 60px; - overflow: auto; - margin-bottom: 70px; - .error-item { - display: flex; - margin: 10px 0; - .large { - .svg-icon { - width: 20px; - height: 20px; - fill: $orange; + .message-board-section { + @extend .flex-column; + padding-left: 25px; + padding-top: 10px; + padding-right: 60px; + overflow: auto; + margin-bottom: 70px; + .error-item { + display: flex; + margin: 10px 0; + .large { + .svg-icon { + width: 20px; + height: 20px; + fill: $orange; + } + } + .error-item-file-type { + margin-left: 15px; + } + .error-file-name { + @extend .body-1-semibold; + margin-right: 5px; + } } - } - .error-item-file-type { - margin-left: 15px; - } - .error-file-name { - @extend .body-1-semibold; - margin-right: 5px; - } - - - } - - } - } diff --git a/openecomp-ui/resources/scss/modules/_softwareProductComponentCompute.scss b/openecomp-ui/resources/scss/modules/_softwareProductComponentCompute.scss index 164e3bc261..83941c002a 100644 --- a/openecomp-ui/resources/scss/modules/_softwareProductComponentCompute.scss +++ b/openecomp-ui/resources/scss/modules/_softwareProductComponentCompute.scss @@ -1,3 +1,3 @@ -.section-title.software-product-compute-number-of-vms{ - text-transform: initial; -}
\ No newline at end of file +.section-title.software-product-compute-number-of-vms { + text-transform: initial; +} diff --git a/openecomp-ui/resources/scss/modules/_softwareProductComponentGeneral.scss b/openecomp-ui/resources/scss/modules/_softwareProductComponentGeneral.scss index d31c7f0b92..f50e342304 100644 --- a/openecomp-ui/resources/scss/modules/_softwareProductComponentGeneral.scss +++ b/openecomp-ui/resources/scss/modules/_softwareProductComponentGeneral.scss @@ -1,13 +1,13 @@ .vsp-components-general { - .general-data { - .one-line-textarea { - height: 30px; + .general-data { + .one-line-textarea { + height: 30px; + } + .multi-line-textarea { + height: calc(100% - 25px); + textarea { + height: inherit; + } + } } - .multi-line-textarea { - height: calc(100% - 25px); - textarea { - height: inherit; - } - } - } } diff --git a/openecomp-ui/resources/scss/modules/_softwareProductComponentImage.scss b/openecomp-ui/resources/scss/modules/_softwareProductComponentImage.scss index b67c448b54..409b686814 100644 --- a/openecomp-ui/resources/scss/modules/_softwareProductComponentImage.scss +++ b/openecomp-ui/resources/scss/modules/_softwareProductComponentImage.scss @@ -1,67 +1,51 @@ -.image-modal-new { - .modal-dialog { - width: 600px; - } - .image-filename { - width: 480px; - } -} - -.image-modal-edit { - .modal-dialog { - width: 910px; - } - .image-filename { - width: 550px; - } -} - .vsp-components-image-editor { - .note-text { - color: $red; - } + .note-text { + color: $red; + } } -.image-modal-edit, .image-modal-new { - .vsp-components-image-editor { - - .image-format, .image-md5, .image-version { - width: 200px; - } - .image-version { - padding-left: 30px; - } - .section-title { - text-transform: uppercase; - font-size: 18px; +.image-modal-edit, +.image-modal-new { + .vsp-components-image-editor { + .image-format, + .image-md5, + .image-version { + width: 200px; + } + .image-version { + padding-left: 30px; + } + .section-title { + text-transform: uppercase; + font-size: 18px; + } } - } } .vsp-components-image { - .list-editor-view { - margin-top: 50px; - .manual-title { - @extend .body-1-semibold; + .list-editor-view { + margin-top: 50px; + .manual-title { + @extend .body-1-semibold; + } + } + .list-editor-item-view-content { + flex: 1; + min-width: 0; + } + .list-editor-item-view-controller { + padding-top: 5px; } - } - .list-editor-item-view-content { - flex:1; - min-width: 0; - } - .list-editor-item-view-controller { - padding-top: 5px; - } - .image-filename-cell { - display: flex; - .image-filename { - white-space: nowrap; - overflow: hidden; - display: inline-block; - text-overflow: ellipsis; - Â span { - @include ellipsis(100%); - } + .image-filename-cell { + display: flex; + .image-filename { + white-space: nowrap; + overflow: hidden; + display: inline-block; + text-overflow: ellipsis; + Â span { + @include ellipsis(100%); + } + } } - } } diff --git a/openecomp-ui/resources/scss/modules/_softwareProductComponentNetwork.scss b/openecomp-ui/resources/scss/modules/_softwareProductComponentNetwork.scss index eaba47acb4..464ef98d11 100644 --- a/openecomp-ui/resources/scss/modules/_softwareProductComponentNetwork.scss +++ b/openecomp-ui/resources/scss/modules/_softwareProductComponentNetwork.scss @@ -1,87 +1,85 @@ .vsp-components-network { - .network-data { - .single-col { - .validation-input-wrapper { - label { - max-width: 230px; + .network-data { + .single-col { + .validation-input-wrapper { + label { + max-width: 230px; + } + } } - } } - } - .list-editor-view { - margin-top: 50px; - .manual-title { - @extend .body-1-semibold; + .list-editor-view { + margin-top: 50px; + .manual-title { + @extend .body-1-semibold; + } } - } } .network-nic-modal-create { - .network-type-radio { - display: flex; - } + .network-type-radio { + display: flex; + .validation-radio-wrapper:first-child { + padding-right: 20px; + } + } } -.network-nic-modal-edit { - .modal-dialog { - width: 900px; - } - .vsp-components-network-editor { +.vsp-components-network-editor { .editor-data { - height: 500px; - .grid-section { - padding-bottom: 15px; - .section-title { - @extend .heading-5; - padding-bottom: 10px; - padding-left: 0; + height: 500px; + .grid-section { + padding-bottom: 15px; + .section-title { + @extend .heading-5; + padding-bottom: 10px; + padding-left: 0; + } } - } - .part-title { - @extend .heading-5; - padding-bottom: 10px; - padding-left: 14px; - } - .part-title-small { - @extend .heading-3; - padding-bottom: 10px; - padding-left: 0; - } - .network-radio label { - font-size: 15px; - } - - .packets-bytes-gen { - display: flex; - justify-content: space-between; - flex-direction: column; - .top-row { - display: flex; - .part-title-small { + .part-title { + @extend .heading-5; + padding-bottom: 10px; + padding-left: 14px; + } + .part-title-small { + @extend .heading-3; + padding-bottom: 10px; padding-left: 0; - &.packets { - flex: 0 0 52%; - } - &.bytes { - flex: 0 0 48%; - } - } } - .bottom-row { - display: flex; - justify-content: space-between; - flex-direction: row; - flex: 1; - .inputs-wrapper { + .network-radio label { + font-size: 15px; + } + + .packets-bytes-gen { display: flex; - flex-direction: row; justify-content: space-between; - flex: 1; - .validation-input-wrapper { - flex: 0 0 22%; + flex-direction: column; + .top-row { + display: flex; + .part-title-small { + padding-left: 0; + &.packets { + flex: 0 0 52%; + } + &.bytes { + flex: 0 0 48%; + } + } + } + .bottom-row { + display: flex; + justify-content: space-between; + flex-direction: row; + flex: 1; + .inputs-wrapper { + display: flex; + flex-direction: row; + justify-content: space-between; + flex: 1; + .validation-input-wrapper { + flex: 0 0 22%; + } + } } - } } - } } - } } diff --git a/openecomp-ui/resources/scss/modules/_softwareProductComponentProcessesPage.scss b/openecomp-ui/resources/scss/modules/_softwareProductComponentProcessesPage.scss index 9476d7043d..b3c4800492 100644 --- a/openecomp-ui/resources/scss/modules/_softwareProductComponentProcessesPage.scss +++ b/openecomp-ui/resources/scss/modules/_softwareProductComponentProcessesPage.scss @@ -1,9 +1,9 @@ .edit-process-modal { - .component-process-description > textarea { - height: 113px; - } + .component-process-description > textarea { + height: 113px; + } } .software-product-landing-view-right-side.vsp-components-processes-page { - overflow-y: initial; -}
\ No newline at end of file + overflow-y: initial; +} diff --git a/openecomp-ui/resources/scss/modules/_softwareProductCreatePage.scss b/openecomp-ui/resources/scss/modules/_softwareProductCreatePage.scss index b788a86e44..8b13789179 100644 --- a/openecomp-ui/resources/scss/modules/_softwareProductCreatePage.scss +++ b/openecomp-ui/resources/scss/modules/_softwareProductCreatePage.scss @@ -1,39 +1 @@ -.software-product-type-modal { - .modal-dialog { - @extend .modal-lg !optional; - .modal-body { - padding: 0; - } - .validation-form-content { - padding: 50px; - .software-product-form-row { - display: flex; - justify-content: space-between; - margin-bottom: 20px; - .software-product-inline-section { - padding: 0 20px; - flex: 45%; - .validation-input-wrapper { - .field-section { - @extend .body-2-semibold; - margin-bottom: 23px; - color: $black; - } - textarea { - height: 191px; - } - select optgroup[label] { - color: $dark-blue; - } - option { - color: black; - } - } - } - } - } - .validation-buttons { - padding: 20px 50px; - } - } -} + diff --git a/openecomp-ui/resources/scss/modules/_softwareProductDependencies.scss b/openecomp-ui/resources/scss/modules/_softwareProductDependencies.scss index 65c558fa0e..5358e7c51b 100644 --- a/openecomp-ui/resources/scss/modules/_softwareProductDependencies.scss +++ b/openecomp-ui/resources/scss/modules/_softwareProductDependencies.scss @@ -2,22 +2,22 @@ .software-product-dependencies-title { @extend .heading-1; @extend .text-uppercase !optional; - position: sticky; - top: -30px; - z-index: 1; - background: $white; + position: sticky; + top: -30px; + z-index: 1; + background: $white; margin-bottom: 20px; color: $blue; } .select-action-table-controllers { - position: sticky; - top: 4px; - z-index: 1; - background: $white; + position: sticky; + top: 4px; + z-index: 1; + background: $white; justify-content: flex-end; cursor: pointer; color: $blue; - padding-right: 27px; + padding-right: 27px; margin-bottom: 3px; &:hover { color: $dark-blue; @@ -26,23 +26,24 @@ .select-action-table-view { min-width: 770px; } - .select-action-table-headers { - position: sticky; - top: 27px; - z-index: 1; - .select-action-table-header { - @extend .body-1-semibold; - color: $text-black; - } - } - .select-action-table-row-wrapper { - .svg-icon { - &.__trashO, &.__plusCircle { - fill: $dark-gray; - &:hover { - fill: $black; + .select-action-table-headers { + position: sticky; + top: 27px; + z-index: 1; + .select-action-table-header { + @extend .body-1-semibold; + color: $text-black; + } + } + .select-action-table-row-wrapper { + .svg-icon { + &.__trashO, + &.__plusCircle { + fill: $dark-gray; + &:hover { + fill: $black; + } + } + } } - } - } - } } diff --git a/openecomp-ui/resources/scss/modules/_softwareProductDeployment.scss b/openecomp-ui/resources/scss/modules/_softwareProductDeployment.scss index b5f9a546d9..85eea9c742 100644 --- a/openecomp-ui/resources/scss/modules/_softwareProductDeployment.scss +++ b/openecomp-ui/resources/scss/modules/_softwareProductDeployment.scss @@ -1,46 +1,38 @@ .deployment-flavor-editor { - .modal-dialog { - width: 780px; - } - .deployment-feature-groups-section.no-feature-groups { - padding-bottom: 0; - .form-group { - margin-bottom: 5px; - } - } - .deployment-feature-group-warning-section { - padding-bottom: 30px; - span { - @extend .body-2; - color: $red; - } - } - .grid-section.vfc-table { - .section-title { - padding-bottom: 10px; - } - } - .modal-content { - .modal-body { - .validation-form-content { - overflow-y: visible; - .grid-col-1 { - flex-basis: 30%; - } + .deployment-feature-groups-section.no-feature-groups { + padding-bottom: 0; + .form-group { + margin-bottom: 5px; + } + } + .deployment-feature-group-warning-section { + padding-bottom: 30px; + span { + @extend .body-2; + color: $red; + } + } + .grid-section.vfc-table { + .section-title { + padding-bottom: 10px; + } + } + &.sdc-modal__content { + .validation-form-content { + .grid-col-1 { + flex-basis: 30%; + } + .grid-section.vfc-table { + padding-bottom: 50px; + .Select-menu { + max-height: 100px; + } + } - .grid-section.vfc-table { - padding-bottom: 50px; - .Select-menu { - max-height: 100px; - } - - } - - .grid-col-3 { - flex-basis: 65%; - } - } - } - } + .grid-col-3 { + flex-basis: 65%; + } + } + } } diff --git a/openecomp-ui/resources/scss/modules/_softwareProductLandingPage.scss b/openecomp-ui/resources/scss/modules/_softwareProductLandingPage.scss index 8d124c3b40..8f0803f6d0 100644 --- a/openecomp-ui/resources/scss/modules/_softwareProductLandingPage.scss +++ b/openecomp-ui/resources/scss/modules/_softwareProductLandingPage.scss @@ -1,276 +1,273 @@ .upload-modal-body-content { - padding-left: 30px; - padding-right: 30px; - padding-bottom: 10px; - .title { - @extend .body-1-semibold; - } - .file-name { - padding-left: 5px; - @extend .body-1-semibold; - } + padding-left: 30px; + padding-right: 30px; + padding-bottom: 10px; + .title { + @extend .body-1-semibold; + } + .file-name { + padding-left: 5px; + @extend .body-1-semibold; + } } - .software-product-view { - display: flex; - height:100%; + display: flex; + height: 100%; - .description { - @extend .body-1; - padding-right: 20px; + .description { + @extend .body-1; + padding-right: 20px; - .missing-license { - display: flex; - align-items: baseline; - .svg-icon{ - margin-right: 7px; - margin-left: 3px; - &.__exclamationTriangleFull { - fill: $orange; - width: 17px; - height: 17px; + .missing-license { + display: flex; + align-items: baseline; + .svg-icon { + margin-right: 7px; + margin-left: 3px; + &.__exclamationTriangleFull { + fill: $orange; + width: 17px; + height: 17px; + } + } + .warning-text { + position: relative; + top: -2px; + } } - } - .warning-text { - position: relative; - top: -2px; - } } - } - .name { - @extend .body-1-semibold; - } - .software-product-landing-view-right-side { - @extend .flex; - overflow-y: hidden; - .list-editor-view { - .list-editor-view-title { - margin-bottom: 0; - } + .name { + @extend .body-1-semibold; } - } - .software-product-landing-view { - padding-bottom: 50px; - - - .software-product-landing-view-top { - .details-container { - @extend .flex-column; - - .single-detail-section { - - @extend .flex-column; - &.title-section { - flex: 0.8; - @extend .heading-5-semibold; - } - &.title-text { - margin-bottom: 24px; - } - .description { - @include multiline-ellipsis(); - } - } - .title { - @extend .body-3; - color: $gray; - &.extra-large { - min-width: 130px; - } - } - .details-section { - display: flex; - } - .multiple-details-section { - @extend .flex-column; - justify-content: space-between; - .detail-col { - padding-bottom: 10px; - } - } - } - .row { - margin: 0; - display: flex; - .details-panel { - flex: 1; - margin-right: 50px; - &:last-child { - margin-right: 0; - } - .software-product-landing-view-top-block-col-upl { - height: 215px; - width: initial; - } + .software-product-landing-view-right-side { + @extend .flex; + overflow-y: hidden; + .list-editor-view { + .list-editor-view-title { + margin-bottom: 0; + } } - .col-md-6 { - padding: 0; + } + .software-product-landing-view { + padding-bottom: 50px; - overflow-wrap: break-word; - &:first-child { - padding-right: 25px; - } - &:last-child { - padding-left: 25px; - } - } - .title { - @extend .body-1-semibold; - } - .software-product-landing-view-heading-title { - @extend .section-title; - color: $dark-gray; - padding-bottom: 20px; - &:first-child { - padding-bottom: 20px; - } - } - .software-product-landing-view-top-block { - &.clickable { - cursor: pointer; - &:hover { - @extend .box-hover; - } - } - border: 1px solid $light-gray; - padding: 20px 18px 0 18px; - height: 215px; - display: flex; - justify-content: space-between; - background-color: $white; + .software-product-landing-view-top { + .details-container { + @extend .flex-column; - .col-md-6 { - @extend .body-1; - } - .software-product-landing-view-top-block-col { - @extend .body-1; - flex: 0.8; - display: flex; - justify-content: space-between; - flex-direction: column; - .description { - overflow: hidden; - padding-right: 20px; - } - .attachment-details { - padding-bottom: 10px; - } - .attachment-details-count { - color: $light-blue; + .single-detail-section { + @extend .flex-column; + &.title-section { + flex: 0.8; + @extend .heading-5-semibold; + } + &.title-text { + margin-bottom: 24px; + } + .description { + @include multiline-ellipsis(); + } + } + .title { + @extend .body-3; + color: $gray; + &.extra-large { + min-width: 130px; + } + } + .details-section { + display: flex; + } + .multiple-details-section { + @extend .flex-column; + justify-content: space-between; + .detail-col { + padding-bottom: 10px; + } + } } - } - } + .row { + margin: 0; + display: flex; + .details-panel { + flex: 1; + margin-right: 50px; + &:last-child { + margin-right: 0; + } + .software-product-landing-view-top-block-col-upl { + height: 215px; + width: initial; + } + } + .col-md-6 { + padding: 0; - .software-product-landing-view-top-block-col-upl { - @extend .flex; - height: 215px; - text-align: center; - flex-direction: column; - justify-content: center; - border: 2px dashed $light-gray; - margin-bottom: 20px; - @extend .body-1; - align-items: center; - .upload-btn { - padding: 15px 55px; + overflow-wrap: break-word; + &:first-child { + padding-right: 25px; + } + &:last-child { + padding-left: 25px; + } + } + .title { + @extend .body-1-semibold; + } + .software-product-landing-view-heading-title { + @extend .section-title; + color: $dark-gray; + padding-bottom: 20px; + &:first-child { + padding-bottom: 20px; + } + } + .software-product-landing-view-top-block { + &.clickable { + cursor: pointer; + &:hover { + @extend .box-hover; + } + } + border: 1px solid $light-gray; + padding: 20px 18px 0 18px; + height: 215px; + display: flex; + justify-content: space-between; + background-color: $white; - } - .drag-text { - color: $blue; - @extend .body-1-semibold; - } - .or-text { - margin-top: 10px; - margin-bottom: 10px; - color: $light-gray; - } - .upload { - width: 50%; - border : 0px !important; - } - .vnfRepo { - width: 50%; - cursor: pointer; - .searchRepo-text { - color: $blue; - @extend .body-1-semibold; - width: 72px; - line-height: 24px; - margin-left: auto; - margin-right: auto; - } - .svg-icon-wrapper { - .svg-icon.__search { - width: 34px; - height: 34px; - margin-top: 10px; - } - &.__positive { - fill: $blue; - color: $blue; - } + .col-md-6 { + @extend .body-1; + } + .software-product-landing-view-top-block-col { + @extend .body-1; + flex: 0.8; + display: flex; + justify-content: space-between; + flex-direction: column; + .description { + overflow: hidden; + padding-right: 20px; + } + .attachment-details { + padding-bottom: 10px; + } + .attachment-details-count { + color: $light-blue; + } + } + } + + .software-product-landing-view-top-block-col-upl { + @extend .flex; + height: 215px; + text-align: center; + flex-direction: column; + justify-content: center; + border: 2px dashed $light-gray; + margin-bottom: 20px; + @extend .body-1; + align-items: center; + .upload-btn { + padding: 15px 55px; + } + .drag-text { + color: $blue; + @extend .body-1-semibold; + } + .or-text { + margin-top: 10px; + margin-bottom: 10px; + color: $light-gray; + } + .upload { + width: 50%; + border: 0px !important; + } + .vnfRepo { + width: 50%; + cursor: pointer; + .searchRepo-text { + color: $blue; + @extend .body-1-semibold; + width: 72px; + line-height: 24px; + margin-left: auto; + margin-right: auto; + } + .svg-icon-wrapper { + .svg-icon.__search { + width: 34px; + height: 34px; + margin-top: 10px; + } + &.__positive { + fill: $blue; + color: $blue; + } + } + } + .verticalLine { + height: 90%; + border-left: 1px solid $light-gray; + } + } + .showVnf { + flex-direction: row; + } } - } - .verticalLine { - height: 90%; - border-left: 1px solid $light-gray; - } - } - .showVnf { - flex-direction: row; } - } } - } } .vsp-details-page { - .grid-section-general { - padding-bottom: 30px; - } - .vsp-general-tab { - .validation-form-content { - margin: 0; + .grid-section-general { + padding-bottom: 30px; } - .validation-buttons { - margin: 43px 0; - padding: 0 52px; - } - .validation-form-content { - .vsp-general-tab-inline-section { - display: flex; - - .vsp-general-tab-sub-section:not(:last-of-type) { - margin-right: 40px; + .vsp-general-tab { + .validation-form-content { + margin: 0; } - .field-section { - width: 440px; + .validation-buttons { + margin: 43px 0; + padding: 0 52px; } - .form-group textarea { - height: 192px; - } - select optgroup[label] { - color: $dark-blue; + .validation-form-content { + .vsp-general-tab-inline-section { + display: flex; + + .vsp-general-tab-sub-section:not(:last-of-type) { + margin-right: 40px; + } + .field-section { + width: 440px; + } + .form-group textarea { + height: 192px; + } + select optgroup[label] { + color: $dark-blue; + } + option { + color: $dark-gray; + } + .Select, + .input-options { + width: 440px; + } + } } - option { - color: $dark-gray; + .validation-buttons { + position: fixed; + display: block; + bottom: 0; + width: 66%; } - .Select, .input-options { - width: 440px; + .validation-input-wrapper { + select.form-control { + width: 100%; + } } - } - } - .validation-buttons { - position: fixed; - display: block; - bottom: 0; - width: 66%; - } - .validation-input-wrapper { - select.form-control { - width: 100%; - } } - } } diff --git a/openecomp-ui/resources/scss/modules/_softwareProductProcessesPage.scss b/openecomp-ui/resources/scss/modules/_softwareProductProcessesPage.scss index 3f2a2f9a69..9ec074f09f 100644 --- a/openecomp-ui/resources/scss/modules/_softwareProductProcessesPage.scss +++ b/openecomp-ui/resources/scss/modules/_softwareProductProcessesPage.scss @@ -1,60 +1,60 @@ .edit-process-modal { - height: 100%; - .vsp-processes-editor { - padding-left: 0; - padding-right: 0; - .editor-title { - @extend .heading-2; - color: $dark-gray; - padding-bottom: 50px; - } - .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; + height: 100%; + .vsp-processes-editor { + padding-left: 0; + padding-right: 0; + .editor-title { + @extend .heading-2; + color: $dark-gray; + padding-bottom: 50px; + } + .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; - .process-type { - width: 100%; - } - } - .vsp-processes-editor-data { - .validation-input-wrapper { - .form-group.vsp-process-description > textarea { - height: 113px; + .process-type { + width: 100%; + } + } + .vsp-processes-editor-data { + .validation-input-wrapper { + .form-group.vsp-process-description > textarea { + height: 113px; + } + } + .process-type { + width: 100%; + } + .process-editor-file-box { + width: 380px; + } } - } - .process-type { - width: 100%; - } - .process-editor-file-box { - width: 380px; - } } - } } .software-product-landing-view-right-side.vsp-processes-page { - overflow-y: initial; - .processes-list { - @extend .flex-column; - } - .list-editor-view { - .list-editor-view-list { - .list-editor-item-view { - .list-editor-item-view-content { - .list-editor-item-view-field { - .artifact-name { - @extend .body-1; - color: $light-green; + overflow-y: initial; + .processes-list { + @extend .flex-column; + } + .list-editor-view { + .list-editor-view-list { + .list-editor-item-view { + .list-editor-item-view-content { + .list-editor-item-view-field { + .artifact-name { + @extend .body-1; + color: $light-green; + } + } + } } - } } - } } - } } diff --git a/openecomp-ui/resources/scss/modules/_softwareproductComponentLoadBalancing.scss b/openecomp-ui/resources/scss/modules/_softwareproductComponentLoadBalancing.scss index 440b2424df..00f3ae4567 100644 --- a/openecomp-ui/resources/scss/modules/_softwareproductComponentLoadBalancing.scss +++ b/openecomp-ui/resources/scss/modules/_softwareproductComponentLoadBalancing.scss @@ -1,35 +1,35 @@ .vsp-components-load-balancing { - .svg-icon-wrapper { - position: relative; - top: -4px; - } + .svg-icon-wrapper { + position: relative; + top: -4px; + } - .halb-data { - .question { - padding-top: 10px; - &:first-child { - padding-top: 0; - } - } - .title { - @extend .body-1-semibold; - margin-bottom: 8px; - cursor: pointer; - .svg-icon { - @include transition(transform 0.3s); - margin-right: 5px; - position: relative; - top: 4px; - } - } - .add-padding { - padding-bottom: 20px; - } - .new-line { - margin-left: 16px; - } - textarea.form-control { - height: 90px; - } - } + .halb-data { + .question { + padding-top: 10px; + &:first-child { + padding-top: 0; + } + } + .title { + @extend .body-1-semibold; + margin-bottom: 8px; + cursor: pointer; + .svg-icon { + @include transition(transform 0.3s); + margin-right: 5px; + position: relative; + top: 4px; + } + } + .add-padding { + padding-bottom: 20px; + } + .new-line { + margin-left: 16px; + } + textarea.form-control { + height: 90px; + } + } } diff --git a/openecomp-ui/resources/scss/modules/_uploadScreen.scss b/openecomp-ui/resources/scss/modules/_uploadScreen.scss index 23f41c8816..1c3ed2ada1 100644 --- a/openecomp-ui/resources/scss/modules/_uploadScreen.scss +++ b/openecomp-ui/resources/scss/modules/_uploadScreen.scss @@ -1,32 +1,32 @@ .heat-validation-stand-alone { - .upload-screen { - margin-top: 100px; - .title { - text-align: center; - margin-bottom: 50px; + .upload-screen { + margin-top: 100px; + .title { + text-align: center; + margin-bottom: 50px; + } } - } - .attachments-screen { - .back-button { - z-index: 1000; - position: absolute; - top: 20px; - right: 20px; - width: 200px; - } - .software-product-attachments { - display: block; - .software-product-view { - display: block; - .software-product-landing-view-right-side { - display: block; - .software-product-attachments-main { - display: flex; - height: 100vh; - } + .attachments-screen { + .back-button { + z-index: 1000; + position: absolute; + top: 20px; + right: 20px; + width: 200px; + } + .software-product-attachments { + display: block; + .software-product-view { + display: block; + .software-product-landing-view-right-side { + display: block; + .software-product-attachments-main { + display: flex; + height: 100vh; + } + } + } } - } } - } } diff --git a/openecomp-ui/resources/scss/modules/_versionsPage.scss b/openecomp-ui/resources/scss/modules/_versionsPage.scss index 5651c89032..c29230198a 100644 --- a/openecomp-ui/resources/scss/modules/_versionsPage.scss +++ b/openecomp-ui/resources/scss/modules/_versionsPage.scss @@ -1,360 +1,361 @@ .dox-ui-punch-out { - background-color: $content-background-color; + background-color: $content-background-color; } .dox-ui-punch-out.dox-ui-punch-out-full-page { - position: absolute; - top: 0; - bottom: 0; - left: 0; - right: 0; - overflow-y: auto; + position: absolute; + top: 0; + bottom: 0; + left: 0; + right: 0; + overflow-y: auto; } @mixin version-page-box-shadow() { - box-shadow: 0 1px 4px 0 rgba(24, 24, 24, 0.06); + box-shadow: 0 1px 4px 0 rgba(24, 24, 24, 0.06); } -@mixin version-page-sub-title(){ - color: $text-black; - text-transform: uppercase; - background-color: $white; - border-bottom: 1px solid $light-gray; - padding: 12px 0 10px 23px; +@mixin version-page-sub-title() { + color: $text-black; + text-transform: uppercase; + background-color: $white; + border-bottom: 1px solid $light-gray; + padding: 12px 0 10px 23px; } .versions-tree-modal { - .modal-dialog { - width: 800px; - } - - .tree-view { - display: flex; - align-items: center; - } + .tree-view { + display: flex; + align-items: center; + } } .versions-page-view { - height: 100%; - background-color: $background-gray; - overflow: auto; - padding: 35px 50px 20px 50px; - - .svg-icon-wrapper { - justify-content: flex-start; - } - .version-page-header { - display: flex; - justify-content: space-between; - .versions-page-title { - @extend .heading-1; - text-transform: uppercase; - margin-bottom: 29px; - color: $blue; - display: flex; - .archived-title { - @extend .body-3; - color: $white; - background-color: $dark-purple; - margin-left: 20px; - border-radius: 3px; - padding: 1px 10px; - align-self: center; - text-transform: none; - } - } - .deprecate-btn-wrapper { - display: flex; - justify-content: flex-end; - margin-bottom: 10px; - align-self: center; - .svg-icon-wrapper { - &:hover { - fill: $light-blue; - } - .svg-icon { - width: 24px; - height: 24px; - } - } - } - } - .versions-page-permissions-view-wrapper { - @extend .body-1-semibold; - @include version-page-box-shadow(); - - .permissions-view-wrapper-title { - @include version-page-sub-title(); - } - - .svg-icon-wrapper.user-view { - fill: transparent; - stroke: $blue; - .svg-icon { - height: 18px; - width: 16px; - margin: 0 7px; - } - &.current-user { - .svg-icon { - background-color: $blue; - stroke: $white; - padding-top: 5px; - padding-bottom: 3px; - height: 29px; - width: 29px; - border-radius: 20px; - border: 1px solid $blue; - box-shadow: inset 0px 0px 0px 2px $white; - margin: 0; - } - .svg-icon-label { - margin-left: 7px; - } - } - .svg-icon-label { - @extend .body-2; - color: $dark-gray; - margin-left: 6px; - } - } - - .permissions-view-content { - padding: 20px 40px 20px 25px; - background-color: $white; - - height: 120px; - display: flex; - } - - .permissions-view { - display: flex; - flex: 1; - flex-direction: column; - justify-content: space-around; - - .permissions-view-title { - text-transform: uppercase; - color: $dark-gray; - } - - .contributors-view, .owner-view { - display: flex; - height: 16px; - @extend .body-1-semibold; - - .permissions-view-title { - width: 130px; - line-height: 16px; - } - - .extra-contributors { - border-radius: 30px; - background-color: $gray; - width: 26px; - height: 26px; - padding-right: 2px; - display: flex; - align-items: center; - justify-content: center; - color: $white; - cursor: default; - &:hover { - background-color: $dark-gray; - } - } - - .user-view { - margin-right: 38px; - } - - .manage-permissions { - color: $blue; - margin-left: auto; - cursor: pointer; - - &:hover { - color: $dark-blue; - } - } - } - } - } - - .versions-page-list-and-tree { - display: flex; - margin-top: 20px; - - .version-tree-wrapper { - display: flex; - flex-direction: column; - margin-right:10px; - transition: all 1s ease; - @include version-page-box-shadow(); - - .version-tree-title-container { - display: flex; - align-items: center; - height: 40px; - @include version-page-sub-title(); - padding-right: 10px; - - .version-tree-full-screen { - margin-left: auto; - } - } - - .tree-view { - background-color: $white; - flex: 1; - - .node:not(.selectedNode):hover { - .outer-circle, .inner-circle { - transform: scale(1.1); - } - } - } - } - } - - .version-list { - flex: 1; - @extend .body-1-semibold; - color: $text-black; - display: flex; - flex-direction: column; - - .version-list-items { - flex: 1; - display: flex; - flex-direction: column; - - .version-item-row { - border-bottom: 1px solid $tlv-light-gray; - - &:last-child { - border-bottom: none; - } - } - } - - .version-item-row { - $row-hover-color: lighten($blue, 54%); - $row-active-color: lighten($blue, 51%); - - display: flex; - align-items: center; - padding: 15px 30px; - @include version-page-box-shadow(); - background-color: $white; - height: 70px; - - &:hover { - background-color: $row-hover-color; - } - - &.selected { - box-shadow: 0 1px 4px 0 rgba(24, 24, 24, 0.06), inset 5px 0 0 0 $blue; - background-color: $row-active-color; - - &:hover { - box-shadow: 0 1px 4px 0 rgba(24, 24, 24, 0.06), inset 5px 0 0 0 lighten($blue, 35%); - } - } - - &.header-row { - height: 40px; - - @extend .body-1-semibold; - @include version-page-sub-title(); - padding: 15px 27px; - - &:hover { - background-color: $white; - pointer-events: none; - &:active { - background-color: $white; - @include version-page-box-shadow(); - } - } - .header-field.actions { - margin-right: 57px; - } - } - - .version-item-field { - flex: 1; - display: flex; - margin-right: 10px; - - &.item-version, &.item-status { - flex: 0 1 10%; - @extend .body-1-semibold; - color: $text-black; - } - - &.item-description, &.item-last-edited { - @extend .body-1; - color: $dark-gray; - } - - &.item-description, &.header-description { - flex: 2 1 0; - } - - &.item-description > .description-text { - margin-right: 10px; - @include ellipsis($max-width: 300px); - width: initial; - } - - &.item-actions { - display: flex; - flex: 1 1 3%; - justify-content: space-between; - } - - &.item-select, &.item-create { - @extend .body-1; - flex: 0 1 auto; - margin-right: 0; - - .svg-icon-wrapper { - fill: $blue; - color: $blue; - - &[disabled] { - cursor: default; - } - - .svg-icon { - width: 16px; - height: 16px; - } - - &:hover:not([disabled]) { - fill: $dark-blue; - color: $dark-blue; - } - } - } - - } - - /* To keep ellipsis hider's background the same color as row background */ - &:not(.selected):hover .item-description > .description-text:after { - background: $row-hover-color; - } - - &:hover:active .item-description > .description-text:after { - background: $row-active-color; - } - - } - - } - - &.clickable { - cursor: pointer; - } + height: 100%; + background-color: $background-gray; + overflow: auto; + padding: 35px 50px 20px 50px; + + .svg-icon-wrapper { + justify-content: flex-start; + } + .version-page-header { + display: flex; + justify-content: space-between; + .versions-page-title { + @extend .heading-1; + text-transform: uppercase; + margin-bottom: 29px; + color: $blue; + display: flex; + .archived-title { + @extend .body-3; + color: $white; + background-color: $dark-purple; + margin-left: 20px; + border-radius: 3px; + padding: 1px 10px; + align-self: center; + text-transform: none; + } + } + .deprecate-btn-wrapper { + display: flex; + justify-content: flex-end; + margin-bottom: 10px; + align-self: center; + .svg-icon-wrapper { + &:hover { + fill: $light-blue; + } + .svg-icon { + width: 24px; + height: 24px; + } + } + } + } + .versions-page-permissions-view-wrapper { + @extend .body-1-semibold; + @include version-page-box-shadow(); + + .permissions-view-wrapper-title { + @include version-page-sub-title(); + } + + .svg-icon-wrapper.user-view { + fill: transparent; + stroke: $blue; + .svg-icon { + height: 18px; + width: 16px; + margin: 0 7px; + } + &.current-user { + .svg-icon { + background-color: $blue; + stroke: $white; + padding-top: 5px; + padding-bottom: 3px; + height: 29px; + width: 29px; + border-radius: 20px; + border: 1px solid $blue; + box-shadow: inset 0px 0px 0px 2px $white; + margin: 0; + } + .svg-icon-label { + margin-left: 7px; + } + } + .svg-icon-label { + @extend .body-2; + color: $dark-gray; + margin-left: 6px; + } + } + + .permissions-view-content { + padding: 20px 40px 20px 25px; + background-color: $white; + + height: 120px; + display: flex; + } + + .permissions-view { + display: flex; + flex: 1; + flex-direction: column; + justify-content: space-around; + + .permissions-view-title { + text-transform: uppercase; + color: $dark-gray; + } + + .contributors-view, + .owner-view { + display: flex; + height: 16px; + @extend .body-1-semibold; + + .permissions-view-title { + width: 130px; + line-height: 16px; + } + + .extra-contributors { + border-radius: 30px; + background-color: $gray; + width: 26px; + height: 26px; + padding-right: 2px; + display: flex; + align-items: center; + justify-content: center; + color: $white; + cursor: default; + &:hover { + background-color: $dark-gray; + } + } + + .user-view { + margin-right: 38px; + } + + .manage-permissions { + color: $blue; + margin-left: auto; + cursor: pointer; + + &:hover { + color: $dark-blue; + } + } + } + } + } + + .versions-page-list-and-tree { + display: flex; + margin-top: 20px; + + .version-tree-wrapper { + display: flex; + flex-direction: column; + margin-right: 10px; + transition: all 1s ease; + @include version-page-box-shadow(); + + .version-tree-title-container { + display: flex; + align-items: center; + height: 40px; + @include version-page-sub-title(); + padding-right: 10px; + + .version-tree-full-screen { + margin-left: auto; + } + } + + .tree-view { + background-color: $white; + flex: 1; + + .node:not(.selectedNode):hover { + .outer-circle, + .inner-circle { + transform: scale(1.1); + } + } + } + } + } + + .version-list { + flex: 1; + @extend .body-1-semibold; + color: $text-black; + display: flex; + flex-direction: column; + + .version-list-items { + flex: 1; + display: flex; + flex-direction: column; + + .version-item-row { + border-bottom: 1px solid $tlv-light-gray; + + &:last-child { + border-bottom: none; + } + } + } + + .version-item-row { + $row-hover-color: lighten($blue, 54%); + $row-active-color: lighten($blue, 51%); + + display: flex; + align-items: center; + padding: 15px 30px; + @include version-page-box-shadow(); + background-color: $white; + height: 70px; + + &:hover { + background-color: $row-hover-color; + } + + &.selected { + box-shadow: 0 1px 4px 0 rgba(24, 24, 24, 0.06), + inset 5px 0 0 0 $blue; + background-color: $row-active-color; + + &:hover { + box-shadow: 0 1px 4px 0 rgba(24, 24, 24, 0.06), + inset 5px 0 0 0 lighten($blue, 35%); + } + } + + &.header-row { + height: 40px; + + @extend .body-1-semibold; + @include version-page-sub-title(); + padding: 15px 27px; + + &:hover { + background-color: $white; + pointer-events: none; + &:active { + background-color: $white; + @include version-page-box-shadow(); + } + } + .header-field.actions { + margin-right: 57px; + } + } + + .version-item-field { + flex: 1; + display: flex; + margin-right: 10px; + + &.item-version, + &.item-status { + flex: 0 1 10%; + @extend .body-1-semibold; + color: $text-black; + } + + &.item-description, + &.item-last-edited { + @extend .body-1; + color: $dark-gray; + } + + &.item-description, + &.header-description { + flex: 2 1 0; + } + + &.item-description > .description-text { + margin-right: 10px; + @include ellipsis($max-width: 300px); + width: initial; + } + + &.item-actions { + display: flex; + flex: 1 1 3%; + justify-content: space-between; + } + + &.item-select, + &.item-create { + @extend .body-1; + flex: 0 1 auto; + margin-right: 0; + + .svg-icon-wrapper { + fill: $blue; + color: $blue; + + &[disabled] { + cursor: default; + } + + .svg-icon { + width: 16px; + height: 16px; + } + + &:hover:not([disabled]) { + fill: $dark-blue; + color: $dark-blue; + } + } + } + } + + /* To keep ellipsis hider's background the same color as row background */ + &:not(.selected):hover .item-description > .description-text:after { + background: $row-hover-color; + } + + &:hover:active .item-description > .description-text:after { + background: $row-active-color; + } + } + } + + &.clickable { + cursor: pointer; + } } diff --git a/openecomp-ui/resources/scss/modules/_vspComponentCompute.scss b/openecomp-ui/resources/scss/modules/_vspComponentCompute.scss deleted file mode 100644 index 9f88e94393..0000000000 --- a/openecomp-ui/resources/scss/modules/_vspComponentCompute.scss +++ /dev/null @@ -1,6 +0,0 @@ - -.compute-flavor-editor-modal-edit { - .modal-lg { - width: 1182px; - } -}
\ No newline at end of file diff --git a/openecomp-ui/resources/scss/modules/_vspComponentMonitoring.scss b/openecomp-ui/resources/scss/modules/_vspComponentMonitoring.scss index 14bad18179..867749d8e9 100644 --- a/openecomp-ui/resources/scss/modules/_vspComponentMonitoring.scss +++ b/openecomp-ui/resources/scss/modules/_vspComponentMonitoring.scss @@ -1,24 +1,22 @@ - .vsp-component-monitoring { - .dropzone { - &:not(:last-child) { - padding-bottom: 50px; - } + .dropzone { + &:not(:last-child) { + padding-bottom: 50px; + } - .monitoring-file { - display: flex; - .filename { - opacity: 1; - width: auto; - border-right-style: none; - } - .delete { - display: flex; - width: 30px; - justify-content: center; - align-items: center; - } + .monitoring-file { + display: flex; + .filename { + opacity: 1; + width: auto; + border-right-style: none; + } + .delete { + display: flex; + width: 30px; + justify-content: center; + align-items: center; + } + } } - } - } diff --git a/openecomp-ui/resources/scss/modules/_vspComponentQuestionnaire.scss b/openecomp-ui/resources/scss/modules/_vspComponentQuestionnaire.scss index 2a99263285..8a7575fd97 100644 --- a/openecomp-ui/resources/scss/modules/_vspComponentQuestionnaire.scss +++ b/openecomp-ui/resources/scss/modules/_vspComponentQuestionnaire.scss @@ -1,48 +1,47 @@ - .vsp-component-questionnaire-view { - input[type='checkbox'] { - &:before { - border: 1px solid $dark-gray; - cursor: pointer; - } - &:checked:before { - border: 1px solid $blue; - } - } - .component-questionnaire-validation-form { - - .section-field { - textarea { - height: 80px; - } + input[type='checkbox'] { + &:before { + border: 1px solid $dark-gray; + cursor: pointer; + } + &:checked:before { + border: 1px solid $blue; + } } - - .rows-section, .grid-items { - .row-flex-components { - display: flex; - } - - .vertical-flex { - flex-direction: column; - .control-label { - @extend .body-2-semibold; + .component-questionnaire-validation-form { + .section-field { + textarea { + height: 80px; + } } - .radio-options-content-row { - display: flex; - margin-top: -4px; - .validation-radio-wrapper { - margin-right: 20px; - & > .form-group { - display: flex; + .rows-section, + .grid-items { + .row-flex-components { + display: flex; } - .form-group .sdc-radio { - width: auto; - margin-right: 0; + + .vertical-flex { + flex-direction: column; + .control-label { + @extend .body-2-semibold; + } + .radio-options-content-row { + display: flex; + margin-top: -4px; + .validation-radio-wrapper { + margin-right: 20px; + + & > .form-group { + display: flex; + } + .form-group .sdc-radio { + width: auto; + margin-right: 0; + } + } + } } - } } - } } - } } diff --git a/openecomp-ui/resources/scss/modules/_vspHeatSetup.scss b/openecomp-ui/resources/scss/modules/_vspHeatSetup.scss index bd216c794b..e50ad2ddd7 100644 --- a/openecomp-ui/resources/scss/modules/_vspHeatSetup.scss +++ b/openecomp-ui/resources/scss/modules/_vspHeatSetup.scss @@ -1,282 +1,278 @@ @mixin modules-and-artifacts-list-items { - background-color: $tlv-gray; - margin-bottom: 12px; - border: 1px solid $light-gray; - border-left-width: 18px; - border-left-color: $blue; - display: flex; - flex-direction: column; - justify-content: space-between; - padding: 10px 20px 0 20px; + background-color: $tlv-gray; + margin-bottom: 12px; + border: 1px solid $light-gray; + border-left-width: 18px; + border-left-color: $blue; + display: flex; + flex-direction: column; + justify-content: space-between; + padding: 10px 20px 0 20px; } .heat-setup-view { - margin-top: 20px; - display: flex; - justify-content: space-between; - padding: 0 60px 0 36px; - - .heat-setup-view-modules-and-artifacts { - margin-right: 20px; - flex: 1; - .heat-setup-module-icon { - margin: 0 6px 0 0; - position: relative; - top: -2px; - } - - .modules-list-wrapper { - &.modules-list-wrapper-divider { - border-bottom: 1px solid $tlv-light-gray; - } - - ul { - .undefined-dragging { - opacity: 0.5; - } - .modules-list-item-selectors { - display: flex; - justify-content: space-between; - flex-wrap: wrap; - padding-bottom: 3px; - .Select-value-label { - @include ellipsis(85%); - } - - .validation-input-wrapper { - flex-basis: 48%; - } - - .control-label { - margin-bottom: 4px; - } - - .form-group { - margin-bottom: 12px; - } - } - } - - .modules-list-item-controllers { - display: flex; - justify-content: space-between; - margin-bottom: 7px; - - .btn { - min-width: 0; - } - - .svg-icon { - &.__trashO { - fill: $dark-gray; - &:hover { - fill: $black; - } - } - } - - .module-title-by-type { - @extend .heading-5-semibold; - margin-right: 3px; - } - .modules-list-item-filename { - display: flex; - align-items: center; - - .svg-icon { - &.__pencil { - margin-left: 3px; - opacity: 0; - } - } - - - - .filename-text { - @extend .heading-5-semibold; - - } - - .text-and-icon { - padding: 5px; - border: 1px solid transparent; - display: flex; - align-items: center; - height: 35px; - &.in-edit { - padding: 0; - .name-edit { - padding: 4px; - @extend .heading-5-semibold; - height: 100%; - border: 1px solid $light-gray; - width: 400px; - } - } - } - - input[disabled] { - border: none; - } - &:hover { - .text-and-icon { - border-color: $light-gray; - background-color: $white; - - &.in-edit { - border-color: transparent; - } - } - .svg-icon { - &.__pencil { - margin-left: 10px; - opacity: 1; - .svg-icon { - stroke: $dark-gray; - &:hover { - stroke: $black; - } - } - } - } - } - } - } - - .modules-list-item { - @include modules-and-artifacts-list-items; - position: relative; - .Select-option { - @extend .body-1; - &.is-selected { - @extend .body-1-semibold; - background-color: $white; - } - &.is-focused { - background-color: $blue; - color: $white; - } - } - .add-or-delete-volumes { - margin-right: 8px; - margin-bottom: 11px; - } - &:before { - content: "\00B7\00B7\00B7\00B7\00B7\00B7"; - color: $white; - position: absolute; - left: -27px; - top: 56%; - font-size: 27px; - width: 75px; - @include transform-rotate(90); - height: 0; - letter-spacing: 1px; - } - } - } - - .artifact-files { - @include modules-and-artifacts-list-items; - &.with-list-items { - margin-top: 10px; - } - - &.nested { - .nested-list { - display: flex; - flex-wrap: wrap; - margin-bottom: 18px; - } - - .nested-list-item { - border-radius: 15px; - background-color: $tlv-light-gray; - padding: 4px 15px; - margin: 2px 10px 2px 0; - } - } - - .artifact-files-header { - @extend .heading-5-semibold; - display: flex; - margin-bottom: 10px; - justify-content: space-between; - .image-icon.artifacts { - margin-right: 10px; - } - - span { - display: flex; - } - - } - } - } - - .modules-list-header { - height: 30px; - display: flex; - flex-direction: row; - flex-wrap: nowrap; - justify-content: flex-end; - align-items: baseline; - } - - .unassigned-files { - border: 1px solid $light-gray; - background-color: $white; - height: 250px; - width: 250px; - - // Will work in chrome from chrome 56 - position: sticky; - top: 10px; - - .unassigned-files-title { - @extend .heading-5-semibold; - background-color: $tlv-gray; - padding: 11px 0 9px 15px; - } - - .unassigned-files-list { - height: 207px; - overflow-y: auto; - padding-bottom: 5px; - - .go-to-validation-button-wrapper { - display: flex; - flex-direction: column; - justify-content: center; - align-items: center; - margin-top: 70px; - .all-files-assigned { - @extend .heading-4; - margin-bottom: 10px; - } - .svg-icon-wrapper { - margin-bottom: 10px; - .svg-icon { - &.__angleRight { - width: 10px; - height: 10px; - } - } - } - } - - .unassigned-files-list-item { - @include ellipsis(); - border-bottom: 1px solid $tlv-light-gray; - padding: 0 5px 5px 15px; - &:first-child { - padding-top: 5px; - } - &:last-child { - border-bottom: none; - padding-bottom: 0; - } - } - } - } + margin-top: 20px; + display: flex; + justify-content: space-between; + padding: 0 60px 0 36px; + + .heat-setup-view-modules-and-artifacts { + margin-right: 20px; + flex: 1; + .heat-setup-module-icon { + margin: 0 6px 0 0; + position: relative; + top: -2px; + } + + .modules-list-wrapper { + &.modules-list-wrapper-divider { + border-bottom: 1px solid $tlv-light-gray; + } + + ul { + .undefined-dragging { + opacity: 0.5; + } + .modules-list-item-selectors { + display: flex; + justify-content: space-between; + flex-wrap: wrap; + padding-bottom: 3px; + .Select-value-label { + @include ellipsis(85%); + } + + .validation-input-wrapper { + flex-basis: 48%; + } + + .control-label { + margin-bottom: 4px; + } + + .form-group { + margin-bottom: 12px; + } + } + } + + .modules-list-item-controllers { + display: flex; + justify-content: space-between; + margin-bottom: 7px; + + .btn { + min-width: 0; + } + + .svg-icon { + &.__trashO { + fill: $dark-gray; + &:hover { + fill: $black; + } + } + } + + .module-title-by-type { + @extend .heading-5-semibold; + margin-right: 3px; + } + .modules-list-item-filename { + display: flex; + align-items: center; + + .svg-icon { + &.__pencil { + margin-left: 3px; + opacity: 0; + } + } + + .filename-text { + @extend .heading-5-semibold; + } + + .text-and-icon { + padding: 5px; + border: 1px solid transparent; + display: flex; + align-items: center; + height: 35px; + &.in-edit { + padding: 0; + .name-edit { + padding: 4px; + @extend .heading-5-semibold; + height: 100%; + border: 1px solid $light-gray; + width: 400px; + } + } + } + + input[disabled] { + border: none; + } + &:hover { + .text-and-icon { + border-color: $light-gray; + background-color: $white; + + &.in-edit { + border-color: transparent; + } + } + .svg-icon { + &.__pencil { + margin-left: 10px; + opacity: 1; + .svg-icon { + stroke: $dark-gray; + &:hover { + stroke: $black; + } + } + } + } + } + } + } + + .modules-list-item { + @include modules-and-artifacts-list-items; + position: relative; + .Select-option { + @extend .body-1; + &.is-selected { + @extend .body-1-semibold; + background-color: $white; + } + &.is-focused { + background-color: $blue; + color: $white; + } + } + .add-or-delete-volumes { + margin-right: 8px; + margin-bottom: 11px; + } + &:before { + content: '\00B7\00B7\00B7\00B7\00B7\00B7'; + color: $white; + position: absolute; + left: -27px; + top: 56%; + font-size: 27px; + width: 75px; + @include transform-rotate(90); + height: 0; + letter-spacing: 1px; + } + } + } + + .artifact-files { + @include modules-and-artifacts-list-items; + &.with-list-items { + margin-top: 10px; + } + + &.nested { + .nested-list { + display: flex; + flex-wrap: wrap; + margin-bottom: 18px; + } + + .nested-list-item { + border-radius: 15px; + background-color: $tlv-light-gray; + padding: 4px 15px; + margin: 2px 10px 2px 0; + } + } + + .artifact-files-header { + @extend .heading-5-semibold; + display: flex; + margin-bottom: 10px; + justify-content: space-between; + .image-icon.artifacts { + margin-right: 10px; + } + + span { + display: flex; + } + } + } + } + + .modules-list-header { + height: 30px; + display: flex; + flex-direction: row; + flex-wrap: nowrap; + justify-content: flex-end; + align-items: baseline; + } + + .unassigned-files { + border: 1px solid $light-gray; + background-color: $white; + height: 250px; + width: 250px; + + // Will work in chrome from chrome 56 + position: sticky; + top: 10px; + + .unassigned-files-title { + @extend .heading-5-semibold; + background-color: $tlv-gray; + padding: 11px 0 9px 15px; + } + + .unassigned-files-list { + height: 207px; + overflow-y: auto; + padding-bottom: 5px; + + .go-to-validation-button-wrapper { + display: flex; + flex-direction: column; + justify-content: center; + align-items: center; + margin-top: 70px; + .all-files-assigned { + @extend .heading-4; + margin-bottom: 10px; + } + .svg-icon-wrapper { + margin-bottom: 10px; + .svg-icon { + &.__angleRight { + width: 10px; + height: 10px; + } + } + } + } + + .unassigned-files-list-item { + @include ellipsis(); + border-bottom: 1px solid $tlv-light-gray; + padding: 0 5px 5px 15px; + &:first-child { + padding-top: 5px; + } + &:last-child { + border-bottom: none; + padding-bottom: 0; + } + } + } + } } diff --git a/openecomp-ui/resources/scss/modules/_workflows.scss b/openecomp-ui/resources/scss/modules/_workflows.scss index 894b6e7973..c7ce4521f5 100644 --- a/openecomp-ui/resources/scss/modules/_workflows.scss +++ b/openecomp-ui/resources/scss/modules/_workflows.scss @@ -1,27 +1,19 @@ - .workflows { - position: absolute; - bottom: 0; - right: 0; - left: 0; - top: 0; - - background-color: $background-gray; - .list-editor-view-list .list-editor-item-view .list-editor-item-view-content .list-editor-item-view-field:last-child { - flex: 2 1; - } + position: absolute; + bottom: 0; + right: 0; + left: 0; + top: 0; - .list-editor-view { - padding: 30px 50px; - } - -} + background-color: $background-gray; + .list-editor-view-list + .list-editor-item-view + .list-editor-item-view-content + .list-editor-item-view-field:last-child { + flex: 2 1; + } -.workflows-editor-modal { - .modal-body { - padding: 0; - } - .validation-form-content { - padding: 15px; - } + .list-editor-view { + padding: 30px 50px; + } } diff --git a/openecomp-ui/resources/scss/modules/onboardingCatalog/_catalogFilter.scss b/openecomp-ui/resources/scss/modules/onboardingCatalog/_catalogFilter.scss index e3fc6a9143..1b6459a429 100644 --- a/openecomp-ui/resources/scss/modules/onboardingCatalog/_catalogFilter.scss +++ b/openecomp-ui/resources/scss/modules/onboardingCatalog/_catalogFilter.scss @@ -13,7 +13,7 @@ height: 34px; color: $blue; font-weight: bolder; - text-transform: uppercase; + text-transform: uppercase; } .sdc-accordion { padding-left: 18px; diff --git a/openecomp-ui/resources/scss/modules/onboardingCatalog/_catalogHeader.scss b/openecomp-ui/resources/scss/modules/onboardingCatalog/_catalogHeader.scss index 0a234a5a96..429d6cc3d3 100644 --- a/openecomp-ui/resources/scss/modules/onboardingCatalog/_catalogHeader.scss +++ b/openecomp-ui/resources/scss/modules/onboardingCatalog/_catalogHeader.scss @@ -1,33 +1,33 @@ .catalog-header { - margin: 34px 0 29px 50px; - display: flex; - flex-direction: row; - .expandable-input-top { - margin-right: 60px; - } - &.workspace-header { - @extend .heading-1; - color: $blue; - } - .catalog-header-tabs { - display: flex; - flex-direction: row; - .tab-separator { - position: relative; - top: 8px; - } - .catalog-header-tab { - @extend .heading-1; - cursor: pointer; - padding: 0 15px 0 15px; - display: flex; - align-items: center; - &.active { - color: $blue; - } - &:first-child { - padding-left: 0; - } - } - } + margin: 34px 0 29px 50px; + display: flex; + flex-direction: row; + .expandable-input-top { + margin-right: 60px; + } + &.workspace-header { + @extend .heading-1; + color: $blue; + } + .catalog-header-tabs { + display: flex; + flex-direction: row; + .tab-separator { + position: relative; + top: 8px; + } + .catalog-header-tab { + @extend .heading-1; + cursor: pointer; + padding: 0 15px 0 15px; + display: flex; + align-items: center; + &.active { + color: $blue; + } + &:first-child { + padding-left: 0; + } + } + } } diff --git a/openecomp-ui/resources/scss/modules/onboardingCatalog/_catalogList.scss b/openecomp-ui/resources/scss/modules/onboardingCatalog/_catalogList.scss index 11a739d004..c632beb382 100644 --- a/openecomp-ui/resources/scss/modules/onboardingCatalog/_catalogList.scss +++ b/openecomp-ui/resources/scss/modules/onboardingCatalog/_catalogList.scss @@ -1,39 +1,37 @@ .catalog-list { - height: 100%; - overflow: auto; - display: flex; - flex-direction: column; - padding: 0 10px 0 42px; - .catalog-title { - @extend .heading-1; - color: $blue; - margin:0 0 12px 18px; - } + height: 100%; + overflow: auto; + display: flex; + flex-direction: column; + padding: 0 10px 0 42px; + .catalog-title { + @extend .heading-1; + color: $blue; + margin: 0 0 12px 18px; + } - .catalog-items { - display: flex; - flex-wrap: wrap; - @import "tile"; - @import "createItemTile"; - @import "catalogTile"; - @import "vendorTile"; - @import "vlmTile"; - &:after { - content: " "; - height: 250px; - display: block; - width: 100%; - } - .venodor-tile-btn { - border: 1px solid $light-gray; - color: $black; - line-height: 20px; - &:hover { - background-color: $light-gray; - } - } - } - - // Bottom spacing - cross browser solution + .catalog-items { + display: flex; + flex-wrap: wrap; + @import 'tile'; + @import 'createItemTile'; + @import 'catalogTile'; + @import 'vendorTile'; + &:after { + content: ' '; + height: 250px; + display: block; + width: 100%; + } + .venodor-tile-btn { + border: 1px solid $light-gray; + color: $black; + line-height: 20px; + &:hover { + background-color: $light-gray; + } + } + } + // Bottom spacing - cross browser solution } diff --git a/openecomp-ui/resources/scss/modules/onboardingCatalog/_catalogTile.scss b/openecomp-ui/resources/scss/modules/onboardingCatalog/_catalogTile.scss index 612ec495cd..a2c7997266 100644 --- a/openecomp-ui/resources/scss/modules/onboardingCatalog/_catalogTile.scss +++ b/openecomp-ui/resources/scss/modules/onboardingCatalog/_catalogTile.scss @@ -1,147 +1,144 @@ .catalog-tile { - &:hover { - box-shadow: 0.3px 5px 12.8px 1.3px rgba(24, 24, 25, 0.15); - border: 1px solid $light-gray; - } - .catalog-tile-top { - position: relative; - flex: 1; - display: flex; - padding-top: 29px; - padding-left: 10px; - align-items: flex-start; - flex-direction: column; - .catalog-tile-content { - margin-top: auto; - width: 180px; - } - - .catalog-tile-type { - display: block; - margin-top: -25px; - font-size: $heading-font-5; - &.license-model-type { - color: $purple; - } - &.software-product-type { - color: $blue; - } - } - .catalog-tile-entity-details { - margin-top: 20px; - display: flex; - flex-direction: column; - justify-content: space-between; - flex: 0.8; - .catalog-tile-version-info { - display: flex; - justify-content: space-between; - - .catalog-tile-item-version { - @extend .body-2; - line-height: 6px; - } - } - .catalog-tile-vendor-name { - @extend .body-3; - flex: 0.4; - align-self: baseline; - color: $gray; - line-height: 10px; - &:first-letter { - text-transform: capitalize; + &:hover { + box-shadow: 0.3px 5px 12.8px 1.3px rgba(24, 24, 25, 0.15); + border: 1px solid $light-gray; } - @include ellipsis(auto, inline-block, 178px); - } - - } - .catalog-tile-item-name { - @extend .heading-5-semibold; - color: $black; - @include ellipsis(auto, inline-block, 175px); - line-height: inherit; - &:first-letter { - text-transform: capitalize; - } - } - } - .catalog-tile-icon { + .catalog-tile-top { + position: relative; + flex: 1; + display: flex; + padding-top: 29px; + padding-left: 10px; + align-items: flex-start; + flex-direction: column; + .catalog-tile-content { + margin-top: auto; + width: 180px; + } - width: 58px; - height: 58px; - text-align: center; - justify-content: center; - display: flex; + .catalog-tile-type { + display: block; + margin-top: -25px; + font-size: $heading-font-5; + &.license-model-type { + color: $purple; + } + &.software-product-type { + color: $blue; + } + } + .catalog-tile-entity-details { + margin-top: 20px; + display: flex; + flex-direction: column; + justify-content: space-between; + flex: 0.8; + .catalog-tile-version-info { + display: flex; + justify-content: space-between; - .icon { - align-self: center; - height: 58px; - width: 58px; - margin-left: 122px; - background-repeat: no-repeat; - .svg-icon { - &.__vendor { - fill: $dark-gray; - &:hover { - fill: $dark-gray; - } - margin-top: 22px; - } - &.__vsp { - fill: $light-blue; - } - margin-top: 18px; - margin-left: 3px; - &.__vlm { - margin-top: 18px; - fill: $purple; - } - } - } - } - .catalog-tile-content { - border-top: 1px solid $background-gray; - padding-top: 5px; - display: flex; - justify-content: space-between; - margin-top: 2px; - padding-bottom: 3px; - @extend .body-2-semibold; - .svg-icon { - &.__plus { - width: 20px; - height: 20px; - fill: $blue; - } - } - .catalog-tile-item-details { - overflow: hidden; - } + .catalog-tile-item-version { + @extend .body-2; + line-height: 6px; + } + } + .catalog-tile-vendor-name { + @extend .body-3; + flex: 0.4; + align-self: baseline; + color: $gray; + line-height: 10px; + &:first-letter { + text-transform: capitalize; + } + @include ellipsis(auto, inline-block, 178px); + } + } + .catalog-tile-item-name { + @extend .heading-5-semibold; + color: $black; + @include ellipsis(auto, inline-block, 175px); + line-height: inherit; + &:first-letter { + text-transform: capitalize; + } + } + } + .catalog-tile-icon { + width: 58px; + height: 58px; + text-align: center; + justify-content: center; + display: flex; - .catalog-tile-add-new-vsp { - color: $blue; - .svg-icon { - &.__plus { - width: 20px; - height: 20px; + .icon { + align-self: center; + height: 58px; + width: 58px; + margin-left: 122px; + background-repeat: no-repeat; + .svg-icon { + &.__vendor { + fill: $dark-gray; + &:hover { + fill: $dark-gray; + } + margin-top: 22px; + } + &.__vsp { + fill: $light-blue; + } + margin-top: 18px; + margin-left: 3px; + &.__vlm { + margin-top: 18px; + fill: $purple; + } + } + } + } + .catalog-tile-content { + border-top: 1px solid $background-gray; + padding-top: 5px; + display: flex; + justify-content: space-between; + margin-top: 2px; + padding-bottom: 3px; + @extend .body-2-semibold; + .svg-icon { + &.__plus { + width: 20px; + height: 20px; + fill: $blue; + } + } + .catalog-tile-item-details { + overflow: hidden; + } - } - } - margin-left: 40px; - } - .catalog-tile-locking-user-name { - @extend .body-2; - @include ellipsis(auto, inline-block, 180px); - } - .catalog-tile-check-in-status { - .svg-icon { - &.__locked { - fill: $gray; - } - &.__unlocked { - fill: $gray; - } - } - } - } + .catalog-tile-add-new-vsp { + color: $blue; + .svg-icon { + &.__plus { + width: 20px; + height: 20px; + } + } + margin-left: 40px; + } + .catalog-tile-locking-user-name { + @extend .body-2; + @include ellipsis(auto, inline-block, 180px); + } + .catalog-tile-check-in-status { + .svg-icon { + &.__locked { + fill: $gray; + } + &.__unlocked { + fill: $gray; + } + } + } + } } diff --git a/openecomp-ui/resources/scss/modules/onboardingCatalog/_createItemTile.scss b/openecomp-ui/resources/scss/modules/onboardingCatalog/_createItemTile.scss index d17dcdd685..9838e65b10 100644 --- a/openecomp-ui/resources/scss/modules/onboardingCatalog/_createItemTile.scss +++ b/openecomp-ui/resources/scss/modules/onboardingCatalog/_createItemTile.scss @@ -1,73 +1,77 @@ .create-catalog-item-wrapper { - width: 204px; - height: 200px; - display: flex; - flex-direction: column; - margin: 9px; + width: 204px; + height: 200px; + display: flex; + flex-direction: column; + margin: 9px; - .tile.create-catalog-item { - margin: 9px 0 9px 0; - display: flex; - background-color: $white; - &:first-child{margin-top: 0;} - &:last-child{margin-bottom: 0;} - flex-direction: row; - align-items: center; - justify-content: center; - &.disabled { - color: $gray; - .create-item-plus-icon { - fill: $gray; - } - } - &:hover { - box-shadow: 0.3px 5px 12.8px 1.3px rgba(24, 24, 25, 0.15); + .tile.create-catalog-item { + margin: 9px 0 9px 0; + display: flex; + background-color: $white; + &:first-child { + margin-top: 0; + } + &:last-child { + margin-bottom: 0; + } + flex-direction: row; + align-items: center; + justify-content: center; + &.disabled { + color: $gray; + .create-item-plus-icon { + fill: $gray; + } + } + &:hover { + box-shadow: 0.3px 5px 12.8px 1.3px rgba(24, 24, 25, 0.15); - border: 1px solid $light-gray; - } - &:only-child { - text-align: center; - flex-direction: column; - justify-content: center; - .create-item-plus-icon { - margin: 0 0 15px 0; - } - .create-item-text { - @extend .heading-4-semibold; - } - } - .create-item-plus-icon{ - margin: -5px 12px 0 0; - height: 19px; - width: 19px; - .svg-icon { - &.__plus { - width: 19px; - height: 19px; - } - } - } - &.vlm-type { - .create-item-text { - color: $purple; - } + border: 1px solid $light-gray; + } + &:only-child { + text-align: center; + flex-direction: column; + justify-content: center; + .create-item-plus-icon { + margin: 0 0 15px 0; + } + .create-item-text { + @extend .heading-4-semibold; + } + } + .create-item-plus-icon { + margin: -5px 12px 0 0; + height: 19px; + width: 19px; + .svg-icon { + &.__plus { + width: 19px; + height: 19px; + } + } + } + &.vlm-type { + .create-item-text { + color: $purple; + } - .create-item-plus-icon { - fill: $purple; - } - } - &.vsp-type { - .create-item-text { - color: $blue; - } + .create-item-plus-icon { + fill: $purple; + } + } + &.vsp-type { + .create-item-text { + color: $blue; + } - .create-item-plus-icon { - fill: $blue; - } - } - .create-item-text { - width: 140px; - @extend .heading-5-semibold; - } - } + .create-item-plus-icon { + fill: $blue; + } + } + .create-item-text { + width: 140px; + @extend .heading-5-semibold; + } + } } diff --git a/openecomp-ui/resources/scss/modules/onboardingCatalog/_onboardHeader.scss b/openecomp-ui/resources/scss/modules/onboardingCatalog/_onboardHeader.scss index f97641cbe3..5f8446b9ff 100644 --- a/openecomp-ui/resources/scss/modules/onboardingCatalog/_onboardHeader.scss +++ b/openecomp-ui/resources/scss/modules/onboardingCatalog/_onboardHeader.scss @@ -1,32 +1,32 @@ .onboard-header { - padding-top: 8px; - display: flex; - flex-direction: row; - justify-content: flex-end; - background-color: $tlv-light-gray; - margin-bottom: 2px; - padding-left: 60px; - padding-right: 40px; - @include box-shadow(0px 1px 3px 0 rgba(0, 0, 0, 0.2)); - .expandable-input-top { - margin-right: 20px; - margin-left: auto; - } - .onboard-header-tabs { - display: flex; - flex-direction: row; - .onboard-header-tab { - @extend .body-1-semibold; - margin-right: 40px; - cursor: pointer; - display: flex; - padding-bottom: 5px; - align-items: flex-end; - &.active { - color: $blue; - padding-bottom: 2px; - border-bottom: 3px solid $blue; - } - } - } + padding-top: 8px; + display: flex; + flex-direction: row; + justify-content: flex-end; + background-color: $tlv-light-gray; + margin-bottom: 2px; + padding-left: 60px; + padding-right: 40px; + @include box-shadow(0px 1px 3px 0 rgba(0, 0, 0, 0.2)); + .expandable-input-top { + margin-right: 20px; + margin-left: auto; + } + .onboard-header-tabs { + display: flex; + flex-direction: row; + .onboard-header-tab { + @extend .body-1-semibold; + margin-right: 40px; + cursor: pointer; + display: flex; + padding-bottom: 5px; + align-items: flex-end; + &.active { + color: $blue; + padding-bottom: 2px; + border-bottom: 3px solid $blue; + } + } + } } diff --git a/openecomp-ui/resources/scss/modules/onboardingCatalog/_tile.scss b/openecomp-ui/resources/scss/modules/onboardingCatalog/_tile.scss index 217098fb97..fa513fb44d 100644 --- a/openecomp-ui/resources/scss/modules/onboardingCatalog/_tile.scss +++ b/openecomp-ui/resources/scss/modules/onboardingCatalog/_tile.scss @@ -1,14 +1,14 @@ .tile { - background-color: $white; - margin: 9px; - width: 204px; - height: 200px; - display: flex; - flex-direction: column; - cursor: pointer; - border: 1px solid $tlv-light-gray; - @include box-shadow(0.5px 0.8px 4px 0 rgba(24, 24, 25, 0.05)); - &:active { - border: 1px solid $light-blue; - } + background-color: $white; + margin: 9px; + width: 204px; + height: 200px; + display: flex; + flex-direction: column; + cursor: pointer; + border: 1px solid $tlv-light-gray; + @include box-shadow(0.5px 0.8px 4px 0 rgba(24, 24, 25, 0.05)); + &:active { + border: 1px solid $light-blue; + } } diff --git a/openecomp-ui/resources/scss/modules/onboardingCatalog/_vendorPageHeader.scss b/openecomp-ui/resources/scss/modules/onboardingCatalog/_vendorPageHeader.scss index f1af28a0a0..a741764727 100644 --- a/openecomp-ui/resources/scss/modules/onboardingCatalog/_vendorPageHeader.scss +++ b/openecomp-ui/resources/scss/modules/onboardingCatalog/_vendorPageHeader.scss @@ -1,21 +1,21 @@ .vendor-page-header { - display: flex; - align-items: center; - margin-top: 34px; - margin-left: 9px; - margin-bottom: 29px; - .vendor-name { - @extend .heading-1; - color: $blue; - margin-left: 20px; - text-transform: uppercase; - } - .svg-icon-wrapper { - padding: 5px 18px 5px 0; - .svg-icon.back { - height: 25px; - width: 25px; - fill: $blue; - } - } + display: flex; + align-items: center; + margin-top: 34px; + margin-left: 9px; + margin-bottom: 29px; + .vendor-name { + @extend .heading-1; + color: $blue; + margin-left: 20px; + text-transform: uppercase; + } + .svg-icon-wrapper { + padding: 5px 18px 5px 0; + .svg-icon.back { + height: 25px; + width: 25px; + fill: $blue; + } + } } diff --git a/openecomp-ui/resources/scss/modules/onboardingCatalog/_vendorTile.scss b/openecomp-ui/resources/scss/modules/onboardingCatalog/_vendorTile.scss index d490fd6e1c..63fb236ec3 100644 --- a/openecomp-ui/resources/scss/modules/onboardingCatalog/_vendorTile.scss +++ b/openecomp-ui/resources/scss/modules/onboardingCatalog/_vendorTile.scss @@ -1,91 +1,91 @@ @mixin flipOverlayDirection($itemsInRow) { - &:nth-child(#{$itemsInRow}n) { - .vsp-overlay-wrapper { - right: 74%; - left: inherit; - .vsp-overlay-arrow { - border-right-color: transparent; - border-left-color: $tlv-light-gray; - border-right-width: 2px; - border-left-width: 6px; - left: 100%; - &:after { - border-left-color: $white; - border-right-color: transparent; - left: -11px; - } - } - } - } + &:nth-child(#{$itemsInRow}n) { + .vsp-overlay-wrapper { + right: 74%; + left: inherit; + .vsp-overlay-arrow { + border-right-color: transparent; + border-left-color: $tlv-light-gray; + border-right-width: 2px; + border-left-width: 6px; + left: 100%; + &:after { + border-left-color: $white; + border-right-color: transparent; + left: -11px; + } + } + } + } } .catalog-tile.vendor-type { - position: relative; - .catalog-tile-top { - .catalog-tile-item-name { - margin-top: 21px; - line-height: inherit; - &:first-letter { - text-transform: capitalize; - } - } - .catalog-tile-vsp-count { - @extend .body-3-semibold; - margin-top: 8px; - margin-left: 54px; - margin-bottom: 9px; - color: $dark-gray; - border: 1px solid $dark-gray; - padding: 0 15px 0 15px; - border-radius: 15px; + position: relative; + .catalog-tile-top { + .catalog-tile-item-name { + margin-top: 21px; + line-height: inherit; + &:first-letter { + text-transform: capitalize; + } + } + .catalog-tile-vsp-count { + @extend .body-3-semibold; + margin-top: 8px; + margin-left: 54px; + margin-bottom: 9px; + color: $dark-gray; + border: 1px solid $dark-gray; + padding: 0 15px 0 15px; + border-radius: 15px; - &.clickable { - &:hover { - background-color: #eceff3; - color: $dark-gray; - } - } - &.active { - background-color: $white; - color: $dark-gray; - } - } - } + &.clickable { + &:hover { + background-color: #eceff3; + color: $dark-gray; + } + } + &.active { + background-color: $white; + color: $dark-gray; + } + } + } - .catalog-tile-content { - flex-basis: auto; - max-height: 31px; - height: 31px; - text-align: center; - color: $blue; - display: block; - background-color: $white; - margin-bottom: 7px; - padding-bottom: 0px; - .create-new-vsp-button { - margin-top: 1px; - } - &:hover { - color: $dark-blue; - .svg-icon.plus { - fill: $dark-blue; - } - } - &.disabled { - cursor: default; - } - } - @media (min-width: 1900px) { - @include flipOverlayDirection($itemsInRow: 8); - } - @media (min-width: 1586px) and (max-width: 1899px) { - @include flipOverlayDirection($itemsInRow: 7); - } - @media (min-width: 1368px) and (max-width: 1585px) { - @include flipOverlayDirection($itemsInRow: 6); - } - @media (max-width: 1367px) { - @include flipOverlayDirection($itemsInRow: 5); - } - @import "vspOverlay"; + .catalog-tile-content { + flex-basis: auto; + max-height: 31px; + height: 31px; + text-align: center; + color: $blue; + display: block; + background-color: $white; + margin-bottom: 7px; + padding-bottom: 0px; + .create-new-vsp-button { + margin-top: 1px; + } + &:hover { + color: $dark-blue; + .svg-icon.plus { + fill: $dark-blue; + } + } + &.disabled { + cursor: default; + } + } + @media (min-width: 1900px) { + @include flipOverlayDirection($itemsInRow: 8); + } + @media (min-width: 1586px) and (max-width: 1899px) { + @include flipOverlayDirection($itemsInRow: 7); + } + @media (min-width: 1368px) and (max-width: 1585px) { + @include flipOverlayDirection($itemsInRow: 6); + } + @media (max-width: 1367px) { + @include flipOverlayDirection($itemsInRow: 5); + } + @import 'vspOverlay'; } diff --git a/openecomp-ui/resources/scss/modules/onboardingCatalog/_vlmTile.scss b/openecomp-ui/resources/scss/modules/onboardingCatalog/_vlmTile.scss deleted file mode 100644 index 721a4f3f22..0000000000 --- a/openecomp-ui/resources/scss/modules/onboardingCatalog/_vlmTile.scss +++ /dev/null @@ -1,8 +0,0 @@ -.catalog-tile.license-model-type { - .catalog-tile-top { - &:hover { - //background-color: $purple; - //color: $white; - } - } -} diff --git a/openecomp-ui/resources/scss/modules/onboardingCatalog/_vspOverlay.scss b/openecomp-ui/resources/scss/modules/onboardingCatalog/_vspOverlay.scss index e0b72bf9ff..e2617b8b04 100644 --- a/openecomp-ui/resources/scss/modules/onboardingCatalog/_vspOverlay.scss +++ b/openecomp-ui/resources/scss/modules/onboardingCatalog/_vspOverlay.scss @@ -1,74 +1,73 @@ -.vsp-overlay-wrapper{ - display:flex; - align-items: center; - position:absolute; - left: 68%; - top: 14%; - height: 100%; - pointer-events: none; - z-index: 100; - .vsp-overlay-list { - padding: 0 20px; - } - .vsp-overlay-arrow { - border-style: solid; - position: relative; - bottom: -18px; - border-width: 6px; - border-left-width: 2px; - border-color: transparent; - border-right-color: $light-gray; - &:after { - position: absolute; - border-style: solid; - bottom: -10px; - left: -9px; - border-width: 10px; - border-color: transparent; - border-right-color: $white; - content:' '; - } - } - .vsp-overlay { - pointer-events: all; - width: 205px; - cursor: default; - background-color: $white; - @include box-shadow(0px 2px 9.2px 0.8px rgba(24, 24, 25, 0.25)); - border-radius: 6px; - padding: 0 0 10px 0; - display: flex; - flex-direction: column; - margin: 10px 0 10px 0; - .vsp-overlay-title { - @extend .heading-5-semibold; - margin-bottom: 15px; - padding: 10px 20px 10px 20px; - background: $highlight-gray; - color: $text-black; - text-transform: uppercase; - border-radius: 6px 6px 0 0; - } - .vsp-overlay-detail{ - @extend .body-2; - &:hover { - color: $blue; - } - text-transform: none; - @include ellipsis(auto, block); - border-bottom: 1px solid $tlv-light-gray; - cursor: pointer; - padding: 5px 0 5px 0; - &:last-child { - border-bottom: none; - } - } - .vsp-overlay-see-more{ - color: $blue; - cursor: pointer; - margin-top: 12px; - align-self:center; - } - - } +.vsp-overlay-wrapper { + display: flex; + align-items: center; + position: absolute; + left: 68%; + top: 14%; + height: 100%; + pointer-events: none; + z-index: 100; + .vsp-overlay-list { + padding: 0 20px; + } + .vsp-overlay-arrow { + border-style: solid; + position: relative; + bottom: -18px; + border-width: 6px; + border-left-width: 2px; + border-color: transparent; + border-right-color: $light-gray; + &:after { + position: absolute; + border-style: solid; + bottom: -10px; + left: -9px; + border-width: 10px; + border-color: transparent; + border-right-color: $white; + content: ' '; + } + } + .vsp-overlay { + pointer-events: all; + width: 205px; + cursor: default; + background-color: $white; + @include box-shadow(0px 2px 9.2px 0.8px rgba(24, 24, 25, 0.25)); + border-radius: 6px; + padding: 0 0 10px 0; + display: flex; + flex-direction: column; + margin: 10px 0 10px 0; + .vsp-overlay-title { + @extend .heading-5-semibold; + margin-bottom: 15px; + padding: 10px 20px 10px 20px; + background: $highlight-gray; + color: $text-black; + text-transform: uppercase; + border-radius: 6px 6px 0 0; + } + .vsp-overlay-detail { + @extend .body-2; + &:hover { + color: $blue; + } + text-transform: none; + @include ellipsis(auto, block); + border-bottom: 1px solid $tlv-light-gray; + cursor: pointer; + padding: 5px 0 5px 0; + &:last-child { + border-bottom: none; + } + } + .vsp-overlay-see-more { + color: $blue; + cursor: pointer; + margin-top: 12px; + align-self: center; + } + } } diff --git a/openecomp-ui/resources/scss/onboarding.scss b/openecomp-ui/resources/scss/onboarding.scss index c38809cd07..da0c8b704f 100644 --- a/openecomp-ui/resources/scss/onboarding.scss +++ b/openecomp-ui/resources/scss/onboarding.scss @@ -1,234 +1,157 @@ -.dox-ui { - @import "bootstrap"; - @import "~react-select/dist/react-select.min.css"; - @import "~react-datepicker/dist/react-datepicker.min.css"; - - @import "common"; - @import "components"; - @import "modules"; - - &.dox-ui-punch-out { - background-color: $content-background-color; - &.dox-ui-punch-out-full-page { - position: absolute; - top: 0; - bottom: 0; - left: 0; - right: 0; - overflow-y: auto; - } - } -} - -/* Out of namespace context for datepicker */ -div[data-reactroot].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; - } - .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; +.dox-ui, +.onap-sdc-portal { + @import 'bootstrap'; + @import '~react-select/dist/react-select.min.css'; + @import '~react-datepicker/dist/react-datepicker.min.css'; + + @import 'common'; + @import 'components'; + @import 'modules'; + + .sdc-alert__header, + .sdc-error__header, + .sdc-info__header { + box-sizing: content-box; + } + &.dox-ui-punch-out { + background-color: $content-background-color; + &.dox-ui-punch-out-full-page { + position: absolute; + top: 0; + bottom: 0; + left: 0; + right: 0; + overflow-y: auto; + } } - } } /* Out of namespace context for tooltips */ -div[data-reactroot].tooltip { - @import "common/variables"; - @import "common/typography"; - - &.in { - opacity: 1; - } - &.validation-error-message { +div[data-onboardingroot].tooltip { + @import 'common/variables'; + @import 'common/typography'; + + &.in { + opacity: 1; + } + &.validation-error-message { + &.bottom { + .tooltip-arrow { + border-bottom-color: $red !important; + } + } + &.left { + .tooltip-arrow { + border-left-color: $red !important; + } + } + &.right { + .tooltip-arrow { + border-right-color: $red !important; + } + } + &.top { + .tooltip-arrow { + border-top-color: $red !important; + } + } + } &.bottom { - .tooltip-arrow { - border-bottom-color: $red !important; - } + .tooltip-arrow { + border-bottom-color: $dark-gray !important; + } } - &.left { - .tooltip-arrow { - border-left-color: $red !important; - } + &.top { + .tooltip-arrow { + border-top-color: $dark-gray !important; + } } &.right { - .tooltip-arrow { - border-right-color: $red !important; - } + .tooltip-arrow { + border-right-color: $dark-gray !important; + } } - &.top { - .tooltip-arrow { - border-top-color: $red !important; - } - } - } - &.bottom { - .tooltip-arrow { - border-bottom-color: $dark-gray !important; - } - } - &.top { - .tooltip-arrow { - border-top-color: $dark-gray !important; - } - } - &.right { - .tooltip-arrow { - border-right-color: $dark-gray !important; - } - } - &.left { - .tooltip-arrow { - border-left-color: $dark-gray !important; - } - } - .tooltip-inner { - @extend .body-1; - max-width: 100%; - background-color: $dark-gray; - padding: 6px 9px; - &:first-letter { - text-transform: capitalize; - } - } - - // activity log tooltip - &.activity-log-message-tooltip { - @include base-font-regular; - font-size: $body-font-2; - .message-block { - text-align: left; - padding: 3px 12px; - } - } - // manage permisions modal - &.manage-permissions-owner-tooltip { - .tooltip-inner { - width: 400px; + &.left { + .tooltip-arrow { + border-left-color: $dark-gray !important; + } } - } - // WS/Catalog Tile - &.tile-super-info { .tooltip-inner { - font-size: $body-font-3; - } - } - //dependency table error tooltip - &.select-action-table-error-tooltip{ - @include base-font-regular; - margin-right: 5px; - font-size: $body-font-2; - .message-block { - text-align: left; - padding: 3px 12px; - } - .tooltip-arrow { - border-bottom-color: $red !important; - } - - .tooltip-inner { - background-color: $red; - padding: 6px 8px; - font-size: $body-font-2; - } - } - - // for read-only mode, vendor description in VLM overview - &.vendor-description-tooltip { - .tooltip-inner { - max-width: 600px; + @extend .body-1; + max-width: 100%; + background-color: $dark-gray; + padding: 6px 9px; + &:first-letter { + text-transform: capitalize; + } + } + + // activity log tooltip + &.activity-log-message-tooltip { + @include base-font-regular; + font-size: $body-font-2; + .message-block { + text-align: left; + padding: 3px 12px; + } + } + // manage permisions modal + &.manage-permissions-owner-tooltip { + .tooltip-inner { + width: 400px; + } + } + // WS/Catalog Tile + &.tile-super-info { + .tooltip-inner { + font-size: $body-font-3; + } + } + //dependency table error tooltip + &.select-action-table-error-tooltip { + @include base-font-regular; + margin-right: 5px; + font-size: $body-font-2; + .message-block { + text-align: left; + padding: 3px 12px; + } + .tooltip-arrow { + border-bottom-color: $red !important; + } + + .tooltip-inner { + background-color: $red; + padding: 6px 8px; + font-size: $body-font-2; + } + } + + // for read-only mode, vendor description in VLM overview + &.vendor-description-tooltip { + .tooltip-inner { + max-width: 600px; + } } - } } /* Out of namespace context for notifications */ .onboarding-notifications-container { - position: absolute; - &.position-top-right { - right: 30px; - top: 50px; - } + position: absolute; + &.position-top-right { + right: 30px; + top: 50px; + } } - .onboarding-loader { - .onboarding-loader-backdrop { - @import "common/variables"; - top: 0; - right: 0; - bottom: 0; - left: 0; - position: absolute; - background-color: $transparent-black; - } + .onboarding-loader-backdrop { + @import 'common/variables'; + top: 0; + right: 0; + bottom: 0; + left: 0; + position: absolute; + background-color: $transparent-black; + } } diff --git a/openecomp-ui/resources/scss/style.scss b/openecomp-ui/resources/scss/style.scss index ac020219ad..ba22cf6bd8 100644 --- a/openecomp-ui/resources/scss/style.scss +++ b/openecomp-ui/resources/scss/style.scss @@ -1,3 +1,3 @@ -@import "common"; -@import "components"; -@import "modules"; +@import 'common'; +@import 'components'; +@import 'modules'; |