summaryrefslogtreecommitdiffstats
path: root/openecomp-ui/resources/scss
diff options
context:
space:
mode:
authorAviZi <avi.ziv@amdocs.com>2017-06-09 02:39:56 +0300
committerAviZi <avi.ziv@amdocs.com>2017-06-09 02:39:56 +0300
commit280f8015d06af1f41a3ef12e8300801c7a5e0d54 (patch)
tree9c1d3978c04cd28068f02073038c936bb49ca9e0 /openecomp-ui/resources/scss
parentfd3821dad11780d33c5373d74c957c442489945e (diff)
[SDC-29] Amdocs OnBoard 1707 initial commit.
Change-Id: Ie4d12a3f574008b792899b368a0902a8b46b5370 Signed-off-by: AviZi <avi.ziv@amdocs.com>
Diffstat (limited to 'openecomp-ui/resources/scss')
-rw-r--r--openecomp-ui/resources/scss/_components.scss34
-rw-r--r--openecomp-ui/resources/scss/_modules.scss10
-rw-r--r--openecomp-ui/resources/scss/bootstrap-cust/_forms.scss3
-rw-r--r--openecomp-ui/resources/scss/bootstrap-cust/_modals.scss7
-rw-r--r--openecomp-ui/resources/scss/bootstrap-cust/_variables.scss5
-rw-r--r--openecomp-ui/resources/scss/common/_base.scss8
-rw-r--r--openecomp-ui/resources/scss/common/_layout.scss7
-rw-r--r--openecomp-ui/resources/scss/common/_typography.scss84
-rw-r--r--openecomp-ui/resources/scss/common/_utils.scss189
-rw-r--r--openecomp-ui/resources/scss/common/_variables.scss66
-rw-r--r--openecomp-ui/resources/scss/components/_activityLog.scss104
-rw-r--r--openecomp-ui/resources/scss/components/_buttons.scss15
-rw-r--r--openecomp-ui/resources/scss/components/_dualListBox.scss10
-rw-r--r--openecomp-ui/resources/scss/components/_expandableInput.scss108
-rw-r--r--openecomp-ui/resources/scss/components/_forms.scss49
-rw-r--r--openecomp-ui/resources/scss/components/_grid.scss64
-rw-r--r--openecomp-ui/resources/scss/components/_icon.scss164
-rw-r--r--openecomp-ui/resources/scss/components/_inputOptions.scss48
-rw-r--r--openecomp-ui/resources/scss/components/_listEditorView.scss145
-rw-r--r--openecomp-ui/resources/scss/components/_navigationSideBar.scss6
-rw-r--r--openecomp-ui/resources/scss/components/_selectActionTable.scss152
-rw-r--r--openecomp-ui/resources/scss/components/_slidePanel.scss35
-rw-r--r--openecomp-ui/resources/scss/components/_submitErrorResponse.scss37
-rw-r--r--openecomp-ui/resources/scss/components/_svgIcon.scss51
-rw-r--r--openecomp-ui/resources/scss/components/_validationForm.scss24
-rw-r--r--openecomp-ui/resources/scss/components/_versionController.scss196
-rw-r--r--openecomp-ui/resources/scss/modules/_entitlementPools.scss30
-rw-r--r--openecomp-ui/resources/scss/modules/_featureGroup.scss15
-rw-r--r--openecomp-ui/resources/scss/modules/_licenseAgreement.scss30
-rw-r--r--openecomp-ui/resources/scss/modules/_licenseKeyGroup.scss16
-rw-r--r--openecomp-ui/resources/scss/modules/_licenseModelOverview.scss491
-rw-r--r--openecomp-ui/resources/scss/modules/_onboardingCatalog.scss180
-rw-r--r--openecomp-ui/resources/scss/modules/_softwareProductAttachmentPage.scss284
-rw-r--r--openecomp-ui/resources/scss/modules/_softwareProductComponentCompute.scss3
-rw-r--r--openecomp-ui/resources/scss/modules/_softwareProductComponentGeneral.scss3
-rw-r--r--openecomp-ui/resources/scss/modules/_softwareProductComponentNetwork.scss49
-rw-r--r--openecomp-ui/resources/scss/modules/_softwareProductComponentProcessesPage.scss8
-rw-r--r--openecomp-ui/resources/scss/modules/_softwareProductDependencies.scss25
-rw-r--r--openecomp-ui/resources/scss/modules/_softwareProductLandingPage.scss95
-rw-r--r--openecomp-ui/resources/scss/modules/_softwareProductNetworksPage.scss24
-rw-r--r--openecomp-ui/resources/scss/modules/_softwareProductProcessesPage.scss11
-rw-r--r--openecomp-ui/resources/scss/modules/_softwareproductComponentLoadBalancing.scss22
-rw-r--r--openecomp-ui/resources/scss/modules/_vspComponentQuestionnaire.scss7
-rw-r--r--openecomp-ui/resources/scss/modules/_vspHeatSetup.scss316
-rw-r--r--openecomp-ui/resources/scss/modules/onboardingCatalog/_catalogHeader.scss33
-rw-r--r--openecomp-ui/resources/scss/modules/onboardingCatalog/_catalogList.scss31
-rw-r--r--openecomp-ui/resources/scss/modules/onboardingCatalog/_catalogTile.scss139
-rw-r--r--openecomp-ui/resources/scss/modules/onboardingCatalog/_createItemTile.scss71
-rw-r--r--openecomp-ui/resources/scss/modules/onboardingCatalog/_onboardHeader.scss31
-rw-r--r--openecomp-ui/resources/scss/modules/onboardingCatalog/_tile.scss14
-rw-r--r--openecomp-ui/resources/scss/modules/onboardingCatalog/_vendorPageHeader.scss21
-rw-r--r--openecomp-ui/resources/scss/modules/onboardingCatalog/_vendorTile.scss88
-rw-r--r--openecomp-ui/resources/scss/modules/onboardingCatalog/_vlmTile.scss8
-rw-r--r--openecomp-ui/resources/scss/modules/onboardingCatalog/_vspOverlay.scss74
-rw-r--r--openecomp-ui/resources/scss/onboarding.scss70
55 files changed, 2950 insertions, 860 deletions
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;
+ }
+ }
}