@oruga-ui/theme-oruga 0.7.1 → 0.8.1

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 (48) hide show
  1. package/LICENSE +1 -1
  2. package/README.md +5 -5
  3. package/dist/scss/components/_autocomplete.scss +3 -12
  4. package/dist/scss/components/_breadcrumb.scss +122 -103
  5. package/dist/scss/components/_button.scss +228 -173
  6. package/dist/scss/components/_carousel.scss +164 -142
  7. package/dist/scss/components/_checkbox.scss +118 -118
  8. package/dist/scss/components/_collapse.scss +1 -1
  9. package/dist/scss/components/_datepicker.scss +228 -290
  10. package/dist/scss/components/_datetimepicker.scss +8 -2
  11. package/dist/scss/components/_dialog.scss +243 -0
  12. package/dist/scss/components/_dropdown.scss +190 -164
  13. package/dist/scss/components/_field.scss +68 -39
  14. package/dist/scss/components/_icon.scss +24 -29
  15. package/dist/scss/components/_input.scss +112 -97
  16. package/dist/scss/components/_listbox.scss +176 -0
  17. package/dist/scss/components/_loading.scss +35 -15
  18. package/dist/scss/components/_menu.scss +113 -109
  19. package/dist/scss/components/_modal.scss +112 -50
  20. package/dist/scss/components/_notification.scss +113 -97
  21. package/dist/scss/components/_pagination.scss +173 -106
  22. package/dist/scss/components/_radio.scss +91 -84
  23. package/dist/scss/components/_select.scss +108 -115
  24. package/dist/scss/components/_sidebar.scss +102 -101
  25. package/dist/scss/components/_skeleton.scss +50 -39
  26. package/dist/scss/components/_slider.scss +221 -159
  27. package/dist/scss/components/_steps.scss +223 -261
  28. package/dist/scss/components/_switch.scss +126 -90
  29. package/dist/scss/components/_table.scss +307 -251
  30. package/dist/scss/components/_tabs.scss +360 -247
  31. package/dist/scss/components/_tag.scss +95 -39
  32. package/dist/scss/components/_taginput.scss +48 -36
  33. package/dist/scss/components/_timepicker.scss +61 -62
  34. package/dist/scss/components/_tooltip.scss +129 -254
  35. package/dist/scss/components/_upload.scss +83 -35
  36. package/dist/scss/theme-build.scss +9 -0
  37. package/dist/scss/theme.scss +44 -0
  38. package/dist/scss/utils/_animations.scss +30 -9
  39. package/dist/scss/utils/_base.scss +6 -4
  40. package/dist/scss/utils/_helpers.scss +84 -22
  41. package/dist/scss/utils/_root.scss +82 -29
  42. package/dist/scss/utils/_variables.scss +64 -42
  43. package/dist/theme.css +2 -0
  44. package/dist/theme.js +1 -1
  45. package/package.json +27 -20
  46. package/dist/oruga.css +0 -2
  47. package/dist/scss/oruga-build.scss +0 -9
  48. package/dist/scss/oruga.scss +0 -42
package/dist/scss/components/_datepicker.scss CHANGED
@@ -1,73 +1,175 @@
1
1
  @use "sass:list";
2
+ @use "../utils/helpers" as h;
3
+ @use "../utils/variables" as vars;
2
4
 
3
5
  /* @docs */
