aboutsummaryrefslogtreecommitdiffstats
path: root/openecomp-ui/resources/scss
diff options
context:
space:
mode:
authorAvi Ziv <avi.ziv@amdocs.com>2017-07-18 19:45:38 +0300
committerAvi Ziv <avi.ziv@amdocs.com>2017-07-18 19:45:38 +0300
commitb8e2faf476202b6ffe61bc3a9a37df1304881d40 (patch)
treef78b8c0517d8e16c5ae610bf8b49f68ea8a312a1 /openecomp-ui/resources/scss
parent75aacbbe1acf78fa53378f07f0a8c7769449a17e (diff)
[SDC] Onboarding 1710 rebase.
Change-Id: If3b6b81d221fde13908f1e8160db6f7d9433c535 Signed-off-by: Avi Ziv <avi.ziv@amdocs.com>
Diffstat (limited to 'openecomp-ui/resources/scss')
-rw-r--r--openecomp-ui/resources/scss/_components.scss2
-rw-r--r--openecomp-ui/resources/scss/_modules.scss3
-rw-r--r--openecomp-ui/resources/scss/bootstrap-cust/_forms.scss2
-rw-r--r--openecomp-ui/resources/scss/bootstrap-cust/_modals.scss6
-rw-r--r--openecomp-ui/resources/scss/bootstrap-cust/_navs.scss2
-rw-r--r--openecomp-ui/resources/scss/bootstrap-cust/_variables.scss2
-rw-r--r--openecomp-ui/resources/scss/bootstrap.scss8
-rw-r--r--openecomp-ui/resources/scss/bootstrap/_mixins.scss2
-rw-r--r--openecomp-ui/resources/scss/common/_typography.scss53
-rw-r--r--openecomp-ui/resources/scss/components/_activityLog.scss4
-rw-r--r--openecomp-ui/resources/scss/components/_buttons.scss3
-rw-r--r--openecomp-ui/resources/scss/components/_datepicker.scss51
-rw-r--r--openecomp-ui/resources/scss/components/_forms.scss2
-rw-r--r--openecomp-ui/resources/scss/components/_grid.scss4
-rw-r--r--openecomp-ui/resources/scss/components/_listEditorView.scss15
-rw-r--r--openecomp-ui/resources/scss/components/_navigationSideBar.scss6
-rw-r--r--openecomp-ui/resources/scss/components/_notifications.scss4
-rw-r--r--openecomp-ui/resources/scss/components/_selectActionTable.scss55
-rw-r--r--openecomp-ui/resources/scss/components/_submitErrorResponse.scss4
-rw-r--r--openecomp-ui/resources/scss/components/_svgIcon.scss51
-rw-r--r--openecomp-ui/resources/scss/components/_validationForm.scss3
-rw-r--r--openecomp-ui/resources/scss/components/_versionController.scss12
-rw-r--r--openecomp-ui/resources/scss/modules/_featureGroup.scss2
-rw-r--r--openecomp-ui/resources/scss/modules/_licenseKeyGroup.scss2
-rw-r--r--openecomp-ui/resources/scss/modules/_licenseModel.scss2
-rw-r--r--openecomp-ui/resources/scss/modules/_licenseModelOverview.scss8
-rw-r--r--openecomp-ui/resources/scss/modules/_softwareProductAttachmentPage.scss19
-rw-r--r--openecomp-ui/resources/scss/modules/_softwareProductComponentGeneral.scss7
-rw-r--r--openecomp-ui/resources/scss/modules/_softwareProductComponentImage.scss58
-rw-r--r--openecomp-ui/resources/scss/modules/_softwareProductComponentNetwork.scss35
-rw-r--r--openecomp-ui/resources/scss/modules/_softwareProductComponentProcessesPage.scss4
-rw-r--r--openecomp-ui/resources/scss/modules/_softwareProductCreatePage.scss2
-rw-r--r--openecomp-ui/resources/scss/modules/_softwareProductDependencies.scss6
-rw-r--r--openecomp-ui/resources/scss/modules/_softwareProductDeployment.scss55
-rw-r--r--openecomp-ui/resources/scss/modules/_softwareProductLandingPage.scss14
-rw-r--r--openecomp-ui/resources/scss/modules/_softwareProductProcessesPage.scss13
-rw-r--r--openecomp-ui/resources/scss/modules/_softwareproductComponentLoadBalancing.scss80
-rw-r--r--openecomp-ui/resources/scss/modules/_vspComponentCompute.scss19
-rw-r--r--openecomp-ui/resources/scss/modules/_vspComponentMonitoring.scss8
-rw-r--r--openecomp-ui/resources/scss/modules/_vspComponentQuestionnaire.scss2
-rw-r--r--openecomp-ui/resources/scss/modules/_vspHeatSetup.scss45
-rw-r--r--openecomp-ui/resources/scss/modules/onboardingCatalog/_catalogTile.scss167
-rw-r--r--openecomp-ui/resources/scss/modules/onboardingCatalog/_createItemTile.scss12
-rw-r--r--openecomp-ui/resources/scss/modules/onboardingCatalog/_onboardHeader.scss2
-rw-r--r--openecomp-ui/resources/scss/modules/onboardingCatalog/_vendorTile.scss130
-rw-r--r--openecomp-ui/resources/scss/modules/onboardingCatalog/_vspOverlay.scss2
-rw-r--r--openecomp-ui/resources/scss/onboarding.scss81
47 files changed, 679 insertions, 390 deletions
diff --git a/openecomp-ui/resources/scss/_components.scss b/openecomp-ui/resources/scss/_components.scss
index bd85f547c9..c70b914187 100644
--- a/openecomp-ui/resources/scss/_components.scss
+++ b/openecomp-ui/resources/scss/_components.scss
@@ -17,9 +17,9 @@
@import "components/expandableInput";
@import "components/grid";
@import "components/icon";
-@import "components/svgIcon";
@import "components/activityLog";
@import "components/selectActionTable";
+@import "components/datepicker";
%noselect {
-webkit-touch-callout: none;
diff --git a/openecomp-ui/resources/scss/_modules.scss b/openecomp-ui/resources/scss/_modules.scss
index 578895dfe0..317f90800f 100644
--- a/openecomp-ui/resources/scss/_modules.scss
+++ b/openecomp-ui/resources/scss/_modules.scss
@@ -12,7 +12,9 @@
@import "modules/_softwareProductComponentGeneral";
@import "modules/_softwareproductComponentLoadBalancing";
@import "modules/_softwareProductComponentProcessesPage";
+@import "modules/_softwareProductComponentImage";
@import "modules/softwareProductComponentCompute";
+@import "modules/vspComponentCompute";
@import "modules/vspComponentMonitoring";
@import "modules/licenseModel";
@import "modules/onboardingCatalog";
@@ -20,3 +22,4 @@
@import "modules/uploadScreen";
@import "modules/vspHeatSetup";
@import "modules/softwareProductDependencies";
+@import "modules/softwareProductDeployment";
diff --git a/openecomp-ui/resources/scss/bootstrap-cust/_forms.scss b/openecomp-ui/resources/scss/bootstrap-cust/_forms.scss
index 8085274cac..60fd7ab07d 100644
--- a/openecomp-ui/resources/scss/bootstrap-cust/_forms.scss
+++ b/openecomp-ui/resources/scss/bootstrap-cust/_forms.scss
@@ -1,6 +1,6 @@
.form-group {
.control-label {
- @extend .body-2-medium;
+ @extend .body-2-semibold;
}
&.required {
label:before {
diff --git a/openecomp-ui/resources/scss/bootstrap-cust/_modals.scss b/openecomp-ui/resources/scss/bootstrap-cust/_modals.scss
index 6a825b811e..9301f1ed39 100644
--- a/openecomp-ui/resources/scss/bootstrap-cust/_modals.scss
+++ b/openecomp-ui/resources/scss/bootstrap-cust/_modals.scss
@@ -19,5 +19,11 @@
padding: 15px;
border-top: 0;
background-color: $tlv-gray;
+ .sdc-modal-footer {
+ .sdc-button + .sdc-button {
+ margin-left: 5px;
+ }
+ }
+
}
}
diff --git a/openecomp-ui/resources/scss/bootstrap-cust/_navs.scss b/openecomp-ui/resources/scss/bootstrap-cust/_navs.scss
index 7b9cff963d..914a7794f1 100644
--- a/openecomp-ui/resources/scss/bootstrap-cust/_navs.scss
+++ b/openecomp-ui/resources/scss/bootstrap-cust/_navs.scss
@@ -22,7 +22,7 @@
&,
&:hover,
&:focus {
- @extend .body-1-medium;
+ @extend .body-1-semibold;
border-bottom: 3px solid $blue;
}
}
diff --git a/openecomp-ui/resources/scss/bootstrap-cust/_variables.scss b/openecomp-ui/resources/scss/bootstrap-cust/_variables.scss
index 1af39d5b39..1c053e500b 100644
--- a/openecomp-ui/resources/scss/bootstrap-cust/_variables.scss
+++ b/openecomp-ui/resources/scss/bootstrap-cust/_variables.scss
@@ -28,7 +28,7 @@ $link-hover-color: $blue;
//== Typography
//
//## Font, line-height, and color for body text, headings, and more.
-$font-family-sans-serif: omnes-regular, "Omnes-Regular", "Helvetica Neue", Helvetica, Arial, sans-serif;
+$font-family-sans-serif: "Open Sans", "Helvetica Neue", Helvetica, Arial, sans-serif;
//$font-family-base: $font-family-sans-serif !default;
$font-size-base: $body-font-2;
$font-size-large: $body-font-1;
diff --git a/openecomp-ui/resources/scss/bootstrap.scss b/openecomp-ui/resources/scss/bootstrap.scss
index a8c470216d..777f490a89 100644
--- a/openecomp-ui/resources/scss/bootstrap.scss
+++ b/openecomp-ui/resources/scss/bootstrap.scss
@@ -7,12 +7,12 @@
@import "bootstrap/variables";
@import "bootstrap/mixins";
// Reset and dependencies
-@import "bootstrap/normalize";
+//@import "bootstrap/normalize";
//@import "bootstrap/print";
//@import "bootstrap/glyphicons";
// Core CSS
-@import "bootstrap/scaffolding";
+//@import "bootstrap/scaffolding";
@import "bootstrap/type";
@import "bootstrap/code";
@import "bootstrap/grid";
@@ -20,8 +20,8 @@
@import "bootstrap-cust/tables";
@import "bootstrap/forms";
@import "bootstrap-cust/forms";
-@import "bootstrap/buttons";
-@import "bootstrap-cust/buttons";
+//@import "bootstrap/buttons";
+//@import "bootstrap-cust/buttons";
// Components
@import "bootstrap/component-animations";
@import "bootstrap/dropdowns";
diff --git a/openecomp-ui/resources/scss/bootstrap/_mixins.scss b/openecomp-ui/resources/scss/bootstrap/_mixins.scss
index 62dfda69dc..3d08c9b390 100644
--- a/openecomp-ui/resources/scss/bootstrap/_mixins.scss
+++ b/openecomp-ui/resources/scss/bootstrap/_mixins.scss
@@ -16,7 +16,7 @@
@import "mixins/vendor-prefixes";
// Components
@import "mixins/alerts";
-@import "mixins/buttons";
+//@import "mixins/buttons";
@import "mixins/panels";
@import "mixins/pagination";
@import "mixins/list-group";
diff --git a/openecomp-ui/resources/scss/common/_typography.scss b/openecomp-ui/resources/scss/common/_typography.scss
index 1543f0adcd..94e1ba4d61 100644
--- a/openecomp-ui/resources/scss/common/_typography.scss
+++ b/openecomp-ui/resources/scss/common/_typography.scss
@@ -1,22 +1,26 @@
/* Fonts */
@mixin base-font-regular() {
- font-family: omnes-regular, Arial, sans-serif;
+ font-family: OpenSans, OpenSans-Regular, 'Open Sans',omnes-regular, Arial, sans-serif;
}
@mixin base-font-light() {
- font-family: omnes-light, Arial, sans-serif;
+ font-family: OpenSans-Light, 'Open Sans', omnes-light, Arial, sans-serif;
}
-@mixin base-font-medium() {
- font-family: omnes-medium, Arial, sans-serif;
+@mixin base-font-italic(){
+ font-family: OpenSans-Italic, 'Open Sans', omnes-italic, Arial, sans-serif;
+}
+
+@mixin base-font-semibold() {
+ font-family: OpenSans-Semibold, 'Open Sans', omnes-medium, Arial, sans-serif;
}
@mixin base-font-bold() {
- font-family: omnes-bold, Arial, sans-serif;
+ font-family: OpenSans-Bold, 'Open Sans', omnes-bold, Arial, sans-serif;
}
-$heading-font-1: 36px;
+$heading-font-1: 28px;
$heading-font-2: 24px;
$heading-font-3: 20px;
$heading-font-4: 18px;
@@ -25,6 +29,7 @@ $heading-font-5: 16px;
$body-font-1: 14px;
$body-font-2: 13px;
$body-font-3: 12px;
+$body-font-4: 10px;
$icon-font-size: 11px;
$icon-font-family: Arial;
@@ -52,8 +57,8 @@ $radio-font-family: Arial;
@extend .text-uppercase !optional;
}
-.heading-3-medium {
- @include base-font-medium;
+.heading-3-semibold {
+ @include base-font-semibold;
font-size: $heading-font-3;
@extend .text-uppercase !optional;
}
@@ -63,8 +68,8 @@ $radio-font-family: Arial;
font-size: $heading-font-4;
}
-.heading-4-medium {
- @include base-font-medium;
+.heading-4-semibold {
+ @include base-font-semibold;
font-size: $heading-font-4;
}
@@ -73,8 +78,8 @@ $radio-font-family: Arial;
font-size: $heading-font-5;
}
-.heading-5-medium {
- @include base-font-medium;
+.heading-5-semibold {
+ @include base-font-semibold;
font-size: $heading-font-5;
}
@@ -83,8 +88,8 @@ $radio-font-family: Arial;
font-size: $body-font-1;
}
-.body-1-medium {
- @include base-font-medium;
+.body-1-semibold {
+ @include base-font-semibold;
font-size: $body-font-1;
}
@@ -98,8 +103,8 @@ $radio-font-family: Arial;
font-size: $body-font-2;
}
-.body-2-medium {
- @include base-font-medium;
+.body-2-semibold {
+ @include base-font-semibold;
font-size: $body-font-2;
}
@@ -108,18 +113,28 @@ $radio-font-family: Arial;
font-size: $body-font-3;
}
-.body-3-medium {
- @include base-font-medium;
+.body-3-semibold {
+ @include base-font-semibold;
font-size: $body-font-3;
}
+.body-4 {
+ @include base-font-regular;
+ font-size: $body-font-4;
+}
+
+.body-4-semibold {
+ @include base-font-semibold;
+ font-size: $body-font-4;
+}
+
.body-3-light {
@include base-font-light;
font-size: $body-font-3;
}
.circle-icon-text {
- @include base-font-medium;
+ @include base-font-semibold;
font-size: $body-font-1;
}
diff --git a/openecomp-ui/resources/scss/components/_activityLog.scss b/openecomp-ui/resources/scss/components/_activityLog.scss
index 1e31e06814..9ada804934 100644
--- a/openecomp-ui/resources/scss/components/_activityLog.scss
+++ b/openecomp-ui/resources/scss/components/_activityLog.scss
@@ -29,7 +29,7 @@ $message-info-icon-size: 16px;
height: 36px;
@extend .body-1;
&.header {
- @extend .body-1-medium;
+ @extend .body-1-semibold;
background-color: $tlv-light-gray;
color: $text-black;
}
@@ -39,7 +39,7 @@ $message-info-icon-size: 16px;
.svg-icon-wrapper {
float: right;
}
- .check-circle {
+ .checkCircle {
fill: $green;
width: 16px;
height: 16px;
diff --git a/openecomp-ui/resources/scss/components/_buttons.scss b/openecomp-ui/resources/scss/components/_buttons.scss
index fbf2c3e728..357a799e93 100644
--- a/openecomp-ui/resources/scss/components/_buttons.scss
+++ b/openecomp-ui/resources/scss/components/_buttons.scss
@@ -2,8 +2,7 @@
border: 1px solid;
border-color: $blue;
color: $blue;
- font-weight: bolder;
- @extend .body-1;
+ @extend .body-1-semibold;
text-align: center;
padding: 7px;
border-radius: 5px;
diff --git a/openecomp-ui/resources/scss/components/_datepicker.scss b/openecomp-ui/resources/scss/components/_datepicker.scss
new file mode 100644
index 0000000000..593bb09d7d
--- /dev/null
+++ b/openecomp-ui/resources/scss/components/_datepicker.scss
@@ -0,0 +1,51 @@
+.customized-date-picker {
+ margin-bottom: 24px;
+ .date-picker-label {
+ &.required {
+ &:before {
+ content: "*";
+ color: $red;
+ margin: 0 4px 0 0;
+ }
+ }
+
+ @extend .body-2-semibold;
+ color: $dark-gray;
+ margin-bottom: 8px;
+ }
+ .datepicker-custom-input {
+ display: flex;
+ justify-content: space-between;
+ width: 243px;
+ height: 30px;
+ border-radius: 2px;
+ color: $dark-gray;
+ border: 1px solid $light-gray;
+ padding: 6px 12px;
+ &:hover {
+ border-color: $gray;
+ .clear-input {
+ &:before {
+ cursor: pointer;
+ content: 'x';
+ }
+ }
+ }
+ .datepicker-text {
+ cursor: pointer;
+ width: 170px;
+ @extend .body-1;
+ &.placeholder {
+ color: $light-gray;
+ }
+
+ }
+ .calendar-input {
+ fill: $light-gray;
+ }
+ }
+
+
+
+}
+
diff --git a/openecomp-ui/resources/scss/components/_forms.scss b/openecomp-ui/resources/scss/components/_forms.scss
index 23c58ea4ac..b662ce873c 100644
--- a/openecomp-ui/resources/scss/components/_forms.scss
+++ b/openecomp-ui/resources/scss/components/_forms.scss
@@ -1,5 +1,5 @@
.section-title {
- @extend .heading-3-medium;
+ @extend .heading-3-semibold;
padding: 50px 0 30px 0;
&:first-child {
padding: 0 0 30px 0;
diff --git a/openecomp-ui/resources/scss/components/_grid.scss b/openecomp-ui/resources/scss/components/_grid.scss
index d4d1fa7ccd..9a76f97546 100644
--- a/openecomp-ui/resources/scss/components/_grid.scss
+++ b/openecomp-ui/resources/scss/components/_grid.scss
@@ -1,7 +1,9 @@
$gridItemSpace: 15%;
.grid-section {
- padding-bottom: 30px;
+ &:not(:last-of-type) {
+ padding-bottom: 30px;
+ }
.grid-items {
display: flex;
flex-direction: row;
diff --git a/openecomp-ui/resources/scss/components/_listEditorView.scss b/openecomp-ui/resources/scss/components/_listEditorView.scss
index 18d5426eb7..1c837ca4c2 100644
--- a/openecomp-ui/resources/scss/components/_listEditorView.scss
+++ b/openecomp-ui/resources/scss/components/_listEditorView.scss
@@ -15,16 +15,16 @@
border-bottom: 1px solid $light-gray;
padding-bottom: 5px;
.list-editor-view-title {
- @extend .heading-3-medium;
+ @extend .heading-3-semibold;
}
.list-editor-view-add-controller {
- @extend .heading-4-medium;
+ @extend .body-1-semibold;
color: $blue;
display: table;
cursor: pointer;
position: relative;
- padding-top: 0px;
- padding-bottom: 0px;
+ padding-top: 0;
+ padding-bottom: 0;
margin-left: auto;
.list-editor-view-add-title {
display: flex;
@@ -151,6 +151,13 @@
}
}
+ .details-col{
+ flex-direction: column;
+ .title {
+ padding-bottom: 0;
+ }
+ }
+
.description {
@extend .body-1;
@include multiline-ellipsis(1.3em, 3);
diff --git a/openecomp-ui/resources/scss/components/_navigationSideBar.scss b/openecomp-ui/resources/scss/components/_navigationSideBar.scss
index 36c14a2785..daf5025bee 100644
--- a/openecomp-ui/resources/scss/components/_navigationSideBar.scss
+++ b/openecomp-ui/resources/scss/components/_navigationSideBar.scss
@@ -16,7 +16,7 @@
flex-direction: column;
background-color: $tlv-gray;
.group-name {
- @extend .heading-4-medium;
+ @extend .heading-4-semibold;
@include ellipsis;
min-height: 56px;
display: block;
@@ -47,13 +47,13 @@
@include ellipsis;
white-space: normal;
&.selected {
- @extend .body-1-medium;
+ @extend .body-1-semibold;
border-left: 4px solid $blue;
padding-left: 18px;
color: $blue;
}
&.bold-name {
- @extend .body-1-medium;
+ @extend .body-1-semibold;
}
}
}
diff --git a/openecomp-ui/resources/scss/components/_notifications.scss b/openecomp-ui/resources/scss/components/_notifications.scss
index 426f05cd89..7165e57ef9 100644
--- a/openecomp-ui/resources/scss/components/_notifications.scss
+++ b/openecomp-ui/resources/scss/components/_notifications.scss
@@ -5,12 +5,12 @@
.modal-header {
padding: 15px 10px 10px;
.modal-title {
- @extend .heading-5-medium;
+ @extend .heading-5-semibold;
}
}
.modal-body {
padding: 30px 15px;
- @extend .body-1-medium;
+ @extend .body-1-semibold;
}
}
diff --git a/openecomp-ui/resources/scss/components/_selectActionTable.scss b/openecomp-ui/resources/scss/components/_selectActionTable.scss
index fa17733374..4e42b6ce5b 100644
--- a/openecomp-ui/resources/scss/components/_selectActionTable.scss
+++ b/openecomp-ui/resources/scss/components/_selectActionTable.scss
@@ -1,16 +1,16 @@
.select-action-table-view {
.svg-icon-wrapper {
flex-direction: row;
-
+
&::before {
- content:"";
+ content:"";
}
.svg-icon {
margin-left: 5px;
margin-right: 5px;
width:16px;
height:16px;
- }
+ }
}
.dummy-icon {
background-color: $white;
@@ -39,34 +39,39 @@
.select-action-table-headers {
display: flex;
background-color: $tlv-light-gray;
- border-color: inherit;
+ border-color: inherit;
.select-action-table-header {
- @extend .body-1-medium;
+ @extend .body-1-semibold;
flex: 1;
border-top: 1px solid;
- border-right: 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;
+ flex-direction: row;
margin-bottom: 14px;
- .svg-icon.trash-o {
-
- fill: $dark-gray;
+ .svg-icon-wrapper.trashO {
+ .svg-icon {
+ fill: $dark-gray;
+ }
+ }
+ .svg-icon-wrapper.errorCircle {
+ .svg-icon {
+ fill: $red;
+ }
}
- .svg-icon.error-circle {
- fill: $red;
+ .svg-icon-wrapper.checkCircle {
+ .svg-icon {
+ fill: $green;
+ }
}
- .svg-icon.check-circle {
- fill: $green;
- }
.select-action-table-row {
display: flex;
flex: 1;
@@ -90,7 +95,7 @@
}
}
.form-group {
- margin: 0;
+ margin: 0;
.Select-control {
height:36px;
border: none;
@@ -102,7 +107,7 @@
padding-left: 20px;
padding-right: 50px;
padding-top: 4px;
-
+
}
.Select-placeholder {
color: $dark-gray;
@@ -110,23 +115,23 @@
.Select-arrow-zone {
padding-right: 15px;
}
- }
+ }
}
&:last-child {
border-right: none;
- }
+ }
}
.Select-menu-outer {
border-left: 1px solid $blue;
border-right: 1px solid $blue;
border-bottom: 1px solid $blue;
overflow: auto;
- .Select-menu {
+ .Select-menu {
display: inline-block;
- .Select-option {
+ .Select-option {
width: 100%;
display: inline-block;
- border-bottom: 1px solid $light-gray;
+ border-bottom: 1px solid $light-gray;
&:hover {
background-color: $blue;
color: $white;
@@ -142,9 +147,9 @@
}
&.is-focused {
background-color: transparent;
- }
+ }
}
- }
+ }
}
}
}
diff --git a/openecomp-ui/resources/scss/components/_submitErrorResponse.scss b/openecomp-ui/resources/scss/components/_submitErrorResponse.scss
index e34be01af2..b917dfefeb 100644
--- a/openecomp-ui/resources/scss/components/_submitErrorResponse.scss
+++ b/openecomp-ui/resources/scss/components/_submitErrorResponse.scss
@@ -26,7 +26,7 @@
background-color: $tlv-gray;
padding: 5px;
cursor: pointer;
- .chevron-down {
+ .chevronDown {
width:10px;
height:10px;
margin-right: 10px;
@@ -54,7 +54,7 @@
.component-name-header {
margin-left: 45px;
margin-top: 10px;
- @extend .heading-5-medium;
+ @extend .heading-5-semibold;
}
}
}
diff --git a/openecomp-ui/resources/scss/components/_svgIcon.scss b/openecomp-ui/resources/scss/components/_svgIcon.scss
deleted file mode 100644
index fc02f81fd4..0000000000
--- a/openecomp-ui/resources/scss/components/_svgIcon.scss
+++ /dev/null
@@ -1,51 +0,0 @@
-@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 9404f2841a..46269ad699 100644
--- a/openecomp-ui/resources/scss/components/_validationForm.scss
+++ b/openecomp-ui/resources/scss/components/_validationForm.scss
@@ -4,6 +4,9 @@ form {
position: relative;
flex: 1;
}
+ .validation-radio-wrapper {
+ position: relative;
+ }
.nav-tabs {
position: relative;
.invalid-tab:not(.active) {
diff --git a/openecomp-ui/resources/scss/components/_versionController.scss b/openecomp-ui/resources/scss/components/_versionController.scss
index 3c30cdcc37..b454d3496b 100644
--- a/openecomp-ui/resources/scss/components/_versionController.scss
+++ b/openecomp-ui/resources/scss/components/_versionController.scss
@@ -20,7 +20,7 @@
padding-right: 10px;
margin-right: 15px;
margin-left: 10px;
- @extend .body-1;
+ @extend .body-1;
}
.version-section {
.form-group {
@@ -59,7 +59,7 @@
margin-right: 20px;
padding-bottom: 5px;
- .version-controller-lock-closed {
+ .versionControllerLockClosed {
fill: $dark-gray;
width: 21px;
height: 23px;
@@ -71,7 +71,7 @@
fill: $black;
}
}
- .version-controller-lock-open {
+ .versionControllerLockOpen {
fill: $dark-gray;
width: 24px;
height: 28px;
@@ -80,7 +80,7 @@
fill: $black;
}
}
- .version-controller-submit {
+ .versionControllerSubmit {
fill: $blue;
&.disabled {
fill: $light-gray;
@@ -90,7 +90,7 @@
}
}
- .version-controller-revert {
+ .versionControllerRevert {
fill: $dark-gray;
&.disabled {
fill: $light-gray;
@@ -99,7 +99,7 @@
fill: $black;
}
}
- .version-controller-save {
+ .versionControllerSave {
fill: $dark-gray;
&.disabled {
fill: $light-gray;
diff --git a/openecomp-ui/resources/scss/modules/_featureGroup.scss b/openecomp-ui/resources/scss/modules/_featureGroup.scss
index 71e7cee575..8c45d8ec58 100644
--- a/openecomp-ui/resources/scss/modules/_featureGroup.scss
+++ b/openecomp-ui/resources/scss/modules/_featureGroup.scss
@@ -35,7 +35,7 @@
.tab-content {
padding: 50px;
.field-section {
- @extend .body-2-medium;
+ @extend .body-2-semibold;
margin-bottom: 23px;
width: 400px;
color: $black;
diff --git a/openecomp-ui/resources/scss/modules/_licenseKeyGroup.scss b/openecomp-ui/resources/scss/modules/_licenseKeyGroup.scss
index 5ea84e98c4..5de757bf64 100644
--- a/openecomp-ui/resources/scss/modules/_licenseKeyGroup.scss
+++ b/openecomp-ui/resources/scss/modules/_licenseKeyGroup.scss
@@ -25,7 +25,7 @@
.validation-form-content {
padding: 50px;
.field-section {
- @extend .body-2-medium;
+ @extend .body-2-semibold;
margin-bottom: 23px;
width: 400px;
color: $black;
diff --git a/openecomp-ui/resources/scss/modules/_licenseModel.scss b/openecomp-ui/resources/scss/modules/_licenseModel.scss
index 6912e19bcd..3d65be6274 100644
--- a/openecomp-ui/resources/scss/modules/_licenseModel.scss
+++ b/openecomp-ui/resources/scss/modules/_licenseModel.scss
@@ -5,7 +5,7 @@
.validation-form-content {
padding: 50px;
.field-section {
- @extend .body-2-medium;
+ @extend .body-2-semibold;
margin-bottom: 23px;
width: 400px;
color: $black;
diff --git a/openecomp-ui/resources/scss/modules/_licenseModelOverview.scss b/openecomp-ui/resources/scss/modules/_licenseModelOverview.scss
index 4ec7c8d3af..5c74e82d83 100644
--- a/openecomp-ui/resources/scss/modules/_licenseModelOverview.scss
+++ b/openecomp-ui/resources/scss/modules/_licenseModelOverview.scss
@@ -27,7 +27,7 @@
margin-top:5px;
}
.vendor-name {
- @extend .heading-3-medium;
+ @extend .heading-4-semibold;
text-transform: none;
padding-bottom: 15px;
border-bottom: 1px solid $tlv-light-gray;
@@ -137,7 +137,7 @@
background-color: $tlv-gray;
.summary-count-item {
@extend .flex;
- @extend .heading-4-medium;
+ @extend .heading-5-semibold;
padding-top: 5px;
padding-left: 45px;
padding-right: 45px;
@@ -349,7 +349,7 @@
.additional-data {
padding-left: 50px;
.additional-data-name {
- @extend .body-1-medium;
+ @extend .body-1-semibold;
}
}
.additional-data-col-border {
@@ -373,7 +373,7 @@
.vlm-list-item-title {
@extend .flex;
.item-name {
- @extend .heading-5-medium;
+ @extend .heading-5-semibold;
flex: 0 1 auto;
margin-bottom: 4px;
}
diff --git a/openecomp-ui/resources/scss/modules/_softwareProductAttachmentPage.scss b/openecomp-ui/resources/scss/modules/_softwareProductAttachmentPage.scss
index 37068975a2..bab2872691 100644
--- a/openecomp-ui/resources/scss/modules/_softwareProductAttachmentPage.scss
+++ b/openecomp-ui/resources/scss/modules/_softwareProductAttachmentPage.scss
@@ -8,8 +8,7 @@
border-bottom: 1px solid $light-gray;
& > li {
& > a {
- font-size: 24px;
- font-weight: lighter;
+ @extend .heading-2;
padding-left: 0;
padding-right: 0;
margin-right: 40px;
@@ -55,7 +54,7 @@
.vsp-attachments-heat-validation {
@extend .body-1;
display: flex;
- .svg-icon.exclamation-triangle-line {
+ .svg-icon.exclamationTriangleFull {
fill: $orange;
width: 15px;
height: 15px;
@@ -88,7 +87,7 @@
margin-left: 20px;
}
.tree-header-title-text {
- @extend .heading-4-medium;
+ @extend .heading-4-semibold;
padding-left: 32px;
cursor: pointer;
&.tree-header-title-selected{
@@ -121,7 +120,7 @@
.error-text, .warning-text {
@extend .body-3;
&.large {
- @extend .heading-4-medium;
+ @extend .heading-4-semibold;
}
}
}
@@ -146,9 +145,11 @@
justify-content: space-between;
height: 40px;
align-items: center;
- .svg-icon.chevron-down, .svg-icon.chevron-up {
- height: 10px;
- width: 10px;
+ .svg-icon-wrapper.chevronDown, .svg-icon-wrapper.chevronUp {
+ .svg-icon {
+ height: 10px;
+ width: 10px;
+ }
}
&:after {
@@ -227,7 +228,7 @@
margin-left: 15px;
}
.error-file-name {
- @extend .body-1-medium;
+ @extend .body-1-semibold;
margin-right: 5px;
}
}
diff --git a/openecomp-ui/resources/scss/modules/_softwareProductComponentGeneral.scss b/openecomp-ui/resources/scss/modules/_softwareProductComponentGeneral.scss
index 67d76f5454..6c5bcee03c 100644
--- a/openecomp-ui/resources/scss/modules/_softwareProductComponentGeneral.scss
+++ b/openecomp-ui/resources/scss/modules/_softwareProductComponentGeneral.scss
@@ -3,8 +3,11 @@
.one-line-textarea {
height: 30px;
}
- .multi-line-textarea > textarea {
- height: 113px;
+ .multi-line-textarea {
+ height: calc(100% - 25px);
+ textarea {
+ height: inherit;
+ }
}
}
.additional-validation-form {
diff --git a/openecomp-ui/resources/scss/modules/_softwareProductComponentImage.scss b/openecomp-ui/resources/scss/modules/_softwareProductComponentImage.scss
new file mode 100644
index 0000000000..068404fcb6
--- /dev/null
+++ b/openecomp-ui/resources/scss/modules/_softwareProductComponentImage.scss
@@ -0,0 +1,58 @@
+.image-modal-new {
+ .modal-dialog {
+ width: 600px;
+ }
+ .image-filename {
+ width: 480px;
+ }
+}
+
+.image-modal-edit {
+ .modal-dialog {
+ width: 910px;
+ }
+ .image-filename {
+ width: 550px;
+ }
+}
+
+.image-modal-edit, .image-modal-new {
+ .modal-body {
+ padding: 0;
+ }
+ .vsp-components-image-editor {
+
+ .image-format, .image-md5, .image-version {
+ width: 200px;
+ }
+ .image-version {
+ padding-left: 30px;
+ }
+ .section-title {
+ text-transform: capitalize;
+ font-size: 18px;
+ }
+ }
+}
+
+.vsp-components-image {
+ .list-editor-item-view-content {
+ flex:1;
+ min-width: 0;
+ }
+ .list-editor-item-view-controller {
+ padding-top: 5px;
+ }
+ .image-filename-cell {
+ display: flex;
+ .image-filename {
+ white-space: nowrap;
+ overflow: hidden;
+ display: inline-block;
+ text-overflow: ellipsis;
+  span {
+ @include ellipsis(100%);
+ }
+ }
+ }
+}
diff --git a/openecomp-ui/resources/scss/modules/_softwareProductComponentNetwork.scss b/openecomp-ui/resources/scss/modules/_softwareProductComponentNetwork.scss
index e14ab02fcd..402918bc5e 100644
--- a/openecomp-ui/resources/scss/modules/_softwareProductComponentNetwork.scss
+++ b/openecomp-ui/resources/scss/modules/_softwareProductComponentNetwork.scss
@@ -10,24 +10,39 @@
}
.list-editor-view {
margin-top: 50px;
+ .manual-title {
+ @extend .body-1-semibold;
+ }
}
}
-.network-nic-modal {
- .modal-body {
- padding: 0;
- }
+.network-nic-modal-create {
+ .network-type-radio {
+ display: flex;
+ }
+}
+.network-nic-modal-edit, .network-nic-modal-create {
+ .modal-body {
+ padding: 0;
+ }
+ .validation-form-content {
+ padding-left: 50px;
+ padding-right: 50px;
+ padding-top: 20px;
+ }
+}
+.network-nic-modal-edit {
+ .modal-dialog {
+ width: 900px;
+ }
.vsp-components-network-editor {
.editor-data {
- padding-left: 50px;
- padding-right: 50px;
- padding-top: 20px;
height: 500px;
.grid-section {
padding-bottom: 15px;
.section-title {
@extend .heading-5;
padding-bottom: 10px;
- padding-left: 0px;
+ padding-left: 0;
}
}
.part-title {
@@ -38,7 +53,7 @@
.part-title-small {
@extend .heading-3;
padding-bottom: 10px;
- padding-left: 0px;
+ padding-left: 0;
}
.network-radio label {
font-size: 15px;
@@ -51,7 +66,7 @@
.top-row {
display: flex;
.part-title-small {
- padding-left: 0px;
+ padding-left: 0;
&.packets {
flex: 0 0 52%;
}
diff --git a/openecomp-ui/resources/scss/modules/_softwareProductComponentProcessesPage.scss b/openecomp-ui/resources/scss/modules/_softwareProductComponentProcessesPage.scss
index a6613190fd..be4caacfb5 100644
--- a/openecomp-ui/resources/scss/modules/_softwareProductComponentProcessesPage.scss
+++ b/openecomp-ui/resources/scss/modules/_softwareProductComponentProcessesPage.scss
@@ -5,4 +5,8 @@
.component-process-description > textarea {
height: 113px;
}
+}
+
+.software-product-landing-view-right-side.vsp-components-processes-page {
+ overflow-y: initial;
} \ No newline at end of file
diff --git a/openecomp-ui/resources/scss/modules/_softwareProductCreatePage.scss b/openecomp-ui/resources/scss/modules/_softwareProductCreatePage.scss
index deac736cfa..b788a86e44 100644
--- a/openecomp-ui/resources/scss/modules/_softwareProductCreatePage.scss
+++ b/openecomp-ui/resources/scss/modules/_softwareProductCreatePage.scss
@@ -15,7 +15,7 @@
flex: 45%;
.validation-input-wrapper {
.field-section {
- @extend .body-2-medium;
+ @extend .body-2-semibold;
margin-bottom: 23px;
color: $black;
}
diff --git a/openecomp-ui/resources/scss/modules/_softwareProductDependencies.scss b/openecomp-ui/resources/scss/modules/_softwareProductDependencies.scss
index 01a50dd741..8fb739234f 100644
--- a/openecomp-ui/resources/scss/modules/_softwareProductDependencies.scss
+++ b/openecomp-ui/resources/scss/modules/_softwareProductDependencies.scss
@@ -15,11 +15,11 @@
color: $dark-blue;
}
}
- .select-action-table-view {
+ .select-action-table-view {
min-width: 770px;
}
.select-action-table-header {
- @extend .body-1-medium;
+ @extend .body-1-semibold;
color: $text-black;
}
-} \ No newline at end of file
+}
diff --git a/openecomp-ui/resources/scss/modules/_softwareProductDeployment.scss b/openecomp-ui/resources/scss/modules/_softwareProductDeployment.scss
new file mode 100644
index 0000000000..e0de8fc969
--- /dev/null
+++ b/openecomp-ui/resources/scss/modules/_softwareProductDeployment.scss
@@ -0,0 +1,55 @@
+.deployment-flavor-editor {
+ .modal-dialog {
+ width: 780px;
+ }
+ .grid-section {
+ padding-bottom: 25px;
+ }
+ .deployment-feature-groups-section.no-feature-groups {
+ padding-bottom: 0;
+ .form-group {
+ margin-bottom: 5px;
+ }
+ }
+ .deployment-feature-group-warning-section {
+ padding-bottom: 30px;
+ span {
+ @extend .body-2;
+ color: $red;
+ }
+ }
+ .grid-section.vfc-table {
+ .section-title {
+ padding-bottom: 10px;
+ }
+ }
+ .modal-content {
+ .modal-body {
+ padding: 0;
+ .validation-form-content {
+ .grid-col-1 {
+ flex-basis: 35%;
+ }
+
+ .Select-value, .Select-placeholder {
+ font-family: omnes-regular, sans-serif;
+ }
+
+ .grid-section.vfc-table {
+ padding-bottom: 50px;
+ .Select-menu {
+ max-height: 100px;
+ }
+
+ }
+
+ .grid-col-3 {
+ flex-basis: 65%;
+ }
+ padding-left: 54px;
+ padding-right: 33px;
+ overflow-y: visible;
+ }
+ }
+ }
+}
diff --git a/openecomp-ui/resources/scss/modules/_softwareProductLandingPage.scss b/openecomp-ui/resources/scss/modules/_softwareProductLandingPage.scss
index e75b110425..56860101b2 100644
--- a/openecomp-ui/resources/scss/modules/_softwareProductLandingPage.scss
+++ b/openecomp-ui/resources/scss/modules/_softwareProductLandingPage.scss
@@ -3,11 +3,11 @@
padding-right: 30px;
padding-bottom: 10px;
.title {
- @extend .body-1-medium;
+ @extend .body-1-semibold;
}
.file-name {
padding-left: 5px;
- @extend .body-1-medium;
+ @extend .body-1-semibold;
}
}
@@ -28,7 +28,7 @@
.missing-license {
display: flex;
align-items: baseline;
- .svg-icon.exclamation-triangle-full {
+ .svg-icon-wrapper.exclamationTriangleFull .svg-icon{
fill: $orange;
}
.warning-text {
@@ -46,7 +46,7 @@
}
}
.name {
- @extend .body-1-medium;
+ @extend .body-1-semibold;
}
.software-product-landing-view-right-side {
@extend .flex;
@@ -76,7 +76,7 @@
@extend .flex-column;
&.title-section {
flex: 0.8;
- @extend .heading-5-medium;
+ @extend .heading-5-semibold;
}
&.title-text {
margin-bottom: 24px;
@@ -125,7 +125,7 @@
}
}
.title {
- @extend .body-1-medium;
+ @extend .body-1-semibold;
}
.software-product-landing-view-heading-title {
@extend .section-title;
@@ -181,7 +181,7 @@
}
.drag-text {
color: $blue;
- font-weight: bolder;
+ @extend .body-1-semibold;
}
.or-text {
margin-top: 10px;
diff --git a/openecomp-ui/resources/scss/modules/_softwareProductProcessesPage.scss b/openecomp-ui/resources/scss/modules/_softwareProductProcessesPage.scss
index 4956616687..d75e7447ab 100644
--- a/openecomp-ui/resources/scss/modules/_softwareProductProcessesPage.scss
+++ b/openecomp-ui/resources/scss/modules/_softwareProductProcessesPage.scss
@@ -25,13 +25,11 @@
align-items: center;
.upload-btn {
- padding: 20px;
- padding-top: 7px;
- padding-bottom: 3px;
+ padding: 4px 20px;
}
.drag-text {
color: $blue;
- font-weight: bolder;
+ @extend .body-1-semibold;
}
.or-text {
margin-top: 10px;
@@ -39,11 +37,9 @@
}
}
.vsp-processes-editor-data {
- padding: 28px 54px;
transition: border .2s;
.vsp-process-dropzone-view {
background-color: transparent;
- padding: 15px;
&.active-dragging {
border: 3px dashed $dark-blue;
border-radius: 20px;
@@ -53,7 +49,7 @@
}
.grid-section {
.section-title {
- padding-bottom: 0px;
+ padding-bottom: 0;
}
}
}
@@ -66,7 +62,8 @@
}
}
-.vsp-processes-page {
+.software-product-landing-view-right-side.vsp-processes-page {
+ overflow-y: initial;
.processes-list {
@extend .flex-column;
}
diff --git a/openecomp-ui/resources/scss/modules/_softwareproductComponentLoadBalancing.scss b/openecomp-ui/resources/scss/modules/_softwareproductComponentLoadBalancing.scss
index 04cb3c2051..ceae4a00de 100644
--- a/openecomp-ui/resources/scss/modules/_softwareproductComponentLoadBalancing.scss
+++ b/openecomp-ui/resources/scss/modules/_softwareproductComponentLoadBalancing.scss
@@ -1,45 +1,47 @@
.vsp-components-load-balancing {
- .svg-icon-wrapper {
- position: relative;
- top: -3px;
- .svg-icon.chevron-up, .svg-icon.chevron-down {
- width: 10px;
- height: 10px;
- }
+ .svg-icon-wrapper {
+ position: relative;
+ top: -3px;
+ &.chevronUp, &.chevronDown {
+ .svg-icon {
+ width: 10px;
+ height: 10px;
+ }
}
+ }
.halb-data {
- .load-balancing-page-title {
- @extend .section-title;
- &:first-child {
- padding: 0 0 40px 0;
- }
- }
- .question {
- padding-top: 10px;
- &:first-child {
- padding-top: 0;
- }
- }
- .title {
- @extend .body-1-medium;
- margin-bottom: 8px;
- cursor: pointer;
- .svg-icon {
- @include transition(transform 0.3s);
- margin-right: 5px;
- position: relative;
- top: 4px;
- }
- }
- .add-padding {
- padding-bottom: 20px;
- }
- .new-line {
- margin-left: 16px;
- }
- textarea.form-control {
- height: 90px;
- }
+ .load-balancing-page-title {
+ @extend .section-title;
+ &:first-child {
+ padding: 0 0 40px 0;
+ }
+ }
+ .question {
+ padding-top: 10px;
+ &:first-child {
+ padding-top: 0;
+ }
+ }
+ .title {
+ @extend .body-1-semibold;
+ margin-bottom: 8px;
+ cursor: pointer;
+ .svg-icon {
+ @include transition(transform 0.3s);
+ margin-right: 5px;
+ position: relative;
+ top: 4px;
+ }
+ }
+ .add-padding {
+ padding-bottom: 20px;
+ }
+ .new-line {
+ margin-left: 16px;
+ }
+ textarea.form-control {
+ height: 90px;
+ }
}
}
diff --git a/openecomp-ui/resources/scss/modules/_vspComponentCompute.scss b/openecomp-ui/resources/scss/modules/_vspComponentCompute.scss
new file mode 100644
index 0000000000..ee8cfa5c7f
--- /dev/null
+++ b/openecomp-ui/resources/scss/modules/_vspComponentCompute.scss
@@ -0,0 +1,19 @@
+.vsp-component-computeFlavor-view {
+ .component-questionnaire-validation-form {
+ .vm-sizing-section {
+ .section-title {
+ text-transform: capitalize;
+ font-size: 18px;
+ }
+ .duplicate-title-line label.control-label{
+ height: 2.7em;
+ }
+ }
+ }
+}
+
+.compute-flavor-editor-modal-edit {
+ .modal-lg {
+ width: 1182px;
+ }
+} \ No newline at end of file
diff --git a/openecomp-ui/resources/scss/modules/_vspComponentMonitoring.scss b/openecomp-ui/resources/scss/modules/_vspComponentMonitoring.scss
index c49e4f551d..4bcf7940eb 100644
--- a/openecomp-ui/resources/scss/modules/_vspComponentMonitoring.scss
+++ b/openecomp-ui/resources/scss/modules/_vspComponentMonitoring.scss
@@ -4,7 +4,7 @@
.section-title {
padding-bottom: 20px;
}
- &:first-child {
+ &:not(:last-child) {
padding-bottom: 50px;
}
.software-product-landing-view-top-block-col-upl {
@@ -18,13 +18,11 @@
padding: 25px 0;
align-items: center;
.upload-btn {
- padding: 20px;
- padding-top: 7px;
- padding-bottom: 3px;
+ padding: 4px 20px;
}
.drag-text {
color: $blue;
- font-weight: bolder;
+ @extend .body-1-semibold;
}
.or-text {
margin-top: 10px;
diff --git a/openecomp-ui/resources/scss/modules/_vspComponentQuestionnaire.scss b/openecomp-ui/resources/scss/modules/_vspComponentQuestionnaire.scss
index d194c678b9..5696b354a7 100644
--- a/openecomp-ui/resources/scss/modules/_vspComponentQuestionnaire.scss
+++ b/openecomp-ui/resources/scss/modules/_vspComponentQuestionnaire.scss
@@ -25,7 +25,7 @@
.vertical-flex {
flex-direction: column;
.control-label {
- @extend .body-2-medium;
+ @extend .body-2-semibold;
}
.radio-options-content-row {
display: flex;
diff --git a/openecomp-ui/resources/scss/modules/_vspHeatSetup.scss b/openecomp-ui/resources/scss/modules/_vspHeatSetup.scss
index 59e983686b..75d96b4c85 100644
--- a/openecomp-ui/resources/scss/modules/_vspHeatSetup.scss
+++ b/openecomp-ui/resources/scss/modules/_vspHeatSetup.scss
@@ -82,31 +82,35 @@
min-width: 0;
}
- .svg-icon.trash-o {
+ .svg-icon-wrapper.trashO {
+ .svg-icon {
fill: $dark-gray;
height: 18px;
width: 18px;
&:hover {
- fill: $black;
+ fill: $black;
}
+ }
}
.module-title-by-type {
- @extend .heading-5-medium;
+ @extend .heading-5-semibold;
margin-right: 3px;
}
.modules-list-item-filename {
display: flex;
align-items: center;
- .svg-icon.pencil {
- height: 15px;
- width: 15px;
+ .svg-icon-wrapper.pencil {
+ .svg-icon {
+ height: 15px;
+ width: 15px;
+ }
margin-left: 3px;
opacity: 0;
}
.filename-text {
- @extend .heading-5-medium;
+ @extend .heading-5-semibold;
}
@@ -120,7 +124,7 @@
padding: 0;
.name-edit {
padding: 4px;
- @extend .heading-5-medium;
+ @extend .heading-5-semibold;
height: 100%;
border: 1px solid $light-gray;
width: 400px;
@@ -140,12 +144,14 @@
border-color: transparent;
}
}
- .svg-icon.pencil {
+ .svg-icon-wrapper.pencil {
margin-left: 10px;
opacity: 1;
- stroke: $dark-gray;
- &:hover {
- stroke: $black;
+ .svg-icon {
+ stroke: $dark-gray;
+ &:hover {
+ stroke: $black;
+ }
}
}
}
@@ -158,7 +164,7 @@
.Select-option {
@extend .body-1;
&.is-selected {
- @extend .body-1-medium;
+ @extend .body-1-semibold;
background-color: $white;
}
&.is-focused {
@@ -220,7 +226,7 @@
}
.artifact-files-header {
- @extend .heading-5-medium;
+ @extend .heading-5-semibold;
display: flex;
margin-bottom: 10px;
justify-content: space-between;
@@ -248,7 +254,6 @@
.unassigned-files {
margin-top: 30px;
border: 1px solid $light-gray;
- width: 25%;
background-color: $white;
height: 250px;
width: 250px;
@@ -258,7 +263,7 @@
top: 10px;
.unassigned-files-title {
- @extend .heading-5-medium;
+ @extend .heading-5-semibold;
background-color: $tlv-gray;
padding: 11px 0 9px 15px;
}
@@ -284,16 +289,20 @@
display: flex;
align-items: center;
margin-bottom: 10px;
- .svg-icon.angle-right {
+ .svg-icon-wrapper.angleRight {
+ .svg-icon {
height: 10px;
width: 10px;
margin-left: 7px;
fill: $blue;
+ }
}
&:hover {
color: $dark-blue;
- .svg-icon.angle-right {
+ .svg-icon-wrapper.angleRight {
+ .svg-icon {
fill: $dark-blue;
+ }
}
}
}
diff --git a/openecomp-ui/resources/scss/modules/onboardingCatalog/_catalogTile.scss b/openecomp-ui/resources/scss/modules/onboardingCatalog/_catalogTile.scss
index 5ce8e12ec3..07f86aba2a 100644
--- a/openecomp-ui/resources/scss/modules/onboardingCatalog/_catalogTile.scss
+++ b/openecomp-ui/resources/scss/modules/onboardingCatalog/_catalogTile.scss
@@ -1,8 +1,8 @@
.catalog-tile {
- &:hover {
- box-shadow: 0.3px 5px 12.8px 1.3px rgba(24, 24, 25, 0.15);
- border: 1px solid $light-gray;
- }
+ &: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;
@@ -11,48 +11,54 @@
padding-left: 10px;
align-items: flex-start;
flex-direction: column;
- .catalog-tile-content {
- margin-top: auto;
- width: 180px;
- }
-
+ .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;
- }
+ 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;
+ margin-top: 20px;
+ display: flex;
+ flex-direction: column;
+ justify-content: space-between;
+ flex: 0.8;
+ .catalog-tile-version-info {
+ display: flex;
+ justify-content: space-between;
- .catalog-tile-item-version {
- @extend .body-2;
- line-height: 6px;
- }
- }
- .catalog-tile-vendor-name {
- @extend .body-3-medium;
- color: $gray;
- line-height: 12px;
- @include ellipsis(auto,inline-block,178px);
+ .catalog-tile-item-version {
+ @extend .body-2;
+ line-height: 6px;
}
+ }
+ .catalog-tile-vendor-name {
+ @extend .body-3;
+ flex: 0.4;
+ align-self: baseline;
+ color: $gray;
+ line-height: 10px;
+ @include ellipsis(auto, inline-block, 178px);
+ }
- }
- .catalog-tile-item-name {
- @extend .heading-5-medium;
- color: $black;
- @include ellipsis(auto,inline-block,175px);
- }
}
+ .catalog-tile-item-name {
+ @extend .heading-5-semibold;
+ color: $black;
+ @include ellipsis(auto, inline-block, 175px);
+ line-height: inherit;
+ }
+ }
.catalog-tile-icon {
width: 58px;
@@ -65,32 +71,39 @@
align-self: center;
height: 58px;
width: 58px;
- margin-left: 122px;
+ margin-left: 122px;
background-repeat: no-repeat;
- .svg-icon {
+ .svg-icon-wrapper {
&.vendor {
- fill: $dark-gray;
- margin-top: 22px;
- width: 53px;
- height: 47px;
- &:hover {
+ .svg-icon {
fill: $dark-gray;
+ width: 53px;
+ height: 47px;
+ &:hover {
+ fill: $dark-gray;
+ }
}
+ margin-top: 22px;
+
}
&.vsp {
- fill: $light-blue;
+ .svg-icon {
+ fill: $light-blue;
+ width: 60px;
+ height: 40px;
+ }
margin-top: 18px;
margin-left: 3px;
- width: 60px;
- height: 40px;
}
&.vlm {
- fill: $purple;
margin-top: 18px;
- width: 45px;
- height: 53px;
- }
+ .svg-icon {
+ fill: $purple;
+ width: 45px;
+ height: 53px;
+ }
+ }
}
}
}
@@ -99,13 +112,17 @@
padding-top: 5px;
display: flex;
justify-content: space-between;
- margin-top:2px;
+ margin-top: 2px;
padding-bottom: 3px;
- @extend .body-2-medium;
- .svg-icon.plus {
- height: 9px;
- width: 9px;
- fill: $blue;
+ @extend .body-2-semibold;
+ .svg-icon-wrapper {
+ &.plus {
+ .svg-icon {
+ height: 9px;
+ width: 9px;
+ fill: $blue;
+ }
+ }
}
.catalog-tile-item-details {
overflow: hidden;
@@ -113,27 +130,27 @@
.catalog-tile-add-new-vsp {
color: $blue;
- margin-left:40px;
+ margin-left: 40px;
}
.catalog-tile-locking-user-name {
@extend .body-2;
- @include ellipsis(auto,inline-block,180px);
+ @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;
- }
- }
- }
+ .catalog-tile-check-in-status {
+ .svg-icon-wrapper {
+ &.locked {
+ .svg-icon {
+ width: 11px;
+ fill: $gray;
+ }
}
+ &.unlocked {
+ .svg-icon {
+ width: 11px;
+ fill: $gray;
+ }
+ }
+ }
+ }
}
}
diff --git a/openecomp-ui/resources/scss/modules/onboardingCatalog/_createItemTile.scss b/openecomp-ui/resources/scss/modules/onboardingCatalog/_createItemTile.scss
index b9f83fc452..aa3cf04c4f 100644
--- a/openecomp-ui/resources/scss/modules/onboardingCatalog/_createItemTile.scss
+++ b/openecomp-ui/resources/scss/modules/onboardingCatalog/_createItemTile.scss
@@ -22,7 +22,7 @@
}
&:hover {
box-shadow: 0.3px 5px 12.8px 1.3px rgba(24, 24, 25, 0.15);
-
+
border: 1px solid $light-gray;
}
&:only-child {
@@ -33,7 +33,7 @@
margin: 0 0 15px 0;
}
.create-item-text {
- @extend .heading-4-medium;
+ @extend .heading-4-semibold;
}
}
.create-item-plus-icon{
@@ -42,14 +42,14 @@
margin: -5px 12px 0 0;
.svg-icon.plus {
height: 19px;
- width: 19px;
+ width: 19px;
}
}
&.vlm-type {
.create-item-text {
color: $purple;
}
-
+
.create-item-plus-icon {
fill: $purple;
}
@@ -58,14 +58,14 @@
.create-item-text {
color: $blue;
}
-
+
.create-item-plus-icon {
fill: $blue;
}
}
.create-item-text {
width: 140px;
- @extend .heading-5-medium;
+ @extend .heading-5-semibold;
}
}
}
diff --git a/openecomp-ui/resources/scss/modules/onboardingCatalog/_onboardHeader.scss b/openecomp-ui/resources/scss/modules/onboardingCatalog/_onboardHeader.scss
index da4c017d39..32ebac98cf 100644
--- a/openecomp-ui/resources/scss/modules/onboardingCatalog/_onboardHeader.scss
+++ b/openecomp-ui/resources/scss/modules/onboardingCatalog/_onboardHeader.scss
@@ -15,7 +15,7 @@
flex-direction: row;
margin-left: 60px;
.onboard-header-tab {
- @extend .body-1-medium;
+ @extend .body-1-semibold;
margin-right: 40px;
cursor: pointer;
display: flex;
diff --git a/openecomp-ui/resources/scss/modules/onboardingCatalog/_vendorTile.scss b/openecomp-ui/resources/scss/modules/onboardingCatalog/_vendorTile.scss
index 79a64f84ee..5972bb2d67 100644
--- a/openecomp-ui/resources/scss/modules/onboardingCatalog/_vendorTile.scss
+++ b/openecomp-ui/resources/scss/modules/onboardingCatalog/_vendorTile.scss
@@ -1,87 +1,87 @@
@mixin flipOverlayDirection($itemsInRow) {
- &:nth-child(#{$itemsInRow}n){
- .vsp-overlay-wrapper {
- right: 74%;
- left: inherit;
- .vsp-overlay-arrow {
- border-right-color: transparent;
- border-left-color: $tlv-light-gray;
- border-right-width: 2px;
- border-left-width: 6px;
- left: 100%;
- &:after {
- border-left-color: $white;
- border-right-color: transparent;
- left: -11px;
- }
- }
+ &:nth-child(#{$itemsInRow}n) {
+ .vsp-overlay-wrapper {
+ right: 74%;
+ left: inherit;
+ .vsp-overlay-arrow {
+ border-right-color: transparent;
+ border-left-color: $tlv-light-gray;
+ border-right-width: 2px;
+ border-left-width: 6px;
+ left: 100%;
+ &:after {
+ border-left-color: $white;
+ border-right-color: transparent;
+ left: -11px;
}
+ }
+ }
}
}
-
.catalog-tile.vendor-type {
position: relative;
.catalog-tile-top {
- .catalog-tile-item-name {
- margin-top:21px;
- }
- .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-item-name {
+ margin-top: 21px;
+ line-height: inherit;
+ }
+ .catalog-tile-vsp-count {
+ @extend .body-3-semibold;
+ margin-top: 8px;
+ margin-left: 54px;
+ margin-bottom: 9px;
+ color: $dark-gray;
+ border: 1px solid $dark-gray;
+ padding: 0 15px 0 15px;
+ border-radius: 15px;
+
+ &.clickable {
+ &:hover {
+ background-color: #eceff3;
+ color: $dark-gray;
}
+ }
+ &.active {
+ background-color: $white;
+ color: $dark-gray;
+ }
+ }
}
.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;
- }
+ 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){
+ @media (min-width: 1900px) {
@include flipOverlayDirection($itemsInRow: 8);
}
- @media (min-width: 1586px) and (max-width: 1899px){
+ @media (min-width: 1586px) and (max-width: 1899px) {
@include flipOverlayDirection($itemsInRow: 7);
}
- @media (min-width: 1368px) and (max-width: 1585px){
+ @media (min-width: 1368px) and (max-width: 1585px) {
@include flipOverlayDirection($itemsInRow: 6);
}
- @media (max-width: 1367px){
+ @media (max-width: 1367px) {
@include flipOverlayDirection($itemsInRow: 5);
}
@import "vspOverlay";
diff --git a/openecomp-ui/resources/scss/modules/onboardingCatalog/_vspOverlay.scss b/openecomp-ui/resources/scss/modules/onboardingCatalog/_vspOverlay.scss
index 8816ca5df9..80ed7385e0 100644
--- a/openecomp-ui/resources/scss/modules/onboardingCatalog/_vspOverlay.scss
+++ b/openecomp-ui/resources/scss/modules/onboardingCatalog/_vspOverlay.scss
@@ -41,7 +41,7 @@
flex-direction: column;
margin: 10px 0 10px 0;
.vsp-overlay-title {
- @extend .heading-5-medium;
+ @extend .heading-5-semibold;
margin-bottom: 15px;
padding: 10px 20px 10px 20px;
background: $highlight-gray;
diff --git a/openecomp-ui/resources/scss/onboarding.scss b/openecomp-ui/resources/scss/onboarding.scss
index 6b892ac0a4..d7d4586354 100644
--- a/openecomp-ui/resources/scss/onboarding.scss
+++ b/openecomp-ui/resources/scss/onboarding.scss
@@ -1,12 +1,68 @@
.dox-ui {
@import "bootstrap";
@import "~react-select/dist/react-select.min.css";
+ @import "~react-datepicker/dist/react-datepicker.min.css";
@import "common";
@import "components";
@import "modules";
}
+/* Out of namespace context for datepicker */
+div[data-reactroot].customized-date-picker-calendar {
+ @import "common/variables";
+ @import "common/typography";
+ border-radius: 2px;
+ border-color: $light-gray;
+ margin-top: -8px;
+ .react-datepicker__triangle {
+ margin-top: 0px;
+ }
+ .react-datepicker__navigation--previous {
+ border: none;
+ width: 15px;
+ height: 15px;
+ margin-top: 2px;
+ content: url(../images/angle-left.svg);
+ }
+ .react-datepicker__navigation--next {
+ border: none;
+ width: 15px;
+ height: 15px;
+ margin-top: 2px;
+ content: url(../images/angle-right.svg);
+ }
+ .react-datepicker__month-container {
+ .react-datepicker__header {
+ background-color: $background-gray;
+ border-bottom: none;
+ .react-datepicker__current-month {
+ @extend .heading-5;
+ background-color: $background-gray;
+ margin-bottom: 10px;
+ }
+ .react-datepicker__day-names {
+ @extend .heading-5;
+ background-color: $white;
+ }
+ }
+ .react-datepicker__day--selected {
+ @extend .heading-5;
+ border-radius: 20px;
+ background-color: $blue;
+ &:hover {
+ background-color: $dark-blue;
+ }
+ }
+ .react-datepicker__day {
+ @extend .heading-5;
+ &:hover {
+ border-radius: 20px;
+ }
+ }
+ }
+}
+
/* Out of namespace context for tooltips */
div[data-reactroot].tooltip {
@import "common/variables";
@@ -16,11 +72,26 @@ div[data-reactroot].tooltip {
opacity: 1;
}
&.validation-error-message {
- &.bottom {
- .tooltip-arrow {
- border-bottom-color: $red !important;
- }
- }
+ &.bottom {
+ .tooltip-arrow {
+ border-bottom-color: $red !important;
+ }
+ }
+ &.left {
+ .tooltip-arrow {
+ border-left-color: $red !important;
+ }
+ }
+ &.right {
+ .tooltip-arrow {
+ border-right-color: $red !important;
+ }
+ }
+ &.top {
+ .tooltip-arrow {
+ border-top-color: $red !important;
+ }
+ }
}
&.bottom {
.tooltip-arrow {