@payloadcms/ui 3.0.0-beta.111 → 3.0.0-beta.113

package/dist/elements/DatePicker/index.scss

@@ -2,386 +2,388 @@
 
 $cal-icon-width: 18px;
 
-[dir='rtl'] {
-  .date-time-picker {
-    .react-datepicker__input-container input {
-      padding-right: base(3.4);
+@layer payload-default {
+  [dir='rtl'] {
+    .date-time-picker {
+      .react-datepicker__input-container input {
+        padding-right: base(3.4);
+      }
     }
   }
-}
-
-.date-time-picker {
-  .react-datepicker__time-container .react-datepicker__time .react-datepicker__time-box,
-  .react-datepicker__time-container {
-    width: 120px;
-  }
-
-  &__icon-wrap {
-    position: relative;
-    z-index: 1;
-  }
-
-  .icon--calendar,
-  &__clear-button {
-    position: absolute;
-  }
-
-  .icon--calendar,
-  .icon--x {
-    @include color-svg(var(--theme-elevation-800));
-    height: auto;
-  }
-
-  &__clear-button {
-    top: base(0.5);
-    right: base(2);
-  }
-
-  .icon--calendar {
-    top: base(0.625);
-    right: base(0.75);
-    width: $cal-icon-width;
-    pointer-events: none;
-  }
-
-  .icon--x {
-    width: base(1);
-  }
-
-  &__clear-button {
-    appearance: none;
-    background-color: transparent;
-    border: none;
-    outline: none;
-    padding: 0;
-    cursor: pointer;
-  }
 
-  &__appearance--timeOnly {
-    .react-datepicker {
-      width: 100%;
-
-      &__month-container,
-      &__navigation--previous,
-      &__navigation--next {
-        display: none;
-        visibility: hidden;
-      }
-
-      &-popper,
-      &__time-container,
-      &__time-box {
-        width: base(6);
-      }
-
-      &__time-container {
-        .react-datepicker__time {
-          .react-datepicker__time-box {
-            width: 100%;
-          }
-        }
-      }
+  .date-time-picker {
+    .react-datepicker__time-container .react-datepicker__time .react-datepicker__time-box,
+    .react-datepicker__time-container {
+      width: 120px;
     }
-  }
 
-  .react-datepicker-wrapper {
-    display: block;
-  }
+    &__icon-wrap {
+      position: relative;
+      z-index: 1;
+    }
 
-  .react-datepicker-wrapper,
-  .react-datepicker__input-container {
-    width: 100%;
-  }
+    .icon--calendar,
+    &__clear-button {
+      position: absolute;
+    }
 
-  .react-datepicker__input-container input {
-    @include formInput;
-    padding-right: calc(#{base(0.75)} + #{$cal-icon-width});
-  }
+    .icon--calendar,
+    .icon--x {
+      @include color-svg(var(--theme-elevation-800));
+      height: auto;
+    }
 
-  &--has-error {
-    .react-datepicker__input-container input {
-      background-color: var(--theme-error-200);
+    &__clear-button {
+      top: base(0.5);
+      right: base(2);
     }
-  }
 
-  .react-datepicker {
-    @include shadow-lg;
-    border: 1px solid var(--theme-elevation-100);
-    background: var(--theme-input-bg);
-    display: inline-flex;
-    font-family: var(--font-body);
-    font-weight: 100;
-    border-radius: 0;
-    color: var(--theme-elevation-800);
-
-    &__header {
-      padding-top: 0;
-      text-transform: none;
-      text-align: center;
-      border-radius: 0;
-      border: none;
-      background-color: var(--theme-input-bg);
+    .icon--calendar {
+      top: base(0.625);
+      right: base(0.75);
+      width: $cal-icon-width;
+      pointer-events: none;
+    }
 
-      &--time {
-        padding: 10px 0;
-        border-bottom: 1px solid var(--theme-elevation-150);
-        font-weight: 600;
-      }
+    .icon--x {
+      width: base(1);
     }
 
-    &__navigation {
-      background: none;
-      line-height: 1.7rem;
-      text-align: center;
-      cursor: pointer;
-      position: absolute;
-      top: 10px;
-      width: 0;
+    &__clear-button {
+      appearance: none;
+      background-color: transparent;
+      border: none;
+      outline: none;
       padding: 0;
-      border: 0.45rem solid transparent;
-      z-index: 1;
-      height: 10px;
-      width: 10px;
-      text-indent: -999em;
-      overflow: hidden;
-      top: 15px;
+      cursor: pointer;
+    }
 
-      &--next {
-        border-left-color: var(--theme-elevation-400);
+    &__appearance--timeOnly {
+      .react-datepicker {
+        width: 100%;
 
-        &:focus {
-          border-left-color: var(--theme-elevation-500);
-          outline: none;
+        &__month-container,
+        &__navigation--previous,
+        &__navigation--next {
+          display: none;
+          visibility: hidden;
         }
-      }
 
-      &--previous {
-        border-right-color: var(--theme-elevation-400);
+        &-popper,
+        &__time-container,
+        &__time-box {
+          width: base(6);
+        }
 
-        &:focus {
-          border-right-color: var(--theme-elevation-500);
-          outline: none;
+        &__time-container {
+          .react-datepicker__time {
+            .react-datepicker__time-box {
+              width: 100%;
+            }
+          }
         }
       }
     }
 
-    &__current-month,
-    &__header,
-    &-year-header,
-    &__day-name,
-    &__day,
-    &__time-name,
-    &-time__header {
-      color: var(--theme-elevation-1000);
+    .react-datepicker-wrapper {
+      display: block;
     }
 
-    &__current-month {
-      display: none;
+    .react-datepicker-wrapper,
+    .react-datepicker__input-container {
+      width: 100%;
     }
 
-    &__header__dropdown,
-    &-year-header {
-      padding: 10px 0;
-      font-weight: bold;
+    .react-datepicker__input-container input {
+      @include formInput;
+      padding-right: calc(#{base(0.75)} + #{$cal-icon-width});
     }
 
-    &__month-container {
-      border-right: 1px solid var(--theme-elevation-150);
+    &--has-error {
+      .react-datepicker__input-container input {
+        background-color: var(--theme-error-200);
+      }
     }
 
-    &__time,
-    &__time-container,
-    .react-datepicker__time-container .react-datepicker__time {
-      background: none;
-    }
+    .react-datepicker {
+      @include shadow-lg;
+      border: 1px solid var(--theme-elevation-100);
+      background: var(--theme-input-bg);
+      display: inline-flex;
+      font-family: var(--font-body);
+      font-weight: 100;
+      border-radius: 0;
+      color: var(--theme-elevation-800);
+
+      &__header {
+        padding-top: 0;
+        text-transform: none;
+        text-align: center;
+        border-radius: 0;
+        border: none;
+        background-color: var(--theme-input-bg);
+
+        &--time {
+          padding: 10px 0;
+          border-bottom: 1px solid var(--theme-elevation-150);
+          font-weight: 600;
+        }
+      }
 
-    &__time-container {
-      border-left: none;
-    }
+      &__navigation {
+        background: none;
+        line-height: 1.7rem;
+        text-align: center;
+        cursor: pointer;
+        position: absolute;
+        top: 10px;
+        width: 0;
+        padding: 0;
+        border: 0.45rem solid transparent;
+        z-index: 1;
+        height: 10px;
+        width: 10px;
+        text-indent: -999em;
+        overflow: hidden;
+        top: 15px;
+
+        &--next {
+          border-left-color: var(--theme-elevation-400);
+
+          &:focus {
+            border-left-color: var(--theme-elevation-500);
+            outline: none;
+          }
+        }
 
-    &__month-text {
-      padding: base(0.3);
-      margin: base(0.15);
-      font-size: base(0.55);
-      &:hover {
-        background: var(--theme-elevation-100);
-      }
-    }
+        &--previous {
+          border-right-color: var(--theme-elevation-400);
 
-    &__month-select,
-    &__year-select {
-      min-width: 70px;
-      border: none;
-      background: none;
-      outline: none;
-      cursor: pointer;
+          &:focus {
+            border-right-color: var(--theme-elevation-500);
+            outline: none;
+          }
+        }
+      }
 
-      option {
-        background-color: var(--theme-elevation-50);
+      &__current-month,
+      &__header,
+      &-year-header,
+      &__day-name,
+      &__day,
+      &__time-name,
+      &-time__header {
+        color: var(--theme-elevation-1000);
       }
-    }
 
-    &__day-names {
-      background-color: var(--theme-elevation-100);
-    }
+      &__current-month {
+        display: none;
+      }
 
-    &__day {
-      box-shadow: inset 0px 0px 0px 1px var(--theme-elevation-150);
-      font-size: base(0.55);
+      &__header__dropdown,
+      &-year-header {
+        padding: 10px 0;
+        font-weight: bold;
+      }
 
-      &:hover {
-        background: var(--theme-elevation-100);
+      &__month-container {
+        border-right: 1px solid var(--theme-elevation-150);
       }
 
-      &:focus {
-        outline: 0;
-        background: var(--theme-elevation-400);
+      &__time,
+      &__time-container,
+      .react-datepicker__time-container .react-datepicker__time {
+        background: none;
       }
 
-      &--selected {
-        font-weight: bold;
+      &__time-container {
+        border-left: none;
+      }
 
-        &:focus {
-          background-color: var(--theme-elevation-150);
+      &__month-text {
+        padding: base(0.3);
+        margin: base(0.15);
+        font-size: base(0.55);
+        &:hover {
+          background: var(--theme-elevation-100);
         }
       }
 
-      &--keyboard-selected {
-        color: var(--theme-elevation-0);
-        font-weight: bold;
+      &__month-select,
+      &__year-select {
+        min-width: 70px;
+        border: none;
+        background: none;
+        outline: none;
+        cursor: pointer;
 
-        &:focus {
-          background-color: var(--theme-elevation-150);
-          box-shadow:
-            inset 0px 0px 0px 1px var(--theme-elevation-800),
-            0px 0px 0px 1px var(--theme-elevation-800);
+        option {
+          background-color: var(--theme-elevation-50);
         }
       }
 
-      &--today {
-        font-weight: bold;
+      &__day-names {
+        background-color: var(--theme-elevation-100);
       }
-    }
-
-    &__day,
-    &__day-name {
-      width: base(1.5);
-      margin: base(0.15);
-      line-height: base(1.25);
-    }
-  }
 
-  .react-datepicker-popper {
-    z-index: 10;
-    border: none;
-  }
+      &__day {
+        box-shadow: inset 0px 0px 0px 1px var(--theme-elevation-150);
+        font-size: base(0.55);
 
-  .react-datepicker__time-container
-    .react-datepicker__time
-    .react-datepicker__time-box
-    ul.react-datepicker__time-list {
-    max-height: 100%;
-  }
+        &:hover {
+          background: var(--theme-elevation-100);
+        }
 
-  .react-datepicker__day--keyboard-selected,
-  .react-datepicker__month-text--keyboard-selected,
-  .react-datepicker__time-container
-    .react-datepicker__time
-    .react-datepicker__time-box
-    ul.react-datepicker__time-list
-    li.react-datepicker__time-list-item--selected {
-    box-shadow: none;
-    background-color: var(--theme-elevation-150);
-    font-weight: bold;
-    color: var(--theme-elevation-800);
-    border-radius: 0;
-  }
+        &:focus {
+          outline: 0;
+          background: var(--theme-elevation-400);
+        }
 
-  .react-datepicker__time-container
-    .react-datepicker__time
-    .react-datepicker__time-box
-    ul.react-datepicker__time-list
-    li.react-datepicker__time-list-item--selected,
-  .react-datepicker__day--selected,
-  .react-datepicker__day--in-selecting-range,
-  .react-datepicker__day--in-range,
-  .react-datepicker__month-text--selected,
-  .react-datepicker__month-text--in-selecting-range,
-  .react-datepicker__month-text--in-range {
-    box-shadow: none;
-    background-color: var(--theme-elevation-150);
-    color: var(--theme-elevation-800);
-    font-weight: bold;
-    border-radius: 0;
-  }
+        &--selected {
+          font-weight: bold;
 
-  .react-datepicker__time-container
-    .react-datepicker__time
-    .react-datepicker__time-box
-    ul.react-datepicker__time-list
-    li.react-datepicker__time-list-item:hover {
-    background: var(--theme-elevation-100);
-  }
+          &:focus {
+            background-color: var(--theme-elevation-150);
+          }
+        }
 
-  .react-datepicker__day:hover,
-  .react-datepicker__month-text:hover {
-    border-radius: 0;
-  }
+        &--keyboard-selected {
+          color: var(--theme-elevation-0);
+          font-weight: bold;
 
-  .react-datepicker__navigation--next--with-time:not(
-      .react-datepicker__navigation--next--with-today-button
-    ) {
-    right: 130px;
-  }
+          &:focus {
+            background-color: var(--theme-elevation-150);
+            box-shadow:
+              inset 0px 0px 0px 1px var(--theme-elevation-800),
+              0px 0px 0px 1px var(--theme-elevation-800);
+          }
+        }
 
-  .react-datepicker__time-container
-    .react-datepicker__time
-    .react-datepicker__time-box
-    ul.react-datepicker__time-list
-    li.react-datepicker__time-list-item {
-    line-height: 20px;
-    font-size: base(0.5);
-  }
+        &--today {
+          font-weight: bold;
+        }
+      }
 
-  &__appearance--dayOnly,
-  &__appearance--monthOnly {
-    .react-datepicker {
-      &__month-container {
-        border-right: none;
+      &__day,
+      &__day-name {
+        width: base(1.5);
+        margin: base(0.15);
+        line-height: base(1.25);
       }
     }
-  }
 
-  @include small-break {
-    .react-datepicker {
-      flex-direction: column;
+    .react-datepicker-popper {
+      z-index: 10;
+      border: none;
     }
-    .react-datepicker__month-container {
-      border-right: 0;
+
+    .react-datepicker__time-container
+      .react-datepicker__time
+      .react-datepicker__time-box
+      ul.react-datepicker__time-list {
+      max-height: 100%;
     }
-    .react-datepicker__time-container {
-      width: auto;
+
+    .react-datepicker__day--keyboard-selected,
+    .react-datepicker__month-text--keyboard-selected,
+    .react-datepicker__time-container
+      .react-datepicker__time
+      .react-datepicker__time-box
+      ul.react-datepicker__time-list
+      li.react-datepicker__time-list-item--selected {
+      box-shadow: none;
+      background-color: var(--theme-elevation-150);
+      font-weight: bold;
+      color: var(--theme-elevation-800);
+      border-radius: 0;
     }
-    .react-datepicker__header--time {
-      background-color: var(--theme-elevation-100);
-      padding: 8px 0;
-      border-bottom: none;
+
+    .react-datepicker__time-container
+      .react-datepicker__time
+      .react-datepicker__time-box
+      ul.react-datepicker__time-list
+      li.react-datepicker__time-list-item--selected,
+    .react-datepicker__day--selected,
+    .react-datepicker__day--in-selecting-range,
+    .react-datepicker__day--in-range,
+    .react-datepicker__month-text--selected,
+    .react-datepicker__month-text--in-selecting-range,
+    .react-datepicker__month-text--in-range {
+      box-shadow: none;
+      background-color: var(--theme-elevation-150);
+      color: var(--theme-elevation-800);
+      font-weight: bold;
+      border-radius: 0;
     }
-    .react-datepicker__time-container .react-datepicker__time .react-datepicker__time-box {
-      height: 120px;
-      width: unset;
-      > ul {
-        height: 120px;
-      }
+
+    .react-datepicker__time-container
+      .react-datepicker__time
+      .react-datepicker__time-box
+      ul.react-datepicker__time-list
+      li.react-datepicker__time-list-item:hover {
+      background: var(--theme-elevation-100);
     }
+
+    .react-datepicker__day:hover,
+    .react-datepicker__month-text:hover {
+      border-radius: 0;
+    }
+
     .react-datepicker__navigation--next--with-time:not(
         .react-datepicker__navigation--next--with-today-button
       ) {
-      right: 0px;
+      right: 130px;
+    }
+
+    .react-datepicker__time-container
+      .react-datepicker__time
+      .react-datepicker__time-box
+      ul.react-datepicker__time-list
+      li.react-datepicker__time-list-item {
+      line-height: 20px;
+      font-size: base(0.5);
     }
-    &__input-wrapper {
-      .icon {
-        top: calc(50% - #{base(0.25)});
+
+    &__appearance--dayOnly,
+    &__appearance--monthOnly {
+      .react-datepicker {
+        &__month-container {
+          border-right: none;
+        }
+      }
+    }
+
+    @include small-break {
+      .react-datepicker {
+        flex-direction: column;
+      }
+      .react-datepicker__month-container {
+        border-right: 0;
+      }
+      .react-datepicker__time-container {
+        width: auto;
+      }
+      .react-datepicker__header--time {
+        background-color: var(--theme-elevation-100);
+        padding: 8px 0;
+        border-bottom: none;
+      }
+      .react-datepicker__time-container .react-datepicker__time .react-datepicker__time-box {
+        height: 120px;
+        width: unset;
+        > ul {
+          height: 120px;
+        }
+      }
+      .react-datepicker__navigation--next--with-time:not(
+          .react-datepicker__navigation--next--with-today-button
+        ) {
+        right: 0px;
+      }
+      &__input-wrapper {
+        .icon {
+          top: calc(50% - #{base(0.25)});
+        }
       }
     }
   }