@navikt/ds-css 6.11.0 → 6.13.0
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/CHANGELOG.md +16 -0
- package/alert.css +5 -1
- package/dist/component/alert.css +5 -1
- package/dist/component/alert.min.css +1 -1
- package/dist/component/index.css +135 -60
- package/dist/component/index.min.css +3 -3
- package/dist/component/modal.css +8 -3
- package/dist/component/modal.min.css +1 -1
- package/dist/component/primitives.css +127 -53
- package/dist/component/primitives.min.css +1 -1
- package/dist/components.css +140 -57
- package/dist/components.min.css +2 -2
- package/dist/global/tokens.css +2 -2
- package/dist/global/tokens.min.css +1 -1
- package/dist/index.css +135 -60
- package/dist/index.min.css +3 -3
- package/modal.css +8 -3
- package/package.json +2 -2
- package/primitives/base.css +100 -4
- package/primitives/box.css +27 -49
package/modal.css
CHANGED
|
@@ -59,17 +59,22 @@
|
|
|
59
59
|
|
|
60
60
|
@media (min-width: 480px) {
|
|
61
61
|
.navds-modal {
|
|
62
|
-
max-width: calc(100% -
|
|
62
|
+
max-width: calc(100% - 2em);
|
|
63
63
|
}
|
|
64
64
|
|
|
65
65
|
.navds-modal--autowidth {
|
|
66
|
-
max-width: min(700px, calc(100% -
|
|
66
|
+
max-width: min(700px, calc(100% - 2em));
|
|
67
67
|
}
|
|
68
68
|
}
|
|
69
69
|
|
|
70
70
|
@media (min-height: 480px) {
|
|
71
71
|
.navds-modal {
|
|
72
|
-
max-height: calc(100% -
|
|
72
|
+
max-height: calc(100% - 2em);
|
|
73
|
+
}
|
|
74
|
+
|
|
75
|
+
.navds-modal--top {
|
|
76
|
+
margin-top: 2em;
|
|
77
|
+
max-height: calc(100% - 4em);
|
|
73
78
|
}
|
|
74
79
|
}
|
|
75
80
|
|
package/package.json
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@navikt/ds-css",
|
|
3
|
-
"version": "6.
|
|
3
|
+
"version": "6.13.0",
|
|
4
4
|
"description": "CSS for NAV Designsystem",
|
|
5
5
|
"author": "Aksel | NAV designsystem team",
|
|
6
6
|
"keywords": [
|
|
@@ -27,7 +27,7 @@
|
|
|
27
27
|
"css:get-version": "node config/get-version.js"
|
|
28
28
|
},
|
|
29
29
|
"devDependencies": {
|
|
30
|
-
"@navikt/ds-tokens": "^6.
|
|
30
|
+
"@navikt/ds-tokens": "^6.13.0",
|
|
31
31
|
"cssnano": "6.0.0",
|
|
32
32
|
"fast-glob": "3.2.11",
|
|
33
33
|
"lodash": "4.17.21",
|
package/primitives/base.css
CHANGED
|
@@ -17,9 +17,9 @@
|
|
|
17
17
|
--__ac-r-pi-lg: var(--__ac-r-pi-md);
|
|
18
18
|
--__ac-r-pi-xl: var(--__ac-r-pi-lg);
|
|
19
19
|
--__ac-r-pi-2xl: var(--__ac-r-pi-xl);
|
|
20
|
-
--__ac-r-pi: var(--__ac-r-
|
|
20
|
+
--__ac-r-pi: var(--__ac-r-pi-xs);
|
|
21
21
|
|
|
22
|
-
padding-inline: var(--__ac-r-pi);
|
|
22
|
+
padding-inline: var(--__ac-r-pi, var(--__ac-r-padding));
|
|
23
23
|
}
|
|
24
24
|
|
|
25
25
|
.navds-r-pb {
|
|
@@ -29,9 +29,45 @@
|
|
|
29
29
|
--__ac-r-pb-lg: var(--__ac-r-pb-md);
|
|
30
30
|
--__ac-r-pb-xl: var(--__ac-r-pb-lg);
|
|
31
31
|
--__ac-r-pb-2xl: var(--__ac-r-pb-xl);
|
|
32
|
-
--__ac-r-pb: var(--__ac-r-
|
|
32
|
+
--__ac-r-pb: var(--__ac-r-pb-xs);
|
|
33
33
|
|
|
34
|
-
padding-block: var(--__ac-r-pb);
|
|
34
|
+
padding-block: var(--__ac-r-pb, var(--__ac-r-padding));
|
|
35
|
+
}
|
|
36
|
+
|
|
37
|
+
.navds-r-m {
|
|
38
|
+
--__ac-r-m-xs: initial;
|
|
39
|
+
--__ac-r-m-sm: var(--__ac-r-m-xs);
|
|
40
|
+
--__ac-r-m-md: var(--__ac-r-m-sm);
|
|
41
|
+
--__ac-r-m-lg: var(--__ac-r-m-md);
|
|
42
|
+
--__ac-r-m-xl: var(--__ac-r-m-lg);
|
|
43
|
+
--__ac-r-m-2xl: var(--__ac-r-m-xl);
|
|
44
|
+
--__ac-r-margin: var(--__ac-r-m-xs);
|
|
45
|
+
|
|
46
|
+
margin: var(--__ac-r-margin);
|
|
47
|
+
}
|
|
48
|
+
|
|
49
|
+
.navds-r-mi {
|
|
50
|
+
--__ac-r-mi-xs: initial;
|
|
51
|
+
--__ac-r-mi-sm: var(--__ac-r-mi-xs);
|
|
52
|
+
--__ac-r-mi-md: var(--__ac-r-mi-sm);
|
|
53
|
+
--__ac-r-mi-lg: var(--__ac-r-mi-md);
|
|
54
|
+
--__ac-r-mi-xl: var(--__ac-r-mi-lg);
|
|
55
|
+
--__ac-r-mi-2xl: var(--__ac-r-mi-xl);
|
|
56
|
+
--__ac-r-mi: var(--__ac-r-mi-xs);
|
|
57
|
+
|
|
58
|
+
margin-inline: var(--__ac-r-mi, var(--__ac-r-margin));
|
|
59
|
+
}
|
|
60
|
+
|
|
61
|
+
.navds-r-mb {
|
|
62
|
+
--__ac-r-mb-xs: initial;
|
|
63
|
+
--__ac-r-mb-sm: var(--__ac-r-mb-xs);
|
|
64
|
+
--__ac-r-mb-md: var(--__ac-r-mb-sm);
|
|
65
|
+
--__ac-r-mb-lg: var(--__ac-r-mb-md);
|
|
66
|
+
--__ac-r-mb-xl: var(--__ac-r-mb-lg);
|
|
67
|
+
--__ac-r-mb-2xl: var(--__ac-r-mb-xl);
|
|
68
|
+
--__ac-r-mb: var(--__ac-r-mb-xs);
|
|
69
|
+
|
|
70
|
+
margin-block: var(--__ac-r-mb, var(--__ac-r-margin));
|
|
35
71
|
}
|
|
36
72
|
|
|
37
73
|
.navds-r-w {
|
|
@@ -263,6 +299,18 @@
|
|
|
263
299
|
--__ac-r-pb: var(--__ac-r-pb-sm);
|
|
264
300
|
}
|
|
265
301
|
|
|
302
|
+
.navds-r-m {
|
|
303
|
+
--__ac-r-margin: var(--__ac-r-m-sm);
|
|
304
|
+
}
|
|
305
|
+
|
|
306
|
+
.navds-r-mi {
|
|
307
|
+
--__ac-r-mi: var(--__ac-r-mi-sm);
|
|
308
|
+
}
|
|
309
|
+
|
|
310
|
+
.navds-r-mb {
|
|
311
|
+
--__ac-r-mb: var(--__ac-r-mb-sm);
|
|
312
|
+
}
|
|
313
|
+
|
|
266
314
|
.navds-r-w {
|
|
267
315
|
--__ac-r-w: var(--__ac-r-w-sm);
|
|
268
316
|
}
|
|
@@ -349,6 +397,18 @@
|
|
|
349
397
|
--__ac-r-pb: var(--__ac-r-pb-md);
|
|
350
398
|
}
|
|
351
399
|
|
|
400
|
+
.navds-r-m {
|
|
401
|
+
--__ac-r-margin: var(--__ac-r-m-md);
|
|
402
|
+
}
|
|
403
|
+
|
|
404
|
+
.navds-r-mi {
|
|
405
|
+
--__ac-r-mi: var(--__ac-r-mi-md);
|
|
406
|
+
}
|
|
407
|
+
|
|
408
|
+
.navds-r-mb {
|
|
409
|
+
--__ac-r-mb: var(--__ac-r-mb-md);
|
|
410
|
+
}
|
|
411
|
+
|
|
352
412
|
.navds-r-w {
|
|
353
413
|
--__ac-r-w: var(--__ac-r-w-md);
|
|
354
414
|
}
|
|
@@ -435,6 +495,18 @@
|
|
|
435
495
|
--__ac-r-pb: var(--__ac-r-pb-lg);
|
|
436
496
|
}
|
|
437
497
|
|
|
498
|
+
.navds-r-m {
|
|
499
|
+
--__ac-r-margin: var(--__ac-r-m-lg);
|
|
500
|
+
}
|
|
501
|
+
|
|
502
|
+
.navds-r-mi {
|
|
503
|
+
--__ac-r-mi: var(--__ac-r-mi-lg);
|
|
504
|
+
}
|
|
505
|
+
|
|
506
|
+
.navds-r-mb {
|
|
507
|
+
--__ac-r-mb: var(--__ac-r-mb-lg);
|
|
508
|
+
}
|
|
509
|
+
|
|
438
510
|
.navds-r-w {
|
|
439
511
|
--__ac-r-w: var(--__ac-r-w-lg);
|
|
440
512
|
}
|
|
@@ -521,6 +593,18 @@
|
|
|
521
593
|
--__ac-r-pb: var(--__ac-r-pb-xl);
|
|
522
594
|
}
|
|
523
595
|
|
|
596
|
+
.navds-r-m {
|
|
597
|
+
--__ac-r-margin: var(--__ac-r-m-xl);
|
|
598
|
+
}
|
|
599
|
+
|
|
600
|
+
.navds-r-mi {
|
|
601
|
+
--__ac-r-mi: var(--__ac-r-mi-xl);
|
|
602
|
+
}
|
|
603
|
+
|
|
604
|
+
.navds-r-mb {
|
|
605
|
+
--__ac-r-mb: var(--__ac-r-mb-xl);
|
|
606
|
+
}
|
|
607
|
+
|
|
524
608
|
.navds-r-w {
|
|
525
609
|
--__ac-r-w: var(--__ac-r-w-xl);
|
|
526
610
|
}
|
|
@@ -607,6 +691,18 @@
|
|
|
607
691
|
--__ac-r-pb: var(--__ac-r-pb-2xl);
|
|
608
692
|
}
|
|
609
693
|
|
|
694
|
+
.navds-r-m {
|
|
695
|
+
--__ac-r-margin: var(--__ac-r-m-2xl);
|
|
696
|
+
}
|
|
697
|
+
|
|
698
|
+
.navds-r-mi {
|
|
699
|
+
--__ac-r-mi: var(--__ac-r-mi-2xl);
|
|
700
|
+
}
|
|
701
|
+
|
|
702
|
+
.navds-r-mb {
|
|
703
|
+
--__ac-r-mb: var(--__ac-r-mb-2xl);
|
|
704
|
+
}
|
|
705
|
+
|
|
610
706
|
.navds-r-w {
|
|
611
707
|
--__ac-r-w: var(--__ac-r-w-2xl);
|
|
612
708
|
}
|
package/primitives/box.css
CHANGED
|
@@ -1,29 +1,23 @@
|
|
|
1
|
-
.navds-box {
|
|
2
|
-
--__ac-box-padding-xs: initial;
|
|
3
|
-
--__ac-box-padding-sm: var(--__ac-box-padding-xs);
|
|
4
|
-
--__ac-box-padding-md: var(--__ac-box-padding-sm);
|
|
5
|
-
--__ac-box-padding-lg: var(--__ac-box-padding-md);
|
|
6
|
-
--__ac-box-padding-xl: var(--__ac-box-padding-lg);
|
|
7
|
-
--__ac-box-padding-2xl: var(--__ac-box-padding-xl);
|
|
8
|
-
--__ac-box-padding-inline-xs: initial;
|
|
9
|
-
--__ac-box-padding-inline-sm: var(--__ac-box-padding-inline-xs);
|
|
10
|
-
--__ac-box-padding-inline-md: var(--__ac-box-padding-inline-sm);
|
|
11
|
-
--__ac-box-padding-inline-lg: var(--__ac-box-padding-inline-md);
|
|
12
|
-
--__ac-box-padding-inline-xl: var(--__ac-box-padding-inline-lg);
|
|
13
|
-
--__ac-box-padding-inline-2xl: var(--__ac-box-padding-inline-xl);
|
|
14
|
-
--__ac-box-padding-block-xs: initial;
|
|
15
|
-
--__ac-box-padding-block-sm: var(--__ac-box-padding-block-xs);
|
|
16
|
-
--__ac-box-padding-block-md: var(--__ac-box-padding-block-sm);
|
|
17
|
-
--__ac-box-padding-block-lg: var(--__ac-box-padding-block-md);
|
|
18
|
-
--__ac-box-padding-block-xl: var(--__ac-box-padding-block-lg);
|
|
19
|
-
--__ac-box-padding-block-2xl: var(--__ac-box-padding-block-xl);
|
|
20
|
-
--__ac-box-padding: var(--__ac-box-padding-xs);
|
|
21
|
-
--__ac-box-padding-inline: var(--__ac-box-padding-inline-xs);
|
|
22
|
-
--__ac-box-padding-block: var(--__ac-box-padding-block-xs);
|
|
1
|
+
.navds-box-bg {
|
|
23
2
|
--__ac-box-background: initial;
|
|
3
|
+
|
|
4
|
+
background-color: var(--__ac-box-background);
|
|
5
|
+
}
|
|
6
|
+
|
|
7
|
+
.navds-box-border-color {
|
|
24
8
|
--__ac-box-border-color: initial;
|
|
25
|
-
|
|
9
|
+
|
|
10
|
+
border-color: var(--__ac-box-border-color);
|
|
11
|
+
}
|
|
12
|
+
|
|
13
|
+
.navds-box-border-width {
|
|
26
14
|
--__ac-box-border-width: initial;
|
|
15
|
+
|
|
16
|
+
border-style: solid;
|
|
17
|
+
border-width: var(--__ac-box-border-width, 0);
|
|
18
|
+
}
|
|
19
|
+
|
|
20
|
+
.navds-box-border-radius {
|
|
27
21
|
--__ac-box-border-radius-xs: initial;
|
|
28
22
|
--__ac-box-border-radius-sm: var(--__ac-box-border-radius-xs);
|
|
29
23
|
--__ac-box-border-radius-md: var(--__ac-box-border-radius-sm);
|
|
@@ -32,57 +26,41 @@
|
|
|
32
26
|
--__ac-box-border-radius-2xl: var(--__ac-box-border-radius-xl);
|
|
33
27
|
--__ac-box-border-radius: var(--__ac-box-border-radius-xs);
|
|
34
28
|
|
|
35
|
-
padding-inline: var(--__ac-box-padding-inline, var(--__ac-box-padding));
|
|
36
|
-
padding-block: var(--__ac-box-padding-block, var(--__ac-box-padding));
|
|
37
|
-
background-color: var(--__ac-box-background);
|
|
38
|
-
border-style: solid;
|
|
39
|
-
border-color: var(--__ac-box-border-color);
|
|
40
29
|
border-radius: var(--__ac-box-border-radius);
|
|
30
|
+
}
|
|
31
|
+
|
|
32
|
+
.navds-box-shadow {
|
|
33
|
+
--__ac-box-shadow: initial;
|
|
34
|
+
|
|
41
35
|
box-shadow: var(--__ac-box-shadow);
|
|
42
|
-
border-width: var(--__ac-box-border-width, 0);
|
|
43
36
|
}
|
|
44
37
|
|
|
45
38
|
@media (min-width: 480px) {
|
|
46
|
-
.navds-box {
|
|
47
|
-
--__ac-box-padding: var(--__ac-box-padding-sm);
|
|
48
|
-
--__ac-box-padding-inline: var(--__ac-box-padding-inline-sm);
|
|
49
|
-
--__ac-box-padding-block: var(--__ac-box-padding-block-sm);
|
|
39
|
+
.navds-box-border-radius {
|
|
50
40
|
--__ac-box-border-radius: var(--__ac-box-border-radius-sm);
|
|
51
41
|
}
|
|
52
42
|
}
|
|
53
43
|
|
|
54
44
|
@media (min-width: 768px) {
|
|
55
|
-
.navds-box {
|
|
56
|
-
--__ac-box-padding: var(--__ac-box-padding-md);
|
|
57
|
-
--__ac-box-padding-inline: var(--__ac-box-padding-inline-md);
|
|
58
|
-
--__ac-box-padding-block: var(--__ac-box-padding-block-md);
|
|
45
|
+
.navds-box-border-radius {
|
|
59
46
|
--__ac-box-border-radius: var(--__ac-box-border-radius-md);
|
|
60
47
|
}
|
|
61
48
|
}
|
|
62
49
|
|
|
63
50
|
@media (min-width: 1024px) {
|
|
64
|
-
.navds-box {
|
|
65
|
-
--__ac-box-padding: var(--__ac-box-padding-lg);
|
|
66
|
-
--__ac-box-padding-inline: var(--__ac-box-padding-inline-lg);
|
|
67
|
-
--__ac-box-padding-block: var(--__ac-box-padding-block-lg);
|
|
51
|
+
.navds-box-border-radius {
|
|
68
52
|
--__ac-box-border-radius: var(--__ac-box-border-radius-lg);
|
|
69
53
|
}
|
|
70
54
|
}
|
|
71
55
|
|
|
72
56
|
@media (min-width: 1280px) {
|
|
73
|
-
.navds-box {
|
|
74
|
-
--__ac-box-padding: var(--__ac-box-padding-xl);
|
|
75
|
-
--__ac-box-padding-inline: var(--__ac-box-padding-inline-xl);
|
|
76
|
-
--__ac-box-padding-block: var(--__ac-box-padding-block-xl);
|
|
57
|
+
.navds-box-border-radius {
|
|
77
58
|
--__ac-box-border-radius: var(--__ac-box-border-radius-xl);
|
|
78
59
|
}
|
|
79
60
|
}
|
|
80
61
|
|
|
81
62
|
@media (min-width: 1440px) {
|
|
82
|
-
.navds-box {
|
|
83
|
-
--__ac-box-padding: var(--__ac-box-padding-2xl);
|
|
84
|
-
--__ac-box-padding-inline: var(--__ac-box-padding-inline-2xl);
|
|
85
|
-
--__ac-box-padding-block: var(--__ac-box-padding-block-2xl);
|
|
63
|
+
.navds-box-border-radius {
|
|
86
64
|
--__ac-box-border-radius: var(--__ac-box-border-radius-2xl);
|
|
87
65
|
}
|
|
88
66
|
}
|