@avakhula/ui 0.1.13 → 0.1.15

package/src/components/Form/DatePicker/DatePicker.scss

@@ -49,14 +49,14 @@ $input-hover-placeholder-color: $neutral-900;
 $input-hover-error-color: $red-800;
 $input-active-bg: $blue-50;
 
-// Calendar icon 
+// Calendar icon
 $calendar-icon: $neutral-900;
 $calendar-active-icon: $blue-900;
 $calendar-hover-icon: $blue-700;
 $calendar-disabled-icon: $neutral-500;
 $calendar-focus-icon: $blue-900;
 
-.flatpickr-wrapper {
+.ib-flatpickr-wrapper {
   width: 100%;
 
   .label {
@@ -124,6 +124,23 @@ $calendar-focus-icon: $blue-900;
     }
   }
 
+  &.is-disabled {
+    .date-picker-input {
+      color: $input-disabled-color !important;
+      background-color: $input-disabled-bg !important;
+      border-bottom-color: $neutral-500 !important;
+      cursor: default;
+
+      &::placeholder {
+        color: $input-disabled-placeholder-color!important;
+      }
+    }
+
+    .calendar-icon {
+      color: $calendar-disabled-icon !important;
+    }
+  }
+
   &.is-range {
     max-width: 312px;
 
@@ -135,345 +152,419 @@ $calendar-focus-icon: $blue-900;
       justify-content: space-between;
     }
   }
-}
-
-
 
