@navikt/ds-css 5.3.0 → 5.3.2

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 (19) hide show
  1. package/CHANGELOG.md +14 -0
  2. package/accordion.css +4 -1
  3. package/dist/component/accordion.css +4 -1
  4. package/dist/component/accordion.min.css +1 -1
  5. package/dist/component/guidepanel.css +83 -49
  6. package/dist/component/guidepanel.min.css +1 -1
  7. package/dist/component/index.css +76 -52
  8. package/dist/component/index.min.css +3 -3
  9. package/dist/component/skeleton.css +0 -1
  10. package/dist/component/skeleton.min.css +1 -1
  11. package/dist/components.css +75 -51
  12. package/dist/components.min.css +3 -3
  13. package/dist/global/tokens.css +1 -1
  14. package/dist/index.css +76 -52
  15. package/dist/index.min.css +3 -3
  16. package/guide-panel.css +74 -50
  17. package/package.json +2 -2
  18. package/skeleton.css +0 -1
  19. package/tokens.json +2 -2
package/guide-panel.css CHANGED
@@ -1,72 +1,96 @@
1
- /**
2
- * GuidePanel component
3
- */
4
1
  .navds-guide-panel {
2
+ --__ac-guide-panel-guide-size: 4rem;
3
+
5
4
  position: relative;
6
- padding-left: var(--a-spacing-10);
5
+ padding-top: calc(var(--__ac-guide-panel-guide-size) / 2);
7
6
  }
8
7
 
