@agnos-ui/core-bootstrap 0.9.0-next.0 → 0.9.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 (7) hide show
  1. package/css/agnosui.css +90 -72
  2. package/css/agnosui.css.map +1 -1
  3. package/css/slider.css +90 -72
  4. package/css/slider.css.map +1 -1
  5. package/package.json +2 -2
  6. package/scss/_variables.scss +14 -5
  7. package/scss/slider.scss +211 -190
package/css/agnosui.css CHANGED
@@ -82,12 +82,13 @@
82
82
  --bs-slider-line-height: 1.5;
83
83
  --bs-slider-primary-size: 100%;
84
84
  --bs-slider-secondary-size: 0.25rem;
85
- --bs-slider-margin-block-start: calc((1.25rem - 0.25rem) / 2 + 1rem * 1.5 + 0.5rem);
86
- --bs-slider-margin-block-end: calc((1.25rem - 0.25rem) / 2 + 0.5rem);
87
- --bs-slider-vertical-margin-inline-start: 1rem;
88
- --bs-slider-vertical-margin-inline-end: 3rem;
85
+ --bs-slider-horizontal-margin-block-with-labels: calc((var(--bs-slider-handle-size) - var(--bs-slider-secondary-size)) / 2 + var(--bs-slider-font-size) * 1.5 + 0.5rem);
86
+ --bs-slider-horizontal-margin-block-no-labels: calc((var(--bs-slider-handle-size) - var(--bs-slider-secondary-size)) * 0.75);
87
+ --bs-slider-vertical-margin-inline-no-labels: calc((var(--bs-slider-handle-size) - var(--bs-slider-secondary-size)) * 0.75);
88
+ --bs-slider-vertical-margin-inline-with-labels: calc((var(--bs-slider-handle-size) - var(--bs-slider-secondary-size)) / 2 + 4ch);
89
89
  --bs-slider-translate-vertical: translateY(-50%);
90
90
  --bs-slider-translate-horizontal: translateX(-50%);
