@vaadin/vaadin-lumo-styles 24.4.2 → 24.4.4

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 (8) hide show
  1. package/auto-complete.css +189 -102
  2. package/package.json +5 -5
  3. package/utilities/background.js +60 -60
  4. package/utilities/border.js +29 -29
  5. package/utilities/flexbox-grid.js +85 -7
  6. package/utilities/layout.js +6 -0
  7. package/utilities/shadows.js +3 -0
  8. package/utilities/transition.js +6 -6
package/auto-complete.css CHANGED
@@ -207,104 +207,104 @@
207
207
  .bg-transparent {
208
208
  background-color: transparent;
209
209
  }
210
- .bg-tint-5 {
211
- background-color: var(--lumo-tint-5pct);
210
+ .bg-tint {
211
+ background-color: var(--lumo-tint);
212
212
  }
213
- .bg-tint-10 {
214
- background-color: var(--lumo-tint-10pct);
213
+ .bg-tint-90 {
214
+ background-color: var(--lumo-tint-90pct);
215
215
  }
216
- .bg-tint-20 {
217
- background-color: var(--lumo-tint-20pct);
216
+ .bg-tint-80 {
217
+ background-color: var(--lumo-tint-80pct);
218
218
  }
219
- .bg-tint-30 {
220
- background-color: var(--lumo-tint-30pct);
219
+ .bg-tint-70 {
220
+ background-color: var(--lumo-tint-70pct);
221
221
  }
222
- .bg-tint-40 {
223
- background-color: var(--lumo-tint-40pct);
222
+ .bg-tint-60 {
223
+ background-color: var(--lumo-tint-60pct);
224
224
  }
225
225
  .bg-tint-50 {
226
226
  background-color: var(--lumo-tint-50pct);
227
227
  }
228
- .bg-tint-60 {
229
- background-color: var(--lumo-tint-60pct);
228
+ .bg-tint-40 {
229
+ background-color: var(--lumo-tint-40pct);
230
230
  }
231
- .bg-tint-70 {
232
- background-color: var(--lumo-tint-70pct);
231
+ .bg-tint-30 {
232
+ background-color: var(--lumo-tint-30pct);
233
233
  }
234
- .bg-tint-80 {
235
- background-color: var(--lumo-tint-80pct);
234
+ .bg-tint-20 {
235
+ background-color: var(--lumo-tint-20pct);
236
236
  }
237
- .bg-tint-90 {
238
- background-color: var(--lumo-tint-90pct);
237
+ .bg-tint-10 {
238
+ background-color: var(--lumo-tint-10pct);
239
239
  }
240
- .bg-tint {
241
- background-color: var(--lumo-tint);
240
+ .bg-tint-5 {
241
+ background-color: var(--lumo-tint-5pct);
242
242
  }
243
- .bg-shade-5 {
244
- background-color: var(--lumo-shade-5pct);
243
+ .bg-shade {
244
+ background-color: var(--lumo-shade);
245
245
  }
246
- .bg-shade-10 {
247
- background-color: var(--lumo-shade-10pct);
246
+ .bg-shade-90 {
247
+ background-color: var(--lumo-shade-90pct);
248
248
  }
249
- .bg-shade-20 {
250
- background-color: var(--lumo-shade-20pct);
249
+ .bg-shade-80 {
250
+ background-color: var(--lumo-shade-80pct);
251
251
  }
252
- .bg-shade-30 {
253
- background-color: var(--lumo-shade-30pct);
252
+ .bg-shade-70 {
253
+ background-color: var(--lumo-shade-70pct);
254
254
  }
255
- .bg-shade-40 {
256
- background-color: var(--lumo-shade-40pct);
255
+ .bg-shade-60 {
256
+ background-color: var(--lumo-shade-60pct);
257
257
  }
258
258
  .bg-shade-50 {
259
259
  background-color: var(--lumo-shade-50pct);
260
260
  }
261
- .bg-shade-60 {
262
- background-color: var(--lumo-shade-60pct);
261
+ .bg-shade-40 {
262
+ background-color: var(--lumo-shade-40pct);
263
263
  }
264
- .bg-shade-70 {
265
- background-color: var(--lumo-shade-70pct);
264
+ .bg-shade-30 {
265
+ background-color: var(--lumo-shade-30pct);
266
266
  }
267
- .bg-shade-80 {
268
- background-color: var(--lumo-shade-80pct);
267
+ .bg-shade-20 {
268
+ background-color: var(--lumo-shade-20pct);
269
269
  }
270
- .bg-shade-90 {
271
- background-color: var(--lumo-shade-90pct);
270
+ .bg-shade-10 {
271
+ background-color: var(--lumo-shade-10pct);
272
272
  }
273
- .bg-shade {
274
- background-color: var(--lumo-shade);
273
+ .bg-shade-5 {
274
+ background-color: var(--lumo-shade-5pct);
275
275
  }
276
- .bg-contrast-5 {
277
- background-color: var(--lumo-contrast-5pct);
276
+ .bg-contrast {
277
+ background-color: var(--lumo-contrast);
278
278
  }
279
- .bg-contrast-10 {
280
- background-color: var(--lumo-contrast-10pct);
279
+ .bg-contrast-90 {
280
+ background-color: var(--lumo-contrast-90pct);
281
281
  }
282
- .bg-contrast-20 {
283
- background-color: var(--lumo-contrast-20pct);
282
+ .bg-contrast-80 {
283
+ background-color: var(--lumo-contrast-80pct);
284
284
  }
285
- .bg-contrast-30 {
286
- background-color: var(--lumo-contrast-30pct);
285
+ .bg-contrast-70 {
286
+ background-color: var(--lumo-contrast-70pct);
287
287
  }
288
- .bg-contrast-40 {
289
- background-color: var(--lumo-contrast-40pct);
288
+ .bg-contrast-60 {
289
+ background-color: var(--lumo-contrast-60pct);
290
290
  }
291
291
  .bg-contrast-50 {
292
292
  background-color: var(--lumo-contrast-50pct);
293
293
  }
294
- .bg-contrast-60 {
295
- background-color: var(--lumo-contrast-60pct);
294
+ .bg-contrast-40 {
295
+ background-color: var(--lumo-contrast-40pct);
296
296
  }
297
- .bg-contrast-70 {
298
- background-color: var(--lumo-contrast-70pct);
297
+ .bg-contrast-30 {
298
+ background-color: var(--lumo-contrast-30pct);
299
299
  }
300
- .bg-contrast-80 {
301
- background-color: var(--lumo-contrast-80pct);
300
+ .bg-contrast-20 {
301
+ background-color: var(--lumo-contrast-20pct);
302
302
  }
303
- .bg-contrast-90 {
304
- background-color: var(--lumo-contrast-90pct);
303
+ .bg-contrast-10 {
304
+ background-color: var(--lumo-contrast-10pct);
305
305
  }
306
- .bg-contrast {
307
- background-color: var(--lumo-contrast);
306
+ .bg-contrast-5 {
307
+ background-color: var(--lumo-contrast-5pct);
308
308
  }
309
309
  .bg-primary {
310
310
  background-color: var(--lumo-primary-color);
@@ -344,6 +344,12 @@
344
344
  .border-0 {
345
345
  border: none;
346
346
  }
347
+ .border-dashed {
348
+ --lumo-utility-border-style: dashed;
349
+ }
350
+ .border-dotted {
351
+ --lumo-utility-border-style: dotted;
352
+ }
347
353
  .border {
348
354
  border: 1px var(--lumo-utility-border-style, solid) var(--lumo-utility-border-color, var(--lumo-contrast-10pct));
349
355
  }
@@ -369,46 +375,40 @@
369
375
  }
370
376
  .border-t {
371
377
  border-top: 1px var(--lumo-utility-border-style, solid) var(--lumo-utility-border-color, var(--lumo-contrast-10pct));
372
- }
373
- .border-dashed {
374
- --lumo-utility-border-style: dashed;
375
- }
376
- .border-dotted {
377
- --lumo-utility-border-style: dotted;
378
378
  }
379
379
  /* === Border color === */
380
- .border-contrast-5 {
381
- --lumo-utility-border-color: var(--lumo-contrast-5pct);
380
+ .border-contrast {
381
+ --lumo-utility-border-color: var(--lumo-contrast);
382
382
  }
383
- .border-contrast-10 {
384
- --lumo-utility-border-color: var(--lumo-contrast-10pct);
383
+ .border-contrast-90 {
384
+ --lumo-utility-border-color: var(--lumo-contrast-90pct);
385
385
  }
386
- .border-contrast-20 {
387
- --lumo-utility-border-color: var(--lumo-contrast-20pct);
386
+ .border-contrast-80 {
387
+ --lumo-utility-border-color: var(--lumo-contrast-80pct);
388
388
  }
389
- .border-contrast-30 {
390
- --lumo-utility-border-color: var(--lumo-contrast-30pct);
389
+ .border-contrast-70 {
390
+ --lumo-utility-border-color: var(--lumo-contrast-70pct);
391
391
  }
392
- .border-contrast-40 {
393
- --lumo-utility-border-color: var(--lumo-contrast-40pct);
392
+ .border-contrast-60 {
393
+ --lumo-utility-border-color: var(--lumo-contrast-60pct);
394
394
  }
395
395
  .border-contrast-50 {
396
396
  --lumo-utility-border-color: var(--lumo-contrast-50pct);
397
397
  }
398
- .border-contrast-60 {
399
- --lumo-utility-border-color: var(--lumo-contrast-60pct);
398
+ .border-contrast-40 {
399
+ --lumo-utility-border-color: var(--lumo-contrast-40pct);
400
400
  }
401
- .border-contrast-70 {
402
- --lumo-utility-border-color: var(--lumo-contrast-70pct);
401
+ .border-contrast-30 {
402
+ --lumo-utility-border-color: var(--lumo-contrast-30pct);
403
403
  }
404
- .border-contrast-80 {
405
- --lumo-utility-border-color: var(--lumo-contrast-80pct);
404
+ .border-contrast-20 {
405
+ --lumo-utility-border-color: var(--lumo-contrast-20pct);
406
406
  }
407
- .border-contrast-90 {
408
- --lumo-utility-border-color: var(--lumo-contrast-90pct);
407
+ .border-contrast-10 {
408
+ --lumo-utility-border-color: var(--lumo-contrast-10pct);
409
409
  }
410
- .border-contrast {
411
- --lumo-utility-border-color: var(--lumo-contrast);
410
+ .border-contrast-5 {
411
+ --lumo-utility-border-color: var(--lumo-contrast-5pct);
412
412
  }
413
413
  .border-primary {
414
414
  --lumo-utility-border-color: var(--lumo-primary-color);
@@ -440,11 +440,11 @@
440
440
  .border-warning {
441
441
  --lumo-utility-border-color: var(--lumo-warning-color);
442
442
  }
443
- .border-warning-10 {
444
- --lumo-utility-border-color: var(--lumo-warning-color-10pct);
445
- }
446
443
  .border-warning-strong {
447
444
  --lumo-utility-border-color: var(--lumo-warning-text-color);
445
+ }
446
+ .border-warning-10 {
447
+ --lumo-utility-border-color: var(--lumo-warning-color-10pct);
448
448
  }
449
449
  /* === Border radius === */
450
450
  .rounded-none {
@@ -556,8 +556,11 @@
556
556
  align-self: stretch;
557
557
  }
558
558
  /* === Flex === */
559
+ .flex-1 {
560
+ flex: 1 1 0%;
561
+ }
559
562
  .flex-auto {
560
- flex: auto;
563
+ flex: 1 1 auto;
561
564
  }
562
565
  .flex-none {
563
566
  flex: none;
@@ -576,18 +579,18 @@
576
579
  flex-direction: row-reverse;
577
580
  }
578
581
  /* === Flex grow === */
579
- .flex-grow-0 {
580
- flex-grow: 0;
581
- }
582
582
  .flex-grow {
583
583
  flex-grow: 1;
584
584
  }
585
- /* === Flex shrink === */
586
- .flex-shrink-0 {
587
- flex-shrink: 0;
585
+ .flex-grow-0 {
586
+ flex-grow: 0;
588
587
  }
588
+ /* === Flex shrink === */
589
589
  .flex-shrink {
590
590
  flex-shrink: 1;
591
+ }
592
+ .flex-shrink-0 {
593
+ flex-shrink: 0;
591
594
  }
592
595
  /* === Flex wrap === */
593
596
  .flex-nowrap {
@@ -793,6 +796,21 @@
793
796
  }
794
797
  /* === Responsive design === */
795
798
  @media (min-width: 640px) {
799
+ .sm\items-baseline {
800
+ align-items: baseline;
801
+ }
802
+ .sm\items-center {
803
+ align-items: center;
804
+ }
805
+ .sm\items-end {
806
+ align-items: flex-end;
807
+ }
808
+ .sm\items-start {
809
+ align-items: flex-start;
810
+ }
811
+ .sm\items-stretch {
812
+ align-items: stretch;
813
+ }
796
814
  .sm\:flex-col {
797
815
  flex-direction: column;
798
816
  }
@@ -837,6 +855,21 @@
837
855
  }
838
856
  }
839
857
  @media (min-width: 768px) {
858
+ .md\items-baseline {
859
+ align-items: baseline;
860
+ }
861
+ .md\items-center {
862
+ align-items: center;
863
+ }
864
+ .md\items-end {
865
+ align-items: flex-end;
866
+ }
867
+ .md\items-start {
868
+ align-items: flex-start;
869
+ }
870
+ .md\items-stretch {
871
+ align-items: stretch;
872
+ }
840
873
  .md\:flex-col {
841
874
  flex-direction: column;
842
875
  }
@@ -881,6 +914,21 @@
881
914
  }
882
915
  }
883
916
  @media (min-width: 1024px) {
917
+ .lg\items-baseline {
918
+ align-items: baseline;
919
+ }
920
+ .lg\items-center {
921
+ align-items: center;
922
+ }
923
+ .lg\items-end {
924
+ align-items: flex-end;
925
+ }
926
+ .lg\items-start {
927
+ align-items: flex-start;
928
+ }
929
+ .lg\items-stretch {
930
+ align-items: stretch;
931
+ }
884
932
  .lg\:flex-col {
885
933
  flex-direction: column;
886
934
  }
@@ -925,6 +973,21 @@
925
973
  }
926
974
  }
927
975
  @media (min-width: 1280px) {
976
+ .xl\items-baseline {
977
+ align-items: baseline;
978
+ }
979
+ .xl\items-center {
980
+ align-items: center;
981
+ }
982
+ .xl\items-end {
983
+ align-items: flex-end;
984
+ }
985
+ .xl\items-start {
986
+ align-items: flex-start;
987
+ }
988
+ .xl\items-stretch {
989
+ align-items: stretch;
990
+ }
928
991
  .xl\:flex-col {
929
992
  flex-direction: column;
930
993
  }
@@ -969,6 +1032,21 @@
969
1032
  }
970
1033
  }
971
1034
  @media (min-width: 1536px) {
1035
+ .\32xl\items-baseline {
1036
+ align-items: baseline;
1037
+ }
1038
+ .\32xl\items-center {
1039
+ align-items: center;
1040
+ }
1041
+ .\32xl\items-end {
1042
+ align-items: flex-end;
1043
+ }
1044
+ .\32xl\items-start {
1045
+ align-items: flex-start;
1046
+ }
1047
+ .\32xl\items-stretch {
1048
+ align-items: stretch;
1049
+ }
972
1050
  .\32xl\:flex-col {
973
1051
  flex-direction: column;
974
1052
  }
@@ -1255,6 +1333,9 @@
1255
1333
  visibility: visible;
1256
1334
  }
1257
1335
  /* === Z-index === */
1336
+ .z-0 {
1337
+ z-index: 0;
1338
+ }
1258
1339
  .z-10 {
1259
1340
  z-index: 10;
1260
1341
  }
@@ -1269,6 +1350,9 @@
1269
1350
  }
1270
1351
  .z-50 {
1271
1352
  z-index: 50;
1353
+ }
1354
+ .z-auto {
1355
+ z-index: auto;
1272
1356
  }
1273
1357
  /* === Responsive design === */
1274
1358
  @media (min-width: 640px) {
@@ -1488,6 +1572,9 @@
1488
1572
  }
1489
1573
 
1490
1574
  /* === Box shadow === */
1575
+ .shadow-none {
1576
+ box-shadow: none;
1577
+ }
1491
1578
  .shadow-xs {
1492
1579
  box-shadow: var(--lumo-box-shadow-xs);
1493
1580
  }
@@ -2128,20 +2215,20 @@
2128
2215
  padding-top: var(--lumo-space-xl);
2129
2216
  }
2130
2217
 
2131
- .transition {
2132
- transition: color, background-color, border-color, text-decoration-color, fill, stroke, opacity, box-shadow,
2133
- transform, filter, backdrop-filter 150ms cubic-bezier(0.4, 0, 0.2, 1);
2218
+ .transition-none {
2219
+ transition: none;
2134
2220
  }
2135
2221
  .transition-all {
2136
2222
  transition: all 150ms cubic-bezier(0.4, 0, 0.2, 1);
2137
2223
  }
2224
+ .transition {
2225
+ transition: color, background-color, border-color, text-decoration-color, fill, stroke, opacity, box-shadow,
2226
+ transform, filter, backdrop-filter 150ms cubic-bezier(0.4, 0, 0.2, 1);
2227
+ }
2138
2228
  .transition-colors {
2139
2229
  transition: color, background-color, border-color, text-decoration-color, fill,
2140
2230
  stroke 150ms cubic-bezier(0.4, 0, 0.2, 1);
2141
2231
  }
2142
- .transition-none {
2143
- transition: none;
2144
- }
2145
2232
  .transition-opacity {
2146
2233
  transition: opacity 150ms cubic-bezier(0.4, 0, 0.2, 1);
2147
2234
  }
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@vaadin/vaadin-lumo-styles",
3
- "version": "24.4.2",
3
+ "version": "24.4.4",
4
4
  "publishConfig": {
5
5
  "access": "public"
6
6
  },
@@ -41,9 +41,9 @@
41
41
  ],
42
42
  "dependencies": {
43
43
  "@polymer/polymer": "^3.0.0",
44
- "@vaadin/component-base": "~24.4.2",
45
- "@vaadin/icon": "~24.4.2",
46
- "@vaadin/vaadin-themable-mixin": "~24.4.2"
44
+ "@vaadin/component-base": "~24.4.4",
45
+ "@vaadin/icon": "~24.4.4",
46
+ "@vaadin/vaadin-themable-mixin": "~24.4.4"
47
47
  },
48
48
  "devDependencies": {
49
49
  "gulp": "^4.0.2",
@@ -52,5 +52,5 @@
52
52
  "gulp-sort": "^2.0.0",
53
53
  "gulp-svgmin": "^4.1.0"
54
54
  },
55
- "gitHead": "f280274de1bc894ad4e0426432619999c0cf556d"
55
+ "gitHead": "821e80d0d4388a3c739717b016ae658051ec806d"
56
56
  }
package/utilities/background.js CHANGED
@@ -15,106 +15,106 @@ export const background = css`
15
15
  background-color: transparent;
16
16
  }
17
17
 
18
- .bg-tint-5 {
19
- background-color: var(--lumo-tint-5pct);
18
+ .bg-tint {
19
+ background-color: var(--lumo-tint);
20
20
  }
21
- .bg-tint-10 {
22
- background-color: var(--lumo-tint-10pct);
21
+ .bg-tint-90 {
22
+ background-color: var(--lumo-tint-90pct);
23
23
  }
24
- .bg-tint-20 {
25
- background-color: var(--lumo-tint-20pct);
24
+ .bg-tint-80 {
25
+ background-color: var(--lumo-tint-80pct);
26
26
  }
27
- .bg-tint-30 {
28
- background-color: var(--lumo-tint-30pct);
27
+ .bg-tint-70 {
28
+ background-color: var(--lumo-tint-70pct);
29
29
  }
30
- .bg-tint-40 {
31
- background-color: var(--lumo-tint-40pct);
30
+ .bg-tint-60 {
31
+ background-color: var(--lumo-tint-60pct);
32
32
  }
33
33
  .bg-tint-50 {
34
34
  background-color: var(--lumo-tint-50pct);
35
35
  }
36
- .bg-tint-60 {
37
- background-color: var(--lumo-tint-60pct);
36
+ .bg-tint-40 {
37
+ background-color: var(--lumo-tint-40pct);
38
38
  }
39
- .bg-tint-70 {
40
- background-color: var(--lumo-tint-70pct);
39
+ .bg-tint-30 {
40
+ background-color: var(--lumo-tint-30pct);
41
41
  }
42
- .bg-tint-80 {
43
- background-color: var(--lumo-tint-80pct);
42
+ .bg-tint-20 {
43
+ background-color: var(--lumo-tint-20pct);
44
44
  }
45
- .bg-tint-90 {
46
- background-color: var(--lumo-tint-90pct);
45
+ .bg-tint-10 {
46
+ background-color: var(--lumo-tint-10pct);
47
47
  }
48
- .bg-tint {
49
- background-color: var(--lumo-tint);
48
+ .bg-tint-5 {
49
+ background-color: var(--lumo-tint-5pct);
50
50
  }
51
51
 
52
- .bg-shade-5 {
53
- background-color: var(--lumo-shade-5pct);
52
+ .bg-shade {
53
+ background-color: var(--lumo-shade);
54
54
  }
55
- .bg-shade-10 {
56
- background-color: var(--lumo-shade-10pct);
55
+ .bg-shade-90 {
56
+ background-color: var(--lumo-shade-90pct);
57
57
  }
58
- .bg-shade-20 {
59
- background-color: var(--lumo-shade-20pct);
58
+ .bg-shade-80 {
59
+ background-color: var(--lumo-shade-80pct);
60
60
  }
61
- .bg-shade-30 {
62
- background-color: var(--lumo-shade-30pct);
61
+ .bg-shade-70 {
62
+ background-color: var(--lumo-shade-70pct);
63
63
  }
64
- .bg-shade-40 {
65
- background-color: var(--lumo-shade-40pct);
64
+ .bg-shade-60 {
65
+ background-color: var(--lumo-shade-60pct);
66
66
  }
67
67
  .bg-shade-50 {
68
68
  background-color: var(--lumo-shade-50pct);
69
69
  }
70
- .bg-shade-60 {
71
- background-color: var(--lumo-shade-60pct);
70
+ .bg-shade-40 {
71
+ background-color: var(--lumo-shade-40pct);
72
72
  }
73
- .bg-shade-70 {
74
- background-color: var(--lumo-shade-70pct);
73
+ .bg-shade-30 {
74
+ background-color: var(--lumo-shade-30pct);
75
75
  }
76
- .bg-shade-80 {
77
- background-color: var(--lumo-shade-80pct);
76
+ .bg-shade-20 {
77
+ background-color: var(--lumo-shade-20pct);
78
78
  }
79
- .bg-shade-90 {
80
- background-color: var(--lumo-shade-90pct);
79
+ .bg-shade-10 {
80
+ background-color: var(--lumo-shade-10pct);
81
81
  }
82
- .bg-shade {
83
- background-color: var(--lumo-shade);
82
+ .bg-shade-5 {
83
+ background-color: var(--lumo-shade-5pct);
84
84
  }
85
85
 
86
- .bg-contrast-5 {
87
- background-color: var(--lumo-contrast-5pct);
86
+ .bg-contrast {
87
+ background-color: var(--lumo-contrast);
88
88
  }
89
- .bg-contrast-10 {
90
- background-color: var(--lumo-contrast-10pct);
89
+ .bg-contrast-90 {
90
+ background-color: var(--lumo-contrast-90pct);
91
91
  }
92
- .bg-contrast-20 {
93
- background-color: var(--lumo-contrast-20pct);
92
+ .bg-contrast-80 {
93
+ background-color: var(--lumo-contrast-80pct);
94
94
  }
95
- .bg-contrast-30 {
96
- background-color: var(--lumo-contrast-30pct);
95
+ .bg-contrast-70 {
96
+ background-color: var(--lumo-contrast-70pct);
97
97
  }
98
- .bg-contrast-40 {
99
- background-color: var(--lumo-contrast-40pct);
98
+ .bg-contrast-60 {
99
+ background-color: var(--lumo-contrast-60pct);
100
100
  }
101
101
  .bg-contrast-50 {
102
102
  background-color: var(--lumo-contrast-50pct);
103
103
  }
104
- .bg-contrast-60 {
105
- background-color: var(--lumo-contrast-60pct);
104
+ .bg-contrast-40 {
105
+ background-color: var(--lumo-contrast-40pct);
106
106
  }
107
- .bg-contrast-70 {
108
- background-color: var(--lumo-contrast-70pct);
107
+ .bg-contrast-30 {
108
+ background-color: var(--lumo-contrast-30pct);
109
109
  }
110
- .bg-contrast-80 {
111
- background-color: var(--lumo-contrast-80pct);
110
+ .bg-contrast-20 {
111
+ background-color: var(--lumo-contrast-20pct);
112
112
  }
113
- .bg-contrast-90 {
114
- background-color: var(--lumo-contrast-90pct);
113
+ .bg-contrast-10 {
114
+ background-color: var(--lumo-contrast-10pct);
115
115
  }
116
- .bg-contrast {
117
- background-color: var(--lumo-contrast);
116
+ .bg-contrast-5 {
117
+ background-color: var(--lumo-contrast-5pct);
118
118
  }
119
119
 
120
120
  .bg-primary {
package/utilities/border.js CHANGED
@@ -10,6 +10,12 @@ export const border = css`
10
10
  .border-0 {
11
11
  border: none;
12
12
  }
13
+ .border-dashed {
14
+ --lumo-utility-border-style: dashed;
15
+ }
16
+ .border-dotted {
17
+ --lumo-utility-border-style: dotted;
18
+ }
13
19
  .border {
14
20
  border: 1px var(--lumo-utility-border-style, solid) var(--lumo-utility-border-color, var(--lumo-contrast-10pct));
15
21
  }
@@ -36,46 +42,40 @@ export const border = css`
36
42
  .border-t {
37
43
  border-top: 1px var(--lumo-utility-border-style, solid) var(--lumo-utility-border-color, var(--lumo-contrast-10pct));
38
44
  }
39
- .border-dashed {
40
- --lumo-utility-border-style: dashed;
41
- }
42
- .border-dotted {
43
- --lumo-utility-border-style: dotted;
44
- }
45
45
 
46
46
  /* === Border color === */
47
- .border-contrast-5 {
48
- --lumo-utility-border-color: var(--lumo-contrast-5pct);
47
+ .border-contrast {
48
+ --lumo-utility-border-color: var(--lumo-contrast);
49
49
  }
50
- .border-contrast-10 {
51
- --lumo-utility-border-color: var(--lumo-contrast-10pct);
50
+ .border-contrast-90 {
51
+ --lumo-utility-border-color: var(--lumo-contrast-90pct);
52
52
  }
53
- .border-contrast-20 {
54
- --lumo-utility-border-color: var(--lumo-contrast-20pct);
53
+ .border-contrast-80 {
54
+ --lumo-utility-border-color: var(--lumo-contrast-80pct);
55
55
  }
56
- .border-contrast-30 {
57
- --lumo-utility-border-color: var(--lumo-contrast-30pct);
56
+ .border-contrast-70 {
57
+ --lumo-utility-border-color: var(--lumo-contrast-70pct);
58
58
  }
59
- .border-contrast-40 {
60
- --lumo-utility-border-color: var(--lumo-contrast-40pct);
59
+ .border-contrast-60 {
60
+ --lumo-utility-border-color: var(--lumo-contrast-60pct);
61
61
  }
62
62
  .border-contrast-50 {
63
63
  --lumo-utility-border-color: var(--lumo-contrast-50pct);
64
64
  }
65
- .border-contrast-60 {
66
- --lumo-utility-border-color: var(--lumo-contrast-60pct);
65
+ .border-contrast-40 {
66
+ --lumo-utility-border-color: var(--lumo-contrast-40pct);
67
67
  }
68
- .border-contrast-70 {
69
- --lumo-utility-border-color: var(--lumo-contrast-70pct);
68
+ .border-contrast-30 {
69
+ --lumo-utility-border-color: var(--lumo-contrast-30pct);
70
70
  }
71
- .border-contrast-80 {
72
- --lumo-utility-border-color: var(--lumo-contrast-80pct);
71
+ .border-contrast-20 {
72
+ --lumo-utility-border-color: var(--lumo-contrast-20pct);
73
73
  }
74
- .border-contrast-90 {
75
- --lumo-utility-border-color: var(--lumo-contrast-90pct);
74
+ .border-contrast-10 {
75
+ --lumo-utility-border-color: var(--lumo-contrast-10pct);
76
76
  }
77
- .border-contrast {
78
- --lumo-utility-border-color: var(--lumo-contrast);
77
+ .border-contrast-5 {
78
+ --lumo-utility-border-color: var(--lumo-contrast-5pct);
79
79
  }
80
80
 
81
81
  .border-primary {
@@ -111,12 +111,12 @@ export const border = css`
111
111
  .border-warning {
112
112
  --lumo-utility-border-color: var(--lumo-warning-color);
113
113
  }
114
- .border-warning-10 {
115
- --lumo-utility-border-color: var(--lumo-warning-color-10pct);
116
- }
117
114
  .border-warning-strong {
118
115
  --lumo-utility-border-color: var(--lumo-warning-text-color);
119
116
  }
117
+ .border-warning-10 {
118
+ --lumo-utility-border-color: var(--lumo-warning-color-10pct);
119
+ }
120
120
 
121
121
  /* === Border radius === */
122
122
  .rounded-none {
package/utilities/flexbox-grid.js CHANGED
@@ -67,8 +67,11 @@ export const flexboxAndGrid = css`
67
67
  }
68
68
 
69
69
  /* === Flex === */
70
+ .flex-1 {
71
+ flex: 1 1 0%;
72
+ }
70
73
  .flex-auto {
71
- flex: auto;
74
+ flex: 1 1 auto;
72
75
  }
73
76
  .flex-none {
74
77
  flex: none;
@@ -89,20 +92,20 @@ export const flexboxAndGrid = css`
89
92
  }
90
93
 
91
94
  /* === Flex grow === */
92
- .flex-grow-0 {
93
- flex-grow: 0;
94
- }
95
95
  .flex-grow {
96
96
  flex-grow: 1;
97
97
  }
98
+ .flex-grow-0 {
99
+ flex-grow: 0;
100
+ }
98
101
 
99
102
  /* === Flex shrink === */
100
- .flex-shrink-0 {
101
- flex-shrink: 0;
102
- }
103
103
  .flex-shrink {
104
104
  flex-shrink: 1;
105
105
  }
106
+ .flex-shrink-0 {
107
+ flex-shrink: 0;
108
+ }
106
109
 
107
110
  /* === Flex wrap === */
108
111
  .flex-nowrap {
@@ -318,6 +321,21 @@ export const flexboxAndGrid = css`
318
321
 
319
322
  /* === Responsive design === */
320
323
  @media (min-width: 640px) {
324
+ .sm\\items-baseline {
325
+ align-items: baseline;
326
+ }
327
+ .sm\\items-center {
328
+ align-items: center;
329
+ }
330
+ .sm\\items-end {
331
+ align-items: flex-end;
332
+ }
333
+ .sm\\items-start {
334
+ align-items: flex-start;
335
+ }
336
+ .sm\\items-stretch {
337
+ align-items: stretch;
338
+ }
321
339
  .sm\\:flex-col {
322
340
  flex-direction: column;
323
341
  }
@@ -363,6 +381,21 @@ export const flexboxAndGrid = css`
363
381
  }
364
382
 
365
383
  @media (min-width: 768px) {
384
+ .md\\items-baseline {
385
+ align-items: baseline;
386
+ }
387
+ .md\\items-center {
388
+ align-items: center;
389
+ }
390
+ .md\\items-end {
391
+ align-items: flex-end;
392
+ }
393
+ .md\\items-start {
394
+ align-items: flex-start;
395
+ }
396
+ .md\\items-stretch {
397
+ align-items: stretch;
398
+ }
366
399
  .md\\:flex-col {
367
400
  flex-direction: column;
368
401
  }
@@ -407,6 +440,21 @@ export const flexboxAndGrid = css`
407
440
  }
408
441
  }
409
442
  @media (min-width: 1024px) {
443
+ .lg\\items-baseline {
444
+ align-items: baseline;
445
+ }
446
+ .lg\\items-center {
447
+ align-items: center;
448
+ }
449
+ .lg\\items-end {
450
+ align-items: flex-end;
451
+ }
452
+ .lg\\items-start {
453
+ align-items: flex-start;
454
+ }
455
+ .lg\\items-stretch {
456
+ align-items: stretch;
457
+ }
410
458
  .lg\\:flex-col {
411
459
  flex-direction: column;
412
460
  }
@@ -451,6 +499,21 @@ export const flexboxAndGrid = css`
451
499
  }
452
500
  }
453
501
  @media (min-width: 1280px) {
502
+ .xl\\items-baseline {
503
+ align-items: baseline;
504
+ }
505
+ .xl\\items-center {
506
+ align-items: center;
507
+ }
508
+ .xl\\items-end {
509
+ align-items: flex-end;
510
+ }
511
+ .xl\\items-start {
512
+ align-items: flex-start;
513
+ }
514
+ .xl\\items-stretch {
515
+ align-items: stretch;
516
+ }
454
517
  .xl\\:flex-col {
455
518
  flex-direction: column;
456
519
  }
@@ -495,6 +558,21 @@ export const flexboxAndGrid = css`
495
558
  }
496
559
  }
497
560
  @media (min-width: 1536px) {
561
+ .\\32xl\\items-baseline {
562
+ align-items: baseline;
563
+ }
564
+ .\\32xl\\items-center {
565
+ align-items: center;
566
+ }
567
+ .\\32xl\\items-end {
568
+ align-items: flex-end;
569
+ }
570
+ .\\32xl\\items-start {
571
+ align-items: flex-start;
572
+ }
573
+ .\\32xl\\items-stretch {
574
+ align-items: stretch;
575
+ }
498
576
  .\\32xl\\:flex-col {
499
577
  flex-direction: column;
500
578
  }
package/utilities/layout.js CHANGED
@@ -258,6 +258,9 @@ export const layout = css`
258
258
  }
259
259
 
260
260
  /* === Z-index === */
261
+ .z-0 {
262
+ z-index: 0;
263
+ }
261
264
  .z-10 {
262
265
  z-index: 10;
263
266
  }
@@ -273,6 +276,9 @@ export const layout = css`
273
276
  .z-50 {
274
277
  z-index: 50;
275
278
  }
279
+ .z-auto {
280
+ z-index: auto;
281
+ }
276
282
 
277
283
  /* === Responsive design === */
278
284
  @media (min-width: 640px) {
package/utilities/shadows.js CHANGED
@@ -7,6 +7,9 @@ import { css } from '@vaadin/vaadin-themable-mixin/register-styles.js';
7
7
 
8
8
  export const shadows = css`
9
9
  /* === Box shadow === */
10
+ .shadow-none {
11
+ box-shadow: none;
12
+ }
10
13
  .shadow-xs {
11
14
  box-shadow: var(--lumo-box-shadow-xs);
12
15
  }
package/utilities/transition.js CHANGED
@@ -6,20 +6,20 @@
6
6
  import { css } from '@vaadin/vaadin-themable-mixin/register-styles.js';
7
7
 
8
8
  export const transition = css`
9
- .transition {
10
- transition: color, background-color, border-color, text-decoration-color, fill, stroke, opacity, box-shadow,
11
- transform, filter, backdrop-filter 150ms cubic-bezier(0.4, 0, 0.2, 1);
9
+ .transition-none {
10
+ transition: none;
12
11
  }
13
12
  .transition-all {
14
13
  transition: all 150ms cubic-bezier(0.4, 0, 0.2, 1);
15
14
  }
15
+ .transition {
16
+ transition: color, background-color, border-color, text-decoration-color, fill, stroke, opacity, box-shadow,
17
+ transform, filter, backdrop-filter 150ms cubic-bezier(0.4, 0, 0.2, 1);
18
+ }
16
19
  .transition-colors {
17
20
  transition: color, background-color, border-color, text-decoration-color, fill,
18
21
  stroke 150ms cubic-bezier(0.4, 0, 0.2, 1);
19
22
  }
20
- .transition-none {
21
- transition: none;
22
- }
23
23
  .transition-opacity {
24
24
  transition: opacity 150ms cubic-bezier(0.4, 0, 0.2, 1);
25
25
  }