-.date-picker-input {
-  width: 100%;
-  @include Ib-H4-regular;
-  padding: 0 30px 0 15px;
-  height: 36px;
-  border-radius: 4px 4px 0 0;
-  background-color: $input-bg;
-  color: $input-color;
-  cursor: pointer;
-  border: none;
-  outline: none;
-  border-bottom: 1px solid $input-border-color;
-  transition: color 0.3s, border-bottom-color 0.3s, border-radius 0.3s, background-color 0.3s;
-
-  &::placeholder {
+  .date-picker-input {
+    width: 100%;
     @include Ib-H4-regular;
-    color: $input-placeholder-color;
-  }
-
-  &:disabled {
-    color: $input-disabled-color;
-    background-color: $input-disabled-bg;
-    border-bottom-color: $neutral-900;
+    padding: 0 30px 0 15px;
+    height: 36px;
+    border-radius: 4px 4px 0 0;
+    background-color: $input-bg;
+    color: $input-color;
+    cursor: pointer;
+    border: none;
+    outline: none;
+    border-bottom: 1px solid $input-border-color;
+    transition: color 0.3s, border-bottom-color 0.3s, border-radius 0.3s, background-color 0.3s;
 
     &::placeholder {
-      color: $input-disabled-placeholder-color;
+      @include Ib-H4-regular;
+      color: $input-placeholder-color;
     }
 
-    & + .calendar-icon {
-      color: $calendar-disabled-icon;
-    }
-  }
+    &:disabled {
+      color: $input-disabled-color;
+      background-color: $input-disabled-bg;
+      border-bottom-color: $neutral-900;
 
-  &:focus {
-    border-radius: 4px;
-    border-bottom: 0; 
-    @include focus(0px);
+      &::placeholder {
+        color: $input-disabled-placeholder-color;
+      }
 
-    & + .calendar-icon {
-      color: $calendar-focus-icon;
+      & + .calendar-icon {
+        color: $calendar-disabled-icon;
+      }
     }
-  }
-}
-.input-wrapper:hover {
-  .date-picker-input {
-    color: $input-hover-color;
-    background-color: $input-hover-bg;
-    border-bottom-color: $input-hover-border-color;
 
-    &::placeholder {
-      color: $input-hover-placeholder-color;
-    }
+    &:focus {
+      border-radius: 4px;
+      border-bottom: 0;
+      @include focus(0px);
 
-    & + .calendar-icon {
-      color: $calendar-hover-icon;
+      & + .calendar-icon {
+        color: $calendar-focus-icon;
+      }
     }
   }
-}
-
-.flatpickr-wrapper {
-  position: relative;
-}
-
-.flatpickr-calendar {
-  padding: 15px;
-  box-shadow: $datepicker-shadow;
-  width: 312px;
-  min-width: 312px;
-  max-width: 312px;
-  background-color: $datepicker-bg;
-
-  &::after,
-  &::before {
-    display: none;
-  }
+  .input-wrapper:hover {
+    .date-picker-input {
+      color: $input-hover-color;
+      background-color: $input-hover-bg;
+      border-bottom-color: $input-hover-border-color;
+
+      &::placeholder {
+        color: $input-hover-placeholder-color;
+      }
 
-  .numInputWrapper {
-    width: 60px;
-    padding: 5px 0px 5px 10px;
+      & + .calendar-icon {
+        color: $calendar-hover-icon;
+      }
+    }
   }
 
-  .cur-year {
-    padding: 0 !important;
+  .flatpickr-wrapper {
+    position: relative;
   }
 
-  .numInputWrapper,
-  .flatpickr-monthDropdown-months {
-    @include Ib-H4-medium;
-    padding: 5px 10px;
-    border-radius: 4px;
-    border: 2px solid transparent;
+  .flatpickr-calendar {
+    padding: 15px;
+    box-shadow: $datepicker-shadow;
+    width: 312px;
+    min-width: 312px;
+    max-width: 312px;
+    background-color: $datepicker-bg;
 
-    &:hover {
-      border-color: $blue-300;
-      background-color: $blue-100;
+    &::after,
+    &::before {
+      display: none;
     }
-  }
-
-  .numInput {
-    @include Ib-H4-medium;
-    font-weight: 500!important;
-  }
-
-  .flatpickr-months {
-    display: flex;
-    align-items: center;
-    height: 36px;
-    margin-bottom: 5px;
-  }
 
-  .flatpickr-prev-month,
-  .flatpickr-next-month {
-    position: initial;
-    width: 24px;
-    height: 24px;
-    border: 2px solid transparent;
-    transition: border 0.3s;
-    padding: 0;
-    display: flex;
-    align-items: center;
-    justify-content: center;
-    font-size: 16px;
-    border-radius: 4px;
-    background: $ghost-btn-background;
-
-    svg {
-      width: 16px;
-      height: 16px;
-
-      path {
-        stroke: $ghost-btn-color;
-      }
+    .numInputWrapper {
+      width: 60px;
+      padding: 5px 0px 5px 10px;
     }
 
-    &:focus,
-    &:hover {
-      background: $ghost-btn-hover-background;
-      border-color: $ghost-btn-hover-border-color;
+    .cur-year {
+      padding: 0 !important;
+    }
 
-      svg {
-        fill: transparent;
+    .numInputWrapper,
+    .flatpickr-monthDropdown-months {
+      @include Ib-H4-medium;
+      padding: 5px 10px;
+      border-radius: 4px;
+      border: 2px solid transparent;
 
-        path {
-          stroke: $ghost-btn-hover-color;
-        }
+      &:hover {
+        border-color: $blue-300;
+        background-color: $blue-100;
       }
     }
 
-    &:active {
-      color: $ghost-btn-active-color;
-      background: $ghost-btn-active-background;
-      svg path {
-        stroke: $ghost-btn-active-color;
-      }
+    .numInput {
+      @include Ib-H4-medium;
+      font-weight: 500!important;
     }
-  }
-  .flatpickr-days,
-  .flatpickr-innerContainer {
-    overflow: visible;
-  }
 
-  .flatpickr-current-month {
-    @include Ib-H4-medium;
-    padding: 0;
-    display: flex;
-    align-items: center;
-    justify-content: space-between;
-  }
+    .flatpickr-months {
+      display: flex;
+      align-items: center;
+      height: 36px;
+      margin-bottom: 5px;
+    }
 
-  .flatpickr-weekday {
-    @include Ib-H4-medium;
-    color: $weekday-color;
-  }
+    .flatpickr-prev-month,
+    .flatpickr-next-month {
+      position: initial;
+      width: 24px;
+      height: 24px;
+      border: 2px solid transparent;
+      transition: border 0.3s;
+      padding: 0;
+      display: flex;
+      align-items: center;
+      justify-content: center;
+      font-size: 16px;
+      border-radius: 4px;
+      background: $ghost-btn-background;
 
-  .flatpickr-weekdaycontainer,
-  .dayContainer {
-    width: 287px;
-    max-width: 287px;
-    min-width: 287px;
-    margin-left: -5px;
-  }
+      svg {
+        width: 16px;
+        height: 16px;
 
-  .flatpickr-day {
-    @include Ib-H4-medium;
-    color: $day-color;
-    border-radius: 4px;
-    border: 2px solid $day-border;
+        path {
+          stroke: $ghost-btn-color;
+        }
+      }
 
-    &.prevMonthDay,
-    &.nextMonthDay {
-      color: $day-prev-next-color;
-    }
+      &:focus,
+      &:hover {
+        background: $ghost-btn-hover-background;
+        border-color: $ghost-btn-hover-border-color;
 
-    &:focus {
-      border: transparent;
-      background-color: transparent;
-    }
+        svg {
+          fill: transparent;
 
-    &:hover {
-      color: $day-hover-color;
-      background-color: $day-hover-bg;
-      border-color: $day-hover-border-color;
-    }
+          path {
+            stroke: $ghost-btn-hover-color;
+          }
+        }
+      }
 
-    &:focus {
-      @include focus(2px);
+      &:active {
+        color: $ghost-btn-active-color;
+        background: $ghost-btn-active-background;
+        svg path {
+          stroke: $ghost-btn-active-color;
+        }
+      }
     }
-
-    &.selected {
-      color: $day-selected-color;
-      background-color: $day-selected-bg;
+    .flatpickr-days,
+    .flatpickr-innerContainer {
+      overflow: visible;
     }
 
-    &.startRange {
-      box-shadow: 5px 0 0 $day-selected-in-range;
-      &.startRange:hover {
-        box-shadow: none;
-      }
+    .flatpickr-current-month {
+      @include Ib-H4-medium;
+      padding: 0;
+      display: flex;
+      align-items: center;
+      justify-content: space-between;
     }
 
-    &.endRange {
-      box-shadow: -5px 0 0 $day-selected-in-range;
+    .flatpickr-weekday {
+      @include Ib-H4-medium;
+      color: $weekday-color;
     }
 
-    &.startRange,
-    &.endRange {
-      color: $day-start-end-range-color;
-      background-color: $day-start-end-range-bg;
-      border-radius: 4px;
+    .flatpickr-weekdaycontainer,
+    .dayContainer {
+      width: 287px;
+      max-width: 287px;
+      min-width: 287px;
+      margin-left: -5px;
     }
 
-    &.startRange.endRange {
-      color: $day-start-end-range-color;
-      background-color: $day-start-end-range-bg;
+    .flatpickr-day {
+      @include Ib-H4-medium;
+      color: $day-color;
       border-radius: 4px;
-      box-shadow: none;
-    }
-
-    &.inRange {
-      border-radius: 4px !important;
-      border-radius: 0;
-      background-color: $day-selected-in-range;
-      box-shadow: -5px 0 0 $day-selected-in-range,
-        5px 0 0 $day-selected-in-range;
+      border: 2px solid $day-border;
 
       &.prevMonthDay,
       &.nextMonthDay {
-        color: $day-color;
-        border: transparent;
+        color: $day-prev-next-color;
       }
 
       &:focus {
-        z-index: 100;
+        border: transparent;
+        background-color: transparent;
       }
-    }
-
-    &.inRange {
-      border-radius: 4px;
 
       &:hover {
-        position: relative;
         color: $day-hover-color;
         background-color: $day-hover-bg;
-        border: 2px solid $day-hover-border-color;
-        z-index: 1000;
+        border-color: $day-hover-border-color;
       }
-    }
-
-    &.today.inRange,
-    &.today {
-      color: $white;
-      border-color: transparent;
-      background-color: $blue-800;
-      transition: border 0.3s, color 0.3s, background-color 0.3s;
 
-      &:focus,
-      &:hover {
-        border: transparent;
-        background-color: $blue-700;
+      &:focus {
+        @include focus(2px);
       }
 
-      &:active {
-        border: transparent;
-        background-color: $blue-900;
+      &.selected {
+        color: $day-selected-color;
+        background-color: $day-selected-bg;
       }
-    }
 
-    &:nth-child(7n) {
-      border-radius: 0 4px 4px 0 !important;
+      &.startRange {
+        box-shadow: 5px 0 0 $day-selected-in-range;
+        &.startRange:hover {
+          box-shadow: none;
+        }
+      }
 
-      &.inRange {
+      &.endRange {
         box-shadow: -5px 0 0 $day-selected-in-range;
       }
 
-      &.selected,
-      &:hover,
-      &:focus {
-        border-radius: 4px !important;
+      &.startRange,
+      &.endRange {
+        color: $day-start-end-range-color;
+        background-color: $day-start-end-range-bg;
+        border-radius: 4px;
       }
-    }
 
-    &:nth-child(7n + 1) {
-      border-radius: 4px 0 0 4px !important;
+      &.startRange.endRange {
+        color: $day-start-end-range-color;
+        background-color: $day-start-end-range-bg;
+        border-radius: 4px;
+        box-shadow: none;
+      }
 
       &.inRange {
-        box-shadow: 5px 0 0 $day-selected-in-range;
+        border-radius: 4px !important;
+        border-radius: 0;
+        background-color: $day-selected-in-range;
+        box-shadow: -5px 0 0 $day-selected-in-range,
+          5px 0 0 $day-selected-in-range;
+
+        &.prevMonthDay,
+        &.nextMonthDay {
+          color: $day-color;
+          border: transparent;
+        }
+
+        &:focus {
+          z-index: 100;
+        }
       }
 
-      &.endRange {
-        box-shadow: none !important;
+      &.inRange {
+        border-radius: 4px;
+
+        &:hover {
+          position: relative;
+          color: $day-hover-color;
+          background-color: $day-hover-bg;
+          border: 2px solid $day-hover-border-color;
+          z-index: 1000;
+        }
       }
 
-      &.selected,
-      &:hover,
-      &:focus {
-        border-radius: 4px !important;
+      &.today.inRange,
+      &.today {
+        color: $white;
+        border-color: transparent;
+        background-color: $blue-800;
+        transition: border 0.3s, color 0.3s, background-color 0.3s;
+
+        &:focus,
+        &:hover {
+          border: transparent;
+          background-color: $blue-700;
+        }
+
+        &:active {
+          border: transparent;
+          background-color: $blue-900;
+        }
+      }
+
+      &.flatpickr-disabled {
+        color: $neutral-500 !important;
+      }
+
+      &:nth-child(7n) {
+        border-radius: 0 4px 4px 0 !important;
+
+        &.inRange {
+          box-shadow: -5px 0 0 $day-selected-in-range;
+        }
+
+        &.selected,
+        &:hover,
+        &:focus {
+          border-radius: 4px !important;
+        }
+      }
+
+      &:nth-child(7n + 1) {
+        border-radius: 4px 0 0 4px !important;
+
+        &.inRange {
+          box-shadow: 5px 0 0 $day-selected-in-range;
+        }
+
+        &.endRange {
+          box-shadow: none !important;
+        }
+
+        &.selected,
+        &:hover,
+        &:focus {
+          border-radius: 4px !important;
+        }
       }
     }
+
+    .flatpickr-day,
+    .flatpickr-weekday {
+      display: flex;
+      height: 36px;
+      width: 36px;
+      max-width: 36px;
+      min-width: 36px;
+      align-items: center;
+      justify-content: center;
+      margin: 0 0 5px 5px;
+    }
   }
 
-  .flatpickr-day,
-  .flatpickr-weekday {
-    display: flex;
-    height: 36px;
-    width: 36px;
-    max-width: 36px;
-    min-width: 36px;
-    align-items: center;
-    justify-content: center;
-    margin: 0 0 5px 5px;
+  .flatpickr-day.selected.startRange + .endRange:not(:nth-child(7n + 1)),
+  .flatpickr-day.startRange.startRange + .endRange:not(:nth-child(7n + 1)),
+  .flatpickr-day.endRange.startRange + .endRange:not(:nth-child(7n + 1)) {
+    box-shadow: -5px 0 0 $day-selected-in-range;
   }
-}
 
-.flatpickr-day.selected.startRange + .endRange:not(:nth-child(7n + 1)),
-.flatpickr-day.startRange.startRange + .endRange:not(:nth-child(7n + 1)),
-.flatpickr-day.endRange.startRange + .endRange:not(:nth-child(7n + 1)) {
-  box-shadow: -5px 0 0 $day-selected-in-range;
+  .flatpickr-time {
+    border-top: none!important;
+    // padding-bottom: 5px;
+    &:after {
+      display: none;
+    }
+
+    .flatpickr-time-separator {
+      display: none;
+    }
+
+    .numInputWrapper{
+      margin: 0;
+      padding: 0;
+      overflow: visible;
+
+      input {
+        height: 36px;
+        border-bottom: 1px solid $gray-200;
+        border-radius: 4px 4px 0px 0px!important;
+        background-color: $gray-100;
+
+        &:hover {
+          color: $input-hover-color;
+          background-color: $input-hover-bg;
+
+          &::placeholder {
+            color: $input-hover-placeholder-color;
+          }
+        }
+
+        &:focus {
+          border-radius: 4px!important;
+          border-bottom: 0px;
+          @include focus(0px);
+        }
+      }
+    }
+
+    .flatpickr-am-pm {
+      height: 36px;
+      width: 36px;
+      line-height: 33px;
+      border: 2px solid transparent;
+      transition: border 0.3s;
+      color: $neutral-900;
+      border-radius: 4px;
+      background: $gray-100;
+
+      &:hover {
+        border-color: $blue-300;
+        color: $blue-700;
+        background: $blue-100;
+      }
+
+      &.active,
+      &:active {
+        border-color: transparent;
+        color: $blue-900;
+        background-color: $blue-200;
+        color: $blue-900;
+        background:  $blue-50;
+      }
+
+      &:focus {
+        border-radius: 4px!important;
+        border-bottom: 0px;
+        @include focus(-2px);
+      }
+    }
+  }
 }