@keenmate/web-daterangepicker 1.0.0-rc08 → 1.0.0

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (15) hide show
  1. package/README.md +28 -28
  2. package/dist/style.css +1 -1
  3. package/dist/web-daterangepicker.js +3785 -0
  4. package/dist/web-daterangepicker.umd.js +26 -0
  5. package/package.json +11 -10
  6. package/src/scss/_badges.scss +7 -5
  7. package/src/scss/_base.scss +85 -29
  8. package/src/scss/_calendar-grid.scss +7 -5
  9. package/src/scss/_header-navigation.scss +40 -17
  10. package/src/scss/_modifiers.scss +142 -244
  11. package/src/scss/_summary-actions.scss +13 -1
  12. package/src/scss/_tooltips.scss +3 -3
  13. package/src/scss/_variables.scss +13 -9
  14. package/dist/date-range-picker.js +0 -3222
  15. package/dist/date-range-picker.umd.js +0 -28
package/src/scss/_calendar-grid.scss CHANGED
@@ -55,8 +55,8 @@
55
55
  color: var(--drp-text-primary);
56
56
  border-radius: var(--drp-border-radius);
57
57
  cursor: pointer;
58
- transition: all var(--drp-transition-fast) var(--drp-easing-snappy);
59
- border: $drp-day-border-width solid $drp-day-border-color;
58
+ // Scale border width with cell-scale
59
+ border: calc(#{$drp-day-border-width} * var(--drp-cell-scale)) solid $drp-day-border-color;
60
60
  position: relative; // For absolute positioning of labels
61
61
 
62
62
  &:hover:not(.drp-date-picker__day--disabled):not(.drp-date-picker__day--other-month) {
@@ -89,8 +89,9 @@
89
89
  // Focused (keyboard navigation)
90
90
  // --------------------------------------
91
91
  &--focused {
92
- outline: $drp-day-focused-outline-width solid var(--drp-accent-color);
93
- outline-offset: $drp-day-focused-outline-offset;
92
+ // Scale outline with cell-scale
93
+ outline: calc(#{$drp-day-focused-outline-width} * var(--drp-cell-scale)) solid var(--drp-accent-color);
94
+ outline-offset: calc(#{$drp-day-focused-outline-offset} * var(--drp-cell-scale));
94
95
  }
95
96
 
96
97
  // --------------------------------------
@@ -179,7 +180,8 @@
179
180
 
180
181
  &--drag-preview {
181
182
  background-color: color-mix(in srgb, var(--drp-accent-color) $drp-day-drag-preview-bg-opacity * 100%, transparent);
182
- border: $drp-day-border-width $drp-day-drag-preview-border-style var(--drp-accent-color);
183
+ // Scale border width with cell-scale
184
+ border: calc(#{$drp-day-border-width} * var(--drp-cell-scale)) $drp-day-drag-preview-border-style var(--drp-accent-color);
183
185
 
184
186
  &.drp-date-picker__day--range-start,
185
187
  &.drp-date-picker__day--range-end {
package/src/scss/_header-navigation.scss CHANGED
@@ -30,7 +30,6 @@
30
30
  padding: var(--drp-spacing-sm) var(--drp-spacing-md);
31
31
  border-radius: var(--drp-border-radius);
32
32
  cursor: pointer;
33
- transition: background-color var(--drp-transition-fast) var(--drp-easing-snappy);
34
33
 
35
34
  &:hover {
36
35
  background-color: var(--drp-primary-bg);
@@ -46,8 +45,9 @@
46
45
  // ==============================================================================
47
46
 
48
47
  .drp-date-picker__nav {
49
- width: $drp-nav-size;
50
- height: $drp-nav-size;
48
+ // Scale nav button size with cell-scale
49
+ width: calc(#{$drp-nav-size} * var(--drp-cell-scale));
50
+ height: calc(#{$drp-nav-size} * var(--drp-cell-scale));
51
51
  display: flex;
52
52
  align-items: center;
53
53
  justify-content: center;
@@ -55,7 +55,6 @@
55
55
  border-radius: var(--drp-border-radius);
56
56
  background: transparent;
57
57
  cursor: pointer;
58
- transition: all var(--drp-transition-fast) var(--drp-easing-snappy);
59
58
  font-size: var(--drp-font-size-lg);
60
59
  color: var(--drp-text-primary);
61
60
 
@@ -95,30 +94,37 @@
95
94
  // ==============================================================================
96
95
 
97
96
  .drp-date-picker__rolling-selector {
97
+ // Absolutely positioned to overlay calendar grid
98
+ position: absolute;
99
+ inset: 0; // Fill entire container from all edges
98
100
  display: none;
101
+ z-index: 10; // Above calendar grid
99
102
 
100
103
  &.drp-date-picker__rolling-selector--visible {
101
104
  display: flex;
102
105
 
103
- // Hide calendar days when rolling selector is visible
106
+ // Hide calendar grid when rolling selector is visible
104
107
  ~ .drp-date-picker__weekdays,
105
108
  ~ .drp-date-picker__days {
106
- display: none;
109
+ visibility: hidden; // Keeps elements in layout flow (maintains container height)
107
110
  }
108
111
  }
109
112
 
110
113
  gap: var(--drp-spacing-xs);
111
- margin-bottom: var(--drp-spacing-md);
112
- // Height is set dynamically via JavaScript to match calendar content
113
114
  }
114
115
 
115
116
  .drp-date-picker__rolling-list {
116
117
  flex: 1;
117
- height: 100%; // Fill parent height (set dynamically on parent)
118
+ min-width: 0; // Allow flex child to shrink below content size (enables ellipsis on items)
119
+ height: 100%; // Fill parent height
118
120
  overflow-y: auto;
119
121
  border: var(--drp-border-width-base) solid var(--drp-border-color);
120
122
  border-radius: var(--drp-border-radius);
121
123
 
124
+ // Flex layout to control child item sizing
125
+ display: flex;
126
+ flex-direction: column;
127
+
122
128
  // Smooth scrolling
123
129
  scroll-behavior: smooth;
124
130
 
@@ -142,23 +148,40 @@
142
148
  }
143
149
 
144
150
  .drp-date-picker__rolling-item {
145
- padding: var(--drp-spacing-sm) var(--drp-spacing-md);
146
- text-align: center;
151
+ padding: #{$drp-rolling-item-padding-v} #{$drp-rolling-item-padding-h};
147
152
  cursor: pointer;
148
- font-size: var(--drp-font-size-sm);
149
- transition: background-color var(--drp-transition-fast) var(--drp-easing-snappy);
153
+ font-size: #{$drp-rolling-item-font-size};
154
+ // Scale item height with cell-scale for consistent sizing
155
+ min-height: calc(#{$drp-rolling-item-min-height} * var(--drp-cell-scale));
156
+ // Prevent flex item from growing beyond min-height
157
+ flex-shrink: 0;
158
+
159
+ // Flexbox for vertical and horizontal centering
160
+ display: flex;
161
+ align-items: center;
162
+ justify-content: var(--drp-rolling-item-justify-content, #{$drp-rolling-item-justify-content});
150
163
 
151
164
  &:hover {
152
- background-color: var(--drp-primary-bg);
165
+ background-color: $drp-rolling-item-bg-hover;
153
166
  }
154
167
 
155
168
  &--selected {
156
- background-color: var(--drp-accent-color);
157
- color: var(--drp-accent-text-color);
158
- font-weight: var(--drp-font-weight-semibold);
169
+ background-color: $drp-rolling-item-bg-selected;
170
+ color: $drp-rolling-item-color-selected;
171
+ font-weight: $drp-rolling-item-font-weight-selected;
159
172
 
160
173
  &:hover {
161
174
  background-color: var(--drp-accent-color-hover);
162
175
  }
163
176
  }
164
177
  }
178
+
179
+ // Text wrapper for ellipsis support
180
+ .drp-date-picker__rolling-item-text {
181
+ // Text overflow handling for long month names
182
+ overflow: hidden;
183
+ text-overflow: ellipsis;
184
+ white-space: nowrap;
185
+ width: 100%;
186
+ min-width: 0; // Allow flex child to shrink below content size
187
+ }
package/src/scss/_modifiers.scss CHANGED
@@ -1,358 +1,256 @@
1
1
  // ==============================================================================
2
2
  // DATE RANGE PICKER - MODIFIERS
3
3
  // ==============================================================================
4
- // Size variants, font scaling, spacing scaling, and responsive modifiers
4
+ // Three independent sizing systems for fine-grained control
5
5
 
6
6
  @use 'variables' as *;
7
7
 
8
8
  // ==============================================================================
9
- // FONT SIZE CLASSES
9
+ // FONT SCALE CLASSES
10
10
  // ==============================================================================
11
- // Control text sizing only, independent of spacing
12
- // Example: <div class="drp-font-lg"><date-range-picker ...></div>
13
-
14
- .drp-font-xs {
15
- --drp-font-size-2xs: #{$font-size-2xs * $drp-size-xs-multiplier};
16
- --drp-font-size-xs: #{$font-size-xs * $drp-size-xs-multiplier};
17
- --drp-font-size-sm: #{$font-size-sm * $drp-size-xs-multiplier};
18
- --drp-font-size-base: #{$font-size-base * $drp-size-xs-multiplier};
19
- --drp-font-size-lg: #{$font-size-lg * $drp-size-xs-multiplier};
20
- --drp-font-size-xl: #{$font-size-xl * $drp-size-xs-multiplier};
21
- --drp-font-size-2xl: #{$font-size-2xl * $drp-size-xs-multiplier};
11
+ // Controls text sizing only
12
+ // Example: font-size="lg" makes text 1.5× larger
13
+
14
+ .drp-date-picker.drp-font-xs {
15
+ --drp-font-scale: #{$drp-density-xs}; // 0.6× scale (60%)
22
16
  }
23
17
 
24
- .drp-font-sm {
25
- --drp-font-size-2xs: #{$font-size-2xs * $drp-size-sm-multiplier};
26
- --drp-font-size-xs: #{$font-size-xs * $drp-size-sm-multiplier};
27
- --drp-font-size-sm: #{$font-size-sm * $drp-size-sm-multiplier};
28
- --drp-font-size-base: #{$font-size-base * $drp-size-sm-multiplier};
29
- --drp-font-size-lg: #{$font-size-lg * $drp-size-sm-multiplier};
30
- --drp-font-size-xl: #{$font-size-xl * $drp-size-sm-multiplier};
31
- --drp-font-size-2xl: #{$font-size-2xl * $drp-size-sm-multiplier};
18
+ .drp-date-picker.drp-font-sm {
19
+ --drp-font-scale: #{$drp-density-sm}; // 0.8× scale (80%)
32
20
  }
33
21
 
34
- .drp-font-md {
35
- // Uses default :host values
22
+ .drp-date-picker.drp-font-md {
23
+ --drp-font-scale: #{$drp-density-md}; // 1.0× scale (100%, default)
36
24
  }
37
25
 
38
- .drp-font-lg {
39
- --drp-font-size-2xs: #{$font-size-2xs * $drp-size-lg-multiplier};
40
- --drp-font-size-xs: #{$font-size-xs * $drp-size-lg-multiplier};
41
- --drp-font-size-sm: #{$font-size-sm * $drp-size-lg-multiplier};
42
- --drp-font-size-base: #{$font-size-base * $drp-size-lg-multiplier};
43
- --drp-font-size-lg: #{$font-size-lg * $drp-size-lg-multiplier};
44
- --drp-font-size-xl: #{$font-size-xl * $drp-size-lg-multiplier};
45
- --drp-font-size-2xl: #{$font-size-2xl * $drp-size-lg-multiplier};
26
+ .drp-date-picker.drp-font-lg {
27
+ --drp-font-scale: #{$drp-density-lg}; // 1.5× scale (150%)
46
28
  }
47
29
 
48
- .drp-font-xl {
49
- --drp-font-size-2xs: #{$font-size-2xs * $drp-size-xl-multiplier};
50
- --drp-font-size-xs: #{$font-size-xs * $drp-size-xl-multiplier};
51
- --drp-font-size-sm: #{$font-size-sm * $drp-size-xl-multiplier};
52
- --drp-font-size-base: #{$font-size-base * $drp-size-xl-multiplier};
53
- --drp-font-size-lg: #{$font-size-lg * $drp-size-xl-multiplier};
54
- --drp-font-size-xl: #{$font-size-xl * $drp-size-xl-multiplier};
55
- --drp-font-size-2xl: #{$font-size-2xl * $drp-size-xl-multiplier};
30
+ .drp-date-picker.drp-font-xl {
31
+ --drp-font-scale: #{$drp-density-xl}; // 2.0× scale (200%)
56
32
  }
57
33
 
58
34
  // ==============================================================================
59
- // SPACING/DENSITY CLASSES
35
+ // SPACING SCALE CLASSES
60
36
  // ==============================================================================
61
- // Control gaps, padding, and calendar width only
62
- // Example: <div class="drp-spacing-sm"><date-range-picker ...></div>
63
-
64
- .drp-spacing-xs {
65
- --drp-spacing-xs: #{$drp-spacing-xs * $drp-size-xs-multiplier};
66
- --drp-spacing-sm: #{$drp-spacing-sm * $drp-size-xs-multiplier};
67
- --drp-spacing-md: #{$drp-spacing-md * $drp-size-xs-multiplier};
68
- --drp-spacing-lg: #{$drp-spacing-lg * $drp-size-xs-multiplier};
69
- --drp-spacing-xl: #{$drp-spacing-xl * $drp-size-xs-multiplier};
70
-
71
- .drp-date-picker__month {
72
- min-width: #{$drp-month-min-width * $drp-size-xs-multiplier};
73
- }
37
+ // Controls gaps, padding, margins only
38
+ // Example: spacing="xs" makes layout 0.6× more compact
39
+
40
+ .drp-date-picker.drp-spacing-xs {
41
+ --drp-spacing-scale: #{$drp-density-xs}; // 0.6× scale (60%)
74
42
  }
75
43
 
76
- .drp-spacing-sm {
77
- --drp-spacing-xs: #{$drp-spacing-xs * $drp-size-sm-multiplier};
78
- --drp-spacing-sm: #{$drp-spacing-sm * $drp-size-sm-multiplier};
79
- --drp-spacing-md: #{$drp-spacing-md * $drp-size-sm-multiplier};
80
- --drp-spacing-lg: #{$drp-spacing-lg * $drp-size-sm-multiplier};
81
- --drp-spacing-xl: #{$drp-spacing-xl * $drp-size-sm-multiplier};
44
+ .drp-date-picker.drp-spacing-sm {
45
+ --drp-spacing-scale: #{$drp-density-sm}; // 0.8× scale (80%)
46
+ }
82
47
 
83
- .drp-date-picker__month {
84
- min-width: #{$drp-month-min-width * $drp-size-sm-multiplier};
85
- }
48
+ .drp-date-picker.drp-spacing-md {
49
+ --drp-spacing-scale: #{$drp-density-md}; // 1.0× scale (100%, default)
86
50
  }
87
51
 
88
- .drp-spacing-md {
89
- // Uses default :host values
52
+ .drp-date-picker.drp-spacing-lg {
53
+ --drp-spacing-scale: #{$drp-density-lg}; // 1.5× scale (150%)
90
54
  }
91
55
 
92
- .drp-spacing-lg {
93
- --drp-spacing-xs: #{$drp-spacing-xs * $drp-size-lg-multiplier};
94
- --drp-spacing-sm: #{$drp-spacing-sm * $drp-size-lg-multiplier};
95
- --drp-spacing-md: #{$drp-spacing-md * $drp-size-lg-multiplier};
96
- --drp-spacing-lg: #{$drp-spacing-lg * $drp-size-lg-multiplier};
97
- --drp-spacing-xl: #{$drp-spacing-xl * $drp-size-lg-multiplier};
56
+ .drp-date-picker.drp-spacing-xl {
57
+ --drp-spacing-scale: #{$drp-density-xl}; // 2.0× scale (200%)
58
+ }
98
59
 
99
- .drp-date-picker__month {
100
- min-width: #{$drp-month-min-width * $drp-size-lg-multiplier};
101
- }
60
+ // ==============================================================================
61
+ // CELL SCALE CLASSES
62
+ // ==============================================================================
63
+ // Controls day cell dimensions and structural sizes only
64
+ // Example: cell-size="sm" makes cells 0.8× smaller
65
+
66
+ .drp-date-picker.drp-cell-xs {
67
+ --drp-cell-scale: #{$drp-density-xs}; // 0.6× scale (60%)
102
68
  }
103
69
 
104
- .drp-spacing-xl {
105
- --drp-spacing-xs: #{$drp-spacing-xs * $drp-size-xl-multiplier};
106
- --drp-spacing-sm: #{$drp-spacing-sm * $drp-size-xl-multiplier};
107
- --drp-spacing-md: #{$drp-spacing-md * $drp-size-xl-multiplier};
108
- --drp-spacing-lg: #{$drp-spacing-lg * $drp-size-xl-multiplier};
109
- --drp-spacing-xl: #{$drp-spacing-xl * $drp-size-xl-multiplier};
70
+ .drp-date-picker.drp-cell-sm {
71
+ --drp-cell-scale: #{$drp-density-sm}; // 0.8× scale (80%)
72
+ }
110
73
 
111
- .drp-date-picker__month {
112
- min-width: #{$drp-month-min-width * $drp-size-xl-multiplier};
113
- }
74
+ .drp-date-picker.drp-cell-md {
75
+ --drp-cell-scale: #{$drp-density-md}; // 1.0× scale (100%, default)
76
+ }
77
+
78
+ .drp-date-picker.drp-cell-lg {
79
+ --drp-cell-scale: #{$drp-density-lg}; // 1.5× scale (150%)
80
+ }
81
+
82
+ .drp-date-picker.drp-cell-xl {
83
+ --drp-cell-scale: #{$drp-density-xl}; // 2.0× scale (200%)
114
84
  }
115
85
 
116
86
  // ==============================================================================
117
87
  // RESPONSIVE SCALING
118
88
  // ==============================================================================
119
- // Scales font and spacing independently at breakpoints
120
- // Example: <div class="drp-font-lg drp-spacing-xl drp-responsive">
89
+ // Automatically reduces scale at smaller breakpoints for each sizing system
90
+ // Example: xl (2.0×) → lg (1.5×) @ 1200px → md (1.0×) @ 768px
121
91
 
122
92
  .drp-responsive {
123
- // Font XL: xl → lg @ 1200px → md @ 768px
93
+ // Font scale responsive adjustments
124
94
  &.drp-font-xl {
125
95
  @media (max-width: 1200px) {
126
- --drp-font-size-2xs: #{$font-size-2xs * $drp-size-lg-multiplier};
127
- --drp-font-size-xs: #{$font-size-xs * $drp-size-lg-multiplier};
128
- --drp-font-size-sm: #{$font-size-sm * $drp-size-lg-multiplier};
129
- --drp-font-size-base: #{$font-size-base * $drp-size-lg-multiplier};
130
- --drp-font-size-lg: #{$font-size-lg * $drp-size-lg-multiplier};
131
- --drp-font-size-xl: #{$font-size-xl * $drp-size-lg-multiplier};
132
- --drp-font-size-2xl: #{$font-size-2xl * $drp-size-lg-multiplier};
96
+ --drp-font-scale: #{$drp-density-lg};
133
97
  }
134
98
  @media (max-width: 768px) {
135
- --drp-font-size-2xs: #{$font-size-2xs};
136
- --drp-font-size-xs: #{$font-size-xs};
137
- --drp-font-size-sm: #{$font-size-sm};
138
- --drp-font-size-base: #{$font-size-base};
139
- --drp-font-size-lg: #{$font-size-lg};
140
- --drp-font-size-xl: #{$font-size-xl};
141
- --drp-font-size-2xl: #{$font-size-2xl};
99
+ --drp-font-scale: #{$drp-density-md};
142
100
  }
143
101
  }
144
102
 
145
- // Font LG: lg → md @ 1200px → sm @ 768px
146
103
  &.drp-font-lg {
147
104
  @media (max-width: 1200px) {
148
- --drp-font-size-2xs: #{$font-size-2xs};
149
- --drp-font-size-xs: #{$font-size-xs};
150
- --drp-font-size-sm: #{$font-size-sm};
151
- --drp-font-size-base: #{$font-size-base};
152
- --drp-font-size-lg: #{$font-size-lg};
153
- --drp-font-size-xl: #{$font-size-xl};
154
- --drp-font-size-2xl: #{$font-size-2xl};
105
+ --drp-font-scale: #{$drp-density-md};
155
106
  }
156
107
  @media (max-width: 768px) {
157
- --drp-font-size-2xs: #{$font-size-2xs * $drp-size-sm-multiplier};
158
- --drp-font-size-xs: #{$font-size-xs * $drp-size-sm-multiplier};
159
- --drp-font-size-sm: #{$font-size-sm * $drp-size-sm-multiplier};
160
- --drp-font-size-base: #{$font-size-base * $drp-size-sm-multiplier};
161
- --drp-font-size-lg: #{$font-size-lg * $drp-size-sm-multiplier};
162
- --drp-font-size-xl: #{$font-size-xl * $drp-size-sm-multiplier};
163
- --drp-font-size-2xl: #{$font-size-2xl * $drp-size-sm-multiplier};
108
+ --drp-font-scale: #{$drp-density-sm};
164
109
  }
165
110
  }
166
111
 
167
- // Font MD: md → sm @ 768px
168
112
  &.drp-font-md {
169
113
  @media (max-width: 768px) {
170
- --drp-font-size-2xs: #{$font-size-2xs * $drp-size-sm-multiplier};
171
- --drp-font-size-xs: #{$font-size-xs * $drp-size-sm-multiplier};
172
- --drp-font-size-sm: #{$font-size-sm * $drp-size-sm-multiplier};
173
- --drp-font-size-base: #{$font-size-base * $drp-size-sm-multiplier};
174
- --drp-font-size-lg: #{$font-size-lg * $drp-size-sm-multiplier};
175
- --drp-font-size-xl: #{$font-size-xl * $drp-size-sm-multiplier};
176
- --drp-font-size-2xl: #{$font-size-2xl * $drp-size-sm-multiplier};
114
+ --drp-font-scale: #{$drp-density-sm};
177
115
  }
178
116
  }
179
117
 
180
- // Font SM: sm → xs @ 768px
181
118
  &.drp-font-sm {
182
119
  @media (max-width: 768px) {
183
- --drp-font-size-2xs: #{$font-size-2xs * $drp-size-xs-multiplier};
184
- --drp-font-size-xs: #{$font-size-xs * $drp-size-xs-multiplier};
185
- --drp-font-size-sm: #{$font-size-sm * $drp-size-xs-multiplier};
186
- --drp-font-size-base: #{$font-size-base * $drp-size-xs-multiplier};
187
- --drp-font-size-lg: #{$font-size-lg * $drp-size-xs-multiplier};
188
- --drp-font-size-xl: #{$font-size-xl * $drp-size-xs-multiplier};
189
- --drp-font-size-2xl: #{$font-size-2xl * $drp-size-xs-multiplier};
120
+ --drp-font-scale: #{$drp-density-xs};
190
121
  }
191
122
  }
192
123
 
193
- // Spacing XL: xl → lg @ 1200px → md @ 768px
124
+ // Spacing scale responsive adjustments
194
125
  &.drp-spacing-xl {
195
126
  @media (max-width: 1200px) {
196
- --drp-spacing-xs: #{$drp-spacing-xs * $drp-size-lg-multiplier};
197
- --drp-spacing-sm: #{$drp-spacing-sm * $drp-size-lg-multiplier};
198
- --drp-spacing-md: #{$drp-spacing-md * $drp-size-lg-multiplier};
199
- --drp-spacing-lg: #{$drp-spacing-lg * $drp-size-lg-multiplier};
200
- --drp-spacing-xl: #{$drp-spacing-xl * $drp-size-lg-multiplier};
201
- .drp-date-picker__month {
202
- min-width: #{$drp-month-min-width * $drp-size-lg-multiplier};
203
- }
127
+ --drp-spacing-scale: #{$drp-density-lg};
204
128
  }
205
129
  @media (max-width: 768px) {
206
- --drp-spacing-xs: #{$drp-spacing-xs};
207
- --drp-spacing-sm: #{$drp-spacing-sm};
208
- --drp-spacing-md: #{$drp-spacing-md};
209
- --drp-spacing-lg: #{$drp-spacing-lg};
210
- --drp-spacing-xl: #{$drp-spacing-xl};
211
- .drp-date-picker__month {
212
- min-width: #{$drp-month-min-width};
213
- }
130
+ --drp-spacing-scale: #{$drp-density-md};
214
131
  }
215
132
  }
216
133
 
217
- // Spacing LG: lg → md @ 1200px → sm @ 768px
218
134
  &.drp-spacing-lg {
219
135
  @media (max-width: 1200px) {
220
- --drp-spacing-xs: #{$drp-spacing-xs};
221
- --drp-spacing-sm: #{$drp-spacing-sm};
222
- --drp-spacing-md: #{$drp-spacing-md};
223
- --drp-spacing-lg: #{$drp-spacing-lg};
224
- --drp-spacing-xl: #{$drp-spacing-xl};
225
- .drp-date-picker__month {
226
- min-width: #{$drp-month-min-width};
227
- }
136
+ --drp-spacing-scale: #{$drp-density-md};
228
137
  }
229
138
  @media (max-width: 768px) {
230
- --drp-spacing-xs: #{$drp-spacing-xs * $drp-size-sm-multiplier};
231
- --drp-spacing-sm: #{$drp-spacing-sm * $drp-size-sm-multiplier};
232
- --drp-spacing-md: #{$drp-spacing-md * $drp-size-sm-multiplier};
233
- --drp-spacing-lg: #{$drp-spacing-lg * $drp-size-sm-multiplier};
234
- --drp-spacing-xl: #{$drp-spacing-xl * $drp-size-sm-multiplier};
235
- .drp-date-picker__month {
236
- min-width: #{$drp-month-min-width * $drp-size-sm-multiplier};
237
- }
139
+ --drp-spacing-scale: #{$drp-density-sm};
238
140
  }
239
141
  }
240
142
 
241
- // Spacing MD: md → sm @ 768px
242
143
  &.drp-spacing-md {
243
144
  @media (max-width: 768px) {
244
- --drp-spacing-xs: #{$drp-spacing-xs * $drp-size-sm-multiplier};
245
- --drp-spacing-sm: #{$drp-spacing-sm * $drp-size-sm-multiplier};
246
- --drp-spacing-md: #{$drp-spacing-md * $drp-size-sm-multiplier};
247
- --drp-spacing-lg: #{$drp-spacing-lg * $drp-size-sm-multiplier};
248
- --drp-spacing-xl: #{$drp-spacing-xl * $drp-size-sm-multiplier};
249
- .drp-date-picker__month {
250
- min-width: #{$drp-month-min-width * $drp-size-sm-multiplier};
251
- }
145
+ --drp-spacing-scale: #{$drp-density-sm};
252
146
  }
253
147
  }
254
148
 
255
- // Spacing SM: sm → xs @ 768px
256
149
  &.drp-spacing-sm {
257
150
  @media (max-width: 768px) {
258
- --drp-spacing-xs: #{$drp-spacing-xs * $drp-size-xs-multiplier};
259
- --drp-spacing-sm: #{$drp-spacing-sm * $drp-size-xs-multiplier};
260
- --drp-spacing-md: #{$drp-spacing-md * $drp-size-xs-multiplier};
261
- --drp-spacing-lg: #{$drp-spacing-lg * $drp-size-xs-multiplier};
262
- --drp-spacing-xl: #{$drp-spacing-xl * $drp-size-xs-multiplier};
263
- .drp-date-picker__month {
264
- min-width: #{$drp-month-min-width * $drp-size-xs-multiplier};
265
- }
151
+ --drp-spacing-scale: #{$drp-density-xs};
266
152
  }
267
153
  }
268
- }
269
-
270
- // ==============================================================================
271
- // SIZE VARIANT MODIFIERS (LEGACY - FOR BACKWARD COMPATIBILITY)
272
- // ==============================================================================
273
- // These provide complete size presets with both font and spacing adjustments
274
154
 
275
- .drp-date-picker--xs {
276
- padding: var(--drp-spacing-sm);
277
- min-width: 240px;
278
-
279
- .drp-date-picker__month-year {
280
- font-size: var(--drp-font-size-xs);
281
- padding: var(--drp-spacing-xs) var(--drp-spacing-sm);
155
+ // Cell scale responsive adjustments
156
+ &.drp-cell-xl {
157
+ @media (max-width: 1200px) {
158
+ --drp-cell-scale: #{$drp-density-lg};
159
+ }
160
+ @media (max-width: 768px) {
161
+ --drp-cell-scale: #{$drp-density-md};
162
+ }
282
163
  }
283
164
 
284
- .drp-date-picker__nav {
285
- width: 1.5rem;
286
- height: 1.5rem;
287
- font-size: var(--drp-font-size-sm);
165
+ &.drp-cell-lg {
166
+ @media (max-width: 1200px) {
167
+ --drp-cell-scale: #{$drp-density-md};
168
+ }
169
+ @media (max-width: 768px) {
170
+ --drp-cell-scale: #{$drp-density-sm};
171
+ }
288
172
  }
289
173
 
290
- .drp-date-picker__weekday {
291
- font-size: var(--drp-font-size-2xs);
174
+ &.drp-cell-md {
175
+ @media (max-width: 768px) {
176
+ --drp-cell-scale: #{$drp-density-sm};
177
+ }
292
178
  }
293
179
 
294
- .drp-date-picker__day {
295
- font-size: var(--drp-font-size-xs);
180
+ &.drp-cell-sm {
181
+ @media (max-width: 768px) {
182
+ --drp-cell-scale: #{$drp-density-xs};
183
+ }
296
184
  }
297
185
  }
298
186
 
299
- .drp-date-picker--sm {
300
- padding: var(--drp-spacing-sm);
301
- min-width: 260px;
302
-
303
- .drp-date-picker__month-year {
304
- font-size: var(--drp-font-size-sm);
305
- padding: var(--drp-spacing-xs) var(--drp-spacing-sm);
306
- }
187
+ // ==============================================================================
188
+ // SIZE VARIANT MODIFIERS (LEGACY - DEPRECATED)
189
+ // ==============================================================================
190
+ // These are deprecated in favor of the three independent scale systems above
191
+ // Kept for backward compatibility only - will be removed in v3.0.0
192
+ // Migration: Use spacing="xs" font-size="xs" cell-size="xs" attributes instead
307
193
 
308
- .drp-date-picker__nav {
309
- width: 1.75rem;
310
- height: 1.75rem;
311
- font-size: var(--drp-font-size-base);
312
- }
194
+ .drp-date-picker--xs {
195
+ --drp-font-scale: #{$drp-density-xs};
196
+ --drp-spacing-scale: #{$drp-density-xs};
197
+ --drp-cell-scale: #{$drp-density-xs};
198
+ min-width: calc(280px * #{$drp-density-xs});
199
+ }
313
200
 
314
- .drp-date-picker__day {
315
- font-size: var(--drp-font-size-xs);
316
- }
201
+ .drp-date-picker--sm {
202
+ --drp-font-scale: #{$drp-density-sm};
203
+ --drp-spacing-scale: #{$drp-density-sm};
204
+ --drp-cell-scale: #{$drp-density-sm};
205
+ min-width: calc(280px * #{$drp-density-sm});
317
206
  }
318
207
 
319
208
  .drp-date-picker--lg {
320
- padding: var(--drp-spacing-lg);
321
- min-width: 320px;
209
+ --drp-font-scale: #{$drp-density-lg};
210
+ --drp-spacing-scale: #{$drp-density-lg};
211
+ --drp-cell-scale: #{$drp-density-lg};
212
+ min-width: calc(280px * #{$drp-density-lg});
213
+ }
322
214
 
323
- .drp-date-picker__month-year {
324
- font-size: var(--drp-font-size-lg);
325
- padding: var(--drp-spacing-md) var(--drp-spacing-lg);
215
+ .drp-date-picker--xl {
216
+ --drp-font-scale: #{$drp-density-xl};
217
+ --drp-spacing-scale: #{$drp-density-xl};
218
+ --drp-cell-scale: #{$drp-density-xl};
219
+ min-width: calc(280px * #{$drp-density-xl});
220
+ }
221
+
222
+ // ==============================================================================
223
+ // TRANSITIONS (OPT-IN FOR PERFORMANCE)
224
+ // ==============================================================================
225
+ // By default, no transitions for maximum performance
226
+ // Add enable-transitions attribute to enable smooth animations
227
+
228
+ .drp-date-picker.drp-transitions-enabled {
229
+ // Badges - scale animation on hover
230
+ .drp-date-picker__badge-cell {
231
+ transition: transform var(--drp-transition-fast) var(--drp-easing-snappy);
326
232
  }
327
233
 
234
+ // Nav buttons - background and border changes
328
235
  .drp-date-picker__nav {
329
- width: 2.5rem;
330
- height: 2.5rem;
331
- font-size: var(--drp-font-size-xl);
236
+ transition: background-color var(--drp-transition-fast) var(--drp-easing-snappy),
237
+ border-color var(--drp-transition-fast) var(--drp-easing-snappy);
332
238
  }
333
239
 
334
- .drp-date-picker__day {
335
- font-size: var(--drp-font-size-base);
240
+ // Action buttons - background and border changes
241
+ .drp-date-picker__action-btn {
242
+ transition: background-color var(--drp-transition-fast) var(--drp-easing-snappy),
243
+ border-color var(--drp-transition-fast) var(--drp-easing-snappy);
336
244
  }
337
- }
338
-
339
- .drp-date-picker--xl {
340
- padding: var(--drp-spacing-xl);
341
- min-width: 360px;
342
245
 
246
+ // Month/year selector - background change
343
247
  .drp-date-picker__month-year {
344
- font-size: var(--drp-font-size-xl);
345
- padding: var(--drp-spacing-lg) var(--drp-spacing-xl);
346
- }
347
-
348
- .drp-date-picker__nav {
349
- width: 3rem;
350
- height: 3rem;
351
- font-size: var(--drp-font-size-2xl);
248
+ transition: background-color var(--drp-transition-fast) var(--drp-easing-snappy);
352
249
  }
353
250
 
354
- .drp-date-picker__day {
355
- font-size: var(--drp-font-size-lg);
251
+ // Rolling selector items - background change
252
+ .drp-date-picker__rolling-item {
253
+ transition: background-color var(--drp-transition-fast) var(--drp-easing-snappy);
356
254
  }
357
255
  }
358
256