@digdir/designsystemet-css 0.11.0-alpha.7 → 0.11.0-alpha.9

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 (69) hide show
  1. package/accordion.css +118 -120
  2. package/alert.css +58 -64
  3. package/box.css +70 -72
  4. package/button.css +174 -176
  5. package/card.css +189 -191
  6. package/checkbox.css +157 -159
  7. package/chip.css +140 -142
  8. package/combobox.css +295 -295
  9. package/dist/accordion.css +1 -1
  10. package/dist/alert.css +1 -1
  11. package/dist/box.css +1 -1
  12. package/dist/button.css +1 -1
  13. package/dist/card.css +1 -1
  14. package/dist/checkbox.css +1 -1
  15. package/dist/chip.css +1 -1
  16. package/dist/combobox.css +1 -1
  17. package/dist/divider.css +1 -1
  18. package/dist/dropdownmenu.css +1 -1
  19. package/dist/error-summary.css +1 -1
  20. package/dist/fieldset.css +1 -1
  21. package/dist/helptext.css +1 -1
  22. package/dist/index.css +1 -1
  23. package/dist/link.css +1 -1
  24. package/dist/list.css +1 -1
  25. package/dist/modal.css +1 -1
  26. package/dist/native-select.css +1 -1
  27. package/dist/pagination.css +1 -1
  28. package/dist/popover.css +1 -1
  29. package/dist/radio.css +1 -1
  30. package/dist/search.css +1 -1
  31. package/dist/skeleton.css +1 -1
  32. package/dist/skiplink.css +1 -1
  33. package/dist/spinner.css +1 -1
  34. package/dist/switch.css +1 -1
  35. package/dist/table.css +1 -1
  36. package/dist/tabs.css +1 -1
  37. package/dist/tag.css +1 -1
  38. package/dist/textarea.css +1 -1
  39. package/dist/textfield.css +1 -1
  40. package/dist/togglegroup.css +1 -1
  41. package/dist/tooltip.css +1 -1
  42. package/dist/utilities.css +1 -0
  43. package/divider.css +13 -15
  44. package/dropdownmenu.css +55 -46
  45. package/error-summary.css +19 -15
  46. package/fieldset.css +42 -44
  47. package/helptext.css +49 -46
  48. package/index.css +40 -40
  49. package/link.css +50 -52
  50. package/list.css +18 -14
  51. package/modal.css +86 -85
  52. package/native-select.css +88 -90
  53. package/package.json +2 -2
  54. package/pagination.css +53 -55
  55. package/popover.css +71 -69
  56. package/radio.css +151 -146
  57. package/search.css +138 -142
  58. package/skeleton.css +46 -47
  59. package/skiplink.css +41 -41
  60. package/spinner.css +51 -49
  61. package/switch.css +190 -192
  62. package/table.css +117 -111
  63. package/tabs.css +69 -75
  64. package/tag.css +57 -59
  65. package/textarea.css +64 -66
  66. package/textfield.css +122 -122
  67. package/togglegroup.css +22 -24
  68. package/tooltip.css +12 -11
  69. package/utilities.css +38 -0
