@agnos-ui/core-bootstrap 0.9.0 → 0.9.2

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 (11) hide show
  1. package/css/agnosui.css +100 -83
  2. package/css/agnosui.css.map +1 -1
  3. package/css/slider.css +92 -72
  4. package/css/slider.css.map +1 -1
  5. package/css/tree.css +8 -11
  6. package/css/tree.css.map +1 -1
  7. package/package.json +2 -2
  8. package/scss/_variables.scss +15 -7
  9. package/scss/slider.scss +214 -190
  10. package/scss/tree.scss +10 -5
  11. package/scss/_functions.scss +0 -36
package/scss/slider.scss CHANGED
@@ -9,15 +9,17 @@
9
9
 
10
10
  --#{variables.$prefix}slider-secondary-size: #{$barSize};
11
11
 
12
- --#{variables.$prefix}slider-margin-block-start: calc((#{$handleSize} - #{$barSize}) / 2 + #{$fontSize} * 1.5 + #{$offset});
13
- --#{variables.$prefix}slider-margin-block-end: calc((#{$handleSize} - #{$barSize}) / 2 + #{$offset});
14
- --#{variables.$prefix}slider-vertical-margin-inline-start: calc((#{$handleSize} - #{$barSize}) / 2 + #{$offset});
15
- --#{variables.$prefix}slider-vertical-margin-inline-end: calc((#{$handleSize} - #{$barSize}) / 2 + #{$offset} + 3ch + #{$offset});
12
+ --#{variables.$prefix}slider-horizontal-margin-block-with-labels: calc((#{$handleSize} - #{$barSize}) / 2 + #{$fontSize} * 1.5 + #{$offset});
13
+ --#{variables.$prefix}slider-horizontal-margin-block-no-labels: calc((#{$handleSize} - #{$barSize}) * 0.75);
14
+ --#{variables.$prefix}slider-vertical-margin-inline-no-labels: calc((#{$handleSize} - #{$barSize}) * 0.75);
15
+ --#{variables.$prefix}slider-vertical-margin-inline-with-labels: calc((#{$handleSize} - #{$barSize}) / 2 + #{$offset} + 3ch + #{$offset});
16
16
 
17
17
  --#{variables.$prefix}slider-handle-size: #{$handleSize};
18
18
  --#{variables.$prefix}slider-tick-primary-size: #{$tickPrimarySize};
19
19
  --#{variables.$prefix}slider-tick-secondary-size: #{$tickSecondarySize};
20
20
 
21
+ --#{variables.$prefix}slider-padding: calc(#{$handleSize} / 2);
22
+
21
23
  --#{variables.$prefix}slider-label-margin-block-start: calc(-1 * (#{$fontSize} * 1.5 + (#{$handleSize} - #{$barSize}) / 2));
22
24
  --#{variables.$prefix}slider-tick-label-margin-block-start: calc(-1 * (#{$fontSize} * 1.5 + (#{$tickPrimarySize} - #{$barSize}) / 2));
23
25
  --#{variables.$prefix}slider-label-vertical-margin-inline-start: calc((#{$handleSize} - #{$barSize}) / 2 + #{$barSize} + #{$offset});
@@ -32,12 +34,13 @@
32
34
 
33
35
  --#{variables.$prefix}slider-primary-size: #{variables.$au-slider-primary-size};
34
36
  --#{variables.$prefix}slider-secondary-size: #{variables.$au-slider-secondary-size};
