@navikt/ds-css 8.7.0 → 8.9.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 (26) hide show
  1. package/CHANGELOG.md +22 -0
  2. package/dist/component/alert.css +24 -2
  3. package/dist/component/alert.min.css +1 -1
  4. package/dist/component/date.css +40 -27
  5. package/dist/component/date.min.css +1 -1
  6. package/dist/component/internalheader.css +18 -0
  7. package/dist/component/internalheader.min.css +1 -1
  8. package/dist/component/readmore.css +42 -45
  9. package/dist/component/readmore.min.css +1 -1
  10. package/dist/components.css +124 -74
  11. package/dist/components.min.css +1 -1
  12. package/dist/global/tokens.css +3 -3
  13. package/dist/global/tokens.min.css +1 -1
  14. package/dist/index.css +127 -77
  15. package/dist/index.min.css +1 -1
  16. package/package.json +3 -3
  17. package/src/alert.css +23 -2
  18. package/src/chips.css +0 -2
  19. package/src/data-table.css +162 -43
  20. package/src/data-token-filter.css +4 -9
  21. package/src/data-toolbar.css +21 -9
  22. package/src/date.css +37 -27
  23. package/src/internalheader.css +18 -0
  24. package/src/list.css +0 -1
  25. package/src/listbox.css +44 -6
  26. package/src/read-more.css +45 -37
package/src/read-more.css CHANGED
@@ -3,6 +3,41 @@
3
3
  --__axc-read-more-pi-start: 0px;
4
4
  --__axc-read-more-pi-end: var(--ax-space-4);
5
5
  --__axc-read-more-pb: var(--ax-space-4);
6
+
7
+ &[data-variant="ghost"] {
8
+ --__axc-read-more-radius: var(--ax-radius-4);
9
+ }
10
+
11
+ &[data-variant="moderate"] {
12
+ --__axc-read-more-radius: calc((var(--__axc-read-more-pb) * 2 + var(--ax-font-line-height-large)) / 2);
13
+ }
14
+ }
15
+
16
+ .aksel-read-more--large {
17
+ --__axc-read-more-pb: var(--ax-space-12);
18
+
19
+ &[data-variant="moderate"] {
20
+ --__axc-read-more-pi-start: var(--ax-space-12);
21
+ --__axc-read-more-pi-end: var(--ax-space-24);
22
+ }
23
+ }
24
+
25
+ .aksel-read-more--medium {
26
+ &[data-variant="moderate"] {
27
+ --__axc-read-more-pi-start: var(--ax-space-8);
28
+ --__axc-read-more-pi-end: var(--ax-space-16);
29
+ }
30
+ }
31
+
32
+ .aksel-read-more--small {
33
+ --__axc-read-more-icon-size: 1.25rem;
34
+ --__axc-read-more-pb: var(--ax-space-2);
35
+
36
+ &[data-variant="moderate"] {
37
+ --__axc-read-more-pi-start: var(--ax-space-8);
38
+ --__axc-read-more-pi-end: var(--ax-space-16);
39
+ --__axc-read-more-radius: calc((var(--__axc-read-more-pb) * 2 + var(--ax-font-line-height-medium)) / 2);
40
+ }
6
41
  }
7
42
 
8
43
  /* ----------------------------- ReadMore Button ---------------------------- */
@@ -18,48 +53,27 @@
18
53
  padding-inline: var(--__axc-read-more-pi-start) var(--__axc-read-more-pi-end);
19
54
  padding-block: var(--__axc-read-more-pb);
20
55
  text-align: start;
56
+ border-radius: var(--__axc-read-more-radius);
21
57
 
22
58
  &:focus-visible {
23
59
  outline: 3px solid var(--ax-border-focus);
24
60
  outline-offset: 3px;
25
61
  }
26
62
 
27
- &[data-state="open"] .aksel-read-more__expand-icon {
28
- transform: rotateX(-180deg);
29
- }
30
- }
31
-
32
- .aksel-read-more:is([data-volume="low"], :not([data-volume])) {
33
- & .aksel-read-more__button {
34
- border-radius: var(--ax-radius-4);
35
-
63
+ .aksel-read-more[data-variant="ghost"] & {
36
64
  &:hover {
37
65
  background-color: var(--ax-bg-neutral-moderate-hoverA);
38
66
  }
39
67
  }
40
- }
41
68
 
42
- .aksel-read-more[data-volume="high"] {
43
- & .aksel-read-more__button {
69
+ .aksel-read-more[data-variant="moderate"] & {
44
70
  background-color: var(--ax-bg-moderate);
45
- border-radius: var(--ax-radius-full);
46
71
 
47
72
  &:hover {
48
- background-color: var(--ax-bg-moderate-hoverA);
73
+ background-color: var(--ax-bg-moderate-hover);
49
74
  color: var(--ax-text-default);
50
75
  }
51
76
  }
52
-
53
- &.aksel-read-more--large {
54
- --__axc-read-more-pi-start: var(--ax-space-12);
55
- --__axc-read-more-pi-end: var(--ax-space-24);
56
- }
57
-
58
- &.aksel-read-more--small,
59
- &.aksel-read-more--medium {
60
- --__axc-read-more-pi-start: var(--ax-space-8);
61
- --__axc-read-more-pi-end: var(--ax-space-16);
62
- }
63
77
  }
64
78
 
65
79
  /* ---------------------------- ReadMore Content ---------------------------- */
@@ -70,7 +84,7 @@
70
84
  margin-left: calc(var(--__axc-read-more-pi-start) + var(--__axc-read-more-icon-size) / 2 - 1px);
71
85
  padding-left: calc(var(--__axc-read-more-icon-size) / 2 - 1px + var(--ax-space-4));
72
86
 
73
- &[data-state="closed"] {
87
+ .aksel-read-more[data-state="closed"] & {
74
88
  display: none;
75
89
  }
76
90
  }
@@ -78,20 +92,14 @@
78
92
  .aksel-read-more__expand-icon {
79
93
  font-size: var(--__axc-read-more-icon-size);
80
94
  flex-shrink: 0;
81
- transition: transform 100ms cubic-bezier(0.2, 0, 0, 1);
82
- }
83
-
84
- /* ----------------------------- ReadMore Sizes ----------------------------- */
85
- .aksel-read-more--large {
86
- --__axc-read-more-pb: var(--ax-space-12);
87
- }
95
+ transition: transform 100ms ease-in-out;
88
96
 
89
- .aksel-read-more--small {
90
- --__axc-read-more-icon-size: 1.25rem;
91
- --__axc-read-more-pb: var(--ax-space-2);
97
+ .aksel-read-more[data-state="open"] & {
98
+ transform: rotateX(-180deg);
99
+ }
92
100
  }
93
101
 
94
- /* ------------------------- ReadMore high-contrast ------------------------- */
102
+ /* ------------------------- high-contrast ------------------------- */
95
103
  @media (forced-colors: active) {
96
104
  .aksel-read-more__button {
97
105
  background-color: ButtonFace;