@ardium-ui/ui 5.0.0-alpha.22 → 5.0.0-alpha.24

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 (50) hide show
  1. package/package.json +1 -1
  2. package/prebuilt-themes/default/buttons/button.css +46 -20
  3. package/prebuilt-themes/default/buttons/button.css.map +1 -1
  4. package/prebuilt-themes/default/buttons/fab.css +38 -18
  5. package/prebuilt-themes/default/buttons/fab.css.map +1 -1
  6. package/prebuilt-themes/default/buttons/icon-button.css +33 -14
  7. package/prebuilt-themes/default/buttons/icon-button.css.map +1 -1
  8. package/prebuilt-themes/default/chips.css +1 -1
  9. package/prebuilt-themes/default/color-display.css +1 -1
  10. package/prebuilt-themes/default/core.css +3 -0
  11. package/prebuilt-themes/default/core.css.map +1 -1
  12. package/prebuilt-themes/default/form-field-frame.css +1 -1
  13. package/prebuilt-themes/default/inputs/autocomplete-input.css +1 -1
  14. package/prebuilt-themes/default/inputs/color-input.css +2 -2
  15. package/prebuilt-themes/default/inputs/date-input.css +1 -1
  16. package/prebuilt-themes/default/inputs/digit-input.css +1 -1
  17. package/prebuilt-themes/default/inputs/file-input.css +1 -1
  18. package/prebuilt-themes/default/inputs/hex-input.css +3 -3
  19. package/prebuilt-themes/default/inputs/input.css +1 -1
  20. package/prebuilt-themes/default/inputs/number-input.css +1 -1
  21. package/prebuilt-themes/default/inputs/password-input.css +1 -1
  22. package/prebuilt-themes/default/inputs/search-bar.css +1 -1
  23. package/prebuilt-themes/default/kbd-shortcut.css +1 -1
  24. package/prebuilt-themes/default/kbd.css +1 -1
  25. package/prebuilt-themes/default/segment.css +1 -1
  26. package/prebuilt-themes/default/select.css +78 -38
  27. package/prebuilt-themes/default/select.css.map +1 -1
  28. package/prebuilt-themes/default/statebox.css +1 -1
  29. package/prebuilt-themes/default/tabber.css +1 -1
  30. package/themes/default/buttons/_button-mixins.scss +29 -16
  31. package/themes/default/buttons/button.scss +41 -11
  32. package/themes/default/buttons/fab.scss +36 -9
  33. package/themes/default/buttons/icon-button.scss +31 -5
  34. package/themes/default/chips.scss +1 -1
  35. package/themes/default/color-display.scss +1 -1
  36. package/themes/default/core.scss +5 -0
  37. package/themes/default/form-field-frame.scss +1 -1
  38. package/themes/default/inputs/_shared.scss +1 -1
  39. package/themes/default/inputs/color-input.scss +1 -1
  40. package/themes/default/inputs/digit-input.scss +1 -1
  41. package/themes/default/inputs/hex-input.scss +2 -2
  42. package/themes/default/kbd-shortcut.scss +1 -1
  43. package/themes/default/kbd.scss +1 -1
  44. package/themes/default/segment.scss +1 -1
  45. package/themes/default/select.scss +84 -40
  46. package/themes/default/statebox.scss +1 -1
  47. package/themes/default/tabber.scss +1 -1
  48. package/prebuilt-themes/default/calendar-OLD.css +0 -294
  49. package/prebuilt-themes/default/calendar-OLD.css.map +0 -1
  50. package/themes/default/calendar-OLD.scss +0 -183
@@ -13,7 +13,7 @@
13
13
 
14
14
  .ard-input-container {
15
15
  input {
16
- font-family: monospace;
16
+ font-family: var(--ard-font-family-mono);
17
17
  }
18
18
  }
19
19
 
@@ -22,6 +22,6 @@
22
22
  color: ARD.$text3;
23
23
  opacity: 70%;
24
24
  user-select: none;
25
- font-family: monospace;
25
+ font-family: var(--ard-font-family-mono);
26
26
  }
27
27
  }
@@ -1,7 +1,7 @@
1
1
  @use '../variables' as ARD;
2
2
 
