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

   1 .customized-date-picker {
   2         margin-bottom: 24px;
   3         display: flex;
   4         .date-picker-label {
   5                 &.required {
   6                         &:before {
   7                                 content: "*";
   8                                 color: $red;
   9                                 margin: 0 4px 0 0;
  10                         }
  11                 }
  12
  13                 @extend .body-2-semibold;
  14                 color: $dark-gray;
  15                 margin-bottom: 8px;
  16         }
  17         .react-datepicker__input-container {
  18                 flex: 1;
  19                 cursor: pointer;
  20         }
  21         .datepicker-custom-input {
  22                 display: flex;
  23                 justify-content: space-between;
  24                 align-items: center;
  25                 height: 30px;
  26                 border-radius: 2px;
  27                 color: $dark-gray;
  28                 border: 1px solid $light-gray;
  29                 padding: 6px 8px 6px 12px;
  30                 .clear-input {
  31                                 margin-left: auto;
  32                                 margin-right: 8px;
  33                                 .svg-icon {
  34                                         fill: transparent;
  35                                         height: 8px;
  36                                         width: 8px;
  37                                 }
  38                         }
  39                 &:hover {
  40                         border-color: $gray;
  41                         .clear-input {
  42                                 .svg-icon {
  43                                         fill: initial;
  44                                 }
  45                         }
  46                 }
  47                 .datepicker-text {
  48                         cursor: pointer;
  49                         @extend .body-1;
  50                         &.placeholder {
  51                                 color: $light-gray;
  52                         }
  53
  54                 }
  55                 .calendar-input {
  56                         fill: $light-gray;
  57                 }
  58                 .svg-icon-wrapper.calendar {
  59                         .svg-icon {
  60                                 fill: $dark-gray;
  61                                 width: 17px;
  62                                 height: 17px;
  63                         }
  64                 }
  65         }
  66 }
  67