@navikt/ds-css 6.12.0 → 6.14.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.
Files changed (31) hide show
  1. package/CHANGELOG.md +12 -0
  2. package/baseline/baseline.css +1 -1
  3. package/baseline/fonts.css +109 -8
  4. package/dist/component/chat.min.css +1 -1
  5. package/dist/component/date.min.css +1 -1
  6. package/dist/component/expansioncard.min.css +1 -1
  7. package/dist/component/form.min.css +1 -1
  8. package/dist/component/index.css +209 -36
  9. package/dist/component/index.min.css +4 -4
  10. package/dist/component/modal.css +8 -3
  11. package/dist/component/modal.min.css +1 -1
  12. package/dist/component/primitives.css +107 -21
  13. package/dist/component/primitives.min.css +1 -1
  14. package/dist/component/skeleton.min.css +1 -1
  15. package/dist/component/stepper.min.css +1 -1
  16. package/dist/component/timeline.min.css +1 -1
  17. package/dist/component/togglegroup.min.css +1 -1
  18. package/dist/components.css +115 -24
  19. package/dist/components.min.css +2 -2
  20. package/dist/global/baseline.css +1 -1
  21. package/dist/global/baseline.min.css +1 -1
  22. package/dist/global/fonts.css +97 -8
  23. package/dist/global/fonts.min.css +1 -1
  24. package/dist/global/tokens.css +3 -3
  25. package/dist/global/tokens.min.css +1 -1
  26. package/dist/index.css +209 -36
  27. package/dist/index.min.css +4 -4
  28. package/modal.css +8 -3
  29. package/package.json +2 -2
  30. package/primitives/hgrid.css +26 -3
  31. package/primitives/stack.css +81 -18
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% - 6px - 2em);
62
+ max-width: calc(100% - 2em);
63
63
  }
64
64
 
65
65
  .navds-modal--autowidth {
66
- max-width: min(700px, calc(100% - 6px - 2em));
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% - 6px - 2em);
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.12.0",
3
+ "version": "6.14.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.12.0",
30
+ "@navikt/ds-tokens": "^6.14.0",
31
31
  "cssnano": "6.0.0",
32
32
  "fast-glob": "3.2.11",
33
33
  "lodash": "4.17.21",
package/primitives/hgrid.css CHANGED
@@ -6,6 +6,12 @@
6
6
  --__ac-hgrid-columns-xl: var(--__ac-hgrid-columns-lg);
7
7
  --__ac-hgrid-columns-2xl: var(--__ac-hgrid-columns-xl);
8
8
  --__ac-hgrid-columns: var(--__ac-hgrid-columns-xs);
9
+
10
+ display: grid;
11
+ grid-template-columns: var(--__ac-hgrid-columns);
12
+ }
13
+
14
+ .navds-hgrid-gap {
9
15
  --__ac-hgrid-gap-xs: initial;
10
16
  --__ac-hgrid-gap-sm: var(--__ac-hgrid-gap-xs);
11
17
  --__ac-hgrid-gap-md: var(--__ac-hgrid-gap-sm);
@@ -13,17 +19,22 @@
13
19
  --__ac-hgrid-gap-xl: var(--__ac-hgrid-gap-lg);
14
20
  --__ac-hgrid-gap-2xl: var(--__ac-hgrid-gap-xl);
15
21
  --__ac-hgrid-gap: var(--__ac-hgrid-gap-xs);
16
- --__ac-hgrid-align: initial;
17
22
 
18
- display: grid;
19
- grid-template-columns: var(--__ac-hgrid-columns);
20
23
  gap: var(--__ac-hgrid-gap);
24
+ }
25
+
26
+ .navds-hgrid-align {
27
+ --__ac-hgrid-align: initial;
28
+
21
29
  align-items: var(--__ac-hgrid-align);
22
30
  }
23
31
 
24
32
  @media (min-width: 480px) {
25
33
  .navds-hgrid {
26
34
  --__ac-hgrid-columns: var(--__ac-hgrid-columns-sm);
35
+ }
36
+
37
+ .navds-hgrid-gap {
27
38
  --__ac-hgrid-gap: var(--__ac-hgrid-gap-sm);
28
39
  }
29
40
  }