91
+ --bs-slider-padding: calc(var(--bs-slider-handle-size) / 2);
91
92
  --bs-slider-handle-color: var(--bs-primary, #0d6efd);
92
93
  --bs-slider-handle-hover-color: var(--bs-primary, #0d6efd);
93
94
  --bs-slider-handle-size: 1.25rem;
@@ -107,7 +108,7 @@
107
108
  --bs-slider-progress-color: var(--bs-primary, #0d6efd);
108
109
  --bs-slider-progress-height: 0.25rem;
109
110
  --bs-slider-progress-vertical-transform: rotate(90deg);
110
- --bs-slider-label-margin-block-start: calc(-1 * (1rem * 1.5 + (1.25rem - 0.25rem) / 2));
111
+ --bs-slider-label-margin-block-start: calc(-1 * (var(--bs-slider-font-size) * var(--bs-slider-line-height) + (var(--bs-slider-handle-size) - var(--bs-slider-secondary-size)) / 2));
111
112
  --bs-slider-label-font-weight: normal;
112
113
  --bs-slider-label-now-font-weight: normal;
113
114
  --bs-slider-label-min-position: 0;
@@ -128,24 +129,26 @@
128
129
  --bs-slider-clickable-area-cursor: pointer;
129
130
  --bs-slider-disabled-color: var(--bs-dark-bg-subtle, #ced4da);
130
131
  --bs-slider-disabled-cursor: not-allowed;
131
- display: flex;
132
- background-color: var(--bs-slider-background-color);
133
- border-radius: var(--bs-slider-border-radius);
134
- font-size: var(--bs-slider-font-size);
135
- line-height: var(--bs-slider-line-height);
136
- position: relative;
132
+ height: 100%;
133
+ }
134
+ .au-slider.au-slider-horizontal {
135
+ padding-inline: var(--bs-slider-padding);
136
+ }
137
+ .au-slider.au-slider-vertical {
138
+ padding-block: var(--bs-slider-padding);
137
139
  }
138
140
  .au-slider.au-slider-lg {
139
141
  --bs-slider-font-size: 1.125rem;
140
142
  --bs-slider-border-radius: calc(0.3125rem / 2);
141
143
  --bs-slider-secondary-size: 0.3125rem;
142
- --bs-slider-margin-block-start: calc((1.5rem - 0.3125rem) / 2 + 1.125rem * 1.5 + 0rem);
143
- --bs-slider-margin-block-end: calc((1.5rem - 0.3125rem) / 2 + 0rem);
144
- --bs-slider-vertical-margin-inline-start: calc((1.5rem - 0.3125rem) / 2 + 0rem);
145
- --bs-slider-vertical-margin-inline-end: calc((1.5rem - 0.3125rem) / 2 + 0rem + 3ch + 0rem);
144
+ --bs-slider-horizontal-margin-block-with-labels: calc((1.5rem - 0.3125rem) / 2 + 1.125rem * 1.5 + 0rem);
145
+ --bs-slider-horizontal-margin-block-no-labels: calc((1.5rem - 0.3125rem) * 0.75);
146
+ --bs-slider-vertical-margin-inline-no-labels: calc((1.5rem - 0.3125rem) * 0.75);
147
+ --bs-slider-vertical-margin-inline-with-labels: calc((1.5rem - 0.3125rem) / 2 + 0rem + 3ch + 0rem);
146
148
  --bs-slider-handle-size: 1.5rem;
147
149
  --bs-slider-tick-primary-size: 1.25rem;
148
150
  --bs-slider-tick-secondary-size: 1.25rem;
151
+ --bs-slider-padding: calc(1.5rem / 2);
149
152
  --bs-slider-label-margin-block-start: calc(-1 * (1.125rem * 1.5 + (1.5rem - 0.3125rem) / 2));
150
153
  --bs-slider-tick-label-margin-block-start: calc(-1 * (1.125rem * 1.5 + (1.25rem - 0.3125rem) / 2));
151
154
  --bs-slider-label-vertical-margin-inline-start: calc((1.5rem - 0.3125rem) / 2 + 0.3125rem + 0rem);
@@ -154,46 +157,61 @@
154
157
  --bs-slider-font-size: 0.875rem;
155
158
  --bs-slider-border-radius: calc(0.2rem / 2);
156
159
  --bs-slider-secondary-size: 0.2rem;
157
- --bs-slider-margin-block-start: calc((1rem - 0.2rem) / 2 + 0.875rem * 1.5 + 0rem);
158
- --bs-slider-margin-block-end: calc((1rem - 0.2rem) / 2 + 0rem);
159
- --bs-slider-vertical-margin-inline-start: calc((1rem - 0.2rem) / 2 + 0rem);
160
- --bs-slider-vertical-margin-inline-end: calc((1rem - 0.2rem) / 2 + 0rem + 3ch + 0rem);
160
+ --bs-slider-horizontal-margin-block-with-labels: calc((1rem - 0.2rem) / 2 + 0.875rem * 1.5 + 0rem);
161
+ --bs-slider-horizontal-margin-block-no-labels: calc((1rem - 0.2rem) * 0.75);
162
+ --bs-slider-vertical-margin-inline-no-labels: calc((1rem - 0.2rem) * 0.75);
163
+ --bs-slider-vertical-margin-inline-with-labels: calc((1rem - 0.2rem) / 2 + 0rem + 3ch + 0rem);
161
164
  --bs-slider-handle-size: 1rem;
162
165
  --bs-slider-tick-primary-size: 0.75rem;
163
166
  --bs-slider-tick-secondary-size: 0.75rem;
167
+ --bs-slider-padding: calc(1rem / 2);
164
168
  --bs-slider-label-margin-block-start: calc(-1 * (0.875rem * 1.5 + (1rem - 0.2rem) / 2));
165
169
  --bs-slider-tick-label-margin-block-start: calc(-1 * (0.875rem * 1.5 + (0.75rem - 0.2rem) / 2));
166
170
  --bs-slider-label-vertical-margin-inline-start: calc((1rem - 0.2rem) / 2 + 0.2rem + 0rem);
167
171
  }
168
- .au-slider.au-slider-horizontal {
172
+ .au-slider .au-slider-content {
173
+ display: flex;
174
+ background-color: var(--bs-slider-background-color);
175
+ border-radius: var(--bs-slider-border-radius);
176
+ font-size: var(--bs-slider-font-size);
177
+ line-height: var(--bs-slider-line-height);
178
+ position: relative;
179
+ }
180
+ .au-slider .au-slider-content.au-slider-horizontal {
169
181
  width: var(--bs-slider-primary-size);
170
182
  height: var(--bs-slider-secondary-size);
171
- margin-block-start: var(--bs-slider-margin-block-start);
172
- margin-block-end: var(--bs-slider-margin-block-end);
183
+ margin-block-start: var(--bs-slider-horizontal-margin-block-no-labels);
184
+ margin-block-end: var(--bs-slider-horizontal-margin-block-no-labels);
185
+ }
186
+ .au-slider .au-slider-content.au-slider-horizontal.au-slider-with-labels {
187
+ margin-block-start: var(--bs-slider-horizontal-margin-block-with-labels);
173
188
  }
174
- .au-slider.au-slider-horizontal .au-slider-handle-horizontal {
189
+ .au-slider .au-slider-content.au-slider-horizontal .au-slider-handle-horizontal {
175
190
  top: calc(50% - var(--bs-slider-handle-size) / 2);
176
191
  transform: var(--bs-slider-translate-horizontal);
177
192
  }
178
- .au-slider.au-slider-horizontal .au-slider-tick-horizontal {
193
+ .au-slider .au-slider-content.au-slider-horizontal .au-slider-tick-horizontal {
179
194
  top: calc(50% - var(--bs-slider-tick-primary-size) / 2);
180
195
  transform: var(--bs-slider-translate-horizontal);
181
196
  }
182
- .au-slider.au-slider-vertical {
197
+ .au-slider .au-slider-content.au-slider-vertical {
183
198
  height: var(--bs-slider-primary-size);
184
199
  width: var(--bs-slider-secondary-size);
185
- margin-inline-start: var(--bs-slider-vertical-margin-inline-start);
186
- margin-inline-end: var(--bs-slider-vertical-margin-inline-end);
200
+ margin-inline-start: var(--bs-slider-vertical-margin-inline-no-labels);
201
+ margin-inline-end: var(--bs-slider-vertical-margin-inline-with-labels);
202
+ }
203
+ .au-slider .au-slider-content.au-slider-vertical.au-slider-with-labels {
204
+ margin-inline-end: var(--bs-slider-vertical-margin-inline-with-labels);
187
205
  }
188
- .au-slider.au-slider-vertical .au-slider-handle-vertical {
206
+ .au-slider .au-slider-content.au-slider-vertical .au-slider-handle-vertical {
189
207
  left: calc(50% - var(--bs-slider-handle-size) / 2);
190
208
  transform: var(--bs-slider-translate-vertical);
191
209
  }
192
- .au-slider.au-slider-vertical .au-slider-tick-vertical {
210
+ .au-slider .au-slider-content.au-slider-vertical .au-slider-tick-vertical {
193
211
  left: calc(50% - var(--bs-slider-tick-primary-size) / 2);
194
212
  transform: var(--bs-slider-translate-vertical);
195
213
  }
196
- .au-slider .au-slider-handle {
214
+ .au-slider .au-slider-content .au-slider-handle {
197
215
  background-color: var(--bs-slider-handle-color);
198
216
  border: var(--bs-slider-handle-border);
199
217
  border-radius: var(--bs-slider-handle-border-radius);
@@ -202,156 +220,156 @@
202
220
  width: var(--bs-slider-handle-size);
203
221
  height: var(--bs-slider-handle-size);
204
222
  }
205
- .au-slider .au-slider-handle:not([disabled]):hover {
223
+ .au-slider .au-slider-content .au-slider-handle:not([disabled]):hover {
206
224
  border: var(--bs-slider-handle-border-hover);
207
225
  background-color: var(--bs-slider-handle-hover-color);
208
226
  }
209
- .au-slider .au-slider-handle:not([disabled]):hover:focus-visible {
227
+ .au-slider .au-slider-content .au-slider-handle:not([disabled]):hover:focus-visible {
210
228
  box-shadow: var(--bs-slider-handle-focus-hover-box-shadow);
211
229
  }
212
- .au-slider .au-slider-handle:focus-visible {
230
+ .au-slider .au-slider-content .au-slider-handle:focus-visible {
213
231
  box-shadow: var(--bs-slider-handle-focus-box-shadow);
214
232
  }
215
- .au-slider .au-slider-tick {
233
+ .au-slider .au-slider-content .au-slider-tick {
216
234
  position: absolute;
217
235
  height: var(--bs-slider-tick-primary-size);
218
236
  width: var(--bs-slider-tick-secondary-size);
219
237
  cursor: var(--bs-slider-clickable-area-cursor);
220
238
  }
221
- .au-slider .au-slider-tick svg {
239
+ .au-slider .au-slider-content .au-slider-tick svg {
222
240
  display: block;
223
241
  width: var(--bs-slider-tick-secondary-size);
224
242
  height: var(--bs-slider-tick-primary-size);
225
243
  fill: none;
226
244
  }
227
- .au-slider .au-slider-tick svg circle {
245
+ .au-slider .au-slider-content .au-slider-tick svg circle {
228
246
  cx: 50%;
229
247
  cy: 50%;
230
248
  fill: var(--bs-slider-tick-fill-color);
231
249
  }
232
- .au-slider .au-slider-tick svg circle.au-slider-tick-outer {
250
+ .au-slider .au-slider-content .au-slider-tick svg circle.au-slider-tick-outer {
233
251
  r: 45%;
234
252
  stroke: var(--bs-slider-tick-neutral-color);
235
253
  stroke-width: 1.5;
236
254
  }
237
- .au-slider .au-slider-tick svg circle.au-slider-tick-outer.au-slider-tick-disabled {
255
+ .au-slider .au-slider-content .au-slider-tick svg circle.au-slider-tick-outer.au-slider-tick-disabled {
238
256
  stroke: var(--bs-slider-tick-disabled-color);
239
257
  }
240
- .au-slider .au-slider-tick svg circle.au-slider-tick-selected.au-slider-tick-outer {
258
+ .au-slider .au-slider-content .au-slider-tick svg circle.au-slider-tick-selected.au-slider-tick-outer {
241
259
  fill: var(--bs-slider-tick-selected-color);
242
260
  stroke: none;
243
261
  r: 50%;
244
262
  }
245
- .au-slider .au-slider-tick svg circle.au-slider-tick-selected.au-slider-tick-outer.au-slider-tick-disabled {
263
+ .au-slider .au-slider-content .au-slider-tick svg circle.au-slider-tick-selected.au-slider-tick-outer.au-slider-tick-disabled {
246
264
  fill: var(--bs-slider-tick-disabled-color);
247
265
  }
248
- .au-slider .au-slider-tick svg circle.au-slider-tick-selected.au-slider-tick-inner {
266
+ .au-slider .au-slider-content .au-slider-tick svg circle.au-slider-tick-selected.au-slider-tick-inner {
249
267
  r: 25%;
250
268
  }
251
- .au-slider .au-slider-tick-label {
269
+ .au-slider .au-slider-content .au-slider-tick-label {
252
270
  position: absolute;
253
271
  text-wrap: nowrap;
254
272
  transform: var(--bs-slider-translate-horizontal);
255
273
  margin-block-start: var(--bs-slider-label-margin-block-start);
256
274
  }
257
- .au-slider .au-slider-tick-label-vertical {
275
+ .au-slider .au-slider-content .au-slider-tick-label-vertical {
258
276
  position: absolute;
259
277
  margin-inline-start: var(--bs-slider-label-vertical-margin-inline-start);
260
278
  transform: var(--bs-slider-tick-label-translate-vertical);
261
279
  }
262
- .au-slider .au-slider-tick-label-now {
280
+ .au-slider .au-slider-content .au-slider-tick-label-now {
263
281
  font-weight: var(--bs-slider-label-now-font-weight);
264
282
  }
265
- .au-slider .au-slider-progress {
283
+ .au-slider .au-slider-content .au-slider-progress {
266
284
  background-color: var(--bs-slider-progress-color);
267
285
  border-radius: var(--bs-slider-border-radius);
268
286
  position: absolute;
269
287
  }
270
- .au-slider .au-slider-progress-vertical {
288
+ .au-slider .au-slider-content .au-slider-progress-vertical {
271
289
  transform: var(--bs-slider-progress-vertical-transform);
272
290
  }
273
- .au-slider .au-slider-label {
291
+ .au-slider .au-slider-content .au-slider-label {
274
292
  font-weight: var(--bs-slider-label-font-weight);
275
293
  margin-block-start: var(--bs-slider-label-margin-block-start);
276
294
  position: absolute;
277
295
  text-wrap: nowrap;
278
296
  }
279
- .au-slider .au-slider-label.au-slider-label-min:not(.au-slider-rtl) {
297
+ .au-slider .au-slider-content .au-slider-label.au-slider-label-min:not(.au-slider-rtl) {
280
298
  left: var(--bs-slider-label-min-position);
281
299
  }
282
- .au-slider .au-slider-label.au-slider-label-min.au-slider-rtl {
300
+ .au-slider .au-slider-content .au-slider-label.au-slider-label-min.au-slider-rtl {
283
301
  right: var(--bs-slider-label-max-position);
284
302
  }
285
- .au-slider .au-slider-label.au-slider-label-max:not(.au-slider-rtl) {
303
+ .au-slider .au-slider-content .au-slider-label.au-slider-label-max:not(.au-slider-rtl) {
286
304
  right: var(--bs-slider-label-max-position);
287
305
  }
288
- .au-slider .au-slider-label.au-slider-label-max.au-slider-rtl {
306
+ .au-slider .au-slider-content .au-slider-label.au-slider-label-max.au-slider-rtl {
289
307
  left: var(--bs-slider-label-min-position);
290
308
  }
291
- .au-slider .au-slider-label.au-slider-label-now {
309
+ .au-slider .au-slider-content .au-slider-label.au-slider-label-now {
292
310
  font-weight: var(--bs-slider-label-now-font-weight);
293
311
  transform: var(--bs-slider-label-now-transform);
294
312
  }
295
- .au-slider .au-slider-label.invisible {
313
+ .au-slider .au-slider-content .au-slider-label.invisible {
296
314
  visibility: hidden;
297
315
  }
298
- .au-slider .au-slider-label-vertical {
316
+ .au-slider .au-slider-content .au-slider-label-vertical {
299
317
  position: absolute;
300
318
  margin-inline-start: var(--bs-slider-label-vertical-margin-inline-start);
301
319
  white-space: var(--bs-slider-label-vertical-white-space);
302
320
  }
303
- .au-slider .au-slider-label-vertical.au-slider-label-vertical-min:not(.au-slider-rtl) {
321
+ .au-slider .au-slider-content .au-slider-label-vertical.au-slider-label-vertical-min:not(.au-slider-rtl) {
304
322
  top: var(--bs-slider-label-vertical-min-top);
305
323
  transform: var(--bs-slider-label-vertical-min-transform);
306
324
  }
307
- .au-slider .au-slider-label-vertical.au-slider-label-vertical-min.au-slider-rtl {
325
+ .au-slider .au-slider-content .au-slider-label-vertical.au-slider-label-vertical-min.au-slider-rtl {
308
326
  top: var(--bs-slider-label-vertical-max-top);
309
327
  transform: var(--bs-slider-label-vertical-max-transform);
310
328
  }
311
- .au-slider .au-slider-label-vertical.au-slider-label-vertical-max:not(.au-slider-rtl) {
329
+ .au-slider .au-slider-content .au-slider-label-vertical.au-slider-label-vertical-max:not(.au-slider-rtl) {
312
330
  top: var(--bs-slider-label-vertical-max-top);
313
331
  transform: var(--bs-slider-label-vertical-max-transform);
314
332
  }
315
- .au-slider .au-slider-label-vertical.au-slider-label-vertical-max.au-slider-rtl {
333
+ .au-slider .au-slider-content .au-slider-label-vertical.au-slider-label-vertical-max.au-slider-rtl {
316
334
  top: var(--bs-slider-label-vertical-min-top);
317
335
  transform: var(--bs-slider-label-vertical-min-transform);
318
336
  }
319
- .au-slider .au-slider-label-vertical.au-slider-label-vertical-now {
337
+ .au-slider .au-slider-content .au-slider-label-vertical.au-slider-label-vertical-now {
320
338
  transform: var(--bs-slider-label-vertical-now-transform);
321
339
  }
322
- .au-slider .au-slider-clickable-area {
340
+ .au-slider .au-slider-content .au-slider-clickable-area {
323
341
  height: var(--bs-slider-clickable-area-main-size);
324
342
  width: var(--bs-slider-clickable-area-secondary-size);
325
343
  transform: var(--bs-slider-clickable-area-translate);
326
344
  cursor: var(--bs-slider-clickable-area-cursor);
327
345
  }
328
- .au-slider .au-slider-clickable-area-vertical {
346
+ .au-slider .au-slider-content .au-slider-clickable-area-vertical {
329
347
  width: var(--bs-slider-clickable-area-main-size);
330
348
  height: var(--bs-slider-clickable-area-secondary-size);
331
349
  transform: var(--bs-slider-clickable-area-vertical-translate);
332
350
  flex-shrink: var(--bs-slider-clickable-area-vertical-flex-shrink);
333
351
  cursor: var(--bs-slider-clickable-area-cursor);
334
352
  }
335
- .au-slider .au-slider-clickable-area-with-ticks {
353
+ .au-slider .au-slider-content .au-slider-clickable-area-with-ticks {
336
354
  cursor: default;
337
355
  }
338
- .au-slider.disabled {
356
+ .au-slider .au-slider-content.disabled {
339
357
  cursor: var(--bs-slider-disabled-cursor);
340
358
  }
341
- .au-slider.disabled .au-slider-label,
342
- .au-slider.disabled .au-slider-label-vertical,
343
- .au-slider.disabled .au-slider-tick-label,
344
- .au-slider.disabled .au-slider-tick-label-vertical {
359
+ .au-slider .au-slider-content.disabled .au-slider-label,
360
+ .au-slider .au-slider-content.disabled .au-slider-label-vertical,
361
+ .au-slider .au-slider-content.disabled .au-slider-tick-label,
362
+ .au-slider .au-slider-content.disabled .au-slider-tick-label-vertical {
345
363
  color: var(--bs-slider-disabled-color);
346
364
  }
347
- .au-slider.disabled .au-slider-progress,
348
- .au-slider.disabled .au-slider-handle {
365
+ .au-slider .au-slider-content.disabled .au-slider-progress,
366
+ .au-slider .au-slider-content.disabled .au-slider-handle {
349
367
  background-color: var(--bs-slider-disabled-color);
350
368
  cursor: var(--bs-slider-disabled-cursor);
351
369
  }
352
- .au-slider.disabled .au-slider-clickable-area,
353
- .au-slider.disabled .au-slider-clickable-area-vertical,
354
- .au-slider.disabled .au-slider-tick {
370
+ .au-slider .au-slider-content.disabled .au-slider-clickable-area,
371
+ .au-slider .au-slider-content.disabled .au-slider-clickable-area-vertical,
372
+ .au-slider .au-slider-content.disabled .au-slider-tick {
355
373
  cursor: var(--bs-slider-disabled-cursor);
356
374
  }
357
375
 
package/css/agnosui.css.map CHANGED
@@ -1 +1 @@
1
- {"version":3,"sourceRoot":"","sources":["../scss/_functions.scss","../scss/tree.scss","../scss/select.scss","../scss/slider.scss","../scss/rating.scss","../scss/carousel.scss","../scss/toaster.scss"],"names":[],"mappings":"AAEA;AAAA;AAAA;AAgBA;AAAA;AAAA;AAAA;ACfA;EAEC;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EAGA;EACA;EACA;;AAEA;EACC;EACA;EACA;EACA;EACA;;AAGD;EACC;EACA;EACA;;AAGD;EACC;EACA;EACA;;AAGD;EACC;EACA;;AAGD;EACC;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;;AAEA;EACC;EACA;;AAGD;EACC;EACA;;AAIA;EACC;;;ACpEJ;EACC;;;AAID;EACC;EACA;EACA;;;ACeD;EAEC;EACA;EACA;EACA;EAEA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EAEA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EAEA;EACA;EAEA;EACA;EACA;EACA;EAEA;EAEA;EACA;EACA;EAEA;EACA;EACA;EAEA;EACA;EACA;EAEA;EACA;EACA;EACA;EACA;EACA;EACA;EAEA;EACA;EACA;EACA;EACA;EACA;EAEA;EACA;EAGA;EACA;EACA;EACA;EACA;EACA;;AAEA;EA7FA;EACA;EAEA;EAEA;EACA;EACA;EACA;EAEA;EACA;EACA;EAEA;EACA;EACA;;AAwFA;EAxGA;EACA;EAEA;EAEA;EACA;EACA;EACA;EAEA;EACA;EACA;EAEA;EACA;EACA;;AAmGA;EACC;EACA;EACA;EACA;;AACA;EACC;EACA;;AAED;EACC;EACA;;AAIF;EACC;EACA;EACA;EACA;;AACA;EACC;EACA;;AAED;EACC;EACA;;AAIF;EACC;EACA;EACA;EACA;EACA;EACA;EACA;;AAEA;EACC;EACA;;AACA;EACC;;AAGF;EACC;;AAIF;EACC;EACA;EACA;EACA;;AAGA;EACC;EACA;EACA;EACA;;AAEA;EACC;EACA;EACA;;AAEA;EACC;EACA;EACA;;AAEA;EACC;;AAKD;EACC;EACA;EACA;;AAEA;EACC;;AAIF;EACC;;AAOL;EACC;EACA;EACA;EACA;;AAGD;EACC;EACA;EACA;;AAGD;EACC;;AAGD;EACC;EACA;EACA;;AAGD;EACC;;AAGD;EACC;EACA;EACA;EACA;;AAEA;EACC;;AAGD;EACC;;AAGD;EACC;;AAGD;EACC;;AAGD;EACC;EACA;;AAGD;EACC;;AAIF;EACC;EACA;EACA;;AAEA;EACC;EACA;;AAGD;EACC;EACA;;AAGD;EACC;EACA;;AAGD;EACC;EACA;;AAGD;EACC;;AAIF;EACC;EACA;EACA;EACA;;AAGD;EACC;EACA;EACA;EACA;EACA;;AAGD;EACC;;AAGD;EACC;;AACA;AAAA;AAAA;AAAA;EAIC;;AAED;AAAA;EAEC;EACA;;AAED;AAAA;AAAA;EAGC;;;ACtVF;EACC;;AAGD;EACC;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;;;ACdF;EACC;;;AAGD;EACC;EACA;;;AAGD;EACC;EACA;EACA;;;ACZD;EACC;;;AAGD;EACC","file":"agnosui.css"}
1
+ {"version":3,"sourceRoot":"","sources":["../scss/_functions.scss","../scss/tree.scss","../scss/select.scss","../scss/slider.scss","../scss/rating.scss","../scss/carousel.scss","../scss/toaster.scss"],"names":[],"mappings":"AAEA;AAAA;AAAA;AAgBA;AAAA;AAAA;AAAA;ACfA;EAEC;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EAGA;EACA;EACA;;AAEA;EACC;EACA;EACA;EACA;EACA;;AAGD;EACC;EACA;EACA;;AAGD;EACC;EACA;EACA;;AAGD;EACC;EACA;;AAGD;EACC;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;;AAEA;EACC;EACA;;AAGD;EACC;EACA;;AAIA;EACC;;;ACpEJ;EACC;;;AAID;EACC;EACA;EACA;;;ACiBD;EAEC;EACA;EACA;EACA;EAEA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EAEA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EAEA;EACA;EAEA;EACA;EACA;EACA;EAEA;EAEA;EACA;EACA;EAEA;EACA;EACA;EAEA;EACA;EACA;EAEA;EACA;EACA;EACA;EACA;EACA;EACA;EAEA;EACA;EACA;EACA;EACA;EACA;EAEA;EACA;EAGA;;AAEA;EACC;;AAGD;EACC;;AAGD;EAnGA;EACA;EAEA;EAEA;EACA;EACA;EACA;EAEA;EACA;EACA;EAEA;EAEA;EACA;EACA;;AA4FA;EA9GA;EACA;EAEA;EAEA;EACA;EACA;EACA;EAEA;EACA;EACA;EAEA;EAEA;EACA;EACA;;AAuGA;EACC;EACA;EACA;EACA;EACA;EACA;;AAEA;EACC;EACA;EACA;EACA;;AACA;EACC;;AAED;EACC;EACA;;AAED;EACC;EACA;;AAIF;EACC;EACA;EACA;EACA;;AACA;EACC;;AAED;EACC;EACA;;AAED;EACC;EACA;;AAIF;EACC;EACA;EACA;EACA;EACA;EACA;EACA;;AAEA;EACC;EACA;;AACA;EACC;;AAGF;EACC;;AAIF;EACC;EACA;EACA;EACA;;AAGA;EACC;EACA;EACA;EACA;;AAEA;EACC;EACA;EACA;;AAEA;EACC;EACA;EACA;;AAEA;EACC;;AAKD;EACC;EACA;EACA;;AAEA;EACC;;AAIF;EACC;;AAOL;EACC;EACA;EACA;EACA;;AAGD;EACC;EACA;EACA;;AAGD;EACC;;AAGD;EACC;EACA;EACA;;AAGD;EACC;;AAGD;EACC;EACA;EACA;EACA;;AAEA;EACC;;AAGD;EACC;;AAGD;EACC;;AAGD;EACC;;AAGD;EACC;EACA;;AAGD;EACC;;AAIF;EACC;EACA;EACA;;AAEA;EACC;EACA;;AAGD;EACC;EACA;;AAGD;EACC;EACA;;AAGD;EACC;EACA;;AAGD;EACC;;AAIF;EACC;EACA;EACA;EACA;;AAGD;EACC;EACA;EACA;EACA;EACA;;AAGD;EACC;;AAGD;EACC;;AACA;AAAA;AAAA;AAAA;EAIC;;AAED;AAAA;EAEC;EACA;;AAED;AAAA;AAAA;EAGC;;;AC1WH;EACC;;AAGD;EACC;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;;;ACdF;EACC;;;AAGD;EACC;EACA;;;AAGD;EACC;EACA;EACA;;;ACZD;EACC;;;AAGD;EACC","file":"agnosui.css"}
package/css/slider.css CHANGED
@@ -5,12 +5,13 @@
5
5
  --bs-slider-line-height: 1.5;
6
6
  --bs-slider-primary-size: 100%;
7
7
  --bs-slider-secondary-size: 0.25rem;
8
- --bs-slider-margin-block-start: calc((1.25rem - 0.25rem) / 2 + 1rem * 1.5 + 0.5rem);
9
- --bs-slider-margin-block-end: calc((1.25rem - 0.25rem) / 2 + 0.5rem);
10
- --bs-slider-vertical-margin-inline-start: 1rem;
11
- --bs-slider-vertical-margin-inline-end: 3rem;
8
+ --bs-slider-horizontal-margin-block-with-labels: calc((var(--bs-slider-handle-size) - var(--bs-slider-secondary-size)) / 2 + var(--bs-slider-font-size) * 1.5 + 0.5rem);
9
+ --bs-slider-horizontal-margin-block-no-labels: calc((var(--bs-slider-handle-size) - var(--bs-slider-secondary-size)) * 0.75);
10
+ --bs-slider-vertical-margin-inline-no-labels: calc((var(--bs-slider-handle-size) - var(--bs-slider-secondary-size)) * 0.75);
11
+ --bs-slider-vertical-margin-inline-with-labels: calc((var(--bs-slider-handle-size) - var(--bs-slider-secondary-size)) / 2 + 4ch);
12
12
  --bs-slider-translate-vertical: translateY(-50%);
13
13
  --bs-slider-translate-horizontal: translateX(-50%);
14
+ --bs-slider-padding: calc(var(--bs-slider-handle-size) / 2);
14
15
  --bs-slider-handle-color: var(--bs-primary, #0d6efd);
15
16
  --bs-slider-handle-hover-color: var(--bs-primary, #0d6efd);
16
17
  --bs-slider-handle-size: 1.25rem;
@@ -30,7 +31,7 @@
30
31
  --bs-slider-progress-color: var(--bs-primary, #0d6efd);
31
32
  --bs-slider-progress-height: 0.25rem;
32
33
  --bs-slider-progress-vertical-transform: rotate(90deg);
33
- --bs-slider-label-margin-block-start: calc(-1 * (1rem * 1.5 + (1.25rem - 0.25rem) / 2));
34
+ --bs-slider-label-margin-block-start: calc(-1 * (var(--bs-slider-font-size) * var(--bs-slider-line-height) + (var(--bs-slider-handle-size) - var(--bs-slider-secondary-size)) / 2));
34
35
  --bs-slider-label-font-weight: normal;
35
36
  --bs-slider-label-now-font-weight: normal;
36
37
  --bs-slider-label-min-position: 0;
@@ -51,24 +52,26 @@
51
52
  --bs-slider-clickable-area-cursor: pointer;
52
53
  --bs-slider-disabled-color: var(--bs-dark-bg-subtle, #ced4da);
53
54
  --bs-slider-disabled-cursor: not-allowed;
54
- display: flex;
55
- background-color: var(--bs-slider-background-color);
56
- border-radius: var(--bs-slider-border-radius);
57
- font-size: var(--bs-slider-font-size);
58
- line-height: var(--bs-slider-line-height);
59
- position: relative;
55
+ height: 100%;
56
+ }
57
+ .au-slider.au-slider-horizontal {
58
+ padding-inline: var(--bs-slider-padding);
59
+ }
60
+ .au-slider.au-slider-vertical {
61
+ padding-block: var(--bs-slider-padding);
60
62
  }
61
63
  .au-slider.au-slider-lg {
62
64
  --bs-slider-font-size: 1.125rem;
63
65
  --bs-slider-border-radius: calc(0.3125rem / 2);
64
66
  --bs-slider-secondary-size: 0.3125rem;
65
- --bs-slider-margin-block-start: calc((1.5rem - 0.3125rem) / 2 + 1.125rem * 1.5 + 0rem);
66
- --bs-slider-margin-block-end: calc((1.5rem - 0.3125rem) / 2 + 0rem);
67
- --bs-slider-vertical-margin-inline-start: calc((1.5rem - 0.3125rem) / 2 + 0rem);
68
- --bs-slider-vertical-margin-inline-end: calc((1.5rem - 0.3125rem) / 2 + 0rem + 3ch + 0rem);
67
+ --bs-slider-horizontal-margin-block-with-labels: calc((1.5rem - 0.3125rem) / 2 + 1.125rem * 1.5 + 0rem);
68
+ --bs-slider-horizontal-margin-block-no-labels: calc((1.5rem - 0.3125rem) * 0.75);
69
+ --bs-slider-vertical-margin-inline-no-labels: calc((1.5rem - 0.3125rem) * 0.75);
70
+ --bs-slider-vertical-margin-inline-with-labels: calc((1.5rem - 0.3125rem) / 2 + 0rem + 3ch + 0rem);
69
71
  --bs-slider-handle-size: 1.5rem;
70
72
  --bs-slider-tick-primary-size: 1.25rem;
71
73
  --bs-slider-tick-secondary-size: 1.25rem;
74
+ --bs-slider-padding: calc(1.5rem / 2);
72
75
  --bs-slider-label-margin-block-start: calc(-1 * (1.125rem * 1.5 + (1.5rem - 0.3125rem) / 2));
73
76
  --bs-slider-tick-label-margin-block-start: calc(-1 * (1.125rem * 1.5 + (1.25rem - 0.3125rem) / 2));
74
77
  --bs-slider-label-vertical-margin-inline-start: calc((1.5rem - 0.3125rem) / 2 + 0.3125rem + 0rem);
@@ -77,46 +80,61 @@
77
80
  --bs-slider-font-size: 0.875rem;
78
81
  --bs-slider-border-radius: calc(0.2rem / 2);
79
82
  --bs-slider-secondary-size: 0.2rem;
80
- --bs-slider-margin-block-start: calc((1rem - 0.2rem) / 2 + 0.875rem * 1.5 + 0rem);
81
- --bs-slider-margin-block-end: calc((1rem - 0.2rem) / 2 + 0rem);
82
- --bs-slider-vertical-margin-inline-start: calc((1rem - 0.2rem) / 2 + 0rem);
83
- --bs-slider-vertical-margin-inline-end: calc((1rem - 0.2rem) / 2 + 0rem + 3ch + 0rem);
83
+ --bs-slider-horizontal-margin-block-with-labels: calc((1rem - 0.2rem) / 2 + 0.875rem * 1.5 + 0rem);
84
+ --bs-slider-horizontal-margin-block-no-labels: calc((1rem - 0.2rem) * 0.75);
85
+ --bs-slider-vertical-margin-inline-no-labels: calc((1rem - 0.2rem) * 0.75);
86
+ --bs-slider-vertical-margin-inline-with-labels: calc((1rem - 0.2rem) / 2 + 0rem + 3ch + 0rem);
84
87
  --bs-slider-handle-size: 1rem;
85
88
  --bs-slider-tick-primary-size: 0.75rem;
86
89
  --bs-slider-tick-secondary-size: 0.75rem;
90
+ --bs-slider-padding: calc(1rem / 2);
87
91
  --bs-slider-label-margin-block-start: calc(-1 * (0.875rem * 1.5 + (1rem - 0.2rem) / 2));
88
92
  --bs-slider-tick-label-margin-block-start: calc(-1 * (0.875rem * 1.5 + (0.75rem - 0.2rem) / 2));
89
93
  --bs-slider-label-vertical-margin-inline-start: calc((1rem - 0.2rem) / 2 + 0.2rem + 0rem);
90
94
  }
91
- .au-slider.au-slider-horizontal {
95
+ .au-slider .au-slider-content {
96
+ display: flex;
97
+ background-color: var(--bs-slider-background-color);
98
+ border-radius: var(--bs-slider-border-radius);
99
+ font-size: var(--bs-slider-font-size);
100
+ line-height: var(--bs-slider-line-height);
101
+ position: relative;
102
+ }
103
+ .au-slider .au-slider-content.au-slider-horizontal {
92
104
  width: var(--bs-slider-primary-size);
93
105
  height: var(--bs-slider-secondary-size);
94
- margin-block-start: var(--bs-slider-margin-block-start);
95
- margin-block-end: var(--bs-slider-margin-block-end);
106
+ margin-block-start: var(--bs-slider-horizontal-margin-block-no-labels);
107
+ margin-block-end: var(--bs-slider-horizontal-margin-block-no-labels);
108
+ }
109
+ .au-slider .au-slider-content.au-slider-horizontal.au-slider-with-labels {
110
+ margin-block-start: var(--bs-slider-horizontal-margin-block-with-labels);
96
111
  }
97
- .au-slider.au-slider-horizontal .au-slider-handle-horizontal {
112
+ .au-slider .au-slider-content.au-slider-horizontal .au-slider-handle-horizontal {
98
113
  top: calc(50% - var(--bs-slider-handle-size) / 2);
99
114
  transform: var(--bs-slider-translate-horizontal);
100
115
  }
101
- .au-slider.au-slider-horizontal .au-slider-tick-horizontal {
116
+ .au-slider .au-slider-content.au-slider-horizontal .au-slider-tick-horizontal {
102
117
  top: calc(50% - var(--bs-slider-tick-primary-size) / 2);
103
118
  transform: var(--bs-slider-translate-horizontal);
104
119
  }
105
- .au-slider.au-slider-vertical {
120
+ .au-slider .au-slider-content.au-slider-vertical {
106
121
  height: var(--bs-slider-primary-size);
107
122
  width: var(--bs-slider-secondary-size);
108
- margin-inline-start: var(--bs-slider-vertical-margin-inline-start);
109
- margin-inline-end: var(--bs-slider-vertical-margin-inline-end);
123
+ margin-inline-start: var(--bs-slider-vertical-margin-inline-no-labels);
124
+ margin-inline-end: var(--bs-slider-vertical-margin-inline-with-labels);
125
+ }
126
+ .au-slider .au-slider-content.au-slider-vertical.au-slider-with-labels {
127
+ margin-inline-end: var(--bs-slider-vertical-margin-inline-with-labels);
110
128
  }
111
- .au-slider.au-slider-vertical .au-slider-handle-vertical {
129
+ .au-slider .au-slider-content.au-slider-vertical .au-slider-handle-vertical {
112
130
  left: calc(50% - var(--bs-slider-handle-size) / 2);
113
131
  transform: var(--bs-slider-translate-vertical);
114
132
  }
115
- .au-slider.au-slider-vertical .au-slider-tick-vertical {
133
+ .au-slider .au-slider-content.au-slider-vertical .au-slider-tick-vertical {
116
134
  left: calc(50% - var(--bs-slider-tick-primary-size) / 2);
117
135
  transform: var(--bs-slider-translate-vertical);
118
136
  }
119
- .au-slider .au-slider-handle {
137
+ .au-slider .au-slider-content .au-slider-handle {
120
138
  background-color: var(--bs-slider-handle-color);
121
139
  border: var(--bs-slider-handle-border);
122
140
  border-radius: var(--bs-slider-handle-border-radius);
@@ -125,156 +143,156 @@
125
143
  width: var(--bs-slider-handle-size);
126
144
  height: var(--bs-slider-handle-size);
127
145
  }
128
- .au-slider .au-slider-handle:not([disabled]):hover {
146
+ .au-slider .au-slider-content .au-slider-handle:not([disabled]):hover {
129
147
  border: var(--bs-slider-handle-border-hover);
130
148
  background-color: var(--bs-slider-handle-hover-color);
131
149
  }
132
- .au-slider .au-slider-handle:not([disabled]):hover:focus-visible {
150
+ .au-slider .au-slider-content .au-slider-handle:not([disabled]):hover:focus-visible {
133
151
  box-shadow: var(--bs-slider-handle-focus-hover-box-shadow);
134
152
  }
135
- .au-slider .au-slider-handle:focus-visible {
153
+ .au-slider .au-slider-content .au-slider-handle:focus-visible {
136
154
  box-shadow: var(--bs-slider-handle-focus-box-shadow);
137
155
  }
138
- .au-slider .au-slider-tick {
156
+ .au-slider .au-slider-content .au-slider-tick {
139
157
  position: absolute;
140
158
  height: var(--bs-slider-tick-primary-size);
141
159
  width: var(--bs-slider-tick-secondary-size);
142
160
  cursor: var(--bs-slider-clickable-area-cursor);
143
161
  }
144
- .au-slider .au-slider-tick svg {
162
+ .au-slider .au-slider-content .au-slider-tick svg {
145
163
  display: block;
146
164
  width: var(--bs-slider-tick-secondary-size);
147
165
  height: var(--bs-slider-tick-primary-size);
148
166
  fill: none;
149
167
  }
150
- .au-slider .au-slider-tick svg circle {
168
+ .au-slider .au-slider-content .au-slider-tick svg circle {
151
169
  cx: 50%;
152
170
  cy: 50%;
153
171
  fill: var(--bs-slider-tick-fill-color);
154
172
  }
155
- .au-slider .au-slider-tick svg circle.au-slider-tick-outer {
173
+ .au-slider .au-slider-content .au-slider-tick svg circle.au-slider-tick-outer {
156
174
  r: 45%;
157
175
  stroke: var(--bs-slider-tick-neutral-color);
158
176
  stroke-width: 1.5;
159
177
  }
160
- .au-slider .au-slider-tick svg circle.au-slider-tick-outer.au-slider-tick-disabled {
178
+ .au-slider .au-slider-content .au-slider-tick svg circle.au-slider-tick-outer.au-slider-tick-disabled {
161
179
  stroke: var(--bs-slider-tick-disabled-color);
162
180
  }
163
- .au-slider .au-slider-tick svg circle.au-slider-tick-selected.au-slider-tick-outer {
181
+ .au-slider .au-slider-content .au-slider-tick svg circle.au-slider-tick-selected.au-slider-tick-outer {
164
182
  fill: var(--bs-slider-tick-selected-color);
165
183
  stroke: none;
166
184
  r: 50%;
167
185
  }
168
- .au-slider .au-slider-tick svg circle.au-slider-tick-selected.au-slider-tick-outer.au-slider-tick-disabled {
186
+ .au-slider .au-slider-content .au-slider-tick svg circle.au-slider-tick-selected.au-slider-tick-outer.au-slider-tick-disabled {
169
187
  fill: var(--bs-slider-tick-disabled-color);
170
188
  }
171
- .au-slider .au-slider-tick svg circle.au-slider-tick-selected.au-slider-tick-inner {
189
+ .au-slider .au-slider-content .au-slider-tick svg circle.au-slider-tick-selected.au-slider-tick-inner {
172
190
  r: 25%;
173
191
  }
174
- .au-slider .au-slider-tick-label {
192
+ .au-slider .au-slider-content .au-slider-tick-label {
175
193
  position: absolute;
176
194
  text-wrap: nowrap;
177
195
  transform: var(--bs-slider-translate-horizontal);
178
196
  margin-block-start: var(--bs-slider-label-margin-block-start);
179
197
  }
180
- .au-slider .au-slider-tick-label-vertical {
198
+ .au-slider .au-slider-content .au-slider-tick-label-vertical {
181
199
  position: absolute;
182
200
  margin-inline-start: var(--bs-slider-label-vertical-margin-inline-start);
183
201
  transform: var(--bs-slider-tick-label-translate-vertical);
184
202
  }
185
- .au-slider .au-slider-tick-label-now {
203
+ .au-slider .au-slider-content .au-slider-tick-label-now {
186
204
  font-weight: var(--bs-slider-label-now-font-weight);
187
205
  }
188
- .au-slider .au-slider-progress {
206
+ .au-slider .au-slider-content .au-slider-progress {
189
207
  background-color: var(--bs-slider-progress-color);
190
208
  border-radius: var(--bs-slider-border-radius);
191
209
  position: absolute;
192
210
  }
193
- .au-slider .au-slider-progress-vertical {
211
+ .au-slider .au-slider-content .au-slider-progress-vertical {
194
212
  transform: var(--bs-slider-progress-vertical-transform);
195
213
  }
196
- .au-slider .au-slider-label {
214
+ .au-slider .au-slider-content .au-slider-label {
197
215
  font-weight: var(--bs-slider-label-font-weight);
198
216
  margin-block-start: var(--bs-slider-label-margin-block-start);
199
217
  position: absolute;
200
218
  text-wrap: nowrap;
201
219
  }
202
- .au-slider .au-slider-label.au-slider-label-min:not(.au-slider-rtl) {
220
+ .au-slider .au-slider-content .au-slider-label.au-slider-label-min:not(.au-slider-rtl) {
203
221
  left: var(--bs-slider-label-min-position);
204
222
  }
205
- .au-slider .au-slider-label.au-slider-label-min.au-slider-rtl {
223
+ .au-slider .au-slider-content .au-slider-label.au-slider-label-min.au-slider-rtl {
206
224
  right: var(--bs-slider-label-max-position);
207
225
  }
208
- .au-slider .au-slider-label.au-slider-label-max:not(.au-slider-rtl) {
226
+ .au-slider .au-slider-content .au-slider-label.au-slider-label-max:not(.au-slider-rtl) {
209
227
  right: var(--bs-slider-label-max-position);
210
228
  }
211
- .au-slider .au-slider-label.au-slider-label-max.au-slider-rtl {
229
+ .au-slider .au-slider-content .au-slider-label.au-slider-label-max.au-slider-rtl {
212
230
  left: var(--bs-slider-label-min-position);
213
231
  }
214
- .au-slider .au-slider-label.au-slider-label-now {
232
+ .au-slider .au-slider-content .au-slider-label.au-slider-label-now {
215
233
  font-weight: var(--bs-slider-label-now-font-weight);
216
234
  transform: var(--bs-slider-label-now-transform);
217
235
  }
218
- .au-slider .au-slider-label.invisible {
236
+ .au-slider .au-slider-content .au-slider-label.invisible {
219
237
  visibility: hidden;
220
238
  }
221
- .au-slider .au-slider-label-vertical {
239
+ .au-slider .au-slider-content .au-slider-label-vertical {
222
240
  position: absolute;
223
241
  margin-inline-start: var(--bs-slider-label-vertical-margin-inline-start);
224
242
  white-space: var(--bs-slider-label-vertical-white-space);
225
243
  }
226
- .au-slider .au-slider-label-vertical.au-slider-label-vertical-min:not(.au-slider-rtl) {
244
+ .au-slider .au-slider-content .au-slider-label-vertical.au-slider-label-vertical-min:not(.au-slider-rtl) {
227
245
  top: var(--bs-slider-label-vertical-min-top);
228
246
  transform: var(--bs-slider-label-vertical-min-transform);
229
247
  }
230
- .au-slider .au-slider-label-vertical.au-slider-label-vertical-min.au-slider-rtl {
248
+ .au-slider .au-slider-content .au-slider-label-vertical.au-slider-label-vertical-min.au-slider-rtl {
231
249
  top: var(--bs-slider-label-vertical-max-top);
232
250
  transform: var(--bs-slider-label-vertical-max-transform);
233
251
  }
234
- .au-slider .au-slider-label-vertical.au-slider-label-vertical-max:not(.au-slider-rtl) {
252
+ .au-slider .au-slider-content .au-slider-label-vertical.au-slider-label-vertical-max:not(.au-slider-rtl) {
235
253
  top: var(--bs-slider-label-vertical-max-top);
236
254
  transform: var(--bs-slider-label-vertical-max-transform);
237
255
  }
238
- .au-slider .au-slider-label-vertical.au-slider-label-vertical-max.au-slider-rtl {
256
+ .au-slider .au-slider-content .au-slider-label-vertical.au-slider-label-vertical-max.au-slider-rtl {
239
257
  top: var(--bs-slider-label-vertical-min-top);
240
258
  transform: var(--bs-slider-label-vertical-min-transform);
241
259
  }
242
- .au-slider .au-slider-label-vertical.au-slider-label-vertical-now {
260
+ .au-slider .au-slider-content .au-slider-label-vertical.au-slider-label-vertical-now {
243
261
  transform: var(--bs-slider-label-vertical-now-transform);
244
262
  }
245
- .au-slider .au-slider-clickable-area {
263
+ .au-slider .au-slider-content .au-slider-clickable-area {
246
264
  height: var(--bs-slider-clickable-area-main-size);
247
265
  width: var(--bs-slider-clickable-area-secondary-size);
248
266
  transform: var(--bs-slider-clickable-area-translate);
249
267
  cursor: var(--bs-slider-clickable-area-cursor);
250
268
  }
251
- .au-slider .au-slider-clickable-area-vertical {
269
+ .au-slider .au-slider-content .au-slider-clickable-area-vertical {
252
270
  width: var(--bs-slider-clickable-area-main-size);
253
271
  height: var(--bs-slider-clickable-area-secondary-size);
254
272
  transform: var(--bs-slider-clickable-area-vertical-translate);
255
273
  flex-shrink: var(--bs-slider-clickable-area-vertical-flex-shrink);
256
274
  cursor: var(--bs-slider-clickable-area-cursor);
257
275
  }
258
- .au-slider .au-slider-clickable-area-with-ticks {
276
+ .au-slider .au-slider-content .au-slider-clickable-area-with-ticks {
259
277
  cursor: default;
260
278
  }
261
- .au-slider.disabled {
279
+ .au-slider .au-slider-content.disabled {
262
280
  cursor: var(--bs-slider-disabled-cursor);
263
281
  }
264
- .au-slider.disabled .au-slider-label,
265
- .au-slider.disabled .au-slider-label-vertical,
266
- .au-slider.disabled .au-slider-tick-label,
267
- .au-slider.disabled .au-slider-tick-label-vertical {
282
+ .au-slider .au-slider-content.disabled .au-slider-label,
283
+ .au-slider .au-slider-content.disabled .au-slider-label-vertical,
284
+ .au-slider .au-slider-content.disabled .au-slider-tick-label,
285
+ .au-slider .au-slider-content.disabled .au-slider-tick-label-vertical {
268
286
  color: var(--bs-slider-disabled-color);
269
287
  }
270
- .au-slider.disabled .au-slider-progress,
271
- .au-slider.disabled .au-slider-handle {
288
+ .au-slider .au-slider-content.disabled .au-slider-progress,
289
+ .au-slider .au-slider-content.disabled .au-slider-handle {
272
290
  background-color: var(--bs-slider-disabled-color);
273
291
  cursor: var(--bs-slider-disabled-cursor);
274
292
  }
275
- .au-slider.disabled .au-slider-clickable-area,
276
- .au-slider.disabled .au-slider-clickable-area-vertical,
277
- .au-slider.disabled .au-slider-tick {
293
+ .au-slider .au-slider-content.disabled .au-slider-clickable-area,
294
+ .au-slider .au-slider-content.disabled .au-slider-clickable-area-vertical,
295
+ .au-slider .au-slider-content.disabled .au-slider-tick {
278
296
  cursor: var(--bs-slider-disabled-cursor);
279
297
  }
280
298
 
package/css/slider.css.map CHANGED
@@ -1 +1 @@
1
- {"version":3,"sourceRoot":"","sources":["../scss/slider.scss"],"names":[],"mappings":"AAyBA;EAEC;EACA;EACA;EACA;EAEA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EAEA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EAEA;EACA;EAEA;EACA;EACA;EACA;EAEA;EAEA;EACA;EACA;EAEA;EACA;EACA;EAEA;EACA;EACA;EAEA;EACA;EACA;EACA;EACA;EACA;EACA;EAEA;EACA;EACA;EACA;EACA;EACA;EAEA;EACA;EAGA;EACA;EACA;EACA;EACA;EACA;;AAEA;EA7FA;EACA;EAEA;EAEA;EACA;EACA;EACA;EAEA;EACA;EACA;EAEA;EACA;EACA;;AAwFA;EAxGA;EACA;EAEA;EAEA;EACA;EACA;EACA;EAEA;EACA;EACA;EAEA;EACA;EACA;;AAmGA;EACC;EACA;EACA;EACA;;AACA;EACC;EACA;;AAED;EACC;EACA;;AAIF;EACC;EACA;EACA;EACA;;AACA;EACC;EACA;;AAED;EACC;EACA;;AAIF;EACC;EACA;EACA;EACA;EACA;EACA;EACA;;AAEA;EACC;EACA;;AACA;EACC;;AAGF;EACC;;AAIF;EACC;EACA;EACA;EACA;;AAGA;EACC;EACA;EACA;EACA;;AAEA;EACC;EACA;EACA;;AAEA;EACC;EACA;EACA;;AAEA;EACC;;AAKD;EACC;EACA;EACA;;AAEA;EACC;;AAIF;EACC;;AAOL;EACC;EACA;EACA;EACA;;AAGD;EACC;EACA;EACA;;AAGD;EACC;;AAGD;EACC;EACA;EACA;;AAGD;EACC;;AAGD;EACC;EACA;EACA;EACA;;AAEA;EACC;;AAGD;EACC;;AAGD;EACC;;AAGD;EACC;;AAGD;EACC;EACA;;AAGD;EACC;;AAIF;EACC;EACA;EACA;;AAEA;EACC;EACA;;AAGD;EACC;EACA;;AAGD;EACC;EACA;;AAGD;EACC;EACA;;AAGD;EACC;;AAIF;EACC;EACA;EACA;EACA;;AAGD;EACC;EACA;EACA;EACA;EACA;;AAGD;EACC;;AAGD;EACC;;AACA;AAAA;AAAA;AAAA;EAIC;;AAED;AAAA;EAEC;EACA;;AAED;AAAA;AAAA;EAGC","file":"slider.css"}
1
+ {"version":3,"sourceRoot":"","sources":["../scss/slider.scss"],"names":[],"mappings":"AA2BA;EAEC;EACA;EACA;EACA;EAEA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EAEA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EAEA;EACA;EAEA;EACA;EACA;EACA;EAEA;EAEA;EACA;EACA;EAEA;EACA;EACA;EAEA;EACA;EACA;EAEA;EACA;EACA;EACA;EACA;EACA;EACA;EAEA;EACA;EACA;EACA;EACA;EACA;EAEA;EACA;EAGA;;AAEA;EACC;;AAGD;EACC;;AAGD;EAnGA;EACA;EAEA;EAEA;EACA;EACA;EACA;EAEA;EACA;EACA;EAEA;EAEA;EACA;EACA;;AA4FA;EA9GA;EACA;EAEA;EAEA;EACA;EACA;EACA;EAEA;EACA;EACA;EAEA;EAEA;EACA;EACA;;AAuGA;EACC;EACA;EACA;EACA;EACA;EACA;;AAEA;EACC;EACA;EACA;EACA;;AACA;EACC;;AAED;EACC;EACA;;AAED;EACC;EACA;;AAIF;EACC;EACA;EACA;EACA;;AACA;EACC;;AAED;EACC;EACA;;AAED;EACC;EACA;;AAIF;EACC;EACA;EACA;EACA;EACA;EACA;EACA;;AAEA;EACC;EACA;;AACA;EACC;;AAGF;EACC;;AAIF;EACC;EACA;EACA;EACA;;AAGA;EACC;EACA;EACA;EACA;;AAEA;EACC;EACA;EACA;;AAEA;EACC;EACA;EACA;;AAEA;EACC;;AAKD;EACC;EACA;EACA;;AAEA;EACC;;AAIF;EACC;;AAOL;EACC;EACA;EACA;EACA;;AAGD;EACC;EACA;EACA;;AAGD;EACC;;AAGD;EACC;EACA;EACA;;AAGD;EACC;;AAGD;EACC;EACA;EACA;EACA;;AAEA;EACC;;AAGD;EACC;;AAGD;EACC;;AAGD;EACC;;AAGD;EACC;EACA;;AAGD;EACC;;AAIF;EACC;EACA;EACA;;AAEA;EACC;EACA;;AAGD;EACC;EACA;;AAGD;EACC;EACA;;AAGD;EACC;EACA;;AAGD;EACC;;AAIF;EACC;EACA;EACA;EACA;;AAGD;EACC;EACA;EACA;EACA;EACA;;AAGD;EACC;;AAGD;EACC;;AACA;AAAA;AAAA;AAAA;EAIC;;AAED;AAAA;EAEC;EACA;;AAED;AAAA;AAAA;EAGC","file":"slider.css"}
package/package.json CHANGED
@@ -1,7 +1,7 @@
1
1
  {
2
2
  "name": "@agnos-ui/core-bootstrap",
3
3
  "description": "Styles and component interface extensions necessary to use AgnosUI with Bootstrap.",
4
- "version": "0.9.0-next.0",
4
+ "version": "0.9.1",
5
5
  "keywords": [
6
6
  "bootstrap",
7
7
  "css",
@@ -62,7 +62,7 @@
62
62
  }
63
63
  },
64
64
  "dependencies": {
65
- "@agnos-ui/core": "0.9.0-next.0"
65
+ "@agnos-ui/core": "0.9.1"
66
66
  },
67
67
  "peerDependencies": {
68
68
  "@amadeus-it-group/tansu": "^2.0.0"
package/scss/_variables.scss CHANGED
@@ -15,8 +15,6 @@ $au-slider-line-height: 1.5 !default;
15
15
  $au-slider-primary-size: 100% !default;
16
16
  $au-slider-secondary-size: 0.25rem !default;
17
17
  $au-slider-border-radius: 0.125rem !default;
18
- $au-slider-vertical-margin-inline-start: 1rem !default;
19
- $au-slider-vertical-margin-inline-end: 3rem !default;
20
18
  $au-slider-translate-vertical: translateY(-50%) !default;
21
19
  $au-slider-translate-horizontal: translateX(-50%) !default;
22
20
  $au-slider-handle-color: var(--#{$prefix}primary, #0d6efd) !default;
@@ -38,12 +36,23 @@ $au-slider-tick-label-translate-vertical: translateY(75%) !default;
38
36
  $au-slider-progress-color: var(--#{$prefix}primary, #0d6efd) !default;
39
37
  $au-slider-progress-height: 0.25rem !default;
40
38
  $au-slider-progress-vertical-transform: rotate(90deg) !default;
41
- $au-slider-margin-block-end: calc((#{$au-slider-handle-size} - #{$au-slider-secondary-size}) / 2 + 0.5rem) !default;
42
- $au-slider-margin-block-start: calc((#{$au-slider-handle-size} - #{$au-slider-secondary-size}) / 2 + #{$au-slider-font-size} * 1.5 + 0.5rem) !default;
39
+ $au-slider-padding: calc(var(--#{$prefix}slider-handle-size) / 2) !default;
40
+ $au-slider-vertical-margin-inline-no-labels: calc((var(--#{$prefix}slider-handle-size) - var(--#{$prefix}slider-secondary-size)) * 0.75) !default;
41
+ $au-slider-vertical-margin-inline-with-labels: calc(
42
+ (var(--#{$prefix}slider-handle-size) - var(--#{$prefix}slider-secondary-size)) / 2 + 4ch
43
+ ) !default;
44
+ $au-slider-horizontal-margin-block-no-labels: calc((var(--#{$prefix}slider-handle-size) - var(--#{$prefix}slider-secondary-size)) * 0.75) !default;
45
+ $au-slider-horizontal-margin-block-with-labels: calc(
46
+ (var(--#{$prefix}slider-handle-size) - var(--#{$prefix}slider-secondary-size)) / 2 + var(--#{$prefix}slider-font-size) * 1.5 + 0.5rem
47
+ ) !default;
43
48
  $au-slider-label-now-font-weight: normal !default;
44
49
  $au-slider-label-font-weight: normal !default;
45
50
  $au-slider-label-margin-block-start: calc(
46
- -1 * (#{$au-slider-font-size} * #{$au-slider-line-height} + (#{$au-slider-handle-size} - #{$au-slider-secondary-size}) / 2)
51
+ -1 *
52
+ (
53
+ var(--#{$prefix}slider-font-size) * var(--#{$prefix}slider-line-height) +
54
+ (var(--#{$prefix}slider-handle-size) - var(--#{$prefix}slider-secondary-size)) / 2
55
+ )
47
56
  ) !default;
48
57
  $au-slider-label-min-position: 0 !default;
49
58
  $au-slider-label-max-position: 0 !default;
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};
@@ -90,12 +93,15 @@
90
93
  --#{variables.$prefix}slider-disabled-cursor: #{variables.$au-slider-disabled-cursor};
91
94
  // scss-docs-end slider-css-vars
92
95
 
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;
96
+ height: 100%;
97
+
98
+ &.au-slider-horizontal {
99
+ padding-inline: var(--#{variables.$prefix}slider-padding);
100
+ }
101
+
102
+ &.au-slider-vertical {
103
+ padding-block: var(--#{variables.$prefix}slider-padding);
104
+ }
99
105
 
100
106
  &.au-slider-lg {
101
107
  @include setSliderSize(
@@ -119,229 +125,244 @@
119
125
  );
120
126
  }
121
127
 
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);
128
+ .au-slider-content {
129
+ display: flex;
130
+ background-color: var(--#{variables.$prefix}slider-background-color);
131
+ border-radius: var(--#{variables.$prefix}slider-border-radius);
132
+ font-size: var(--#{variables.$prefix}slider-font-size);
133
+ line-height: var(--#{variables.$prefix}slider-line-height);
134
+ position: relative;
135
+
136
+ &.au-slider-horizontal {
137
+ width: var(--#{variables.$prefix}slider-primary-size);
138
+ height: var(--#{variables.$prefix}slider-secondary-size);
139
+ margin-block-start: var(--#{variables.$prefix}slider-horizontal-margin-block-no-labels);
140
+ margin-block-end: var(--#{variables.$prefix}slider-horizontal-margin-block-no-labels);
141
+ &.au-slider-with-labels {
142
+ margin-block-start: var(--#{variables.$prefix}slider-horizontal-margin-block-with-labels);
143
+ }
144
+ .au-slider-handle-horizontal {
145
+ top: calc(50% - var(--#{variables.$prefix}slider-handle-size) / 2);
146
+ transform: var(--#{variables.$prefix}slider-translate-horizontal);
147
+ }
148
+ .au-slider-tick-horizontal {
149
+ top: calc(50% - var(--#{variables.$prefix}slider-tick-primary-size) / 2);
150
+ transform: var(--#{variables.$prefix}slider-translate-horizontal);
151
+ }
134
152
  }
135
- }
136
153
 
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);
154
+ &.au-slider-vertical {
155
+ height: var(--#{variables.$prefix}slider-primary-size);
156
+ width: var(--#{variables.$prefix}slider-secondary-size);
157
+ margin-inline-start: var(--#{variables.$prefix}slider-vertical-margin-inline-no-labels);
158
+ margin-inline-end: var(--#{variables.$prefix}slider-vertical-margin-inline-with-labels);
159
+ &.au-slider-with-labels {
160
+ margin-inline-end: var(--#{variables.$prefix}slider-vertical-margin-inline-with-labels);
161
+ }
162
+ .au-slider-handle-vertical {
163
+ left: calc(50% - var(--#{variables.$prefix}slider-handle-size) / 2);
164
+ transform: var(--#{variables.$prefix}slider-translate-vertical);
165
+ }
166
+ .au-slider-tick-vertical {
167
+ left: calc(50% - var(--#{variables.$prefix}slider-tick-primary-size) / 2);
168
+ transform: var(--#{variables.$prefix}slider-translate-vertical);
169
+ }
149
170
  }
150
- }
151
171
 
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);
172
+ .au-slider-handle {
173
+ background-color: var(--#{variables.$prefix}slider-handle-color);
174
+ border: var(--#{variables.$prefix}slider-handle-border);
175
+ border-radius: var(--#{variables.$prefix}slider-handle-border-radius);
176
+ outline: var(--#{variables.$prefix}slider-handle-outline);
177
+ position: absolute;
178
+ width: var(--#{variables.$prefix}slider-handle-size);
179
+ height: var(--#{variables.$prefix}slider-handle-size);
180
+
181
+ &:not([disabled]):hover {
182
+ border: var(--#{variables.$prefix}slider-handle-border-hover);
183
+ background-color: var(--#{variables.$prefix}slider-handle-hover-color);
184
+ &:focus-visible {
185
+ box-shadow: var(--#{variables.$prefix}slider-handle-focus-hover-box-shadow);
186
+ }
187
+ }
164
188
  &:focus-visible {
165
- box-shadow: var(--#{variables.$prefix}slider-handle-focus-hover-box-shadow);
189
+ box-shadow: var(--#{variables.$prefix}slider-handle-focus-box-shadow);
166
190
  }
167
191
  }
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
192
 
179
- // center align the svg along the slider axis
180
- svg {
181
- display: block;
182
- width: var(--#{variables.$prefix}slider-tick-secondary-size);
193
+ .au-slider-tick {
194
+ position: absolute;
183
195
  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);
196
+ width: var(--#{variables.$prefix}slider-tick-secondary-size);
197
+ cursor: var(--#{variables.$prefix}slider-clickable-area-cursor);
190
198
 
191
- &.au-slider-tick-outer {
192
- r: 45%;
193
- stroke: var(--#{variables.$prefix}slider-tick-neutral-color);
194
- stroke-width: 1.5;
199
+ // center align the svg along the slider axis
200
+ svg {
201
+ display: block;
202
+ width: var(--#{variables.$prefix}slider-tick-secondary-size);
203
+ height: var(--#{variables.$prefix}slider-tick-primary-size);
204
+ fill: none;
195
205
 
196
- &.au-slider-tick-disabled {
197
- stroke: var(--#{variables.$prefix}slider-tick-disabled-color);
198
- }
199
- }
206
+ circle {
207
+ cx: 50%;
208
+ cy: 50%;
209
+ fill: var(--#{variables.$prefix}slider-tick-fill-color);
200
210
 
201
- &.au-slider-tick-selected {
202
211
  &.au-slider-tick-outer {
203
- fill: var(--#{variables.$prefix}slider-tick-selected-color);
204
- stroke: none;
205
- r: 50%;
212
+ r: 45%;
213
+ stroke: var(--#{variables.$prefix}slider-tick-neutral-color);
214
+ stroke-width: 1.5;
206
215
 
207
216
  &.au-slider-tick-disabled {
208
- fill: var(--#{variables.$prefix}slider-tick-disabled-color);
217
+ stroke: var(--#{variables.$prefix}slider-tick-disabled-color);
209
218
  }
210
219
  }
211
220
 
212
- &.au-slider-tick-inner {
213
- r: 25%;
221
+ &.au-slider-tick-selected {
222
+ &.au-slider-tick-outer {
223
+ fill: var(--#{variables.$prefix}slider-tick-selected-color);
224
+ stroke: none;
225
+ r: 50%;
226
+
227
+ &.au-slider-tick-disabled {
228
+ fill: var(--#{variables.$prefix}slider-tick-disabled-color);
229
+ }
230
+ }
231
+
232
+ &.au-slider-tick-inner {
233
+ r: 25%;
234
+ }
214
235
  }
215
236
  }
216
237
  }
217
238
  }
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
239
 
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
-
253
- &.au-slider-label-min:not(.au-slider-rtl) {
254
- left: var(--#{variables.$prefix}slider-label-min-position);
240
+ .au-slider-tick-label {
241
+ position: absolute;
242
+ text-wrap: nowrap;
243
+ transform: var(--#{variables.$prefix}slider-translate-horizontal);
244
+ margin-block-start: var(--#{variables.$prefix}slider-label-margin-block-start);
255
245
  }
256
246
 
257
- &.au-slider-label-min.au-slider-rtl {
258
- right: var(--#{variables.$prefix}slider-label-max-position);
247
+ .au-slider-tick-label-vertical {
248
+ position: absolute;
249
+ margin-inline-start: var(--#{variables.$prefix}slider-label-vertical-margin-inline-start);
250
+ transform: var(--#{variables.$prefix}slider-tick-label-translate-vertical);
259
251
  }
260
252
 
261
- &.au-slider-label-max:not(.au-slider-rtl) {
262
- right: var(--#{variables.$prefix}slider-label-max-position);
253
+ .au-slider-tick-label-now {
254
+ font-weight: var(--#{variables.$prefix}slider-label-now-font-weight);
263
255
  }
264
256
 
265
- &.au-slider-label-max.au-slider-rtl {
266
- left: var(--#{variables.$prefix}slider-label-min-position);
257
+ .au-slider-progress {
258
+ background-color: var(--#{variables.$prefix}slider-progress-color);
259
+ border-radius: var(--#{variables.$prefix}slider-border-radius);
260
+ position: absolute;
267
261
  }
268
262
 
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);
263
+ .au-slider-progress-vertical {
264
+ transform: var(--#{variables.$prefix}slider-progress-vertical-transform);
272
265
  }
273
266
 
274
- &.invisible {
275
- visibility: hidden;
276
- }
277
- }
267
+ .au-slider-label {
268
+ font-weight: var(--#{variables.$prefix}slider-label-font-weight);
269
+ margin-block-start: var(--#{variables.$prefix}slider-label-margin-block-start);
270
+ position: absolute;
271
+ text-wrap: nowrap;
278
272
 
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);
273
+ &.au-slider-label-min:not(.au-slider-rtl) {
274
+ left: var(--#{variables.$prefix}slider-label-min-position);
275
+ }
283
276
 
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
- }
277
+ &.au-slider-label-min.au-slider-rtl {
278
+ right: var(--#{variables.$prefix}slider-label-max-position);
279
+ }
288
280
 
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
- }
281
+ &.au-slider-label-max:not(.au-slider-rtl) {
282
+ right: var(--#{variables.$prefix}slider-label-max-position);
283
+ }
293
284
 
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
- }
285
+ &.au-slider-label-max.au-slider-rtl {
286
+ left: var(--#{variables.$prefix}slider-label-min-position);
287
+ }
298
288
 
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
- }
289
+ &.au-slider-label-now {
290
+ font-weight: var(--#{variables.$prefix}slider-label-now-font-weight);
291
+ transform: var(--#{variables.$prefix}slider-label-now-transform);
292
+ }
303
293
 
304
- &.au-slider-label-vertical-now {
305
- transform: var(--#{variables.$prefix}slider-label-vertical-now-transform);
294
+ &.invisible {
295
+ visibility: hidden;
296
+ }
306
297
  }
307
- }
308
298
 
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
- }
299
+ .au-slider-label-vertical {
300
+ position: absolute;
301
+ margin-inline-start: var(--#{variables.$prefix}slider-label-vertical-margin-inline-start);
302
+ white-space: var(--#{variables.$prefix}slider-label-vertical-white-space);
315
303
 
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
- }
304
+ &.au-slider-label-vertical-min:not(.au-slider-rtl) {
305
+ top: var(--#{variables.$prefix}slider-label-vertical-min-top);
306
+ transform: var(--#{variables.$prefix}slider-label-vertical-min-transform);
307
+ }
323
308
 
324
- .au-slider-clickable-area-with-ticks {
325
- cursor: default;
326
- }
309
+ &.au-slider-label-vertical-min.au-slider-rtl {
310
+ top: var(--#{variables.$prefix}slider-label-vertical-max-top);
311
+ transform: var(--#{variables.$prefix}slider-label-vertical-max-transform);
312
+ }
327
313
 
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);
314
+ &.au-slider-label-vertical-max:not(.au-slider-rtl) {
315
+ top: var(--#{variables.$prefix}slider-label-vertical-max-top);
316
+ transform: var(--#{variables.$prefix}slider-label-vertical-max-transform);
317
+ }
318
+
319
+ &.au-slider-label-vertical-max.au-slider-rtl {
320
+ top: var(--#{variables.$prefix}slider-label-vertical-min-top);
321
+ transform: var(--#{variables.$prefix}slider-label-vertical-min-transform);
322
+ }
323
+
324
+ &.au-slider-label-vertical-now {
325
+ transform: var(--#{variables.$prefix}slider-label-vertical-now-transform);
326
+ }
335
327
  }
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);
328
+
329
+ .au-slider-clickable-area {
330
+ height: var(--#{variables.$prefix}slider-clickable-area-main-size);
331
+ width: var(--#{variables.$prefix}slider-clickable-area-secondary-size);
332
+ transform: var(--#{variables.$prefix}slider-clickable-area-translate);
333
+ cursor: var(--#{variables.$prefix}slider-clickable-area-cursor);
340
334
  }
341
- .au-slider-clickable-area,
342
- .au-slider-clickable-area-vertical,
343
- .au-slider-tick {
335
+
336
+ .au-slider-clickable-area-vertical {
337
+ width: var(--#{variables.$prefix}slider-clickable-area-main-size);
338
+ height: var(--#{variables.$prefix}slider-clickable-area-secondary-size);
339
+ transform: var(--#{variables.$prefix}slider-clickable-area-vertical-translate);
340
+ flex-shrink: var(--#{variables.$prefix}slider-clickable-area-vertical-flex-shrink);
341
+ cursor: var(--#{variables.$prefix}slider-clickable-area-cursor);
342
+ }
343
+
344
+ .au-slider-clickable-area-with-ticks {
345
+ cursor: default;
346
+ }
347
+
348
+ &.disabled {
344
349
  cursor: var(--#{variables.$prefix}slider-disabled-cursor);
350
+ .au-slider-label,
351
+ .au-slider-label-vertical,
352
+ .au-slider-tick-label,
353
+ .au-slider-tick-label-vertical {
354
+ color: var(--#{variables.$prefix}slider-disabled-color);
355
+ }
356
+ .au-slider-progress,
357
+ .au-slider-handle {
358
+ background-color: var(--#{variables.$prefix}slider-disabled-color);
359
+ cursor: var(--#{variables.$prefix}slider-disabled-cursor);
360
+ }
361
+ .au-slider-clickable-area,
362
+ .au-slider-clickable-area-vertical,
363
+ .au-slider-tick {
364
+ cursor: var(--#{variables.$prefix}slider-disabled-cursor);
365
+ }
345
366
  }
346
367
  }
347
368
  }