[SDC] Full OnBoard health-check and NFoD support

[sdc.git] / openecomp-ui / resources / scss / components / _datepicker.scss

diff --git a/openecomp-ui/resources/scss/components/_datepicker.scss b/openecomp-ui/resources/scss/components/_datepicker.scss
index 593bb09..d51a1b6 100644 (file)
--- 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;
+                       }
+               }
        }
-
-
-
 }