@navikt/ds-css 4.12.1 → 5.0.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 +15 -0
- package/config/_mappings.js +1 -1
- package/dist/component/index.css +194 -101
- package/dist/component/index.min.css +3 -3
- package/dist/component/modal.css +122 -40
- package/dist/component/modal.min.css +1 -1
- package/dist/component/table.css +54 -31
- package/dist/component/table.min.css +1 -1
- package/dist/components.css +164 -71
- package/dist/components.min.css +2 -2
- package/dist/global/tokens.css +30 -30
- package/dist/global/tokens.min.css +1 -1
- package/dist/index.css +194 -101
- package/dist/index.min.css +3 -3
- package/modal.css +123 -40
- package/package.json +2 -2
- package/table.css +54 -31
- package/tokens.json +4 -1
package/modal.css
CHANGED
|
@@ -1,69 +1,152 @@
|
|
|
1
|
-
.
|
|
1
|
+
.navds-modal__document-body {
|
|
2
2
|
overflow: hidden;
|
|
3
3
|
}
|
|
4
4
|
|
|
5
5
|
.navds-modal {
|
|
6
6
|
background-color: var(--ac-modal-bg, var(--a-surface-default));
|
|
7
|
-
border
|
|
8
|
-
|
|
9
|
-
position: relative;
|
|
10
|
-
overflow: auto;
|
|
11
|
-
max-height: 100%;
|
|
7
|
+
border: 1px solid var(--ac-modal-border, var(--a-border-subtle));
|
|
8
|
+
border-radius: var(--a-border-radius-large);
|
|
12
9
|
box-shadow: var(--a-shadow-xlarge);
|
|
10
|
+
padding: 0;
|
|
11
|
+
position: fixed;
|
|
12
|
+
max-height: 100%;
|
|
13
|
+
max-width: 100%;
|
|
13
14
|
}
|
|
14
15
|
|
|
15
|
-
.navds-
|
|
16
|
-
|
|
16
|
+
.navds-modal[open] {
|
|
17
|
+
display: flex;
|
|
18
|
+
flex-direction: column;
|
|
19
|
+
animation: akselModalFadeIn 0.35s cubic-bezier(0.15, 1, 0.3, 1);
|
|
17
20
|
}
|
|
18
21
|
|
|
19
|
-
.navds-modal
|
|
20
|
-
|
|
21
|
-
|
|
22
|
-
|
|
22
|
+
.navds-modal--polyfilled {
|
|
23
|
+
top: 50%;
|
|
24
|
+
transform: translate(0, -50%);
|
|
25
|
+
overflow: auto;
|
|
26
|
+
|
|
27
|
+
/* From polyfill (dialog-polyfill/dist/dialog-polyfill.css): */
|
|
28
|
+
left: 0;
|
|
29
|
+
right: 0;
|
|
30
|
+
width: fit-content;
|
|
31
|
+
height: fit-content;
|
|
32
|
+
margin: auto;
|
|
23
33
|
}
|
|
24
34
|
|
|
25
|
-
|
|
26
|
-
|
|
27
|
-
.navds-modal--focus {
|
|
28
|
-
box-shadow: var(--a-shadow-focus);
|
|
29
|
-
outline: none;
|
|
30
|
-
}
|
|
35
|
+
.navds-modal--polyfilled:not([open]) {
|
|
36
|
+
display: none; /* from polyfill */
|
|
31
37
|
}
|
|
32
38
|
|
|
33
|
-
.
|
|
39
|
+
._dialog_overlay {
|
|
40
|
+
/* From polyfill */
|
|
34
41
|
position: fixed;
|
|
35
|
-
z-index: var(--a-z-index-modal);
|
|
36
42
|
top: 0;
|
|
43
|
+
right: 0;
|
|
37
44
|
bottom: 0;
|
|
38
45
|
left: 0;
|
|
39
|
-
right: 0;
|
|
40
|
-
background-color: var(--ac-modal-backdrop, var(--a-surface-backdrop));
|
|
41
|
-
padding: var(--a-spacing-4);
|
|
42
|
-
display: flex;
|
|
43
|
-
align-items: center;
|
|
44
|
-
justify-content: center;
|
|
45
46
|
}
|
|
46
47
|
|
|
47
|
-
.navds-
|
|
48
|
-
|
|
49
|
-
transition: transform 100ms cubic-bezier(0.82, 2, 1, 0.3);
|
|
48
|
+
.navds-modal--small {
|
|
49
|
+
width: var(--ac-modal-width-small, 450px);
|
|
50
50
|
}
|
|
51
51
|
|
|
52
|
-
|
|
53
|
-
|
|
54
|
-
|
|
55
|
-
|
|
52
|
+
.navds-modal--medium {
|
|
53
|
+
width: var(--ac-modal-width-medium, 700px);
|
|
54
|
+
}
|
|
55
|
+
|
|
56
|
+
@media (min-width: 480px) {
|
|
57
|
+
.navds-modal {
|
|
58
|
+
max-width: calc((100% - 6px) - 2em);
|
|
59
|
+
max-height: calc((100% - 6px) - 2em);
|
|
60
|
+
}
|
|
61
|
+
|
|
62
|
+
.navds-modal--autowidth {
|
|
63
|
+
max-width: min(700px, calc((100% - 6px) - 2em));
|
|
64
|
+
}
|
|
65
|
+
}
|
|
66
|
+
|
|
67
|
+
.navds-modal::backdrop {
|
|
68
|
+
/*
|
|
69
|
+
* Cannot use --a-surface-backdrop because ::backdrop does not inherit from anything but itself.
|
|
70
|
+
* But consumers can do `::backdrop { --ac-modal-backdrop: white; }`
|
|
71
|
+
* We can add ::backdrop to tokens.css when we remove the polyfill.
|
|
72
|
+
*/
|
|
73
|
+
background: var(--ac-modal-backdrop, rgb(2 20 49 / 0.49));
|
|
74
|
+
animation: akselModalBackdropFadeIn 0.35s cubic-bezier(0.15, 1, 0.3, 1);
|
|
75
|
+
}
|
|
76
|
+
|
|
77
|
+
.navds-modal--polyfilled + .backdrop /* Cannot be combined with ::backdrop selector */ {
|
|
78
|
+
background: var(--ac-modal-backdrop, rgb(2 20 49 / 0.49));
|
|
79
|
+
|
|
80
|
+
/* From polyfill: */
|
|
81
|
+
position: fixed;
|
|
82
|
+
top: 0;
|
|
83
|
+
right: 0;
|
|
84
|
+
bottom: 0;
|
|
85
|
+
left: 0;
|
|
56
86
|
}
|
|
57
87
|
|
|
58
88
|
.navds-modal__button {
|
|
59
|
-
|
|
60
|
-
|
|
61
|
-
|
|
89
|
+
margin-left: var(--a-spacing-4);
|
|
90
|
+
float: right;
|
|
91
|
+
}
|
|
92
|
+
|
|
93
|
+
.navds-modal__header {
|
|
94
|
+
padding: var(--a-spacing-6) var(--a-spacing-6) var(--a-spacing-4) var(--a-spacing-6);
|
|
95
|
+
}
|
|
96
|
+
|
|
97
|
+
.navds-modal__header-icon svg {
|
|
98
|
+
display: inline;
|
|
99
|
+
vertical-align: -0.25rem;
|
|
100
|
+
margin-right: var(--a-spacing-1);
|
|
101
|
+
}
|
|
102
|
+
|
|
103
|
+
.navds-modal__label {
|
|
104
|
+
font-weight: 600;
|
|
105
|
+
color: var(--a-text-subtle);
|
|
106
|
+
}
|
|
107
|
+
|
|
108
|
+
.navds-modal__body {
|
|
109
|
+
padding: var(--a-spacing-6);
|
|
110
|
+
overflow: auto;
|
|
111
|
+
overscroll-behavior: contain;
|
|
112
|
+
}
|
|
113
|
+
|
|
114
|
+
.navds-modal__header + .navds-modal__body {
|
|
115
|
+
padding-top: var(--a-spacing-0);
|
|
116
|
+
}
|
|
117
|
+
|
|
118
|
+
.navds-modal__footer {
|
|
62
119
|
display: flex;
|
|
63
|
-
|
|
120
|
+
flex-flow: row-reverse wrap;
|
|
121
|
+
gap: var(--a-spacing-4);
|
|
122
|
+
padding: var(--a-spacing-4) var(--a-spacing-6) var(--a-spacing-6) var(--a-spacing-6);
|
|
123
|
+
}
|
|
124
|
+
|
|
125
|
+
.navds-modal__footer :nth-of-type(2) {
|
|
126
|
+
margin-left: auto;
|
|
64
127
|
}
|
|
65
128
|
|
|
66
|
-
|
|
67
|
-
|
|
68
|
-
|
|
129
|
+
@keyframes akselModalFadeIn {
|
|
130
|
+
from {
|
|
131
|
+
opacity: 0;
|
|
132
|
+
transform: translate3d(0, calc(5% + 4px), 0);
|
|
133
|
+
}
|
|
134
|
+
|
|
135
|
+
50% {
|
|
136
|
+
opacity: 1;
|
|
137
|
+
}
|
|
138
|
+
|
|
139
|
+
to {
|
|
140
|
+
transform: none;
|
|
141
|
+
}
|
|
142
|
+
}
|
|
143
|
+
|
|
144
|
+
@keyframes akselModalBackdropFadeIn {
|
|
145
|
+
from {
|
|
146
|
+
opacity: 0;
|
|
147
|
+
}
|
|
148
|
+
|
|
149
|
+
to {
|
|
150
|
+
opacity: 1;
|
|
151
|
+
}
|
|
69
152
|
}
|
package/package.json
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@navikt/ds-css",
|
|
3
|
-
"version": "
|
|
3
|
+
"version": "5.0.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": "^
|
|
30
|
+
"@navikt/ds-tokens": "^5.0.0",
|
|
31
31
|
"cssnano": "6.0.0",
|
|
32
32
|
"fast-glob": "3.2.11",
|
|
33
33
|
"lodash": "4.17.21",
|
package/table.css
CHANGED
|
@@ -45,7 +45,7 @@
|
|
|
45
45
|
.navds-table__header-cell,
|
|
46
46
|
.navds-table__data-cell {
|
|
47
47
|
display: table-cell;
|
|
48
|
-
padding: var(--a-spacing-
|
|
48
|
+
padding: var(--a-spacing-3) var(--a-spacing-2);
|
|
49
49
|
border-bottom: 1px solid var(--ac-table-row-border, var(--a-border-default));
|
|
50
50
|
text-align: left;
|
|
51
51
|
}
|
|
@@ -74,9 +74,14 @@
|
|
|
74
74
|
border-bottom-color: transparent;
|
|
75
75
|
}
|
|
76
76
|
|
|
77
|
+
.navds-table--large .navds-table__header-cell,
|
|
78
|
+
.navds-table--large .navds-table__data-cell {
|
|
79
|
+
padding: var(--a-spacing-4) var(--a-spacing-2);
|
|
80
|
+
}
|
|
81
|
+
|
|
77
82
|
.navds-table--small .navds-table__header-cell,
|
|
78
83
|
.navds-table--small .navds-table__data-cell {
|
|
79
|
-
padding: var(--a-spacing-
|
|
84
|
+
padding: var(--a-spacing-1) var(--a-spacing-2);
|
|
80
85
|
}
|
|
81
86
|
|
|
82
87
|
.navds-table .navds-checkbox .navds-checkbox__input {
|
|
@@ -154,7 +159,7 @@
|
|
|
154
159
|
transition: border-bottom-color 190ms cubic-bezier(0.6, 0.04, 0.98, 0.335);
|
|
155
160
|
}
|
|
156
161
|
|
|
157
|
-
.navds-table__expandable-row:not(.navds-table__expandable-row--expansion-disabled):hover {
|
|
162
|
+
.navds-table__expandable-row.navds-table__expandable-row--clickable:not(.navds-table__expandable-row--expansion-disabled):hover {
|
|
158
163
|
cursor: pointer;
|
|
159
164
|
}
|
|
160
165
|
|
|
@@ -171,55 +176,73 @@
|
|
|
171
176
|
}
|
|
172
177
|
|
|
173
178
|
.navds-table__toggle-expand-cell {
|
|
174
|
-
padding: 0;
|
|
175
|
-
|
|
179
|
+
padding: 0 var(--a-spacing-2);
|
|
180
|
+
position: relative;
|
|
181
|
+
width: 2.5rem;
|
|
182
|
+
}
|
|
183
|
+
|
|
184
|
+
.navds-table--large .navds-table__toggle-expand-cell {
|
|
185
|
+
padding: 0 var(--a-spacing-2);
|
|
176
186
|
}
|
|
177
187
|
|
|
178
188
|
.navds-table--small .navds-table__toggle-expand-cell {
|
|
179
|
-
padding:
|
|
180
|
-
width: 2.25rem;
|
|
189
|
+
padding: var(--a-spacing-1) var(--a-spacing-2);
|
|
181
190
|
}
|
|
182
191
|
|
|
183
192
|
.navds-table__toggle-expand-button {
|
|
184
|
-
|
|
185
|
-
|
|
186
|
-
align-items: center;
|
|
193
|
+
display: grid;
|
|
194
|
+
place-content: center;
|
|
187
195
|
cursor: pointer;
|
|
188
|
-
|
|
196
|
+
margin: 0;
|
|
197
|
+
background: transparent;
|
|
198
|
+
border: none;
|
|
199
|
+
border-radius: var(--a-border-radius-medium);
|
|
200
|
+
height: 2rem;
|
|
201
|
+
width: 2rem;
|
|
202
|
+
font-size: 1.5rem;
|
|
189
203
|
}
|
|
190
204
|
|
|
191
|
-
.navds-
|
|
192
|
-
|
|
205
|
+
.navds-table__expandable-icon {
|
|
206
|
+
transition: transform 150ms ease-in-out;
|
|
193
207
|
}
|
|
194
208
|
|
|
195
|
-
.navds-table__toggle-expand-button:
|
|
196
|
-
|
|
209
|
+
.navds-table__toggle-expand-button:hover,
|
|
210
|
+
.navds-table__expandable-row--clickable:hover .navds-table__toggle-expand-button {
|
|
211
|
+
background-color: var(--a-surface-hover);
|
|
197
212
|
}
|
|
198
213
|
|
|
199
|
-
|
|
200
|
-
|
|
201
|
-
box-shadow: inset var(--a-shadow-focus);
|
|
202
|
-
}
|
|
214
|
+
.navds-table__toggle-expand-cell--open > :where(.navds-table__toggle-expand-button) :where(.navds-table__expandable-icon) {
|
|
215
|
+
transform: translateY(0) rotate(180deg);
|
|
203
216
|
}
|
|
204
217
|
|
|
205
|
-
.navds-table__expandable-icon {
|
|
206
|
-
|
|
218
|
+
.navds-table__toggle-expand-button:hover > :where(.navds-table__expandable-icon) {
|
|
219
|
+
transform: translateY(1px);
|
|
207
220
|
}
|
|
208
221
|
|
|
209
|
-
.navds-
|
|
210
|
-
|
|
222
|
+
.navds-table__toggle-expand-cell--open > .navds-table__toggle-expand-button:hover > :where(.navds-table__expandable-icon) {
|
|
223
|
+
transform: translateY(-1px) rotate(180deg);
|
|
211
224
|
}
|
|
212
225
|
|
|
213
|
-
.navds-table__toggle-expand-button:
|
|
214
|
-
|
|
226
|
+
.navds-table__toggle-expand-button:focus-visible {
|
|
227
|
+
outline: none;
|
|
228
|
+
box-shadow: var(--a-shadow-focus);
|
|
215
229
|
}
|
|
216
230
|
|
|
217
|
-
|
|
218
|
-
|
|
231
|
+
@supports not selector(:focus-visible) {
|
|
232
|
+
.navds-table__toggle-expand-button:focus {
|
|
233
|
+
outline: none;
|
|
234
|
+
box-shadow: var(--a-shadow-focus);
|
|
235
|
+
}
|
|
219
236
|
}
|
|
220
237
|
|
|
221
|
-
.navds-table__toggle-expand-
|
|
222
|
-
|
|
238
|
+
.navds-table__toggle-expand-button::after {
|
|
239
|
+
inset: 0;
|
|
240
|
+
z-index: 1;
|
|
241
|
+
position: absolute;
|
|
242
|
+
content: "";
|
|
243
|
+
height: 100%;
|
|
244
|
+
width: 100%;
|
|
245
|
+
cursor: pointer;
|
|
223
246
|
}
|
|
224
247
|
|
|
225
248
|
.navds-table__expanded-row-cell {
|
|
@@ -235,9 +258,9 @@
|
|
|
235
258
|
}
|
|
236
259
|
|
|
237
260
|
.navds-table__expanded-row-content {
|
|
238
|
-
padding: var(--a-spacing-4)
|
|
261
|
+
padding: var(--a-spacing-4) calc(var(--a-spacing-2) + 3rem);
|
|
239
262
|
}
|
|
240
263
|
|
|
241
264
|
.navds-table--small .navds-table__expanded-row-content {
|
|
242
|
-
padding: var(--a-spacing-2) var(--a-spacing-
|
|
265
|
+
padding: var(--a-spacing-2) calc(var(--a-spacing-2) + 3rem);
|
|
243
266
|
}
|
package/tokens.json
CHANGED
|
@@ -196,7 +196,10 @@
|
|
|
196
196
|
},
|
|
197
197
|
"modal": {
|
|
198
198
|
"--ac-modal-bg": "--a-surface-default",
|
|
199
|
-
"--ac-modal-
|
|
199
|
+
"--ac-modal-border": "--a-border-subtle",
|
|
200
|
+
"--ac-modal-backdrop": "--a-surface-backdrop",
|
|
201
|
+
"--ac-modal-width-small": "450px",
|
|
202
|
+
"--ac-modal-width-medium": "700px"
|
|
200
203
|
},
|
|
201
204
|
"pagination": {
|
|
202
205
|
"--ac-pagination-text": "--a-text-default",
|