@dodlhuat/basix 1.2.4 → 1.2.6

package/css/calendar.scss

@@ -170,11 +170,14 @@
 // ------------------------------------------------------------------
 
 .cal__month-grid {
-  display: grid;
-  grid-template-columns: repeat(7, minmax(0, 1fr));
   border: 1px solid var(--cal-border);
   border-radius: var(--cal-radius);
   overflow: hidden;
+}
+
+.cal__month-head {
+  display: grid;
+  grid-template-columns: repeat(7, minmax(0, 1fr));
   gap: 1px;
   background: var(--cal-border);
 }
@@ -190,27 +193,30 @@
   text-transform: uppercase;
 }
 
+// Each week row is a 7-column subgrid with span bars overlaid
+.cal__week-row {
+  display: grid;
+  grid-template-columns: repeat(7, minmax(0, 1fr));
+  gap: 1px;
+  background: var(--cal-border);
+  position: relative;
+  border-top: 1px solid var(--cal-border);
+
+  // Push event pills below span bars
+  .cal__day-events {
+    margin-top: calc(var(--span-lanes, 0) * var(--cal-span-lane-height, 20px));
+  }
+}
+
 .cal__day {
   background: var(--cal-bg);
   padding: var(--cal-spacing-xs) var(--cal-spacing-sm);
   min-height: 88px;
-  cursor: pointer;
-  transition: background 0.15s ease;
+  cursor: default;
   position: relative;
 
-  &:hover {
-    background: var(--cal-bg-hover);
-  }
-
-  &:focus-visible {
-    outline: 2px solid var(--cal-accent);
-    outline-offset: -2px;
-    z-index: 1;
-  }
-
   &--empty {
     background: var(--cal-bg-alt);
-    cursor: default;
     pointer-events: none;
   }
 
@@ -231,18 +237,6 @@
     box-shadow: 0 0 0 3px color-mix(in srgb, var(--cal-accent) 20%, transparent);
   }
 
-  &.is-selected {
-    background: color-mix(in srgb, var(--cal-accent) 6%, var(--cal-bg));
-
-    .cal__day-num {
-      background: var(--cal-accent);
-      color: var(--cal-accent-text);
-      border-radius: 50%;
-      font-weight: 700;
-      box-shadow: 0 2px 8px color-mix(in srgb, var(--cal-accent) 35%, transparent);
-    }
-  }
-
   &.has-events::after {
     content: '';
     display: none;
@@ -326,6 +320,56 @@
   cursor: pointer;
 }
 
+// ------------------------------------------------------------------
+// Span bars — multi-day events in month and week all-day row
+// ------------------------------------------------------------------
+
+.cal__span-bar {
+  position: absolute;
+  height: 18px;
+  line-height: 18px;
+  font-size: 0.6875rem;
+  font-weight: 500;
+  padding: 0 6px;
+  border-radius: var(--cal-radius-sm);
+  background: var(--cal-bg-alt);
+  border-left: 2px solid var(--cal-accent-light);
+  color: var(--cal-text);
+  white-space: nowrap;
+  overflow: hidden;
+  text-overflow: ellipsis;
+  cursor: pointer;
+  z-index: 2;
+  transition: filter 0.12s ease, transform 0.1s ease;
+
+  // Position via CSS custom props set inline
+  left:  calc(var(--span-col)  * 100% / 7);
+  width: calc(var(--span-len)  * 100% / 7 - 4px);
+
+  &:hover  { filter: brightness(0.94); }
+  &:active { transform: scale(0.97); }
+  &:focus-visible {
+    outline: 2px solid var(--cal-accent);
+    outline-offset: 1px;
+  }
+
+  // Rounded end removed when event continues past week boundary
+  &--cont-before { border-left: none; border-radius: 0 var(--cal-radius-sm) var(--cal-radius-sm) 0; padding-left: 4px; }
+  &--cont-after  { border-radius: var(--cal-radius-sm) 0 0 var(--cal-radius-sm); }
+  &--cont-before#{&}--cont-after { border-radius: 0; }
+
+  // Color variants — match badge semantics
+  &.badge-success { border-left-color: var(--success); background: color-mix(in srgb, var(--success) 14%, var(--cal-bg)); }
+  &.badge-warning { border-left-color: var(--warning); background: color-mix(in srgb, var(--warning) 14%, var(--cal-bg)); }
+  &.badge-error   { border-left-color: var(--error);   background: color-mix(in srgb, var(--error)   14%, var(--cal-bg)); }
+  &.badge-info    { border-left-color: var(--accent-color); background: color-mix(in srgb, var(--accent-color) 14%, var(--cal-bg)); }
+}
+
+// Month view: bars sit just below the date number
+.cal__week-row > .cal__span-bar {
+  top: calc(36px + var(--span-lane) * var(--cal-span-lane-height, 20px));
+}
+
 .cal__event-time {
   font-weight: 600;
   margin-right: 3px;
@@ -375,7 +419,7 @@
   font-weight: 600;
   color: var(--cal-text-muted);
   border-left: 1px solid var(--cal-border);
-  cursor: pointer;
+  cursor: default;
   text-transform: uppercase;
   letter-spacing: 0.04em;
 
@@ -402,31 +446,21 @@
     box-shadow: 0 0 0 3px color-mix(in srgb, var(--cal-accent) 20%, transparent);
   }
 
