From 280f8015d06af1f41a3ef12e8300801c7a5e0d54 Mon Sep 17 00:00:00 2001 From: AviZi Date: Fri, 9 Jun 2017 02:39:56 +0300 Subject: [SDC-29] Amdocs OnBoard 1707 initial commit. Change-Id: Ie4d12a3f574008b792899b368a0902a8b46b5370 Signed-off-by: AviZi --- openecomp-ui/resources/scss/_components.scss | 34 +- openecomp-ui/resources/scss/_modules.scss | 10 +- .../resources/scss/bootstrap-cust/_forms.scss | 3 +- .../resources/scss/bootstrap-cust/_modals.scss | 7 +- .../resources/scss/bootstrap-cust/_variables.scss | 5 + openecomp-ui/resources/scss/common/_base.scss | 8 + openecomp-ui/resources/scss/common/_layout.scss | 7 + .../resources/scss/common/_typography.scss | 84 ++-- openecomp-ui/resources/scss/common/_utils.scss | 189 ++++---- openecomp-ui/resources/scss/common/_variables.scss | 66 ++- .../resources/scss/components/_activityLog.scss | 104 +++++ .../resources/scss/components/_buttons.scss | 15 - .../resources/scss/components/_dualListBox.scss | 10 +- .../scss/components/_expandableInput.scss | 108 +++-- openecomp-ui/resources/scss/components/_forms.scss | 49 +- openecomp-ui/resources/scss/components/_grid.scss | 64 +++ openecomp-ui/resources/scss/components/_icon.scss | 164 +++++++ .../resources/scss/components/_inputOptions.scss | 48 +- .../resources/scss/components/_listEditorView.scss | 145 +++--- .../scss/components/_navigationSideBar.scss | 6 +- .../scss/components/_selectActionTable.scss | 152 +++++++ .../resources/scss/components/_slidePanel.scss | 35 -- .../scss/components/_submitErrorResponse.scss | 37 ++ .../resources/scss/components/_svgIcon.scss | 51 +++ .../resources/scss/components/_validationForm.scss | 24 +- .../scss/components/_versionController.scss | 196 ++++---- .../resources/scss/modules/_entitlementPools.scss | 30 +- .../resources/scss/modules/_featureGroup.scss | 15 - .../resources/scss/modules/_licenseAgreement.scss | 30 -- .../resources/scss/modules/_licenseKeyGroup.scss | 16 - .../scss/modules/_licenseModelOverview.scss | 491 +++++++++++++++++++++ .../resources/scss/modules/_onboardingCatalog.scss | 180 +------- .../modules/_softwareProductAttachmentPage.scss | 284 +++++++----- .../modules/_softwareProductComponentCompute.scss | 3 + .../modules/_softwareProductComponentGeneral.scss | 3 + .../modules/_softwareProductComponentNetwork.scss | 49 +- .../_softwareProductComponentProcessesPage.scss | 8 + .../scss/modules/_softwareProductDependencies.scss | 25 ++ .../scss/modules/_softwareProductLandingPage.scss | 95 ++-- .../scss/modules/_softwareProductNetworksPage.scss | 24 - .../modules/_softwareProductProcessesPage.scss | 11 +- .../_softwareproductComponentLoadBalancing.scss | 22 +- .../scss/modules/_vspComponentQuestionnaire.scss | 7 +- .../resources/scss/modules/_vspHeatSetup.scss | 316 +++++++++++++ .../modules/onboardingCatalog/_catalogHeader.scss | 33 ++ .../modules/onboardingCatalog/_catalogList.scss | 31 ++ .../modules/onboardingCatalog/_catalogTile.scss | 139 ++++++ .../modules/onboardingCatalog/_createItemTile.scss | 71 +++ .../modules/onboardingCatalog/_onboardHeader.scss | 31 ++ .../scss/modules/onboardingCatalog/_tile.scss | 14 + .../onboardingCatalog/_vendorPageHeader.scss | 21 + .../modules/onboardingCatalog/_vendorTile.scss | 88 ++++ .../scss/modules/onboardingCatalog/_vlmTile.scss | 8 + .../modules/onboardingCatalog/_vspOverlay.scss | 74 ++++ openecomp-ui/resources/scss/onboarding.scss | 70 ++- 55 files changed, 2950 insertions(+), 860 deletions(-) create mode 100644 openecomp-ui/resources/scss/components/_activityLog.scss create mode 100644 openecomp-ui/resources/scss/components/_grid.scss create mode 100644 openecomp-ui/resources/scss/components/_icon.scss create mode 100644 openecomp-ui/resources/scss/components/_selectActionTable.scss delete mode 100644 openecomp-ui/resources/scss/components/_slidePanel.scss create mode 100644 openecomp-ui/resources/scss/components/_svgIcon.scss create mode 100644 openecomp-ui/resources/scss/modules/_licenseModelOverview.scss create mode 100644 openecomp-ui/resources/scss/modules/_softwareProductComponentCompute.scss create mode 100644 openecomp-ui/resources/scss/modules/_softwareProductComponentProcessesPage.scss create mode 100644 openecomp-ui/resources/scss/modules/_softwareProductDependencies.scss delete mode 100644 openecomp-ui/resources/scss/modules/_softwareProductNetworksPage.scss create mode 100644 openecomp-ui/resources/scss/modules/_vspHeatSetup.scss create mode 100644 openecomp-ui/resources/scss/modules/onboardingCatalog/_catalogHeader.scss create mode 100644 openecomp-ui/resources/scss/modules/onboardingCatalog/_catalogList.scss create mode 100644 openecomp-ui/resources/scss/modules/onboardingCatalog/_catalogTile.scss create mode 100644 openecomp-ui/resources/scss/modules/onboardingCatalog/_createItemTile.scss create mode 100644 openecomp-ui/resources/scss/modules/onboardingCatalog/_onboardHeader.scss create mode 100644 openecomp-ui/resources/scss/modules/onboardingCatalog/_tile.scss create mode 100644 openecomp-ui/resources/scss/modules/onboardingCatalog/_vendorPageHeader.scss create mode 100644 openecomp-ui/resources/scss/modules/onboardingCatalog/_vendorTile.scss create mode 100644 openecomp-ui/resources/scss/modules/onboardingCatalog/_vlmTile.scss create mode 100644 openecomp-ui/resources/scss/modules/onboardingCatalog/_vspOverlay.scss (limited to 'openecomp-ui/resources/scss') diff --git a/openecomp-ui/resources/scss/_components.scss b/openecomp-ui/resources/scss/_components.scss index 884308885a..bd85f547c9 100644 --- a/openecomp-ui/resources/scss/_components.scss +++ b/openecomp-ui/resources/scss/_components.scss @@ -2,7 +2,6 @@ @import "components/buttons"; @import "components/forms"; @import "components/validationForm"; -@import "components/slidePanel"; @import "components/dualListBox"; @import "components/listEditorView"; @import "components/toggleInput"; @@ -16,6 +15,11 @@ @import "components/dropzone"; @import "components/submitErrorResponse"; @import "components/expandableInput"; +@import "components/grid"; +@import "components/icon"; +@import "components/svgIcon"; +@import "components/activityLog"; +@import "components/selectActionTable"; %noselect { -webkit-touch-callout: none; @@ -53,7 +57,7 @@ } .search-icon { position: relative; - left: -20px; + left: -23px; align-self: center; width: 0; color: $dark-gray; @@ -71,3 +75,29 @@ margin-left: 50%; color: $yellow; } + +.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; +} +.chevron.right:before { + left: 0; + transform: rotate(45deg); +} +.chevron.down:before { + transform: rotate(135deg); +} +.chevron.left:before { + transform: rotate(-135deg); +} +.chevron.top:before { + transform: rotate(-45deg); +} diff --git a/openecomp-ui/resources/scss/_modules.scss b/openecomp-ui/resources/scss/_modules.scss index fd35bf2e0b..578895dfe0 100644 --- a/openecomp-ui/resources/scss/_modules.scss +++ b/openecomp-ui/resources/scss/_modules.scss @@ -1,3 +1,4 @@ +@import "modules/licenseModelOverview"; @import "modules/licenseAgreement"; @import "modules/featureGroup"; @import "modules/entitlementPools"; @@ -7,16 +8,15 @@ @import "modules/_softwareProductAttachmentPage"; @import "modules/_softwareProductProcessesPage"; @import "modules/_vspComponentQuestionnaire"; -@import "modules/_softwareProductNetworksPage"; @import "modules/_softwareProductComponentNetwork"; @import "modules/_softwareProductComponentGeneral"; @import "modules/_softwareproductComponentLoadBalancing"; +@import "modules/_softwareProductComponentProcessesPage"; +@import "modules/softwareProductComponentCompute"; @import "modules/vspComponentMonitoring"; @import "modules/licenseModel"; @import "modules/onboardingCatalog"; @import "modules/workflows"; @import "modules/uploadScreen"; - - - - +@import "modules/vspHeatSetup"; +@import "modules/softwareProductDependencies"; diff --git a/openecomp-ui/resources/scss/bootstrap-cust/_forms.scss b/openecomp-ui/resources/scss/bootstrap-cust/_forms.scss index 545b23ee7f..8085274cac 100644 --- a/openecomp-ui/resources/scss/bootstrap-cust/_forms.scss +++ b/openecomp-ui/resources/scss/bootstrap-cust/_forms.scss @@ -88,10 +88,11 @@ input[type=radio]:checked:before { input[type=checkbox]:checked:before { font-family: $icon-font-family; - content: "\f00c"; + content: "\2714"; font-size: $icon-font-size; color: $blue; text-align: center; + line-height: 13px; } .radio, diff --git a/openecomp-ui/resources/scss/bootstrap-cust/_modals.scss b/openecomp-ui/resources/scss/bootstrap-cust/_modals.scss index 6bc6e46b2f..6a825b811e 100644 --- a/openecomp-ui/resources/scss/bootstrap-cust/_modals.scss +++ b/openecomp-ui/resources/scss/bootstrap-cust/_modals.scss @@ -7,7 +7,12 @@ } .modal-body{ - padding: 15px; + padding: 0; + .validation-form-content { + padding: 50px; + overflow-y: auto; + max-height: 490px; + } } .modal-footer { diff --git a/openecomp-ui/resources/scss/bootstrap-cust/_variables.scss b/openecomp-ui/resources/scss/bootstrap-cust/_variables.scss index 59f0e3db7c..1af39d5b39 100644 --- a/openecomp-ui/resources/scss/bootstrap-cust/_variables.scss +++ b/openecomp-ui/resources/scss/bootstrap-cust/_variables.scss @@ -125,3 +125,8 @@ $nav-tabs-active-link-hover-border-color: transparent; // //## $popover-bg: $background-gray; + +//== Tooltips +// +//## +$tooltip-bg: $dark-gray; diff --git a/openecomp-ui/resources/scss/common/_base.scss b/openecomp-ui/resources/scss/common/_base.scss index aa3ffdeb2b..e901db000e 100644 --- a/openecomp-ui/resources/scss/common/_base.scss +++ b/openecomp-ui/resources/scss/common/_base.scss @@ -44,6 +44,10 @@ input { padding: 7px 10px; } +.disabled { + opacity: 0.7 !important; +} + fieldset { border: none; } @@ -64,3 +68,7 @@ fieldset { .box-hover { border: 1px solid $light-blue; } + + + + diff --git a/openecomp-ui/resources/scss/common/_layout.scss b/openecomp-ui/resources/scss/common/_layout.scss index 6d63a79f55..dc2a33ccc7 100644 --- a/openecomp-ui/resources/scss/common/_layout.scss +++ b/openecomp-ui/resources/scss/common/_layout.scss @@ -15,8 +15,15 @@ .content-area { 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; + } +} \ No newline at end of file diff --git a/openecomp-ui/resources/scss/common/_typography.scss b/openecomp-ui/resources/scss/common/_typography.scss index 46edfb03de..1543f0adcd 100644 --- a/openecomp-ui/resources/scss/common/_typography.scss +++ b/openecomp-ui/resources/scss/common/_typography.scss @@ -1,28 +1,20 @@ /* Fonts */ -@font-face { - font-family: Omnes-Light; - src: url('../fonts/omnes-att-light.otf'); -} -@font-face { - font-family: Omnes-Regular; - src: url('../fonts/omnes-att-regular.otf'); +@mixin base-font-regular() { + font-family: omnes-regular, Arial, sans-serif; } -@font-face { - font-family: Omnes-Medium; - src: url('../fonts/omnes-att-medium.otf'); +@mixin base-font-light() { + font-family: omnes-light, Arial, sans-serif; } -@font-face { - font-family: Omnes-Bold; - src: url('../fonts/omnes-att-bold.otf'); +@mixin base-font-medium() { + font-family: omnes-medium, Arial, sans-serif; } -$base-font-regular: omnes-regular, "Omnes-Regular"; -$base-font-light: omnes-light, "Omnes-Light"; -$base-font-medium: omnes-medium, "Omnes-Medium"; -$base-font-bold: omnes-bold, "Omnes-Bold"; +@mixin base-font-bold() { + font-family: omnes-bold, Arial, sans-serif; +} $heading-font-1: 36px; $heading-font-2: 24px; @@ -34,82 +26,106 @@ $body-font-1: 14px; $body-font-2: 13px; $body-font-3: 12px; -$icon-font-size: 10px; -$icon-font-family: FontAwesome; +$icon-font-size: 11px; +$icon-font-family: Arial; $radio-font-family: Arial; .heading-1 { - font-family: $base-font-light; + @include base-font-light; font-size: $heading-font-1; } .heading-2 { - font-family: $base-font-light; + @include base-font-light; font-size: $heading-font-2; } .heading-3-light { - font-family: $base-font-light; + @include base-font-light; font-size: $heading-font-3; + @extend .text-uppercase !optional; } .heading-3 { - font-family: $base-font-regular; + @include base-font-regular; font-size: $heading-font-3; + @extend .text-uppercase !optional; } .heading-3-medium { - font-family: $base-font-medium; + @include base-font-medium; font-size: $heading-font-3; + @extend .text-uppercase !optional; } .heading-4 { - font-family: $base-font-regular; + @include base-font-regular; font-size: $heading-font-4; } .heading-4-medium { - font-family: $base-font-medium; + @include base-font-medium; font-size: $heading-font-4; } .heading-5 { - font-family: $base-font-regular; + @include base-font-regular; font-size: $heading-font-5; } .heading-5-medium { - font-family: $base-font-medium; + @include base-font-medium; font-size: $heading-font-5; } .body-1 { - font-family: $base-font-regular; + @include base-font-regular; font-size: $body-font-1; } .body-1-medium { - font-family: $base-font-medium; + @include base-font-medium; + font-size: $body-font-1; +} + +.body-1-light { + @include base-font-light; font-size: $body-font-1; } .body-2 { - font-family: $base-font-regular; + @include base-font-regular; font-size: $body-font-2; } .body-2-medium { - font-family: $base-font-medium; + @include base-font-medium; font-size: $body-font-2; } .body-3 { - font-family: $base-font-regular; + @include base-font-regular; font-size: $body-font-3; } .body-3-medium { - font-family: $base-font-medium; + @include base-font-medium; font-size: $body-font-3; } +.body-3-light { + @include base-font-light; + font-size: $body-font-3; +} + +.circle-icon-text { + @include base-font-medium; + font-size: $body-font-1; +} + +.warning-text { + color: $orange; +} +.error-text { + color: $red; +} diff --git a/openecomp-ui/resources/scss/common/_utils.scss b/openecomp-ui/resources/scss/common/_utils.scss index 70f3416e4b..dce623e15d 100644 --- a/openecomp-ui/resources/scss/common/_utils.scss +++ b/openecomp-ui/resources/scss/common/_utils.scss @@ -15,27 +15,27 @@ $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; + -webkit-#{$property}: $value; + -moz-#{$property}: $value; + -ms-#{$property}: $value; + -o-#{$property}: $value; + #{$property}: $value; } @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}"; - } - } + @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}"; + } + } } } @@ -43,25 +43,25 @@ $browserPrefixes: webkit moz o ms; @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); + #{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}"; - } - } + @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}"; + } + } } } @@ -81,11 +81,11 @@ $browserPrefixes: webkit moz o ms; @mixin border-radius($value, $positions: all) { @if ($positions == all) { - @include prefix(border-radius, $value, $border-radius-prefix); + @include prefix(border-radius, $value, $border-radius-prefix); } @else { - @each $position in $positions { - @include prefix(border-#{$position}-radius, $value, $border-radius-prefix); - } + @each $position in $positions { + @include prefix(border-#{$position}-radius, $value, $border-radius-prefix); + } } } @@ -102,12 +102,39 @@ $browserPrefixes: webkit moz o ms; } /* Ellipsis */ -@mixin ellipsis() { +@mixin ellipsis($width: 100%, $display: inline-block, $max-width: none) { overflow: hidden; text-overflow: ellipsis; - width: 100%; + width: $width; white-space: nowrap; - display: inline-block; + 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 gradient($from, $to) { @@ -124,52 +151,13 @@ $browserPrefixes: webkit moz o ms; margin-top: -$height/2; } -@mixin multiline-ellipsis($height, $lineheight, $ellipsiswidth: 3em) { - - $ellipsiswidth: 3em !default; - - .ellipsis { - overflow: hidden; - height: $height; - line-height: $lineheight; - } - - .ellipsis:before { - content: ""; - float: left; - width: 5px; - height: $height; - } - - .ellipsis > *:first-child { - float: right; - width: 100%; - margin-left: -5px; - } - - .ellipsis:after { - content: "\02026"; - - float: right; - position: relative; - top: -25px; - left: 100%; - width: $ellipsiswidth; - margin-left: -$ellipsiswidth; - padding-right: 5px; - - text-align: right; - } - -} - @mixin text-vertical-align($align: middle) { display: table; width: 100%; & > * { - vertical-align: $align; - display: table-cell; + vertical-align: $align; + display: table-cell; } } @@ -181,7 +169,7 @@ $browserPrefixes: webkit moz o ms; @mixin center-content($width) { & > * { - @include center-element($width); + @include center-element($width); } } @@ -202,9 +190,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 */ @@ -222,7 +210,22 @@ $browserPrefixes: webkit moz o ms; @mixin scrollable() { ::-webkit-scrollbar { - width: 8px; + width: 8px; + } +} + +@mixin create-circle($size, $bgcolor, $content) { + border-radius: 50%; + width: $size; + height: $size; + background: $bgcolor; + border: 3px solid $bgcolor; + &:after { + content: $content; + position: relative; + left: 9px; + top: 9px; + @extend .circle-icon-text; } } @@ -297,3 +300,9 @@ $browserPrefixes: webkit moz o ms; } } } + + +/**/ +@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)); +} diff --git a/openecomp-ui/resources/scss/common/_variables.scss b/openecomp-ui/resources/scss/common/_variables.scss index 92c20cdfdf..2162b0b1b0 100644 --- a/openecomp-ui/resources/scss/common/_variables.scss +++ b/openecomp-ui/resources/scss/common/_variables.scss @@ -19,6 +19,7 @@ $white: #ffffff; // Secondary Colors $red: #cf2a2a; +$crimson: #a94442; $background-alice-blue: #e5f5fb; $background-gray: #f2f2f2; @@ -29,10 +30,15 @@ $functional-yellow: #ffb81c; $tlv-gray: #f8f8f8; $tlv-light-gray: #eaeaea; $tlv-hover: #e6f6fb; +$highlight-gray: #eceff3; $content-background-color: $white; $scroll-bar-color: $text-black;//$light-gray; +$vc-status-text-color: #42b72a; + +// sizes +$circle-icon-size: 40px; //responsive @media params $tablet-max-width: 1024px; @@ -41,7 +47,59 @@ $desktop-min-width: 1824px; /* Textures */ $images-folder-name: "../images"; -$plus-circle-icon: $images-folder-name + "/plus-circle-icon.svg"; -$interface-icon: $images-folder-name + "/interface.svg"; -$sdc-logo: $images-folder-name + "/logo.svg"; -$warning-icon: $images-folder-name + "/warning.svg"; + +/* Icons */ +$icons-folder: "../images/icons"; +$artifacts-icon: $images-folder-name + "/artifacts_icon.png"; +$check-icon: $images-folder-name + "/v_icon.png"; +$base-module-icon: $images-folder-name + "/base_icon.png"; +$module-icon: $images-folder-name + "/module_icon.png"; +$pencil-icon: $images-folder-name + "/pencil_icon-01.svg"; +$vc-check-in-icon: $icons-folder + "/checked_in.png"; +$vc-checkout-icon: $icons-folder + "/checked_out.png"; +$vc-revert-icon: $icons-folder + "/reverticon.png"; +$vc-revert-disabled-icon: $icons-folder + "/revert_icon_disabled.png"; +$vc-save-icon: $icons-folder + "/saveicon.png"; +$vc-save-disabled-icon: $icons-folder + "/save_icon_disable.png"; +$vc-submit-icon: $icons-folder + "/submiticonactive.png"; +$vc-submit-disabled-icon: $icons-folder + "/submit_icon_disable.png"; +$trash-icon: $images-folder-name + "/trash_icon.png"; +$download-icon: $images-folder-name + "/download_icon.png"; +$upload-icon: $images-folder-name + "/upload_icon.png"; + + +/* catalog icons */ +$back-icon: $icons-folder + "/back_icon.png"; +/* validation icons */ +$artifacts-selected-icon: $icons-folder + "/artifacts_blue_icon.png"; +$artifacts-regular-icon: $icons-folder + "/artifacts_grey_icon.png"; +$chevron_down: $icons-folder + "/down_chevron.png"; +$error-icon-lg: $icons-folder + "/error_icon_big.png"; +$error-icon-sm: $icons-folder + "/error_icon_small.png"; +$go-to-overview-icon: $icons-folder + "/go_to_overview_icon.png"; +$go-to-overview-disabled-icon: $icons-folder + "/go_to_overview_disable_icon.png"; +$network-selected-icon: $icons-folder + "/network_blue_icon.png"; +$network-icon: $icons-folder + "/network_icon.png"; +$others-selected-icon: $icons-folder + "/others_blue_icon.png"; +$others-icon: $icons-folder + "/others_icon.png"; +$volume-selected-icon: $icons-folder + "/volume_blue_icon.png"; +$volume-icon: $icons-folder + "/volume_icon.png"; +$warning-icon-lg: $icons-folder + "/warning_icon_big.png"; +$warning-icon-sm: $icons-folder + "/warning_icon_small.png"; +$zip-icon: $icons-folder + "/ZIP_icon.png"; +$zip-selected-icon: $icons-folder + "/ZIP_blue_icon.png"; +$heat-icon: $icons-folder + "/nested_heat_icon.png"; +$heat-selected-icon: $icons-folder + "/nested_HEAT_icon_blue.png"; +$env-icon: $icons-folder + "/env_icon.png"; +$env-selected-icon: $icons-folder + "/env_icon_blue.png"; + +/* vlm summary icons */ + +$vlm-summary-plus-blue: $icons-folder + "/plus_vlm_summary_icon_blue.png"; +$vlm-summary-plus: $icons-folder + "/plus_vlm_summary_icon.png"; +$vlm-summary-plus-disabled: $icons-folder + "/plus_vlm_summary_disabled_icon.png"; +$vlm-summary-orphans: $icons-folder + "/orphans_grey_icon.png"; +$vlm-summary-orphans-blue: $icons-folder + "/orphans_blue_icon-n.png"; +$vlm-summary-used: $icons-folder + "/vlm_list_view_grey_icon.png"; +$vlm-summary-used-blue: $icons-folder + "/vlm_list_view_blue_icon.png"; + diff --git a/openecomp-ui/resources/scss/components/_activityLog.scss b/openecomp-ui/resources/scss/components/_activityLog.scss new file mode 100644 index 0000000000..1e31e06814 --- /dev/null +++ b/openecomp-ui/resources/scss/components/_activityLog.scss @@ -0,0 +1,104 @@ +$message-info-icon-size: 16px; + +@mixin status-icon-class { + @extend .body-1-light; + width: $message-info-icon-size; + height: $message-info-icon-size; + margin-left: 8px; + color: $white; + border-radius: $message-info-icon-size / 2; + display: inline-block; + text-align: center; +} + +.activity-log-view { + + .list-editor-view .list-editor-view-header { + border: none; + .list-editor-view-title { + @extend .heading-1; + color: $blue; + } + } + .list-editor-view-list { + border: 1px solid $light-gray; + border-bottom: none; + } + .activity-list-item { + display: flex; + height: 36px; + @extend .body-1; + &.header { + @extend .body-1-medium; + background-color: $tlv-light-gray; + color: $text-black; + } + } + + .activity-status { + .svg-icon-wrapper { + float: right; + } + .check-circle { + fill: $green; + width: 16px; + height: 16px; + } + .status-icon.false:after { + @include status-icon-class; + float: right; + background-color: $red; + content: "!"; + } + } + + .message-further-info-icon { + @include status-icon-class; + background-color: $gray; + } + + .table-cell { + border-right: 1px solid $light-gray; + border-bottom: 1px solid $light-gray; + &:last-child { + border-right: none; + } + flex-basis: 20%; + display: flex; + padding: 0 20px; + justify-content: center; + flex-direction: column; + &.activity-comment { + min-width: 0; + span { + @include ellipsis(100%); + } + } + } + + .date-header { + cursor: pointer; + display: flex; + align-items: center; + .header-sort-arrow { + width: 0; + height: 0; + border-left: 5px solid transparent; + border-right: 5px solid transparent; + margin-left: 9px; + &.up { + border-bottom: 5px solid $black; + } + &.down { + border-top: 5px solid $black; + } + + } + } + + .date-cell { + display: flex; + justify-content: space-between; + } + +} diff --git a/openecomp-ui/resources/scss/components/_buttons.scss b/openecomp-ui/resources/scss/components/_buttons.scss index b39ea495ab..fbf2c3e728 100644 --- a/openecomp-ui/resources/scss/components/_buttons.scss +++ b/openecomp-ui/resources/scss/components/_buttons.scss @@ -1,18 +1,3 @@ - -$plus-circle-icon-size: 18px; -.plus-icon-button { - background: url($plus-circle-icon) no-repeat; - background-size: $plus-circle-icon-size; - width: $plus-circle-icon-size; - height: $plus-circle-icon-size; - cursor: pointer; - &.small { - background-size: $plus-circle-icon-size - 6; - width: $plus-circle-icon-size - 6; - height: $plus-circle-icon-size - 6; - } -} - .primary-btn{ border: 1px solid; border-color: $blue; diff --git a/openecomp-ui/resources/scss/components/_dualListBox.scss b/openecomp-ui/resources/scss/components/_dualListBox.scss index 543c1c8b92..4a1a940c34 100644 --- a/openecomp-ui/resources/scss/components/_dualListBox.scss +++ b/openecomp-ui/resources/scss/components/_dualListBox.scss @@ -1,6 +1,10 @@ .dual-list-box { display: flex; margin: 25px 0 10px 0; + .svg-icon.search { + height: 14px; + width: 14px; + } .dual-search-multi-select-section { $multi-select-box-width: 398px; @@ -32,6 +36,10 @@ .dual-list-options-bar { margin: 62px 54px 27px 54px; padding-top: 23px; + .svg-icon { + width: 14px; + height: 14px; + } .dual-list-option { text-align: center; line-height: 10px; @@ -40,7 +48,7 @@ height: 15px; cursor: pointer; margin-top: 20px; - color: $blue; + fill: $blue; } } } diff --git a/openecomp-ui/resources/scss/components/_expandableInput.scss b/openecomp-ui/resources/scss/components/_expandableInput.scss index 52f410a61b..52b72d7c91 100644 --- a/openecomp-ui/resources/scss/components/_expandableInput.scss +++ b/openecomp-ui/resources/scss/components/_expandableInput.scss @@ -1,61 +1,55 @@ -$transitionLength: 0.5s; - -@mixin expand-transition($tl){ - transition: width $tl, background-color $tl, cursor $tl; -} - -@mixin color-transition($tl){ - transition: color $tl; -} - -.expandable-input-wrapper { - display: flex; - &:hover{ - .form-control { - border-color: $gray; - } - } - .expandable-input-control { - flex: 1 1; - margin: 0; - .form-control { - border-radius: 20px; - } - align-self: center; - } - .expandable-active { - @include expand-transition($transitionLength); - width: 215px; - cursor: text; - } - .expandable-not-active { - @include expand-transition($transitionLength); - width: 28px; - cursor: pointer; - background-color: transparent; - color: transparent; +.expandable-input-top { + display: flex; + height: 22px; + .svg-icon-wrapper { + height: 17px; + width: 17px; } - - .expandable-icon { - @include color-transition($transitionLength); - position: relative; - left: -20px; - align-self: center; - width: 0; - cursor: pointer; - color: $dark-gray; - } - - .expandable-close-button{ - @extend .expandable-icon; - color: $gray; - opacity: 0.5; - &:hover { - opacity: 1; + .expandable-input-wrapper { + display: flex; + .svg-icon.search { + height: 17px; + width: 17px; + } + &.closed { + .svg-icon.search { + transition: fill 0.5s ease-in; + fill: $blue; + cursor: pointer; + &:hover { + transition: fill 0.5s ease-in; + fill: $dark-blue; + } + } + } + &.opened { + .svg-icon-wrapper { + margin-left: 3px; + } + .svg-icon.search { + fill: $dark-blue; + } + .svg-icon.close { + margin-left: 7px; + height: 10px; + width: 10px; + opacity: 0.6; + fill: $dark-gray; + &:hover { + opacity: 1; + } + } + } + .expandable-input-control { + .form-control { + border: none; + background-color: transparent; + border-radius: 0; + border-bottom: 1px solid $gray; + height: 22px; + padding: 0 5px; + } + margin: 0; } - } - .expandable-icon-active { - @include color-transition($transitionLength); - color: $blue; } } diff --git a/openecomp-ui/resources/scss/components/_forms.scss b/openecomp-ui/resources/scss/components/_forms.scss index 3c50fe694a..23c58ea4ac 100644 --- a/openecomp-ui/resources/scss/components/_forms.scss +++ b/openecomp-ui/resources/scss/components/_forms.scss @@ -5,10 +5,37 @@ padding: 0 0 30px 0; } } + +.validation-form-content { + fieldset[disabled] { + .form-group { + opacity: 0.7; + cursor: auto; + pointer-events: none; + .dropdown-multi-select { + .form-group { + opacity: 1; + } + .Select-control { + background-color: $tlv-light-gray; + } + } + } + } +} + .dropdown-multi-select { .Select { display: block; width: 100%; + .Select-menu-outer { + .Select-option { + &:hover { + background-color: $blue; + color: $white; + } + } + } .Select-control { height: 28px; border-radius: 2px; @@ -26,20 +53,24 @@ &.Select--multi { .Select-value { color: $text-black; - background-color: transparent; - border-color: $light-gray; - margin-top: 2px; - margin-left: 2px; - border-radius: 1px; + background-color: $background-gray; + border: none; + margin: 3px 0 3px 10px; + border-radius: 10px; + padding-left: 8px; + padding-right: 6px; } .Select-value-icon { - border-right-color: $light-gray; + border: none; + float: right; + &:hover { + background-color: inherit; + color: inherit; + } } .Select-arrow-zone { - padding-top: 4px; + padding-top: 4px; } } } } - - diff --git a/openecomp-ui/resources/scss/components/_grid.scss b/openecomp-ui/resources/scss/components/_grid.scss new file mode 100644 index 0000000000..d4d1fa7ccd --- /dev/null +++ b/openecomp-ui/resources/scss/components/_grid.scss @@ -0,0 +1,64 @@ +$gridItemSpace: 15%; + +.grid-section { + padding-bottom: 30px; + .grid-items { + display: flex; + flex-direction: row; + flex-wrap: wrap; + } + + %grid-col-base { + flex-shrink: 0; + display: flex; + } + + .grid-item { + flex: 1; + display: flex; + flex-direction: column; + } + + .grid-item-stretch { + @extend .grid-item; + & *:last-child { + flex: 1; + display: flex; + flex-direction: column; + } + } + + .grid-col-1 { + @extend %grid-col-base; + flex-basis: 25%; + &:after { + flex-basis: $gridItemSpace; + content: ' '; + } + } + + .grid-col-2 { + @extend %grid-col-base; + flex-basis: 50%; + &:after { + flex-basis: $gridItemSpace / 2; + content: ' '; + } + } + .grid-col-3 { + @extend %grid-col-base; + flex-basis: 75%; + &:after { + flex-basis: $gridItemSpace / 3; + content: ' '; + } + } + .grid-col-4 { + @extend %grid-col-base; + flex-basis: 100%; + &:after { + flex-basis: $gridItemSpace / 4; + content: ' '; + } + } +} diff --git a/openecomp-ui/resources/scss/components/_icon.scss b/openecomp-ui/resources/scss/components/_icon.scss new file mode 100644 index 0000000000..c80055d055 --- /dev/null +++ b/openecomp-ui/resources/scss/components/_icon.scss @@ -0,0 +1,164 @@ +$image-icon-normal-size: 20px; + +.icon-component { + display: inline-flex; + align-items: center; + + &.clickable:hover { + cursor: pointer; + } + .icon-label { + color: $blue; + } + &.disabled { + .icon-label { + color: $tlv-light-gray; + opacity: 0.7; + } + } + .icon { + width: $image-icon-normal-size; + height: $image-icon-normal-size; + margin: 0 6px; + background-repeat: no-repeat; + + &.trash { + background-image: url($trash-icon); + } + + &.artifacts { + background-image: url($artifacts-icon); + } + + &.base { + background-image: url($base-module-icon); + } + + &.module { + background-image: url($module-icon); + } + + &.pencil { + background-image: url($pencil-icon); + } + + &.check { + background-image: url($check-icon); + width: 30px; + height: 30px; + } + + &.download { + background-image: url($download-icon); + width: 16px; + height: 14px; + } + + &.upload { + background-image: url($upload-icon); + width: 16px; + height: 14px; + } + &.validation-artifacts { + width: 13px; + height: 17px; + position: relative; + top: 3px; + background-image: url($artifacts-regular-icon); + &.selected { + background-image: url($artifacts-selected-icon); + } + } + &.network { + background-image: url($network-icon); + width: 12px; + height: 12px; + &.selected { + background-image: url($network-selected-icon); + } + } + &.validation-other { + background-image: url($others-icon); + width: 12px; + height: 12px; + &.selected { + background-image: url($others-selected-icon); + } + } + &.volume { + width: 15px; + height: 16px; + background-image: url($volume-icon); + &.selected { + background-image: url($volume-selected-icon); + } + } + &.zip { + background-image: url($zip-icon); + height: 23px; + width: 29px; + &.selected { + background-image: url($zip-selected-icon); + } + } + &.heat { + background-image: url($heat-icon); + height: 14px; + width: 16px; + &.selected { + background-image: url($heat-selected-icon); + } + } + &.env { + background-image: url($env-icon); + height: 15px; + width: 16px; + &.selected { + background-image: url($env-selected-icon); + } + } + &.error { + width: 14px; + min-width: 14px; + height: 14px; + background-image: url($error-icon-sm); + } + &.warning { + height: 13px; + width: 15px; + min-width: 15px; + background-image: url($warning-icon-sm); + } + &.error-lg { + width: 17px; + min-width: 17px; + height: 17px; + background-image: url($error-icon-lg); + } + &.warning-lg { + width: 19px; + min-width: 19px; + height: 17px; + background-image: url($warning-icon-lg); + } + &.chevron-up { + background-image: url($chevron_down); + transform: rotate(180deg); + height: 7px; + width: 11px; + } + &.chevron-down { + background-image: url($chevron_down); + height: 7px; + width: 11px; + } + &.go-to-overview { + background-image: url($go-to-overview-icon); + height: 15px; + width: 18px; + &.disabled { + background-image: url($go-to-overview-disabled-icon); + } + } + } +} diff --git a/openecomp-ui/resources/scss/components/_inputOptions.scss b/openecomp-ui/resources/scss/components/_inputOptions.scss index 107751b07b..face03d64d 100644 --- a/openecomp-ui/resources/scss/components/_inputOptions.scss +++ b/openecomp-ui/resources/scss/components/_inputOptions.scss @@ -1,3 +1,12 @@ +.disabled { + .Select-control { + background-color: $tlv-light-gray; + .Select-placeholder { + color: $dark-gray; + } + } +} + .input-options { display: flex; border: 1px solid $light-gray; @@ -14,6 +23,7 @@ padding-top:0px; padding-bottom: 0px; height:28px; + } .input-options-other{ @@ -34,6 +44,42 @@ } .input-options.has-error { - border-color: #A94442; + border-color: $crimson; } +.bootstrap-input-options { + display: flex; + flex-direction: column; + .input-options-select { + border: 1px solid $light-gray; + border-radius: 2px; + height: 30px; + float: left; + transition-property: width; + transition-duration: 300ms; + padding-top: 0px; + padding-bottom: 0px; + width: 100%; + &:hover { + border-color: $gray; + } + } + .input-options-other { + float: left; + height: 30px; + border: none; + padding-top: 0px; + padding-bottom: 0px; + height: 28px; + } + .input-options-separator { + width: 1px; + height: 24px; + margin-top: 2px; + margin-bottom: 2px; + border: 1px solid $light-gray; + } + &.has-error { + border-color: $crimson; + } +} diff --git a/openecomp-ui/resources/scss/components/_listEditorView.scss b/openecomp-ui/resources/scss/components/_listEditorView.scss index 704faaf098..18d5426eb7 100644 --- a/openecomp-ui/resources/scss/components/_listEditorView.scss +++ b/openecomp-ui/resources/scss/components/_listEditorView.scss @@ -2,49 +2,42 @@ @extend .flex-column; background-color: $content-background-color; - .list-editor-view-title { - @extend .section-title; - } - - .list-editor-view-title-inline { - @extend .list-editor-view-title; - position: relative; - top: 9px; - &:first-child { - padding: 0; - } - } - - .list-editor-view-add-section { - display: inline-block; - padding: 0 10px 0 10px; + .expandble-search-wrapper { + display: flex; + justify-content: flex-end; + margin-top: 10px; } - .list-editor-view-actions { + .list-editor-view-header { display: flex; justify-content: space-between; - align-items: center; + align-items: flex-end; border-bottom: 1px solid $light-gray; - padding-bottom: 18px; + padding-bottom: 5px; + .list-editor-view-title { + @extend .heading-3-medium; + } .list-editor-view-add-controller { - @extend .body-1-medium; + @extend .heading-4-medium; color: $blue; display: table; cursor: pointer; position: relative; - top: 9px; + padding-top: 0px; + padding-bottom: 0px; + margin-left: auto; + .list-editor-view-add-title { + display: flex; + } span { display: table-cell; vertical-align: middle; + margin-top:4px; &:nth-child(2) { padding-left: 10px; } } } - - .search-wrapper { - width: 265px; - } } .list-editor-view-list-scroller { @@ -56,21 +49,17 @@ .list-editor-view-list { @extend .flex-column; - .list-editor-item-view { margin: 8px 0; border: 1px solid $light-gray; background-color: $white; - cursor: pointer; display: flex; - height: 100px; min-height: 100px; overflow: hidden; .list-editor-item-view-content { padding: 10px 28px; display: flex; - flex-basis: 95%; - width: 95%; + flex: 1 1 auto; .list-editor-item-view-field { flex: 1 1; color: $black; @@ -91,6 +80,12 @@ .text { @extend .body-1; } + .textEllipses { + white-space: nowrap; + text-overflow: ellipsis; + overflow: hidden; + padding-right: 5px; + } } } .list-editor-item-view-controller { @@ -99,59 +94,79 @@ align-self: center; justify-content: center; flex-direction: column; - .fa { - transition: color .3s; - font-size: 22px; - color: $white; - &:first-child{ + .svg-icon-wrapper { + &:first-child { margin-bottom: 10px; } } + .svg-icon { + transition: fill .3s; + height: 18px; + width: 18px; + fill: $white; + } } - &:hover { + &.selectable:hover{ @extend .box-hover; + cursor: pointer; .list-editor-item-view-controller { - .fa { - color: $gray; + .svg-icon { + fill: $dark-gray; + &:hover { + fill: $black; + } } } } } - } + &.two-columns { - &.thinner-list { - background-color: $white; - padding: 0; - margin-top: 35px; + flex-direction: row; + flex-wrap: wrap; - .list-editor-view-list { - border-top: 0; - padding-top: 0; - margin-top: 23px; .list-editor-item-view { - &:hover { - border-color: $light-gray; - } - margin: 5px 0 0 0; - height: 30px; - border-top: 0; - border-left: 0; - border-right: 0; .list-editor-item-view-content { - padding: 4px; - .name { - @extend .body-2-medium; - flex-basis: 36%; + display: flex; + flex-direction: row; + align-items: center; + padding: 10px 18px 10px 0; + .list-editor-item-view-field { + flex: 0.3 1; + display: flex; + justify-content: center; + flex-direction: column; + height: 100%; + border-right : 1px solid $light-gray; + margin-left: 18px; + &:last-child{ + border: none; + flex: 1; + } + .details{ + display: flex; + flex-direction: row; + .title { + padding: 0; + margin-right: 5px; + } + } + + .description { + @extend .body-1; + @include multiline-ellipsis(1.3em, 3); + } } } - .list-editor-item-view-controller { - .fa-trash-o { - font-size: 20px; - } + + &:nth-child(odd){ + flex: 0 0 48.5%; + margin-right: 50px; + } + &:nth-child(even) { + flex: 1; + margin-right: 0; } } } } } - - diff --git a/openecomp-ui/resources/scss/components/_navigationSideBar.scss b/openecomp-ui/resources/scss/components/_navigationSideBar.scss index 404f43ca68..36c14a2785 100644 --- a/openecomp-ui/resources/scss/components/_navigationSideBar.scss +++ b/openecomp-ui/resources/scss/components/_navigationSideBar.scss @@ -3,7 +3,7 @@ height: 100%; background-color: $white; border-right: 1px solid $light-gray; - box-shadow: 1px -1px 3px 0px $tlv-light-gray; + @include box-shadow(1px -1px 3px 0px $tlv-light-gray); border-bottom: 0; .navigation-side-content { @@ -16,11 +16,11 @@ flex-direction: column; background-color: $tlv-gray; .group-name { - @extend .heading-5-medium; + @extend .heading-4-medium; @include ellipsis; min-height: 56px; display: block; - padding: 18px 12px 16px 40px; + padding: 18px 12px 13px 40px; background-color: $white; border-bottom: 1px solid $tlv-light-gray; } diff --git a/openecomp-ui/resources/scss/components/_selectActionTable.scss b/openecomp-ui/resources/scss/components/_selectActionTable.scss new file mode 100644 index 0000000000..fa17733374 --- /dev/null +++ b/openecomp-ui/resources/scss/components/_selectActionTable.scss @@ -0,0 +1,152 @@ +.select-action-table-view { + .svg-icon-wrapper { + flex-direction: row; + + &::before { + content:""; + } + .svg-icon { + margin-left: 5px; + margin-right: 5px; + width:16px; + height:16px; + } + } + .dummy-icon { + background-color: $white; + fill: $white; + .locked { + fill: $white; + } + } + + .select-action-table-controllers { + display: flex; + .svg-icon-wrapper { + &:hover { + cursor: pointer; + } + &:first-child { + margin-left: auto; + } + } + } + .select-action-table { + display: flex; + flex-direction: column; + border-color: $light-gray; + + .select-action-table-headers { + display: flex; + background-color: $tlv-light-gray; + border-color: inherit; + .select-action-table-header { + @extend .body-1-medium; + flex: 1; + border-top: 1px solid; + border-right: 1px solid; + border-color: inherit; + padding: 8px 0 7px 20px; + &:first-child { + border-left: 1px solid; + border-color: inherit; + } + } + } + .select-action-table-row-wrapper { + display: flex; + flex-direction: row; + margin-bottom: 14px; + .svg-icon.trash-o { + + fill: $dark-gray; + } + .svg-icon.error-circle { + fill: $red; + } + .svg-icon.check-circle { + fill: $green; + } + .select-action-table-row { + display: flex; + flex: 1; + border: 1px solid; + border-color: $light-gray; + &.has-error { + border-color: $red; + } + .select-action-table-cell { + flex: 1; + border-right: 1px solid; + border-color: $light-gray; + @extend .body-1; + .dropdown-multi-select { + .form-group { + .Select{ + &.is-open { + border: 1px solid $blue; + } + } + } + } + .form-group { + margin: 0; + .Select-control { + height:36px; + border: none; + .is-open { + border-left-color: $blue; + border-right-color: $blue; + } + .Select-value, .Select-placeholder, .Select-input { + padding-left: 20px; + padding-right: 50px; + padding-top: 4px; + + } + .Select-placeholder { + color: $dark-gray; + } + .Select-arrow-zone { + padding-right: 15px; + } + } + } + &:last-child { + border-right: none; + } + } + .Select-menu-outer { + border-left: 1px solid $blue; + border-right: 1px solid $blue; + border-bottom: 1px solid $blue; + overflow: auto; + .Select-menu { + display: inline-block; + .Select-option { + width: 100%; + display: inline-block; + border-bottom: 1px solid $light-gray; + &:hover { + background-color: $blue; + color: $white; + &.is-focused { + background-color: $blue; + } + &.is-focused { + background-color: $blue; + } + } + &.is-selected { + background-color: transparent; + } + &.is-focused { + background-color: transparent; + } + } + } + } + } + } + } +} diff --git a/openecomp-ui/resources/scss/components/_slidePanel.scss b/openecomp-ui/resources/scss/components/_slidePanel.scss deleted file mode 100644 index 61c9a189f0..0000000000 --- a/openecomp-ui/resources/scss/components/_slidePanel.scss +++ /dev/null @@ -1,35 +0,0 @@ - -.slide-panel { - transition: left .5s,right .5s; - - .slide-panel-header { - padding: 10px; - height: 45px; - display: table; - width: 100%; - .slide-panel-header-title, .collapse-double-icon { - display: table-cell; - vertical-align: middle; - } - .slide-panel-header-title { - @extend .body-2; - text-align: center; - width: 100%; - color: $text-black; - } - .collapse-double-icon { - color: $text-black; - cursor: pointer; - } - } - - .slide-panel-content { - opacity: 1; - transition: opacity .5s, visibility .5s; - - &.closed { - opacity: 0; - visibility: hidden; - } - } -} diff --git a/openecomp-ui/resources/scss/components/_submitErrorResponse.scss b/openecomp-ui/resources/scss/components/_submitErrorResponse.scss index fdac5ebe45..e34be01af2 100644 --- a/openecomp-ui/resources/scss/components/_submitErrorResponse.scss +++ b/openecomp-ui/resources/scss/components/_submitErrorResponse.scss @@ -20,4 +20,41 @@ } } } + .error-block { + margin: 10px 0; + .error-block-header { + background-color: $tlv-gray; + padding: 5px; + cursor: pointer; + .chevron-down { + width:10px; + height:10px; + margin-right: 10px; + &.right { + transform: rotate(270deg); + } + } + + } + .error-code-list-item { + .icon-label { + @extend .body-1; + color: $dark-gray; + } + .icon-component { + align-items: baseline; + } + } + .list-group-item { + .error-item-text { + margin-top:-2px; + //position: fixed; + } + } + .component-name-header { + margin-left: 45px; + margin-top: 10px; + @extend .heading-5-medium; + } + } } diff --git a/openecomp-ui/resources/scss/components/_svgIcon.scss b/openecomp-ui/resources/scss/components/_svgIcon.scss new file mode 100644 index 0000000000..fc02f81fd4 --- /dev/null +++ b/openecomp-ui/resources/scss/components/_svgIcon.scss @@ -0,0 +1,51 @@ +@mixin overrideBootstrapClose(){ + opacity: 1; + float: none; + &:hover { + opacity: 1; + } +} + +.svg-icon-wrapper { + display: inline-flex; + justify-content: center; + align-items: center; + &.bottom { + flex-direction: column; + .svg-icon-label { + margin-bottom: 5px; + } + } + &.right { + float: none; + .svg-icon-label { + margin-left: 5px; + } + } + &.top { + flex-direction: column-reverse;; + .svg-icon-label { + margin-top: 5px; + } + } + &.left { + flex-direction: row-reverse;; + .svg-icon-label { + margin-right: 5px; + } + } + // bootstrap override + &.close { + @include overrideBootstrapClose(); + } + .close { + @include overrideBootstrapClose(); + } + .svg-icon { + width: 20px; + height: 20px; + } + .svg-icon-label { + @extend .body-1; + } +} diff --git a/openecomp-ui/resources/scss/components/_validationForm.scss b/openecomp-ui/resources/scss/components/_validationForm.scss index 93444c2e88..9404f2841a 100644 --- a/openecomp-ui/resources/scss/components/_validationForm.scss +++ b/openecomp-ui/resources/scss/components/_validationForm.scss @@ -5,6 +5,7 @@ form { flex: 1; } .nav-tabs { + position: relative; .invalid-tab:not(.active) { a { color: $red; @@ -73,14 +74,17 @@ form { flex: 0.2; content: ' '; } - &.add-line-break { - .control-label { - &:after { - content: "\00a0"; - display: block; + @media (min-width: 1349px) { + &.add-line-break { + .control-label { + &:after { + content: "\00a0"; + display: block; + } } } } + } } } @@ -91,6 +95,16 @@ form { button:first-child { margin-right: 15px; } + .svg-icon { + height: 14px; + width: 14px; + } + .svg-icon.check { + fill: $white; + } + .svg-icon.close { + fill: $blue; + } } } diff --git a/openecomp-ui/resources/scss/components/_versionController.scss b/openecomp-ui/resources/scss/components/_versionController.scss index 3511470bfb..3c30cdcc37 100644 --- a/openecomp-ui/resources/scss/components/_versionController.scss +++ b/openecomp-ui/resources/scss/components/_versionController.scss @@ -1,109 +1,125 @@ .version-controller-bar { - .navbar-inverse { - @extend .body-1-medium; + display: flex; + min-height: 57px; + border-bottom: 1px solid $tlv-light-gray; + background-color: transparent; + .vc-container { + display: flex; + flex: 1; + align-self: center; background-color: transparent; - border-bottom: $tlv-light-gray thin solid; - padding-top: 14px; - padding-bottom: 12px; - margin-bottom: 0; - .container { - width: 100%; - padding: 0 52px; + justify-content: space-between; + padding-left: 16px; + padding-right: 40px; + .version-status-container { + display: flex; height: 30px; - .navbar-collapse { - padding-left: 0; - .items-in-left { - display: flex; - height: 30px; - .version-section { - .form-group { - margin-right: 5px; - .input-options { - border: none; - .input-options-select { - padding-top: 4px; - } - } + .version-selector { + border: none; + margin-top: 7px; + padding-right: 10px; + margin-right: 15px; + margin-left: 10px; + @extend .body-1; + } + .version-section { + .form-group { + margin-right: 20px; + .input-options { + border: none; + .input-options-select { + padding-top: 4px; } } - .vc-status { - display: flex; - padding-left: 14px; - border-left: $light-gray thin solid; - .status-text { - align-self: center; - display: flex; - padding-left: 3px; - .status-text-dash { - padding: 0 9px; - } + } + } + .vc-status { + display: flex; + padding-left: 20px; + border-left: $light-gray thin solid; + .status-text { + align-self: center; + margin-top: 2px; + @extend .heading-5; + color: $dark-gray; + } + } + } + .save-submit-cancel-container { + display: flex; + height: 30px; + .action-buttons { + display: flex; + padding: 0 13px; + .version-control-buttons { + display: flex; + } + .action-buttons-svg { + padding-top: 5px; + margin-right: 20px; + padding-bottom: 5px; + + .version-controller-lock-closed { + fill: $dark-gray; + width: 21px; + height: 23px; + margin-top: -3px; + &.disabled { + fill: $light-gray; } - .onboarding-status-icon { - width: 25px; - height: 19px; - background-image: url('../images/ecomp/ASDC_Sprite.png'); - background-position: -306px 674px; - align-self: center; + &:hover { + fill: $black; } - .checkout-status-icon { - display: flex; - & > .catalog-tile-check-in-status.sprite-new.checkout-editable-status-icon { - width: 25px; - height: 19px; - align-self: center; - margin-left: 5px; - } + } + .version-controller-lock-open { + fill: $dark-gray; + width: 24px; + height: 28px; + margin-top: -6px; + &:hover { + fill: $black; } } - } - .items-in-right { - display: flex; - height: 30px; - .action-buttons { - display: flex; - border-right: $gray thin solid; - padding: 0 13px; - .version-control-buttons { - display: flex; + .version-controller-submit { + fill: $blue; + &.disabled { + fill: $light-gray; } - .vc-nav-item-button { - border: 1px solid $light-gray; - border-radius: 5px; - cursor: pointer; - margin-right:10px; - padding: 6px 20px; - &:hover, &:focus { - background-color: lightgrey; - } - &.button-submit{ - background-color: transparent; - color: $green; - border-color: $green; - } - &.button-checkin-checkout { - background-color: $white; - @extend .body-1; - } + &:hover { + fill: $dark-blue; } - .revert-btn, .save-btn { - height: 24px; - width: 24px; - align-self: center; - cursor: pointer; - margin-right: 10px; + } + + .version-controller-revert { + fill: $dark-gray; + &.disabled { + fill: $light-gray; + } + &:hover { + fill: $black; } } - .vc-nav-item-close { - display: flex; - padding-left: 18px; - padding-top: 3px; - align-self: center; - @extend .body-1; - color: $gray; - cursor: pointer; + .version-controller-save { + fill: $dark-gray; + &.disabled { + fill: $light-gray; + } + &:hover { + fill: $black; + } } } } + .vc-nav-item-close { + display: flex; + padding-left: 18px; + padding-top: 3px; + align-self: center; + @extend .body-1; + color: $gray; + cursor: pointer; + border-left: $gray thin solid; + } } } } diff --git a/openecomp-ui/resources/scss/modules/_entitlementPools.scss b/openecomp-ui/resources/scss/modules/_entitlementPools.scss index df7cea4cd8..0e0a72a387 100644 --- a/openecomp-ui/resources/scss/modules/_entitlementPools.scss +++ b/openecomp-ui/resources/scss/modules/_entitlementPools.scss @@ -35,29 +35,13 @@ .tab-content { padding: 50px; } - .entitlement-pools-form-row { - - display: flex; - justify-content: space-between; - & > * { - flex: 0 1 47%; - } - .validation-input-wrapper { - .form-group { - textarea { - height: 184px; - } - .entitlement-pools-form-row-threshold-value { - margin-top: 23px; - margin-left: 10px; - width: 189px; - } - .dropdown-multi-select .Select { - z-index: 1080; - } - } - } - } + .threshold-section { + display: flex; + justify-content: space-between; + .validation-input-wrapper { + flex: 0 0 46%; + } + } } .validation-buttons { padding: 20px 50px; diff --git a/openecomp-ui/resources/scss/modules/_featureGroup.scss b/openecomp-ui/resources/scss/modules/_featureGroup.scss index f66a01c290..71e7cee575 100644 --- a/openecomp-ui/resources/scss/modules/_featureGroup.scss +++ b/openecomp-ui/resources/scss/modules/_featureGroup.scss @@ -28,21 +28,6 @@ padding: 0; } .feature-group-form { - .button-tab { - @extend .body-1-medium; - color: $dark-gray; - padding: 6px; - border: 0; - background-color: $white; - box-shadow: none; - &:first-child { - margin-right: 28px; - } - &.active, &:hover { - color: $text-black; - border-bottom: 2px solid $blue; - } - } .no-items-msg { margin-top: 55px; color: $dark-gray; diff --git a/openecomp-ui/resources/scss/modules/_licenseAgreement.scss b/openecomp-ui/resources/scss/modules/_licenseAgreement.scss index a7afd01cc5..7a7b87677e 100644 --- a/openecomp-ui/resources/scss/modules/_licenseAgreement.scss +++ b/openecomp-ui/resources/scss/modules/_licenseAgreement.scss @@ -37,21 +37,6 @@ padding: 0; } .license-agreement-form { - .button-tab{ - @extend .body-1-medium; - color: $dark-gray; - padding: 6px; - border: 0; - background-color: $white; - box-shadow: none; - &:first-child { - margin-right: 28px; - } - &.active, &:hover { - color: $text-black; - border-bottom: 2px solid $blue; - } - } .no-items-msg { margin-top: 55px; color: $dark-gray; @@ -70,21 +55,6 @@ } } } - .license-agreement-form-row { - display: flex; - justify-content: space-between; - .license-agreement-form-col { - flex: 0 1 45%; - } - .validation-input-wrapper { - flex: 0 1 45%; - .form-group { - textarea { - height: 100px; - } - } - } - } .validation-buttons { padding: 20px 50px; } diff --git a/openecomp-ui/resources/scss/modules/_licenseKeyGroup.scss b/openecomp-ui/resources/scss/modules/_licenseKeyGroup.scss index 19b4792949..5ea84e98c4 100644 --- a/openecomp-ui/resources/scss/modules/_licenseKeyGroup.scss +++ b/openecomp-ui/resources/scss/modules/_licenseKeyGroup.scss @@ -30,22 +30,6 @@ width: 400px; color: $black; } - .license-key-groups-form-row { - display: flex; - justify-content: space-between; - .options-input-form-row { - width: 370px; - } - .validation-input-wrapper { - flex: 0 1 45%; - .form-group { - textarea { - height: 100px; - } - - } - } - } } .validation-buttons { padding: 20px 50px; diff --git a/openecomp-ui/resources/scss/modules/_licenseModelOverview.scss b/openecomp-ui/resources/scss/modules/_licenseModelOverview.scss new file mode 100644 index 0000000000..4ec7c8d3af --- /dev/null +++ b/openecomp-ui/resources/scss/modules/_licenseModelOverview.scss @@ -0,0 +1,491 @@ +.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: 20px 30px; + border: 1px solid $tlv-light-gray; + @include border-shadow(); + .vendor-title { + margin-top:5px; + } + .vendor-name { + @extend .heading-3-medium; + text-transform: none; + padding-bottom: 15px; + border-bottom: 1px solid $tlv-light-gray; + } + .vendor-description { + @extend .flex; + @extend .body-1; + justify-content: space-between; + margin-top: 10px; + overflow: hidden; + border: 1px solid transparent; + position: relative; + left: -6px; + width: 101%; + + &:hover { + border: 1px solid $tlv-light-gray; + background-position: 99% 12%; + background-size: 15px; + padding-right: 20px; + background-image: url($pencil-icon); + background-repeat: no-repeat; + cursor: pointer; + } + &.read-only { + border: none; + } + .description-data { + @include multiline-ellipsis($lineCount: 3, $bgColor: $tlv-gray); + } + } + + .vendor-description-readonly { + @extend .flex; + @extend .body-1; + justify-content: space-between; + margin-top: 10px; + overflow: hidden; + border: none; + height: 49px; + margin-bottom: 15px; + padding: 6px; + position: relative; + left:-6px; + } + + .vendor-description-edit { + @extend .flex; + flex-direction: column; + border: none; + margin-top: 10px; + position: relative; + left: -6px; + width: 101%; + textarea { + padding-left: 6px; + } + .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; + } + } + } + .summary-count-list { + @extend .flex-column; + flex: 0.6; + margin-left: 20px; + justify-content: space-between; + border: 1px solid $tlv-light-gray; + @include border-shadow(); + background-color: $tlv-gray; + .summary-count-item { + @extend .flex; + @extend .heading-4-medium; + padding-top: 5px; + 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; + } + .add-button { + cursor: pointer; + font-size: larger; + background-image: url($vlm-summary-plus); + background-size: 20px; + background-repeat: no-repeat; + width:20px; + height:20px; + margin-top: 3px; + margin-left: auto; + &:hover { + cursor: pointer; + background-image: url($vlm-summary-plus-blue); + } + } + + .summary-name-and-count { + &: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; + } + } + } + .vlm-list-tab-panel + { + @extend .flex; + .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; + background-image: url($vlm-summary-used); + &.selected { + background-image: url($vlm-summary-used-blue); + } + } + .entities-list-icon { + background-size: 32px; + background-repeat: no-repeat; + background-image: url($vlm-summary-orphans); + &.selected { + background-image: url($vlm-summary-orphans-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 { + @include border-shadow(); + .list-item-icon-col { + display: flex; + flex-direction: column; + justify-content: center; + margin-left: 5px; + } + &.vlm-list-item-la { + margin-left: 0; + .list-item-icon-col { + padding-left: 22px; + + } + .la-icon { + background-color: $gray; + border-color: $gray; + } + .list-item-section { + &:first-child { + background-color: gray; + } + } + } + &.vlm-list-item-fg { + cursor: default; + margin-left: 0; + border-left: 10px solid $gray; + .list-item-arrow-col { + margin-left: 0px; + } + .list-item-icon-col { + padding-left: 22px; + } + .fg-icon { + background-color: $gray; + border-color: $gray; + } + } + &.vlm-list-item-ep { + margin-left: 0; + border-left: 10px solid $gray; + .list-item-icon-col { + padding-left: 22px; + } + .ep-icon { + background-color: $gray; + border-color: $gray; + } + .list-item-section { + &:first-child { + display: flex; + color: $white; + min-width: 34px; + } + } + } + &.vlm-list-item-lkg { + margin-left: 0; + border-left: 10px solid $gray; + .list-item-icon-col { + padding-left: 22px; + } + .lkg-icon { + background-color: $gray; + border-color: $gray; + } + .list-item-section { + &:first-child { + display: flex; + color: $white; + min-width: 34px; + } + } + } + } + } + } + } + .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; + cursor: pointer; + .list-item-icon-col { + display: flex; + flex-direction: column; + justify-content: center; + + } + .list-item-section { + padding: 10px; + .children-count { + @extend .body-1; + line-height: 20px; + color: $gray; + padding-left: 5px; + .count-value { + padding: 0 5px; + } + } + .additional-data { + padding-left: 50px; + .additional-data-name { + @extend .body-1-medium; + } + } + .additional-data-col-border { + border-left: 1px solid $tlv-light-gray; + min-height: 100%; + height: 100%; + } + } + .list-item-additional-data-col { + @extend .body-1; + @extend .flex; + align-items: center; + flex: 0.8; + } + .arrow-icon { + align-self: center; + } + .vlm-item-info { + flex: 1; + } + .vlm-list-item-title { + @extend .flex; + .item-name { + @extend .heading-5-medium; + flex: 0 1 auto; + margin-bottom: 4px; + } + } + .vlm-list-item-description { + @extend .body-1; + overflow: hidden; + max-height: 38px; + } + &.vlm-list-item-la { + margin-top: 10px; + border-left: 10px solid $dark-blue; + .la-icon { + @include create-circle($circle-icon-size,$dark-blue,'LA'); + color: $white; + } + .list-item-section { + + &:first-child { + display: flex; + color: $dark-blue; + min-width: 34px; + } + } + .list-item-arrow-col { + flex: 0.01; + margin-left: 14px; + } + .list-item-icon-col { + padding-left: 14px; + padding-right: 30px; + align-items: center; + } + + } + &.vlm-list-item-fg { + border-left: 10px solid $blue; + margin-left: 20px; + margin-top: 10px; + .fg-icon { + @include create-circle($circle-icon-size,$blue,'FG'); + color: $white; + } + .list-item-section { + &:first-child { + display: flex; + color: $blue; + min-width: 34px; + + } + } + .list-item-arrow-col { + flex: 0.01; + margin-left: 26px; + } + .list-item-icon-col { + padding-left: 22px; + padding-right: 30px; + align-items: center; + } + } + &.vlm-list-item-ep { + margin-left: 40px; + margin-top: 10px; + border-left: 10px solid $light-blue; + cursor: default; + .ep-icon { + @include create-circle($circle-icon-size,$light-blue,'EP'); + color: $white; + } + .list-item-icon-col { + padding-left: 72px; + padding-right: 30px; + align-items: center; + } + .list-item-section { + &:first-child { + display: none; + } + } + .list-item-additional-data-col { + margin-right: 20px; + } + } + &.vlm-list-item-lkg { + margin-top: 10px; + margin-left: 40px; + border-left: 10px solid $light-blue; + cursor: default; + .lkg-icon { + @include create-circle($circle-icon-size,$light-blue,'KG'); + color: $white; + } + .list-item-icon-col { + padding-left: 72px; + padding-right: 30px; + align-items: center; + } + .list-item-section { + &:first-child { + display: none; + } + + } + .list-item-additional-data-col { + margin-right: 20px; + } + } + } + + } + } + } + +} diff --git a/openecomp-ui/resources/scss/modules/_onboardingCatalog.scss b/openecomp-ui/resources/scss/modules/_onboardingCatalog.scss index 6020866d4a..6c56d11049 100644 --- a/openecomp-ui/resources/scss/modules/_onboardingCatalog.scss +++ b/openecomp-ui/resources/scss/modules/_onboardingCatalog.scss @@ -1,164 +1,24 @@ $transitionLength: 0.6s; .catalog-view { - background-color: $background-gray; - height: 100%; - overflow: hidden; - height: 100%; - .catalog-header { - padding-top: 20px; - margin: 0 48px 0 20px; - border-bottom: 1px solid $light-gray; - display: flex; - flex-direction: row; - justify-content: space-between; - .catalog-header-title { - @extend .heading-2; - margin: 0 0 10px 0; - } - .expandable-input-wrapper { - margin: 0 0 10px 0; - } - } - .catalog-list { - max-height: 100%; - overflow: auto; - display: flex; - flex-wrap: wrap; - padding: 40px 10px 0 10px; - &:after { - content: ' '; - display:block; - width: 100%; - height: 85px; - } - .tile { - background-color: $white; - margin: 10px; - width: 214px; - height: 210px; - display: flex; - flex-direction: column; - - } - .create-catalog-item { - border: 2px dashed $light-gray; - background-color: transparent; - &:hover { - .plus-section { - display: none; - } - .primary-btn { - display: inherit; - } - } - justify-content: center; - .plus-section { - align-self: center; - display: flex; - flex-direction: column; - .plus-icon-button { - align-self: center; - background-size: 23px; - width: 23px; - height: 23px; - margin-bottom: 4px; - } - } - .primary-btn { - display: none; - width: 176px; - &.new-license-model { - margin-bottom: 18px; - } - &:hover { - background-color: $background-alice-blue; - } - } - } - .catalog-tile { - cursor: pointer; - border: 1px solid $tlv-light-gray; - &:hover { - @include box-shadow(3px 3px 5px 0 rgba(24,24,25,.04)); - } - &:active { - border: 1px solid $light-blue; - } - .catalog-tile-type { - padding-top: 7px; - border-radius: 50%; - width: 40px; - height: 40px; - background: white; - border: 4px solid #F2F2F2; - position: relative; - top: -12px; - left: -7px; - &:before { - @extend .body-1; - color: $light-blue; - } - &.license-model-type { - padding-left: 13px; - &:before { - content: "L" - } - } - &.software-product-type { - padding-left: 8px; - &:before { - content: "SP" - } - } - } - .catalog-tile-icon { - text-align: center; - flex-basis: 60%; - justify-content: center; - background-size: 60px 60px; - background-repeat: no-repeat; - background-position: center; - display: flex; - .icon { - align-self: center; - height: 65px; - width: 65px; - background-repeat: no-repeat; - margin-bottom: 27px; - &.license-model-type-icon { - background-image: url('../images/onboarding/vendor-license-model.svg'); - } - &.software-product-type-icon { - background-image: url('../images/onboarding/vendor-software-product.svg'); - } - } - } - .catalog-tile-content { - border-top: 1px solid $background-gray; - flex-basis: 30%; - padding: 8px; - display: flex; - justify-content: space-between; - .catalog-tile-item-details { - overflow: hidden; - } - .catalog-tile-item-name { - @extend .body-1-medium; - @include ellipsis(); - width: 150px; - color: $dark-gray - } - .catalog-tile-item-version { - @extend .body-1; - color: $gray; - } - .catalog-tile-check-in-status { - width: 25px; - height: 19px; - align-self: center; - } - } - } - } + background-color: $background-gray; + overflow: hidden; + height: 100%; + @import "onboardingCatalog/onboardHeader"; + @import "onboardingCatalog/catalogHeader"; + @import "onboardingCatalog/vendorPageHeader"; + @import "onboardingCatalog/catalogList"; + .catalog-wrapper { + height: 100%; + overflow: auto; + .tab-separator { + content: ''; + height: 25px; + border-right: 1px solid $dark-gray; + } + .catalog-list { + overflow: hidden; + height: auto; + } + } } diff --git a/openecomp-ui/resources/scss/modules/_softwareProductAttachmentPage.scss b/openecomp-ui/resources/scss/modules/_softwareProductAttachmentPage.scss index 657bb544a7..37068975a2 100644 --- a/openecomp-ui/resources/scss/modules/_softwareProductAttachmentPage.scss +++ b/openecomp-ui/resources/scss/modules/_softwareProductAttachmentPage.scss @@ -1,153 +1,237 @@ -.software-product-attachments { + +.vsp-attachments-view { + position: relative; + #attachments-tabs { + .nav-tabs { + background-color: $tlv-gray; + box-shadow: none; + border-bottom: 1px solid $light-gray; + & > li { + & > a { + font-size: 24px; + font-weight: lighter; + padding-left: 0; + padding-right: 0; + margin-right: 40px; + }; + &.active > a {color: $blue;}; + } + } + } + .attachments-view-controllers { + position: absolute; + right: 40px; + top: 15px; + display: flex; + .icon-label { + color: $dark-gray; + } + + .go-to-overview-icon { + .icon-label { + color: $blue; + } + &.disabled { + .icon-label { + color: $gray; + } + } + } + + .icon-component { + margin-right: 30px; + + } + + input[type="file"] { + visibility: hidden; + width: 1px; + padding: 0; + margin-left: -1px; + } + } +} + +.vsp-attachments-heat-validation { @extend .body-1; - width: 100%; - height: 100%; display: flex; - - .software-product-attachments-tree { + .svg-icon.exclamation-triangle-line { + fill: $orange; + width: 15px; + height: 15px; + &.large { + width: 20px; + height: 20px; + } + } + .validation-tree-section { display: flex; - border-right: 1px solid $light-gray; - margin: 0px; - padding: 5px 3px 10px 3px; + 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-medium; + padding-left: 32px; + cursor: pointer; + &.tree-header-title-selected{ + color: $blue; + } + } + .tree-header-title { + display: flex; + } + } + .counters { + display: flex; + justify-content: space-between; + z-index: 1; + padding-right: 20px; + .counter { + 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-medium; + } + } + } + } .tree-wrapper { flex: 1 1; position: relative; padding-bottom: 10px; + @-moz-document url-prefix() { + .tree-block-inside { + top: 0; + position: relative; + } + } .tree-block-inside { - padding-left: 17px; - padding-top: 8px; - padding-bottom: 1px; + padding-left: 20px; .tree-node-row { cursor: default; white-space: nowrap; - &.tree-node-selected::before { + display: flex; + justify-content: space-between; + height: 40px; + align-items: center; + .svg-icon.chevron-down, .svg-icon.chevron-up { + height: 10px; + width: 10px; + } + + &:after { + border-top: 1px solid $tlv-gray; + height: 40px; position: absolute; left: 0; right: 0; - height: 20px; - display: inline-block; content: ' '; - background-color: $light-gray; } - - &.tree-node-clicked::before { + @-moz-document url-prefix() { + &:after { + top: 0; + } + } + &.tree-node-selected::before { position: absolute; - left: 4px; - right: 4px; + left: 0; + right: 0; height: 20px; display: inline-block; content: ' '; - font-weight: bold; - background-color: $white; + 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; - .fa { - position: absolute; - left: -7px; - top: -11px; - @include transition(transform 0.3s); - } - &.tree-node-expander-collapsed .fa { - @include transform-rotate(-90); - } } - .tree-node-icon { margin: 0 7px; - color: $text-black; - opacity: .5; - .tree-node-validation-error::after { - content: "!"; - font-weight: bold; - position: absolute; - color: $red; - font-size: large; - left: -7px; - bottom: -5px; - } - } - - .error-status { - color: $red; - &.error-status-selected { - font-weight: bold; - } - &.error-status-hovered { - font-weight: bold; - background-color: $blue; - } - } - - .tree-element-text { - @extend %noselect; - position: relative; - padding-right: 5px; - &.error-status-selected { - font-weight: bold; - } } } - } } } - .software-product-attachments-separator { - border: 1px solid $tlv-light-gray; + .vsp-attachments-heat-validation-separator { + border-left: 1px solid $tlv-light-gray; height: 100%; width: 5px; cursor: e-resize; } - .software-product-attachments-error-list { - text-align: center; - margin-top: 12px; - display: flex; - align-content: flex-start; - flex-direction: column; - padding-left: 70px; - padding-right: 50px; + .message-board-section { + @extend .flex-column; + padding-left: 25px; + padding-top: 10px; + padding-right: 60px; overflow: auto; margin-bottom: 70px; .error-item { - &.selected { - background-color: $light-gray; - } - &.clicked { - color: $blue; - } - &.shifted { - margin-top: 20px; - } - text-align: left; - .error-item-file-name { - font-weight: bold; - } + display: flex; + margin: 10px 0; .error-item-file-type { + margin-left: 15px; + } + .error-file-name { + @extend .body-1-medium; margin-right: 5px; - &.strong { - font-weight: bold; - } - &.ERROR { - color: $red; - } - &.WARNING { - color: $yellow; - } } } - .error-item:hover { - cursor: default; - background-color: $tlv-hover; - } } } diff --git a/openecomp-ui/resources/scss/modules/_softwareProductComponentCompute.scss b/openecomp-ui/resources/scss/modules/_softwareProductComponentCompute.scss new file mode 100644 index 0000000000..164e3bc261 --- /dev/null +++ b/openecomp-ui/resources/scss/modules/_softwareProductComponentCompute.scss @@ -0,0 +1,3 @@ +.section-title.software-product-compute-number-of-vms{ + text-transform: initial; +} \ No newline at end of file diff --git a/openecomp-ui/resources/scss/modules/_softwareProductComponentGeneral.scss b/openecomp-ui/resources/scss/modules/_softwareProductComponentGeneral.scss index 4ff2d2c14a..67d76f5454 100644 --- a/openecomp-ui/resources/scss/modules/_softwareProductComponentGeneral.scss +++ b/openecomp-ui/resources/scss/modules/_softwareProductComponentGeneral.scss @@ -3,6 +3,9 @@ .one-line-textarea { height: 30px; } + .multi-line-textarea > textarea { + height: 113px; + } } .additional-validation-form { margin-top: 50px; diff --git a/openecomp-ui/resources/scss/modules/_softwareProductComponentNetwork.scss b/openecomp-ui/resources/scss/modules/_softwareProductComponentNetwork.scss index 6097f3ef52..e14ab02fcd 100644 --- a/openecomp-ui/resources/scss/modules/_softwareProductComponentNetwork.scss +++ b/openecomp-ui/resources/scss/modules/_softwareProductComponentNetwork.scss @@ -1,10 +1,5 @@ .vsp-components-network { .network-data { - .network-data-title { - @extend .body-2-medium; - padding-bottom: 20px; - padding-left: 15px; - } .single-col { .validation-input-wrapper { label { @@ -27,7 +22,14 @@ padding-right: 50px; padding-top: 20px; height: 500px; - overflow-y: auto; + .grid-section { + padding-bottom: 15px; + .section-title { + @extend .heading-5; + padding-bottom: 10px; + padding-left: 0px; + } + } .part-title { @extend .heading-5; padding-bottom: 10px; @@ -36,11 +38,44 @@ .part-title-small { @extend .heading-3; padding-bottom: 10px; - padding-left: 14px; + padding-left: 0px; } .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 { + padding-left: 0px; + &.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 new file mode 100644 index 0000000000..a6613190fd --- /dev/null +++ b/openecomp-ui/resources/scss/modules/_softwareProductComponentProcessesPage.scss @@ -0,0 +1,8 @@ +.edit-process-modal { + .vsp-process-dropzone-view .grid-section { + padding-bottom: 30px !important; + } + .component-process-description > textarea { + height: 113px; + } +} \ No newline at end of file diff --git a/openecomp-ui/resources/scss/modules/_softwareProductDependencies.scss b/openecomp-ui/resources/scss/modules/_softwareProductDependencies.scss new file mode 100644 index 0000000000..01a50dd741 --- /dev/null +++ b/openecomp-ui/resources/scss/modules/_softwareProductDependencies.scss @@ -0,0 +1,25 @@ +.software-product-dependencies { + .software-product-dependencies-title { + @extend .heading-1; + @extend .text-uppercase !optional; + margin-bottom: 20px; + color: $blue; + } + .select-action-table-controllers { + justify-content: flex-end; + cursor: pointer; + color: $blue; + padding-right: 33px; + margin-bottom: 3px; + &:hover { + color: $dark-blue; + } + } + .select-action-table-view { + min-width: 770px; + } + .select-action-table-header { + @extend .body-1-medium; + color: $text-black; + } +} \ No newline at end of file diff --git a/openecomp-ui/resources/scss/modules/_softwareProductLandingPage.scss b/openecomp-ui/resources/scss/modules/_softwareProductLandingPage.scss index e40bb38ea9..e75b110425 100644 --- a/openecomp-ui/resources/scss/modules/_softwareProductLandingPage.scss +++ b/openecomp-ui/resources/scss/modules/_softwareProductLandingPage.scss @@ -10,18 +10,40 @@ @extend .body-1-medium; } } + + .software-product-view { display: flex; height:100%; .description { @extend .body-1; - overflow: hidden; + // overflow: hidden; padding-right: 20px; - text-overflow: ellipsis; - display: -webkit-box; - -webkit-line-clamp: 2; - -webkit-box-orient: vertical; + // text-overflow: ellipsis; + // display: -webkit-box; + // -webkit-line-clamp: 2; + // -webkit-box-orient: vertical; + + .missing-license { + display: flex; + align-items: baseline; + .svg-icon.exclamation-triangle-full { + fill: $orange; + } + .warning-text { + position: relative; + top: -2px; + } + .svg-icon-wrapper { + margin-right: 7px; + margin-left: 3px; + .svg-icon { + height: 17px; + width: 17px; + } + } + } } .name { @extend .body-1-medium; @@ -29,11 +51,6 @@ .software-product-landing-view-right-side { @extend .flex; overflow-y: hidden; - .processes-page-title { - padding-top: 38px; - padding-left: 53px; - padding-bottom: 20px; - } .list-editor-view { .list-editor-view-title { margin-bottom: 0; @@ -53,22 +70,36 @@ .software-product-landing-view-top { .details-container { @extend .flex-column; + .single-detail-section { + @extend .flex-column; &.title-section { flex: 0.8; @extend .heading-5-medium; } + &.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; + @extend .flex-column; justify-content: space-between; .detail-col { - .title { - &.extra-large { - min-width: 130px; - } - } + padding-bottom: 10px; } } } @@ -107,8 +138,8 @@ .software-product-landing-view-top-block { cursor: pointer; border: 1px solid $light-gray; - padding: 28px 28px; - height: 250px; + padding: 20px 18px 0 18px; + height: 215px; display: flex; justify-content: space-between; background-color: $white; @@ -141,6 +172,7 @@ flex-direction: column; justify-content: center; border: 2px dashed $light-gray; + margin-bottom: 20px; @extend .body-1; align-items: center; .upload-btn { @@ -171,21 +203,10 @@ margin: 43px 0; padding: 0 52px; } - .section-title { - padding: 50px 0 30px 0; - &.general { - padding-top: 0; - } - } .validation-form-content { .vsp-general-tab-inline-section { display: flex; - &.coupling-items { - justify-content: flex-start; - .validation-input-wrapper:not(:last-child) { - margin-right: 40px; - } - } + .vsp-general-tab-sub-section:not(:last-of-type) { margin-right: 40px; } @@ -205,16 +226,6 @@ width: 440px; } } - - .vsp-general-tab-section { - &.licenses { - >.vsp-general-tab-inline-section { - .validation-input-wrapper:first-child { - margin-right: 40px; - } - } - } - } } .validation-buttons { position: fixed; @@ -223,7 +234,9 @@ width: 66%; } .validation-input-wrapper { - flex: none; + select.form-control { + width: 100%; + } } } } diff --git a/openecomp-ui/resources/scss/modules/_softwareProductNetworksPage.scss b/openecomp-ui/resources/scss/modules/_softwareProductNetworksPage.scss deleted file mode 100644 index 780f348374..0000000000 --- a/openecomp-ui/resources/scss/modules/_softwareProductNetworksPage.scss +++ /dev/null @@ -1,24 +0,0 @@ -.vsp-networks { - .wrapper { - display: flex; - height: 100%; - .left-side{ - height:100% - } - .right-side { - width:100%; - .network-data { - padding-left: 60px; - padding-right: 60px; - padding-top: 18px; - .network-data-title { - @extend .body-2-medium; - padding-bottom: 20px; - padding-left: 15px; - } - } - - } - } -} - diff --git a/openecomp-ui/resources/scss/modules/_softwareProductProcessesPage.scss b/openecomp-ui/resources/scss/modules/_softwareProductProcessesPage.scss index 167dad92e2..4956616687 100644 --- a/openecomp-ui/resources/scss/modules/_softwareProductProcessesPage.scss +++ b/openecomp-ui/resources/scss/modules/_softwareProductProcessesPage.scss @@ -51,12 +51,15 @@ opacity: 0.5; } } + .grid-section { + .section-title { + padding-bottom: 0px; + } + } } .validation-input-wrapper { - .form-group { - .vsp-process-description { - height: 200px; - } + .form-group.vsp-process-description > textarea { + height: 113px; } } } diff --git a/openecomp-ui/resources/scss/modules/_softwareproductComponentLoadBalancing.scss b/openecomp-ui/resources/scss/modules/_softwareproductComponentLoadBalancing.scss index 731ab89571..04cb3c2051 100644 --- a/openecomp-ui/resources/scss/modules/_softwareproductComponentLoadBalancing.scss +++ b/openecomp-ui/resources/scss/modules/_softwareproductComponentLoadBalancing.scss @@ -1,4 +1,13 @@ .vsp-components-load-balancing { + .svg-icon-wrapper { + position: relative; + top: -3px; + .svg-icon.chevron-up, .svg-icon.chevron-down { + width: 10px; + height: 10px; + } + } + .halb-data { .load-balancing-page-title { @extend .section-title; @@ -14,22 +23,15 @@ } .title { @extend .body-1-medium; - cursor: pointer; margin-bottom: 8px; - .fa { + cursor: pointer; + .svg-icon { @include transition(transform 0.3s); margin-right: 5px; - font-size: $icon-font-size; position: relative; - top: -1px; + top: 4px; } } - .row { - padding-left: 24px; - } - .col-md-9 { - padding-left: 8px; - } .add-padding { padding-bottom: 20px; } diff --git a/openecomp-ui/resources/scss/modules/_vspComponentQuestionnaire.scss b/openecomp-ui/resources/scss/modules/_vspComponentQuestionnaire.scss index aad628aac8..d194c678b9 100644 --- a/openecomp-ui/resources/scss/modules/_vspComponentQuestionnaire.scss +++ b/openecomp-ui/resources/scss/modules/_vspComponentQuestionnaire.scss @@ -11,18 +11,13 @@ } .component-questionnaire-validation-form { - - .section-sub-title { - @extend .heading-5; - padding-bottom: 10px; - } .section-field { textarea { height: 80px; } } - .rows-section { + .rows-section, .grid-items { .row-flex-components { display: flex; } diff --git a/openecomp-ui/resources/scss/modules/_vspHeatSetup.scss b/openecomp-ui/resources/scss/modules/_vspHeatSetup.scss new file mode 100644 index 0000000000..59e983686b --- /dev/null +++ b/openecomp-ui/resources/scss/modules/_vspHeatSetup.scss @@ -0,0 +1,316 @@ +@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; +} + +.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 { + padding-bottom: 20px; + margin-bottom: 20px; + 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; + + .Select-value-label { + @include ellipsis(85%); + } + + .validation-input-wrapper { + flex-basis: 48%; + } + + .control-label { + margin-bottom: 4px; + } + + .form-group { + margin-bottom: 12px; + } + } + } + + .modules-list-controllers { + text-align: right; + .btn-link { + &[disabled] { + color: $gray; + } + @extend .body-1; + color: $blue; + &:last-child { + padding-right: 0; + } + &:hover { + color: $dark-blue; + text-decoration: none; + } + } + } + + .modules-list-item-controllers { + display: flex; + justify-content: space-between; + margin-bottom: 7px; + + .btn { + min-width: 0; + } + + .svg-icon.trash-o { + fill: $dark-gray; + height: 18px; + width: 18px; + &:hover { + fill: $black; + } + } + .module-title-by-type { + @extend .heading-5-medium; + margin-right: 3px; + } + .modules-list-item-filename { + display: flex; + align-items: center; + + .svg-icon.pencil { + height: 15px; + width: 15px; + margin-left: 3px; + opacity: 0; + } + + .filename-text { + @extend .heading-5-medium; + + } + + .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-medium; + 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; + 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-medium; + background-color: $white; + } + &.is-focused { + background-color: $blue; + color: $white; + } + } + .add-or-delete-volumes { + .svg-icon-wrapper { + margin-right: 8px; + .svg-icon { + height: 10px; + width: 10px; + fill: $blue; + } + } + cursor: pointer; + color: $blue; + margin-bottom: 11px; + &:hover { + color: $dark-blue; + .svg-icon { + fill: $dark-blue; + } + } + } + &: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; + margin-top: 20px; + + &.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-medium; + display: flex; + margin-bottom: 10px; + justify-content: space-between; + .image-icon.artifacts { + margin-right: 10px; + } + + span { + display: flex; + } + + .add-all-unassigned { + @extend .body-1; + margin-bottom: 0; + color: $blue; + cursor: pointer; + &:hover { + color: $dark-blue; + } + } + } + } + } + + .unassigned-files { + margin-top: 30px; + border: 1px solid $light-gray; + width: 25%; + background-color: $white; + height: 250px; + width: 250px; + + // Will work in chrome from chrome 56 + position: sticky; + top: 10px; + + .unassigned-files-title { + @extend .heading-5-medium; + 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; + } + .link { + color: $blue; + cursor: pointer; + display: flex; + align-items: center; + margin-bottom: 10px; + .svg-icon.angle-right { + height: 10px; + width: 10px; + margin-left: 7px; + fill: $blue; + } + &:hover { + color: $dark-blue; + .svg-icon.angle-right { + fill: $dark-blue; + } + } + } + } + + .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/onboardingCatalog/_catalogHeader.scss b/openecomp-ui/resources/scss/modules/onboardingCatalog/_catalogHeader.scss new file mode 100644 index 0000000000..d29a95d3d6 --- /dev/null +++ b/openecomp-ui/resources/scss/modules/onboardingCatalog/_catalogHeader.scss @@ -0,0 +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: 13px; + } + .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 new file mode 100644 index 0000000000..071268c50d --- /dev/null +++ b/openecomp-ui/resources/scss/modules/onboardingCatalog/_catalogList.scss @@ -0,0 +1,31 @@ +.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; + } + + .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%; + } + } + + // 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 new file mode 100644 index 0000000000..5ce8e12ec3 --- /dev/null +++ b/openecomp-ui/resources/scss/modules/onboardingCatalog/_catalogTile.scss @@ -0,0 +1,139 @@ +.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:23px; + .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-medium; + color: $gray; + line-height: 12px; + @include ellipsis(auto,inline-block,178px); + } + + } + .catalog-tile-item-name { + @extend .heading-5-medium; + color: $black; + @include ellipsis(auto,inline-block,175px); + } + } + .catalog-tile-icon { + + width: 58px; + height: 58px; + text-align: center; + justify-content: center; + display: flex; + + .icon { + align-self: center; + height: 58px; + width: 58px; + margin-left: 122px; + background-repeat: no-repeat; + .svg-icon { + &.vendor { + fill: $dark-gray; + margin-top: 22px; + width: 53px; + height: 47px; + &:hover { + fill: $dark-gray; + } + } + &.vsp { + fill: $light-blue; + margin-top: 18px; + margin-left: 3px; + width: 60px; + height: 40px; + } + &.vlm { + fill: $purple; + margin-top: 18px; + width: 45px; + height: 53px; + } + + } + } + } + .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-medium; + .svg-icon.plus { + height: 9px; + width: 9px; + fill: $blue; + } + .catalog-tile-item-details { + overflow: hidden; + } + + .catalog-tile-add-new-vsp { + color: $blue; + margin-left:40px; + } + .catalog-tile-locking-user-name { + @extend .body-2; + @include ellipsis(auto,inline-block,180px); + } + .catalog-tile-check-in-status { + .svg-icon-wrapper { + .svg-icon { + &.locked { + margin-left: 7px; + width: 11px; + fill: $gray; + } + &.unlocked { + margin-left: 7px; + width: 11px; + fill: $gray; + } + } + } + } + } +} diff --git a/openecomp-ui/resources/scss/modules/onboardingCatalog/_createItemTile.scss b/openecomp-ui/resources/scss/modules/onboardingCatalog/_createItemTile.scss new file mode 100644 index 0000000000..b9f83fc452 --- /dev/null +++ b/openecomp-ui/resources/scss/modules/onboardingCatalog/_createItemTile.scss @@ -0,0 +1,71 @@ +.create-catalog-item-wrapper { + 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); + + 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-medium; + } + } + .create-item-plus-icon{ + width: 19px; + height: 19px; + margin: -5px 12px 0 0; + .svg-icon.plus { + height: 19px; + width: 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: $blue; + } + } + .create-item-text { + width: 140px; + @extend .heading-5-medium; + } + } +} diff --git a/openecomp-ui/resources/scss/modules/onboardingCatalog/_onboardHeader.scss b/openecomp-ui/resources/scss/modules/onboardingCatalog/_onboardHeader.scss new file mode 100644 index 0000000000..da4c017d39 --- /dev/null +++ b/openecomp-ui/resources/scss/modules/onboardingCatalog/_onboardHeader.scss @@ -0,0 +1,31 @@ +.onboard-header { + padding-top: 8px; + display: flex; + flex-direction: row; + justify-content: flex-end; + background-color: $tlv-light-gray; + margin-bottom: 2px; + @include box-shadow(0px 1px 3px 0 rgba(0, 0, 0, 0.2)); + .expandable-input-top { + margin-right: 60px; + margin-left: auto; + } + .onboard-header-tabs { + display: flex; + flex-direction: row; + margin-left: 60px; + .onboard-header-tab { + @extend .body-1-medium; + 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 new file mode 100644 index 0000000000..217098fb97 --- /dev/null +++ b/openecomp-ui/resources/scss/modules/onboardingCatalog/_tile.scss @@ -0,0 +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; + } +} diff --git a/openecomp-ui/resources/scss/modules/onboardingCatalog/_vendorPageHeader.scss b/openecomp-ui/resources/scss/modules/onboardingCatalog/_vendorPageHeader.scss new file mode 100644 index 0000000000..f1af28a0a0 --- /dev/null +++ b/openecomp-ui/resources/scss/modules/onboardingCatalog/_vendorPageHeader.scss @@ -0,0 +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; + } + } +} diff --git a/openecomp-ui/resources/scss/modules/onboardingCatalog/_vendorTile.scss b/openecomp-ui/resources/scss/modules/onboardingCatalog/_vendorTile.scss new file mode 100644 index 0000000000..79a64f84ee --- /dev/null +++ b/openecomp-ui/resources/scss/modules/onboardingCatalog/_vendorTile.scss @@ -0,0 +1,88 @@ +@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; + } + } + } + } +} + + +.catalog-tile.vendor-type { + position: relative; + .catalog-tile-top { + .catalog-tile-item-name { + margin-top:21px; + } + .catalog-tile-vsp-count { + @extend .body-3-medium; + 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 ; + } + } + } + + .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 new file mode 100644 index 0000000000..721a4f3f22 --- /dev/null +++ b/openecomp-ui/resources/scss/modules/onboardingCatalog/_vlmTile.scss @@ -0,0 +1,8 @@ +.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 new file mode 100644 index 0000000000..8816ca5df9 --- /dev/null +++ b/openecomp-ui/resources/scss/modules/onboardingCatalog/_vspOverlay.scss @@ -0,0 +1,74 @@ +.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-medium; + 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: uppercase; + @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 f146b3910b..6b892ac0a4 100644 --- a/openecomp-ui/resources/scss/onboarding.scss +++ b/openecomp-ui/resources/scss/onboarding.scss @@ -1,10 +1,68 @@ .dox-ui { - @import "bootstrap"; + @import "bootstrap"; + @import "~react-select/dist/react-select.min.css"; - @import "../css/font-awesome.min.css"; - @import "~react-select/dist/react-select.min.css"; + @import "common"; + @import "components"; + @import "modules"; +} + +/* Out of namespace context for tooltips */ +div[data-reactroot].tooltip { + @import "common/variables"; + @import "common/typography"; + + &.in { + opacity: 1; + } + &.validation-error-message { + &.bottom { + .tooltip-arrow { + border-bottom-color: $red !important; + } + } + } + &.bottom { + .tooltip-arrow { + border-bottom-color: $dark-gray !important; + } + } + &.top { + .tooltip-arrow { + border-top-color: $dark-gray !important; + } + } + .tooltip-inner { + max-width: 100%; + background-color: $dark-gray; + } + + // activity log tooltip + &.activity-log-message-tooltip { + @include base-font-regular; + font-size: $body-font-2; + .message-block { + text-align: left; + padding: 3px 12px; + } + } + //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; + } - @import "common"; - @import "components"; - @import "modules"; + .tooltip-inner { + background-color: $red; + padding: 6px 8px; + font-size: $body-font-2; + } + } } -- cgit 1.2.3-korg