9
- .navds-guide-panel__content {
10
- background-color: var(--ac-guide-panel-bg, var(--a-surface-default));
11
- border-radius: var(--a-border-radius-medium);
12
- border: 2px solid var(--ac-guide-panel-border, var(--a-border-action));
13
- min-height: 7.25rem;
14
- padding: var(--a-spacing-6);
15
- padding-left: var(--a-spacing-14);
8
+ .navds-guide {
9
+ background: var(--ac-guide-panel-illustration-bg, var(--a-surface-alt-3-subtle));
10
+ border: 2px solid var(--ac-guide-panel-border, var(--a-border-alt-3));
11
+ border-radius: var(--a-border-radius-full);
12
+ overflow: hidden;
13
+ position: absolute;
14
+ width: var(--__ac-guide-panel-guide-size);
15
+ height: var(--__ac-guide-panel-guide-size);
16
+ left: 50%;
17
+ transform: translate(-50%, -50%);
16
18
  }
17
19
 
18
- .navds-guide-panel--poster {
19
- padding-left: 0;
20
- padding-top: var(--a-spacing-12);
20
+ .navds-guide svg,
21
+ .navds-guide img {
22
+ height: 100%;
23
+ width: 100%;
21
24
  }
22
25
 
23
- .navds-guide-panel--poster .navds-guide-panel__content {
24
- padding: var(--a-spacing-8);
25
- padding-top: var(--a-spacing-16);
26
+ .navds-guide-panel__content {
27
+ background-color: var(--ac-guide-panel-bg, var(--a-surface-default));
28
+ border: 2px solid var(--ac-guide-panel-border, var(--a-border-alt-3));
29
+ border-radius: var(--a-border-radius-large);
30
+ padding: var(--a-spacing-4);
31
+ padding-top: var(--a-spacing-12);
26
32
  }
27
33
 
28
- .navds-guide-panel .navds-guide {
29
- position: absolute;
30
- top: var(--a-spacing-4);
31
- transform: translateX(-50%);
32
- border: 2px solid var(--ac-guide-panel-border, var(--a-border-action));
33
- }
34
+ @media (min-width: 480px) {
35
+ .navds-guide-panel {
36
+ --__ac-guide-panel-guide-size: 6.25rem;
37
+ }
34
38
 
35
- .navds-guide-panel--poster .navds-guide {
36
- left: 50%;
37
- top: 0;
39
+ .navds-guide-panel__content {
40
+ padding: var(--a-spacing-8);
41
+ padding-top: 4.25rem;
42
+ }
38
43
  }
39
44
 
40
- /**
41
- * Guide component
42
- */
43
- .navds-guide {
44
- display: flex;
45
- align-items: center;
46
- justify-content: center;
47
- border-radius: var(--a-border-radius-full);
45
+ /* not-poster */
46
+
47
+ .navds-guide-panel--not-poster {
48
+ padding-top: 0;
49
+ padding-left: calc(var(--__ac-guide-panel-guide-size) / 2);
48
50
  }
49
51
 
50
- /* Guide illustration frame */
51
- .navds-guide__illustration {
52
- background: var(--ac-guide-panel-illustration-bg, var(--a-surface-action-subtle));
53
- border-radius: var(--a-border-radius-full);
54
- overflow: hidden;
52
+ .navds-guide-panel--not-poster .navds-guide {
53
+ left: 0;
54
+ top: var(--a-spacing-5);
55
+ transform: none;
55
56
  }
56
57
 
57
- .navds-guide__illustration svg,
58
- .navds-guide__illustration img {
59
- height: 100%;
60
- width: 100%;
58
+ .navds-guide-panel--not-poster .navds-guide-panel__content {
59
+ padding: var(--a-spacing-4);
60
+ padding-left: var(--a-spacing-10);
61
+ min-height: calc(var(--__ac-guide-panel-guide-size) + var(--a-spacing-5) + var(--a-spacing-5));
61
62
  }
62
63
 
63
- /* Illustration sizes */
64
- .navds-guide__illustration--small {
65
- height: 5rem;
66
- width: 5rem;
64
+ @media (min-width: 480px) {
65
+ .navds-guide-panel--not-poster {
66
+ --__ac-guide-panel-guide-size: 5rem;
67
+ }
68
+
69
+ .navds-guide-panel--not-poster .navds-guide-panel__content {
70
+ padding: var(--a-spacing-6);
71
+ padding-left: var(--a-spacing-14);
72
+ }
67
73
  }
68
74
 
69
- .navds-guide__illustration--medium {
70
- height: 6rem;
71
- width: 6rem;
75
+ /* responsive-poster (on desktop) */
76
+
77
+ @media (min-width: 480px) {
78
+ .navds-guide-panel--responsive-poster {
79
+ --__ac-guide-panel-guide-size: 5rem;
80
+
81
+ padding-top: 0;
82
+ padding-left: calc(var(--__ac-guide-panel-guide-size) / 2);
83
+ }
84
+
85
+ .navds-guide-panel--responsive-poster .navds-guide {
86
+ left: 0;
87
+ top: var(--a-spacing-5);
88
+ transform: none;
89
+ }
90
+
91
+ .navds-guide-panel--responsive-poster .navds-guide-panel__content {
92
+ padding: var(--a-spacing-6);
93
+ padding-left: var(--a-spacing-14);
94
+ min-height: calc(var(--__ac-guide-panel-guide-size) + var(--a-spacing-5) + var(--a-spacing-5));
95
+ }
72
96
  }
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@navikt/ds-css",
3
- "version": "5.3.0",
3
+ "version": "5.3.2",
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": "^5.3.0",
30
+ "@navikt/ds-tokens": "^5.3.2",
31
31
  "cssnano": "6.0.0",
32
32
  "fast-glob": "3.2.11",
33
33
  "lodash": "4.17.21",
package/skeleton.css CHANGED
@@ -1,5 +1,4 @@
1
1
  .navds-skeleton {
2
- display: block;
3
2
  background-color: var(--ac-skeleton-bg, var(--a-surface-neutral-moderate));
4
3
  height: 1.3em;
5
4
  animation: akselSkeletonAnimation 0.8s linear infinite alternate;
package/tokens.json CHANGED
@@ -156,8 +156,8 @@
156
156
  },
157
157
  "guidepanel": {
158
158
  "--ac-guide-panel-bg": "--a-surface-default",
159
- "--ac-guide-panel-border": "--a-border-action",
160
- "--ac-guide-panel-illustration-bg": "--a-surface-action-subtle"
159
+ "--ac-guide-panel-border": "--a-border-alt-3",
160
+ "--ac-guide-panel-illustration-bg": "--a-surface-alt-3-subtle"
161
161
  },
162
162
  "helptext": {
163
163
  "--ac-help-text-button-color": "--a-surface-action",