openecomp-ui/resources/scss/components/_datepicker.scss

   1 .customized-date-picker {
   2     margin-bottom: 24px;
   3     display: flex;
   4     > div:first-child {
   5         flex: 1;
   6         display: flex;
   7     }
   8     .react-datepicker-wrapper {
   9         display: flex;
  10         flex: 1;
  11     }
  12     .date-picker-label {
  13         &.required {
  14             &:before {
  15                 content: '*';
  16                 color: $red;
  17                 margin: 0 4px 0 0;
  18             }
  19         }
  20
  21         @extend .body-2-semibold;
  22         color: $dark-gray;
  23         margin-bottom: 8px;
  24     }
  25     .react-datepicker__input-container {
  26         flex: 1;
  27         cursor: pointer;
  28     }
  29     .datepicker-custom-input {
  30         display: flex;
  31         justify-content: space-between;
  32         align-items: center;
  33         height: 30px;
  34         border-radius: 2px;
  35         color: $dark-gray;
  36         border: 1px solid $light-gray;
  37         padding: 6px 8px 6px 12px;
  38         .clear-input {
  39             margin-left: auto;
  40             margin-right: 8px;
  41             .svg-icon {
  42                 fill: transparent;
  43                 height: 8px;
  44                 width: 8px;
  45             }
  46         }
  47         &:hover {
  48             border-color: $gray;
  49             .clear-input {
  50                 .svg-icon {
  51                     fill: initial;
  52                 }
  53             }
  54         }
  55         .datepicker-text {
  56             cursor: pointer;
  57             @extend .body-1;
  58             &.placeholder {
  59                 color: $light-gray;
  60             }
  61         }
  62         .calendar-input {
  63             fill: $light-gray;
  64         }
  65         .svg-icon-wrapper.calendar {
  66             .svg-icon {
  67                 fill: $dark-gray;
  68                 width: 17px;
  69                 height: 17px;
  70             }
  71         }
  72     }
  73     /* Out of namespace context for datepicker */
  74     div.customized-date-picker-calendar {
  75         @import 'common/variables';
  76         @import 'common/typography';
  77         border-color: $light-gray;
  78         //margin-top: -8px;
  79         color: $black;
  80         .react-datepicker__triangle {
  81             margin-top: 0px;
  82             display: none;
  83         }
  84
  85         .react-datepicker__navigation--previous::before,
  86         .react-datepicker__navigation--next::before {
  87             width: 8px;
  88             height: 8px;
  89             display: inline-block;
  90             position: absolute;
  91             top: -4px;
  92         }
  93         .react-datepicker__navigation--previous::before {
  94             left: 0;
  95             content: url(../../node_modules/sdc-ui/assets/icons/angleLeft.svg);
  96         }
  97         .react-datepicker__navigation--next::before {
  98             right: 0;
  99             content: url(../../node_modules/sdc-ui/assets/icons/angleRight.svg);
 100         }
 101
 102         .react-datepicker__navigation--previous,
 103         .react-datepicker__navigation--next {
 104             border: none;
 105         }
 106
 107         .react-datepicker__month-container {
 108             .react-datepicker__header {
 109                 background-color: $background-gray;
 110                 border-bottom: none;
 111                 .react-datepicker__current-month {
 112                     @extend .body-1-semibold;
 113                     background-color: $background-gray;
 114                     margin-bottom: 10px;
 115                 }
 116                 .react-datepicker__day-names {
 117                     @extend .body-1;
 118                     background-color: $white;
 119                 }
 120             }
 121             .react-datepicker__day--selected,
 122             .react-datepicker__day--keyboard-selected {
 123                 @extend .body-1;
 124                 background-color: $blue;
 125                 color: $white;
 126             }
 127             .react-datepicker__day {
 128                 border-radius: 0px;
 129                 margin: 0;
 130                 flex: 1;
 131                 @extend .body-1;
 132             }
 133
 134             .react-datepicker__day--in-range,
 135             .react-datepicker__day--in-selecting-range {
 136                 background-color: $tlv-hover;
 137                 color: $black;
 138                 &.react-datepicker__day--selected,
 139                 &.react-datepicker__day--keyboard-selected,
 140                 &.react-datepicker__day--range-start,
 141                 &.react-datepicker__day--range-end {
 142                     background-color: $blue;
 143                     color: $white;
 144                 }
 145                 &.react-datepicker__day--selecting-range-start,
 146                 &.react-datepicker__day--selecting-range-end {
 147                     background-color: lighten($blue, 40%);
 148                     color: $black;
 149                 }
 150                 &.react-datepicker__day--selecting-range-start.react-datepicker__day--range-start,
 151                 &.react-datepicker__day--selecting-range-end.react-datepicker__day--range-end,
 152                 &.react-datepicker__day--selecting-range-start.react-datepicker__day--keyboard-selected {
 153                     background-color: $blue;
 154                     color: $white;
 155                 }
 156             }
 157
 158             .react-datepicker__week {
 159                 display: flex;
 160             }
 161         }
 162     }
 163 }