[SDC] Onboarding 1710 rebase.
Change-Id: If3b6b81d221fde13908f1e8160db6f7d9433c535
Signed-off-by: Avi Ziv <avi.ziv@amdocs.com>
diff --git a/openecomp-ui/resources/scss/onboarding.scss b/openecomp-ui/resources/scss/onboarding.scss
index 6b892ac..d7d4586 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 @@
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 {