@keenmate/web-daterangepicker 1.7.0 → 1.8.1

package/src/scss/_base.scss

@@ -1,465 +0,0 @@
-// ==============================================================================
-// DATE RANGE PICKER - BASE STYLES
-// ==============================================================================
-// Base container styles, FOUC prevention, and root CSS custom properties
-
-@use 'variables' as *;
-
-// ==============================================================================
-// CSS CUSTOM PROPERTIES (CSS VARIABLES)
-// ==============================================================================
-// Define CSS custom properties with SCSS fallbacks for runtime customization.
-// Using :host for Shadow DOM (web component) and :root for Light DOM (direct class usage).
-//
-// CSS custom properties inherit through the Shadow DOM boundary, so external
-// :root definitions will cascade into the component. The :host/:root selector
-// here sets defaults that can be overridden.
-
-:host,
-:root {
-  // ===========================================================================
-  // BASE REM UNIT
-  // ===========================================================================
-  // Internal 10px-based unit for clean math. Override to scale the component.
-  // Default 10px produces same visual output as standard 16px rem.
-  // Set to 1rem in Pure Admin (10px base) to scale with document.
-  //
-  // IMPORTANT: For web components, set --drp-rem on the <web-daterangepicker>
-  // element itself or on :root. Setting on wrapper divs won't work due to
-  // shadow DOM encapsulation.
-  --drp-rem: 10px;
-
-  // ===========================================================================
-  // SPACING
-  // ===========================================================================
-
-  --drp-spacing-xs: #{$drp-spacing-xs};   // 4px
-  --drp-spacing-sm: #{$drp-spacing-sm};   // 8px
-  --drp-spacing-md: #{$drp-spacing-md};   // 16px
-  --drp-spacing-lg: #{$drp-spacing-lg};   // 24px
-  --drp-spacing-xl: #{$drp-spacing-xl};   // 32px
-
-  // ===========================================================================
-  // BASE TYPOGRAPHY (with theme-designer integration)
-  // ===========================================================================
-  // Priority chain: --drp-* → --base-* → calc default
-
-  // Font sizes (unitless multipliers from theme-designer, multiplied by --drp-rem)
-  // Theme-designer outputs: --base-font-size-sm: 1.4 (unitless)
-  // Component computes: calc(1.4 * 10px) = 14px
-  --drp-font-size-2xs: calc(var(--base-font-size-2xs, 1) * var(--drp-rem));     // 10px
-  --drp-font-size-xs: calc(var(--base-font-size-xs, 1.2) * var(--drp-rem));     // 12px
-  --drp-font-size-sm: calc(var(--base-font-size-sm, 1.4) * var(--drp-rem));     // 14px
-  --drp-font-size-base: calc(var(--base-font-size-base, 1.6) * var(--drp-rem)); // 16px
-  --drp-font-size-lg: calc(var(--base-font-size-lg, 1.8) * var(--drp-rem));     // 18px
-  --drp-font-size-xl: calc(var(--base-font-size-xl, 2) * var(--drp-rem));       // 20px
-  --drp-font-size-2xl: calc(var(--base-font-size-2xl, 2.4) * var(--drp-rem));   // 24px
-
-  // Font weights (reference theme-designer base variables)
-  --drp-font-weight-normal: var(--base-font-weight-normal, 400);
-  --drp-font-weight-medium: var(--base-font-weight-medium, 500);
-  --drp-font-weight-semibold: var(--base-font-weight-semibold, 600);
-
-  // Line heights (reference theme-designer base variables)
-  --drp-line-height-tight: var(--base-line-height-tight, 1.25);
-  --drp-line-height-normal: var(--base-line-height-normal, 1.5);
-  --drp-line-height-relaxed: var(--base-line-height-relaxed, 1.75);
-
-  // ===========================================================================
-  // COLORS (not affected by density)
-  // ===========================================================================
-
-  --drp-dropdown-background: #{$drp-calendar-bg};
-  --drp-border-color: #{$drp-border-color};
-  --drp-primary-bg: #{$drp-color-neutral-lighter};
-  --drp-primary-bg-hover: #{$drp-color-neutral-light};
-  --drp-accent-color: #{$drp-color-accent};
-  --drp-accent-color-hover: #{$drp-color-accent-dark};
-  --drp-text-primary: #{$drp-color-neutral-darkest};
-  --drp-text-secondary: #{$drp-color-neutral-dark};
-  --drp-text-on-accent: #{$drp-color-white};
-  --drp-button-text-color: #{$drp-color-white};
-  --drp-tooltip-background: #{$drp-tooltip-bg};
-  --drp-tooltip-text-color: #{$drp-tooltip-color};
-
-  // Loading overlay (for async operations)
-  --drp-loading-overlay-background: rgba(255, 255, 255, 0.8);
-  --drp-loading-spinner-color: var(--drp-border-color);
-  --drp-loading-spinner-accent: var(--drp-accent-color);
-
-  // ===========================================================================
-  // OTHER PROPERTIES (not affected by density)
-  // ===========================================================================
-
-  --drp-border-width-base: #{$drp-border-width-base};
-  --drp-border-radius: #{$drp-border-radius};
-  --drp-shadow-xl: #{$drp-shadow-xl};
-  --drp-transition-fast: #{$drp-transition-fast};
-  --drp-easing-snappy: #{$drp-easing-snappy};
-  --drp-input-padding-h: #{$drp-input-padding-h};
-  --drp-grid-columns: #{$drp-grid-columns};
-  --drp-grid-rows: #{$drp-grid-rows};
-
-  // ===========================================================================
-  // INPUT FIELD SEMANTIC VARIABLES
-  // ===========================================================================
-  // Semantic variables for input customization (loosely coupled)
-
-  // Input colors
-  --drp-input-background: var(--drp-dropdown-background);
-  --drp-input-color: var(--drp-text-primary);
-  --drp-input-border-color: var(--drp-border-color);
-  --drp-input-border-color-hover: var(--drp-accent-color);
-  --drp-input-border-color-focus: var(--drp-accent-color);
-  --drp-input-placeholder-color: var(--drp-text-secondary);
-  --drp-input-background-disabled: var(--drp-primary-bg);
-
-  // Input focus state
-  --drp-input-focus-shadow-color: rgba(59, 130, 246, 0.1);
-  --drp-input-focus-shadow-size: 3px;
-
-  // Input icon
-  --drp-input-icon-opacity: #{$drp-input-icon-opacity};
-
-  // ===========================================================================
-  // INPUT SIZE VARIANTS (BASE VALUES)
-  // ===========================================================================
-  // Five size variants for the input element (xs, sm, md, lg, xl)
-
-  --drp-input-size-xs-font: #{$font-size-xs};
-  --drp-input-size-xs-padding-v: #{$padding-xs};
-  --drp-input-size-xs-padding-h: calc(0.8 * var(--drp-rem)); // 8px (aligned with web-multiselect, was 4px)
-  --drp-input-size-xs-height: calc(3.1 * var(--drp-rem));   // 31px
-  --drp-input-size-xs-icon-size: 0.75em;
-
-  --drp-input-size-sm-font: calc(1.3 * var(--drp-rem));    // 13px (aligned with web-multiselect)
-  --drp-input-size-sm-padding-v: calc(0.5 * var(--drp-rem)); // 5px (aligned with web-multiselect)
-  --drp-input-size-sm-padding-h: #{$drp-spacing-sm};
-  --drp-input-size-sm-height: calc(3.3 * var(--drp-rem));   // 33px
-  --drp-input-size-sm-icon-size: 0.875em;
-
-  --drp-input-size-md-font: calc(1.4 * var(--drp-rem));     // 14px (aligned with web-multiselect, was 16px)
-  --drp-input-size-md-padding-v: #{$drp-spacing-sm};
-  --drp-input-size-md-padding-h: #{$padding-base};
-  --drp-input-size-md-height: calc(3.5 * var(--drp-rem));   // 35px
-  --drp-input-size-md-icon-size: 1em;
-
-  --drp-input-size-lg-font: calc(1.6 * var(--drp-rem));     // 16px (aligned with web-multiselect, was 18px)
-  --drp-input-size-lg-padding-v: calc(1.0 * var(--drp-rem)); // 10px (aligned with web-multiselect, was 16px)
-  --drp-input-size-lg-padding-h: calc(1.4 * var(--drp-rem)); // 14px (aligned with web-multiselect, was 16px)
-  --drp-input-size-lg-height: calc(3.8 * var(--drp-rem));   // 38px
-  --drp-input-size-lg-icon-size: 1.125em;
-
-  --drp-input-size-xl-font: calc(1.8 * var(--drp-rem));     // 18px (aligned with web-multiselect, was 20px)
-  --drp-input-size-xl-padding-v: calc(1.2 * var(--drp-rem)); // 12px (aligned with web-multiselect, was 16px)
-  --drp-input-size-xl-padding-h: calc(1.6 * var(--drp-rem)); // 16px (aligned with web-multiselect, was 24px)
-  --drp-input-size-xl-height: calc(4.1 * var(--drp-rem));   // 41px
-  --drp-input-size-xl-icon-size: 1.25em;
-
-  // ===========================================================================
-  // HEADER & NAVIGATION SEMANTIC VARIABLES
-  // ===========================================================================
-
-  --drp-header-text-color: var(--drp-text-primary);
-  --drp-header-bg-hover: var(--drp-primary-bg);
-  --drp-header-bg-active: var(--drp-primary-bg-hover);
-
-  --drp-nav-text-color: var(--drp-text-primary);
-  --drp-nav-border-color: var(--drp-border-color);
-  --drp-nav-bg-hover: var(--drp-primary-bg);
-  --drp-nav-bg-active: var(--drp-primary-bg-hover);
-  --drp-nav-border-hover: var(--drp-accent-color);
-
-  --drp-rolling-bg: var(--drp-primary-bg);
-  --drp-rolling-border-color: var(--drp-border-color);
-  --drp-rolling-scrollbar-thumb: var(--drp-border-color);
-  --drp-rolling-scrollbar-thumb-hover: var(--drp-accent-color);
-  --drp-rolling-item-bg-hover: var(--drp-primary-bg);
-  --drp-rolling-item-bg-selected: var(--drp-accent-color);
-  --drp-rolling-item-color-selected: var(--drp-text-on-accent);
-  --drp-rolling-item-bg-selected-hover: var(--drp-accent-color-hover);
-
-  // ===========================================================================
-  // CALENDAR GRID & DAY CELLS SEMANTIC VARIABLES
-  // ===========================================================================
-
-  --drp-weekday-color: var(--drp-text-secondary);
-
-  --drp-day-text-color: var(--drp-text-primary);
-  --drp-day-bg-hover: var(--drp-primary-bg);
-  --drp-day-border-hover: var(--drp-accent-color);
-  --drp-day-today-border: var(--drp-accent-color);
-  --drp-day-selected-bg: var(--drp-accent-color);
-  --drp-day-selected-color: var(--drp-text-on-accent);
-  --drp-day-selected-bg-hover: var(--drp-accent-color-hover);
-  --drp-day-focused-outline: var(--drp-accent-color);
-  --drp-day-disabled-color: var(--drp-text-secondary);
-  --drp-day-other-month-color: var(--drp-text-secondary);
-  --drp-day-range-bg: var(--drp-accent-color);
-  --drp-day-range-color: var(--drp-text-on-accent);
-
-  // ===========================================================================
-  // SUMMARY & ACTIONS SEMANTIC VARIABLES
-  // ===========================================================================
-
-  --drp-summary-text-color: var(--drp-text-secondary);
-  --drp-summary-border-color: var(--drp-border-color);
-  --drp-summary-count-color: var(--drp-accent-color);
-
-  --drp-button-border-color: var(--drp-border-color);
-  --drp-button-bg-hover: var(--drp-primary-bg);
-  --drp-button-border-hover: var(--drp-accent-color);
-  --drp-button-today-color: var(--drp-accent-color);
-  --drp-button-clear-color: var(--drp-text-secondary);
-  --drp-button-cancel-color: var(--drp-text-secondary);
-  --drp-button-apply-bg: var(--drp-accent-color);
-  --drp-button-apply-color: var(--drp-button-text-color);
-  --drp-button-apply-border: var(--drp-accent-color);
-  --drp-button-apply-bg-hover: var(--drp-accent-color-hover);
-
-  // ===========================================================================
-  // BADGE SYSTEM SEMANTIC VARIABLES
-  // ===========================================================================
-
-  --drp-badge-number-bg: var(--drp-accent-color);
-  --drp-badge-number-color: var(--drp-text-on-accent);
-  --drp-badge-count-bg: #{$drp-color-error};
-  --drp-badge-count-color: #{$drp-color-white};
-  --drp-badge-text-bg: var(--drp-text-secondary);
-  --drp-badge-text-color: #{$drp-color-white};
-
-  // ===========================================================================
-  // UNIFIED NAV SEMANTIC VARIABLES
-  // ===========================================================================
-
-  --drp-unified-range-text-color: var(--drp-text-primary);
-  --drp-unified-range-bg-hover: var(--drp-primary-bg);
-  --drp-unified-range-bg-active: var(--drp-primary-bg-hover);
-  --drp-unified-month-color: var(--drp-text-secondary);
-  --drp-unified-rolling-disabled-color: var(--drp-text-secondary);
-}
-
-// ==============================================================================
-// DATE PICKER INPUT FIELD
-// ==============================================================================
-
-// Input element itself (actual <input> tag)
-.drp-input {
-  width: 100%;
-  font-family: var(--drp-font-family, var(--base-font-family, inherit));
-  font-size: var(--drp-input-size-md-font);
-  line-height: var(--drp-line-height-normal);
-  color: var(--drp-input-color);
-  background-color: var(--drp-input-background);
-  border: var(--drp-border-width-base) solid var(--drp-input-border-color);
-  border-radius: var(--drp-border-radius);
-  padding: var(--drp-input-size-md-padding-v) var(--drp-input-size-md-padding-h);
-  padding-right: calc(var(--drp-input-size-md-padding-h) * 2.5); // Extra space for calendar icon
-  height: var(--drp-input-size-md-height);
-  box-sizing: border-box;
-  transition: border-color var(--drp-transition-fast) var(--drp-easing-snappy),
-              box-shadow var(--drp-transition-fast) var(--drp-easing-snappy);
-
-  &::placeholder {
-    color: var(--drp-input-placeholder-color);
-    opacity: 0.6;
-  }
-
-  &:hover:not(:disabled) {
-    border-color: var(--drp-input-border-color-hover);
-  }
-
-  &:focus {
-    outline: none;
-    border-color: var(--drp-input-border-color-focus);
-    box-shadow: 0 0 0 var(--drp-input-focus-shadow-size) var(--drp-input-focus-shadow-color);
-  }
-
-  &:disabled {
-    opacity: #{$drp-opacity-disabled};
-    cursor: not-allowed;
-    background-color: var(--drp-input-background-disabled);
-  }
-
-  // Size variants
-  &.drp-input--xs {
-    font-size: var(--drp-input-size-xs-font);
-    padding: var(--drp-input-size-xs-padding-v) var(--drp-input-size-xs-padding-h);
-    padding-right: calc(var(--drp-input-size-xs-padding-h) * 2.5);
-    height: var(--drp-input-size-xs-height);
-  }
-
-  &.drp-input--sm {
-    font-size: var(--drp-input-size-sm-font);
-    padding: var(--drp-input-size-sm-padding-v) var(--drp-input-size-sm-padding-h);
-    padding-right: calc(var(--drp-input-size-sm-padding-h) * 2.5);
-    height: var(--drp-input-size-sm-height);
-  }
-
-  &.drp-input--lg {
-    font-size: var(--drp-input-size-lg-font);
-    padding: var(--drp-input-size-lg-padding-v) var(--drp-input-size-lg-padding-h);
-    padding-right: calc(var(--drp-input-size-lg-padding-h) * 2.5);
-    height: var(--drp-input-size-lg-height);
-  }
-
-  &.drp-input--xl {
-    font-size: var(--drp-input-size-xl-font);
-    padding: var(--drp-input-size-xl-padding-v) var(--drp-input-size-xl-padding-h);
-    padding-right: calc(var(--drp-input-size-xl-padding-h) * 2.5);
-    height: var(--drp-input-size-xl-height);
-  }
-}
-
-// Input wrapper container (for positioning calendar icon)
-.drp-date-picker-input {
-  position: relative;
-  cursor: pointer;
-  display: inline-block;
-  width: 100%;
-
-  // Calendar icon
-  &::after {
-    content: '📅';
-    position: absolute;
-    right: var(--drp-input-size-md-padding-h);
-    top: 50%;
-    transform: translateY(-50%);
-    pointer-events: none;
-    opacity: var(--drp-input-icon-opacity);
-    font-size: var(--drp-input-size-md-icon-size);
-  }
-
-  // Size variant icon positioning
-  &.drp-date-picker-input--xs::after {
-    right: var(--drp-input-size-xs-padding-h);
-    font-size: var(--drp-input-size-xs-icon-size);
-  }
-
-  &.drp-date-picker-input--sm::after {
-    right: var(--drp-input-size-sm-padding-h);
-    font-size: var(--drp-input-size-sm-icon-size);
-  }
-
-  &.drp-date-picker-input--lg::after {
-    right: var(--drp-input-size-lg-padding-h);
-    font-size: var(--drp-input-size-lg-icon-size);
-  }
-
-  &.drp-date-picker-input--xl::after {
-    right: var(--drp-input-size-xl-padding-h);
-    font-size: var(--drp-input-size-xl-icon-size);
-  }
-}
-
-// ==============================================================================
-// CALENDAR POPUP CONTAINER
-// ==============================================================================
-
-.drp-date-picker {
-  position: absolute;
-  z-index: $drp-z-index-dropdown;
-  font-family: var(--drp-font-family, var(--base-font-family, inherit));
-  background: var(--drp-dropdown-background);
-  border: var(--drp-border-width-base) solid var(--drp-border-color);
-  border-radius: var(--drp-border-radius);
-  box-shadow: var(--drp-shadow-xl);
-  padding: var(--drp-spacing-md);
-  min-width: $drp-month-min-width;
-  max-width: $drp-calendar-max-width;
-  box-sizing: border-box;
-  user-select: none;
-
-  // Badge row height
-  --drp-badge-row-height: #{$drp-badge-max-height};
-
-  // Hide by default
-  &:not(.drp-date-picker--visible) {
-    display: none;
-  }
-
-  // Inline mode modifier
-  &--inline {
-    position: relative !important;
-    display: block !important;
-    z-index: auto;
-    min-width: 0;
-    max-width: 100%;
-    width: fit-content;
-    box-sizing: border-box;
-  }
-}
-
-// ==============================================================================
-// MONTHS CONTAINER (MULTI-MONTH LAYOUT)
-// ==============================================================================
-
-.drp-date-picker__months {
-  display: flex;
-  gap: var(--drp-spacing-lg);
-
-  // Allow wrapping for inline mode on small screens
-  .drp-date-picker--inline & {
-    flex-wrap: wrap;
-  }
-
-  // Grid layout mode
-  &--grid {
-    display: grid;
-    grid-template-columns: repeat(var(--drp-grid-columns, 3), minmax(0, 1fr));
-    grid-template-rows: repeat(var(--drp-grid-rows, 2), auto);
-    gap: var(--drp-spacing-lg);
-    width: 100%;
-
-    // Responsive breakpoints
-    @media (max-width: 1200px) {
-      grid-template-columns: repeat(min(var(--drp-grid-columns, 3), 3), minmax(0, 1fr));
-    }
-
-    @media (max-width: 768px) {
-      grid-template-columns: repeat(min(var(--drp-grid-columns, 3), 2), minmax(0, 1fr));
-    }
-
-    @media (max-width: 480px) {
-      grid-template-columns: minmax(0, 1fr);
-    }
-  }
-}
-
-// ==============================================================================
-// INDIVIDUAL MONTH CONTAINER
-// ==============================================================================
-
-.drp-date-picker__month {
-  flex: 1;
-  min-width: $drp-month-min-width;
-
-  // Make month a flex column container so calendar-container can fill vertical space
-  display: flex;
-  flex-direction: column;
-
-  // Allow shrinking for inline mode
-  .drp-date-picker--inline & {
-    min-width: $drp-month-min-width-inline;
-  }
-
-  // Grid layout: remove min-width to allow proper grid sizing
-  .drp-date-picker__months--grid & {
-    min-width: 0;
-    width: 100%;
-  }
-}
-
-// Calendar container for swapping between calendar grid and rolling selector
-.drp-date-picker__calendar-container {
-  position: relative; // Establishes containing block for absolute positioning
-
-  // Fill available vertical space in month container
-  flex: 1;
-  display: flex;
-  flex-direction: column;
-  min-height: 0; // Allow flex item to shrink below content size if needed
-
-  // Calendar grid (weekdays + days) determines minimum size
-  // Rolling selector overlays absolutely and fills this expanded space
-}