4
- $datepicker-font-size: var(--#{$prefix}base-font-size) !default;
5
- $datepicker-box-padding: 0.5rem 1rem !default;
6
- $datepicker-header-padding: 0.5rem 0 !default;
7
- $datepicker-header-spacer: 0.5rem !default;
8
- $datepicker-header-border-bottom: 1px solid var(--#{$prefix}grey-lighter) !default;
9
- $datepicker-footer-padding: 0.5rem 0.5rem 0 0.5rem !default;
10
- $datepicker-footer-border-top: 1px solid var(--#{$prefix}grey-lighter) !default;
11
- $datepicker-table-head-padding: 0 0 0.875rem 0 !default;
12
- $datepicker-table-head-margin: 0 0 0.875rem 0 !default;
13
- $datepicker-table-head-border-bottom: 1px solid var(--#{$prefix}grey-lighter) !default;
14
- $datepicker-table-head-item-color: var(--#{$prefix}grey) !default;
15
- $datepicker-table-head-item-font-weight: 600 !default;
16
- $datepicker-item-today-border: solid 1px rgba(var(--#{$prefix}primary), 0.5) !default;
17
- $datepicker-item-selectable-color: var(--#{$prefix}grey-dark) !default;
18
- $datepicker-item-disabled-color: var(--#{$prefix}grey-light) !default;
19
- $datepicker-item-border-radius: var(--#{$prefix}base-border-radius) !default;
20
- $datepicker-item-padding: 0.5rem 0.75rem !default;
21
- $datepicker-item-selected-color: var(--#{$prefix}primary-invert) !default;
22
- $datepicker-item-selected-background-color: var(--#{$prefix}primary) !default;
23
- $datepicker-item-selected-border-radius: 0 !default;
24
- $datepicker-item-selected-within-background-color: rgb(
25
- from $datepicker-item-selected-background-color r g b / 50%
6
+ $datepicker-font-size: h.useVar("font-size") !default;
7
+ $datepicker-box-padding: 0 calc(2 * h.useVar("control-spacer")) !default;
8
+
9
+ $datepicker-border-width: h.useVar("control-border-width") !default;
10
+ $datepicker-border-style: solid !default;
11
+ $datepicker-border-color: h.useVar("control-border-color") !default;
12
+
13
+ $datepicker-header-padding: h.useVar("control-spacer") 0 !default;
14
+ $datepicker-header-spacer: h.useVar("control-spacer") !default;
15
+
16
+ $datepicker-footer-padding: h.useVar("control-spacer") !default;
17
+ $datepicker-footer-spacer: h.useVar("control-spacer") !default;
18
+
19
+ $datepicker-button-height: 2.25em !default;
20
+ $datepicker-button-min-width: 2.25em !default;
21
+
22
+ $datepicker-table-header-font-weight: 600 !default;
23
+
24
+ $datepicker-table-cell-padding: 0.5rem 0.75rem !default;
25
+ $datepicker-table-cell-border-radius: h.useVar("border-radius") !default;
26
+
27
+ $datepicker-table-cell-selectable-color: h.useVar("font-color") !default;
28
+ $datepicker-table-cell-unselectable-color: h.useVar("grey-light") !default;
29
+ $datepicker-table-cell-nearby-color: h.useVar("grey-light") !default;
30
+ $datepicker-table-cell-today-border: solid 1px rgba(h.useVar("primary"), 0.5) !default;
31
+
32
+ $datepicker-table-cell-selected-color: h.useVar("primary-invert") !default;
33
+ $datepicker-table-cell-selected-background-color: h.useVar("primary") !default;
34
+ $datepicker-table-cell-selected-within-background-color: rgb(
35
+ from $datepicker-table-cell-selected-background-color r g b / 50%
26
36
  ) !default;
27
- $datepicker-item-hovered-background-color: var(--#{$prefix}grey) !default;
28
- $datepicker-item-hovered-color: var(--#{$prefix}grey-lighter) !default;
29
- $datepicker-item-hovered-background-color: $control-brackground-color !default;
30
- $datepicker-item-hovered-within-background-color: rgb(
31
- from $datepicker-item-hovered-background-color r g b / 50%
37
+ $datepicker-table-cell-hovered-color: h.useVar("white") !default;
38
+ $datepicker-table-cell-hovered-background-color: h.useVar("grey") !default;
39
+ $datepicker-table-cell-hovered-within-background-color: rgb(
40
+ from $datepicker-table-cell-hovered-background-color r g b / 50%
32
41
  ) !default;
33
- $datepicker-item-nearby-color: var(--#{$prefix}grey-light) !default;
34
- $datepicker-events-item-padding: 0.3rem 0.75rem 0.75rem !default;
35
- $datepicker-event-background-color: var(--#{$prefix}grey-light) !default;
42
+
43
+ $datepicker-table-cell-events-padding: 0.3rem 0.75rem 0.75rem !default;
44
+
45
+ $datepicker-event-background-color: h.useVar("grey-light") !default;
36
46
  $datepicker-event-dots-size: 0.35em !default;
37
47
  $datepicker-event-dots-margin: 0 0.1em !default;
38
48
  $datepicker-event-bars-height: 0.25em !default;
39
- $datepicker-btn-background-color: transparent !default;
40
- $datepicker-btn-border-color: var(--#{$prefix}grey-lighter) !default;
41
- $datepicker-btn-border-radius: var(--#{$prefix}base-border-radius) !default;
42
- $datepicker-btn-border: 1px solid transparent !default;
43
- $datepicker-btn-color: #363636 !default;
44
- $datepicker-btn-height: 2.25em !default;
45
- $datepicker-btn-hover-border-color: var(--#{$prefix}grey-light) !default;
46
- $datepicker-btn-hover-color: #363636 !default;
47
- $datepicker-btn-hover-background-color: transparent !default;
48
- $datepicker-btn-min-width: 2.25em !default;
49
- $datepicker-btn-padding: 0.5em 0.5em !default;
50
49
  /* @docs */
51
50
 
52
51
  .o-datepicker {
53
- font-size: var(--#{$prefix}datepicker-font-size, $datepicker-font-size);
52
+ @include h.defineVar("datepicker-font-size", $datepicker-font-size);
53
+ @include h.defineVar("datepicker-box-padding", $datepicker-box-padding);
54
+ @include h.defineVar("datepicker-border-width", $datepicker-border-width);
55
+ @include h.defineVar("datepicker-border-style", $datepicker-border-style);
56
+ @include h.defineVar("datepicker-border-color", $datepicker-border-color);
57
+
58
+ @include h.defineVar(
59
+ "datepicker-header-padding",
60
+ $datepicker-header-padding
61
+ );
62
+ @include h.defineVar("datepicker-header-spacer", $datepicker-header-spacer);
63
+ @include h.defineVar(
64
+ "datepicker-footer-padding",
65
+ $datepicker-footer-padding
66
+ );
67
+ @include h.defineVar("datepicker-footer-spacer", $datepicker-footer-spacer);
68
+
69
+ @include h.defineVar("datepicker-button-height", $datepicker-button-height);
70
+ @include h.defineVar(
71
+ "datepicker-button-min-width",
72
+ $datepicker-button-min-width
73
+ );
74
+
75
+ @include h.defineVar(
76
+ "datepicker-table-header-font-weight",
77
+ $datepicker-table-header-font-weight
78
+ );
79
+ @include h.defineVar(
80
+ "datepicker-table-cell-padding",
81
+ $datepicker-table-cell-padding
82
+ );
83
+ @include h.defineVar(
84
+ "datepicker-table-cell-border-radius",
85
+ $datepicker-table-cell-border-radius
86
+ );
87
+
88
+ @include h.defineVar(
89
+ "datepicker-table-cell-selectable-color",
90
+ $datepicker-table-cell-selectable-color
91
+ );
92
+ @include h.defineVar(
93
+ "datepicker-table-cell-unselectable-color",
94
+ $datepicker-table-cell-unselectable-color
95
+ );
96
+ @include h.defineVar(
97
+ "datepicker-table-cell-nearby-color",
98
+ $datepicker-table-cell-nearby-color
99
+ );
100
+ @include h.defineVar(
101
+ "datepicker-table-cell-today-border",
102
+ $datepicker-table-cell-today-border
103
+ );
104
+
105
+ @include h.defineVar(
106
+ "datepicker-table-cell-selected-color",
107
+ $datepicker-table-cell-selected-color
108
+ );
109
+ @include h.defineVar(
110
+ "datepicker-table-cell-selected-background-color",
111
+ $datepicker-table-cell-selected-background-color
112
+ );
113
+ @include h.defineVar(
114
+ "datepicker-table-cell-selected-within-background-color",
115
+ $datepicker-table-cell-selected-within-background-color
116
+ );
117
+ @include h.defineVar(
118
+ "datepicker-table-cell-hovered-color",
119
+ $datepicker-table-cell-hovered-color
120
+ );
121
+ @include h.defineVar(
122
+ "datepicker-table-cell-hovered-background-color",
123
+ $datepicker-table-cell-hovered-background-color
124
+ );
125
+ @include h.defineVar(
126
+ "datepicker-table-cell-hovered-within-background-color",
127
+ $datepicker-table-cell-hovered-within-background-color
128
+ );
129
+ @include h.defineVar(
130
+ "datepicker-table-cell-events-padding",
131
+ $datepicker-table-cell-events-padding
132
+ );
133
+
134
+ @include h.defineVar(
135
+ "datepicker-event-background-color",
136
+ $datepicker-event-background-color
137
+ );
138
+ @include h.defineVar(
139
+ "datepicker-event-dots-size",
140
+ $datepicker-event-dots-size
141
+ );
142
+ @include h.defineVar(
143
+ "datepicker-event-dots-margin",
144
+ $datepicker-event-dots-margin
145
+ );
146
+ @include h.defineVar(
147
+ "datepicker-event-bars-height",
148
+ $datepicker-event-bars-height
149
+ );
54
150
 
55
151
  // size variants
56
- @each $name, $value in $sizes {
152
+ @each $name, $value in vars.$sizes {
57
153
  &--#{$name} {
58
- font-size: var(--#{$prefix}datepicker-font-size-#{$name}, $value);
154
+ @include h.defineVar(
155
+ "datepicker-font-size",
156
+ h.useVar("size-#{$name}")
157
+ );
59
158
  }
60
159
  }
61
160
 
161
+ font-size: h.useVar("datepicker-font-size");
162
+
62
163
  &__dropdown {
63
164
  width: 100%;
165
+
166
+ .o-dropdown__menu {
167
+ min-width: 12rem;
168
+ }
64
169
  }
65
170
 
66
171
  &__box {
67
- padding: var(
68
- --#{$prefix}datepicker-box-padding,
69
- $datepicker-box-padding
70
- );
172
+ padding: h.useVar("datepicker-box-padding");
71
173
  }
72
174
 
73
175
  &__header {
@@ -75,20 +177,14 @@ $datepicker-btn-padding: 0.5em 0.5em !default;
75
177
  align-items: center;
76
178
  justify-content: space-between;
77
179
  text-align: center;
78
- gap: var(
79
- --#{$prefix}datepicker-header-spacer,
80
- $datepicker-header-spacer
81
- );
82
180
  min-width: max-content;
181
+ gap: h.useVar("datepicker-header-spacer");
83
182
 
84
- padding: var(
85
- --#{$prefix}datepicker-header-padding,
86
- $datepicker-header-padding
87
- );
88
- border-bottom: var(
89
- --#{$prefix}datepicker-header-border-bottom,
90
- $datepicker-header-border-bottom
91
- );
183
+ padding: h.useVar("datepicker-header-padding");
184
+
185
+ border-bottom-color: h.useVar("datepicker-border-color");
186
+ border-bottom-style: h.useVar("datepicker-border-style");
187
+ border-bottom-width: h.useVar("datepicker-border-width");
92
188
 
93
189
  &__previous {
94
190
  order: 1;
@@ -100,84 +196,35 @@ $datepicker-btn-padding: 0.5em 0.5em !default;
100
196
 
101
197
  &__previous,
102
198
  &__next {
103
- @include unselectable;
104
-
105
- text-align: center;
106
- text-decoration: none;
107
- cursor: pointer;
108
- -moz-appearance: none;
109
- -webkit-appearance: none;
110
- align-items: center;
111
- box-shadow: none;
112
- display: inline-flex;
113
- background-color: var(
114
- --#{$prefix}datepicker-btn-background-color,
115
- $datepicker-btn-background-color
116
- );
117
- border: var(
118
- --#{$prefix}datepicker-btn-border,
119
- $datepicker-btn-border
120
- );
121
- border-radius: var(
122
- --#{$prefix}datepicker-btn-border-radius,
123
- $datepicker-btn-border-radius
124
- );
125
- border-color: var(
126
- --#{$prefix}datepicker-btn-border-color,
127
- $datepicker-btn-border-color
128
- );
129
- color: var(--#{$prefix}datepicker-btn-color, $datepicker-btn-color);
130
- min-width: var(
131
- --#{$prefix}datepicker-btn-min-width,
132
- $datepicker-btn-min-width
133
- );
134
- height: var(
135
- --#{$prefix}datepicker-btn-height,
136
- $datepicker-btn-height
137
- );
138
- padding: var(
139
- --#{$prefix}datepicker-btn-padding,
140
- $datepicker-btn-padding
141
- );
142
-
143
- &:hover {
144
- border-color: var(
145
- --#{$prefix}datepicker-btn-hover-border-color,
146
- $datepicker-btn-hover-border-color
147
- );
148
- color: var(
149
- --#{$prefix}datepicker-btn-hover-color,
150
- $datepicker-btn-hover-color
151
- );
152
- background-color: var(
153
- --#{$prefix}datepicker-btn-hover-background-color,
154
- $datepicker-btn-hover-background-color
155
- );
156
- }
199
+ min-width: h.useVar("datepicker-button-min-width");
200
+ height: h.useVar("datepicker-button-height");
157
201
  }
158
202
 
159
203
  &__list {
160
204
  order: 2;
161
- align-items: center;
162
205
  display: flex;
206
+ align-items: center;
163
207
  justify-content: center;
164
208
  text-align: center;
165
209
  list-style: none;
210
+ gap: inherit;
166
211
  margin: 0;
167
212
  padding: 0;
168
- gap: inherit;
169
213
  }
170
214
  }
171
215
 
172
216
  &__footer {
173
- padding: var(
174
- --#{$prefix}datepicker-header-padding,
175
- $datepicker-footer-padding
176
- );
177
- border-top: var(
178
- --#{$prefix}datepicker-header-border-top,
179
- $datepicker-footer-border-top
180
- );
217
+ display: flex;
218
+ justify-content: space-between;
219
+ text-align: center;
220
+ min-width: max-content;
221
+ gap: h.useVar("datepicker-header-spacer");
222
+
223
+ padding: h.useVar("datepicker-footer-padding");
224
+
225
+ border-top-color: h.useVar("datepicker-border-color");
226
+ border-top-style: h.useVar("datepicker-border-style");
227
+ border-top-width: h.useVar("datepicker-border-width");
181
228
  }
182
229
 
183
230
  &__table,
@@ -187,18 +234,7 @@ $datepicker-btn-padding: 0.5em 0.5em !default;
187
234
 
188
235
  &__head {
189
236
  display: table-header-group;
190
- padding: var(
191
- --#{$prefix}datepicker-table-head-padding,
192
- $datepicker-table-head-padding
193
- );
194
- margin: var(
195
- --#{$prefix}datepicker-table-head-margin,
196
- $datepicker-table-head-margin
197
- );
198
- border-bottom: var(
199
- --#{$prefix}datepicker-table-head-border-bottom,
200
- $datepicker-table-head-border-bottom
201
- );
237
+ font-weight: h.useVar("datepicker-table-header-font-weight");
202
238
  }
203
239
 
204
240
  &__body {
@@ -209,179 +245,98 @@ $datepicker-btn-padding: 0.5em 0.5em !default;
209
245
  display: table-row;
210
246
  }
211
247
 
212
- &__head-cell {
213
- padding: var(
214
- --#{$prefix}datepicker-table-head-item-padding,
215
- $datepicker-table-head-item-color
216
- );
217
- font-weight: var(
218
- --#{$prefix}datepicker-table-head-item-font-weight,
219
- $datepicker-table-head-item-font-weight
220
- );
221
- }
222
-
223
248
  &__cell {
224
249
  text-align: center;
225
250
  vertical-align: middle;
226
251
  display: table-cell;
227
252
  text-decoration: none;
228
- border-radius: var(
229
- --#{$prefix}datepicker-item-border-radius,
230
- $datepicker-item-border-radius
231
- );
232
- padding: var(
233
- --#{$prefix}datepicker-item-padding,
234
- $datepicker-item-padding
235
- );
253
+
254
+ border-radius: h.useVar("datepicker-table-cell-border-radius");
255
+ padding: h.useVar("datepicker-table-cell-padding");
256
+
257
+ &--selectable {
258
+ // add clickable cursor
259
+ @include h.clickable;
260
+
261
+ color: h.useVar("datepicker-table-cell-selectable-color");
262
+ }
236
263
 
237
264
  &--unselectable {
238
- color: var(
239
- --#{$prefix}datepicker-item-disabled-color,
240
- $datepicker-item-disabled-color
241
- );
265
+ color: h.useVar("datepicker-table-cell-unselectable-color");
242
266
  }
243
267
 
244
- &--today {
245
- border: var(
246
- --#{$prefix}datepicker-item-today-border,
247
- $datepicker-item-today-border
248
- );
268
+ &--nearby:not(&--selected) {
269
+ color: h.useVar("datepicker-table-cell-nearby-color");
249
270
  }
250
271
 
251
- &--selectable {
252
- cursor: pointer;
253
- color: var(
254
- --#{$prefix}datepicker-item-selectable-color,
255
- $datepicker-item-selectable-color
256
- );
272
+ &--today {
273
+ border: h.useVar("datepicker-table-cell-today-border");
257
274
  }
258
275
 
259
276
  &--first-hovered {
260
- background-color: var(
261
- --#{$prefix}datepicker-item-hovered-background-color,
262
- $datepicker-item-hovered-background-color
263
- );
264
- color: var(
265
- --#{$prefix}datepicker-item-hovered-color,
266
- $datepicker-item-hovered-color
267
- );
268
- border-bottom-right-radius: var(
269
- --#{$prefix}datepicker-item-selected-border-radius,
270
- $datepicker-item-selected-border-radius
271
- );
272
- border-top-right-radius: var(
273
- --#{$prefix}datepicker-item-selected-border-radius,
274
- $datepicker-item-selected-border-radius
277
+ color: h.useVar("datepicker-table-cell-hovered-color");
278
+ background-color: h.useVar(
279
+ "datepicker-table-cell-hovered-background-color"
275
280
  );
281
+ border-bottom-right-radius: 0;
282
+ border-top-right-radius: 0;
276
283
  }
277
284
 
278
285
  &--within-hovered {
279
- background-color: var(
280
- --#{$prefix}datepicker-item-hovered-within-background-color,
281
- $datepicker-item-hovered-within-background-color
282
- );
283
- color: var(
284
- --#{$prefix}datepicker-item-hovered-color,
285
- $datepicker-item-hovered-color
286
- );
287
- border-radius: var(
288
- --#{$prefix}datepicker-item-selected-border-radius,
289
- $datepicker-item-selected-border-radius
286
+ background-color: h.useVar(
287
+ "datepicker-table-cell-hovered-within-background-color"
290
288
  );
289
+ color: h.useVar("datepicker-table-cell-hovered-color");
290
+ border-radius: 0;
291
291
  }
292
292
 
293
293
  &--last-hovered {
294
- background-color: var(
295
- --#{$prefix}datepicker-item-hovered-background-color,
296
- $datepicker-item-hovered-background-color
297
- );
298
- color: var(
299
- --#{$prefix}datepicker-item-hovered-color,
300
- $datepicker-item-hovered-color
301
- );
302
- border-bottom-left-radius: var(
303
- --#{$prefix}datepicker-item-selected-border-radius,
304
- $datepicker-item-selected-border-radius
305
- );
306
- border-top-left-radius: var(
307
- --#{$prefix}datepicker-item-selected-border-radius,
308
- $datepicker-item-selected-border-radius
294
+ color: h.useVar("datepicker-table-cell-hovered-color");
295
+ background-color: h.useVar(
296
+ "datepicker-table-cell-hovered-background-color"
309
297
  );
298
+ border-bottom-left-radius: 0;
299
+ border-top-left-radius: 0;
310
300
  }
311
301
 
312
302
  &--selected:not(&--first-hovered):not(&--within-hovered):not(
313
303
  &--last-hovered
314
304
  ) {
315
- background-color: var(
316
- --#{$prefix}datepicker-item-selected-background-color,
317
- $datepicker-item-selected-background-color
318
- );
319
- color: var(
320
- --#{$prefix}datepicker-item-selected-color,
321
- $datepicker-item-selected-color
305
+ color: h.useVar("datepicker-table-cell-selected-color");
306
+ background-color: h.useVar(
307
+ "datepicker-table-cell-selected-background-color"
322
308
  );
323
309
  }
324
310
 
325
311
  &--first-selected:not(&--first-hovered):not(&--within-hovered):not(
326
312
  &--last-hovered
327
313
  ) {
328
- background-color: var(
329
- --#{$prefix}datepicker-item-selected-background-color,
330
- $datepicker-item-selected-background-color
331
- );
332
- color: var(
333
- --#{$prefix}datepicker-item-selected-color,
334
- $datepicker-item-selected-color
335
- );
336
- border-bottom-right-radius: var(
337
- --#{$prefix}datepicker-item-selected-border-radius,
338
- $datepicker-item-selected-border-radius
339
- );
340
- border-top-right-radius: var(
341
- --#{$prefix}datepicker-item-selected-border-radius,
342
- $datepicker-item-selected-border-radius
314
+ background-color: h.useVar(
315
+ "datepicker-table-cell-selected-background-color"
343
316
  );
317
+ color: h.useVar("datepicker-table-cell-selected-color");
318
+ border-bottom-right-radius: 0;
319
+ border-top-right-radius: 0;
344
320
  }
345
321
 
346
322
  &--within-selected:not(&--first-hovered):not(&--within-hovered):not(
347
323
  &--last-hovered
348
324
  ) {
349
- background-color: var(
350
- --#{$prefix}datepicker-item-selected-within-background-color,
351
- $datepicker-item-selected-within-background-color
352
- );
353
- border-radius: var(
354
- --#{$prefix}datepicker-item-selected-border-radius,
355
- $datepicker-item-selected-border-radius
325
+ background-color: h.useVar(
326
+ "datepicker-table-cell-selected-within-background-color"
356
327
  );
328
+ border-radius: 0;
357
329
  }
358
330
 
359
331
  &--last-selected:not(&--first-hovered):not(&--within-hovered):not(
360
332
  &--last-hovered
361
333
  ) {
362
- background-color: var(
363
- --#{$prefix}datepicker-item-selected-background-color,
364
- $datepicker-item-selected-background-color
365
- );
366
- color: var(
367
- --#{$prefix}datepicker-item-selected-color,
368
- $datepicker-item-selected-color
369
- );
370
- border-bottom-left-radius: var(
371
- --#{$prefix}datepicker-item-selected-border-radius,
372
- $datepicker-item-selected-border-radius
373
- );
374
- border-top-left-radius: var(
375
- --#{$prefix}datepicker-item-selected-border-radius,
376
- $datepicker-item-selected-border-radius
377
- );
378
- }
379
-
380
- &--nearby:not(&--selected) {
381
- color: var(
382
- --#{$prefix}datepicker-item-nearby-color,
383
- $datepicker-item-nearby-color
334
+ background-color: h.useVar(
335
+ "datepicker-table-cell-selected-background-color"
384
336
  );
337
+ color: h.useVar("datepicker-table-cell-selected-color");
338
+ border-bottom-left-radius: 0;
339
+ border-top-left-radius: 0;
385
340
  }
386
341
 
387
342
  &--invisible {
@@ -390,10 +345,7 @@ $datepicker-btn-padding: 0.5em 0.5em !default;
390
345
 
391
346
  &--events {
392
347
  position: relative;
393
- padding: var(
394
- --#{$prefix}datepicker-events-item-padding,
395
- $datepicker-events-item-padding
396
- );
348
+ padding: h.useVar("datepicker-table-cell-events-padding");
397
349
  }
398
350
  }
399
351
 
@@ -407,41 +359,27 @@ $datepicker-btn-padding: 0.5em 0.5em !default;
407
359
  }
408
360
 
409
361
  &__event {
410
- background-color: var(
411
- --#{$prefix}datepicker-event-background-color,
412
- $datepicker-event-background-color
413
- );
362
+ background-color: h.useVar("datepicker-event-background-color");
414
363
 
415
364
  // color variants
416
- @each $name, $pair in $colors {
417
- $color: list.nth($pair, 1);
365
+ @each $name, $pair in vars.$colors {
418
366
  &--#{$name} {
419
- background-color: $color;
420
- background-color: var(--#{$prefix}variant-#{$name}, $color);
367
+ @include h.defineVar(
368
+ "datepicker-event-background-color",
369
+ h.useVar($name)
370
+ );
421
371
  }
422
372
  }
423
373
 
424
374
  &--dots {
425
375
  border-radius: 50%;
426
- margin: var(
427
- --#{$prefix}datepicker-event-dots-margin,
428
- $datepicker-event-dots-margin
429
- );
430
- height: var(
431
- --#{$prefix}datepicker-event-dots-size,
432
- $datepicker-event-dots-size
433
- );
434
- width: var(
435
- --#{$prefix}datepicker-event-dots-size,
436
- $datepicker-event-dots-size
437
- );
376
+ margin: h.useVar("datepicker-event-dots-margin");
377
+ height: h.useVar("datepicker-event-dots-size");
378
+ width: h.useVar("datepicker-event-dots-size");
438
379
  }
439
380
 
440
381
  &--bars {
441
- height: var(
442
- --#{$prefix}datepicker-event-bars-height,
443
- $datepicker-event-bars-height
444
- );
382
+ height: h.useVar("datepicker-event-bars-height");
445
383
  width: 100%;
446
384
  }
447
385
  }
package/dist/scss/components/_datetimepicker.scss CHANGED
@@ -1,13 +1,19 @@
1
+ @use "../utils/helpers" as h;
2
+
1
3
  /* @docs */
2
4
  /* @docs */
3
5
 
4
6
  .o-datetimepicker {
5
7
  &__time {
8
+ width: 100%;
6
9
  display: flex;
7
10
  justify-content: center;
8
11
  align-items: center;
9
12
 
10
- // override time dropdown shadow
11
- --#{$prefix}dropdown-menu-box-shadow: 0, 0, 0, 0;
13
+ .o-dropdown {
14
+ // override time dropdown variables
15
+ @include h.defineVar("dropdown-menu-box-shadow", #{0, 0, 0, 0});
16
+ @include h.defineVar("dropdown-menu-border-width", #{0});
17
+ }
12
18
  }
13
19
  }