@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.
- package/package.json +1 -1
- package/prebuilt-themes/default/buttons/button.css +46 -20
- package/prebuilt-themes/default/buttons/button.css.map +1 -1
- package/prebuilt-themes/default/buttons/fab.css +38 -18
- package/prebuilt-themes/default/buttons/fab.css.map +1 -1
- package/prebuilt-themes/default/buttons/icon-button.css +33 -14
- package/prebuilt-themes/default/buttons/icon-button.css.map +1 -1
- package/prebuilt-themes/default/chips.css +1 -1
- package/prebuilt-themes/default/color-display.css +1 -1
- package/prebuilt-themes/default/core.css +3 -0
- package/prebuilt-themes/default/core.css.map +1 -1
- package/prebuilt-themes/default/form-field-frame.css +1 -1
- package/prebuilt-themes/default/inputs/autocomplete-input.css +1 -1
- package/prebuilt-themes/default/inputs/color-input.css +2 -2
- package/prebuilt-themes/default/inputs/date-input.css +1 -1
- package/prebuilt-themes/default/inputs/digit-input.css +1 -1
- package/prebuilt-themes/default/inputs/file-input.css +1 -1
- package/prebuilt-themes/default/inputs/hex-input.css +3 -3
- package/prebuilt-themes/default/inputs/input.css +1 -1
- package/prebuilt-themes/default/inputs/number-input.css +1 -1
- package/prebuilt-themes/default/inputs/password-input.css +1 -1
- package/prebuilt-themes/default/inputs/search-bar.css +1 -1
- package/prebuilt-themes/default/kbd-shortcut.css +1 -1
- package/prebuilt-themes/default/kbd.css +1 -1
- package/prebuilt-themes/default/segment.css +1 -1
- package/prebuilt-themes/default/select.css +78 -38
- package/prebuilt-themes/default/select.css.map +1 -1
- package/prebuilt-themes/default/statebox.css +1 -1
- package/prebuilt-themes/default/tabber.css +1 -1
- package/themes/default/buttons/_button-mixins.scss +29 -16
- package/themes/default/buttons/button.scss +41 -11
- package/themes/default/buttons/fab.scss +36 -9
- package/themes/default/buttons/icon-button.scss +31 -5
- package/themes/default/chips.scss +1 -1
- package/themes/default/color-display.scss +1 -1
- package/themes/default/core.scss +5 -0
- package/themes/default/form-field-frame.scss +1 -1
- package/themes/default/inputs/_shared.scss +1 -1
- package/themes/default/inputs/color-input.scss +1 -1
- package/themes/default/inputs/digit-input.scss +1 -1
- package/themes/default/inputs/hex-input.scss +2 -2
- package/themes/default/kbd-shortcut.scss +1 -1
- package/themes/default/kbd.scss +1 -1
- package/themes/default/segment.scss +1 -1
- package/themes/default/select.scss +84 -40
- package/themes/default/statebox.scss +1 -1
- package/themes/default/tabber.scss +1 -1
- package/prebuilt-themes/default/calendar-OLD.css +0 -294
- package/prebuilt-themes/default/calendar-OLD.css.map +0 -1
- 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:
|
|
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:
|
|
25
|
+
font-family: var(--ard-font-family-mono);
|
|
26
26
|
}
|
|
27
27
|
}
|
package/themes/default/kbd.scss
CHANGED
|
@@ -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:
|
|
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.
|
|
13
|
-
padding: 0 1em 0 0.375em;
|
|
14
|
-
font-family:
|
|
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:
|
|
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:
|
|
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.
|
|
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.
|
|
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.
|
|
147
|
-
height: 1.
|
|
148
|
-
padding
|
|
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:
|
|
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
|
|
|
@@ -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"}
|