3
3
  .ard-kbd-shortcut {
4
- font-family: monospace;
4
+ font-family: var(--ard-font-family-mono);
5
5
  color: ARD.$text2;
6
6
 
7
7
  > span {
@@ -2,7 +2,7 @@
2
2
 
3
3
  .ard-kbd {
4
4
  border-radius: 0.2em;
5
- font-family: monospace;
5
+ font-family: var(--ard-font-family-mono);
6
6
  font-size: 0.9em;
7
7
  margin: 0 0.125em;
8
8
  color: ARD.$text2;
@@ -6,7 +6,7 @@
6
6
  @include coloringMixins.typeColors();
7
7
  --ard-_segment-padding: 0.15rem;
8
8
  padding: var(--ard-_segment-padding);
9
- font-family: 'Roboto', sans-serif;
9
+ font-family: var(--ard-font-family);
10
10
  margin: 2px;
11
11
  border: 1px solid transparent;
12
12
  font-weight: 500;
@@ -2,32 +2,73 @@
2
2
  @use './mixins' as defaultMixins;
3
3
  @use '../variables' as ARD;
4
4
 
5
+ :root {
6
+ --ard-select-height: var(--ard-form-field-height, 2.3125rem);
7
+ --ard-select-height-compact: var(--ard-form-field-height-compact, 1.6875rem);
8
+ --ard-select-gap: 0.625rem;
9
+ --ard-select-gap-compact: 0.5rem;
10
+ --ard-select-controls-gap: 0.625rem;
11
+ --ard-select-controls-gap-compact: 0.5rem;
12
+ --ard-select-padding: 0 1em 0 0.375em;
13
+ --ard-select-padding-compact: 0 0.625em 0 0.375em;
14
+
15
+ --ard-select-font-size: var(--ard-form-field-font-size, 1rem);
16
+ --ard-select-font-size-compact: var(--ard-form-field-font-size-compact, 0.875rem);
17
+ --ard-select-text-color: var(--ard-text, rgba(0, 0, 0, 100%));
18
+ --ard-select-placeholder-color: var(--ard-text3, rgba(0, 0, 0, 75%));
19
+ --ard-select-search-min-width: 10ch;
20
+ --ard-select-dropdown-arrow-color: var(--ard-detail, rgba(0, 0, 0, 60%));
21
+
22
+ --ard-select-multiselect-padding: 0.25em 0;
23
+ --ard-select-multiselect-chip-gap: 0.375rem;
24
+
25
+ --ard-select-dropdown-width: max-content;
26
+ --ard-select-dropdown-max-width: max(25em, 100%);
27
+ --ard-select-dropdown-min-width: 100%;
28
+ --ard-select-dropdown-max-height: 15em;
29
+ --ard-select-dropdown-font-size: var(--ard-select-font-size, var(--ard-form-field-font-size, 1rem));
30
+ --ard-select-dropdown-font-size-compact: var(--ard-select-font-size-compact, var(--ard-form-field-font-size-compact, 0.875rem));
31
+ --ard-select-dropdown-padding: 0.375em 0.625em;
32
+ --ard-select-dropdown-gap: 0;
33
+
34
+ --ard-select-dropdown-optgroup-label-font-size: 0.875em;
35
+ --ard-select-dropdown-optgroup-label-font-weight: 600;
36
+ --ard-select-dropdown-optgroup-label-letter-spacing: 0.25px;
37
+ --ard-select-dropdown-optgroup-label-padding: 0.375em 0.625em 0.0625em 0.625em;
38
+
39
+ --ard-select-dropdown-option-padding: 0.375em 0.625em;
40
+ --ard-select-dropdown-option-text-color: var(--ard-text2, rgba(0, 0, 0, 87%));
41
+ --ard-select-dropdown-option-highlight-bg: var(--ard-darken-overlay-light, rgba(0, 0, 0, 5%));
42
+ --ard-select-dropdown-option-selected-font-weight: 500;
43
+ --ard-select-dropdown-option-selected-bg: var(--ard-darken-overlay-medium, rgba(0, 0, 0, 10%));
44
+ --ard-select-dropdown-option-disabled-opacity: 50%;
45
+
46
+ --ard-select-dropdown-add-custom-gap: 0.375rem;
47
+ --ard-select-dropdown-add-custom-label-font-size: 85%;
48
+ }
49
+
5
50
  .ard-select {
6
51
  box-sizing: border-box;
7
52
  width: 100%;
8
- min-height: 100%;
53
+ min-height: var(--ard-select-height, var(--ard-form-field-height, 2.3125rem));
9
54
  display: grid;
10
55
  align-items: center;
11
56
  grid-template-columns: 1fr max-content;
12
- gap: 0.625em;
13
- padding: 0 1em 0 0.375em;
14
- font-family: 'Roboto', sans-serif;
15
- font-size: 1rem;
57
+ gap: var(--ard-select-gap, 0.625rem);
58
+ padding: var(--ard-select-padding, 0 1em 0 0.375em);
59
+ font-family: var(--ard-font-family);
60
+ font-size: var(--ard-select-font-size, 1rem);
61
+ color: var(--ard-select-text-color, var(--ard-text, rgba(0, 0, 0, 100%)));
16
62
 
17
63
  @include CB.clearButton();
18
64
 
19
- //! variants
20
- &.ard-variant-pill {
21
- padding-left: 0.8125em;
22
- }
23
-
24
65
  //! value container
25
66
  .ard-select-value-container {
26
67
  position: relative;
27
68
  height: 2em;
28
69
  display: flex;
29
70
  align-items: center;
30
- font-size: 1em;
71
+ font-size: var(--ard-select-font-size, 1rem);
31
72
  text-size-adjust: 100%;
32
73
  flex-grow: 1;
33
74
  overflow: hidden;
@@ -35,7 +76,7 @@
35
76
  .ard-placeholder {
36
77
  font: inherit;
37
78
  position: absolute;
38
- color: ARD.$text3;
79
+ color: var(--ard-select-placeholder-color, rgba(0, 0, 0, 75%));
39
80
  white-space: nowrap;
40
81
  overflow: hidden;
41
82
  text-overflow: ellipsis;
@@ -63,7 +104,7 @@
63
104
  .ard-select-controls {
64
105
  display: flex;
65
106
  align-items: center;
66
- gap: 0.625em;
107
+ gap: var(--ard-select-controls-gap, 0.625rem);
67
108
  width: max-content;
68
109
  }
69
110
  //! single/multiselect
@@ -96,10 +137,10 @@
96
137
  .ard-select-value-container {
97
138
  height: max-content;
98
139
  min-height: 1.5625em;
99
- padding: 0.25em 0;
140
+ padding: var(--ard-select-multiselect-padding, 0.25em 0);
100
141
  box-sizing: border-box;
101
142
  flex-wrap: wrap;
102
- gap: 0.375em;
143
+ gap: var(--ard-select-multiselect-chip-gap, 0.375rem);
103
144
  justify-content: stretch;
104
145
 
105
146
  .ard-chip-wrapper {
@@ -109,10 +150,10 @@
109
150
  .ard-search-input {
110
151
  flex-grow: 1;
111
152
  width: unset !important;
112
- min-width: 10ch;
153
+ min-width: var(--ard-select-search-min-width, 10ch);
113
154
 
114
155
  input {
115
- width: 10ch !important;
156
+ width: var(--ard-select-search-min-width, 10ch) !important;
116
157
  }
117
158
  }
118
159
  .ard-chip-wrapper {
@@ -132,8 +173,8 @@
132
173
  .ard-dropdown-arrow {
133
174
  border: calc(ARD.$dropdown-button-size / 2) solid transparent;
134
175
  position: relative;
135
- border-bottom-color: ARD.$detail;
136
- border-right-color: ARD.$detail;
176
+ border-bottom-color: var(--ard-select-dropdown-arrow-color, ARD.$detail);
177
+ border-right-color: var(--ard-select-dropdown-arrow-color, ARD.$detail);
137
178
  transform: rotate(45deg) translate(-17.67771%, -17.67771%);
138
179
  }
139
180
  }
@@ -143,10 +184,13 @@
143
184
 
144
185
  //! compact
145
186
  &.ard-compact {
146
- font-size: 0.85rem;
147
- height: 1.5625rem;
148
- padding-right: 0.625em;
187
+ font-size: var(--ard-select-font-size-compact, 0.875rem);
188
+ height: var(--ard-select-height-compact, var(--ard-form-field-height-compact, 1.6875rem));
189
+ padding: var(--ard-select-padding-compact, 0 0.625em 0 0.375em);
149
190
 
191
+ .ard-select-controls {
192
+ gap: var(--ard-select-controls-gap-compact, 0.5rem);
193
+ }
150
194
  .ard-dropdown-arrow-wrapper .ard-dropdown-arrow {
151
195
  border-width: calc(ARD.$dropdown-button-size / 2.4);
152
196
  }
@@ -156,14 +200,14 @@
156
200
  //! optgroups & options, divider
157
201
  .ard-select-dropdown-panel {
158
202
  right: 0;
159
- width: max-content;
160
- max-width: max(25em, 100%);
161
- min-width: 100%;
162
- font-size: 1rem;
203
+ width: var(--ard-select-dropdown-width, max-content);
204
+ max-width: var(--ard-select-dropdown-max-width, max(25em, 100%));
205
+ min-width: var(--ard-select-dropdown-min-width, 100%);
206
+ font-size: var(--ard-select-dropdown-font-size, var(--ard-form-field-font-size, 1rem));
163
207
 
164
208
  .ard-dropdown-panel-content {
165
- padding: 0.375em 0;
166
- max-height: 15em;
209
+ padding: var(--ard-select-dropdown-padding, 0.375em 0.625em);
210
+ max-height: var(--ard-select-dropdown-max-height, 15em);
167
211
  overflow: hidden auto;
168
212
  }
169
213
  .ard-optgroup {
@@ -176,29 +220,29 @@
176
220
  }
177
221
 
178
222
  .ard-optgroup-label {
179
- font-size: 0.875em;
180
- font-weight: 600;
223
+ font-size: var(--ard-select-dropdown-optgroup-label-font-size, 0.875em);
224
+ font-weight: var(--ard-select-dropdown-optgroup-label-font-weight, 600);
181
225
  letter-spacing: 0.25px;
182
- padding: 0.375em 0.625em 0.0625em 0.625em;
226
+ padding: var(--ard-select-dropdown-optgroup-label-padding, 0.375em 0.625em 0.0625em 0.625em);
183
227
  }
184
228
 
185
229
  .ard-option {
186
- padding: 0.375em 0.625em;
187
- color: ARD.$text2;
230
+ padding: var(--ard-select-dropdown-option-padding, 0.375em 0.625em);
231
+ color: var(--ard-select-dropdown-option-text-color, var(--ard-text2, rgba(0, 0, 0, 87%)));
188
232
  cursor: pointer;
189
233
 
190
234
  &.ard-option-highlighted {
191
- background: ARD.$darken-overlay-light;
235
+ background: var(--ard-select-dropdown-option-highlight-bg, ARD.$darken-overlay-light);
192
236
  }
193
237
 
194
238
  &.ard-option-selected {
195
- font-weight: 500;
196
- background: ARD.$darken-overlay-medium;
239
+ font-weight: var(--ard-select-dropdown-option-selected-font-weight, 500);
240
+ background: var(--ard-select-dropdown-option-selected-bg, ARD.$darken-overlay-medium);
197
241
  }
198
242
 
199
243
  &.ard-option-disabled {
200
244
  pointer-events: none;
201
- opacity: 50%;
245
+ opacity: var(--ard-select-dropdown-option-disabled-opacity, 50%);
202
246
  }
203
247
  }
204
248
  //divider
@@ -216,16 +260,16 @@
216
260
  .ard-add-custom {
217
261
  display: flex;
218
262
  align-items: flex-end;
219
- gap: 0.375rem;
263
+ gap: var(--ard-select-dropdown-add-custom-gap, 0.375rem);
220
264
 
221
265
  .ard-add-custom-label {
222
- font-size: 85%;
266
+ font-size: var(--ard-select-dropdown-add-custom-label-font-size, 85%);
223
267
  }
224
268
  }
225
269
 
226
270
  //! compact
227
271
  > .ard-compact {
228
- font-size: 0.85rem;
272
+ font-size: var(--ard-select-dropdown-font-size-compact, 0.85rem);
229
273
  }
230
274
  }
231
275
 
@@ -82,7 +82,7 @@
82
82
  left: 50%;
83
83
  top: 50%;
84
84
  transform: translate(-50%, -50%);
85
- font-family: 'Roboto', sans-serif;
85
+ font-family: var(--ard-font-family);
86
86
  }
87
87
  &.ard-color-custom {
88
88
  color: var(--ard-custom-color);
@@ -13,7 +13,7 @@ ard-tabber {
13
13
  display: flex;
14
14
  flex-direction: column;
15
15
  align-items: stretch;
16
- font-family: 'Roboto', sans-serif;
16
+ font-family: var(--ard-font-family);
17
17
 
18
18
  .ard-tabber-tabs {
19
19
  max-width: 100%;
@@ -1,294 +0,0 @@
1
- .ard-calendar {
2
- width: 18.5rem;
3
- background: var(--ard-bg);
4
- user-select: none;
5
- }
6
- .ard-calendar.ard-color-none {
7
- --ard-cmpcl--bg: var(--ard-bg);
8
- --ard-cmpcl--bg-colored: var(--ard-bg-alt);
9
- --ard-cmpcl--bg-colored-light: var(--ard-detail-light);
10
- --ard-cmpcl--bg-header: var(--ard-bg-filled);
11
- --ard-cmpcl--bg-colored-verylight: var(--ard-bg-darker);
12
- --ard-cmpcl--on-bg: var(--ard-text);
13
- --ard-cmpcl--on-bg-colored: var(--ard-text-alt);
14
- --ard-cmpcl--border: var(--ard-text);
15
- --ard-cmpcl--border-light: var(--ard-text2);
16
- --ard-cmpcl--content: var(--ard-text);
17
- --ard-cmpcl--content-light: var(--ard-text-alt);
18
- --ard-cmpcl--overlay-rgb: var(--ard-overlay-rgb);
19
- --ard-cmpcl--overlay: var(--ard-overlay);
20
- --ard-cmpcl--overlay-colored: var(--ard-overlay);
21
- --ard-cmpcl--overlay-colored-light: var(--ard-text-alt);
22
- }
23
- .ard-calendar.ard-color-primary {
24
- --ard-cmpcl--bg: rgb(var(--ard-primary-500));
25
- --ard-cmpcl--bg-colored: rgb(var(--ard-primary-500));
26
- --ard-cmpcl--bg-colored-light: rgb(var(--ard-primary-100));
27
- --ard-cmpcl--bg-header: rgb(var(--ard-primary-100));
28
- --ard-cmpcl--bg-colored-verylight: rgb(var(--ard-primary-50));
29
- --ard-cmpcl--on-bg: var(--ard-text-alt);
30
- --ard-cmpcl--on-bg-colored: var(--ard-text-alt);
31
- --ard-cmpcl--border: rgb(var(--ard-primary-300));
32
- --ard-cmpcl--border-light: rgb(var(--ard-primary-100));
33
- --ard-cmpcl--content: rgb(var(--ard-primary-700));
34
- --ard-cmpcl--content-light: rgb(var(--ard-primary-300));
35
- --ard-cmpcl--overlay-rgb: var(--ard-primary-500);
36
- --ard-cmpcl--overlay: var(--ard-overlay);
37
- --ard-cmpcl--overlay-colored: rgb(var(--ard-primary-700));
38
- --ard-cmpcl--overlay-colored-light: rgb(var(--ard-primary-100));
39
- }
40
- .ard-calendar.ard-color-secondary {
41
- --ard-cmpcl--bg: rgb(var(--ard-secondary-500));
42
- --ard-cmpcl--bg-colored: rgb(var(--ard-secondary-500));
43
- --ard-cmpcl--bg-colored-light: rgb(var(--ard-secondary-50));
44
- --ard-cmpcl--bg-header: rgb(var(--ard-secondary-50));
45
- --ard-cmpcl--bg-colored-verylight: rgb(var(--ard-secondary-50));
46
- --ard-cmpcl--on-bg: var(--ard-text-alt);
47
- --ard-cmpcl--on-bg-colored: var(--ard-text-alt);
48
- --ard-cmpcl--border: rgb(var(--ard-secondary-300));
49
- --ard-cmpcl--border-light: rgb(var(--ard-secondary-100));
50
- --ard-cmpcl--content: rgb(var(--ard-secondary-700));
51
- --ard-cmpcl--content-light: rgb(var(--ard-secondary-300));
52
- --ard-cmpcl--overlay-rgb: var(--ard-secondary-500);
53
- --ard-cmpcl--overlay: var(--ard-overlay);
54
- --ard-cmpcl--overlay-colored: rgb(var(--ard-secondary-700));
55
- --ard-cmpcl--overlay-colored-light: rgb(var(--ard-secondary-100));
56
- }
57
- .ard-calendar.ard-color-warn {
58
- --ard-cmpcl--bg: rgb(var(--ard-warn-500));
59
- --ard-cmpcl--bg-colored: rgb(var(--ard-warn-500));
60
- --ard-cmpcl--bg-colored-light: rgb(var(--ard-warn-50));
61
- --ard-cmpcl--bg-header: rgb(var(--ard-warn-50));
62
- --ard-cmpcl--bg-colored-verylight: rgb(var(--ard-warn-50));
63
- --ard-cmpcl--on-bg: var(--ard-text-alt);
64
- --ard-cmpcl--on-bg-colored: var(--ard-text-alt);
65
- --ard-cmpcl--border: rgb(var(--ard-warn-300));
66
- --ard-cmpcl--border-light: rgb(var(--ard-warn-100));
67
- --ard-cmpcl--content: rgb(var(--ard-warn-700));
68
- --ard-cmpcl--content-light: rgb(var(--ard-warn-100));
69
- --ard-cmpcl--overlay-rgb: var(--ard-warn-500);
70
- --ard-cmpcl--overlay: var(--ard-overlay);
71
- --ard-cmpcl--overlay-colored: rgb(var(--ard-warn-700));
72
- --ard-cmpcl--overlay-colored-light: rgb(var(--ard-warn-100));
73
- }
74
- .ard-calendar.ard-color-danger {
75
- --ard-cmpcl--bg: rgb(var(--ard-danger-700));
76
- --ard-cmpcl--bg-colored: rgb(var(--ard-danger-700));
77
- --ard-cmpcl--bg-colored-light: rgb(var(--ard-danger-100));
78
- --ard-cmpcl--bg-header: rgb(var(--ard-danger-100));
79
- --ard-cmpcl--bg-colored-verylight: rgb(var(--ard-danger-50));
80
- --ard-cmpcl--on-bg: var(--ard-text-alt);
81
- --ard-cmpcl--on-bg-colored: var(--ard-text-alt);
82
- --ard-cmpcl--border: rgb(var(--ard-danger-300));
83
- --ard-cmpcl--border-light: rgb(var(--ard-danger-100));
84
- --ard-cmpcl--content: rgb(var(--ard-danger-900));
85
- --ard-cmpcl--content-light: rgb(var(--ard-danger-500));
86
- --ard-cmpcl--overlay-rgb: var(--ard-danger-700);
87
- --ard-cmpcl--overlay: var(--ard-overlay);
88
- --ard-cmpcl--overlay-colored: rgb(var(--ard-danger-700));
89
- --ard-cmpcl--overlay-colored-light: rgb(var(--ard-danger-300));
90
- }
91
- .ard-calendar.ard-color-success {
92
- --ard-cmpcl--bg: rgb(var(--ard-success-700));
93
- --ard-cmpcl--bg-colored: rgb(var(--ard-success-700));
94
- --ard-cmpcl--bg-colored-light: rgb(var(--ard-success-50));
95
- --ard-cmpcl--bg-header: rgb(var(--ard-success-50));
96
- --ard-cmpcl--bg-colored-verylight: rgb(var(--ard-success-50));
97
- --ard-cmpcl--on-bg: var(--ard-text-alt);
98
- --ard-cmpcl--on-bg-colored: var(--ard-text-alt);
99
- --ard-cmpcl--border: rgb(var(--ard-success-300));
100
- --ard-cmpcl--border-light: rgb(var(--ard-success-100));
101
- --ard-cmpcl--content: rgb(var(--ard-success-900));
102
- --ard-cmpcl--content-light: rgb(var(--ard-success-300));
103
- --ard-cmpcl--overlay-rgb: var(--ard-success-700);
104
- --ard-cmpcl--overlay: var(--ard-overlay);
105
- --ard-cmpcl--overlay-colored: rgb(var(--ard-success-700));
106
- --ard-cmpcl--overlay-colored-light: rgb(var(--ard-success-300));
107
- }
108
- .ard-calendar.ard-color-info {
109
- --ard-cmpcl--bg: rgb(var(--ard-info-500));
110
- --ard-cmpcl--bg-colored: rgb(var(--ard-info-500));
111
- --ard-cmpcl--bg-colored-light: rgb(var(--ard-info-50));
112
- --ard-cmpcl--bg-header: rgb(var(--ard-info-50));
113
- --ard-cmpcl--bg-colored-verylight: rgb(var(--ard-info-50));
114
- --ard-cmpcl--on-bg: var(--ard-text-alt);
115
- --ard-cmpcl--on-bg-colored: var(--ard-text-alt);
116
- --ard-cmpcl--border: rgb(var(--ard-info-300));
117
- --ard-cmpcl--border-light: rgb(var(--ard-info-100));
118
- --ard-cmpcl--content: rgb(var(--ard-info-700));
119
- --ard-cmpcl--content-light: rgb(var(--ard-info-300));
120
- --ard-cmpcl--overlay-rgb: var(--ard-info-500);
121
- --ard-cmpcl--overlay: var(--ard-overlay);
122
- --ard-cmpcl--overlay-colored: rgb(var(--ard-info-700));
123
- --ard-cmpcl--overlay-colored-light: rgb(var(--ard-info-100));
124
- }
125
- .ard-calendar.ard-color-currentColor {
126
- --ard-cmpcl--bg: var(--ard-bg);
127
- --ard-cmpcl--bg-colored: currentColor;
128
- --ard-cmpcl--on-bg: currentColor;
129
- --ard-cmpcl--on-bg-colored: var(--ard-text-alt);
130
- --ard-cmpcl--border: currentColor;
131
- --ard-cmpcl--border-light: currentColor;
132
- --ard-cmpcl--content: currentColor;
133
- --ard-cmpcl--content-light: currentColor;
134
- --ard-cmpcl--overlay-rgb: var(--ard-overlay-rgb);
135
- --ard-cmpcl--overlay: var(--ard-overlay);
136
- --ard-cmpcl--overlay-colored: currentColor;
137
- --ard-cmpcl--overlay-colored-light: currentColor;
138
- }
139
- .ard-calendar .ard-calendar-header-container {
140
- display: flex;
141
- align-items: center;
142
- justify-content: stretch;
143
- }
144
- .ard-calendar .ard-calendar-header-container .ard-calendar-days-view-header {
145
- width: 100%;
146
- display: flex;
147
- justify-content: space-between;
148
- }
149
- .ard-calendar .ard-calendar-header-container .ard-calendar-days-view-header .ard-calendar-header-button .ard-button-content {
150
- display: flex;
151
- gap: 0.375rem;
152
- align-items: center;
153
- }
154
- .ard-calendar .ard-calendar-header-container .ard-calendar-days-view-header .ard-calendar-header-button .ard-button-content .ard-dropdown-arrow {
155
- width: var(--ard-dropdown-button-size);
156
- height: var(--ard-dropdown-button-size);
157
- border: calc(var(--ard-dropdown-button-size) / 2) solid transparent;
158
- position: relative;
159
- border-bottom-color: var(--ard-detail);
160
- border-right-color: var(--ard-detail);
161
- transform: rotate(45deg) translate(-17.67771%, -17.67771%);
162
- box-sizing: border-box;
163
- }
164
- .ard-calendar .ard-calendar-header-container .ard-calendar-days-view-header .ard-calendar-arrows {
165
- display: flex;
166
- gap: 0.375rem;
167
- }
168
- .ard-calendar .ard-calendar-header-container .ard-calendar-days-view-header .ard-calendar-arrows > ard-fab {
169
- margin: 0;
170
- }
171
- .ard-calendar .ard-calendar-main-container {
172
- padding: 0.375rem;
173
- padding-top: 0;
174
- }
175
- .ard-calendar .ard-calendar-entry {
176
- z-index: 1;
177
- cursor: pointer;
178
- outline: none;
179
- }
180
- .ard-calendar .ard-calendar-entry .ard-calendar-entry-button {
181
- background: transparent;
182
- border: 1px solid transparent;
183
- width: calc(100% - 0.25rem);
184
- height: calc(100% - 0.25rem);
185
- padding: 0;
186
- position: relative;
187
- border-radius: 9999px;
188
- cursor: pointer;
189
- margin: 0.125rem;
190
- }
191
- .ard-calendar .ard-calendar-entry .ard-calendar-entry-button .ard-focus-overlay {
192
- position: absolute;
193
- top: -0;
194
- bottom: -0;
195
- left: -0;
196
- right: -0;
197
- opacity: 0;
198
- border-radius: inherit;
199
- pointer-events: none;
200
- transition: opacity 0.2s ease;
201
- z-index: -1;
202
- background: var(--ard-cmpcl--bg-colored);
203
- border: 2px solid transparent;
204
- transition: border-color 0.2s ease, opacity 0.2s ease;
205
- }
206
- .ard-calendar .ard-calendar-entry.ard-calendar-entry-empty {
207
- cursor: default;
208
- pointer-events: none;
209
- }
210
- .ard-calendar .ard-calendar-entry.ard-calendar-today .ard-calendar-entry-button {
211
- border-color: var(--ard-detail);
212
- }
213
- .ard-calendar .ard-calendar-entry.ard-calendar-entry-highlighted .ard-focus-overlay {
214
- opacity: 20%;
215
- }
216
- .ard-calendar .ard-calendar-entry.ard-calendar-entry-selected .ard-calendar-entry-button {
217
- color: var(--ard-cmpcl--on-bg-colored);
218
- }
219
- .ard-calendar .ard-calendar-entry.ard-calendar-entry-selected .ard-focus-overlay {
220
- opacity: 100%;
221
- }
222
- .ard-calendar .ard-calendar-entry.ard-calendar-entry-selected.ard-calendar-today .ard-focus-overlay {
223
- border-color: var(--ard-bg);
224
- }
225
- .ard-calendar .ard-calendar-grid {
226
- display: grid;
227
- grid-template-columns: repeat(7, 1fr);
228
- }
229
- .ard-calendar .ard-calendar-grid > * {
230
- max-width: 100%;
231
- box-sizing: border-box;
232
- aspect-ratio: 1;
233
- }
234
- .ard-calendar .ard-calendar-day-labels {
235
- font-size: 0.8125rem;
236
- color: var(--ard-text3);
237
- height: 1.25rem;
238
- position: relative;
239
- }
240
- .ard-calendar .ard-calendar-day-labels > * {
241
- display: flex;
242
- align-items: center;
243
- justify-content: center;
244
- aspect-ratio: unset;
245
- }
246
- .ard-calendar .ard-calendar-day-labels::after {
247
- content: "";
248
- position: absolute;
249
- width: 100%;
250
- height: 1px;
251
- background: var(--ard-detail-ultralight);
252
- bottom: 0;
253
- }
254
- .ard-calendar .ard-calendar-main-grid {
255
- position: relative;
256
- }
257
- .ard-calendar .ard-calendar-main-grid.ard-reserve-top-row {
258
- padding-top: 100%/7;
259
- }
260
- .ard-calendar .ard-calendar-main-grid .ard-calendar-floating-month {
261
- position: absolute;
262
- top: 0;
263
- left: 0;
264
- width: 100%;
265
- box-sizing: border-box;
266
- aspect-ratio: 7;
267
- padding-left: 0.5rem;
268
- display: flex;
269
- align-items: center;
270
- font-size: 0.875rem;
271
- font-weight: 500;
272
- color: var(--ard-text3);
273
- letter-spacing: 0.5px;
274
- }
275
- .ard-calendar .ard-calendar-simple-grid {
276
- border-top: 1px solid var(--ard-detail-ultralight);
277
- margin-top: 0.25rem;
278
- display: grid;
279
- grid-template-columns: repeat(4, 1fr);
280
- grid-template-rows: repeat(6, 1fr);
281
- }
282
- .ard-calendar .ard-calendar-simple-grid > * {
283
- max-width: 100%;
284
- box-sizing: border-box;
285
- aspect-ratio: 7/4;
286
- }
287
- .ard-calendar.ard-calendar-nointeract .ard-calendar-main-container {
288
- pointer-events: none;
289
- }
290
- .ard-calendar.ard-calendar-static-height {
291
- height: 19.5rem;
292
- }
293
-
294
- /*# sourceMappingURL=calendar-OLD.css.map */
@@ -1 +0,0 @@
1
- {"version":3,"sourceRoot":"","sources":["../../../../projects/ui/src/themes/default/calendar-OLD.scss","../../../../projects/ui/src/themes/_variables.scss","../../../../projects/ui/src/themes/default/_coloring.scss","../../../../projects/ui/src/themes/default/_dropdown-arrow.scss","../../../../projects/ui/src/themes/default/_mixins.scss"],"names":[],"mappings":"AAKA;EAEE;EACA,YCRG;EDSH;;AENA;EACE;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;;AAEF;EACE;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;;AAEF;EACE;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;;AAEF;EACE;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;;AAEF;EACE;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;;AAEF;EACE;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;;AAEF;EACE;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;;AAEF;EACE;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;;AF3HF;EACE;EACA;EACA;;AAEA;EACE;EACA;EACA;;AAEA;EACE;EACA;EACA;;AAEA;EGvBN,OFqCqB;EEpCrB,QFoCqB;EEnCrB;EACA;EACA,qBFSO;EERP,oBFQO;EEPP;EACA;;AHoBI;EACE;EACA;;AAEA;EACE;;AAMR;EACE;EACA;;AAGF;EACE;EACA;EACA;;AAEA;EAEE;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA,QATU;;AAWV;EIlDJ;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EAEA;EJ2CM;EACA;EACA;EACA,YACE;;AAIN;EACE;EACA;;AAGA;EACE,cC/DC;;ADmEH;EACE;;AAIF;EACE;;AAEF;EACE;;AAIA;EACE,cCjGL;;ADuGH;EACE;EACA;;AAEA;EACE;EACA;EACA;;AAGJ;EACE;EACA,OC1GI;ED2GJ;EACA;;AAEA;EACE;EACA;EACA;EACA;;AAEF;EACE;EACA;EACA;EACA;EACA,YChHc;EDiHd;;AAGJ;EACE;;AAEA;EACE;;AAEF;EACE;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA,OC/IE;EDgJF;;AAIJ;EACE;EACA;EACA;EACA;EACA;;AAEA;EACE;EACA;EACA;;AAOF;EACE;;AAIJ;EACE","file":"calendar-OLD.css"}