-  &.is-selected span {
-    background: var(--cal-accent);
-    color: var(--cal-accent-text);
-  }
 }
 
 .cal__allday {
   display: grid;
-  grid-template-columns: var(--cal-time-col-width) repeat(7, minmax(0, 1fr));
+  grid-template-columns: var(--cal-time-col-width) 1fr;
   border-bottom: 1px solid var(--cal-border);
-  min-height: 32px;
   background: var(--cal-bg);
   overflow-y: auto;
   scrollbar-gutter: stable;
   scrollbar-width: thin;
   scrollbar-color: transparent transparent;
 
-  &::-webkit-scrollbar {
-    width: 5px;
-  }
-
+  &::-webkit-scrollbar { width: 5px; }
   &::-webkit-scrollbar-track,
-  &::-webkit-scrollbar-thumb {
-    background: transparent;
-  }
+  &::-webkit-scrollbar-thumb { background: transparent; }
 }
 
 .cal__allday-label {
@@ -439,12 +473,26 @@
   font-weight: 500;
 }
 
+// Span container for all-day events in week view
+.cal__allday-spans {
+  position: relative;
+  display: grid;
+  grid-template-columns: repeat(7, minmax(0, 1fr));
+  min-height: calc(max(var(--allday-lanes, 1), 1) * var(--cal-span-lane-height, 20px) + 6px);
+
+  // Week view span bars: no date-num offset, 2px top padding per lane
+  > .cal__span-bar {
+    top: calc(var(--span-lane) * var(--cal-span-lane-height, 20px) + 3px);
+  }
+}
+
 .cal__allday-col {
   border-left: 1px solid var(--cal-border);
-  padding: 3px;
-  display: flex;
-  flex-direction: column;
-  gap: 2px;
+  min-height: 100%;
+
+  &:first-child {
+    border-left: none;
+  }
 }
 
 .cal__week-body {
@@ -583,7 +631,7 @@
 // Now-line
 .cal__now-line {
   position: absolute;
-  left: 0;
+  left: var(--cal-time-col-width);
   right: 0;
   height: 2px;
   background: var(--error);
@@ -764,10 +812,19 @@
   .cal__month-grid {
     border: none;
     border-radius: 0;
+  }
+
+  .cal__month-head {
     gap: 0;
     background: transparent;
   }
 
+  .cal__week-row {
+    gap: 0;
+    background: transparent;
+    border-top: none;
+  }
+
   .cal__weekday {
     background: transparent;
     padding: var(--cal-spacing-sm) 0;
@@ -783,14 +840,6 @@
     justify-content: flex-start;
     background: transparent;
 
-    &:hover {
-      background: transparent;
-
-      .cal__day-num {
-        background: var(--cal-bg-hover);
-      }
-    }
-
     &--empty {
       background: transparent;
     }
@@ -801,10 +850,6 @@
       }
     }
 
-    &.is-selected {
-      background: transparent;
-    }
-
     &.has-events::after {
       display: block;
       position: static;
@@ -822,10 +867,16 @@
 
   .cal__day-events,
   .cal__event-pill,
-  .cal__event-more {
+  .cal__event-more,
+  .cal__span-bar {
     display: none;
   }
 
+  // Reset span-lane-based margin since bars are hidden
+  .cal__week-row .cal__day-events {
+    margin-top: 0;
+  }
+
   // Week view — compact
   .cal {
     --cal-time-col-width: 40px;
@@ -909,10 +960,10 @@
     animation: cal-cell-in 0.3s cubic-bezier(0.2, 0, 0, 1) both;
   }
 
-  // Stagger the first 5 rows (35 day cells) for a wave effect
-  @for $i from 1 through 49 {
-    .cal__month-grid .cal__day:nth-child(#{$i}) {
-      animation-delay: #{0.01s * $i};
+  // Stagger day cells across week rows
+  @for $i from 1 through 7 {
+    .cal__week-row:nth-child(#{$i}) .cal__day {
+      animation-delay: #{0.03s * ($i - 1) + 0.01s};
     }
   }