summaryrefslogtreecommitdiffstats
path: root/openecomp-ui/resources/scss
diff options
context:
space:
mode:
authorAvi Ziv <AVIZI@amdocs.com>2017-07-26 17:37:57 +0300
committerAvi Ziv <avi.ziv@amdocs.com>2017-07-26 18:27:22 +0300
commit61070c9c6b665fdea79b3ccdfeafc3a6b50d262e (patch)
treedfe9c169cfac91d6c72ac9ff23375f2aafac6405 /openecomp-ui/resources/scss
parentb824a997e19f6ee9627cb1b1e124c756bd8183fc (diff)
[SDC] Full OnBoard health-check and NFoD support
Change-Id: I606f8a52c7e6d2bd5558f824957d890e552c5423 Signed-off-by: Avi Ziv <avi.ziv@amdocs.com>
Diffstat (limited to 'openecomp-ui/resources/scss')
-rw-r--r--openecomp-ui/resources/scss/_modules.scss1
-rw-r--r--openecomp-ui/resources/scss/bootstrap-cust/_modals.scss1
-rw-r--r--openecomp-ui/resources/scss/common/_utils.scss21
-rw-r--r--openecomp-ui/resources/scss/components/_datepicker.scss34
-rw-r--r--openecomp-ui/resources/scss/components/_dualListBox.scss3
-rw-r--r--openecomp-ui/resources/scss/components/_notifications.scss6
-rw-r--r--openecomp-ui/resources/scss/components/_selectActionTable.scss11
-rw-r--r--openecomp-ui/resources/scss/components/_validationForm.scss6
-rw-r--r--openecomp-ui/resources/scss/modules/_entitlementPools.scss28
-rw-r--r--openecomp-ui/resources/scss/modules/_featureGroup.scss8
-rw-r--r--openecomp-ui/resources/scss/modules/_licenseKeyGroup.scss20
-rw-r--r--openecomp-ui/resources/scss/modules/_licenseModel.scss61
-rw-r--r--openecomp-ui/resources/scss/modules/_licenseModelLimits.scss121
-rw-r--r--openecomp-ui/resources/scss/modules/_licenseModelOverview.scss366
-rw-r--r--openecomp-ui/resources/scss/modules/onboardingCatalog/_catalogTile.scss8
-rw-r--r--openecomp-ui/resources/scss/modules/onboardingCatalog/_vendorTile.scss5
-rw-r--r--openecomp-ui/resources/scss/onboarding.scss110
17 files changed, 517 insertions, 293 deletions
diff --git a/openecomp-ui/resources/scss/_modules.scss b/openecomp-ui/resources/scss/_modules.scss
index 317f90800f..405e91a61b 100644
--- a/openecomp-ui/resources/scss/_modules.scss
+++ b/openecomp-ui/resources/scss/_modules.scss
@@ -1,4 +1,5 @@
@import "modules/licenseModelOverview";
+@import "modules/licenseModelLimits";
@import "modules/licenseAgreement";
@import "modules/featureGroup";
@import "modules/entitlementPools";
diff --git a/openecomp-ui/resources/scss/bootstrap-cust/_modals.scss b/openecomp-ui/resources/scss/bootstrap-cust/_modals.scss
index 9301f1ed39..ad6b4f8aca 100644
--- a/openecomp-ui/resources/scss/bootstrap-cust/_modals.scss
+++ b/openecomp-ui/resources/scss/bootstrap-cust/_modals.scss
@@ -1,6 +1,7 @@
.modal-content {
.modal-header {
border-top: 3px solid $blue;
+ padding-left: 50px;
.modal-title {
@extend .heading-2;
}
diff --git a/openecomp-ui/resources/scss/common/_utils.scss b/openecomp-ui/resources/scss/common/_utils.scss
index dce623e15d..54f8b977a3 100644
--- a/openecomp-ui/resources/scss/common/_utils.scss
+++ b/openecomp-ui/resources/scss/common/_utils.scss
@@ -219,14 +219,10 @@ $browserPrefixes: webkit moz o ms;
width: $size;
height: $size;
background: $bgcolor;
- border: 3px solid $bgcolor;
- &:after {
- content: $content;
- position: relative;
- left: 9px;
- top: 9px;
- @extend .circle-icon-text;
- }
+ border: 3px solid $bgcolor;
+ display: flex;
+ align-items: center;
+ justify-content: center;
}
/**/
@@ -306,3 +302,12 @@ $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));
}
+
+/* percent-plus-value */
+// @mixin
+// Calculate length property (e.g. width, margin) by adding a value (e.g. in pixels)
+// to a percentage of container height/width
+@mixin percent-plus-value($property, $value, $percent: 100%) {
+ $string: 'calc(' + $percent + ' + ' + $value + ')';
+ #{$property}: unquote($string);
+}
diff --git a/openecomp-ui/resources/scss/components/_datepicker.scss b/openecomp-ui/resources/scss/components/_datepicker.scss
index 593bb09d7d..d51a1b690e 100644
--- a/openecomp-ui/resources/scss/components/_datepicker.scss
+++ b/openecomp-ui/resources/scss/components/_datepicker.scss
@@ -1,5 +1,6 @@
.customized-date-picker {
margin-bottom: 24px;
+ display: flex;
.date-picker-label {
&.required {
&:before {
@@ -13,27 +14,38 @@
color: $dark-gray;
margin-bottom: 8px;
}
+ .react-datepicker__input-container {
+ flex: 1;
+ cursor: pointer;
+ }
.datepicker-custom-input {
display: flex;
justify-content: space-between;
- width: 243px;
+ align-items: center;
height: 30px;
border-radius: 2px;
color: $dark-gray;
border: 1px solid $light-gray;
- padding: 6px 12px;
+ padding: 6px 8px 6px 12px;
+ .clear-input {
+ margin-left: auto;
+ margin-right: 8px;
+ .svg-icon {
+ fill: transparent;
+ height: 8px;
+ width: 8px;
+ }
+ }
&:hover {
border-color: $gray;
.clear-input {
- &:before {
- cursor: pointer;
- content: 'x';
+ .svg-icon {
+ fill: initial;
}
}
}
.datepicker-text {
cursor: pointer;
- width: 170px;
@extend .body-1;
&.placeholder {
color: $light-gray;
@@ -43,9 +55,13 @@
.calendar-input {
fill: $light-gray;
}
+ .svg-icon-wrapper.calendar {
+ .svg-icon {
+ fill: $dark-gray;
+ width: 17px;
+ height: 17px;
+ }
+ }
}
-
-
-
}
diff --git a/openecomp-ui/resources/scss/components/_dualListBox.scss b/openecomp-ui/resources/scss/components/_dualListBox.scss
index 4a1a940c34..4353ab39e8 100644
--- a/openecomp-ui/resources/scss/components/_dualListBox.scss
+++ b/openecomp-ui/resources/scss/components/_dualListBox.scss
@@ -7,8 +7,7 @@
}
.dual-search-multi-select-section {
- $multi-select-box-width: 398px;
- width: $multi-select-box-width;
+ flex: 1;
.dual-text-box-search-title, .dual-list-box-multi-select-text {
@extend .body-1;
color: $dark-gray;
diff --git a/openecomp-ui/resources/scss/components/_notifications.scss b/openecomp-ui/resources/scss/components/_notifications.scss
index 7165e57ef9..5b10dee0ee 100644
--- a/openecomp-ui/resources/scss/components/_notifications.scss
+++ b/openecomp-ui/resources/scss/components/_notifications.scss
@@ -18,6 +18,12 @@
.modal-content .modal-header {
border-top: 3px solid $red;
}
+ }
+
+ &.negative {
+ .modal-content .modal-header {
+ border-top: 3px solid $red;
+ }
}
&.warning {
diff --git a/openecomp-ui/resources/scss/components/_selectActionTable.scss b/openecomp-ui/resources/scss/components/_selectActionTable.scss
index 4e42b6ce5b..79a5432ef1 100644
--- a/openecomp-ui/resources/scss/components/_selectActionTable.scss
+++ b/openecomp-ui/resources/scss/components/_selectActionTable.scss
@@ -72,6 +72,11 @@
fill: $green;
}
}
+ .svg-icon-wrapper.hideDelete {
+ .svg-icon {
+ fill: $white;
+ }
+ }
.select-action-table-row {
display: flex;
flex: 1;
@@ -80,6 +85,7 @@
&.has-error {
border-color: $red;
}
+
.select-action-table-cell {
flex: 1;
border-right: 1px solid;
@@ -127,10 +133,9 @@
border-bottom: 1px solid $blue;
overflow: auto;
.Select-menu {
- display: inline-block;
.Select-option {
- width: 100%;
- display: inline-block;
+ overflow: hidden;
+ text-overflow: ellipsis;
border-bottom: 1px solid $light-gray;
&:hover {
background-color: $blue;
diff --git a/openecomp-ui/resources/scss/components/_validationForm.scss b/openecomp-ui/resources/scss/components/_validationForm.scss
index 46269ad699..e4aac32b74 100644
--- a/openecomp-ui/resources/scss/components/_validationForm.scss
+++ b/openecomp-ui/resources/scss/components/_validationForm.scss
@@ -7,12 +7,10 @@ form {
.validation-radio-wrapper {
position: relative;
}
- .nav-tabs {
+ .sdc-tabs {
position: relative;
- .invalid-tab:not(.active) {
- a {
+ .invalid-tab:not(.sdc-tab-active) {
color: $red;
- }
}
}
.validation-error-message {
diff --git a/openecomp-ui/resources/scss/modules/_entitlementPools.scss b/openecomp-ui/resources/scss/modules/_entitlementPools.scss
index 0e0a72a387..ad0bb77e8d 100644
--- a/openecomp-ui/resources/scss/modules/_entitlementPools.scss
+++ b/openecomp-ui/resources/scss/modules/_entitlementPools.scss
@@ -1,6 +1,5 @@
-.entitlement-pools-list-editor {
-
+.entitlement-pools-list-editor {
.list-editor-view-list {
.list-editor-item-view {
min-height: 110px;
@@ -8,13 +7,9 @@
}
.list-editor-item-view-field {
- .entitlement-pools-count, .entitlement-parameters, .contract-number, .type{
+ .entitlement-pools-count, .contract-number, .type{
color: $purple;
}
- .entitlement-parameters {
- @include ellipsis;
- margin-bottom: 2px;
- }
.entitlement-pools-count {
@extend .heading-1;
margin-top: -10px;
@@ -25,22 +20,29 @@
}
.entitlement-pools-modal {
- .validation-form-content {
- padding: 50px;
- }
.modal-body {
padding: 0;
}
+ .sdc-tab-content {
+ margin: 0;
+ }
.entitlement-pools-form {
- .tab-content {
- padding: 50px;
- }
.threshold-section {
display: flex;
justify-content: space-between;
.validation-input-wrapper {
flex: 0 0 46%;
}
+ }
+ .date-section {
+ display: flex;
+ justify-content: space-between;
+ .validation-input-wrapper {
+ flex: 0 0 46%;
+ }
+ }
+ .validation-form-content {
+ padding: 20px 50px;
}
}
.validation-buttons {
diff --git a/openecomp-ui/resources/scss/modules/_featureGroup.scss b/openecomp-ui/resources/scss/modules/_featureGroup.scss
index 8c45d8ec58..9d395f98c8 100644
--- a/openecomp-ui/resources/scss/modules/_featureGroup.scss
+++ b/openecomp-ui/resources/scss/modules/_featureGroup.scss
@@ -32,6 +32,14 @@
margin-top: 55px;
color: $dark-gray;
}
+ .validation-form-content {
+ padding: 0;
+ }
+
+ .nav.nav-tabs {
+ padding-left: 50px;
+ }
+
.tab-content {
padding: 50px;
.field-section {
diff --git a/openecomp-ui/resources/scss/modules/_licenseKeyGroup.scss b/openecomp-ui/resources/scss/modules/_licenseKeyGroup.scss
index 5de757bf64..d072849c08 100644
--- a/openecomp-ui/resources/scss/modules/_licenseKeyGroup.scss
+++ b/openecomp-ui/resources/scss/modules/_licenseKeyGroup.scss
@@ -16,23 +16,3 @@
}
}
}
-
-.license-key-groups-modal {
- .modal-body {
- padding: 0;
- }
- .license-key-groups-form {
- .validation-form-content {
- padding: 50px;
- .field-section {
- @extend .body-2-semibold;
- margin-bottom: 23px;
- width: 400px;
- color: $black;
- }
- }
- .validation-buttons {
- padding: 20px 50px;
- }
- }
-}
diff --git a/openecomp-ui/resources/scss/modules/_licenseModel.scss b/openecomp-ui/resources/scss/modules/_licenseModel.scss
index 3d65be6274..fab091fe67 100644
--- a/openecomp-ui/resources/scss/modules/_licenseModel.scss
+++ b/openecomp-ui/resources/scss/modules/_licenseModel.scss
@@ -1,20 +1,53 @@
-.license-model-type-modal {
+.license-model-modal {
.modal-body {
padding: 0;
}
- .validation-form-content {
- padding: 50px;
- .field-section {
- @extend .body-2-semibold;
- margin-bottom: 23px;
- width: 400px;
- color: $black;
+ .modal-header {
+ border-bottom: none;
+ padding-bottom: 30px;
+ }
+ .modal-body {
+ padding: 0;
+ }
+ .sdc-tabs-list {
+ padding-left: 50px;
+ border-bottom: 1px solid $tlv-light-gray;
+ display: flex;
+ align-items: baseline;
+ }
+ .sdc-tab-content {
+ margin-top: 0;
+ }
+ .add-limit-button {
+ margin-left: auto;
+ margin-right: 50px;
+ padding-right: 0;
+ text-align: end;
+ }
+ .license-model-form {
+ .validation-form-content {
+ padding: 20px 50px;
+ }
+ .validation-buttons {
+ padding: 20px 50px;
}
- textarea {
- height: 107px;
+ &.license-agreement-form, &.feature-group-form {
+ .validation-form-content {
+ padding: 0;
+ }
+ .sdc-tab-content {
+ padding: 20px 50px;
+ }
+ }
+ }
+ .license-model-modal-buttons {
+ padding: 21px 50px;
+ display: flex;
+ justify-content: flex-end;
+ background-color: $tlv-gray;
+ margin-top: 2px;
+ .sdc-button {
+ margin-left: 20px;
}
- }
- .validation-buttons {
- padding: 20px 50px;
- }
+ }
}
diff --git a/openecomp-ui/resources/scss/modules/_licenseModelLimits.scss b/openecomp-ui/resources/scss/modules/_licenseModelLimits.scss
new file mode 100644
index 0000000000..32fd128f2e
--- /dev/null
+++ b/openecomp-ui/resources/scss/modules/_licenseModelLimits.scss
@@ -0,0 +1,121 @@
+.license-model-limits-view {
+ max-height: 490px;
+ overflow: auto;
+
+ .limit-editor-title {
+ padding: 10px 50px;
+ background-color: $blue;
+ color: $white;
+
+ }
+ .list-editor-view-add-title {
+ margin-right: 20px;
+ }
+
+ .no-limits-text {
+ padding-left: 50px;
+ }
+
+ .list-editor-view {
+ .list-editor-view-header {
+ border-bottom: none;
+ padding-top: 30px;
+ padding-bottom: 0;
+ }
+
+ .list-editor-view-list-scroller {
+ margin-top: 0;
+ margin-bottom: 30px;
+ }
+ .list-editor-view-list {
+ width: 100%;
+ .list-editor-item-view {
+ min-height: 50px;
+ height: 50px;
+ background-color: $tlv-light-gray;
+ border-color: transparent;
+ margin: 1px 0;
+ .list-editor-item-view-content {
+ padding-left: 0;
+ }
+ .svg-icon-wrapper.trashO {
+ margin-bottom: 0;
+ margin-right: 50px;
+ .svg-icon {
+ fill: $gray;
+ height: 16px;
+ width: 16px;
+ &:hover {
+ fill: $dark-gray;
+ }
+ }
+ }
+ &.selectable {
+ &:hover {
+ background-color: darken($tlv-light-gray, 4%);
+ cursor: pointer;
+ }
+ }
+ &:hover {
+ border-color: transparent;
+ cursor: default;
+ }
+ .list-editor-item-view-content {
+ .list-editor-item-view-field {
+ display: flex;
+ align-items: center;
+ white-space: nowrap;
+
+ &.limit-name {
+ .text.name {
+ @extend .body-1-semibold;
+ color: $blue;
+ text-transform: uppercase;
+ padding: 0px 10px;
+ }
+
+ border-right: 1px solid $light-gray;
+ margin-right: 22px;
+ flex: 0.4;
+ display: flex;
+ justify-content: center;
+ }
+
+ &.limit-description {
+ max-width: 300px;
+ margin-right: 22px;
+ }
+
+ &.limit-metric-details {
+ max-width: 300px;
+ }
+
+ .text.description, .text.name {
+ overflow: hidden;
+ text-overflow: ellipsis;
+ white-space: nowrap;
+ }
+ }
+
+ }
+ }
+ }
+ }
+ .limit-editor{
+ .limit-editor-form {
+ .limit-editor-form-grid-section {
+ padding-bottom: 0;
+ }
+ .validation-form-content {
+ padding: 21px 45px;
+ }
+ .limit-editor-buttons {
+ display: flex;
+ justify-content: flex-end;
+ .sdc-button {
+ margin-left: 20px;
+ }
+ }
+ }
+ }
+} \ No newline at end of file
diff --git a/openecomp-ui/resources/scss/modules/_licenseModelOverview.scss b/openecomp-ui/resources/scss/modules/_licenseModelOverview.scss
index 5c74e82d83..1c133a1dce 100644
--- a/openecomp-ui/resources/scss/modules/_licenseModelOverview.scss
+++ b/openecomp-ui/resources/scss/modules/_licenseModelOverview.scss
@@ -1,3 +1,21 @@
+$list-indentation: 20px;
+$arrow-margin: 30px;
+$icon-margin: 30px;
+$arrow-element-width: 30px;
+$list-item-padding: 15px;
+
+@mixin overview-tile-shadow() {
+ @include box-shadow(0.5px 0.8px 4px 0 rgba(24, 24, 25, 0.05));
+}
+
+// @mixin vlm-list-item-inset($color) {
+// @include box-shadow(inset 6px 0 0 0 $color);
+// }
+
+$la-color: $dark-blue;
+$fg-color: $blue;
+$lkg-ep-color: $light-blue;
+
.license-model-overview {
.overview-top-section {
.overview-title{
@@ -20,60 +38,61 @@
.vendor-data-view {
@extend .flex-column;
background-color: $tlv-gray;
- padding: 20px 30px;
+ padding: 13px 30px;
border: 1px solid $tlv-light-gray;
- @include border-shadow();
+ @include overview-tile-shadow();
.vendor-title {
margin-top:5px;
}
.vendor-name {
@extend .heading-4-semibold;
text-transform: none;
- padding-bottom: 15px;
+ padding-bottom: 10px;
border-bottom: 1px solid $tlv-light-gray;
}
- .vendor-description {
+ .vendor-description, .vendor-description-readonly {
@extend .flex;
@extend .body-1;
justify-content: space-between;
- margin-top: 10px;
overflow: hidden;
+ position: relative;
+ flex: initial;
+ }
+
+ &:not(.read-only) .vendor-description {
border: 1px solid transparent;
- position: relative;
- left: -6px;
- width: 101%;
+ padding: 2px 0 2px 6px;
+ margin-top: 10px;
+ $hover-padding-right: 16px;
+ @include percent-plus-value($property: width, $percent: 100%, $value: -$hover-padding-right); // compensate for padding added on hover
&:hover {
- border: 1px solid $tlv-light-gray;
- background-position: 99% 12%;
- background-size: 15px;
- padding-right: 20px;
+ padding-right: $hover-padding-right;
+ width: 100%;
+ border: 1px solid $light-gray;
+ cursor: pointer;
+
+ background-position: calc(100% - 4px) 4px;
+ background-size: 14px;
background-image: url($pencil-icon);
background-repeat: no-repeat;
- cursor: pointer;
- }
- &.read-only {
- border: none;
+ background-color: white;
+
+ .description-data:after {
+ background: white;
+ }
}
- .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;
+ margin-top: 16px;
}
+ .description-data {
+ @include multiline-ellipsis($lineCount: 3, $bgColor: $tlv-gray);
+ flex: initial;
+ }
+
.vendor-description-edit {
@extend .flex;
flex-direction: column;
@@ -84,6 +103,7 @@
width: 101%;
textarea {
padding-left: 6px;
+ resize: vertical;
}
.buttons-row {
@extend .flex;
@@ -133,12 +153,12 @@
margin-left: 20px;
justify-content: space-between;
border: 1px solid $tlv-light-gray;
- @include border-shadow();
+ @include overview-tile-shadow();
background-color: $tlv-gray;
.summary-count-item {
@extend .flex;
- @extend .heading-5-semibold;
- padding-top: 5px;
+ @extend .heading-5-semibold;
+ align-items: center;
padding-left: 45px;
padding-right: 45px;
border-bottom: 1px solid $tlv-light-gray;
@@ -184,9 +204,10 @@
}
}
}
- .vlm-list-tab-panel
- {
- @extend .flex;
+ .vlm-list-tab-panel {
+
+ @extend .flex;
+ margin-bottom: 7px;
.section-title {
flex: 1;
}
@@ -236,81 +257,33 @@
}
.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;
+ .vlm-list-item.orphan-list-item {
+ @include overview-tile-shadow();
+ margin-left: 0;
+
+ .vlm-list-item-title {
- }
- .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;
- }
- }
- }
+ .item-name {
+ color: $dark-gray;
+ }
+ }
+ .list-item-icon-col {
+ .overview-list-icon {
+ background-color: $gray;
+ border-color: $gray;
+ }
+ }
+ .list-item-section {
+ &:first-child {
+ display: flex;
+ color: $white;
+ min-width: $arrow-element-width;
+ }
+ &.list-item-icon-col {
+ margin-left: 65px;
+ margin-right: 65px - $list-item-padding;
+ }
+ }
}
}
}
@@ -328,18 +301,32 @@
@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;
-
- }
+ .clickable {
+ cursor: pointer;
+ }
+
.list-item-section {
- padding: 10px;
+ .count-value {
+ @extend .body-3;
+ }
+ &.list-item-icon-col {
+ display: flex;
+ flex-direction: column;
+ justify-content: center;
+ align-items: center;
+ padding: 0;
+ margin-right: 40px - $list-item-padding;
+ margin-left: $icon-margin;
+ .overview-list-icon {
+ @extend .body-2;
+ }
+ }
+ padding: 15px;
+ &.list-item-arrow-col {
+ padding: 0;
+ }
.children-count {
@extend .body-1;
- line-height: 20px;
color: $gray;
padding-left: 5px;
.count-value {
@@ -347,9 +334,18 @@
}
}
.additional-data {
- padding-left: 50px;
+ padding-left: 60px;
+ display: flex;
+ flex-direction: column;
+ justify-content: space-between;
+ *:last-child {
+ margin-top: 20px;
+ }
+ *:only-child {
+ margin-top: 0;
+ }
.additional-data-name {
- @extend .body-1-semibold;
+ @extend .body-2-semibold;
}
}
.additional-data-col-border {
@@ -359,128 +355,140 @@
}
}
.list-item-additional-data-col {
- @extend .body-1;
+ @extend .body-2;
@extend .flex;
- align-items: center;
- flex: 0.8;
+ align-items: stretch;
+ flex: 0.8;
+ margin-left: 30px;
+ padding-top: 17px;
+ padding-bottom: 11px;
}
.arrow-icon {
- align-self: center;
+ align-self: center;
+
}
.vlm-item-info {
flex: 1;
}
.vlm-list-item-title {
- @extend .flex;
+ @extend .flex;
+ align-items: baseline;
.item-name {
@extend .heading-5-semibold;
flex: 0 1 auto;
- margin-bottom: 4px;
+ margin-bottom: 4px;
+ text-transform: uppercase;
}
}
.vlm-list-item-description {
@extend .body-1;
- overflow: hidden;
+ @include multiline-ellipsis($lineCount: 3, $bgColor: $tlv-gray);
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');
+ @include create-circle($circle-icon-size,$la-color,'LA');
color: $white;
- }
+ }
+ .vlm-list-item-title {
+ .item-name {
+ color: $la-color;
+ }
+ }
.list-item-section {
&:first-child {
display: flex;
- color: $dark-blue;
- min-width: 34px;
+ color: $la-color;
+ min-width: $arrow-element-width;
}
}
.list-item-arrow-col {
flex: 0.01;
- margin-left: 14px;
- }
- .list-item-icon-col {
- padding-left: 14px;
- padding-right: 30px;
- align-items: center;
+ margin-left: $arrow-margin;
+ justify-content: center;
}
-
}
&.vlm-list-item-fg {
- border-left: 10px solid $blue;
- margin-left: 20px;
- margin-top: 10px;
+ margin-left: $list-indentation;
+ margin-top: 10px;
+ .fg-pipeline-separator {
+ color: $dark-gray;
+ padding: 0 5px;
+ }
+ .list-item-icon-col {
+ margin-left: 29px;
+ }
.fg-icon {
- @include create-circle($circle-icon-size,$blue,'FG');
+ @include create-circle($circle-icon-size,$fg-color,'FG');
color: $white;
- }
+ }
+
+ .vlm-list-item-title {
+ .item-name {
+ color: $fg-color;
+ }
+ }
.list-item-section {
&:first-child {
display: flex;
- color: $blue;
- min-width: 34px;
+ color: $fg-color;
+ min-width: $arrow-element-width;
}
}
.list-item-arrow-col {
flex: 0.01;
- margin-left: 26px;
- }
- .list-item-icon-col {
- padding-left: 22px;
- padding-right: 30px;
- align-items: center;
+ margin-left: $arrow-margin - $list-indentation;
+ padding-left: $list-indentation;
}
}
&.vlm-list-item-ep {
- margin-left: 40px;
+ margin-left: $list-indentation * 2;
margin-top: 10px;
- border-left: 10px solid $light-blue;
cursor: default;
.ep-icon {
- @include create-circle($circle-icon-size,$light-blue,'EP');
+ @include create-circle($circle-icon-size,$lkg-ep-color,'EP');
color: $white;
- }
- .list-item-icon-col {
- padding-left: 72px;
- padding-right: 30px;
- align-items: center;
- }
+ }
+ .vlm-list-item-title {
+ .item-name {
+ color: $lkg-ep-color;
+ }
+ }
.list-item-section {
&:first-child {
display: none;
- }
- }
- .list-item-additional-data-col {
- margin-right: 20px;
+ }
+ &.list-item-icon-col {
+ margin-left: 52px;
+ }
}
+
}
&.vlm-list-item-lkg {
margin-top: 10px;
- margin-left: 40px;
- border-left: 10px solid $light-blue;
+ margin-left: $list-indentation * 2;
cursor: default;
.lkg-icon {
- @include create-circle($circle-icon-size,$light-blue,'KG');
+ @include create-circle($circle-icon-size,$lkg-ep-color,'KG');
color: $white;
- }
- .list-item-icon-col {
- padding-left: 72px;
- padding-right: 30px;
- align-items: center;
- }
+ }
+ .vlm-list-item-title {
+ .item-name {
+ color: $lkg-ep-color;
+ }
+ }
.list-item-section {
&:first-child {
display: none;
- }
+ }
+ &.list-item-icon-col {
+ margin-left: 52px;
+ }
}
- .list-item-additional-data-col {
- margin-right: 20px;
- }
}
}
diff --git a/openecomp-ui/resources/scss/modules/onboardingCatalog/_catalogTile.scss b/openecomp-ui/resources/scss/modules/onboardingCatalog/_catalogTile.scss
index 07f86aba2a..87a852f755 100644
--- a/openecomp-ui/resources/scss/modules/onboardingCatalog/_catalogTile.scss
+++ b/openecomp-ui/resources/scss/modules/onboardingCatalog/_catalogTile.scss
@@ -48,6 +48,9 @@
align-self: baseline;
color: $gray;
line-height: 10px;
+ &:first-letter {
+ text-transform: capitalize;
+ }
@include ellipsis(auto, inline-block, 178px);
}
@@ -56,7 +59,10 @@
@extend .heading-5-semibold;
color: $black;
@include ellipsis(auto, inline-block, 175px);
- line-height: inherit;
+ line-height: inherit;
+ &:first-letter {
+ text-transform: capitalize;
+ }
}
}
.catalog-tile-icon {
diff --git a/openecomp-ui/resources/scss/modules/onboardingCatalog/_vendorTile.scss b/openecomp-ui/resources/scss/modules/onboardingCatalog/_vendorTile.scss
index 5972bb2d67..d490fd6e1c 100644
--- a/openecomp-ui/resources/scss/modules/onboardingCatalog/_vendorTile.scss
+++ b/openecomp-ui/resources/scss/modules/onboardingCatalog/_vendorTile.scss
@@ -24,7 +24,10 @@
.catalog-tile-top {
.catalog-tile-item-name {
margin-top: 21px;
- line-height: inherit;
+ line-height: inherit;
+ &:first-letter {
+ text-transform: capitalize;
+ }
}
.catalog-tile-vsp-count {
@extend .body-3-semibold;
diff --git a/openecomp-ui/resources/scss/onboarding.scss b/openecomp-ui/resources/scss/onboarding.scss
index d7d4586354..b49a7cb423 100644
--- a/openecomp-ui/resources/scss/onboarding.scss
+++ b/openecomp-ui/resources/scss/onboarding.scss
@@ -12,53 +12,73 @@
div[data-reactroot].customized-date-picker-calendar {
@import "common/variables";
@import "common/typography";
- border-radius: 2px;
border-color: $light-gray;
margin-top: -8px;
+ color: $black;
.react-datepicker__triangle {
margin-top: 0px;
}
.react-datepicker__navigation--previous {
- border: none;
- width: 15px;
- height: 15px;
+ border: none;
+ width: 12px;
+ height: 12px;
margin-top: 2px;
- content: url(../images/angle-left.svg);
+ 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);
+ border: none;
+ width: 12px;
+ height: 12px;
+ margin-top: 2px;
+ content: url(../images/angle-right.svg);
}
- .react-datepicker__month-container {
+ .react-datepicker__month-container {
.react-datepicker__header {
background-color: $background-gray;
border-bottom: none;
.react-datepicker__current-month {
- @extend .heading-5;
+ @extend .body-1-semibold;
background-color: $background-gray;
- margin-bottom: 10px;
+ margin-bottom: 10px;
}
.react-datepicker__day-names {
- @extend .heading-5;
+ @extend .body-1;
background-color: $white;
}
}
- .react-datepicker__day--selected {
- @extend .heading-5;
- border-radius: 20px;
+ .react-datepicker__day--selected, .react-datepicker__day--keyboard-selected {
+ @extend .body-1;
background-color: $blue;
- &:hover {
- background-color: $dark-blue;
- }
+ color: $white;
}
.react-datepicker__day {
- @extend .heading-5;
- &:hover {
- border-radius: 20px;
- }
+ border-radius: 0px;
+ margin: 0;
+ flex: 1;
+ @extend .body-1;
+ }
+
+ .react-datepicker__day--in-range, .react-datepicker__day--in-selecting-range {
+ background-color: $tlv-hover;
+ color: $black;
+ &.react-datepicker__day--selected, &.react-datepicker__day--keyboard-selected, &.react-datepicker__day--range-start, &.react-datepicker__day--range-end {
+ background-color: $blue;
+ color: $white;
+ }
+ &.react-datepicker__day--selecting-range-start, &.react-datepicker__day--selecting-range-end {
+ background-color: lighten($blue, 40%);
+ color: $black;
+ }
+ &.react-datepicker__day--selecting-range-start.react-datepicker__day--range-start,
+ &.react-datepicker__day--selecting-range-end.react-datepicker__day--range-end,
+ &.react-datepicker__day--selecting-range-start.react-datepicker__day--keyboard-selected {
+ background-color: $blue;
+ color: $white;
+ }
+ }
+
+ .react-datepicker__week {
+ display: flex;
}
}
}
@@ -69,7 +89,7 @@ div[data-reactroot].tooltip {
@import "common/typography";
&.in {
- opacity: 1;
+ opacity: 1;
}
&.validation-error-message {
&.bottom {
@@ -94,28 +114,33 @@ div[data-reactroot].tooltip {
}
}
&.bottom {
- .tooltip-arrow {
- border-bottom-color: $dark-gray !important;
- }
+ .tooltip-arrow {
+ border-bottom-color: $dark-gray !important;
+ }
}
&.top {
- .tooltip-arrow {
- border-top-color: $dark-gray !important;
- }
+ .tooltip-arrow {
+ border-top-color: $dark-gray !important;
+ }
}
.tooltip-inner {
- max-width: 100%;
- background-color: $dark-gray;
+ @extend .body-1;
+ max-width: 100%;
+ background-color: $dark-gray;
+ padding: 6px 9px;
+ &:first-letter {
+ text-transform: capitalize;
+ }
}
// activity log tooltip
&.activity-log-message-tooltip {
- @include base-font-regular;
- font-size: $body-font-2;
- .message-block {
- text-align: left;
- padding: 3px 12px;
- }
+ @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{
@@ -136,4 +161,11 @@ div[data-reactroot].tooltip {
font-size: $body-font-2;
}
}
+
+ // for read-only mode, vendor description in VLM overview
+ &.vendor-description-tooltip {
+ .tooltip-inner {
+ max-width: 600px;
+ }
+ }
}