@weing-dev/ui-kit-primitive 0.0.0

package/src/components/WeeklyCalendar/WeeklyCalendar.module.scss

@@ -0,0 +1,225 @@
+@layer WeeklyCalendar {
+  .WeeklyCalendarRoot {
+    display: flex;
+    flex-direction: column;
+    height: 100%;
+    width: 100%;
+    padding: 8px;
+    border-radius: 8px;
+    user-select: none;
+  }
+
+  .CalendarHeader {
+    display: flex;
+    flex-direction: row;
+    // height: 84px;
+
+    .Empty {
+      height: 64px;
+    }
+  }
+
+  .CalendarHeaderContent {
+    flex: 1 auto;
+    display: flex;
+    flex-direction: column;
+
+    // 종일 할일 리스트 스타일
+    // .CalendarHeaderContentBottom {
+    //   height: 82px;
+    // }
+  }
+
+  .CalendarBody {
+    display: flex;
+    flex-direction: row;
+    flex: 1 auto;
+    overflow: hidden;
+  }
+
+  .StandardTime {
+    font-size: 11px;
+    align-self: stretch;
+    display: flex;
+    flex-direction: row;
+  }
+
+  .DateCellRow {
+    height: 84px;
+    display: flex;
+    flex-direction: row;
+    flex: 1 auto;
+    border-bottom: 1px solid #f4f6f8;
+
+    .DateCell {
+      display: flex;
+      flex-direction: column;
+      align-items: center;
+      flex: 1 auto;
+
+      &.today {
+        color: var(--Primary-Main, #00a76f);
+      }
+
+      .DayText {
+        line-height: 32px;
+        font-size: 11px;
+      }
+
+      .Date {
+        font-size: 26px;
+        line-height: 46px;
+      }
+    }
+  }
+
+  .TimelineWrapper {
+    position: relative;
+
+    min-width: 40px;
+    flex-shrink: 0;
+
+    padding-left: 8px;
+    border-right: 1px solid #f4f6f8;
+    overflow-y: hidden;
+
+    &.noLines {
+      border-right: none;
+    }
+  }
+
+  .Timeline {
+    position: relative;
+    padding-right: 8px;
+    text-align: right;
+    min-width: 40px;
+
+    .TimeText {
+      position: absolute;
+      bottom: 0;
+      left: 0;
+      font-size: 10px;
+    }
+
+    // &:first-of-type {
+    //   .TimeText {
+    //     font-size: 0px;
+    //   }
+    // }
+  }
+
+  .DateColumnRow {
+    display: flex;
+    flex-direction: row;
+    flex: 1 auto;
+    overflow-y: auto;
+
+    .DateColumnRowInner {
+      height: max-content;
+      display: flex;
+      flex-direction: row;
+      flex: 1 auto;
+    }
+
+    .DateColumn {
+      position: relative;
+      flex: 1;
+      display: flex;
+      // flex-direction: column;
+      // padding-right: 8px;
+      border-right: 1px solid #f4f6f8;
+      // overflow: hidden;
+
+      /* (1) 세로 방향 반복 그라디언트 */
+      background: repeating-linear-gradient(
+        to bottom,
+        /* 위→아래 방향 */ #ffffff 0,
+        /* 흰색 시작 */ #ffffff var(--bg-start-white, 47px),
+        /* 0~47px까지 흰색 */ #f4f6f8 var(--bg-start-white, 47px),
+        /* 49px 지점에서 얇은 선(#f4f6f8) */ #f4f6f8 var(--bg-line-white, 48px) /* 1px 라인 */
+      );
+
+      &.noLines {
+        border-right: none;
+      }
+
+      .DateColumnInner {
+        position: relative;
+        width: 95%;
+        flex: 1;
+
+        // overflow: hidden;
+      }
+    }
+
+    .TodayIndicator {
+      position: absolute;
+      bottom: 0;
+      left: 0;
+      // width: calc(100% - 8px);
+      width: 100%;
+      height: 2px;
+      background-color: #00a76f;
+      z-index: 9999;
+
+      &::before {
+        position: absolute;
+        // left: -5px;
+        left: 0;
+        top: 50%;
+        transform: translateY(-50%);
+        content: "";
+
+        border-radius: 50%;
+        background-color: #00a76f;
+        z-index: 10000;
+      }
+    }
+
+    .TimeCriteria {
+      height: max-content;
+
+      .TimeCriteriaCell {
+        height: 48px;
+      }
+    }
+  }
+
+  .EventItem {
+    padding: 4px;
+    font-size: 12px;
+    background-color: orange;
+    cursor: pointer;
+
+    &:hover {
+      background-color: #ff8c00;
+    }
+
+    &.dragging {
+      z-index: 10;
+    }
+  }
+
+  .DateColumn {
+    &.allowCreate {
+      cursor: cell;
+    }
+
+    &.dragging {
+      .EventItem {
+        pointer-events: none;
+      }
+    }
+  }
+
+  .EventItem {
+    &.draggable {
+      cursor: move;
+    }
+
+    &.dragging {
+      opacity: 0.5;
+      z-index: 10;
+    }
+  }
+}