@navikt/ds-css 6.14.0 → 6.16.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 +14 -0
- package/dist/component/form.css +1 -0
- package/dist/component/form.min.css +1 -1
- package/dist/component/index.css +50 -4
- package/dist/component/index.min.css +2 -2
- package/dist/component/modal.css +15 -1
- package/dist/component/modal.min.css +1 -1
- package/dist/component/primitives.css +32 -0
- package/dist/component/primitives.min.css +1 -1
- package/dist/components.css +48 -1
- package/dist/components.min.css +1 -1
- package/dist/global/tokens.css +3 -3
- package/dist/global/tokens.min.css +1 -1
- package/dist/index.css +50 -4
- package/dist/index.min.css +2 -2
- package/form/form-summary.css +1 -0
- package/modal.css +15 -1
- package/package.json +2 -2
- package/primitives/base.css +32 -0
package/form/form-summary.css
CHANGED
package/modal.css
CHANGED
|
@@ -3,7 +3,9 @@
|
|
|
3
3
|
}
|
|
4
4
|
|
|
5
5
|
.navds-modal {
|
|
6
|
-
|
|
6
|
+
--__ac-modal-bg: var(--ac-modal-bg, var(--a-surface-default));
|
|
7
|
+
|
|
8
|
+
background-color: var(--__ac-modal-bg);
|
|
7
9
|
border: none;
|
|
8
10
|
border-radius: var(--a-border-radius-large);
|
|
9
11
|
box-shadow: var(--a-shadow-xlarge);
|
|
@@ -128,6 +130,18 @@
|
|
|
128
130
|
overflow: auto;
|
|
129
131
|
overscroll-behavior: contain;
|
|
130
132
|
position: relative; /* Needed to make sr-only elements position correctly - see Storybook */
|
|
133
|
+
background:
|
|
134
|
+
linear-gradient(var(--__ac-modal-bg) 30%, transparent) top,
|
|
135
|
+
linear-gradient(transparent, var(--__ac-modal-bg) 60%) bottom,
|
|
136
|
+
radial-gradient(farthest-side at 50% 0, rgba(0 0 0 / 0.3), transparent) top,
|
|
137
|
+
radial-gradient(farthest-side at 50% 100%, rgba(0 0 0 / 0.3), transparent) bottom;
|
|
138
|
+
background-size:
|
|
139
|
+
100% 40px,
|
|
140
|
+
100% 50px,
|
|
141
|
+
100% 16px,
|
|
142
|
+
100% 16px;
|
|
143
|
+
background-attachment: local, local, scroll, scroll;
|
|
144
|
+
background-repeat: no-repeat;
|
|
131
145
|
}
|
|
132
146
|
|
|
133
147
|
.navds-modal--small .navds-modal__body {
|
package/package.json
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@navikt/ds-css",
|
|
3
|
-
"version": "6.
|
|
3
|
+
"version": "6.16.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.16.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
|
@@ -286,6 +286,18 @@
|
|
|
286
286
|
flex-shrink: var(--__ac-r-flex-shrink);
|
|
287
287
|
}
|
|
288
288
|
|
|
289
|
+
.navds-r-grid-column {
|
|
290
|
+
--__ac-r-grid-column-xs: initial;
|
|
291
|
+
--__ac-r-grid-column-sm: var(--__ac-r-grid-column-xs);
|
|
292
|
+
--__ac-r-grid-column-md: var(--__ac-r-grid-column-sm);
|
|
293
|
+
--__ac-r-grid-column-lg: var(--__ac-r-grid-column-md);
|
|
294
|
+
--__ac-r-grid-column-xl: var(--__ac-r-grid-column-lg);
|
|
295
|
+
--__ac-r-grid-column-2xl: var(--__ac-r-grid-column-xl);
|
|
296
|
+
--__ac-r-grid-column: var(--__ac-r-grid-column-xs);
|
|
297
|
+
|
|
298
|
+
grid-column: var(--__ac-r-grid-column);
|
|
299
|
+
}
|
|
300
|
+
|
|
289
301
|
@media (min-width: 480px) {
|
|
290
302
|
.navds-r-p {
|
|
291
303
|
--__ac-r-padding: var(--__ac-r-p-sm);
|
|
@@ -382,6 +394,10 @@
|
|
|
382
394
|
.navds-r-flex-shrink {
|
|
383
395
|
--__ac-r-flex-shrink: var(--__ac-r-flex-shrink-sm);
|
|
384
396
|
}
|
|
397
|
+
|
|
398
|
+
.navds-r-grid-column {
|
|
399
|
+
--__ac-r-grid-column: var(--__ac-r-grid-column-sm);
|
|
400
|
+
}
|
|
385
401
|
}
|
|
386
402
|
|
|
387
403
|
@media (min-width: 768px) {
|
|
@@ -480,6 +496,10 @@
|
|
|
480
496
|
.navds-r-flex-shrink {
|
|
481
497
|
--__ac-r-flex-shrink: var(--__ac-r-flex-shrink-md);
|
|
482
498
|
}
|
|
499
|
+
|
|
500
|
+
.navds-r-grid-column {
|
|
501
|
+
--__ac-r-grid-column: var(--__ac-r-grid-column-md);
|
|
502
|
+
}
|
|
483
503
|
}
|
|
484
504
|
|
|
485
505
|
@media (min-width: 1024px) {
|
|
@@ -578,6 +598,10 @@
|
|
|
578
598
|
.navds-r-flex-shrink {
|
|
579
599
|
--__ac-r-flex-shrink: var(--__ac-r-flex-shrink-lg);
|
|
580
600
|
}
|
|
601
|
+
|
|
602
|
+
.navds-r-grid-column {
|
|
603
|
+
--__ac-r-grid-column: var(--__ac-r-grid-column-lg);
|
|
604
|
+
}
|
|
581
605
|
}
|
|
582
606
|
|
|
583
607
|
@media (min-width: 1280px) {
|
|
@@ -676,6 +700,10 @@
|
|
|
676
700
|
.navds-r-flex-shrink {
|
|
677
701
|
--__ac-r-flex-shrink: var(--__ac-r-flex-shrink-xl);
|
|
678
702
|
}
|
|
703
|
+
|
|
704
|
+
.navds-r-grid-column {
|
|
705
|
+
--__ac-r-grid-column: var(--__ac-r-grid-column-xl);
|
|
706
|
+
}
|
|
679
707
|
}
|
|
680
708
|
|
|
681
709
|
@media (min-width: 1440px) {
|
|
@@ -774,4 +802,8 @@
|
|
|
774
802
|
.navds-r-flex-shrink {
|
|
775
803
|
--__ac-r-flex-shrink: var(--__ac-r-flex-shrink-2xl);
|
|
776
804
|
}
|
|
805
|
+
|
|
806
|
+
.navds-r-grid-column {
|
|
807
|
+
--__ac-r-grid-column: var(--__ac-r-grid-column-2xl);
|
|
808
|
+
}
|
|
777
809
|
}
|