@@ -31,6 +42,9 @@
31
42
  @media (min-width: 768px) {
32
43
  .navds-hgrid {
33
44
  --__ac-hgrid-columns: var(--__ac-hgrid-columns-md);
45
+ }
46
+
47
+ .navds-hgrid-gap {
34
48
  --__ac-hgrid-gap: var(--__ac-hgrid-gap-md);
35
49
  }
36
50
  }
@@ -38,6 +52,9 @@
38
52
  @media (min-width: 1024px) {
39
53
  .navds-hgrid {
40
54
  --__ac-hgrid-columns: var(--__ac-hgrid-columns-lg);
55
+ }
56
+
57
+ .navds-hgrid-gap {
41
58
  --__ac-hgrid-gap: var(--__ac-hgrid-gap-lg);
42
59
  }
43
60
  }
@@ -45,6 +62,9 @@
45
62
  @media (min-width: 1280px) {
46
63
  .navds-hgrid {
47
64
  --__ac-hgrid-columns: var(--__ac-hgrid-columns-xl);
65
+ }
66
+
67
+ .navds-hgrid-gap {
48
68
  --__ac-hgrid-gap: var(--__ac-hgrid-gap-xl);
49
69
  }
50
70
  }
@@ -52,6 +72,9 @@
52
72
  @media (min-width: 1440px) {
53
73
  .navds-hgrid {
54
74
  --__ac-hgrid-columns: var(--__ac-hgrid-columns-2xl);
75
+ }
76
+
77
+ .navds-hgrid-gap {
55
78
  --__ac-hgrid-gap: var(--__ac-hgrid-gap-2xl);
56
79
  }
57
80
  }
package/primitives/stack.css CHANGED
@@ -1,5 +1,8 @@
1
1
  .navds-stack {
2
- --__ac-stack-wrap: initial;
2
+ display: flex;
3
+ }
4
+
5
+ .navds-stack-gap {
3
6
  --__ac-stack-gap-xs: initial;
4
7
  --__ac-stack-gap-sm: var(--__ac-stack-gap-xs);
5
8
  --__ac-stack-gap-md: var(--__ac-stack-gap-sm);
@@ -7,13 +10,11 @@
7
10
  --__ac-stack-gap-xl: var(--__ac-stack-gap-lg);
8
11
  --__ac-stack-gap-2xl: var(--__ac-stack-gap-xl);
9
12
  --__ac-stack-gap: var(--__ac-stack-gap-xs);
10
- --__ac-stack-justify-xs: initial;
11
- --__ac-stack-justify-sm: var(--__ac-stack-justify-xs);
12
- --__ac-stack-justify-md: var(--__ac-stack-justify-sm);
13
- --__ac-stack-justify-lg: var(--__ac-stack-justify-md);
14
- --__ac-stack-justify-xl: var(--__ac-stack-justify-lg);
15
- --__ac-stack-justify-2xl: var(--__ac-stack-justify-xl);
16
- --__ac-stack-justify: var(--__ac-stack-justify-xs);
13
+
14
+ gap: var(--__ac-stack-gap);
15
+ }
16
+
17
+ .navds-stack-align {
17
18
  --__ac-stack-align-xs: initial;
18
19
  --__ac-stack-align-sm: var(--__ac-stack-align-xs);
19
20
  --__ac-stack-align-md: var(--__ac-stack-align-sm);
@@ -21,6 +22,23 @@
21
22
  --__ac-stack-align-xl: var(--__ac-stack-align-lg);
22
23
  --__ac-stack-align-2xl: var(--__ac-stack-align-xl);
23
24
  --__ac-stack-align: var(--__ac-stack-align-xs);
25
+
26
+ align-items: var(--__ac-stack-align);
27
+ }
28
+
29
+ .navds-stack-justify {
30
+ --__ac-stack-justify-xs: initial;
31
+ --__ac-stack-justify-sm: var(--__ac-stack-justify-xs);
32
+ --__ac-stack-justify-md: var(--__ac-stack-justify-sm);
33
+ --__ac-stack-justify-lg: var(--__ac-stack-justify-md);
34
+ --__ac-stack-justify-xl: var(--__ac-stack-justify-lg);
35
+ --__ac-stack-justify-2xl: var(--__ac-stack-justify-xl);
36
+ --__ac-stack-justify: var(--__ac-stack-justify-xs);
37
+
38
+ justify-content: var(--__ac-stack-justify);
39
+ }
40
+
41
+ .navds-stack-direction {
24
42
  --__ac-stack-direction-xs: initial;
25
43
  --__ac-stack-direction-sm: var(--__ac-stack-direction-xs);
26
44
  --__ac-stack-direction-md: var(--__ac-stack-direction-sm);
@@ -29,11 +47,11 @@
29
47
  --__ac-stack-direction-2xl: var(--__ac-stack-direction-xl);
30
48
  --__ac-stack-direction: var(--__ac-stack-direction-xs);
31
49
 
32
- gap: var(--__ac-stack-gap);
33
- display: flex;
34
- align-items: var(--__ac-stack-align);
35
- justify-content: var(--__ac-stack-justify);
36
- flex-flow: var(--__ac-stack-direction) var(--__ac-stack-wrap);
50
+ flex-direction: var(--__ac-stack-direction);
51
+ }
52
+
53
+ .navds-stack-wrap {
54
+ flex-wrap: wrap;
37
55
  }
