@keenmate/web-daterangepicker 1.0.0-rc03 → 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.
- package/README.md +28 -28
- package/dist/style.css +1 -1
- package/dist/web-daterangepicker.js +3785 -0
- package/dist/web-daterangepicker.umd.js +26 -0
- package/package.json +11 -10
- package/src/scss/_badges.scss +7 -5
- package/src/scss/_base.scss +85 -29
- package/src/scss/_calendar-grid.scss +25 -5
- package/src/scss/_header-navigation.scss +41 -18
- package/src/scss/_modifiers.scss +142 -244
- package/src/scss/_summary-actions.scss +13 -1
- package/src/scss/_tooltips.scss +3 -3
- package/src/scss/_variables.scss +13 -9
- package/dist/date-range-picker.js +0 -3053
- package/dist/date-range-picker.umd.js +0 -28
package/src/scss/_modifiers.scss
CHANGED
|
@@ -1,358 +1,256 @@
|
|
|
1
1
|
// ==============================================================================
|
|
2
2
|
// DATE RANGE PICKER - MODIFIERS
|
|
3
3
|
// ==============================================================================
|
|
4
|
-
//
|
|
4
|
+
// Three independent sizing systems for fine-grained control
|
|
5
5
|
|
|
6
6
|
@use 'variables' as *;
|
|
7
7
|
|
|
8
8
|
// ==============================================================================
|
|
9
|
-
// FONT
|
|
9
|
+
// FONT SCALE CLASSES
|
|
10
10
|
// ==============================================================================
|
|
11
|
-
//
|
|
12
|
-
// Example:
|
|
13
|
-
|
|
14
|
-
.drp-font-xs {
|
|
15
|
-
--drp-font-
|
|
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-
|
|
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
|
-
//
|
|
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-
|
|
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-
|
|
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
|
|
35
|
+
// SPACING SCALE CLASSES
|
|
60
36
|
// ==============================================================================
|
|
61
|
-
//
|
|
62
|
-
// Example:
|
|
63
|
-
|
|
64
|
-
.drp-spacing-xs {
|
|
65
|
-
--drp-spacing-
|
|
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-
|
|
78
|
-
|
|
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
|
-
|
|
84
|
-
|
|
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-
|
|
89
|
-
//
|
|
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-
|
|
93
|
-
--drp-spacing-
|
|
94
|
-
|
|
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
|
-
|
|
100
|
-
|
|
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-
|
|
105
|
-
--drp-
|
|
106
|
-
|
|
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
|
-
|
|
112
|
-
|
|
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
|
-
//
|
|
120
|
-
// Example:
|
|
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
|
|
93
|
+
// Font scale responsive adjustments
|
|
124
94
|
&.drp-font-xl {
|
|
125
95
|
@media (max-width: 1200px) {
|
|
126
|
-
--drp-font-
|
|
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-
|
|
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-
|
|
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-
|
|
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-
|
|
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-
|
|
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
|
|
124
|
+
// Spacing scale responsive adjustments
|
|
194
125
|
&.drp-spacing-xl {
|
|
195
126
|
@media (max-width: 1200px) {
|
|
196
|
-
--drp-spacing-
|
|
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-
|
|
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-
|
|
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-
|
|
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-
|
|
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-
|
|
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
|
-
|
|
276
|
-
|
|
277
|
-
|
|
278
|
-
|
|
279
|
-
|
|
280
|
-
|
|
281
|
-
|
|
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
|
-
|
|
285
|
-
width:
|
|
286
|
-
|
|
287
|
-
|
|
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
|
-
|
|
291
|
-
|
|
174
|
+
&.drp-cell-md {
|
|
175
|
+
@media (max-width: 768px) {
|
|
176
|
+
--drp-cell-scale: #{$drp-density-sm};
|
|
177
|
+
}
|
|
292
178
|
}
|
|
293
179
|
|
|
294
|
-
|
|
295
|
-
|
|
180
|
+
&.drp-cell-sm {
|
|
181
|
+
@media (max-width: 768px) {
|
|
182
|
+
--drp-cell-scale: #{$drp-density-xs};
|
|
183
|
+
}
|
|
296
184
|
}
|
|
297
185
|
}
|
|
298
186
|
|
|
299
|
-
|
|
300
|
-
|
|
301
|
-
|
|
302
|
-
|
|
303
|
-
|
|
304
|
-
|
|
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
|
-
|
|
309
|
-
|
|
310
|
-
|
|
311
|
-
|
|
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
|
-
|
|
315
|
-
|
|
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
|
-
|
|
321
|
-
|
|
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
|
-
|
|
324
|
-
|
|
325
|
-
|
|
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
|
-
|
|
330
|
-
|
|
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
|
-
|
|
335
|
-
|
|
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
|
-
|
|
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
|
-
|
|
355
|
-
|
|
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
|
|
|
@@ -52,13 +52,25 @@
|
|
|
52
52
|
cursor: pointer;
|
|
53
53
|
font-size: var(--drp-font-size-sm);
|
|
54
54
|
font-weight: var(--drp-font-weight-medium);
|
|
55
|
-
transition: all var(--drp-transition-fast) var(--drp-easing-snappy);
|
|
56
55
|
|
|
57
56
|
&:hover {
|
|
58
57
|
background-color: var(--drp-primary-bg);
|
|
59
58
|
border-color: var(--drp-accent-color);
|
|
60
59
|
}
|
|
61
60
|
|
|
61
|
+
// Disabled state
|
|
62
|
+
&:disabled,
|
|
63
|
+
&[disabled] {
|
|
64
|
+
opacity: var(--drp-disabled-opacity, $drp-opacity-disabled);
|
|
65
|
+
cursor: not-allowed;
|
|
66
|
+
pointer-events: none; // Critical - prevents all mouse interactions
|
|
67
|
+
|
|
68
|
+
&:hover {
|
|
69
|
+
background-color: transparent;
|
|
70
|
+
border-color: var(--drp-border-color);
|
|
71
|
+
}
|
|
72
|
+
}
|
|
73
|
+
|
|
62
74
|
// Today Button
|
|
63
75
|
&--today {
|
|
64
76
|
color: var(--drp-accent-color);
|
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-
|
|
16
|
-
color:
|
|
15
|
+
background-color: var(--drp-tooltip-bg);
|
|
16
|
+
color: var(--drp-tooltip-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-
|
|
34
|
+
background-color: var(--drp-tooltip-bg);
|
|
35
35
|
width: $drp-tooltip-arrow-size;
|
|
36
36
|
height: $drp-tooltip-arrow-size;
|
|
37
37
|
transform: rotate(45deg);
|
package/src/scss/_variables.scss
CHANGED
|
@@ -187,9 +187,11 @@ $drp-rolling-scrollbar-bg: $drp-color-neutral-lighter !default;
|
|
|
187
187
|
$drp-rolling-scrollbar-thumb: $drp-border-color !default;
|
|
188
188
|
$drp-rolling-scrollbar-thumb-hover: $drp-color-accent !default;
|
|
189
189
|
|
|
190
|
-
$drp-rolling-item-padding-v: $drp-spacing-
|
|
190
|
+
$drp-rolling-item-padding-v: $drp-spacing-xs !default; // Half of sm (0.25rem instead of 0.5rem)
|
|
191
191
|
$drp-rolling-item-padding-h: $drp-spacing-md !default;
|
|
192
192
|
$drp-rolling-item-font-size: $drp-font-size-sm !default;
|
|
193
|
+
$drp-rolling-item-min-height: 2rem !default;
|
|
194
|
+
$drp-rolling-item-justify-content: center !default;
|
|
193
195
|
$drp-rolling-item-bg-hover: $drp-color-neutral-lighter !default;
|
|
194
196
|
$drp-rolling-item-bg-selected: $drp-color-accent !default;
|
|
195
197
|
$drp-rolling-item-color-selected: $drp-color-white !default;
|
|
@@ -338,12 +340,14 @@ $drp-grid-columns: 3 !default;
|
|
|
338
340
|
$drp-grid-rows: 2 !default;
|
|
339
341
|
|
|
340
342
|
// ==============================================================================
|
|
341
|
-
//
|
|
343
|
+
// DENSITY MULTIPLIERS
|
|
342
344
|
// ==============================================================================
|
|
343
|
-
// Used
|
|
344
|
-
|
|
345
|
-
|
|
346
|
-
|
|
347
|
-
$drp-
|
|
348
|
-
$drp-
|
|
349
|
-
$drp-
|
|
345
|
+
// Used to scale the entire calendar proportionally (spacing, fonts, cells, etc.)
|
|
346
|
+
// Applied via --drp-density CSS custom property
|
|
347
|
+
// Range: 0.6× (very compact) to 2.0× (very large) for dramatic visual differences
|
|
348
|
+
|
|
349
|
+
$drp-density-xs: 0.6 !default; // 60% - Very compact
|
|
350
|
+
$drp-density-sm: 0.8 !default; // 80% - Compact
|
|
351
|
+
$drp-density-md: 1 !default; // 100% - Normal (baseline)
|
|
352
|
+
$drp-density-lg: 1.5 !default; // 150% - Large
|
|
353
|
+
$drp-density-xl: 2.0 !default; // 200% - Very large
|