@payloadcms/ui 4.0.0-internal.5b1e7cd → 4.0.0-internal.e16cf59

package/dist/elements/DatePicker/index.scss

@@ -1,408 +0,0 @@
-@import '../../scss/styles';
-
-$cal-icon-width: 18px;
-
-@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.5);
-      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;
-      display: flex;
-      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%;
-            }
-          }
-        }
-      }
-    }
-
-    .react-datepicker-wrapper {
-      display: block;
-    }
-
-    .react-datepicker-wrapper,
-    .react-datepicker__input-container {
-      width: 100%;
-    }
-
-    .react-datepicker__input-container input {
-      @include formInput;
-      padding-right: calc(#{base(0.75)} + #{$cal-icon-width});
-    }
-
-    &--has-error {
-      .react-datepicker__input-container input {
-        background-color: var(--theme-error-200);
-      }
-    }
-
-    .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;
-        }
-      }
-
-      &__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;
-          }
-        }
-
-        &--previous {
-          border-right-color: var(--theme-elevation-400);
-
-          &:focus {
-            border-right-color: var(--theme-elevation-500);
-            outline: none;
-          }
-        }
-      }
-
-      &__current-month,
-      &__header,
-      &-year-header,
-      &__day-name,
-      &__day,
-      &__time-name,
-      &-time__header {
-        color: var(--theme-elevation-1000);
-      }
-
-      &__current-month {
-        display: none;
-      }
-
-      &__header__dropdown,
-      &-year-header {
-        padding: 10px 0;
-        font-weight: bold;
-      }
-
-      &__month-container {
-        border-right: 1px solid var(--theme-elevation-150);
-      }
-
-      &__time,
-      &__time-container,
-      .react-datepicker__time-container .react-datepicker__time {
-        background: none;
-      }
-
-      &__time-container {
-        border-left: none;
-      }
-
-      &__month-text {
-        padding: base(0.3);
-        margin: base(0.15);
-        font-size: base(0.55);
-        &:hover {
-          background: var(--theme-elevation-100);
-        }
-      }
-
-      &__month-select,
-      &__year-select {
-        min-width: 70px;
-        border: none;
-        background: none;
-        outline: none;
-        cursor: pointer;
-
-        option {
-          background-color: var(--theme-elevation-50);
-        }
-      }
-
-      &__day-names {
-        background-color: var(--theme-elevation-100);
-      }
-
-      &__day {
-        box-shadow: inset 0px 0px 0px 1px var(--theme-elevation-150);
-        font-size: base(0.55);
-
-        &:hover {
-          background: var(--theme-elevation-100);
-        }
-
-        &:focus {
-          outline: 0;
-          background: var(--theme-elevation-400);
-        }
-
-        &--selected {
-          font-weight: bold;
-
-          &:focus {
-            background-color: var(--theme-elevation-150);
-          }
-        }
-
-        &--keyboard-selected {
-          color: var(--theme-elevation-0);
-          font-weight: bold;
-
-          &: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);
-          }
-        }
-
-        &--today {
-          font-weight: bold;
-        }
-      }
-
-      &__day,
-      &__day-name {
-        width: base(1.5);
-        margin: base(0.15);
-        line-height: base(1.25);
-      }
-    }
-
-    .react-datepicker-popper {
-      z-index: 10;
-      border: none;
-    }
-
-    .react-datepicker__time-container
-      .react-datepicker__time
-      .react-datepicker__time-box
-      ul.react-datepicker__time-list {
-      max-height: 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;
-    }
-
-    .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
-      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__month .react-datepicker__day {
-      &.react-datepicker__day--disabled {
-        color: var(--theme-elevation-200);
-
-        &:hover {
-          background: none;
-        }
-      }
-    }
-
-    .react-datepicker__navigation--next--with-time:not(
-        .react-datepicker__navigation--next--with-today-button
-      ) {
-      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);
-
-      &.react-datepicker__time-list-item--disabled {
-        color: var(--theme-elevation-200);
-        &:hover {
-          background: none;
-        }
-      }
-    }
-
-    &__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)});
-        }
-      }
-    }
-  }
-}