@keenmate/web-daterangepicker 1.0.0-rc03 → 1.0.0

package/src/scss/_calendar-grid.scss

@@ -55,8 +55,8 @@
   color: var(--drp-text-primary);
   border-radius: var(--drp-border-radius);
   cursor: pointer;
-  transition: all var(--drp-transition-fast) var(--drp-easing-snappy);
-  border: $drp-day-border-width solid $drp-day-border-color;
+  // Scale border width with cell-scale
+  border: calc(#{$drp-day-border-width} * var(--drp-cell-scale)) solid $drp-day-border-color;
   position: relative; // For absolute positioning of labels
 
   &:hover:not(.drp-date-picker__day--disabled):not(.drp-date-picker__day--other-month) {
@@ -89,8 +89,9 @@
   // Focused (keyboard navigation)
   // --------------------------------------
   &--focused {
-    outline: $drp-day-focused-outline-width solid var(--drp-accent-color);
-    outline-offset: $drp-day-focused-outline-offset;
+    // Scale outline with cell-scale
+    outline: calc(#{$drp-day-focused-outline-width} * var(--drp-cell-scale)) solid var(--drp-accent-color);
+    outline-offset: calc(#{$drp-day-focused-outline-offset} * var(--drp-cell-scale));
   }
 
   // --------------------------------------
@@ -179,7 +180,8 @@
 
   &--drag-preview {
     background-color: color-mix(in srgb, var(--drp-accent-color) $drp-day-drag-preview-bg-opacity * 100%, transparent);
-    border: $drp-day-border-width $drp-day-drag-preview-border-style var(--drp-accent-color);
+    // Scale border width with cell-scale
+    border: calc(#{$drp-day-border-width} * var(--drp-cell-scale)) $drp-day-drag-preview-border-style var(--drp-accent-color);
 
     &.drp-date-picker__day--range-start,
     &.drp-date-picker__day--range-end {
@@ -217,3 +219,21 @@
     background-color: color-mix(in srgb, $drp-color-success $drp-event-hover-bg-opacity * 100%, transparent);
   }
 }
+
+// ==============================================================================
+// ROLLING SELECTOR - DISABLED ITEMS
+// ==============================================================================
+// Styling for disabled years/months in the rolling selector
+// (e.g., when outside rollingYearRange/rollingMonthRange or minDate/maxDate)
+
+.drp-date-picker__rolling-item--disabled {
+  color: var(--drp-text-secondary);
+  opacity: 0.4;
+  cursor: not-allowed;
+  pointer-events: none; // Prevent clicking
+  text-decoration: line-through;
+
+  &:hover {
+    background-color: transparent;
+  }
+}

package/src/scss/_header-navigation.scss

@@ -30,7 +30,6 @@
   padding: var(--drp-spacing-sm) var(--drp-spacing-md);
   border-radius: var(--drp-border-radius);
   cursor: pointer;
-  transition: background-color var(--drp-transition-fast) var(--drp-easing-snappy);
 
   &:hover {
     background-color: var(--drp-primary-bg);
@@ -46,8 +45,9 @@
 // ==============================================================================
 
 .drp-date-picker__nav {
-  width: $drp-nav-size;
-  height: $drp-nav-size;
+  // Scale nav button size with cell-scale
+  width: calc(#{$drp-nav-size} * var(--drp-cell-scale));
+  height: calc(#{$drp-nav-size} * var(--drp-cell-scale));
   display: flex;
   align-items: center;
   justify-content: center;
@@ -55,7 +55,6 @@
   border-radius: var(--drp-border-radius);
   background: transparent;
   cursor: pointer;
-  transition: all var(--drp-transition-fast) var(--drp-easing-snappy);
   font-size: var(--drp-font-size-lg);
   color: var(--drp-text-primary);
 
@@ -95,30 +94,37 @@
 // ==============================================================================
 
 .drp-date-picker__rolling-selector {
+  // Absolutely positioned to overlay calendar grid
+  position: absolute;
+  inset: 0; // Fill entire container from all edges
   display: none;
+  z-index: 10; // Above calendar grid
 
   &.drp-date-picker__rolling-selector--visible {
     display: flex;
 
-    // Hide calendar days when rolling selector is visible
+    // Hide calendar grid when rolling selector is visible
     ~ .drp-date-picker__weekdays,
     ~ .drp-date-picker__days {
-      display: none;
+      visibility: hidden; // Keeps elements in layout flow (maintains container height)
     }
   }
 
-  gap: var(--drp-spacing-md);
-  margin-bottom: var(--drp-spacing-md);
-  // Height is set dynamically via JavaScript to match calendar content
+  gap: var(--drp-spacing-xs);
 }
 
 .drp-date-picker__rolling-list {
   flex: 1;
-  height: 100%; // Fill parent height (set dynamically on parent)
+  min-width: 0; // Allow flex child to shrink below content size (enables ellipsis on items)
+  height: 100%; // Fill parent height
   overflow-y: auto;
   border: var(--drp-border-width-base) solid var(--drp-border-color);
   border-radius: var(--drp-border-radius);
 
+  // Flex layout to control child item sizing
+  display: flex;
+  flex-direction: column;
+
   // Smooth scrolling
   scroll-behavior: smooth;
 
@@ -142,23 +148,40 @@
 }
 
 .drp-date-picker__rolling-item {
-  padding: var(--drp-spacing-sm) var(--drp-spacing-md);
-  text-align: center;
+  padding: #{$drp-rolling-item-padding-v} #{$drp-rolling-item-padding-h};
   cursor: pointer;
-  font-size: var(--drp-font-size-sm);
-  transition: background-color var(--drp-transition-fast) var(--drp-easing-snappy);
+  font-size: #{$drp-rolling-item-font-size};
+  // Scale item height with cell-scale for consistent sizing
+  min-height: calc(#{$drp-rolling-item-min-height} * var(--drp-cell-scale));
+  // Prevent flex item from growing beyond min-height
+  flex-shrink: 0;
+
+  // Flexbox for vertical and horizontal centering
+  display: flex;
+  align-items: center;
+  justify-content: var(--drp-rolling-item-justify-content, #{$drp-rolling-item-justify-content});
 
   &:hover {
-    background-color: var(--drp-primary-bg);
+    background-color: $drp-rolling-item-bg-hover;
   }
 
   &--selected {
-    background-color: var(--drp-accent-color);
-    color: var(--drp-accent-text-color);
-    font-weight: var(--drp-font-weight-semibold);
+    background-color: $drp-rolling-item-bg-selected;
+    color: $drp-rolling-item-color-selected;
+    font-weight: $drp-rolling-item-font-weight-selected;
 
     &:hover {
       background-color: var(--drp-accent-color-hover);
     }
   }
 }
+
+// Text wrapper for ellipsis support
+.drp-date-picker__rolling-item-text {
+  // Text overflow handling for long month names
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+  width: 100%;
+  min-width: 0; // Allow flex child to shrink below content size
+}