@navikt/ds-css 6.7.0 → 6.8.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 (23) hide show
  1. package/CHANGELOG.md +16 -0
  2. package/config/_mappings.js +11 -0
  3. package/dist/component/form.css +42 -0
  4. package/dist/component/form.min.css +1 -1
  5. package/dist/component/index.css +73 -49
  6. package/dist/component/index.min.css +1 -15
  7. package/dist/component/primitives.css +20 -41
  8. package/dist/component/primitives.min.css +1 -15
  9. package/dist/component/progressbar.css +7 -5
  10. package/dist/component/progressbar.min.css +1 -1
  11. package/dist/component/readmore.css +3 -2
  12. package/dist/component/readmore.min.css +1 -1
  13. package/dist/components.css +83 -48
  14. package/dist/components.min.css +1 -15
  15. package/dist/global/tokens.css +1 -1
  16. package/dist/index.css +73 -49
  17. package/dist/index.min.css +1 -15
  18. package/form/form-progress.css +52 -0
  19. package/form/index.css +1 -0
  20. package/package.json +2 -2
  21. package/primitives/hgrid.css +20 -41
  22. package/progress-bar.css +7 -5
  23. package/read-more.css +3 -2
package/form/form-progress.css ADDED
@@ -0,0 +1,52 @@
1
+ .navds-form-progress__bar {
2
+ margin-bottom: var(--a-spacing-2);
3
+ }
4
+
5
+ .navds-form-progress__button[data-state="closed"] .navds-form-progress__btn-txt-hide,
6
+ .navds-form-progress__button[data-state="open"] .navds-form-progress__btn-txt-show {
7
+ display: none;
8
+ }
9
+
10
+ .navds-form-progress__button:hover svg {
11
+ transform: translateY(1px);
12
+ }
13
+
14
+ .navds-form-progress__button[data-state="open"] svg {
15
+ transform: rotate(-180deg);
16
+ }
17
+
18
+ .navds-form-progress__button[data-state="open"]:hover svg {
19
+ transform: translateY(-1px) rotate(-180deg);
20
+ }
21
+
22
+ .navds-form-progress__collapsible {
23
+ display: grid;
24
+ grid-template-rows: 0fr;
25
+ overflow: hidden;
26
+ transition: grid-template-rows 0.3s cubic-bezier(0.3, 0, 0.15, 1);
27
+ }
28
+
29
+ .navds-form-progress__collapsible[hidden] {
30
+ display: grid;
31
+ }
32
+
33
+ .navds-form-progress__collapsible[data-state="open"] {
34
+ grid-template-rows: 1fr;
35
+ }
36
+
37
+ .navds-form-progress__collapsible-content {
38
+ min-height: 0;
39
+ transition: visibility 0.3s;
40
+ visibility: hidden;
41
+ }
42
+
43
+ .navds-form-progress__collapsible[data-state="open"] .navds-form-progress__collapsible-content {
44
+ visibility: visible;
45
+ }
46
+
47
+ .navds-form-progress__stepper {
48
+ border: 2px solid var(--a-border-subtle);
49
+ border-radius: var(--a-border-radius-large);
50
+ padding: var(--a-spacing-2) var(--a-spacing-4) 0;
51
+ margin-top: var(--a-spacing-1);
52
+ }
package/form/index.css CHANGED
@@ -14,3 +14,4 @@
14
14
  @import "search.css";
15
15
  @import "combobox.css";
16
16
  @import "form-summary.css";
