@keenmate/web-daterangepicker 1.5.0 → 1.7.0-rc01
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.
- package/README.md +65 -3
- package/dist/style.css +1 -1
- package/dist/web-daterangepicker.js +1051 -1048
- package/dist/web-daterangepicker.umd.js +9 -9
- package/package.json +1 -1
- package/src/scss/_badges.scss +4 -8
- package/src/scss/_base.scss +67 -74
- package/src/scss/_calendar-grid.scss +4 -7
- package/src/scss/_header-navigation.scss +5 -8
- package/src/scss/_loading.scss +4 -4
- package/src/scss/_modifiers.scss +0 -215
- package/src/scss/_summary-actions.scss +1 -0
- package/src/scss/_tooltips.scss +3 -3
- package/src/scss/_variables.scss +0 -13
package/package.json
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@keenmate/web-daterangepicker",
|
|
3
|
-
"version": "1.
|
|
3
|
+
"version": "1.7.0-rc01",
|
|
4
4
|
"description": "Lightweight date picker web component with excellent keyboard navigation and range selection",
|
|
5
5
|
"type": "module",
|
|
6
6
|
"main": "./dist/web-daterangepicker.umd.js",
|
package/src/scss/_badges.scss
CHANGED
|
@@ -13,10 +13,8 @@
|
|
|
13
13
|
display: grid;
|
|
14
14
|
grid-template-columns: repeat(7, 1fr);
|
|
15
15
|
gap: var(--drp-spacing-xs);
|
|
16
|
-
|
|
17
|
-
|
|
18
|
-
max-height: calc(#{$drp-badge-max-height} * var(--drp-cell-scale));
|
|
19
|
-
min-height: calc(#{$drp-badge-max-height} * var(--drp-cell-scale));
|
|
16
|
+
max-height: var(--drp-badge-row-height);
|
|
17
|
+
min-height: var(--drp-badge-row-height);
|
|
20
18
|
}
|
|
21
19
|
|
|
22
20
|
.drp-date-picker__badge-cell {
|
|
@@ -24,13 +22,11 @@
|
|
|
24
22
|
align-items: center;
|
|
25
23
|
justify-content: center;
|
|
26
24
|
font-size: var(--drp-font-size-2xs);
|
|
27
|
-
|
|
28
|
-
padding: calc(#{$drp-badge-padding-v} * var(--drp-cell-scale)) calc(#{$drp-badge-padding-h} * var(--drp-cell-scale));
|
|
25
|
+
padding: $drp-badge-padding-v $drp-badge-padding-h;
|
|
29
26
|
border-radius: $drp-badge-border-radius;
|
|
30
27
|
cursor: pointer;
|
|
31
28
|
height: 100%;
|
|
32
|
-
|
|
33
|
-
max-height: calc(#{$drp-badge-max-height} * var(--drp-cell-scale));
|
|
29
|
+
max-height: var(--drp-badge-row-height);
|
|
34
30
|
|
|
35
31
|
&:empty {
|
|
36
32
|
visibility: hidden;
|
package/src/scss/_base.scss
CHANGED
|
@@ -23,58 +23,53 @@
|
|
|
23
23
|
// Internal 10px-based unit for clean math. Override to scale the component.
|
|
24
24
|
// Default 10px produces same visual output as standard 16px rem.
|
|
25
25
|
// Set to 1rem in Pure Admin (10px base) to scale with document.
|
|
26
|
+
//
|
|
27
|
+
// IMPORTANT: For web components, set --drp-rem on the <web-daterangepicker>
|
|
28
|
+
// element itself or on :root. Setting on wrapper divs won't work due to
|
|
29
|
+
// shadow DOM encapsulation.
|
|
26
30
|
--drp-rem: 10px;
|
|
27
31
|
|
|
28
32
|
// ===========================================================================
|
|
29
|
-
//
|
|
33
|
+
// SPACING
|
|
30
34
|
// ===========================================================================
|
|
31
|
-
// Three independent multipliers for fine-grained control:
|
|
32
|
-
// - font-scale: Controls text sizes only
|
|
33
|
-
// - spacing-scale: Controls gaps, padding, margins only
|
|
34
|
-
// - cell-scale: Controls day cell dimensions and structural sizes only
|
|
35
35
|
|
|
36
|
-
--drp-
|
|
37
|
-
--drp-spacing-
|
|
38
|
-
--drp-
|
|
36
|
+
--drp-spacing-xs: #{$drp-spacing-xs}; // 4px
|
|
37
|
+
--drp-spacing-sm: #{$drp-spacing-sm}; // 8px
|
|
38
|
+
--drp-spacing-md: #{$drp-spacing-md}; // 16px
|
|
39
|
+
--drp-spacing-lg: #{$drp-spacing-lg}; // 24px
|
|
40
|
+
--drp-spacing-xl: #{$drp-spacing-xl}; // 32px
|
|
39
41
|
|
|
40
42
|
// ===========================================================================
|
|
41
|
-
// BASE
|
|
43
|
+
// BASE TYPOGRAPHY (with theme-designer integration)
|
|
42
44
|
// ===========================================================================
|
|
43
|
-
|
|
44
|
-
|
|
45
|
-
|
|
46
|
-
--
|
|
47
|
-
|
|
48
|
-
--drp-
|
|
49
|
-
|
|
50
|
-
|
|
51
|
-
--drp-
|
|
52
|
-
--drp-
|
|
53
|
-
--drp-
|
|
54
|
-
--drp-
|
|
55
|
-
|
|
56
|
-
|
|
57
|
-
|
|
58
|
-
|
|
59
|
-
|
|
60
|
-
|
|
61
|
-
|
|
62
|
-
--drp-
|
|
63
|
-
--drp-
|
|
64
|
-
--drp-
|
|
65
|
-
--drp-font-size-lg-base: #{$drp-font-size-lg}; // Always 1.125rem
|
|
66
|
-
--drp-font-size-xl-base: #{$drp-font-size-xl}; // Always 1.25rem
|
|
67
|
-
--drp-font-size-2xl-base: #{$drp-font-size-2xl}; // Always 1.5rem
|
|
68
|
-
|
|
69
|
-
// Font weights (not affected by density)
|
|
70
|
-
--drp-font-weight-medium: #{$drp-font-weight-medium};
|
|
71
|
-
--drp-font-weight-semibold: #{$drp-font-weight-semibold};
|
|
45
|
+
// Priority chain: --drp-* → --base-* → calc default
|
|
46
|
+
|
|
47
|
+
// Font sizes (unitless multipliers from theme-designer, multiplied by --drp-rem)
|
|
48
|
+
// Theme-designer outputs: --base-font-size-sm: 1.4 (unitless)
|
|
49
|
+
// Component computes: calc(1.4 * 10px) = 14px
|
|
50
|
+
--drp-font-size-2xs: calc(var(--base-font-size-2xs, 1) * var(--drp-rem)); // 10px
|
|
51
|
+
--drp-font-size-xs: calc(var(--base-font-size-xs, 1.2) * var(--drp-rem)); // 12px
|
|
52
|
+
--drp-font-size-sm: calc(var(--base-font-size-sm, 1.4) * var(--drp-rem)); // 14px
|
|
53
|
+
--drp-font-size-base: calc(var(--base-font-size-base, 1.6) * var(--drp-rem)); // 16px
|
|
54
|
+
--drp-font-size-lg: calc(var(--base-font-size-lg, 1.8) * var(--drp-rem)); // 18px
|
|
55
|
+
--drp-font-size-xl: calc(var(--base-font-size-xl, 2) * var(--drp-rem)); // 20px
|
|
56
|
+
--drp-font-size-2xl: calc(var(--base-font-size-2xl, 2.4) * var(--drp-rem)); // 24px
|
|
57
|
+
|
|
58
|
+
// Font weights (reference theme-designer base variables)
|
|
59
|
+
--drp-font-weight-normal: var(--base-font-weight-normal, 400);
|
|
60
|
+
--drp-font-weight-medium: var(--base-font-weight-medium, 500);
|
|
61
|
+
--drp-font-weight-semibold: var(--base-font-weight-semibold, 600);
|
|
62
|
+
|
|
63
|
+
// Line heights (reference theme-designer base variables)
|
|
64
|
+
--drp-line-height-tight: var(--base-line-height-tight, 1.25);
|
|
65
|
+
--drp-line-height-normal: var(--base-line-height-normal, 1.5);
|
|
66
|
+
--drp-line-height-relaxed: var(--base-line-height-relaxed, 1.75);
|
|
72
67
|
|
|
73
68
|
// ===========================================================================
|
|
74
69
|
// COLORS (not affected by density)
|
|
75
70
|
// ===========================================================================
|
|
76
71
|
|
|
77
|
-
--drp-
|
|
72
|
+
--drp-dropdown-background: #{$drp-calendar-bg};
|
|
78
73
|
--drp-border-color: #{$drp-border-color};
|
|
79
74
|
--drp-primary-bg: #{$drp-color-neutral-lighter};
|
|
80
75
|
--drp-primary-bg-hover: #{$drp-color-neutral-light};
|
|
@@ -82,10 +77,15 @@
|
|
|
82
77
|
--drp-accent-color-hover: #{$drp-color-accent-dark};
|
|
83
78
|
--drp-text-primary: #{$drp-color-neutral-darkest};
|
|
84
79
|
--drp-text-secondary: #{$drp-color-neutral-dark};
|
|
85
|
-
--drp-
|
|
80
|
+
--drp-text-on-accent: #{$drp-color-white};
|
|
86
81
|
--drp-button-text-color: #{$drp-color-white};
|
|
87
|
-
--drp-tooltip-
|
|
88
|
-
--drp-tooltip-color: #{$drp-tooltip-color};
|
|
82
|
+
--drp-tooltip-background: #{$drp-tooltip-bg};
|
|
83
|
+
--drp-tooltip-text-color: #{$drp-tooltip-color};
|
|
84
|
+
|
|
85
|
+
// Loading overlay (for async operations)
|
|
86
|
+
--drp-loading-overlay-background: rgba(255, 255, 255, 0.8);
|
|
87
|
+
--drp-loading-spinner-color: var(--drp-border-color);
|
|
88
|
+
--drp-loading-spinner-accent: var(--drp-accent-color);
|
|
89
89
|
|
|
90
90
|
// ===========================================================================
|
|
91
91
|
// OTHER PROPERTIES (not affected by density)
|
|
@@ -106,13 +106,13 @@
|
|
|
106
106
|
// Semantic variables for input customization (loosely coupled)
|
|
107
107
|
|
|
108
108
|
// Input colors
|
|
109
|
-
--drp-input-background: var(--drp-
|
|
109
|
+
--drp-input-background: var(--drp-dropdown-background);
|
|
110
110
|
--drp-input-color: var(--drp-text-primary);
|
|
111
111
|
--drp-input-border-color: var(--drp-border-color);
|
|
112
112
|
--drp-input-border-color-hover: var(--drp-accent-color);
|
|
113
113
|
--drp-input-border-color-focus: var(--drp-accent-color);
|
|
114
114
|
--drp-input-placeholder-color: var(--drp-text-secondary);
|
|
115
|
-
--drp-input-disabled
|
|
115
|
+
--drp-input-background-disabled: var(--drp-primary-bg);
|
|
116
116
|
|
|
117
117
|
// Input focus state
|
|
118
118
|
--drp-input-focus-shadow-color: rgba(59, 130, 246, 0.1);
|
|
@@ -128,31 +128,31 @@
|
|
|
128
128
|
|
|
129
129
|
--drp-input-size-xs-font: #{$font-size-xs};
|
|
130
130
|
--drp-input-size-xs-padding-v: #{$padding-xs};
|
|
131
|
-
--drp-input-size-xs-padding-h:
|
|
131
|
+
--drp-input-size-xs-padding-h: calc(0.8 * var(--drp-rem)); // 8px (aligned with web-multiselect, was 4px)
|
|
132
132
|
--drp-input-size-xs-height: calc(3.1 * var(--drp-rem)); // 31px
|
|
133
133
|
--drp-input-size-xs-icon-size: 0.75em;
|
|
134
134
|
|
|
135
|
-
--drp-input-size-sm-font:
|
|
136
|
-
--drp-input-size-sm-padding-v:
|
|
135
|
+
--drp-input-size-sm-font: calc(1.3 * var(--drp-rem)); // 13px (aligned with web-multiselect)
|
|
136
|
+
--drp-input-size-sm-padding-v: calc(0.5 * var(--drp-rem)); // 5px (aligned with web-multiselect)
|
|
137
137
|
--drp-input-size-sm-padding-h: #{$drp-spacing-sm};
|
|
138
138
|
--drp-input-size-sm-height: calc(3.3 * var(--drp-rem)); // 33px
|
|
139
139
|
--drp-input-size-sm-icon-size: 0.875em;
|
|
140
140
|
|
|
141
|
-
--drp-input-size-md-font:
|
|
141
|
+
--drp-input-size-md-font: calc(1.4 * var(--drp-rem)); // 14px (aligned with web-multiselect, was 16px)
|
|
142
142
|
--drp-input-size-md-padding-v: #{$drp-spacing-sm};
|
|
143
143
|
--drp-input-size-md-padding-h: #{$padding-base};
|
|
144
144
|
--drp-input-size-md-height: calc(3.5 * var(--drp-rem)); // 35px
|
|
145
145
|
--drp-input-size-md-icon-size: 1em;
|
|
146
146
|
|
|
147
|
-
--drp-input-size-lg-font:
|
|
148
|
-
--drp-input-size-lg-padding-v:
|
|
149
|
-
--drp-input-size-lg-padding-h:
|
|
147
|
+
--drp-input-size-lg-font: calc(1.6 * var(--drp-rem)); // 16px (aligned with web-multiselect, was 18px)
|
|
148
|
+
--drp-input-size-lg-padding-v: calc(1.0 * var(--drp-rem)); // 10px (aligned with web-multiselect, was 16px)
|
|
149
|
+
--drp-input-size-lg-padding-h: calc(1.4 * var(--drp-rem)); // 14px (aligned with web-multiselect, was 16px)
|
|
150
150
|
--drp-input-size-lg-height: calc(3.8 * var(--drp-rem)); // 38px
|
|
151
151
|
--drp-input-size-lg-icon-size: 1.125em;
|
|
152
152
|
|
|
153
|
-
--drp-input-size-xl-font:
|
|
154
|
-
--drp-input-size-xl-padding-v:
|
|
155
|
-
--drp-input-size-xl-padding-h:
|
|
153
|
+
--drp-input-size-xl-font: calc(1.8 * var(--drp-rem)); // 18px (aligned with web-multiselect, was 20px)
|
|
154
|
+
--drp-input-size-xl-padding-v: calc(1.2 * var(--drp-rem)); // 12px (aligned with web-multiselect, was 16px)
|
|
155
|
+
--drp-input-size-xl-padding-h: calc(1.6 * var(--drp-rem)); // 16px (aligned with web-multiselect, was 24px)
|
|
156
156
|
--drp-input-size-xl-height: calc(4.1 * var(--drp-rem)); // 41px
|
|
157
157
|
--drp-input-size-xl-icon-size: 1.25em;
|
|
158
158
|
|
|
@@ -176,7 +176,7 @@
|
|
|
176
176
|
--drp-rolling-scrollbar-thumb-hover: var(--drp-accent-color);
|
|
177
177
|
--drp-rolling-item-bg-hover: var(--drp-primary-bg);
|
|
178
178
|
--drp-rolling-item-bg-selected: var(--drp-accent-color);
|
|
179
|
-
--drp-rolling-item-color-selected: var(--drp-
|
|
179
|
+
--drp-rolling-item-color-selected: var(--drp-text-on-accent);
|
|
180
180
|
--drp-rolling-item-bg-selected-hover: var(--drp-accent-color-hover);
|
|
181
181
|
|
|
182
182
|
// ===========================================================================
|
|
@@ -190,13 +190,13 @@
|
|
|
190
190
|
--drp-day-border-hover: var(--drp-accent-color);
|
|
191
191
|
--drp-day-today-border: var(--drp-accent-color);
|
|
192
192
|
--drp-day-selected-bg: var(--drp-accent-color);
|
|
193
|
-
--drp-day-selected-color: var(--drp-
|
|
193
|
+
--drp-day-selected-color: var(--drp-text-on-accent);
|
|
194
194
|
--drp-day-selected-bg-hover: var(--drp-accent-color-hover);
|
|
195
195
|
--drp-day-focused-outline: var(--drp-accent-color);
|
|
196
196
|
--drp-day-disabled-color: var(--drp-text-secondary);
|
|
197
197
|
--drp-day-other-month-color: var(--drp-text-secondary);
|
|
198
198
|
--drp-day-range-bg: var(--drp-accent-color);
|
|
199
|
-
--drp-day-range-color: var(--drp-
|
|
199
|
+
--drp-day-range-color: var(--drp-text-on-accent);
|
|
200
200
|
|
|
201
201
|
// ===========================================================================
|
|
202
202
|
// SUMMARY & ACTIONS SEMANTIC VARIABLES
|
|
@@ -222,7 +222,7 @@
|
|
|
222
222
|
// ===========================================================================
|
|
223
223
|
|
|
224
224
|
--drp-badge-number-bg: var(--drp-accent-color);
|
|
225
|
-
--drp-badge-number-color: var(--drp-
|
|
225
|
+
--drp-badge-number-color: var(--drp-text-on-accent);
|
|
226
226
|
--drp-badge-count-bg: #{$drp-color-error};
|
|
227
227
|
--drp-badge-count-color: #{$drp-color-white};
|
|
228
228
|
--drp-badge-text-bg: var(--drp-text-secondary);
|
|
@@ -246,9 +246,9 @@
|
|
|
246
246
|
// Input element itself (actual <input> tag)
|
|
247
247
|
.drp-input {
|
|
248
248
|
width: 100%;
|
|
249
|
-
font-family: inherit;
|
|
249
|
+
font-family: var(--drp-font-family, var(--base-font-family, inherit));
|
|
250
250
|
font-size: var(--drp-input-size-md-font);
|
|
251
|
-
line-height:
|
|
251
|
+
line-height: var(--drp-line-height-normal);
|
|
252
252
|
color: var(--drp-input-color);
|
|
253
253
|
background-color: var(--drp-input-background);
|
|
254
254
|
border: var(--drp-border-width-base) solid var(--drp-input-border-color);
|
|
@@ -278,7 +278,7 @@
|
|
|
278
278
|
&:disabled {
|
|
279
279
|
opacity: #{$drp-opacity-disabled};
|
|
280
280
|
cursor: not-allowed;
|
|
281
|
-
background-color: var(--drp-input-disabled
|
|
281
|
+
background-color: var(--drp-input-background-disabled);
|
|
282
282
|
}
|
|
283
283
|
|
|
284
284
|
// Size variants
|
|
@@ -359,7 +359,8 @@
|
|
|
359
359
|
.drp-date-picker {
|
|
360
360
|
position: absolute;
|
|
361
361
|
z-index: $drp-z-index-dropdown;
|
|
362
|
-
|
|
362
|
+
font-family: var(--drp-font-family, var(--base-font-family, inherit));
|
|
363
|
+
background: var(--drp-dropdown-background);
|
|
363
364
|
border: var(--drp-border-width-base) solid var(--drp-border-color);
|
|
364
365
|
border-radius: var(--drp-border-radius);
|
|
365
366
|
box-shadow: var(--drp-shadow-xl);
|
|
@@ -369,15 +370,8 @@
|
|
|
369
370
|
box-sizing: border-box;
|
|
370
371
|
user-select: none;
|
|
371
372
|
|
|
372
|
-
//
|
|
373
|
-
|
|
374
|
-
--drp-font-size-2xs: calc(var(--drp-font-size-2xs-base) * var(--drp-font-scale));
|
|
375
|
-
--drp-font-size-xs: calc(var(--drp-font-size-xs-base) * var(--drp-font-scale));
|
|
376
|
-
--drp-font-size-sm: calc(var(--drp-font-size-sm-base) * var(--drp-font-scale));
|
|
377
|
-
--drp-font-size-base: calc(var(--drp-font-size-base-base) * var(--drp-font-scale));
|
|
378
|
-
--drp-font-size-lg: calc(var(--drp-font-size-lg-base) * var(--drp-font-scale));
|
|
379
|
-
--drp-font-size-xl: calc(var(--drp-font-size-xl-base) * var(--drp-font-scale));
|
|
380
|
-
--drp-font-size-2xl: calc(var(--drp-font-size-2xl-base) * var(--drp-font-scale));
|
|
373
|
+
// Badge row height
|
|
374
|
+
--drp-badge-row-height: #{$drp-badge-max-height};
|
|
381
375
|
|
|
382
376
|
// Hide by default
|
|
383
377
|
&:not(.drp-date-picker--visible) {
|
|
@@ -438,8 +432,7 @@
|
|
|
438
432
|
|
|
439
433
|
.drp-date-picker__month {
|
|
440
434
|
flex: 1;
|
|
441
|
-
|
|
442
|
-
min-width: calc(#{$drp-month-min-width} * var(--drp-cell-scale));
|
|
435
|
+
min-width: $drp-month-min-width;
|
|
443
436
|
|
|
444
437
|
// Make month a flex column container so calendar-container can fill vertical space
|
|
445
438
|
display: flex;
|
|
@@ -447,7 +440,7 @@
|
|
|
447
440
|
|
|
448
441
|
// Allow shrinking for inline mode
|
|
449
442
|
.drp-date-picker--inline & {
|
|
450
|
-
min-width:
|
|
443
|
+
min-width: $drp-month-min-width-inline;
|
|
451
444
|
}
|
|
452
445
|
|
|
453
446
|
// Grid layout: remove min-width to allow proper grid sizing
|
|
@@ -55,8 +55,7 @@
|
|
|
55
55
|
color: var(--drp-day-text-color);
|
|
56
56
|
border-radius: var(--drp-border-radius);
|
|
57
57
|
cursor: pointer;
|
|
58
|
-
|
|
59
|
-
border: calc(#{$drp-day-border-width} * var(--drp-cell-scale)) solid $drp-day-border-color;
|
|
58
|
+
border: $drp-day-border-width solid $drp-day-border-color;
|
|
60
59
|
position: relative; // For absolute positioning of labels
|
|
61
60
|
|
|
62
61
|
&:hover:not(.drp-date-picker__day--disabled):not(.drp-date-picker__day--other-month) {
|
|
@@ -89,9 +88,8 @@
|
|
|
89
88
|
// Focused (keyboard navigation)
|
|
90
89
|
// --------------------------------------
|
|
91
90
|
&--focused {
|
|
92
|
-
|
|
93
|
-
outline:
|
|
94
|
-
outline-offset: calc(#{$drp-day-focused-outline-offset} * var(--drp-cell-scale));
|
|
91
|
+
outline: $drp-day-focused-outline-width solid var(--drp-day-focused-outline);
|
|
92
|
+
outline-offset: $drp-day-focused-outline-offset;
|
|
95
93
|
}
|
|
96
94
|
|
|
97
95
|
// --------------------------------------
|
|
@@ -180,8 +178,7 @@
|
|
|
180
178
|
|
|
181
179
|
&--drag-preview {
|
|
182
180
|
background-color: color-mix(in srgb, var(--drp-day-range-bg) $drp-day-drag-preview-bg-opacity * 100%, transparent);
|
|
183
|
-
|
|
184
|
-
border: calc(#{$drp-day-border-width} * var(--drp-cell-scale)) $drp-day-drag-preview-border-style var(--drp-day-range-bg);
|
|
181
|
+
border: $drp-day-border-width $drp-day-drag-preview-border-style var(--drp-day-range-bg);
|
|
185
182
|
|
|
186
183
|
&.drp-date-picker__day--range-start,
|
|
187
184
|
&.drp-date-picker__day--range-end {
|
|
@@ -58,9 +58,8 @@
|
|
|
58
58
|
// ==============================================================================
|
|
59
59
|
|
|
60
60
|
.drp-date-picker__nav {
|
|
61
|
-
|
|
62
|
-
|
|
63
|
-
height: calc(#{$drp-nav-size} * var(--drp-cell-scale));
|
|
61
|
+
width: $drp-nav-size;
|
|
62
|
+
height: $drp-nav-size;
|
|
64
63
|
display: flex;
|
|
65
64
|
align-items: center;
|
|
66
65
|
justify-content: center;
|
|
@@ -164,9 +163,7 @@
|
|
|
164
163
|
padding: #{$drp-rolling-item-padding-v} #{$drp-rolling-item-padding-h};
|
|
165
164
|
cursor: pointer;
|
|
166
165
|
font-size: #{$drp-rolling-item-font-size};
|
|
167
|
-
|
|
168
|
-
min-height: calc(#{$drp-rolling-item-min-height} * var(--drp-cell-scale));
|
|
169
|
-
// Prevent flex item from growing beyond min-height
|
|
166
|
+
min-height: $drp-rolling-item-min-height;
|
|
170
167
|
flex-shrink: 0;
|
|
171
168
|
|
|
172
169
|
// Flexbox for vertical and horizontal centering
|
|
@@ -262,7 +259,7 @@
|
|
|
262
259
|
|
|
263
260
|
display: none;
|
|
264
261
|
z-index: 100; // Above everything
|
|
265
|
-
background: var(--drp-
|
|
262
|
+
background: var(--drp-dropdown-background); // White background to cover calendar below
|
|
266
263
|
gap: var(--drp-spacing-xs); // Match normal rolling selector gap
|
|
267
264
|
|
|
268
265
|
&--visible {
|
|
@@ -305,7 +302,7 @@
|
|
|
305
302
|
padding: #{$drp-rolling-item-padding-v} #{$drp-rolling-item-padding-h};
|
|
306
303
|
cursor: pointer;
|
|
307
304
|
font-size: #{$drp-rolling-item-font-size};
|
|
308
|
-
min-height:
|
|
305
|
+
min-height: $drp-rolling-item-min-height;
|
|
309
306
|
flex-shrink: 0;
|
|
310
307
|
display: flex;
|
|
311
308
|
align-items: center;
|
package/src/scss/_loading.scss
CHANGED
|
@@ -12,19 +12,19 @@
|
|
|
12
12
|
left: 0;
|
|
13
13
|
right: 0;
|
|
14
14
|
bottom: 0;
|
|
15
|
-
background-color:
|
|
15
|
+
background-color: var(--drp-loading-overlay-background);
|
|
16
16
|
display: flex;
|
|
17
17
|
align-items: center;
|
|
18
18
|
justify-content: center;
|
|
19
19
|
z-index: $drp-z-index-dropdown;
|
|
20
|
-
border-radius:
|
|
20
|
+
border-radius: var(--drp-border-radius);
|
|
21
21
|
}
|
|
22
22
|
|
|
23
23
|
.drp-date-picker__loading-spinner {
|
|
24
24
|
width: 40px;
|
|
25
25
|
height: 40px;
|
|
26
|
-
border: 4px solid
|
|
27
|
-
border-top-color:
|
|
26
|
+
border: 4px solid var(--drp-loading-spinner-color);
|
|
27
|
+
border-top-color: var(--drp-loading-spinner-accent);
|
|
28
28
|
border-radius: 50%;
|
|
29
29
|
animation: drp-spin 0.8s linear infinite;
|
|
30
30
|
}
|
package/src/scss/_modifiers.scss
CHANGED
|
@@ -1,224 +1,9 @@
|
|
|
1
1
|
// ==============================================================================
|
|
2
2
|
// DATE RANGE PICKER - MODIFIERS
|
|
3
3
|
// ==============================================================================
|
|
4
|
-
// Three independent sizing systems for fine-grained control
|
|
5
4
|
|
|
6
5
|
@use 'variables' as *;
|
|
7
6
|
|
|
8
|
-
// ==============================================================================
|
|
9
|
-
// FONT SCALE CLASSES
|
|
10
|
-
// ==============================================================================
|
|
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%)
|
|
16
|
-
}
|
|
17
|
-
|
|
18
|
-
.drp-date-picker.drp-font-sm {
|
|
19
|
-
--drp-font-scale: #{$drp-density-sm}; // 0.8× scale (80%)
|
|
20
|
-
}
|
|
21
|
-
|
|
22
|
-
.drp-date-picker.drp-font-md {
|
|
23
|
-
--drp-font-scale: #{$drp-density-md}; // 1.0× scale (100%, default)
|
|
24
|
-
}
|
|
25
|
-
|
|
26
|
-
.drp-date-picker.drp-font-lg {
|
|
27
|
-
--drp-font-scale: #{$drp-density-lg}; // 1.5× scale (150%)
|
|
28
|
-
}
|
|
29
|
-
|
|
30
|
-
.drp-date-picker.drp-font-xl {
|
|
31
|
-
--drp-font-scale: #{$drp-density-xl}; // 2.0× scale (200%)
|
|
32
|
-
}
|
|
33
|
-
|
|
34
|
-
// ==============================================================================
|
|
35
|
-
// SPACING SCALE CLASSES
|
|
36
|
-
// ==============================================================================
|
|
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%)
|
|
42
|
-
}
|
|
43
|
-
|
|
44
|
-
.drp-date-picker.drp-spacing-sm {
|
|
45
|
-
--drp-spacing-scale: #{$drp-density-sm}; // 0.8× scale (80%)
|
|
46
|
-
}
|
|
47
|
-
|
|
48
|
-
.drp-date-picker.drp-spacing-md {
|
|
49
|
-
--drp-spacing-scale: #{$drp-density-md}; // 1.0× scale (100%, default)
|
|
50
|
-
}
|
|
51
|
-
|
|
52
|
-
.drp-date-picker.drp-spacing-lg {
|
|
53
|
-
--drp-spacing-scale: #{$drp-density-lg}; // 1.5× scale (150%)
|
|
54
|
-
}
|
|
55
|
-
|
|
56
|
-
.drp-date-picker.drp-spacing-xl {
|
|
57
|
-
--drp-spacing-scale: #{$drp-density-xl}; // 2.0× scale (200%)
|
|
58
|
-
}
|
|
59
|
-
|
|
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%)
|
|
68
|
-
}
|
|
69
|
-
|
|
70
|
-
.drp-date-picker.drp-cell-sm {
|
|
71
|
-
--drp-cell-scale: #{$drp-density-sm}; // 0.8× scale (80%)
|
|
72
|
-
}
|
|
73
|
-
|
|
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%)
|
|
84
|
-
}
|
|
85
|
-
|
|
86
|
-
// ==============================================================================
|
|
87
|
-
// RESPONSIVE SCALING
|
|
88
|
-
// ==============================================================================
|
|
89
|
-
// Automatically reduces scale at smaller breakpoints for each sizing system
|
|
90
|
-
// Example: xl (2.0×) → lg (1.5×) @ 1200px → md (1.0×) @ 768px
|
|
91
|
-
|
|
92
|
-
.drp-responsive {
|
|
93
|
-
// Font scale responsive adjustments
|
|
94
|
-
&.drp-font-xl {
|
|
95
|
-
@media (max-width: 1200px) {
|
|
96
|
-
--drp-font-scale: #{$drp-density-lg};
|
|
97
|
-
}
|
|
98
|
-
@media (max-width: 768px) {
|
|
99
|
-
--drp-font-scale: #{$drp-density-md};
|
|
100
|
-
}
|
|
101
|
-
}
|
|
102
|
-
|
|
103
|
-
&.drp-font-lg {
|
|
104
|
-
@media (max-width: 1200px) {
|
|
105
|
-
--drp-font-scale: #{$drp-density-md};
|
|
106
|
-
}
|
|
107
|
-
@media (max-width: 768px) {
|
|
108
|
-
--drp-font-scale: #{$drp-density-sm};
|
|
109
|
-
}
|
|
110
|
-
}
|
|
111
|
-
|
|
112
|
-
&.drp-font-md {
|
|
113
|
-
@media (max-width: 768px) {
|
|
114
|
-
--drp-font-scale: #{$drp-density-sm};
|
|
115
|
-
}
|
|
116
|
-
}
|
|
117
|
-
|
|
118
|
-
&.drp-font-sm {
|
|
119
|
-
@media (max-width: 768px) {
|
|
120
|
-
--drp-font-scale: #{$drp-density-xs};
|
|
121
|
-
}
|
|
122
|
-
}
|
|
123
|
-
|
|
124
|
-
// Spacing scale responsive adjustments
|
|
125
|
-
&.drp-spacing-xl {
|
|
126
|
-
@media (max-width: 1200px) {
|
|
127
|
-
--drp-spacing-scale: #{$drp-density-lg};
|
|
128
|
-
}
|
|
129
|
-
@media (max-width: 768px) {
|
|
130
|
-
--drp-spacing-scale: #{$drp-density-md};
|
|
131
|
-
}
|
|
132
|
-
}
|
|
133
|
-
|
|
134
|
-
&.drp-spacing-lg {
|
|
135
|
-
@media (max-width: 1200px) {
|
|
136
|
-
--drp-spacing-scale: #{$drp-density-md};
|
|
137
|
-
}
|
|
138
|
-
@media (max-width: 768px) {
|
|
139
|
-
--drp-spacing-scale: #{$drp-density-sm};
|
|
140
|
-
}
|
|
141
|
-
}
|
|
142
|
-
|
|
143
|
-
&.drp-spacing-md {
|
|
144
|
-
@media (max-width: 768px) {
|
|
145
|
-
--drp-spacing-scale: #{$drp-density-sm};
|
|
146
|
-
}
|
|
147
|
-
}
|
|
148
|
-
|
|
149
|
-
&.drp-spacing-sm {
|
|
150
|
-
@media (max-width: 768px) {
|
|
151
|
-
--drp-spacing-scale: #{$drp-density-xs};
|
|
152
|
-
}
|
|
153
|
-
}
|
|
154
|
-
|
|
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
|
-
}
|
|
163
|
-
}
|
|
164
|
-
|
|
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
|
-
}
|
|
172
|
-
}
|
|
173
|
-
|
|
174
|
-
&.drp-cell-md {
|
|
175
|
-
@media (max-width: 768px) {
|
|
176
|
-
--drp-cell-scale: #{$drp-density-sm};
|
|
177
|
-
}
|
|
178
|
-
}
|
|
179
|
-
|
|
180
|
-
&.drp-cell-sm {
|
|
181
|
-
@media (max-width: 768px) {
|
|
182
|
-
--drp-cell-scale: #{$drp-density-xs};
|
|
183
|
-
}
|
|
184
|
-
}
|
|
185
|
-
}
|
|
186
|
-
|
|
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
|
|
193
|
-
|
|
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
|
-
}
|
|
200
|
-
|
|
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});
|
|
206
|
-
}
|
|
207
|
-
|
|
208
|
-
.drp-date-picker--lg {
|
|
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
|
-
}
|
|
214
|
-
|
|
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
7
|
// ==============================================================================
|
|
223
8
|
// TRANSITIONS (OPT-IN FOR PERFORMANCE)
|
|
224
9
|
// ==============================================================================
|
package/src/scss/_tooltips.scss
CHANGED
|
@@ -12,8 +12,8 @@
|
|
|
12
12
|
.drp-date-picker__tooltip {
|
|
13
13
|
position: absolute;
|
|
14
14
|
z-index: $drp-z-index-tooltip;
|
|
15
|
-
background-color: var(--drp-tooltip-
|
|
16
|
-
color: var(--drp-tooltip-color);
|
|
15
|
+
background-color: var(--drp-tooltip-background);
|
|
16
|
+
color: var(--drp-tooltip-text-color);
|
|
17
17
|
padding: var(--drp-spacing-xs) var(--drp-spacing-sm);
|
|
18
18
|
border-radius: var(--drp-border-radius);
|
|
19
19
|
font-size: var(--drp-font-size-xs);
|
|
@@ -31,7 +31,7 @@
|
|
|
31
31
|
// Tooltip arrow
|
|
32
32
|
&-arrow {
|
|
33
33
|
position: absolute;
|
|
34
|
-
background-color: var(--drp-tooltip-
|
|
34
|
+
background-color: var(--drp-tooltip-background);
|
|
35
35
|
width: $drp-tooltip-arrow-size;
|
|
36
36
|
height: $drp-tooltip-arrow-size;
|
|
37
37
|
transform: rotate(45deg);
|