[SDC] Onboarding 1710 rebase.
Change-Id: If3b6b81d221fde13908f1e8160db6f7d9433c535
Signed-off-by: Avi Ziv <avi.ziv@amdocs.com>
diff --git a/openecomp-ui/resources/scss/modules/_featureGroup.scss b/openecomp-ui/resources/scss/modules/_featureGroup.scss
index 71e7cee..8c45d8e 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 5ea84e9..5de757b 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 6912e19..3d65be6 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 4ec7c8d..5c74e82 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 3706897..bab2872 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 67d76f5..6c5bcee 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 0000000..068404f
--- /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 e14ab02..402918b 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 a661319..be4caac 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 deac736..b788a86 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 01a50dd..8fb7392 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 0000000..e0de8fc
--- /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 e75b110..5686010 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 4956616..d75e744 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 04cb3c2..ceae4a0 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 0000000..ee8cfa5
--- /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 c49e4f5..4bcf794 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 d194c67..5696b35 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 59e9836..75d96b4 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 5ce8e12..07f86ab 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-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-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 b9f83fc..aa3cf04 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 da4c017..32ebac9 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 79a64f8..5972bb2 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-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;
}
- .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 ;
- }
- }
+ }
+ &.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 8816ca5..80ed738 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;