17
+ @import "form-progress.css";
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@navikt/ds-css",
3
- "version": "6.7.0",
3
+ "version": "6.8.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.7.0",
30
+ "@navikt/ds-tokens": "^6.8.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
@@ -1,17 +1,17 @@
1
1
  .navds-hgrid {
2
2
  --__ac-hgrid-columns-xs: initial;
3
- --__ac-hgrid-columns-sm: initial;
4
- --__ac-hgrid-columns-md: initial;
5
- --__ac-hgrid-columns-lg: initial;
6
- --__ac-hgrid-columns-xl: initial;
7
- --__ac-hgrid-columns-2xl: initial;
3
+ --__ac-hgrid-columns-sm: var(--__ac-hgrid-columns-xs);
4
+ --__ac-hgrid-columns-md: var(--__ac-hgrid-columns-sm);
5
+ --__ac-hgrid-columns-lg: var(--__ac-hgrid-columns-md);
6
+ --__ac-hgrid-columns-xl: var(--__ac-hgrid-columns-lg);
7
+ --__ac-hgrid-columns-2xl: var(--__ac-hgrid-columns-xl);
8
8
  --__ac-hgrid-columns: var(--__ac-hgrid-columns-xs);
9
9
  --__ac-hgrid-gap-xs: initial;
10
- --__ac-hgrid-gap-sm: initial;
11
- --__ac-hgrid-gap-md: initial;
12
- --__ac-hgrid-gap-lg: initial;
13
- --__ac-hgrid-gap-xl: initial;
14
- --__ac-hgrid-gap-2xl: initial;
10
+ --__ac-hgrid-gap-sm: var(--__ac-hgrid-gap-xs);
11
+ --__ac-hgrid-gap-md: var(--__ac-hgrid-gap-sm);
12
+ --__ac-hgrid-gap-lg: var(--__ac-hgrid-gap-md);
13
+ --__ac-hgrid-gap-xl: var(--__ac-hgrid-gap-lg);
14
+ --__ac-hgrid-gap-2xl: var(--__ac-hgrid-gap-xl);
15
15
  --__ac-hgrid-gap: var(--__ac-hgrid-gap-xs);
16
16
  --__ac-hgrid-align: initial;
17
17
 
@@ -23,56 +23,35 @@
23
23
 
24
24
  @media (min-width: 480px) {
25
25
  .navds-hgrid {
26
- --__ac-hgrid-columns: var(--__ac-hgrid-columns-sm, var(--__ac-hgrid-columns-xs));
27
- --__ac-hgrid-gap: var(--__ac-hgrid-gap-sm, var(--__ac-hgrid-gap-xs));
26
+ --__ac-hgrid-columns: var(--__ac-hgrid-columns-sm);
27
+ --__ac-hgrid-gap: var(--__ac-hgrid-gap-sm);
28
28
  }
29
29
  }
30
30
 
31
31
  @media (min-width: 768px) {
32
32
  .navds-hgrid {
33
- --__ac-hgrid-columns: var(--__ac-hgrid-columns-md, var(--__ac-hgrid-columns-sm, var(--__ac-hgrid-columns-xs)));
34
- --__ac-hgrid-gap: var(--__ac-hgrid-gap-md, var(--__ac-hgrid-gap-sm, var(--__ac-hgrid-gap-xs)));
33
+ --__ac-hgrid-columns: var(--__ac-hgrid-columns-md);
34
+ --__ac-hgrid-gap: var(--__ac-hgrid-gap-md);
35
35
  }
36
36
  }
37
37
 
38
38
  @media (min-width: 1024px) {
39
39
  .navds-hgrid {
40
- --__ac-hgrid-columns: var(
41
- --__ac-hgrid-columns-lg,
42
- var(--__ac-hgrid-columns-md, var(--__ac-hgrid-columns-sm, var(--__ac-hgrid-columns-xs)))
43
- );
44
- --__ac-hgrid-gap: var(--__ac-hgrid-gap-lg, var(--__ac-hgrid-gap-md, var(--__ac-hgrid-gap-sm, var(--__ac-hgrid-gap-xs))));
40
+ --__ac-hgrid-columns: var(--__ac-hgrid-columns-lg);
41
+ --__ac-hgrid-gap: var(--__ac-hgrid-gap-lg);
45
42
  }
46
43
  }
47
44
 
48
45
  @media (min-width: 1280px) {
49
46
  .navds-hgrid {
50
- --__ac-hgrid-columns: var(
51
- --__ac-hgrid-columns-xl,
52
- var(--__ac-hgrid-columns-lg, var(--__ac-hgrid-columns-md, var(--__ac-hgrid-columns-sm, var(--__ac-hgrid-columns-xs))))
53
- );
54
- --__ac-hgrid-gap: var(
55
- --__ac-hgrid-gap-xl,
56
- var(--__ac-hgrid-gap-lg, var(--__ac-hgrid-gap-md, var(--__ac-hgrid-gap-sm, var(--__ac-hgrid-gap-xs))))
57
- );
47
+ --__ac-hgrid-columns: var(--__ac-hgrid-columns-xl);
48
+ --__ac-hgrid-gap: var(--__ac-hgrid-gap-xl);
58
49
  }
59
50
  }
60
51
 
61
52
  @media (min-width: 1440px) {
62
53
  .navds-hgrid {
63
- --__ac-hgrid-columns: var(
64
- --__ac-hgrid-columns-2xl,
65
- var(
66
- --__ac-hgrid-columns-xl,
67
- var(--__ac-hgrid-columns-lg, var(--__ac-hgrid-columns-md, var(--__ac-hgrid-columns-sm, var(--__ac-hgrid-columns-xs))))
68
- )
69
- );
70
- --__ac-hgrid-gap: var(
71
- --__ac-hgrid-gap-2xl,
72
- var(
73
- --__ac-hgrid-gap-xl,
74
- var(--__ac-hgrid-gap-lg, var(--__ac-hgrid-gap-md, var(--__ac-hgrid-gap-sm, var(--__ac-hgrid-gap-xs))))
75
- )
76
- );
54
+ --__ac-hgrid-columns: var(--__ac-hgrid-columns-2xl);
55
+ --__ac-hgrid-gap: var(--__ac-hgrid-gap-2xl);
77
56
  }
78
57
  }
package/progress-bar.css CHANGED
@@ -39,15 +39,14 @@
39
39
  }
