@oruga-ui/theme-oruga 0.7.1 → 0.8.1

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (48) hide show
  1. package/LICENSE +1 -1
  2. package/README.md +5 -5
  3. package/dist/scss/components/_autocomplete.scss +3 -12
  4. package/dist/scss/components/_breadcrumb.scss +122 -103
  5. package/dist/scss/components/_button.scss +228 -173
  6. package/dist/scss/components/_carousel.scss +164 -142
  7. package/dist/scss/components/_checkbox.scss +118 -118
  8. package/dist/scss/components/_collapse.scss +1 -1
  9. package/dist/scss/components/_datepicker.scss +228 -290
  10. package/dist/scss/components/_datetimepicker.scss +8 -2
  11. package/dist/scss/components/_dialog.scss +243 -0
  12. package/dist/scss/components/_dropdown.scss +190 -164
  13. package/dist/scss/components/_field.scss +68 -39
  14. package/dist/scss/components/_icon.scss +24 -29
  15. package/dist/scss/components/_input.scss +112 -97
  16. package/dist/scss/components/_listbox.scss +176 -0
  17. package/dist/scss/components/_loading.scss +35 -15
  18. package/dist/scss/components/_menu.scss +113 -109
  19. package/dist/scss/components/_modal.scss +112 -50
  20. package/dist/scss/components/_notification.scss +113 -97
  21. package/dist/scss/components/_pagination.scss +173 -106
  22. package/dist/scss/components/_radio.scss +91 -84
  23. package/dist/scss/components/_select.scss +108 -115
  24. package/dist/scss/components/_sidebar.scss +102 -101
  25. package/dist/scss/components/_skeleton.scss +50 -39
  26. package/dist/scss/components/_slider.scss +221 -159
  27. package/dist/scss/components/_steps.scss +223 -261
  28. package/dist/scss/components/_switch.scss +126 -90
  29. package/dist/scss/components/_table.scss +307 -251
  30. package/dist/scss/components/_tabs.scss +360 -247
  31. package/dist/scss/components/_tag.scss +95 -39
  32. package/dist/scss/components/_taginput.scss +48 -36
  33. package/dist/scss/components/_timepicker.scss +61 -62
  34. package/dist/scss/components/_tooltip.scss +129 -254
  35. package/dist/scss/components/_upload.scss +83 -35
  36. package/dist/scss/theme-build.scss +9 -0
  37. package/dist/scss/theme.scss +44 -0
  38. package/dist/scss/utils/_animations.scss +30 -9
  39. package/dist/scss/utils/_base.scss +6 -4
  40. package/dist/scss/utils/_helpers.scss +84 -22
  41. package/dist/scss/utils/_root.scss +82 -29
  42. package/dist/scss/utils/_variables.scss +64 -42
  43. package/dist/theme.css +2 -0
  44. package/dist/theme.js +1 -1
  45. package/package.json +27 -20
  46. package/dist/oruga.css +0 -2
  47. package/dist/scss/oruga-build.scss +0 -9
  48. package/dist/scss/oruga.scss +0 -42
package/dist/scss/components/_tooltip.scss CHANGED
@@ -1,22 +1,64 @@
1
1
  @use "sass:list";
2
+ @use "sass:map";
3
+ @use "../utils/helpers" as h;
4
+ @use "../utils/variables" as vars;
2
5
 
3
6
  /* @docs */
