summaryrefslogtreecommitdiffstats
path: root/openecomp-ui/resources/scss/onboarding.scss
diff options
context:
space:
mode:
Diffstat (limited to 'openecomp-ui/resources/scss/onboarding.scss')
-rw-r--r--openecomp-ui/resources/scss/onboarding.scss110
1 files changed, 71 insertions, 39 deletions
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;
+ }
+ }
}