@dynamic-framework/ui-react 1.2.0 → 1.2.1

package/src/style/components/_m-calendar.scss

@@ -1,205 +0,0 @@
-@import "react-datepicker/src/stylesheets/datepicker";
-
-// stylelint-disable selector-class-pattern
-.react-datepicker {
-  border: 0;
-
-  .react-datepicker__header {
-    padding: 20px 0;
-    background-color: transparent;
-    border: 0;
-  }
-
-  .react-datepicker-border {
-    border: 1px solid var(--#{$prefix}dark);
-  }
-
-  .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,
-  .react-datepicker__quarter-text--selected,
-  .react-datepicker__quarter-text--in-selecting-range,
-  .react-datepicker__quarter-text--in-range,
-  .react-datepicker__year-text--selected,
-  .react-datepicker__year-text--in-selecting-range,
-  .react-datepicker__year-text--in-range {
-    color: var(--#{$prefix}dark);
-    background-color: rgba(var(--#{$prefix}tertiary-rgb), .2);
-    border-radius: 50rem;
-  }
-
-  .react-datepicker__day--in-selecting-range:not(.react-datepicker__day--in-range, .react-datepicker__month-text--in-range, .react-datepicker__quarter-text--in-range, .react-datepicker__year-text--in-range),
-  .react-datepicker__month-text--in-selecting-range:not(.react-datepicker__day--in-range, .react-datepicker__month-text--in-range, .react-datepicker__quarter-text--in-range, .react-datepicker__year-text--in-range),
-  .react-datepicker__quarter-text--in-selecting-range:not(.react-datepicker__day--in-range, .react-datepicker__month-text--in-range, .react-datepicker__quarter-text--in-range, .react-datepicker__year-text--in-range),
-  .react-datepicker__year-text--in-selecting-range:not(.react-datepicker__day--in-range, .react-datepicker__month-text--in-range, .react-datepicker__quarter-text--in-range, .react-datepicker__year-text--in-range) {
-    background-color: rgba(var(--#{$prefix}secondary-rgb), .1);
-  }
-
-  .react-datepicker__day:hover,
-  .react-datepicker__month-text:hover,
-  .react-datepicker__quarter-text:hover,
-  .react-datepicker__year-text:hover {
-    background-color: rgba(var(--#{$prefix}tertiary-rgb), .1);
-    border-radius: 50rem;
-  }
-
-  .react-datepicker__day--keyboard-selected,
-  .react-datepicker__month-text--keyboard-selected,
-  .react-datepicker__quarter-text--keyboard-selected,
-  .react-datepicker__year-text--keyboard-selected {
-    color: var(--#{$prefix}dark);
-    background-color: transparent;
-  }
-
-  .react-datepicker__day--outside-month {
-    visibility: hidden;
-  }
-
-  .react-datepicker__input-time-container {
-    width: 100%;
-    padding-top: .5rem;
-    margin: 0;
-    text-align: center;
-    border-top: var(--#{$prefix}border-width) solid var(--#{$prefix}light);
-
-    .react-datepicker-time__caption {
-      display: none;
-    }
-
-    .react-datepicker-time__input-container {
-      width: 100%;
-
-      .react-datepicker-time__input {
-        width: 68%;
-        text-align: center;
-        outline: 0;
-      }
-    }
-  }
-
-  .react-datepicker-time__input[type="time"] {
-    width: 100%;
-    font-family: inherit;
-    font-size: .75rem;
-    color: #2a2c2d;
-    border: 0;
-  }
-
-  .react-datepicker-time__input[type="time"]::-webkit-datetime-edit-fields-wrapper {
-    display: flex;
-  }
-
-  .react-datepicker-time__input[type="time"]::-webkit-datetime-edit-text {
-    padding: 8px;
-  }
-
-  /* Hour and Minute */
-  .react-datepicker-time__input[type="time"]::-webkit-datetime-edit-hour-field,
-  .react-datepicker-time__input[type="time"]::-webkit-datetime-edit-minute-field {
-    padding: 8px;
-    cursor: text;
-    user-select: all;
-    background-color: var(--#{$prefix}light);
-    border-radius: 15%;
-  }
-
-  /* Clock Icon */
-  .react-datepicker-time__input[type="time"]::-webkit-calendar-picker-indicator {
-    cursor: pointer;
-    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16'  class='bi bi-alarm' viewBox='0 0 16 16'%3E%3Cpath d='M8.5 5.5a.5.5 0 0 0-1 0v3.362l-1.429 2.38a.5.5 0 1 0 .858.515l1.5-2.5A.5.5 0 0 0 8.5 9V5.5z'/%3E%3Cpath d='M6.5 0a.5.5 0 0 0 0 1H7v1.07a7.001 7.001 0 0 0-3.273 12.474l-.602.602a.5.5 0 0 0 .707.708l.746-.746A6.97 6.97 0 0 0 8 16a6.97 6.97 0 0 0 3.422-.892l.746.746a.5.5 0 0 0 .707-.708l-.601-.602A7.001 7.001 0 0 0 9 2.07V1h.5a.5.5 0 0 0 0-1h-3zm1.038 3.018a6.093 6.093 0 0 1 .924 0 6 6 0 1 1-.924 0zM0 3.5c0 .753.333 1.429.86 1.887A8.035 8.035 0 0 1 4.387 1.86 2.5 2.5 0 0 0 0 3.5zM13.5 1c-.753 0-1.429.333-1.887.86a8.035 8.035 0 0 1 3.527 3.527A2.5 2.5 0 0 0 13.5 1z'/%3E%3C/svg%3E");
-  }
-
-  .react-datepicker__day--today,
-  .react-datepicker__month-text--today,
-  .react-datepicker__quarter-text--today,
-  .react-datepicker__year-text--today {
-    font-weight: 400;
-    border: 1px solid var(--#{$prefix}tertiary);
-    border-radius: 50rem;
-  }
-
-  .react-datepicker__portal {
-    .react-datepicker {
-      .react-datepicker__input-time-container {
-
-        margin-bottom: 20px;
-
-      }
-    }
-  }
-
-  .repeat-end-container {
-    >div {
-      width: 100%;
-    }
-  }
-
-  .react-datepicker__input-container {
-
-    width: 100%;
-
-    .input-date {
-      --bg-size: 20px;
-      --padding-x: calc(8px - var(--#{$prefix}border-width));
-      --padding-y: calc(6px - var(--#{$prefix}border-width));
-      width: 100%;
-      padding: var(--padding-y) var(--padding-x);
-      padding-right: calc(var(--bg-size) + 1rem);
-      background-image: url("data:image/svg+xml,%3C%3Fxml version='1.0' encoding='UTF-8'%3F%3E%3Csvg viewBox='0 0 16 16' fill='%234848B7' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='m12.923 16h-9.8462c-0.81605 0-1.5987-0.3241-2.1757-0.9012-0.57704-0.577-0.90121-1.3596-0.90121-2.1757v-8.6154c0-0.81605 0.32418-1.5987 0.90121-2.1757 0.57704-0.57703 1.3597-0.90121 2.1757-0.90121h9.8462c0.816 0 1.5987 0.32418 2.1757 0.90121 0.577 0.57704 0.9012 1.3597 0.9012 2.1757v8.6154c0 0.8161-0.3242 1.5987-0.9012 2.1757-0.577 0.5771-1.3597 0.9012-2.1757 0.9012zm-9.8462-13.538c-0.48963 0-0.9592 0.19451-1.3054 0.54073-0.34623 0.34622-0.54073 0.8158-0.54073 1.3054v8.6154c0 0.4897 0.1945 0.9592 0.54073 1.3054 0.34622 0.3463 0.81579 0.5408 1.3054 0.5408h9.8462c0.4896 0 0.9592-0.1945 1.3054-0.5408 0.3462-0.3462 0.5407-0.8157 0.5407-1.3054v-8.6154c0-0.48963-0.1945-0.95921-0.5407-1.3054s-0.8158-0.54073-1.3054-0.54073h-9.8462z' /%3E%3Cpath d='m12.923 13.538h-2.4615c-0.1632 0-0.3198-0.0648-0.4352-0.1802-0.11537-0.1154-0.18021-0.272-0.18021-0.4352v-2.4615c0-0.1632 0.06484-0.3198 0.18021-0.4352 0.1154-0.11537 0.272-0.18021 0.4352-0.18021h2.4615c0.1632 0 0.3198 0.06484 0.4352 0.18021 0.1154 0.1154 0.1802 0.272 0.1802 0.4352v2.4615c0 0.1632-0.0648 0.3198-0.1802 0.4352s-0.272 0.1802-0.4352 0.1802zm-1.8461-1.2308h1.2307v-1.2307h-1.2307v1.2307z' /%3E%3Cpath d='m15.385 6.1539h-14.769c-0.16321 0-0.31974-0.06483-0.43514-0.18024-0.11541-0.1154-0.18024-0.27193-0.18024-0.43514s0.064835-0.31974 0.18024-0.43514c0.11541-0.11541 0.27193-0.18024 0.43514-0.18024h14.769c0.1632 0 0.3198 0.06483 0.4352 0.18024 0.1154 0.1154 0.1802 0.27193 0.1802 0.43514s-0.0648 0.31974-0.1802 0.43514c-0.1154 0.11541-0.272 0.18024-0.4352 0.18024z' /%3E%3Cpath d='m4.923 3.6923c-0.16321 0-0.31973-0.06484-0.43514-0.18024-0.11541-0.11541-0.18024-0.27194-0.18024-0.43515v-2.4615c0-0.16321 0.06483-0.31974 0.18024-0.43514s0.27193-0.18024 0.43514-0.18024 0.31974 0.064835 0.43514 0.18024c0.11541 0.11541 0.18025 0.27193 0.18025 0.43514v2.4615c0 0.16321-0.06484 0.31974-0.18025 0.43515-0.1154 0.1154-0.27193 0.18024-0.43514 0.18024z' /%3E%3Cpath d='m11.077 3.6923c-0.1632 0-0.3197-0.06484-0.4351-0.18024-0.1154-0.11541-0.1803-0.27194-0.1803-0.43515v-2.4615c0-0.16321 0.0649-0.31974 0.1803-0.43514s0.2719-0.18024 0.4351-0.18024 0.3197 0.064835 0.4352 0.18024c0.1154 0.11541 0.1802 0.27193 0.1802 0.43514v2.4615c0 0.16321-0.0648 0.31974-0.1802 0.43515-0.1155 0.1154-0.272 0.18024-0.4352 0.18024z' /%3E%3C/svg%3E%0A");
-      background-repeat: no-repeat;
-      background-position: right .5rem center;
-      background-origin: border-box;
-      background-size: var(--bg-size);
-
-      border: var(--#{$prefix}border-width) solid var(--#{$prefix}info);
-      border-radius: var(--#{$prefix}border-radius-sm);
-      outline: 0;
-
-    }
-  }
-
-  .react-datepicker__current-month {
-    text-transform: capitalize;
-  }
-}
-
-// Two calendars with same date range
-.react-datepicker.calendar-start {
-
-  .react-datepicker__day--selected,
-  .react-datepicker__day--in-selecting-range,
-  .react-datepicker__day--in-range {
-
-    &.react-datepicker__day--selecting-range-start,
-    &.react-datepicker__day--range-start {
-      color: var(--#{$prefix}white);
-      background-color: var(--#{$prefix}tertiary);
-
-      &:hover {
-        background-color: rgba(var(--#{$prefix}tertiary-rgb), .7);
-      }
-    }
-  }
-}
-
-.react-datepicker.calendar-end {
-
-  .react-datepicker__day--selected,
-  .react-datepicker__day--in-selecting-range,
-  .react-datepicker__day--in-range {
-
-    &.react-datepicker__day--selecting-range-end,
-    &.react-datepicker__day--range-end {
-      color: var(--#{$prefix}white);
-      background-color: var(--#{$prefix}tertiary);
-
-      &:hover {
-        background-color: rgba(var(--#{$prefix}tertiary-rgb), .7);
-      }
-    }
-  }
-}
-// stylelint-enable selector-class-pattern