35
- --#{variables.$prefix}slider-margin-block-start: #{variables.$au-slider-margin-block-start};
36
- --#{variables.$prefix}slider-margin-block-end: #{variables.$au-slider-margin-block-end};
37
- --#{variables.$prefix}slider-vertical-margin-inline-start: #{variables.$au-slider-vertical-margin-inline-start};
38
- --#{variables.$prefix}slider-vertical-margin-inline-end: #{variables.$au-slider-vertical-margin-inline-end};
37
+ --#{variables.$prefix}slider-horizontal-margin-block-with-labels: #{variables.$au-slider-horizontal-margin-block-with-labels};
38
+ --#{variables.$prefix}slider-horizontal-margin-block-no-labels: #{variables.$au-slider-horizontal-margin-block-no-labels};
39
+ --#{variables.$prefix}slider-vertical-margin-inline-no-labels: #{variables.$au-slider-vertical-margin-inline-no-labels};
40
+ --#{variables.$prefix}slider-vertical-margin-inline-with-labels: #{variables.$au-slider-vertical-margin-inline-with-labels};
39
41
  --#{variables.$prefix}slider-translate-vertical: #{variables.$au-slider-translate-vertical};
40
42
  --#{variables.$prefix}slider-translate-horizontal: #{variables.$au-slider-translate-horizontal};
43
+ --#{variables.$prefix}slider-padding: #{variables.$au-slider-padding};
41
44
 
42
45
  --#{variables.$prefix}slider-handle-color: #{variables.$au-slider-handle-color};
43
46
  --#{variables.$prefix}slider-handle-hover-color: #{variables.$au-slider-handle-hover-color};
@@ -86,16 +89,20 @@
86
89
  --#{variables.$prefix}slider-clickable-area-vertical-flex-shrink: #{variables.$au-slider-clickable-area-vertical-flex-shrink};
87
90
  --#{variables.$prefix}slider-clickable-area-cursor: #{variables.$au-slider-clickable-area-cursor};
88
91
 
92
+ --#{variables.$prefix}slider-disabled-background-color: #{variables.$au-slider-disabled-background-color};
89
93
  --#{variables.$prefix}slider-disabled-color: #{variables.$au-slider-disabled-color};
90
94
  --#{variables.$prefix}slider-disabled-cursor: #{variables.$au-slider-disabled-cursor};
91
95
  // scss-docs-end slider-css-vars
92
96
 