38
56
 
39
57
  .navds-stack__spacer {
@@ -48,46 +66,91 @@
48
66
  }
49
67
 
50
68
  @media (min-width: 480px) {
51
- .navds-stack {
69
+ .navds-stack-gap {
52
70
  --__ac-stack-gap: var(--__ac-stack-gap-sm);
71
+ }
72
+
73
+ .navds-stack-align {
53
74
  --__ac-stack-align: var(--__ac-stack-align-sm);
75
+ }
76
+
77
+ .navds-stack-justify {
54
78
  --__ac-stack-justify: var(--__ac-stack-justify-sm);
79
+ }
80
+
81
+ .navds-stack-direction {
55
82
  --__ac-stack-direction: var(--__ac-stack-direction-sm);
56
83
  }
57
84
  }
58
85
 
59
86
  @media (min-width: 768px) {
60
- .navds-stack {
87
+ .navds-stack-gap {
61
88
  --__ac-stack-gap: var(--__ac-stack-gap-md);
89
+ }
90
+
91
+ .navds-stack-align {
62
92
  --__ac-stack-align: var(--__ac-stack-align-md);
93
+ }
94
+
95
+ .navds-stack-justify {
63
96
  --__ac-stack-justify: var(--__ac-stack-justify-md);
97
+ }
98
+
99
+ .navds-stack-direction {
64
100
  --__ac-stack-direction: var(--__ac-stack-direction-md);
65
101
  }
66
102
  }
67
103
 
68
104
  @media (min-width: 1024px) {
69
- .navds-stack {
105
+ .navds-stack-gap {
70
106
  --__ac-stack-gap: var(--__ac-stack-gap-lg);
107
+ }
108
+
109
+ .navds-stack-align {
71
110
  --__ac-stack-align: var(--__ac-stack-align-lg);
111
+ }
112
+
113
+ .navds-stack-justify {
72
114
  --__ac-stack-justify: var(--__ac-stack-justify-lg);
115
+ }
116
+
117
+ .navds-stack-direction {
73
118
  --__ac-stack-direction: var(--__ac-stack-direction-lg);
74
119
  }
75
120
  }
76
121
 
77
122
  @media (min-width: 1280px) {
78
- .navds-stack {
123
+ .navds-stack-gap {
79
124
  --__ac-stack-gap: var(--__ac-stack-gap-xl);
125
+ }
126
+
127
+ .navds-stack-align {
80
128
  --__ac-stack-align: var(--__ac-stack-align-xl);
129
+ }
130
+
131
+ .navds-stack-justify {
81
132
  --__ac-stack-justify: var(--__ac-stack-justify-xl);
133
+ }
134
+
135
+ .navds-stack-direction {
82
136
  --__ac-stack-direction: var(--__ac-stack-direction-xl);
83
137
  }
84
138
  }
85
139
 
86
140
  @media (min-width: 1440px) {
87
- .navds-stack {
141
+ .navds-stack-gap {
88
142
  --__ac-stack-gap: var(--__ac-stack-gap-2xl);
143
+ }
144
+
145
+ .navds-stack-align {
89
146
  --__ac-stack-align: var(--__ac-stack-align-2xl);
147
+ }
148
+
149
+ .navds-stack-justify {
90
150
  --__ac-stack-justify: var(--__ac-stack-justify-2xl);
151
+ }
152
+
153
+ .navds-stack-direction {
91
154
  --__ac-stack-direction: var(--__ac-stack-direction-2xl);
92
155
  }
93
156
  }