40
40
 
41
41
  .navds-progress-bar__foreground--indeterminate {
42
- --__ac-progress-bar-duration: initial;
43
- --__ac-progress-bar-delay: initial;
42
+ --__ac-progress-bar-simulated: initial;
44
43
 
45
44
  animation-name: navds-progress-bar-indeterminate-grow, navds-progress-bar-indeterminate;
46
45
  animation-timing-function: ease-in-out, ease-in-out;
47
- animation-duration: var(--__ac-progress-bar-duration), 2500ms;
46
+ animation-duration: var(--__ac-progress-bar-simulated), 2500ms;
48
47
  animation-fill-mode: forwards, none;
49
48
  animation-iteration-count: 1, infinite;
50
- animation-delay: 0s, calc((var(--__ac-progress-bar-duration) + var(--__ac-progress-bar-delay)));
49
+ animation-delay: 0s, var(--__ac-progress-bar-simulated);
51
50
  }
52
51
 
53
52
  /* navds-progress-bar-indeterminate wave animation */
@@ -85,11 +84,14 @@
85
84
  transform: translateX(-40%);
86
85
  }
87
86
 
88
- 40%,
89
87
  50% {
90
88
  transform: translateX(-20%);
91
89
  }
92
90
 
91
+ 75% {
92
+ transform: translateX(-10%);
93
+ }
94
+
93
95
  100% {
94
96
  transform: translateX(-10%);
95
97
  }
package/read-more.css CHANGED
@@ -79,7 +79,8 @@
79
79
  }
80
80
 
81
81
  .navds-read-more__button:hover > .navds-read-more__expand-icon {
82
- transform: translateY(1px);
82
+ position: relative;
83
+ top: 1px;
83
84
  }
84
85
 
85
86
  .navds-read-more--open > .navds-read-more__button > .navds-read-more__expand-icon {
@@ -87,5 +88,5 @@
87
88
  }
88
89
 
89
90
  .navds-read-more--open > .navds-read-more__button:hover > .navds-read-more__expand-icon {
90
- transform: translateY(-1px) rotate(-180deg);
91
+ top: -1px;
91
92
  }