@uniai-fe/ui-legacy 0.1.1

package/src/style-base/essentials/calendar.scss

@@ -0,0 +1,557 @@
+@import url("flatpickr/dist/flatpickr.css");
+
+:root {
+  --flatpickr-day-text-disabled-color: var(--color_40);
+  --flatpickr-day-text-color: var(--color_80);
+  --flatpickr-selected-bg: var(--theme-blue-main);
+  --flatpickr-selected-border: var(--theme-blue-main);
+  --flatpickr-range-border: var(--theme-blue-main);
+  --flatpickr-range-bg: rgba(0, 124, 219, 0.12);
+}
+
+.flatpickr-calendar {
+  width: auto;
+  border: 1px solid var(--color_20);
+  border-radius: 0.8rem;
+  padding: 1rem;
+  box-shadow: 0 1rem 1.6rem rgba(0, 0, 0, 0.12);
+  background: var(--color_0);
+  .flatpickr-months {
+    margin-top: 0.5rem;
+    margin-bottom: 1rem;
+    .flatpickr-month {
+      width: calc(100% - 4.8rem);
+      height: auto;
+      position: static;
+      transform: none;
+      display: flex;
+      align-items: center;
+      justify-content: center;
+      line-height: 1em;
+      -webkit-box-flex: 0 0 auto;
+      flex: 0 0 auto;
+    }
+    .flatpickr-current-month {
+      width: fit-content;
+      height: auto;
+      padding: 0;
+      position: static;
+      display: flex;
+      flex-direction: row-reverse;
+      font-size: 0;
+      justify-content: center;
+      align-items: center;
+    }
+    .numInputWrapper {
+      width: auto !important;
+      height: 2.4rem;
+      padding: 0;
+      display: inline-flex;
+      position: static;
+      .cur-year {
+        width: 4rem;
+        padding: 0;
+        appearance: none;
+        background: none !important;
+        font-size: 1.6rem;
+        line-height: 2.4rem;
+        font-weight: 500;
+        color: var(--flatpickr-title);
+      }
+      &:after {
+        content: "년";
+        font-size: 1.6rem;
+        line-height: 2.4rem;
+        font-weight: 500;
+        color: var(--flatpickr-title);
+      }
+      span.arrowUp,
+      span.arrowDown {
+        display: none;
+      }
+    }
+    .cur-month {
+      height: 2.4rem;
+      font-size: 1.6rem;
+      line-height: 2.4rem;
+      font-weight: 500;
+      color: var(--flatpickr-title);
+    }
+    .flatpickr-prev-month,
+    .flatpickr-next-month {
+      width: 2.4rem;
+      height: 2.4rem;
+      padding: 0;
+      position: static;
+      display: flex;
+      align-items: center;
+      justify-content: center;
+      fill: var(--flatpickr-bg);
+      &:hover svg {
+        fill: var(--flatpickr-selected-bg);
+      }
+    }
+  }
+}
+.flatpickr-day.flatpickr-disabled,
+.flatpickr-day.flatpickr-disabled:hover,
+.flatpickr-day.prevMonthDay,
+.flatpickr-day.nextMonthDay,
+.flatpickr-day.notAllowed,
+.flatpickr-day.notAllowed.prevMonthDay,
+.flatpickr-day.notAllowed.nextMonthDay {
+  color: var(--flatpickr-day-text-disabled-color);
+  &:before,
+  &:after {
+    opacity: 0;
+  }
+  &:hover {
+    color: var(--flatpickr-day-text-disabled-color);
+  }
+}
+
+.flatpickr-days {
+  width: 28rem;
+  border: 0;
+  .dayContainer {
+    width: 100%;
+    min-width: 28rem;
+  }
+  .flatpickr-day {
+    width: 4rem;
+    max-width: 4rem;
+    height: 4rem;
+    position: relative;
+    z-index: 5;
+    line-height: 4rem;
+    &:before,
+    &:after {
+      font-size: 0;
+      display: block;
+      width: 3.6rem;
+      height: 3.6rem;
+      border-color: transparent;
+      position: absolute;
+      top: 50%;
+      left: 50%;
+      transform: translate(-50%, -50%);
+    }
+    &:before {
+      content: "선택날짜";
+      border: 1px solid transparent;
+      border-radius: 1.8rem;
+      z-index: -1;
+    }
+    &:after {
+      content: "선택범위";
+      width: 100%;
+      z-index: -2;
+    }
+    &:hover {
+      &:not(.notAllowed, .flatpickr-disabled) {
+        font-weight: 800;
+      }
+      color: #fff;
+      &:before {
+        border-color: var(--flatpickr-selected-border);
+        background: var(--flatpickr-selected-bg);
+      }
+      &:after {
+        opacity: 0;
+      }
+    }
+    &.today {
+      border: 0;
+      &:before {
+        border-color: var(--flatpickr-selected-border);
+      }
+      &:hover,
+      &:focus {
+        font-weight: 800;
+        border-color: transparent;
+        background: transparent;
+
+        span {
+          color: var(--flatpickr-day-text-color);
+        }
+        &:before {
+          border-color: var(--flatpickr-selected-border);
+          background: var(--flatpickr-selected-bg);
+        }
+        &:not(.startRange, .endRange) {
+          &:after {
+            border-color: transparent;
+            background: transparent;
+          }
+        }
+      }
+      &.flatpickr-disabled {
+        &:before {
+          opacity: 1;
+        }
+      }
+      &.inRange:not(.startRange) {
+        &:before,
+        &:after {
+          border-left: 0;
+          border-right: 0;
+        }
+        &:hover {
+          &:before {
+            border-radius: 3.6rem;
+            background: var(--flatpickr-selected-bg);
+          }
+          &:after {
+            opacity: 1;
+            width: 100%;
+            border-top: 1px solid var(--flatpickr-range-border);
+            border-bottom: 1px solid var(--flatpickr-range-border);
+            background: var(--flatpickr-range-bg);
+          }
+        }
+      }
+      &.inRange:not(.endRange) {
+        &:before,
+        &:after {
+          border-left: 0;
+          border-right: 0;
+        }
+        &:hover {
+          &:before {
+            border-radius: 3.6rem;
+            background: var(--flatpickr-selected-bg);
+          }
+          &:after {
+            opacity: 1;
+            width: 100%;
+            border-top: 1px solid var(--flatpickr-range-border);
+            border-bottom: 1px solid var(--flatpickr-range-border);
+            background: var(--flatpickr-range-bg);
+          }
+        }
+      }
+    }
+  }
+}
+.flatpickr-day.selected,
+.flatpickr-day.startRange,
+.flatpickr-day.endRange,
+.flatpickr-day.selected.inRange,
+.flatpickr-day.startRange.inRange,
+.flatpickr-day.endRange.inRange,
+.flatpickr-day.selected:focus,
+.flatpickr-day.startRange:focus,
+.flatpickr-day.endRange:focus,
+.flatpickr-day.selected:hover,
+.flatpickr-day.startRange:hover,
+.flatpickr-day.endRange:hover,
+.flatpickr-day.selected.prevMonthDay,
+.flatpickr-day.startRange.prevMonthDay,
+.flatpickr-day.endRange.prevMonthDay,
+.flatpickr-day.selected.nextMonthDay,
+.flatpickr-day.startRange.nextMonthDay,
+.flatpickr-day.endRange.nextMonthDay {
+  background: transparent;
+  border-color: transparent;
+  border-radius: 0;
+  box-shadow: none;
+  &:before {
+    background: var(--flatpickr-selected-bg);
+    border-color: var(--flatpickr-selected-bg);
+  }
+}
+.flatpickr-day.inRange,
+.flatpickr-day.prevMonthDay.inRange,
+.flatpickr-day.nextMonthDay.inRange,
+.flatpickr-day.today.inRange,
+.flatpickr-day.prevMonthDay.today.inRange,
+.flatpickr-day.nextMonthDay.today.inRange,
+.flatpickr-day:hover,
+.flatpickr-day.prevMonthDay:hover,
+.flatpickr-day.nextMonthDay:hover,
+.flatpickr-day:focus,
+.flatpickr-day.prevMonthDay:focus,
+.flatpickr-day.nextMonthDay:focus {
+  background: transparent;
+  border-radius: 0;
+  border: 0;
+  box-shadow: none;
+  &:after {
+    border-top: 1px solid var(--flatpickr-range-border);
+    border-bottom: 1px solid var(--flatpickr-range-border);
+    background: var(--flatpickr-range-bg);
+  }
+}
+.flatpickr-day.selected {
+  font-weight: 800;
+}
+.flatpickr-day.prevMonthDay,
+.flatpickr-day.nextMonthDay {
+  &.today {
+    &:before {
+      opacity: 1;
+      border-color: var(--flatpickr-selected-border);
+    }
+  }
+  &.notAllowed,
+  &.flatpickr-disabled {
+    &:hover {
+      &:before,
+      &:after {
+        opacity: 0;
+      }
+    }
+  }
+  &:not(.notAllowed, .flatpickr-disabled) {
+    &.startRange,
+    &.endRange {
+      &:before,
+      &:after {
+        opacity: 1;
+      }
+      &:hover {
+        &:after {
+          opacity: 1;
+        }
+      }
+      &.today {
+        font-weight: 800;
+        &:after {
+          border-color: var(--flatpickr-selected-border);
+          background: var(--flatpickr-range-bg);
+        }
+        &:hover {
+          &:after {
+            border-color: var(--flatpickr-selected-border);
+            background: var(--flatpickr-range-bg);
+          }
+        }
+      }
+    }
+    &:hover {
+      color: #fff;
+      &:before {
+        opacity: 1;
+        border-color: var(--flatpickr-selected-border);
+        background: var(--flatpickr-selected-bg);
+      }
+      &:after {
+        opacity: 0;
+      }
+    }
+  }
+  &.inRange {
+    color: var(--flatpickr-day-text-color);
+    &:after {
+      opacity: 1;
+    }
+  }
+}
+.rangeMode .flatpickr-day {
+  margin: 0;
+  border: 0;
+}
+.flatpickr-day.inRange {
+  box-shadow: none;
+  &:before {
+    border-radius: 0;
+  }
+}
+.flatpickr-day.selected.startRange,
+.flatpickr-day.startRange.startRange,
+.flatpickr-day.endRange.startRange {
+  border-radius: 0;
+  &:after {
+    width: 50%;
+    left: auto;
+    right: 0;
+    transform: translateY(-50%);
+    border-top: 1px solid var(--flatpickr-range-border);
+    border-bottom: 1px solid var(--flatpickr-range-border);
+    background: var(--flatpickr-range-bg);
+    opacity: 1;
+  }
+}
+.flatpickr-day.selected.endRange,
+.flatpickr-day.startRange.endRange,
+.flatpickr-day.endRange.endRange {
+  border-radius: 0;
+  &:after {
+    width: 50%;
+    left: 0;
+    transform: translateY(-50%);
+    border-top: 1px solid var(--flatpickr-range-border);
+    border-bottom: 1px solid var(--flatpickr-range-border);
+    background: var(--flatpickr-range-bg);
+    opacity: 1;
+  }
+}
+.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: none;
+}
+.flatpickr-day.selected.startRange.endRange {
+  &:after {
+    display: none;
+  }
+}
+.flatpickr-calendar.hasTime .flatpickr-time {
+  height: 4rem;
+  border-color: var(--color_20);
+}
+.flatpickr-calendar.noCalendar.hasTime .flatpickr-time {
+  height: 4rem;
+  border-color: var(--color_20);
+}
+.flatpickr-time {
+  height: 4rem;
+  border: 1px solid var(--color_20);
+  &,
+  &.time24hr {
+    .numInputWrapper {
+      width: 11rem;
+      height: 3.8rem;
+      padding-right: 1.9rem;
+      background: var(--color_0);
+      span {
+        display: block;
+        width: 1.9rem;
+        padding: 0;
+        border: 0;
+        border-left: 1px solid var(--color_20);
+        border-right: 1px solid var(--color_20);
+        background: var(--color_0);
+        transition: background-color 0.12s;
+        &:before,
+        &:after {
+          display: none;
+          background-color: transparent;
+        }
+        &:hover {
+          background-color: var(--flatpickr-range-bg);
+        }
+      }
+      .arrowUp {
+        padding-top: 1px;
+        border-bottom: 1px solid var(--color_20);
+        &:before {
+          content: "증가";
+          display: block;
+          font-size: 0;
+          width: 100%;
+          height: 100%;
+          background: url("/img/buttons/calendar/time_up.svg") no-repeat center
+            center;
+        }
+        &:hover:before {
+          background: url("/img/buttons/calendar/time_up_focus.svg") no-repeat
+            center;
+        }
+      }
+      .arrowDown {
+        &:before {
+          content: "감소";
+          display: block;
+          font-size: 0;
+          width: 100%;
+          height: 100%;
+          background: url("/img/buttons/calendar/time_down.svg") no-repeat
+            center center;
+        }
+        &:hover:before {
+          background: url("/img/buttons/calendar/time_down_focus.svg") no-repeat
+            center;
+        }
+      }
+    }
+    .flatpickr-time-separator {
+      float: none;
+      width: 0.6rem;
+      height: 100%;
+      align-self: auto;
+      font-size: 1.4rem;
+      font-weight: 500;
+      color: var(--color_80);
+      line-height: 1em;
+      display: flex;
+      align-items: center;
+      justify-content: center;
+    }
+  }
+  input.numInput {
+    font-size: 1.4rem;
+    font-weight: 500;
+    color: var(--color_80);
+    line-height: 1em;
+    background: transparent;
+    &:hover,
+    &:focus {
+      background: var(--flatpickr-time);
+      & ~ span {
+        opacity: 1;
+      }
+    }
+  }
+  .flatpickr-am-pm {
+    float: none;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    align-self: auto;
+    width: 5.2rem;
+    height: 100%;
+    font-size: 1.4rem;
+    color: var(--color_80);
+    line-height: 1em;
+    &:hover {
+      background: var(--flatpickr-time);
+    }
+  }
+}
+
+.fp-custom-button-container {
+  padding-top: 1rem;
+  display: flex;
+  align-items: center;
+  button {
+    background: var(--flatpickr-button-bg) !important;
+  }
+}
+
+.flatpickr-calendar.arrowTop {
+  &:before {
+    border-bottom-color: var(--color_20);
+  }
+  &:after {
+    border-bottom-color: var(--color_0);
+  }
+}
+
+.flatpickr-day {
+  font-size: 1.4rem;
+  color: var(--color_90);
+}
+
+span.flatpickr-weekday {
+  color: var(--color_50);
+  font-size: 1.2rem;
+}
+
+[lang="en"] {
+  .flatpickr-calendar {
+    .flatpickr-months {
+      .flatpickr-current-month {
+        flex-direction: row;
+      }
+      .cur-month {
+        margin: 0 0.5ch 0 0;
+      }
+      .numInputWrapper {
+        &:after {
+          content: "";
+        }
+      }
+    }
+  }
+}