4
- $tooltip-arrow-margin: 2px !default;
5
- $tooltip-arrow-size: 5px !default;
6
- $tooltip-background-color: var(--#{$prefix}primary) !default;
7
- $tooltip-color: var(--#{$prefix}primary-invert) !default;
8
- $tooltip-content-box-shadow: 0px 1px 2px 1px rgba(0, 1, 0, 0.2) !default;
7
+ $tooltip-zindex: map.get(vars.$zindex, "tooltip") !default;
8
+
9
9
  $tooltip-content-font-size: 0.85rem !default;
10
- $tooltip-content-max-width: 300px !default;
10
+ $tooltip-content-color: h.useVar("white") !default;
11
+ $tooltip-content-font-weight: h.useVar("font-weight") !default;
12
+ $tooltip-content-line-height: h.useVar("line-height") !default;
13
+
14
+ $tooltip-content-padding: 0.35em 0.75em !default;
11
15
  $tooltip-content-multiline-width: 300px !default;
12
- $tooltip-content-padding: 0.35rem 0.75rem !default;
13
- $tooltip-content-radius-large: 6px !default;
14
- $tooltip-content-weight-normal: 400 !default;
15
- $tooltip-content-zindex: 38 !default;
16
+
17
+ $tooltip-content-box-shadow: h.useVar("overlay-box-shadow") !default;
18
+ $tooltip-content-background-color: h.useVar("grey-darkest") !default;
19
+ $tooltip-content-border-radius: h.useVar("border-radius") !default;
20
+
21
+ $tooltip-arrow-margin: 2px !default;
22
+ $tooltip-arrow-size: 5px !default;
16
23
  /* @docs */
17
24
 
18
- // Base
19
25
  .o-tooltip {
26
+ @include h.defineVar("tooltip-zindex", $tooltip-zindex);
27
+ @include h.defineVar("tooltip-arrow-size", $tooltip-arrow-size);
28
+ @include h.defineVar("tooltip-arrow-margin", $tooltip-arrow-margin);
29
+
30
+ @include h.defineVar("tooltip-content-color", $tooltip-content-color);
31
+ @include h.defineVar(
32
+ "tooltip-content-font-size",
33
+ $tooltip-content-font-size
34
+ );
35
+ @include h.defineVar(
36
+ "tooltip-content-font-weight",
37
+ $tooltip-content-font-weight
38
+ );
39
+ @include h.defineVar(
40
+ "tooltip-content-line-height",
41
+ $tooltip-content-line-height
42
+ );
43
+
44
+ @include h.defineVar(
45
+ "tooltip-content-box-shadow",
46
+ $tooltip-content-box-shadow
47
+ );
48
+ @include h.defineVar(
49
+ "tooltip-content-background-color",
50
+ $tooltip-content-background-color
51
+ );
52
+ @include h.defineVar(
53
+ "tooltip-content-border-radius",
54
+ $tooltip-content-border-radius
55
+ );
56
+ @include h.defineVar("tooltip-content-padding", $tooltip-content-padding);
57
+ @include h.defineVar(
58
+ "tooltip-content-multiline-width",
59
+ $tooltip-content-multiline-width
60
+ );
61
+
20
62
  position: relative;
21
63
  display: inline-flex;
22
64
 
@@ -25,26 +67,10 @@ $tooltip-content-zindex: 38 !default;
25
67
  content: "";
26
68
  pointer-events: none;
27
69
 
28
- z-index: var(
29
- --#{$prefix}tooltip-content-zindex,
30
- $tooltip-content-zindex
31
- );
32
- color: var(
33
- --#{$prefix}tooltip-background-color,
34
- $tooltip-background-color
35
- );
36
-
37
- // variants
38
- @each $name, $pair in $colors {
39
- $color: list.nth($pair, 1);
40
- $color-invert: list.nth($pair, 2);
41
-
42
- &--#{$name} {
43
- color: var(--#{$prefix}variant-#{$name}, $color);
44
- }
45
- }
70
+ z-index: h.useVar("tooltip-zindex");
71
+ color: h.useVar("tooltip-content-background-color");
46
72
 
47
- // position
73
+ // position variants
48
74
  &--bottom {
49
75
  top: auto;
50
76
  right: auto;
@@ -59,18 +85,9 @@ $tooltip-content-zindex: 38 !default;
59
85
  border-left-style: solid;
60
86
  border-left-color: transparent;
61
87
 
62
- border-bottom-width: var(
63
- --#{$prefix}tooltip-arrow-size,
64
- $tooltip-arrow-size
65
- );
66
- border-right-width: var(
67
- --#{$prefix}tooltip-arrow-size,
68
- $tooltip-arrow-size
69
- );
70
- border-left-width: var(
71
- --#{$prefix}tooltip-arrow-size,
72
- $tooltip-arrow-size
73
- );
88
+ border-bottom-width: h.useVar("tooltip-arrow-size");
89
+ border-right-width: h.useVar("tooltip-arrow-size");
90
+ border-left-width: h.useVar("tooltip-arrow-size");
74
91
  }
75
92
 
76
93
  &--top {
@@ -87,18 +104,9 @@ $tooltip-content-zindex: 38 !default;
87
104
  border-left-style: solid;
88
105
  border-left-color: transparent;
89
106
 
90
- border-top-width: var(
91
- --#{$prefix}tooltip-arrow-size,
92
- $tooltip-arrow-size
93
- );
94
- border-right-width: var(
95
- --#{$prefix}tooltip-arrow-size,
96
- $tooltip-arrow-size
97
- );
98
- border-left-width: var(
99
- --#{$prefix}tooltip-arrow-size,
100
- $tooltip-arrow-size
101
- );
107
+ border-top-width: h.useVar("tooltip-arrow-size");
108
+ border-right-width: h.useVar("tooltip-arrow-size");
109
+ border-left-width: h.useVar("tooltip-arrow-size");
102
110
  }
103
111
 
104
112
  &--left {
@@ -114,18 +122,9 @@ $tooltip-content-zindex: 38 !default;
114
122
  border-bottom-style: solid;
115
123
  border-bottom-color: transparent;
116
124
 
117
- border-left-width: var(
118
- --#{$prefix}tooltip-arrow-size,
119
- $tooltip-arrow-size
120
- );
121
- border-top-width: var(
122
- --#{$prefix}tooltip-arrow-size,
123
- $tooltip-arrow-size
124
- );
125
- border-bottom-width: var(
126
- --#{$prefix}tooltip-arrow-size,
127
- $tooltip-arrow-size
128
- );
125
+ border-left-width: h.useVar("tooltip-arrow-size");
126
+ border-top-width: h.useVar("tooltip-arrow-size");
127
+ border-bottom-width: h.useVar("tooltip-arrow-size");
129
128
  }
130
129
 
131
130
  &--right {
@@ -141,18 +140,9 @@ $tooltip-content-zindex: 38 !default;
141
140
  border-bottom-style: solid;
142
141
  border-bottom-color: transparent;
143
142
 
144
- border-right-width: var(
145
- --#{$prefix}tooltip-arrow-size,
146
- $tooltip-arrow-size
147
- );
148
- border-top-width: var(
149
- --#{$prefix}tooltip-arrow-size,
150
- $tooltip-arrow-size
151
- );
152
- border-bottom-width: var(
153
- --#{$prefix}tooltip-arrow-size,
154
- $tooltip-arrow-size
155
- );
143
+ border-right-width: h.useVar("tooltip-arrow-size");
144
+ border-top-width: h.useVar("tooltip-arrow-size");
145
+ border-bottom-width: h.useVar("tooltip-arrow-size");
156
146
  }
157
147
 
158
148
  &--top-right {
@@ -169,13 +159,8 @@ $tooltip-content-zindex: 38 !default;
169
159
  border-left-style: solid;
170
160
  border-left-color: transparent;
171
161
 
172
- border-top-width: var(
173
- --#{$prefix}tooltip-arrow-size,
174
- $tooltip-arrow-size
175
- );
176
- border-right-width: calc(
177
- var(--#{$prefix}tooltip-arrow-size, $tooltip-arrow-size) * 2
178
- );
162
+ border-top-width: h.useVar("tooltip-arrow-size");
163
+ border-right-width: calc(h.useVar("tooltip-arrow-size") * 2);
179
164
  border-left-width: 0;
180
165
  }
181
166
 
@@ -193,13 +178,8 @@ $tooltip-content-zindex: 38 !default;
193
178
  border-left-style: solid;
194
179
  border-left-color: transparent;
195
180
 
196
- border-top-width: var(
197
- --#{$prefix}tooltip-arrow-size,
198
- $tooltip-arrow-size
199
- );
200
- border-left-width: calc(
201
- var(--#{$prefix}tooltip-arrow-size, $tooltip-arrow-size) * 2
202
- );
181
+ border-top-width: h.useVar("tooltip-arrow-size");
182
+ border-left-width: calc(h.useVar("tooltip-arrow-size") * 2);
203
183
  border-right-width: 0;
204
184
  }
205
185
 
@@ -217,13 +197,8 @@ $tooltip-content-zindex: 38 !default;
217
197
  border-left-style: solid;
218
198
  border-left-color: transparent;
219
199
 
220
- border-bottom-width: var(
221
- --#{$prefix}tooltip-arrow-size,
222
- $tooltip-arrow-size
223
- );
224
- border-left-width: calc(
225
- var(--#{$prefix}tooltip-arrow-size, $tooltip-arrow-size) * 2
226
- );
200
+ border-bottom-width: h.useVar("tooltip-arrow-size");
201
+ border-left-width: calc(h.useVar("tooltip-arrow-size") * 2);
227
202
  border-right-width: 0;
228
203
  }
229
204
 
@@ -241,13 +216,8 @@ $tooltip-content-zindex: 38 !default;
241
216
  border-left-style: solid;
242
217
  border-left-color: transparent;
243
218
 
244
- border-bottom-width: var(
245
- --#{$prefix}tooltip-arrow-size,
246
- $tooltip-arrow-size
247
- );
248
- border-right-width: calc(
249
- var(--#{$prefix}tooltip-arrow-size, $tooltip-arrow-size) * 2
250
- );
219
+ border-bottom-width: h.useVar("tooltip-arrow-size");
220
+ border-right-width: calc(h.useVar("tooltip-arrow-size") * 2);
251
221
  border-left-width: 0;
252
222
  }
253
223
  }
@@ -256,66 +226,40 @@ $tooltip-content-zindex: 38 !default;
256
226
  position: absolute;
257
227
  white-space: nowrap;
258
228
 
259
- max-width: var(
260
- --#{$prefix}tooltip-content-max-width,
261
- $tooltip-content-max-width
262
- );
263
- padding: var(
264
- --#{$prefix}tooltip-content-padding,
265
- $tooltip-content-padding
266
- );
267
- border-radius: var(
268
- --#{$prefix}tooltip-content-radius-large,
269
- $tooltip-content-radius-large
270
- );
271
- font-size: var(
272
- --#{$prefix}tooltip-content-font-size,
273
- $tooltip-content-font-size
274
- );
275
- font-weight: var(
276
- --#{$prefix}tooltip-content-weight-normal,
277
- $tooltip-content-weight-normal
278
- );
279
- box-shadow: var(
280
- --#{$prefix}tooltip-content-box-shadow,
281
- $tooltip-content-box-shadow
282
- );
283
- z-index: var(
284
- --#{$prefix}tooltip-content-zindex,
285
- $tooltip-content-zindex
286
- );
287
- background-color: var(
288
- --#{$prefix}tooltip-background-color,
289
- $tooltip-background-color
290
- );
291
- color: var(--#{$prefix}tooltip-color, $tooltip-color);
292
-
293
- // variants
294
- @each $name, $pair in $colors {
295
- $color: list.nth($pair, 1);
296
- $color-invert: list.nth($pair, 2);
229
+ z-index: h.useVar("tooltip-zindex");
230
+ padding: h.useVar("tooltip-content-padding");
231
+
232
+ color: h.useVar("tooltip-content-color");
233
+ font-size: h.useVar("tooltip-content-font-size");
234
+ font-weight: h.useVar("tooltip-content-font-weight");
235
+ line-height: h.useVar("tooltip-content-line-height");
236
+
237
+ box-shadow: h.useVar("tooltip-content-box-shadow");
238
+ background-color: h.useVar("tooltip-content-background-color");
239
+ border-radius: h.useVar("tooltip-content-border-radius");
297
240
 
241
+ // color variants
242
+ @each $name, $pair in vars.$colors {
298
243
  &--#{$name} {
299
- background: var(--#{$prefix}variant-#{$name}, $color);
300
- color: var(--#{$prefix}variant-invert-#{$name}, $color-invert);
244
+ @include h.defineVar(
245
+ "tooltip-content-color",
246
+ h.useVar("#{$name}-invert")
247
+ );
248
+ @include h.defineVar(
249
+ "tooltip-content-background-color",
250
+ h.useVar($name)
251
+ );
301
252
  }
302
253
  }
303
254
 
304
- // position
255
+ // position variants
305
256
  &--top {
306
257
  top: auto;
307
258
  right: auto;
308
-
309
259
  bottom: calc(
310
260
  (
311
- var(
312
- --#{$prefix}tooltip-arrow-size,
313
- $tooltip-arrow-size
314
- ) +
315
- var(
316
- --#{$prefix}tooltip-arrow-margin,
317
- $tooltip-arrow-margin
318
- )
261
+ h.useVar("tooltip-arrow-size") +
262
+ h.useVar("tooltip-arrow-margin")
319
263
  ) +
320
264
  100%
321
265
  );
@@ -326,14 +270,8 @@ $tooltip-content-zindex: 38 !default;
326
270
  &--bottom {
327
271
  top: calc(
328
272
  (
329
- var(
330
- --#{$prefix}tooltip-arrow-size,
331
- $tooltip-arrow-size
332
- ) +
333
- var(
334
- --#{$prefix}tooltip-arrow-margin,
335
- $tooltip-arrow-margin
336
- )
273
+ h.useVar("tooltip-arrow-size") +
274
+ h.useVar("tooltip-arrow-margin")
337
275
  ) +
338
276
  100%
339
277
  );
@@ -349,14 +287,8 @@ $tooltip-content-zindex: 38 !default;
349
287
  bottom: auto;
350
288
  left: calc(
351
289
  (
352
- var(
353
- --#{$prefix}tooltip-arrow-size,
354
- $tooltip-arrow-size
355
- ) +
356
- var(
357
- --#{$prefix}tooltip-arrow-margin,
358
- $tooltip-arrow-margin
359
- )
290
+ h.useVar("tooltip-arrow-size") +
291
+ h.useVar("tooltip-arrow-margin")
360
292
  ) +
361
293
  100%
362
294
  );
@@ -367,14 +299,8 @@ $tooltip-content-zindex: 38 !default;
367
299
  top: 50%;
368
300
  right: calc(
369
301
  (
370
- var(
371
- --#{$prefix}tooltip-arrow-size,
372
- $tooltip-arrow-size
373
- ) +
374
- var(
375
- --#{$prefix}tooltip-arrow-margin,
376
- $tooltip-arrow-margin
377
- )
302
+ h.useVar("tooltip-arrow-size") +
303
+ h.useVar("tooltip-arrow-margin")
378
304
  ) +
379
305
  100%
380
306
  );
@@ -388,14 +314,8 @@ $tooltip-content-zindex: 38 !default;
388
314
  top: auto;
389
315
  bottom: calc(
390
316
  (
391
- var(
392
- --#{$prefix}tooltip-arrow-size,
393
- $tooltip-arrow-size
394
- ) +
395
- var(
396
- --#{$prefix}tooltip-arrow-margin,
397
- $tooltip-arrow-margin
398
- )
317
+ h.useVar("tooltip-arrow-size") +
318
+ h.useVar("tooltip-arrow-margin")
399
319
  ) +
400
320
  100%
401
321
  );
@@ -407,14 +327,8 @@ $tooltip-content-zindex: 38 !default;
407
327
  top: auto;
408
328
  bottom: calc(
409
329
  (
410
- var(
411
- --#{$prefix}tooltip-arrow-size,
412
- $tooltip-arrow-size
413
- ) +
414
- var(
415
- --#{$prefix}tooltip-arrow-margin,
416
- $tooltip-arrow-margin
417
- )
330
+ h.useVar("tooltip-arrow-size") +
331
+ h.useVar("tooltip-arrow-margin")
418
332
  ) +
419
333
  100%
420
334
  );
@@ -426,14 +340,8 @@ $tooltip-content-zindex: 38 !default;
426
340
  bottom: auto;
427
341
  top: calc(
428
342
  (
429
- var(
430
- --#{$prefix}tooltip-arrow-size,
431
- $tooltip-arrow-size
432
- ) +
433
- var(
434
- --#{$prefix}tooltip-arrow-margin,
435
- $tooltip-arrow-margin
436
- )
343
+ h.useVar("tooltip-arrow-size") +
344
+ h.useVar("tooltip-arrow-margin")
437
345
  ) +
438
346
  100%
439
347
  );
@@ -445,14 +353,8 @@ $tooltip-content-zindex: 38 !default;
445
353
  bottom: auto;
446
354
  top: calc(
447
355
  (
448
- var(
449
- --#{$prefix}tooltip-arrow-size,
450
- $tooltip-arrow-size
451
- ) +
452
- var(
453
- --#{$prefix}tooltip-arrow-margin,
454
- $tooltip-arrow-margin
455
- )
356
+ h.useVar("tooltip-arrow-size") +
357
+ h.useVar("tooltip-arrow-margin")
456
358
  ) +
457
359
  100%
458
360
  );
@@ -467,30 +369,25 @@ $tooltip-content-zindex: 38 !default;
467
369
  &--multiline {
468
370
  text-align: center;
469
371
  white-space: normal;
470
- width: var(
471
- --#{$prefix}tooltip-content-multiline-width,
472
- $tooltip-content-multiline-width
473
- );
372
+ width: h.useVar("tooltip-content-multiline-width");
474
373
  }
475
374
  }
476
375
 
376
+ &__trigger {
377
+ width: 100%;
378
+ }
379
+
477
380
  &--teleport {
478
- .o-tip__content {
479
- // position
381
+ .o-tooltip__content {
382
+ // position variants
480
383
  &--top,
481
384
  &--top-left,
482
385
  &--top-right {
483
386
  margin-top: calc(
484
387
  -1 *
485
388
  (
486
- var(
487
- --#{$prefix}tooltip-arrow-size,
488
- $tooltip-arrow-size
489
- ) +
490
- var(
491
- --#{$prefix}tooltip-arrow-margin,
492
- $tooltip-arrow-margin
493
- )
389
+ h.useVar("tooltip-arrow-size") +
390
+ h.useVar("tooltip-arrow-margin")
494
391
  )
495
392
  );
496
393
  }
@@ -500,14 +397,8 @@ $tooltip-content-zindex: 38 !default;
500
397
  &--bottom-right {
501
398
  margin-top: calc(
502
399
  (
503
- var(
504
- --#{$prefix}tooltip-arrow-size,
505
- $tooltip-arrow-size
506
- ) +
507
- var(
508
- --#{$prefix}tooltip-arrow-margin,
509
- $tooltip-arrow-margin
510
- )
400
+ h.useVar("tooltip-arrow-size") +
401
+ h.useVar("tooltip-arrow-margin")
511
402
  )
512
403
  );
513
404
  }
@@ -515,14 +406,8 @@ $tooltip-content-zindex: 38 !default;
515
406
  &--right {
516
407
  margin-left: calc(
517
408
  (
518
- var(
519
- --#{$prefix}tooltip-arrow-size,
520
- $tooltip-arrow-size
521
- ) +
522
- var(
523
- --#{$prefix}tooltip-arrow-margin,
524
- $tooltip-arrow-margin
525
- )
409
+ h.useVar("tooltip-arrow-size") +
410
+ h.useVar("tooltip-arrow-margin")
526
411
  )
527
412
  );
528
413
  }
@@ -531,21 +416,11 @@ $tooltip-content-zindex: 38 !default;
531
416
  margin-left: calc(
532
417
  -1 *
533
418
  (
534
- var(
535
- --#{$prefix}tooltip-arrow-size,
536
- $tooltip-arrow-size
537
- ) +
538
- var(
539
- --#{$prefix}tooltip-arrow-margin,
540
- $tooltip-arrow-margin
541
- )
419
+ h.useVar("tooltip-arrow-size") +
420
+ h.useVar("tooltip-arrow-margin")
542
421
  )
543
422
  );
544
423
  }
545
424
  }
546
425
  }
547
-
548
- &__trigger {
549
- width: 100%;
550
- }
551
426
  }