package/card.css CHANGED
@@ -1,192 +1,190 @@
1
- @layer ds.card {
2
- .ds-card {
3
- --dsc-card-border-color: var(--ds-color-neutral-border-subtle);
4
- --dsc-card-backround: var(--ds-color-neutral-surface-default);
5
- --dsc-card-color: var(--ds-color-neutral-text-default);
6
-
7
- display: flex;
8
- flex-direction: column;
9
- width: 100%;
10
- box-sizing: border-box;
11
- position: relative;
12
- overflow: hidden;
13
- color: var(--dsc-card-color);
14
- border-radius: min(1rem, var(--ds-border-radius-md));
15
- border: 1px solid var(--dsc-card-border-color);
16
- background: var(--dsc-card-backround);
17
- }
18
-
19
- .ds-card a,
20
- .ds-card a:visited {
21
- color: var(--ds-color-neutral-text-default);
22
- }
23
-
24
- .ds-card > hr {
25
- width: 100%;
26
- margin: var(--ds-spacing-3) 0;
27
- }
28
-
29
- .ds-card__media {
30
- width: auto;
31
- }
32
-
33
- .ds-card__media > * {
34
- display: flex;
35
- flex-direction: column;
36
- width: 100%;
37
- border: 0;
38
- }
39
-
40
- .ds-card > *:not(.ds-card__media, hr) {
41
- padding-left: var(--ds-spacing-6);
42
- padding-right: var(--ds-spacing-6);
43
- }
44
-
45
- .ds-card > *:not(.ds-card__media):first-child {
46
- padding-top: var(--ds-spacing-6);
47
- }
48
-
49
- .ds-card > *:not(.ds-card__media):last-child {
50
- padding-bottom: var(--ds-spacing-6);
51
- }
52
-
53
- .ds-card__media:first-child {
54
- padding-bottom: var(--ds-spacing-4);
55
- }
56
-
57
- .ds-card__media:last-child {
58
- padding-top: var(--ds-spacing-6);
59
- }
60
-
61
- .ds-card--link {
62
- --dsc-card-border-color: var(--ds-color-neutral-border-default);
63
-
64
- text-decoration: none;
65
- }
66
-
67
- .ds-card__footer,
68
- .ds-card__content {
69
- display: flex;
70
- justify-content: flex-start;
71
- gap: var(--ds-spacing-4);
72
- flex-wrap: wrap;
73
- word-wrap: break-word;
74
- padding: var(--ds-spacing-2) 0;
75
- color: inherit;
76
- }
77
-
78
- .ds-card__content {
79
- flex-direction: column;
80
- }
81
-
82
- .ds-card__header {
83
- display: flex;
84
- flex-direction: column;
85
- flex-wrap: wrap;
86
- word-wrap: break-word;
87
- font-family: inherit;
88
- padding: var(--ds-spacing-2) 0;
89
- }
90
-
91
- .ds-card__header h1,
92
- .ds-card__header h2,
93
- .ds-card__header h3,
94
- .ds-card__header h4,
95
- .ds-card__header h5,
96
- .ds-card__header h6 {
97
- color: inherit;
98
- }
99
-
100
- .ds-card--link h1,
101
- .ds-card--link h2,
102
- .ds-card--link h3,
103
- .ds-card--link h4,
104
- .ds-card--link h5,
105
- .ds-card--link h6 {
106
- text-decoration: underline;
107
- text-decoration-thickness: max(1px, 0.0625rem, 0.1025em);
108
- text-underline-offset: max(6px, 0.25rem, 0.22em);
109
- }
110
-
111
- .ds-card--neutral {
112
- --dsc-card-border-color: var(--ds-color-neutral-border-subtle);
113
- --dsc-card-backround: var(--ds-color-neutral-background-default);
114
- }
115
-
116
- .ds-card--neutral.ds-card--link:hover {
117
- --dsc-card-border-color: var(--ds-color-neutral-border-subtle);
118
- --dsc-card-backround: var(--ds-color-neutral-background-subtle);
119
- }
120
-
121
- .ds-card--neutral.ds-card--link:active {
122
- --dsc-card-backround: var(--ds-color-neutral-surface-default);
123
- }
124
-
125
- .ds-card--subtle {
126
- --dsc-card-border-color: var(--ds-color-neutral-border-subtle);
127
- --dsc-card-backround: var(--ds-color-neutral-background-subtle);
128
- }
129
-
130
- .ds-card--subtle.ds-card--link:hover {
131
- --dsc-card-border-color: var(--ds-color-neutral-border-default);
132
- --dsc-card-backround: var(--ds-color-neutral-surface-default);
133
- }
134
-
135
- .ds-card--subtle.ds-card--link:active {
136
- --dsc-card-backround: var(--ds-color-neutral-surface-hover);
137
- }
138
-
139
- .ds-card--brand1 {
140
- --dsc-card-border-color: var(--ds-color-brand1-border-subtle);
141
- --dsc-card-backround: var(--ds-color-brand1-surface-default);
142
- --dsc-card-color: var(--ds-color-brand1-text-default);
143
- }
144
-
145
- .ds-card--brand1.ds-card--link {
146
- --dsc-card-border-color: var(--ds-color-brand1-border-default);
147
- }
148
-
149
- .ds-card--brand1.ds-card--link:hover {
150
- --dsc-card-backround: var(--ds-color-brand1-surface-hover);
151
- }
152
-
153
- .ds-card--brand1.ds-card--link:active {
154
- --dsc-card-backround: var(--ds-color-brand1-surface-active);
155
- }
156
-
157
- .ds-card--brand2 {
158
- --dsc-card-border-color: var(--ds-color-brand2-border-subtle);
159
- --dsc-card-backround: var(--ds-color-brand2-surface-default);
160
- --dsc-card-color: var(--ds-color-brand2-text-default);
161
- }
162
-
163
- .ds-card--brand2.ds-card--link {
164
- --dsc-card-border-color: var(--ds-color-brand2-border-default);
165
- }
166
-
167
- .ds-card--brand2.ds-card--link:hover {
168
- --dsc-card-backround: var(--ds-color-brand2-surface-hover);
169
- }
170
-
171
- .ds-card--brand2.ds-card--link:active {
172
- --dsc-card-backround: var(--ds-color-brand2-surface-active);
173
- }
174
-
175
- .ds-card--brand3 {
176
- --dsc-card-border-color: var(--ds-color-brand3-border-subtle);
177
- --dsc-card-backround: var(--ds-color-brand3-surface-default);
178
- --dsc-card-color: var(--ds-color-brand3-text-default);
179
- }
180
-
181
- .ds-card--brand3.ds-card--link {
182
- --dsc-card-border-color: var(--ds-color-brand3-border-default);
183
- }
184
-
185
- .ds-card--brand3.ds-card--link:hover {
186
- --dsc-card-backround: var(--ds-color-brand3-surface-hover);
187
- }
188
-
189
- .ds-card--brand3.ds-card--link:active {
190
- --dsc-card-backround: var(--ds-color-brand3-surface-active);
191
- }
1
+ .ds-card {
2
+ --dsc-card-border-color: var(--ds-color-neutral-border-subtle);
3
+ --dsc-card-backround: var(--ds-color-neutral-surface-default);
4
+ --dsc-card-color: var(--ds-color-neutral-text-default);
5
+
6
+ display: flex;
7
+ flex-direction: column;
8
+ width: 100%;
9
+ box-sizing: border-box;
10
+ position: relative;
11
+ overflow: hidden;
12
+ color: var(--dsc-card-color);
13
+ border-radius: min(1rem, var(--ds-border-radius-md));
14
+ border: 1px solid var(--dsc-card-border-color);
15
+ background: var(--dsc-card-backround);
16
+ }
17
+
18
+ .ds-card a,
19
+ .ds-card a:visited {
20
+ color: var(--ds-color-neutral-text-default);
21
+ }
22
+
23
+ .ds-card > hr {
24
+ width: 100%;
25
+ margin: var(--ds-spacing-3) 0;
26
+ }
27
+
28
+ .ds-card__media {
29
+ width: auto;
30
+ }
31
+
32
+ .ds-card__media > * {
33
+ display: flex;
34
+ flex-direction: column;
35
+ width: 100%;
36
+ border: 0;
37
+ }
38
+
39
+ .ds-card > *:not(.ds-card__media, hr) {
40
+ padding-left: var(--ds-spacing-6);
41
+ padding-right: var(--ds-spacing-6);
42
+ }
43
+
44
+ .ds-card > *:not(.ds-card__media):first-child {
45
+ padding-top: var(--ds-spacing-6);
46
+ }
47
+
48
+ .ds-card > *:not(.ds-card__media):last-child {
49
+ padding-bottom: var(--ds-spacing-6);
50
+ }
51
+
52
+ .ds-card__media:first-child {
53
+ padding-bottom: var(--ds-spacing-4);
54
+ }
55
+
56
+ .ds-card__media:last-child {
57
+ padding-top: var(--ds-spacing-6);
58
+ }
59
+
60
+ .ds-card--link {
61
+ --dsc-card-border-color: var(--ds-color-neutral-border-default);
62
+
63
+ text-decoration: none;
64
+ }
65
+
66
+ .ds-card__footer,
67
+ .ds-card__content {
68
+ display: flex;
69
+ justify-content: flex-start;
70
+ gap: var(--ds-spacing-4);
71
+ flex-wrap: wrap;
72
+ word-wrap: break-word;
73
+ padding: var(--ds-spacing-2) 0;
74
+ color: inherit;
75
+ }
76
+
77
+ .ds-card__content {
78
+ flex-direction: column;
79
+ }
80
+
81
+ .ds-card__header {
82
+ display: flex;
83
+ flex-direction: column;
84
+ flex-wrap: wrap;
85
+ word-wrap: break-word;
86
+ font-family: inherit;
87
+ padding: var(--ds-spacing-2) 0;
88
+ }
89
+
90
+ .ds-card__header h1,
91
+ .ds-card__header h2,
92
+ .ds-card__header h3,
93
+ .ds-card__header h4,
94
+ .ds-card__header h5,
95
+ .ds-card__header h6 {
96
+ color: inherit;
97
+ }
98
+
99
+ .ds-card--link h1,
100
+ .ds-card--link h2,
101
+ .ds-card--link h3,
102
+ .ds-card--link h4,
103
+ .ds-card--link h5,
104
+ .ds-card--link h6 {
105
+ text-decoration: underline;
106
+ text-decoration-thickness: max(1px, 0.0625rem, 0.1025em);
107
+ text-underline-offset: max(6px, 0.25rem, 0.22em);
108
+ }
109
+
110
+ .ds-card--neutral {
111
+ --dsc-card-border-color: var(--ds-color-neutral-border-subtle);
112
+ --dsc-card-backround: var(--ds-color-neutral-background-default);
113
+ }
114
+
115
+ .ds-card--neutral.ds-card--link:hover {
116
+ --dsc-card-border-color: var(--ds-color-neutral-border-subtle);
117
+ --dsc-card-backround: var(--ds-color-neutral-background-subtle);
118
+ }
119
+
120
+ .ds-card--neutral.ds-card--link:active {
121
+ --dsc-card-backround: var(--ds-color-neutral-surface-default);
122
+ }
123
+
124
+ .ds-card--subtle {
125
+ --dsc-card-border-color: var(--ds-color-neutral-border-subtle);
126
+ --dsc-card-backround: var(--ds-color-neutral-background-subtle);
127
+ }
128
+
129
+ .ds-card--subtle.ds-card--link:hover {
130
+ --dsc-card-border-color: var(--ds-color-neutral-border-default);
131
+ --dsc-card-backround: var(--ds-color-neutral-surface-default);
132
+ }
133
+
134
+ .ds-card--subtle.ds-card--link:active {
135
+ --dsc-card-backround: var(--ds-color-neutral-surface-hover);
136
+ }
137
+
138
+ .ds-card--brand1 {
139
+ --dsc-card-border-color: var(--ds-color-brand1-border-subtle);
140
+ --dsc-card-backround: var(--ds-color-brand1-surface-default);
141
+ --dsc-card-color: var(--ds-color-brand1-text-default);
142
+ }
143
+
144
+ .ds-card--brand1.ds-card--link {
145
+ --dsc-card-border-color: var(--ds-color-brand1-border-default);
146
+ }
147
+
148
+ .ds-card--brand1.ds-card--link:hover {
149
+ --dsc-card-backround: var(--ds-color-brand1-surface-hover);
150
+ }
151
+
152
+ .ds-card--brand1.ds-card--link:active {
153
+ --dsc-card-backround: var(--ds-color-brand1-surface-active);
154
+ }
155
+
156
+ .ds-card--brand2 {
157
+ --dsc-card-border-color: var(--ds-color-brand2-border-subtle);
158
+ --dsc-card-backround: var(--ds-color-brand2-surface-default);
159
+ --dsc-card-color: var(--ds-color-brand2-text-default);
160
+ }
161
+
162
+ .ds-card--brand2.ds-card--link {
163
+ --dsc-card-border-color: var(--ds-color-brand2-border-default);
164
+ }
165
+
166
+ .ds-card--brand2.ds-card--link:hover {
167
+ --dsc-card-backround: var(--ds-color-brand2-surface-hover);
168
+ }
169
+
170
+ .ds-card--brand2.ds-card--link:active {
171
+ --dsc-card-backround: var(--ds-color-brand2-surface-active);
172
+ }
173
+
174
+ .ds-card--brand3 {
175
+ --dsc-card-border-color: var(--ds-color-brand3-border-subtle);
176
+ --dsc-card-backround: var(--ds-color-brand3-surface-default);
177
+ --dsc-card-color: var(--ds-color-brand3-text-default);
178
+ }
179
+
180
+ .ds-card--brand3.ds-card--link {
181
+ --dsc-card-border-color: var(--ds-color-brand3-border-default);
182
+ }
183
+
184
+ .ds-card--brand3.ds-card--link:hover {
185
+ --dsc-card-backround: var(--ds-color-brand3-surface-hover);
186
+ }
187
+
188
+ .ds-card--brand3.ds-card--link:active {
189
+ --dsc-card-backround: var(--ds-color-brand3-surface-active);
192
190
  }