93
- display: flex;
94
- background-color: var(--#{variables.$prefix}slider-background-color);
95
- border-radius: var(--#{variables.$prefix}slider-border-radius);
96
- font-size: var(--#{variables.$prefix}slider-font-size);
97
- line-height: var(--#{variables.$prefix}slider-line-height);
98
- position: relative;
97
+ height: 100%;
98
+
99
+ &.au-slider-horizontal {
100
+ padding-inline: var(--#{variables.$prefix}slider-padding);
101
+ }
102
+
103
+ &.au-slider-vertical {
104
+ padding-block: var(--#{variables.$prefix}slider-padding);
105
+ }
99
106
 
100
107
  &.au-slider-lg {
101
108
  @include setSliderSize(
@@ -119,229 +126,246 @@
119
126
  );
120
127
  }
121
128
 
122
- &.au-slider-horizontal {
123
- width: var(--#{variables.$prefix}slider-primary-size);
124
- height: var(--#{variables.$prefix}slider-secondary-size);
125
- margin-block-start: var(--#{variables.$prefix}slider-margin-block-start);
126
- margin-block-end: var(--#{variables.$prefix}slider-margin-block-end);
127
- .au-slider-handle-horizontal {
128
- top: calc(50% - var(--#{variables.$prefix}slider-handle-size) / 2);
129
- transform: var(--#{variables.$prefix}slider-translate-horizontal);
130
- }
131
- .au-slider-tick-horizontal {
132
- top: calc(50% - var(--#{variables.$prefix}slider-tick-primary-size) / 2);
133
- transform: var(--#{variables.$prefix}slider-translate-horizontal);
129
+ .au-slider-content {
130
+ display: flex;
131
+ background-color: var(--#{variables.$prefix}slider-background-color);
132
+ border-radius: var(--#{variables.$prefix}slider-border-radius);
133
+ font-size: var(--#{variables.$prefix}slider-font-size);
134
+ line-height: var(--#{variables.$prefix}slider-line-height);
135
+ position: relative;
136
+
137
+ &.au-slider-horizontal {
138
+ width: var(--#{variables.$prefix}slider-primary-size);
139
+ height: var(--#{variables.$prefix}slider-secondary-size);
140
+ margin-block-start: var(--#{variables.$prefix}slider-horizontal-margin-block-no-labels);
141
+ margin-block-end: var(--#{variables.$prefix}slider-horizontal-margin-block-no-labels);
142
+ &.au-slider-with-labels {
143
+ margin-block-start: var(--#{variables.$prefix}slider-horizontal-margin-block-with-labels);
144
+ }
145
+ .au-slider-handle-horizontal {
146
+ top: calc(50% - var(--#{variables.$prefix}slider-handle-size) / 2);
147
+ transform: var(--#{variables.$prefix}slider-translate-horizontal);
148
+ }
149
+ .au-slider-tick-horizontal {
150
+ top: calc(50% - var(--#{variables.$prefix}slider-tick-primary-size) / 2);
151
+ transform: var(--#{variables.$prefix}slider-translate-horizontal);
152
+ }
134
153
  }
135
- }
136
154
 
137
- &.au-slider-vertical {
138
- height: var(--#{variables.$prefix}slider-primary-size);
139
- width: var(--#{variables.$prefix}slider-secondary-size);
140
- margin-inline-start: var(--#{variables.$prefix}slider-vertical-margin-inline-start);
141
- margin-inline-end: var(--#{variables.$prefix}slider-vertical-margin-inline-end);
142
- .au-slider-handle-vertical {
143
- left: calc(50% - var(--#{variables.$prefix}slider-handle-size) / 2);
144
- transform: var(--#{variables.$prefix}slider-translate-vertical);
145
- }
146
- .au-slider-tick-vertical {
147
- left: calc(50% - var(--#{variables.$prefix}slider-tick-primary-size) / 2);
148
- transform: var(--#{variables.$prefix}slider-translate-vertical);
155
+ &.au-slider-vertical {
156
+ height: var(--#{variables.$prefix}slider-primary-size);
157
+ width: var(--#{variables.$prefix}slider-secondary-size);
158
+ margin-inline-start: var(--#{variables.$prefix}slider-vertical-margin-inline-no-labels);
159
+ margin-inline-end: var(--#{variables.$prefix}slider-vertical-margin-inline-with-labels);
160
+ &.au-slider-with-labels {
161
+ margin-inline-end: var(--#{variables.$prefix}slider-vertical-margin-inline-with-labels);
162
+ }
163
+ .au-slider-handle-vertical {
164
+ left: calc(50% - var(--#{variables.$prefix}slider-handle-size) / 2);
165
+ transform: var(--#{variables.$prefix}slider-translate-vertical);
166
+ }
167
+ .au-slider-tick-vertical {
168
+ left: calc(50% - var(--#{variables.$prefix}slider-tick-primary-size) / 2);
169
+ transform: var(--#{variables.$prefix}slider-translate-vertical);
170
+ }
149
171
  }
150
- }
151
172
 
152
- .au-slider-handle {
153
- background-color: var(--#{variables.$prefix}slider-handle-color);
154
- border: var(--#{variables.$prefix}slider-handle-border);
155
- border-radius: var(--#{variables.$prefix}slider-handle-border-radius);
156
- outline: var(--#{variables.$prefix}slider-handle-outline);
157
- position: absolute;
158
- width: var(--#{variables.$prefix}slider-handle-size);
159
- height: var(--#{variables.$prefix}slider-handle-size);
160
-
161
- &:not([disabled]):hover {
162
- border: var(--#{variables.$prefix}slider-handle-border-hover);
163
- background-color: var(--#{variables.$prefix}slider-handle-hover-color);
173
+ .au-slider-handle {
174
+ background-color: var(--#{variables.$prefix}slider-handle-color);
175
+ border: var(--#{variables.$prefix}slider-handle-border);
176
+ border-radius: var(--#{variables.$prefix}slider-handle-border-radius);
177
+ outline: var(--#{variables.$prefix}slider-handle-outline);
178
+ position: absolute;
179
+ width: var(--#{variables.$prefix}slider-handle-size);
180
+ height: var(--#{variables.$prefix}slider-handle-size);
181
+
182
+ &:not([disabled]):hover {
183
+ border: var(--#{variables.$prefix}slider-handle-border-hover);
184
+ background-color: var(--#{variables.$prefix}slider-handle-hover-color);
185
+ &:focus-visible {
186
+ box-shadow: var(--#{variables.$prefix}slider-handle-focus-hover-box-shadow);
187
+ }
188
+ }
164
189
  &:focus-visible {
165
- box-shadow: var(--#{variables.$prefix}slider-handle-focus-hover-box-shadow);
190
+ box-shadow: var(--#{variables.$prefix}slider-handle-focus-box-shadow);
166
191
  }
167
192
  }
168
- &:focus-visible {
169
- box-shadow: var(--#{variables.$prefix}slider-handle-focus-box-shadow);
170
- }
171
- }
172
-
173
- .au-slider-tick {
174
- position: absolute;
175
- height: var(--#{variables.$prefix}slider-tick-primary-size);
176
- width: var(--#{variables.$prefix}slider-tick-secondary-size);
177
- cursor: var(--#{variables.$prefix}slider-clickable-area-cursor);
178
193
 
179
- // center align the svg along the slider axis
180
- svg {
181
- display: block;
182
- width: var(--#{variables.$prefix}slider-tick-secondary-size);
194
+ .au-slider-tick {
195
+ position: absolute;
183
196
  height: var(--#{variables.$prefix}slider-tick-primary-size);
184
- fill: none;
185
-
186
- circle {
187
- cx: 50%;
188
- cy: 50%;
189
- fill: var(--#{variables.$prefix}slider-tick-fill-color);
197
+ width: var(--#{variables.$prefix}slider-tick-secondary-size);
198
+ cursor: var(--#{variables.$prefix}slider-clickable-area-cursor);
190
199
 
191
- &.au-slider-tick-outer {
192
- r: 45%;
193
- stroke: var(--#{variables.$prefix}slider-tick-neutral-color);
194
- stroke-width: 1.5;
200
+ // center align the svg along the slider axis
201
+ svg {
202
+ display: block;
203
+ width: var(--#{variables.$prefix}slider-tick-secondary-size);
204
+ height: var(--#{variables.$prefix}slider-tick-primary-size);
205
+ fill: none;
195
206
 
196
- &.au-slider-tick-disabled {
197
- stroke: var(--#{variables.$prefix}slider-tick-disabled-color);
198
- }
199
- }
207
+ circle {
208
+ cx: 50%;
209
+ cy: 50%;
210
+ fill: var(--#{variables.$prefix}slider-tick-fill-color);
200
211
 
201
- &.au-slider-tick-selected {
202
212
  &.au-slider-tick-outer {
203
- fill: var(--#{variables.$prefix}slider-tick-selected-color);
204
- stroke: none;
205
- r: 50%;
213
+ r: 45%;
214
+ stroke: var(--#{variables.$prefix}slider-tick-neutral-color);
215
+ stroke-width: 1.5;
206
216
 
207
217
  &.au-slider-tick-disabled {
208
- fill: var(--#{variables.$prefix}slider-tick-disabled-color);
218
+ stroke: var(--#{variables.$prefix}slider-tick-disabled-color);
209
219
  }
210
220
  }
211
221
 
212
- &.au-slider-tick-inner {
213
- r: 25%;
222
+ &.au-slider-tick-selected {
223
+ &.au-slider-tick-outer {
224
+ fill: var(--#{variables.$prefix}slider-tick-selected-color);
225
+ stroke: none;
226
+ r: 50%;
227
+
228
+ &.au-slider-tick-disabled {
229
+ fill: var(--#{variables.$prefix}slider-tick-disabled-color);
230
+ }
231
+ }
232
+
233
+ &.au-slider-tick-inner {
234
+ r: 25%;
235
+ }
214
236
  }
215
237
  }
216
238
  }
217
239
  }
218
- }
219
-
220
- .au-slider-tick-label {
221
- position: absolute;
222
- text-wrap: nowrap;
223
- transform: var(--#{variables.$prefix}slider-translate-horizontal);
224
- margin-block-start: var(--#{variables.$prefix}slider-label-margin-block-start);
225
- }
226
-
227
- .au-slider-tick-label-vertical {
228
- position: absolute;
229
- margin-inline-start: var(--#{variables.$prefix}slider-label-vertical-margin-inline-start);
230
- transform: var(--#{variables.$prefix}slider-tick-label-translate-vertical);
231
- }
232
-
233
- .au-slider-tick-label-now {
234
- font-weight: var(--#{variables.$prefix}slider-label-now-font-weight);
235
- }
236
-
237
- .au-slider-progress {
238
- background-color: var(--#{variables.$prefix}slider-progress-color);
239
- border-radius: var(--#{variables.$prefix}slider-border-radius);
240
- position: absolute;
241
- }
242
-
243
- .au-slider-progress-vertical {
244
- transform: var(--#{variables.$prefix}slider-progress-vertical-transform);
245
- }
246
-
247
- .au-slider-label {
248
- font-weight: var(--#{variables.$prefix}slider-label-font-weight);
249
- margin-block-start: var(--#{variables.$prefix}slider-label-margin-block-start);
250
- position: absolute;
251
- text-wrap: nowrap;
252
240
 
253
- &.au-slider-label-min:not(.au-slider-rtl) {
254
- left: var(--#{variables.$prefix}slider-label-min-position);
241
+ .au-slider-tick-label {
242
+ position: absolute;
243
+ text-wrap: nowrap;
244
+ transform: var(--#{variables.$prefix}slider-translate-horizontal);
245
+ margin-block-start: var(--#{variables.$prefix}slider-label-margin-block-start);
255
246
  }
256
247
 
257
- &.au-slider-label-min.au-slider-rtl {
258
- right: var(--#{variables.$prefix}slider-label-max-position);
248
+ .au-slider-tick-label-vertical {
249
+ position: absolute;
250
+ margin-inline-start: var(--#{variables.$prefix}slider-label-vertical-margin-inline-start);
251
+ transform: var(--#{variables.$prefix}slider-tick-label-translate-vertical);
259
252
  }
260
253
 
261
- &.au-slider-label-max:not(.au-slider-rtl) {
262
- right: var(--#{variables.$prefix}slider-label-max-position);
254
+ .au-slider-tick-label-now {
255
+ font-weight: var(--#{variables.$prefix}slider-label-now-font-weight);
263
256
  }
264
257
 
265
- &.au-slider-label-max.au-slider-rtl {
266
- left: var(--#{variables.$prefix}slider-label-min-position);
258
+ .au-slider-progress {
259
+ background-color: var(--#{variables.$prefix}slider-progress-color);
260
+ border-radius: var(--#{variables.$prefix}slider-border-radius);
261
+ position: absolute;
267
262
  }
268
263
 
269
- &.au-slider-label-now {
270
- font-weight: var(--#{variables.$prefix}slider-label-now-font-weight);
271
- transform: var(--#{variables.$prefix}slider-label-now-transform);
264
+ .au-slider-progress-vertical {
265
+ transform: var(--#{variables.$prefix}slider-progress-vertical-transform);
272
266
  }
273
267
 
274
- &.invisible {
275
- visibility: hidden;
276
- }
277
- }
268
+ .au-slider-label {
269
+ font-weight: var(--#{variables.$prefix}slider-label-font-weight);
270
+ margin-block-start: var(--#{variables.$prefix}slider-label-margin-block-start);
271
+ position: absolute;
272
+ text-wrap: nowrap;
278
273
 
279
- .au-slider-label-vertical {
280
- position: absolute;
281
- margin-inline-start: var(--#{variables.$prefix}slider-label-vertical-margin-inline-start);
282
- white-space: var(--#{variables.$prefix}slider-label-vertical-white-space);
274
+ &.au-slider-label-min:not(.au-slider-rtl) {
275
+ left: var(--#{variables.$prefix}slider-label-min-position);
276
+ }
283
277
 
284
- &.au-slider-label-vertical-min:not(.au-slider-rtl) {
285
- top: var(--#{variables.$prefix}slider-label-vertical-min-top);
286
- transform: var(--#{variables.$prefix}slider-label-vertical-min-transform);
287
- }
278
+ &.au-slider-label-min.au-slider-rtl {
279
+ right: var(--#{variables.$prefix}slider-label-max-position);
280
+ }
288
281
 
289
- &.au-slider-label-vertical-min.au-slider-rtl {
290
- top: var(--#{variables.$prefix}slider-label-vertical-max-top);
291
- transform: var(--#{variables.$prefix}slider-label-vertical-max-transform);
292
- }
282
+ &.au-slider-label-max:not(.au-slider-rtl) {
283
+ right: var(--#{variables.$prefix}slider-label-max-position);
284
+ }
293
285
 
294
- &.au-slider-label-vertical-max:not(.au-slider-rtl) {
295
- top: var(--#{variables.$prefix}slider-label-vertical-max-top);
296
- transform: var(--#{variables.$prefix}slider-label-vertical-max-transform);
297
- }
286
+ &.au-slider-label-max.au-slider-rtl {
287
+ left: var(--#{variables.$prefix}slider-label-min-position);
288
+ }
298
289
 
299
- &.au-slider-label-vertical-max.au-slider-rtl {
300
- top: var(--#{variables.$prefix}slider-label-vertical-min-top);
301
- transform: var(--#{variables.$prefix}slider-label-vertical-min-transform);
302
- }
290
+ &.au-slider-label-now {
291
+ font-weight: var(--#{variables.$prefix}slider-label-now-font-weight);
292
+ transform: var(--#{variables.$prefix}slider-label-now-transform);
293
+ }
303
294
 
304
- &.au-slider-label-vertical-now {
305
- transform: var(--#{variables.$prefix}slider-label-vertical-now-transform);
295
+ &.invisible {
296
+ visibility: hidden;
297
+ }
306
298
  }
307
- }
308
299
 
309
- .au-slider-clickable-area {
310
- height: var(--#{variables.$prefix}slider-clickable-area-main-size);
311
- width: var(--#{variables.$prefix}slider-clickable-area-secondary-size);
312
- transform: var(--#{variables.$prefix}slider-clickable-area-translate);
313
- cursor: var(--#{variables.$prefix}slider-clickable-area-cursor);
314
- }
300
+ .au-slider-label-vertical {
301
+ position: absolute;
302
+ margin-inline-start: var(--#{variables.$prefix}slider-label-vertical-margin-inline-start);
303
+ white-space: var(--#{variables.$prefix}slider-label-vertical-white-space);
315
304
 
316
- .au-slider-clickable-area-vertical {
317
- width: var(--#{variables.$prefix}slider-clickable-area-main-size);
318
- height: var(--#{variables.$prefix}slider-clickable-area-secondary-size);
319
- transform: var(--#{variables.$prefix}slider-clickable-area-vertical-translate);
320
- flex-shrink: var(--#{variables.$prefix}slider-clickable-area-vertical-flex-shrink);
321
- cursor: var(--#{variables.$prefix}slider-clickable-area-cursor);
322
- }
305
+ &.au-slider-label-vertical-min:not(.au-slider-rtl) {
306
+ top: var(--#{variables.$prefix}slider-label-vertical-min-top);
307
+ transform: var(--#{variables.$prefix}slider-label-vertical-min-transform);
308
+ }
323
309
 
324
- .au-slider-clickable-area-with-ticks {
325
- cursor: default;
326
- }
310
+ &.au-slider-label-vertical-min.au-slider-rtl {
311
+ top: var(--#{variables.$prefix}slider-label-vertical-max-top);
312
+ transform: var(--#{variables.$prefix}slider-label-vertical-max-transform);
313
+ }
327
314
 
328
- &.disabled {
329
- cursor: var(--#{variables.$prefix}slider-disabled-cursor);
330
- .au-slider-label,
331
- .au-slider-label-vertical,
332
- .au-slider-tick-label,
333
- .au-slider-tick-label-vertical {
334
- color: var(--#{variables.$prefix}slider-disabled-color);
315
+ &.au-slider-label-vertical-max:not(.au-slider-rtl) {
316
+ top: var(--#{variables.$prefix}slider-label-vertical-max-top);
317
+ transform: var(--#{variables.$prefix}slider-label-vertical-max-transform);
318
+ }
319
+
320
+ &.au-slider-label-vertical-max.au-slider-rtl {
321
+ top: var(--#{variables.$prefix}slider-label-vertical-min-top);
322
+ transform: var(--#{variables.$prefix}slider-label-vertical-min-transform);
323
+ }
324
+
325
+ &.au-slider-label-vertical-now {
326
+ transform: var(--#{variables.$prefix}slider-label-vertical-now-transform);
327
+ }
335
328
  }
336
- .au-slider-progress,
337
- .au-slider-handle {
338
- background-color: var(--#{variables.$prefix}slider-disabled-color);
339
- cursor: var(--#{variables.$prefix}slider-disabled-cursor);
329
+
330
+ .au-slider-clickable-area {
331
+ height: var(--#{variables.$prefix}slider-clickable-area-main-size);
332
+ width: var(--#{variables.$prefix}slider-clickable-area-secondary-size);
333
+ transform: var(--#{variables.$prefix}slider-clickable-area-translate);
334
+ cursor: var(--#{variables.$prefix}slider-clickable-area-cursor);
340
335
  }
341
- .au-slider-clickable-area,
342
- .au-slider-clickable-area-vertical,
343
- .au-slider-tick {
336
+
337
+ .au-slider-clickable-area-vertical {
338
+ width: var(--#{variables.$prefix}slider-clickable-area-main-size);
339
+ height: var(--#{variables.$prefix}slider-clickable-area-secondary-size);
340
+ transform: var(--#{variables.$prefix}slider-clickable-area-vertical-translate);
341
+ flex-shrink: var(--#{variables.$prefix}slider-clickable-area-vertical-flex-shrink);
342
+ cursor: var(--#{variables.$prefix}slider-clickable-area-cursor);
343
+ }
344
+
345
+ .au-slider-clickable-area-with-ticks {
346
+ cursor: default;
347
+ }
348
+
349
+ &.disabled {
344
350
  cursor: var(--#{variables.$prefix}slider-disabled-cursor);
351
+ background-color: var(--#{variables.$prefix}slider-disabled-background-color);
352
+
353
+ .au-slider-label,
354
+ .au-slider-label-vertical,
355
+ .au-slider-tick-label,
356
+ .au-slider-tick-label-vertical {
357
+ color: var(--#{variables.$prefix}slider-disabled-color);
358
+ }
359
+ .au-slider-progress,
360
+ .au-slider-handle {
361
+ background-color: var(--#{variables.$prefix}slider-disabled-color);
362
+ cursor: var(--#{variables.$prefix}slider-disabled-cursor);
363
+ }
364
+ .au-slider-clickable-area,
365
+ .au-slider-clickable-area-vertical,
366
+ .au-slider-tick {
367
+ cursor: var(--#{variables.$prefix}slider-disabled-cursor);
368
+ }
345
369
  }
346
370
  }
347
371
  }
package/scss/tree.scss CHANGED
@@ -1,5 +1,4 @@
1
1
  @use 'variables';
2
- @use '_functions';
3
2
 
4
3
  .au-tree {
5
4
  // scss-docs-start tree-css-vars
@@ -10,8 +9,8 @@
10
9
  --#{variables.$prefix}tree-expand-icon-background-color-hover: #{variables.$au-tree-expand-icon-background-color-hover};
11
10
  --#{variables.$prefix}tree-expand-icon-width: #{variables.$au-tree-expand-icon-width};
12
11
  --#{variables.$prefix}tree-expand-icon-height: #{variables.$au-tree-expand-icon-height};
13
- --#{variables.$prefix}tree-expand-icon: #{functions.escape-svg(variables.$au-tree-expand-icon)};
14
- --#{variables.$prefix}tree-expand-icon-hover: #{functions.escape-svg(variables.$au-tree-expand-icon-hover)};
12
+ --#{variables.$prefix}tree-expand-icon-color: #{variables.$au-tree-expand-icon-color};
13
+ --#{variables.$prefix}tree-expand-icon-color-hover: #{variables.$au-tree-expand-icon-color-hover};
15
14
  // scss-docs-end tree-css-vars
16
15
 
17
16
  list-style: none;
@@ -57,13 +56,19 @@
57
56
  cursor: pointer;
58
57
 
59
58
  &:hover {
60
- --#{variables.$prefix}tree-expand-icon: var(--#{variables.$prefix}tree-expand-icon-hover);
61
59
  --#{variables.$prefix}tree-expand-icon-background-color: var(--#{variables.$prefix}tree-expand-icon-background-color-hover);
60
+
61
+ .au-tree-expand-icon-svg .au-tree-expand-icon-svg-fill {
62
+ stroke: var(--#{variables.$prefix}tree-expand-icon-color-hover);
63
+ }
62
64
  }
63
65
 
64
66
  .au-tree-expand-icon-svg {
65
- content: var(--#{variables.$prefix}tree-expand-icon);
66
67
  transition: transform 0.3s;
68
+
69
+ .au-tree-expand-icon-svg-fill {
70
+ stroke: var(--#{variables.$prefix}tree-expand-icon-color);
71
+ }
67
72
  }
68
73
 
69
74
  &.au-tree-expand-icon-expanded {
package/scss/_functions.scss DELETED
@@ -1,36 +0,0 @@
1
- @use 'sass:string';
2
-
3
- /**
4
- * Utility function to replace a substring as Sass doesn't provide the built-in method to do it
5
- */
6
- @function str-replace($string, $search, $replace: '') {
7
- $index: string.index($string, $search);
8
-
9
- @if $index {
10
- @return string.slice($string, 1, $index - 1) + $replace + str-replace(string.slice($string, $index + string.length($search)), $search, $replace);
11
- }
12
-
13
- @return $string;
14
- }
15
-
16
- // Characters which are escaped by the escape-svg function
17
- $escaped-characters: (('<', '%3c'), ('>', '%3e'), ('#', '%23'), ('(', '%28'), (')', '%29')) !default;
18
-
19
- /**
20
- * Method implementation taken from Bootstrap
21
- * ref: https://github.com/twbs/bootstrap/blob/cacbdc680ecdfee5f0c7fbb876ad15188eaf697d/scss/_functions.scss#L131
22
- */
23
- @function escape-svg($string) {
24
- @if string.index($string, 'data:image/svg+xml') {
25
- @each $char, $encoded in $escaped-characters {
26
- // Do not escape the url brackets
27
- @if string.index($string, 'url(') == 1 {
28
- $string: url('#{str-replace(string.slice($string, 6, -3), $char, $encoded)}');
29
- } @else {
30
- $string: str-replace($string, $char, $encoded);
31
- }
32
- }
33
- }
34
-
35
- @return $string;
36
- }