@solid-design-system/styles 1.3.2 → 1.4.1
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 +20 -0
- package/cdn/modules/interactive.css +1 -1
- package/cdn/modules/pagination.css +1 -1
- package/cdn/modules/prose.css +1 -1
- package/cdn/solid-styles.css +1 -1
- package/cdn-versioned/modules/chip.css +1 -1
- package/cdn-versioned/modules/container.css +1 -1
- package/cdn-versioned/modules/copyright.css +1 -1
- package/cdn-versioned/modules/display.css +1 -1
- package/cdn-versioned/modules/flag.css +1 -1
- package/cdn-versioned/modules/footnotes.css +1 -1
- package/cdn-versioned/modules/headline.css +1 -1
- package/cdn-versioned/modules/hidden-links.css +1 -1
- package/cdn-versioned/modules/interactive.css +1 -1
- package/cdn-versioned/modules/leadtext.css +1 -1
- package/cdn-versioned/modules/list.css +1 -1
- package/cdn-versioned/modules/mark.css +1 -1
- package/cdn-versioned/modules/media.css +1 -1
- package/cdn-versioned/modules/meta.css +1 -1
- package/cdn-versioned/modules/pagination.css +1 -1
- package/cdn-versioned/modules/paragraph.css +1 -1
- package/cdn-versioned/modules/prose.css +1 -1
- package/cdn-versioned/modules/status-badge.css +1 -1
- package/cdn-versioned/modules/table-cell.css +1 -1
- package/cdn-versioned/modules/table.css +1 -1
- package/cdn-versioned/solid-styles.css +1 -1
- package/dist/modules/interactive.css +5 -1
- package/dist/modules/pagination.css +46 -45
- package/dist/modules/prose.css +5 -1
- package/dist/solid-styles.css +48 -43
- package/dist-versioned/modules/chip.css +6 -6
- package/dist-versioned/modules/container.css +45 -45
- package/dist-versioned/modules/copyright.css +11 -11
- package/dist-versioned/modules/display.css +9 -9
- package/dist-versioned/modules/flag.css +6 -6
- package/dist-versioned/modules/footnotes.css +26 -26
- package/dist-versioned/modules/headline.css +67 -67
- package/dist-versioned/modules/hidden-links.css +7 -7
- package/dist-versioned/modules/interactive.css +43 -39
- package/dist-versioned/modules/leadtext.css +8 -8
- package/dist-versioned/modules/list.css +47 -47
- package/dist-versioned/modules/mark.css +2 -2
- package/dist-versioned/modules/media.css +7 -7
- package/dist-versioned/modules/meta.css +12 -12
- package/dist-versioned/modules/pagination.css +77 -76
- package/dist-versioned/modules/paragraph.css +8 -8
- package/dist-versioned/modules/prose.css +236 -232
- package/dist-versioned/modules/status-badge.css +8 -8
- package/dist-versioned/modules/table-cell.css +23 -23
- package/dist-versioned/modules/table.css +4 -4
- package/dist-versioned/solid-styles.css +433 -428
- package/package.json +1 -1
|
@@ -1,12 +1,12 @@
|
|
|
1
1
|
/**
|
|
2
2
|
* Generates basic styles for chip elements.
|
|
3
|
-
* @name sd-1-
|
|
3
|
+
* @name sd-1-4-1-chip
|
|
4
4
|
* @status stable
|
|
5
5
|
* @since 1.30.0
|
|
6
|
-
* @variant { primary-300 | primary-500 | white } sd-1-
|
|
6
|
+
* @variant { primary-300 | primary-500 | white } sd-1-4-1-chip--...
|
|
7
7
|
*/
|
|
8
8
|
|
|
9
|
-
.sd-1-
|
|
9
|
+
.sd-1-4-1-chip {
|
|
10
10
|
display: inline-flex;
|
|
11
11
|
height: var(--sd-spacing-6, 1.5rem) /* 24px */;
|
|
12
12
|
align-items: center;
|
|
@@ -22,34 +22,34 @@
|
|
|
22
22
|
color: rgb(var(--sd-color-black, 24 24 24) / var(--tw-text-opacity, 1)) /* Default text color */;
|
|
23
23
|
}
|
|
24
24
|
|
|
25
|
-
.sd-1-
|
|
25
|
+
.sd-1-4-1-chip--primary-500 {
|
|
26
26
|
|
|
27
27
|
background-color: rgb(var(--sd-color-primary-500, 70 109 175) / var(--tw-bg-opacity, 1)) /* Used for hover interaction */;
|
|
28
28
|
|
|
29
29
|
color: rgb(var(--sd-color-white, 255 255 255) / var(--tw-text-opacity, 1)) /* Inverted text color */;
|
|
30
30
|
}
|
|
31
31
|
|
|
32
|
-
.sd-1-
|
|
32
|
+
.sd-1-4-1-chip--primary-300 {
|
|
33
33
|
|
|
34
34
|
background-color: rgb(var(--sd-color-primary-300, 200 213 231) / var(--tw-bg-opacity, 1)) /* Used for chip background */;
|
|
35
35
|
}
|
|
36
36
|
|
|
37
|
-
.sd-1-
|
|
37
|
+
.sd-1-4-1-chip--white {
|
|
38
38
|
|
|
39
39
|
background-color: rgb(var(--sd-color-white, 255 255 255) / var(--tw-bg-opacity, 1)) /* Default background color (light mode)
Used for inverted button */;
|
|
40
40
|
}
|
|
41
41
|
|
|
42
42
|
/**
|
|
43
43
|
* Container lets users delimit and highlight a piece of content. The user has no interaction with it, it is merely a visual element that influences the flow of the page.
|
|
44
|
-
* @name sd-1-
|
|
44
|
+
* @name sd-1-4-1-container
|
|
45
45
|
* @status stable
|
|
46
46
|
* @since 1.30.0
|
|
47
|
-
* @variant { primary-100 | primary | border-neutral-400 | white } sd-1-
|
|
48
|
-
* @variant { sm } sd-1-
|
|
49
|
-
* @variant { top | right | bottom | left } sd-1-
|
|
47
|
+
* @variant { primary-100 | primary | border-neutral-400 | white } sd-1-4-1-container--variant-... Defines the background color and border of sd-1-4-1-container.
|
|
48
|
+
* @variant { sm } sd-1-4-1-container--padding-... Defines the padding of sd-1-4-1-container. This makes it adaptable to both small and large screens.
|
|
49
|
+
* @variant { top | right | bottom | left } sd-1-4-1-container--triangle-... Defines an optional triangle cut-out for sd-1-4-1-container. This allows for an indentation resembling an arrow on any side of the container. CSS Property `triangle-background` defines the background color of the cut-out.
|
|
50
50
|
*/
|
|
51
51
|
|
|
52
|
-
.sd-1-
|
|
52
|
+
.sd-1-4-1-container {
|
|
53
53
|
position: relative;
|
|
54
54
|
|
|
55
55
|
background-color: rgb(var(--sd-color-neutral-100, 246 246 246) / var(--tw-bg-opacity, 1)) /* Additional background color (light mode) */;
|
|
@@ -59,18 +59,18 @@
|
|
|
59
59
|
padding-bottom: var(--sd-spacing-8, 2rem) /* 32px */;
|
|
60
60
|
}
|
|
61
61
|
|
|
62
|
-
.sd-1-
|
|
62
|
+
.sd-1-4-1-container--variant-primary-100 {
|
|
63
63
|
|
|
64
64
|
background-color: rgb(var(--sd-color-primary-100, 236 240 249) / var(--tw-bg-opacity, 1)) /* Additional background color (light mode) */;
|
|
65
65
|
}
|
|
66
66
|
|
|
67
|
-
.sd-1-
|
|
67
|
+
.sd-1-4-1-container--variant-primary {
|
|
68
68
|
|
|
69
69
|
background-color: rgb(var(--sd-color-primary, 0 53 142) / var(--tw-bg-opacity, 1)) /* Inverted background color (light mode)
|
|
70
70
|
Used for button */;
|
|
71
71
|
}
|
|
72
72
|
|
|
73
|
-
.sd-1-
|
|
73
|
+
.sd-1-4-1-container--variant-border-neutral-400 {
|
|
74
74
|
border-style: solid;
|
|
75
75
|
--tw-border-opacity: 1;
|
|
76
76
|
border-color: rgb(var(--sd-color-neutral-400, 195 195 195) / var(--tw-border-opacity, 1)) /* Default border color.
|
|
@@ -80,27 +80,27 @@ Used for divider, teaser, container, ... */;
|
|
|
80
80
|
border-width: 1px;
|
|
81
81
|
}
|
|
82
82
|
|
|
83
|
-
.sd-1-
|
|
83
|
+
.sd-1-4-1-container--variant-white {
|
|
84
84
|
|
|
85
85
|
background-color: rgb(var(--sd-color-white, 255 255 255) / var(--tw-bg-opacity, 1)) /* Default background color (light mode)
Used for inverted button */;
|
|
86
86
|
}
|
|
87
87
|
|
|
88
|
-
.sd-1-
|
|
88
|
+
.sd-1-4-1-container--padding-sm {
|
|
89
89
|
padding-left: var(--sd-spacing-6, 1.5rem) /* 24px */;
|
|
90
90
|
padding-right: var(--sd-spacing-6, 1.5rem) /* 24px */;
|
|
91
91
|
padding-top: var(--sd-spacing-4, 1rem) /* 16px */;
|
|
92
92
|
padding-bottom: var(--sd-spacing-4, 1rem) /* 16px */;
|
|
93
93
|
}
|
|
94
94
|
|
|
95
|
-
.sd-1-
|
|
95
|
+
.sd-1-4-1-container {
|
|
96
96
|
|
|
97
97
|
--triangle-background: white;
|
|
98
98
|
}
|
|
99
99
|
|
|
100
|
-
.sd-1-
|
|
101
|
-
.sd-1-
|
|
102
|
-
.sd-1-
|
|
103
|
-
.sd-1-
|
|
100
|
+
.sd-1-4-1-container--triangle-top::before,
|
|
101
|
+
.sd-1-4-1-container--triangle-right::before,
|
|
102
|
+
.sd-1-4-1-container--triangle-bottom::before,
|
|
103
|
+
.sd-1-4-1-container--triangle-left::before {
|
|
104
104
|
position: absolute;
|
|
105
105
|
display: block;
|
|
106
106
|
border-style: solid;
|
|
@@ -109,38 +109,38 @@ Used for divider, teaser, container, ... */;
|
|
|
109
109
|
content: '';
|
|
110
110
|
}
|
|
111
111
|
|
|
112
|
-
.sd-1-
|
|
112
|
+
.sd-1-4-1-container--triangle-top::before {
|
|
113
113
|
top: var(--sd-spacing-0, 0px) /* No spacing (manually added) */;
|
|
114
114
|
left: calc(50% - 14px);
|
|
115
115
|
border-top-color: var(--triangle-background);
|
|
116
116
|
}
|
|
117
117
|
|
|
118
|
-
.sd-1-
|
|
118
|
+
.sd-1-4-1-container--triangle-right::before {
|
|
119
119
|
right: var(--sd-spacing-0, 0px) /* No spacing (manually added) */;
|
|
120
120
|
top: calc(50% - 14px);
|
|
121
121
|
border-right-color: var(--triangle-background);
|
|
122
122
|
}
|
|
123
123
|
|
|
124
|
-
.sd-1-
|
|
124
|
+
.sd-1-4-1-container--triangle-bottom::before {
|
|
125
125
|
bottom: var(--sd-spacing-0, 0px) /* No spacing (manually added) */;
|
|
126
126
|
left: calc(50% - 14px);
|
|
127
127
|
border-bottom-color: var(--triangle-background);
|
|
128
128
|
}
|
|
129
129
|
|
|
130
|
-
.sd-1-
|
|
130
|
+
.sd-1-4-1-container--triangle-left::before {
|
|
131
131
|
left: var(--sd-spacing-0, 0px) /* No spacing (manually added) */;
|
|
132
132
|
top: calc(50% - 14px);
|
|
133
133
|
border-left-color: var(--triangle-background);
|
|
134
134
|
}
|
|
135
135
|
|
|
136
|
-
.sd-1-
|
|
137
|
-
.sd-1-
|
|
138
|
-
.sd-1-
|
|
139
|
-
.sd-1-
|
|
140
|
-
.sd-1-
|
|
141
|
-
.sd-1-
|
|
142
|
-
.sd-1-
|
|
143
|
-
.sd-1-
|
|
136
|
+
.sd-1-4-1-container--triangle-top-border::after,
|
|
137
|
+
.sd-1-4-1-container--triangle-top-border::before,
|
|
138
|
+
.sd-1-4-1-container--triangle-right-border::after,
|
|
139
|
+
.sd-1-4-1-container--triangle-right-border::before,
|
|
140
|
+
.sd-1-4-1-container--triangle-bottom-border::after,
|
|
141
|
+
.sd-1-4-1-container--triangle-bottom-border::before,
|
|
142
|
+
.sd-1-4-1-container--triangle-left-border::after,
|
|
143
|
+
.sd-1-4-1-container--triangle-left-border::before {
|
|
144
144
|
position: absolute;
|
|
145
145
|
display: block;
|
|
146
146
|
border-style: solid;
|
|
@@ -148,94 +148,94 @@ Used for divider, teaser, container, ... */;
|
|
|
148
148
|
content: '';
|
|
149
149
|
}
|
|
150
150
|
|
|
151
|
-
.sd-1-
|
|
151
|
+
.sd-1-4-1-container--triangle-top-border::after, .sd-1-4-1-container--triangle-right-border::after, .sd-1-4-1-container--triangle-bottom-border::after, .sd-1-4-1-container--triangle-left-border::after {
|
|
152
152
|
border-width: 14px;
|
|
153
153
|
}
|
|
154
154
|
|
|
155
|
-
.sd-1-
|
|
155
|
+
.sd-1-4-1-container--triangle-top-border::before, .sd-1-4-1-container--triangle-right-border::before, .sd-1-4-1-container--triangle-bottom-border::before, .sd-1-4-1-container--triangle-left-border::before {
|
|
156
156
|
border-width: 15px;
|
|
157
157
|
}
|
|
158
158
|
|
|
159
|
-
.sd-1-
|
|
160
|
-
.sd-1-
|
|
159
|
+
.sd-1-4-1-container--triangle-top-border::after,
|
|
160
|
+
.sd-1-4-1-container--triangle-top-border::before {
|
|
161
161
|
top: -1px;
|
|
162
162
|
}
|
|
163
163
|
|
|
164
|
-
.sd-1-
|
|
164
|
+
.sd-1-4-1-container--triangle-top-border::before {
|
|
165
165
|
--tw-border-opacity: 1;
|
|
166
166
|
border-top-color: rgb(var(--sd-color-neutral-400, 195 195 195) / var(--tw-border-opacity, 1)) /* Default border color.
|
|
167
167
|
Used for divider, teaser, container, ... */;
|
|
168
168
|
left: calc(50% - 15px);
|
|
169
169
|
}
|
|
170
170
|
|
|
171
|
-
.sd-1-
|
|
171
|
+
.sd-1-4-1-container--triangle-top-border::after {
|
|
172
172
|
left: calc(50% - 14px);
|
|
173
173
|
border-top-color: var(--triangle-background);
|
|
174
174
|
}
|
|
175
175
|
|
|
176
|
-
.sd-1-
|
|
177
|
-
.sd-1-
|
|
176
|
+
.sd-1-4-1-container--triangle-right-border::after,
|
|
177
|
+
.sd-1-4-1-container--triangle-right-border::before {
|
|
178
178
|
right: -1px;
|
|
179
179
|
}
|
|
180
180
|
|
|
181
|
-
.sd-1-
|
|
181
|
+
.sd-1-4-1-container--triangle-right-border::before {
|
|
182
182
|
--tw-border-opacity: 1;
|
|
183
183
|
border-right-color: rgb(var(--sd-color-neutral-400, 195 195 195) / var(--tw-border-opacity, 1)) /* Default border color.
|
|
184
184
|
Used for divider, teaser, container, ... */;
|
|
185
185
|
top: calc(50% - 15px);
|
|
186
186
|
}
|
|
187
187
|
|
|
188
|
-
.sd-1-
|
|
188
|
+
.sd-1-4-1-container--triangle-right-border::after {
|
|
189
189
|
top: calc(50% - 14px);
|
|
190
190
|
border-right-color: var(--triangle-background);
|
|
191
191
|
}
|
|
192
192
|
|
|
193
|
-
.sd-1-
|
|
194
|
-
.sd-1-
|
|
193
|
+
.sd-1-4-1-container--triangle-bottom-border::after,
|
|
194
|
+
.sd-1-4-1-container--triangle-bottom-border::before {
|
|
195
195
|
bottom: -1px;
|
|
196
196
|
}
|
|
197
197
|
|
|
198
|
-
.sd-1-
|
|
198
|
+
.sd-1-4-1-container--triangle-bottom-border::before {
|
|
199
199
|
--tw-border-opacity: 1;
|
|
200
200
|
border-bottom-color: rgb(var(--sd-color-neutral-400, 195 195 195) / var(--tw-border-opacity, 1)) /* Default border color.
|
|
201
201
|
Used for divider, teaser, container, ... */;
|
|
202
202
|
left: calc(50% - 15px);
|
|
203
203
|
}
|
|
204
204
|
|
|
205
|
-
.sd-1-
|
|
205
|
+
.sd-1-4-1-container--triangle-bottom-border::after {
|
|
206
206
|
left: calc(50% - 14px);
|
|
207
207
|
border-bottom-color: var(--triangle-background);
|
|
208
208
|
}
|
|
209
209
|
|
|
210
|
-
.sd-1-
|
|
211
|
-
.sd-1-
|
|
210
|
+
.sd-1-4-1-container--triangle-left-border::after,
|
|
211
|
+
.sd-1-4-1-container--triangle-left-border::before {
|
|
212
212
|
left: -1px;
|
|
213
213
|
}
|
|
214
214
|
|
|
215
|
-
.sd-1-
|
|
215
|
+
.sd-1-4-1-container--triangle-left-border::before {
|
|
216
216
|
--tw-border-opacity: 1;
|
|
217
217
|
border-left-color: rgb(var(--sd-color-neutral-400, 195 195 195) / var(--tw-border-opacity, 1)) /* Default border color.
|
|
218
218
|
Used for divider, teaser, container, ... */;
|
|
219
219
|
top: calc(50% - 15px);
|
|
220
220
|
}
|
|
221
221
|
|
|
222
|
-
.sd-1-
|
|
222
|
+
.sd-1-4-1-container--triangle-left-border::after {
|
|
223
223
|
top: calc(50% - 14px);
|
|
224
224
|
border-left-color: var(--triangle-background);
|
|
225
225
|
}
|
|
226
226
|
|
|
227
227
|
/**
|
|
228
228
|
* Generates basic styles for copyright elements.
|
|
229
|
-
* @name sd-1-
|
|
229
|
+
* @name sd-1-4-1-copyright
|
|
230
230
|
* @status stable
|
|
231
231
|
* @since 2.5.0
|
|
232
|
-
* @variant { vertical } sd-1-
|
|
233
|
-
* @variant { black } sd-1-
|
|
234
|
-
* @boolean sd-1-
|
|
235
|
-
* @variant { top } sd-1-
|
|
232
|
+
* @variant { vertical } sd-1-4-1-copyright--orientation-... The copyright's orientation.
|
|
233
|
+
* @variant { black } sd-1-4-1-copyright--color-... The copyright's text color.
|
|
234
|
+
* @boolean sd-1-4-1-copyright--... Removes the shadow.
|
|
235
|
+
* @variant { top } sd-1-4-1-copyright--placement-... The copyright's placement.
|
|
236
236
|
*/
|
|
237
237
|
|
|
238
|
-
.sd-1-
|
|
238
|
+
.sd-1-4-1-copyright {
|
|
239
239
|
position: relative;
|
|
240
240
|
/* Bug fix for drop-shadow-sm */
|
|
241
241
|
--tw-blur: ;
|
|
@@ -248,7 +248,7 @@ Used for divider, teaser, container, ... */;
|
|
|
248
248
|
--tw-sepia: ;
|
|
249
249
|
}
|
|
250
250
|
|
|
251
|
-
.sd-1-
|
|
251
|
+
.sd-1-4-1-copyright::after {
|
|
252
252
|
position: absolute;
|
|
253
253
|
bottom: var(--sd-spacing-0, 0px) /* No spacing (manually added) */;
|
|
254
254
|
left: var(--sd-spacing-0, 0px) /* No spacing (manually added) */;
|
|
@@ -264,7 +264,7 @@ Used for divider, teaser, container, ... */;
|
|
|
264
264
|
content: var(--copyright);
|
|
265
265
|
}
|
|
266
266
|
|
|
267
|
-
.sd-1-
|
|
267
|
+
.sd-1-4-1-copyright--orientation-vertical::after {
|
|
268
268
|
width: -moz-max-content;
|
|
269
269
|
width: max-content;
|
|
270
270
|
padding-top: var(--sd-spacing-2, 0.5rem) /* 8px */;
|
|
@@ -276,17 +276,17 @@ Used for divider, teaser, container, ... */;
|
|
|
276
276
|
transform: rotate(180deg);
|
|
277
277
|
}
|
|
278
278
|
|
|
279
|
-
.sd-1-
|
|
279
|
+
.sd-1-4-1-copyright--color-black::after {
|
|
280
280
|
|
|
281
281
|
color: rgb(var(--sd-color-black, 24 24 24) / var(--tw-text-opacity, 1)) /* Default text color */;
|
|
282
282
|
filter: drop-shadow(0 0 transparent);
|
|
283
283
|
}
|
|
284
284
|
|
|
285
|
-
.sd-1-
|
|
285
|
+
.sd-1-4-1-copyright--no-shadow::after {
|
|
286
286
|
filter: drop-shadow(0 0 transparent);
|
|
287
287
|
}
|
|
288
288
|
|
|
289
|
-
.sd-1-
|
|
289
|
+
.sd-1-4-1-copyright--placement-top::after {
|
|
290
290
|
position: absolute;
|
|
291
291
|
top: var(--sd-spacing-0, 0px) /* No spacing (manually added) */;
|
|
292
292
|
right: var(--sd-spacing-0, 0px) /* No spacing (manually added) */;
|
|
@@ -299,13 +299,13 @@ Used for divider, teaser, container, ... */;
|
|
|
299
299
|
|
|
300
300
|
/**
|
|
301
301
|
* Generates basic styles for flag elements.
|
|
302
|
-
* @name sd-1-
|
|
302
|
+
* @name sd-1-4-1-flag
|
|
303
303
|
* @status stable
|
|
304
304
|
* @since 1.34.0
|
|
305
|
-
* @variant { neutral-300 | neutral-500 | white } sd-1-
|
|
305
|
+
* @variant { neutral-300 | neutral-500 | white } sd-1-4-1-flag--...
|
|
306
306
|
*/
|
|
307
307
|
|
|
308
|
-
.sd-1-
|
|
308
|
+
.sd-1-4-1-flag {
|
|
309
309
|
display: inline-flex;
|
|
310
310
|
height: var(--sd-spacing-8, 2rem) /* 32px */;
|
|
311
311
|
align-items: center;
|
|
@@ -320,32 +320,32 @@ Used for divider, teaser, container, ... */;
|
|
|
320
320
|
color: rgb(var(--sd-color-black, 24 24 24) / var(--tw-text-opacity, 1)) /* Default text color */;
|
|
321
321
|
}
|
|
322
322
|
|
|
323
|
-
.sd-1-
|
|
323
|
+
.sd-1-4-1-flag--neutral-500 {
|
|
324
324
|
|
|
325
325
|
background-color: rgb(var(--sd-color-neutral-500, 174 174 174) / var(--tw-bg-opacity, 1)) /* Used for disabled state */;
|
|
326
326
|
|
|
327
327
|
color: rgb(var(--sd-color-black, 24 24 24) / var(--tw-text-opacity, 1)) /* Default text color */;
|
|
328
328
|
}
|
|
329
329
|
|
|
330
|
-
.sd-1-
|
|
330
|
+
.sd-1-4-1-flag--neutral-300 {
|
|
331
331
|
|
|
332
332
|
background-color: rgb(var(--sd-color-neutral-300, 218 218 218) / var(--tw-bg-opacity, 1)) /* Used for flag */;
|
|
333
333
|
}
|
|
334
334
|
|
|
335
|
-
.sd-1-
|
|
335
|
+
.sd-1-4-1-flag--white {
|
|
336
336
|
|
|
337
337
|
background-color: rgb(var(--sd-color-white, 255 255 255) / var(--tw-bg-opacity, 1)) /* Default background color (light mode)
Used for inverted button */;
|
|
338
338
|
}
|
|
339
339
|
|
|
340
340
|
/**
|
|
341
341
|
* A footnote contains additional information/sources related to the content and usually appears at the bottom of a page or below the content it refers to.
|
|
342
|
-
* @name sd-1-
|
|
342
|
+
* @name sd-1-4-1-footnotes
|
|
343
343
|
* @status stable
|
|
344
344
|
* @since 3.0.0
|
|
345
|
-
* @boolean sd-1-
|
|
345
|
+
* @boolean sd-1-4-1-footnotes--inverted Inverts the footnote text.
|
|
346
346
|
*/
|
|
347
347
|
|
|
348
|
-
.sd-1-
|
|
348
|
+
.sd-1-4-1-footnotes {
|
|
349
349
|
margin-top: var(--sd-spacing-0, 0px) /* No spacing (manually added) */;
|
|
350
350
|
margin-bottom: var(--sd-spacing-0, 0px) /* No spacing (manually added) */;
|
|
351
351
|
padding: var(--sd-spacing-0, 0px) /* No spacing (manually added) */;
|
|
@@ -355,22 +355,22 @@ Used for divider, teaser, container, ... */;
|
|
|
355
355
|
color: rgb(var(--sd-color-neutral-700, 104 104 104) / var(--tw-text-opacity, 1)) /* Additional text color */;
|
|
356
356
|
}
|
|
357
357
|
|
|
358
|
-
.sd-1-
|
|
358
|
+
.sd-1-4-1-footnotes :target {
|
|
359
359
|
|
|
360
360
|
background-color: rgb(var(--sd-color-neutral-200, 233 233 233) / var(--tw-bg-opacity, 1)) /* Used for hover interaction */;
|
|
361
361
|
}
|
|
362
362
|
|
|
363
|
-
.sd-1-
|
|
363
|
+
.sd-1-4-1-footnotes:is(ol) {
|
|
364
364
|
padding-inline-start: var(--sd-spacing-8, 2rem) /* 32px */;
|
|
365
365
|
}
|
|
366
366
|
|
|
367
|
-
.sd-1-
|
|
367
|
+
.sd-1-4-1-footnotes:is(ol) li {
|
|
368
368
|
counter-increment: list-item;
|
|
369
369
|
position: relative;
|
|
370
370
|
list-style-type: none;
|
|
371
371
|
}
|
|
372
372
|
|
|
373
|
-
.sd-1-
|
|
373
|
+
.sd-1-4-1-footnotes:is(ol) li .sd-1-4-1-footnotes--marker::before, .sd-1-4-1-footnotes:is(ol) li:has(.sd-1-4-1-footnotes--marker:nth-of-type(2))::before, .sd-1-4-1-footnotes:is(ol) li:not(:has(.sd-1-4-1-footnotes--marker))::before {
|
|
374
374
|
position: absolute;
|
|
375
375
|
left: calc(var(--sd-spacing-8, 2rem) /* 32px */ * -1);
|
|
376
376
|
flex-shrink: 0;
|
|
@@ -381,16 +381,16 @@ Used for divider, teaser, container, ... */;
|
|
|
381
381
|
font-size: 10px;
|
|
382
382
|
}
|
|
383
383
|
|
|
384
|
-
.sd-1-
|
|
384
|
+
.sd-1-4-1-footnotes:is(ol) li .sd-1-4-1-footnotes--marker::after, .sd-1-4-1-footnotes:is(ol) li:has(.sd-1-4-1-footnotes--marker:nth-of-type(2))::after, .sd-1-4-1-footnotes:is(ol) li:not(:has(.sd-1-4-1-footnotes--marker))::after {
|
|
385
385
|
content: none;
|
|
386
386
|
}
|
|
387
387
|
|
|
388
|
-
.sd-1-
|
|
388
|
+
.sd-1-4-1-footnotes:is(ol) li .sd-1-4-1-footnotes--marker .sd-1-4-1-footnotes--marker, .sd-1-4-1-footnotes:is(ol) li:has(.sd-1-4-1-footnotes--marker:nth-of-type(2)) .sd-1-4-1-footnotes--marker, .sd-1-4-1-footnotes:is(ol) li:not(:has(.sd-1-4-1-footnotes--marker)) .sd-1-4-1-footnotes--marker {
|
|
389
389
|
display: inline-block;
|
|
390
390
|
counter-increment: footnotes-multiple;
|
|
391
391
|
}
|
|
392
392
|
|
|
393
|
-
.sd-1-
|
|
393
|
+
.sd-1-4-1-footnotes:is(ol) li .sd-1-4-1-footnotes--marker .sd-1-4-1-footnotes--marker::before, .sd-1-4-1-footnotes:is(ol) li:has(.sd-1-4-1-footnotes--marker:nth-of-type(2)) .sd-1-4-1-footnotes--marker::before, .sd-1-4-1-footnotes:is(ol) li:not(:has(.sd-1-4-1-footnotes--marker)) .sd-1-4-1-footnotes--marker::before {
|
|
394
394
|
position: relative;
|
|
395
395
|
left: var(--sd-spacing-0, 0px) /* No spacing (manually added) */;
|
|
396
396
|
vertical-align: super;
|
|
@@ -399,16 +399,16 @@ Used for divider, teaser, container, ... */;
|
|
|
399
399
|
content: counter(footnotes-multiple, lower-alpha);
|
|
400
400
|
}
|
|
401
401
|
|
|
402
|
-
.sd-1-
|
|
402
|
+
.sd-1-4-1-footnotes:is(ol) li .sd-1-4-1-footnotes--marker {
|
|
403
403
|
bottom: var(--sd-spacing-0, 0px) /* No spacing (manually added) */;
|
|
404
404
|
display: block;
|
|
405
405
|
}
|
|
406
406
|
|
|
407
|
-
.sd-1-
|
|
407
|
+
.sd-1-4-1-footnotes:is(ol) li .sd-1-4-1-footnotes--marker:focus-visible {
|
|
408
408
|
outline-width: 0px;
|
|
409
409
|
}
|
|
410
410
|
|
|
411
|
-
.sd-1-
|
|
411
|
+
.sd-1-4-1-footnotes:is(ol) li .sd-1-4-1-footnotes--marker:focus-visible::before {
|
|
412
412
|
border-radius: var(--sd-border-radius-default, 0.25rem) /* 4px Default radius for buttons */;
|
|
413
413
|
outline-style: solid;
|
|
414
414
|
outline-width: 2px;
|
|
@@ -416,39 +416,39 @@ Used for divider, teaser, container, ... */;
|
|
|
416
416
|
outline-color: rgb(var(--sd-color-primary, 0 53 142) / 1) /* Used for buttons, select field, focus state */;
|
|
417
417
|
}
|
|
418
418
|
|
|
419
|
-
.sd-1-
|
|
419
|
+
.sd-1-4-1-footnotes:is(ul) {
|
|
420
420
|
list-style: '';
|
|
421
421
|
}
|
|
422
422
|
|
|
423
|
-
.sd-1-
|
|
423
|
+
.sd-1-4-1-footnotes--inverted {
|
|
424
424
|
|
|
425
425
|
color: rgb(var(--sd-color-primary-400, 153 171 208) / var(--tw-text-opacity, 1)) /* Additional text inverted color
|
|
426
426
|
Used for inverted pressed interaction text link */;
|
|
427
427
|
}
|
|
428
428
|
|
|
429
|
-
.sd-1-
|
|
429
|
+
.sd-1-4-1-footnotes--inverted :target {
|
|
430
430
|
|
|
431
431
|
background-color: rgb(var(--sd-color-primary-800, 5 21 48) / var(--tw-bg-opacity, 1)) /* Used for pressed interaction */;
|
|
432
432
|
}
|
|
433
433
|
|
|
434
|
-
.sd-1-
|
|
434
|
+
.sd-1-4-1-footnotes--inverted .sd-1-4-1-footnotes--marker::before {
|
|
435
435
|
|
|
436
436
|
color: rgb(var(--sd-color-white, 255 255 255) / var(--tw-text-opacity, 1)) /* Inverted text color */;
|
|
437
437
|
outline-color: rgb(var(--sd-color-white, 255 255 255) / 1) /* Used for buttons, inverted focus state */ !important;
|
|
438
438
|
}
|
|
439
439
|
|
|
440
|
-
.sd-1-
|
|
440
|
+
.sd-1-4-1-footnotes--inverted:is(.sd-1-4-1-footnotes--marker) {
|
|
441
441
|
--tw-text-opacity: 1 !important;
|
|
442
442
|
color: rgb(var(--sd-color-white, 255 255 255) / var(--tw-text-opacity, 1)) /* Inverted text color */ !important;
|
|
443
443
|
outline-color: rgb(var(--sd-color-white, 255 255 255) / 1) /* Used for buttons, inverted focus state */ !important;
|
|
444
444
|
}
|
|
445
445
|
|
|
446
|
-
.sd-1-
|
|
446
|
+
.sd-1-4-1-footnotes--inverted:is(.sd-1-4-1-footnotes--marker):target {
|
|
447
447
|
|
|
448
448
|
background-color: rgb(var(--sd-color-primary-800, 5 21 48) / var(--tw-bg-opacity, 1)) /* Used for pressed interaction */;
|
|
449
449
|
}
|
|
450
450
|
|
|
451
|
-
.sd-1-
|
|
451
|
+
.sd-1-4-1-footnotes--marker {
|
|
452
452
|
position: relative;
|
|
453
453
|
bottom: var(--sd-spacing-2, 0.5rem) /* 8px */;
|
|
454
454
|
display: inline-block;
|
|
@@ -458,28 +458,28 @@ Used for inverted pressed interaction text link */;
|
|
|
458
458
|
font-size: x-small;
|
|
459
459
|
}
|
|
460
460
|
|
|
461
|
-
.sd-1-
|
|
461
|
+
.sd-1-4-1-footnotes--marker:target {
|
|
462
462
|
|
|
463
463
|
background-color: rgb(var(--sd-color-neutral-200, 233 233 233) / var(--tw-bg-opacity, 1)) /* Used for hover interaction */;
|
|
464
464
|
}
|
|
465
465
|
|
|
466
|
-
.sd-1-
|
|
466
|
+
.sd-1-4-1-footnotes--marker::before {
|
|
467
467
|
content: '[ ';
|
|
468
468
|
display: inline-block;
|
|
469
469
|
}
|
|
470
470
|
|
|
471
|
-
.sd-1-
|
|
471
|
+
.sd-1-4-1-footnotes--marker::after {
|
|
472
472
|
content: ' ]';
|
|
473
473
|
display: inline-block;
|
|
474
474
|
}
|
|
475
475
|
|
|
476
|
-
.sd-1-
|
|
477
|
-
.sd-1-
|
|
476
|
+
.sd-1-4-1-footnotes--marker:link,
|
|
477
|
+
.sd-1-4-1-footnotes--marker:visited {
|
|
478
478
|
|
|
479
479
|
color: rgb(var(--sd-color-primary, 0 53 142) / var(--tw-text-opacity, 1)) /* Primary brand color for text */;
|
|
480
480
|
}
|
|
481
481
|
|
|
482
|
-
.sd-1-
|
|
482
|
+
.sd-1-4-1-footnotes--marker:focus-visible {
|
|
483
483
|
border-radius: var(--sd-border-radius-default, 0.25rem) /* 4px Default radius for buttons */;
|
|
484
484
|
outline-style: solid;
|
|
485
485
|
outline-width: 2px;
|
|
@@ -489,11 +489,11 @@ Used for inverted pressed interaction text link */;
|
|
|
489
489
|
|
|
490
490
|
/**
|
|
491
491
|
* Hidden links can be used to show links only for keyboard users.
|
|
492
|
-
* @name sd-1-
|
|
492
|
+
* @name sd-1-4-1-hidden-links
|
|
493
493
|
* @status stable
|
|
494
494
|
* @since 3.15.0
|
|
495
|
-
* @boolean sd-1-
|
|
496
|
-
* @boolean sd-1-
|
|
495
|
+
* @boolean sd-1-4-1-hidden-links--multiple Adapts styling for multiple skip links.
|
|
496
|
+
* @boolean sd-1-4-1-hidden-links--debug Always show the links for debugging purposes.
|
|
497
497
|
*/
|
|
498
498
|
|
|
499
499
|
:lang(en) {
|
|
@@ -504,7 +504,7 @@ Used for inverted pressed interaction text link */;
|
|
|
504
504
|
--sd-hidden-links-title: 'Springe zu';
|
|
505
505
|
}
|
|
506
506
|
|
|
507
|
-
.sd-1-
|
|
507
|
+
.sd-1-4-1-hidden-links:not(:focus-within):not(.sd-1-4-1-hidden-links--debug) {
|
|
508
508
|
position: absolute;
|
|
509
509
|
width: 1px;
|
|
510
510
|
height: 1px;
|
|
@@ -516,13 +516,13 @@ Used for inverted pressed interaction text link */;
|
|
|
516
516
|
border-width: 0;
|
|
517
517
|
}
|
|
518
518
|
|
|
519
|
-
.sd-1-
|
|
519
|
+
.sd-1-4-1-hidden-links {
|
|
520
520
|
position: absolute;
|
|
521
521
|
top: var(--sd-spacing-6, 1.5rem) /* 24px */;
|
|
522
522
|
left: var(--sd-spacing-6, 1.5rem) /* 24px */;
|
|
523
523
|
}
|
|
524
524
|
|
|
525
|
-
.sd-1-
|
|
525
|
+
.sd-1-4-1-hidden-links--multiple {
|
|
526
526
|
display: flex;
|
|
527
527
|
flex-direction: column;
|
|
528
528
|
|
|
@@ -536,7 +536,7 @@ Used for inverted pressed interaction text link */;
|
|
|
536
536
|
box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow);
|
|
537
537
|
}
|
|
538
538
|
|
|
539
|
-
.sd-1-
|
|
539
|
+
.sd-1-4-1-hidden-links--multiple:before {
|
|
540
540
|
padding-left: var(--sd-spacing-4, 1rem) /* 16px */;
|
|
541
541
|
padding-right: var(--sd-spacing-4, 1rem) /* 16px */;
|
|
542
542
|
padding-top: var(--sd-spacing-2, 0.5rem) /* 8px */;
|
|
@@ -547,12 +547,12 @@ Used for inverted pressed interaction text link */;
|
|
|
547
547
|
|
|
548
548
|
/**
|
|
549
549
|
* The green accent color can be used to highlight parts of the text.
|
|
550
|
-
* @name sd-1-
|
|
550
|
+
* @name sd-1-4-1-mark
|
|
551
551
|
* @status stable
|
|
552
552
|
* @since 1.7
|
|
553
553
|
*/
|
|
554
554
|
|
|
555
|
-
mark.sd-1-
|
|
555
|
+
mark.sd-1-4-1-mark {
|
|
556
556
|
background-color: transparent;
|
|
557
557
|
|
|
558
558
|
color: rgb(var(--sd-color-accent, 45 157 0) / var(--tw-text-opacity, 1)) /* Used for inverted hover interaction button label */;
|
|
@@ -560,16 +560,16 @@ mark.sd-1-3-2-mark {
|
|
|
560
560
|
|
|
561
561
|
/**
|
|
562
562
|
* Meta information like file size, date, or whatever is needed.
|
|
563
|
-
* @name sd-1-
|
|
563
|
+
* @name sd-1-4-1-meta
|
|
564
564
|
* @status stable
|
|
565
565
|
* @since 1.7
|
|
566
|
-
* @variant { sm } sd-1-
|
|
567
|
-
* @boolean sd-1-
|
|
568
|
-
* @boolean sd-1-
|
|
569
|
-
* @boolean sd-1-
|
|
566
|
+
* @variant { sm } sd-1-4-1-meta--size-... The size. Small can be used as an alternative in tight spaces.
|
|
567
|
+
* @boolean sd-1-4-1-meta--inverted Inverts the meta element.
|
|
568
|
+
* @boolean sd-1-4-1-meta--pipe Adds a pipe right from the meta element.
|
|
569
|
+
* @boolean sd-1-4-1-meta--light Makes sd-1-4-1-meta light.
|
|
570
570
|
*/
|
|
571
571
|
|
|
572
|
-
.sd-1-
|
|
572
|
+
.sd-1-4-1-meta {
|
|
573
573
|
font-size: var(--sd-font-size-base, 1rem) /* 16px */;
|
|
574
574
|
font-weight: 400;
|
|
575
575
|
line-height: var(--sd-line-height-none, 100%) /* Used for buttons, input fields etc. */;
|
|
@@ -577,81 +577,82 @@ mark.sd-1-3-2-mark {
|
|
|
577
577
|
color: rgb(var(--sd-color-black, 24 24 24) / var(--tw-text-opacity, 1)) /* Default text color */;
|
|
578
578
|
}
|
|
579
579
|
|
|
580
|
-
.sd-1-
|
|
580
|
+
.sd-1-4-1-meta--size-sm {
|
|
581
581
|
font-size: var(--sd-font-size-sm, 0.875rem) /* 14px */;
|
|
582
582
|
}
|
|
583
583
|
|
|
584
|
-
.sd-1-
|
|
584
|
+
.sd-1-4-1-meta--light {
|
|
585
585
|
|
|
586
586
|
color: rgb(var(--sd-color-neutral-700, 104 104 104) / var(--tw-text-opacity, 1)) /* Additional text color */;
|
|
587
587
|
}
|
|
588
588
|
|
|
589
|
-
.sd-1-
|
|
589
|
+
.sd-1-4-1-meta--inverted {
|
|
590
590
|
|
|
591
591
|
color: rgb(var(--sd-color-white, 255 255 255) / var(--tw-text-opacity, 1)) /* Inverted text color */;
|
|
592
592
|
}
|
|
593
593
|
|
|
594
|
-
.sd-1-
|
|
594
|
+
.sd-1-4-1-meta--inverted.sd-1-4-1-meta--light {
|
|
595
595
|
|
|
596
596
|
color: rgb(var(--sd-color-primary-400, 153 171 208) / var(--tw-text-opacity, 1)) /* Additional text inverted color
|
|
597
597
|
Used for inverted pressed interaction text link */;
|
|
598
598
|
}
|
|
599
599
|
|
|
600
|
-
.sd-1-
|
|
600
|
+
.sd-1-4-1-meta--pipe::after {
|
|
601
601
|
content: '|';
|
|
602
602
|
margin-left: var(--sd-spacing-1, 0.25rem) /* 4px */;
|
|
603
603
|
margin-right: var(--sd-spacing-1, 0.25rem) /* 4px */;
|
|
604
604
|
}
|
|
605
605
|
|
|
606
|
-
.sd-1-
|
|
606
|
+
.sd-1-4-1-meta--pipe.sd-1-4-1-meta--size-sm::after {
|
|
607
607
|
margin-left: var(--sd-spacing-0-5, 0.125rem) /* 2px */;
|
|
608
608
|
margin-right: var(--sd-spacing-0-5, 0.125rem) /* 2px */;
|
|
609
609
|
}
|
|
610
610
|
|
|
611
611
|
/**
|
|
612
612
|
* Used to split large content into several pages, allowing users to navigate between them instead of displaying all information on a single page.
|
|
613
|
-
* @name sd-1-
|
|
613
|
+
* @name sd-1-4-1-pagination
|
|
614
614
|
* @status stable
|
|
615
615
|
* @since 1.3
|
|
616
|
-
* @variant { simple } sd-1-
|
|
617
|
-
* @boolean sd-1-
|
|
616
|
+
* @variant { simple } sd-1-4-1-pagination--... The pagination format.
|
|
617
|
+
* @boolean sd-1-4-1-pagination--inverted Inverts the pagination style.
|
|
618
618
|
*/
|
|
619
619
|
|
|
620
|
-
.sd-1-
|
|
620
|
+
.sd-1-4-1-pagination > :not(ul) {
|
|
621
621
|
position: absolute;
|
|
622
622
|
height: var(--sd-spacing-0-25, 1px) /* 1px */;
|
|
623
623
|
width: var(--sd-spacing-0-25, 1px) /* 1px */;
|
|
624
624
|
overflow: hidden;
|
|
625
625
|
}
|
|
626
626
|
|
|
627
|
-
.sd-1-
|
|
627
|
+
.sd-1-4-1-pagination ul {
|
|
628
628
|
display: flex;
|
|
629
629
|
align-items: center;
|
|
630
630
|
gap: var(--sd-spacing-2, 0.5rem) /* 8px */;
|
|
631
631
|
}
|
|
632
632
|
|
|
633
|
-
.sd-1-
|
|
633
|
+
.sd-1-4-1-pagination ul li a {
|
|
634
634
|
display: flex;
|
|
635
635
|
align-items: center;
|
|
636
636
|
justify-content: center;
|
|
637
637
|
|
|
638
638
|
color: rgb(var(--sd-color-primary, 0 53 142) / var(--tw-text-opacity, 1)) /* Primary brand color for text */;
|
|
639
|
+
text-decoration-line: none;
|
|
639
640
|
transition-property: color;
|
|
640
641
|
transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
|
|
641
642
|
transition-duration: 150ms;
|
|
642
643
|
}
|
|
643
644
|
|
|
644
|
-
.sd-1-
|
|
645
|
+
.sd-1-4-1-pagination ul li a:hover:not([disabled]) {
|
|
645
646
|
|
|
646
647
|
color: rgb(var(--sd-color-primary-500, 70 109 175) / var(--tw-text-opacity, 1)) /* Used for hover interaction */;
|
|
647
648
|
}
|
|
648
649
|
|
|
649
|
-
.sd-1-
|
|
650
|
+
.sd-1-4-1-pagination ul li a:active:not([disabled]) {
|
|
650
651
|
|
|
651
652
|
color: rgb(var(--sd-color-primary-800, 5 21 48) / var(--tw-text-opacity, 1)) /* Used for pressed interaction */;
|
|
652
653
|
}
|
|
653
654
|
|
|
654
|
-
.sd-1-
|
|
655
|
+
.sd-1-4-1-pagination ul li a:focus-visible {
|
|
655
656
|
outline-style: solid;
|
|
656
657
|
outline-width: 2px;
|
|
657
658
|
outline-offset: 2px;
|
|
@@ -660,25 +661,21 @@ Used for inverted pressed interaction text link */;
|
|
|
660
661
|
|
|
661
662
|
/* Previous and Next */
|
|
662
663
|
|
|
663
|
-
.sd-1-
|
|
664
|
-
.sd-1-
|
|
664
|
+
.sd-1-4-1-pagination ul li:first-child,
|
|
665
|
+
.sd-1-4-1-pagination ul li:last-child {
|
|
665
666
|
height: var(--sd-spacing-12, 3rem) /* 48px */;
|
|
666
667
|
width: var(--sd-spacing-12, 3rem) /* 48px */;
|
|
668
|
+
font-size: var(--sd-font-size-xl, 1.5rem) /* 24px */;
|
|
667
669
|
}
|
|
668
670
|
|
|
669
|
-
.sd-1-
|
|
671
|
+
.sd-1-4-1-pagination ul li:first-child a, .sd-1-4-1-pagination ul li:last-child a {
|
|
670
672
|
height: 100%;
|
|
671
673
|
width: 100%;
|
|
672
674
|
}
|
|
673
675
|
|
|
674
|
-
.sd-1-3-2-pagination ul li:first-child sd-icon, .sd-1-3-2-pagination ul li:last-child sd-icon {
|
|
675
|
-
height: var(--sd-spacing-6, 1.5rem) /* 24px */;
|
|
676
|
-
width: var(--sd-spacing-6, 1.5rem) /* 24px */;
|
|
677
|
-
}
|
|
678
|
-
|
|
679
676
|
/* Numbers */
|
|
680
677
|
|
|
681
|
-
.sd-1-
|
|
678
|
+
.sd-1-4-1-pagination ul li {
|
|
682
679
|
display: flex;
|
|
683
680
|
height: var(--sd-spacing-8, 2rem) /* 32px */;
|
|
684
681
|
width: var(--sd-spacing-8, 2rem) /* 32px */;
|
|
@@ -687,38 +684,40 @@ Used for inverted pressed interaction text link */;
|
|
|
687
684
|
text-align: center;
|
|
688
685
|
}
|
|
689
686
|
|
|
690
|
-
.sd-1-
|
|
687
|
+
.sd-1-4-1-pagination ul li:not(:first-child):not(:last-child) a {
|
|
691
688
|
height: 100%;
|
|
692
689
|
width: 100%;
|
|
693
690
|
border-bottom-width: 2px;
|
|
694
691
|
border-bottom-color: transparent;
|
|
695
692
|
}
|
|
696
693
|
|
|
697
|
-
.sd-1-
|
|
694
|
+
.sd-1-4-1-pagination ul li:not(:first-child):not(:last-child) a[aria-current] {
|
|
698
695
|
--tw-border-opacity: 1;
|
|
699
696
|
border-bottom-color: rgb(var(--sd-color-accent, 45 157 0) / var(--tw-border-opacity, 1)) /* Used to highlight active/selected elements
|
|
700
697
|
*/;
|
|
701
698
|
}
|
|
702
699
|
|
|
703
|
-
.sd-1-
|
|
700
|
+
.sd-1-4-1-pagination ul li a[aria-current] {
|
|
704
701
|
|
|
705
702
|
color: rgb(var(--sd-color-black, 24 24 24) / var(--tw-text-opacity, 1)) /* Default text color */;
|
|
706
703
|
}
|
|
707
704
|
|
|
708
|
-
.sd-1-
|
|
705
|
+
.sd-1-4-1-pagination ul li a[aria-current]:hover:not([disabled]) {
|
|
709
706
|
|
|
710
707
|
color: rgb(var(--sd-color-black, 24 24 24) / var(--tw-text-opacity, 1)) /* Default text color */;
|
|
711
708
|
}
|
|
712
709
|
|
|
713
710
|
/* Previous and next arrow when it has no href */
|
|
714
711
|
|
|
715
|
-
.sd-1-
|
|
712
|
+
.sd-1-4-1-pagination ul li:first-child:has(a:not([href])) a,
|
|
713
|
+
.sd-1-4-1-pagination ul li:last-child:has(a:not([href])) a {
|
|
716
714
|
cursor: not-allowed;
|
|
717
715
|
|
|
718
716
|
color: rgb(var(--sd-color-neutral-500, 174 174 174) / var(--tw-text-opacity, 1)) /* Used for disabled state */;
|
|
719
717
|
}
|
|
720
718
|
|
|
721
|
-
.sd-1-
|
|
719
|
+
.sd-1-4-1-pagination ul li:first-child:has(a:not([href])) a:hover:not([disabled]),
|
|
720
|
+
.sd-1-4-1-pagination ul li:last-child:has(a:not([href])) a:hover:not([disabled]) {
|
|
722
721
|
|
|
723
722
|
color: rgb(var(--sd-color-neutral-500, 174 174 174) / var(--tw-text-opacity, 1)) /* Used for disabled state */;
|
|
724
723
|
}
|
|
@@ -727,46 +726,46 @@ Used for inverted pressed interaction text link */;
|
|
|
727
726
|
|
|
728
727
|
/* Number which is not current */
|
|
729
728
|
|
|
730
|
-
.sd-1-
|
|
729
|
+
.sd-1-4-1-pagination:not(.sd-1-4-1-pagination--simple) ul li:not(:first-child):not(:last-child):not(:has(a[aria-current])) {
|
|
731
730
|
pointer-events: none;
|
|
732
731
|
position: absolute;
|
|
733
732
|
}
|
|
734
733
|
|
|
735
|
-
.sd-1-
|
|
734
|
+
.sd-1-4-1-pagination:not(.sd-1-4-1-pagination--simple) ul li:not(:first-child):not(:last-child):not(:has(a[aria-current])) a {
|
|
736
735
|
display: none;
|
|
737
736
|
}
|
|
738
737
|
|
|
739
738
|
/* Apply ellipsis to (n + 2 && n - 1) */
|
|
740
739
|
|
|
741
|
-
.sd-1-
|
|
742
|
-
.sd-1-
|
|
740
|
+
.sd-1-4-1-pagination:not(.sd-1-4-1-pagination--simple) ul li:not(:first-child):not(:last-child):has(+ li + li a[aria-current]),
|
|
741
|
+
.sd-1-4-1-pagination:not(.sd-1-4-1-pagination--simple) ul li:not(:first-child):not(:last-child):has(a[aria-current]) + li + li:not(:last-child) {
|
|
743
742
|
pointer-events: auto !important;
|
|
744
743
|
position: relative !important;
|
|
745
744
|
}
|
|
746
745
|
|
|
747
|
-
.sd-1-
|
|
748
|
-
.sd-1-
|
|
746
|
+
.sd-1-4-1-pagination:not(.sd-1-4-1-pagination--simple) ul li:not(:first-child):not(:last-child):has(+ li + li a[aria-current])::after,
|
|
747
|
+
.sd-1-4-1-pagination:not(.sd-1-4-1-pagination--simple) ul li:not(:first-child):not(:last-child):has(a[aria-current]) + li + li:not(:last-child)::after {
|
|
749
748
|
--tw-content: '...';
|
|
750
749
|
content: var(--tw-content);
|
|
751
750
|
}
|
|
752
751
|
|
|
753
|
-
.sd-1-
|
|
754
|
-
.sd-1-
|
|
755
|
-
.sd-1-
|
|
756
|
-
.sd-1-
|
|
752
|
+
.sd-1-4-1-pagination:not(.sd-1-4-1-pagination--simple) ul li:not(:first-child):not(:last-child):nth-child(2),
|
|
753
|
+
.sd-1-4-1-pagination:not(.sd-1-4-1-pagination--simple) ul li:not(:first-child):not(:last-child):nth-last-child(2),
|
|
754
|
+
.sd-1-4-1-pagination:not(.sd-1-4-1-pagination--simple) ul li:not(:first-child):not(:last-child):has(+ li a[aria-current]),
|
|
755
|
+
.sd-1-4-1-pagination:not(.sd-1-4-1-pagination--simple) ul li:not(:first-child):not(:last-child):has(a[aria-current]) + li {
|
|
757
756
|
pointer-events: auto !important;
|
|
758
757
|
position: relative !important;
|
|
759
758
|
}
|
|
760
759
|
|
|
761
|
-
.sd-1-
|
|
762
|
-
.sd-1-
|
|
763
|
-
.sd-1-
|
|
764
|
-
.sd-1-
|
|
760
|
+
.sd-1-4-1-pagination:not(.sd-1-4-1-pagination--simple) ul li:not(:first-child):not(:last-child):nth-child(2)::after,
|
|
761
|
+
.sd-1-4-1-pagination:not(.sd-1-4-1-pagination--simple) ul li:not(:first-child):not(:last-child):nth-last-child(2)::after,
|
|
762
|
+
.sd-1-4-1-pagination:not(.sd-1-4-1-pagination--simple) ul li:not(:first-child):not(:last-child):has(+ li a[aria-current])::after,
|
|
763
|
+
.sd-1-4-1-pagination:not(.sd-1-4-1-pagination--simple) ul li:not(:first-child):not(:last-child):has(a[aria-current]) + li::after {
|
|
765
764
|
content: var(--tw-content) !important;
|
|
766
765
|
display: none !important;
|
|
767
766
|
}
|
|
768
767
|
|
|
769
|
-
.sd-1-
|
|
768
|
+
.sd-1-4-1-pagination:not(.sd-1-4-1-pagination--simple) ul li:not(:first-child):not(:last-child):nth-child(2) a, .sd-1-4-1-pagination:not(.sd-1-4-1-pagination--simple) ul li:not(:first-child):not(:last-child):nth-last-child(2) a, .sd-1-4-1-pagination:not(.sd-1-4-1-pagination--simple) ul li:not(:first-child):not(:last-child):has(+ li a[aria-current]) a, .sd-1-4-1-pagination:not(.sd-1-4-1-pagination--simple) ul li:not(:first-child):not(:last-child):has(a[aria-current]) + li a {
|
|
770
769
|
display: flex !important;
|
|
771
770
|
}
|
|
772
771
|
|
|
@@ -774,109 +773,109 @@ Used for inverted pressed interaction text link */;
|
|
|
774
773
|
|
|
775
774
|
/* Show until the 5th page (forward) */
|
|
776
775
|
|
|
777
|
-
.sd-1-
|
|
776
|
+
.sd-1-4-1-pagination:not(.sd-1-4-1-pagination--simple) ul li:not(:first-child):not(:last-child):nth-child(-n + 6):has(a[aria-current]) ~ :nth-child(-n + 6) {
|
|
778
777
|
pointer-events: auto;
|
|
779
778
|
position: relative;
|
|
780
779
|
}
|
|
781
780
|
|
|
782
|
-
.sd-1-
|
|
781
|
+
.sd-1-4-1-pagination:not(.sd-1-4-1-pagination--simple) ul li:not(:first-child):not(:last-child):nth-child(-n + 6):has(a[aria-current]) ~ :nth-child(-n + 6)::after {
|
|
783
782
|
content: var(--tw-content);
|
|
784
783
|
display: none;
|
|
785
784
|
}
|
|
786
785
|
|
|
787
|
-
.sd-1-
|
|
786
|
+
.sd-1-4-1-pagination:not(.sd-1-4-1-pagination--simple) ul li:not(:first-child):not(:last-child):nth-child(-n + 6):has(a[aria-current]) ~ :nth-child(-n + 6) a {
|
|
788
787
|
display: flex;
|
|
789
788
|
}
|
|
790
789
|
|
|
791
790
|
/* Show ellipsis on the 6th */
|
|
792
791
|
|
|
793
|
-
.sd-1-
|
|
792
|
+
.sd-1-4-1-pagination:not(.sd-1-4-1-pagination--simple) ul li:not(:first-child):not(:last-child):nth-child(-n + 6):has(a[aria-current]) ~ :nth-child(6):not(:last-child) + li {
|
|
794
793
|
pointer-events: none;
|
|
795
794
|
position: relative;
|
|
796
795
|
}
|
|
797
796
|
|
|
798
|
-
.sd-1-
|
|
797
|
+
.sd-1-4-1-pagination:not(.sd-1-4-1-pagination--simple) ul li:not(:first-child):not(:last-child):nth-child(-n + 6):has(a[aria-current]) ~ :nth-child(6):not(:last-child) + li::after {
|
|
799
798
|
--tw-content: '...';
|
|
800
799
|
content: var(--tw-content);
|
|
801
800
|
}
|
|
802
801
|
|
|
803
802
|
/* When one of the first 4 pages is selected, show until the 5th page (backward) */
|
|
804
803
|
|
|
805
|
-
.sd-1-
|
|
804
|
+
.sd-1-4-1-pagination:not(.sd-1-4-1-pagination--simple) ul li:not(:first-child):not(:last-child):nth-child(-n + 6):has(~ :nth-child(-n + 5) a[aria-current]) {
|
|
806
805
|
pointer-events: auto;
|
|
807
806
|
position: relative;
|
|
808
807
|
}
|
|
809
808
|
|
|
810
|
-
.sd-1-
|
|
809
|
+
.sd-1-4-1-pagination:not(.sd-1-4-1-pagination--simple) ul li:not(:first-child):not(:last-child):nth-child(-n + 6):has(~ :nth-child(-n + 5) a[aria-current])::after {
|
|
811
810
|
content: var(--tw-content);
|
|
812
811
|
display: none;
|
|
813
812
|
}
|
|
814
813
|
|
|
815
|
-
.sd-1-
|
|
814
|
+
.sd-1-4-1-pagination:not(.sd-1-4-1-pagination--simple) ul li:not(:first-child):not(:last-child):nth-child(-n + 6):has(~ :nth-child(-n + 5) a[aria-current]) a {
|
|
816
815
|
display: flex;
|
|
817
816
|
}
|
|
818
817
|
|
|
819
818
|
/* When one of the last 4 pages is selected, show the last 4 pages (forward) */
|
|
820
819
|
|
|
821
|
-
.sd-1-
|
|
820
|
+
.sd-1-4-1-pagination:not(.sd-1-4-1-pagination--simple) ul li:not(:first-child):not(:last-child):nth-last-child(-n + 5):has(a[aria-current]) ~ :nth-last-child(-n + 5):not(:first-child):not(:last-child) {
|
|
822
821
|
pointer-events: auto;
|
|
823
822
|
position: relative;
|
|
824
823
|
}
|
|
825
824
|
|
|
826
|
-
.sd-1-
|
|
825
|
+
.sd-1-4-1-pagination:not(.sd-1-4-1-pagination--simple) ul li:not(:first-child):not(:last-child):nth-last-child(-n + 5):has(a[aria-current]) ~ :nth-last-child(-n + 5):not(:first-child):not(:last-child)::after {
|
|
827
826
|
content: var(--tw-content);
|
|
828
827
|
display: none;
|
|
829
828
|
}
|
|
830
829
|
|
|
831
|
-
.sd-1-
|
|
830
|
+
.sd-1-4-1-pagination:not(.sd-1-4-1-pagination--simple) ul li:not(:first-child):not(:last-child):nth-last-child(-n + 5):has(a[aria-current]) ~ :nth-last-child(-n + 5):not(:first-child):not(:last-child) a {
|
|
832
831
|
display: flex;
|
|
833
832
|
}
|
|
834
833
|
|
|
835
834
|
/* When one of the last 4 pages is selected, show the last 4 pages (backward) */
|
|
836
835
|
|
|
837
|
-
.sd-1-
|
|
836
|
+
.sd-1-4-1-pagination:not(.sd-1-4-1-pagination--simple) ul li:not(:first-child):not(:last-child):nth-last-child(-n + 6):has(~ :nth-last-child(-n + 5) a[aria-current]) {
|
|
838
837
|
pointer-events: auto;
|
|
839
838
|
position: relative;
|
|
840
839
|
}
|
|
841
840
|
|
|
842
|
-
.sd-1-
|
|
841
|
+
.sd-1-4-1-pagination:not(.sd-1-4-1-pagination--simple) ul li:not(:first-child):not(:last-child):nth-last-child(-n + 6):has(~ :nth-last-child(-n + 5) a[aria-current])::after {
|
|
843
842
|
content: var(--tw-content);
|
|
844
843
|
display: none;
|
|
845
844
|
}
|
|
846
845
|
|
|
847
|
-
.sd-1-
|
|
846
|
+
.sd-1-4-1-pagination:not(.sd-1-4-1-pagination--simple) ul li:not(:first-child):not(:last-child):nth-last-child(-n + 6):has(~ :nth-last-child(-n + 5) a[aria-current]) a {
|
|
848
847
|
display: flex;
|
|
849
848
|
}
|
|
850
849
|
|
|
851
850
|
/* Show ellipsis on the 6th to last */
|
|
852
851
|
|
|
853
|
-
.sd-1-
|
|
852
|
+
.sd-1-4-1-pagination:not(.sd-1-4-1-pagination--simple) ul li:not(:first-child):not(:last-child):nth-last-child(7):has(~ :nth-last-child(-n + 5) a[aria-current]) {
|
|
854
853
|
pointer-events: none;
|
|
855
854
|
position: relative;
|
|
856
855
|
}
|
|
857
856
|
|
|
858
|
-
.sd-1-
|
|
857
|
+
.sd-1-4-1-pagination:not(.sd-1-4-1-pagination--simple) ul li:not(:first-child):not(:last-child):nth-last-child(7):has(~ :nth-last-child(-n + 5) a[aria-current])::after {
|
|
859
858
|
--tw-content: '...';
|
|
860
859
|
content: var(--tw-content);
|
|
861
860
|
}
|
|
862
861
|
|
|
863
862
|
/* When it only has 5 numbers + 2 prev & next buttons */
|
|
864
863
|
|
|
865
|
-
.sd-1-
|
|
864
|
+
.sd-1-4-1-pagination:not(.sd-1-4-1-pagination--simple) ul:has(> li:last-child:nth-child(-n + 9)) li {
|
|
866
865
|
pointer-events: auto;
|
|
867
866
|
position: relative;
|
|
868
867
|
}
|
|
869
868
|
|
|
870
|
-
.sd-1-
|
|
869
|
+
.sd-1-4-1-pagination:not(.sd-1-4-1-pagination--simple) ul:has(> li:last-child:nth-child(-n + 9)) li::after {
|
|
871
870
|
content: var(--tw-content);
|
|
872
871
|
display: none;
|
|
873
872
|
}
|
|
874
873
|
|
|
875
|
-
.sd-1-
|
|
874
|
+
.sd-1-4-1-pagination:not(.sd-1-4-1-pagination--simple) ul:has(> li:last-child:nth-child(-n + 9)) li a {
|
|
876
875
|
display: flex;
|
|
877
876
|
}
|
|
878
877
|
|
|
879
|
-
.sd-1-
|
|
878
|
+
.sd-1-4-1-pagination--simple ul li:nth-child(2) {
|
|
880
879
|
position: relative;
|
|
881
880
|
margin-inline-end: var(--sd-spacing-5, 1.25rem) /* 20px */;
|
|
882
881
|
width: var(--sd-spacing-8, 2rem) /* 32px */;
|
|
@@ -886,7 +885,7 @@ Used for inverted pressed interaction text link */;
|
|
|
886
885
|
*/;
|
|
887
886
|
}
|
|
888
887
|
|
|
889
|
-
.sd-1-
|
|
888
|
+
.sd-1-4-1-pagination--simple ul li:nth-child(2)::after {
|
|
890
889
|
position: absolute;
|
|
891
890
|
right: -18px;
|
|
892
891
|
--tw-scale-y: 1.5;
|
|
@@ -895,56 +894,58 @@ Used for inverted pressed interaction text link */;
|
|
|
895
894
|
content: var(--tw-content);
|
|
896
895
|
}
|
|
897
896
|
|
|
898
|
-
.sd-1-
|
|
897
|
+
.sd-1-4-1-pagination--simple ul li:nth-last-child(2) {
|
|
899
898
|
border-bottom-width: 2px;
|
|
900
899
|
border-bottom-color: transparent;
|
|
901
900
|
}
|
|
902
901
|
|
|
903
|
-
.sd-1-
|
|
902
|
+
.sd-1-4-1-pagination--inverted ul li::after {
|
|
904
903
|
content: var(--tw-content);
|
|
905
904
|
|
|
906
905
|
color: rgb(var(--sd-color-white, 255 255 255) / var(--tw-text-opacity, 1)) /* Inverted text color */;
|
|
907
906
|
}
|
|
908
907
|
|
|
909
|
-
.sd-1-
|
|
908
|
+
.sd-1-4-1-pagination--inverted ul li:first-child:has(a:not([href])) a,
|
|
909
|
+
.sd-1-4-1-pagination--inverted ul li:last-child:has(a:not([href])) a {
|
|
910
910
|
|
|
911
911
|
color: rgb(var(--sd-color-neutral-600, 136 136 136) / var(--tw-text-opacity, 1)) /* Used for inverted disabled state */;
|
|
912
912
|
}
|
|
913
913
|
|
|
914
|
-
.sd-1-
|
|
914
|
+
.sd-1-4-1-pagination--inverted ul li:first-child:has(a:not([href])) a:hover:not([disabled]),
|
|
915
|
+
.sd-1-4-1-pagination--inverted ul li:last-child:has(a:not([href])) a:hover:not([disabled]) {
|
|
915
916
|
|
|
916
917
|
color: rgb(var(--sd-color-neutral-600, 136 136 136) / var(--tw-text-opacity, 1)) /* Used for inverted disabled state */;
|
|
917
918
|
}
|
|
918
919
|
|
|
919
|
-
.sd-1-
|
|
920
|
-
.sd-1-
|
|
920
|
+
.sd-1-4-1-pagination--inverted ul li a,
|
|
921
|
+
.sd-1-4-1-pagination--inverted ul li a[aria-current] {
|
|
921
922
|
|
|
922
923
|
color: rgb(var(--sd-color-white, 255 255 255) / var(--tw-text-opacity, 1)) /* Inverted text color */;
|
|
923
924
|
}
|
|
924
925
|
|
|
925
|
-
.sd-1-
|
|
926
|
-
.sd-1-
|
|
926
|
+
.sd-1-4-1-pagination--inverted ul li a:hover:not([disabled]),
|
|
927
|
+
.sd-1-4-1-pagination--inverted ul li a[aria-current]:hover:not([disabled]) {
|
|
927
928
|
|
|
928
929
|
color: rgb(var(--sd-color-primary-200, 224 233 243) / var(--tw-text-opacity, 1)) /* Used for inverted hover interaction text link and inverted pressed interaction button label */;
|
|
929
930
|
}
|
|
930
931
|
|
|
931
|
-
.sd-1-
|
|
932
|
-
.sd-1-
|
|
932
|
+
.sd-1-4-1-pagination--inverted ul li a:active:not([disabled]),
|
|
933
|
+
.sd-1-4-1-pagination--inverted ul li a[aria-current]:active:not([disabled]) {
|
|
933
934
|
|
|
934
935
|
color: rgb(var(--sd-color-primary-400, 153 171 208) / var(--tw-text-opacity, 1)) /* Additional text inverted color
|
|
935
936
|
Used for inverted pressed interaction text link */;
|
|
936
937
|
}
|
|
937
938
|
|
|
938
|
-
.sd-1-
|
|
939
|
+
.sd-1-4-1-pagination--inverted ul li a:focus-visible, .sd-1-4-1-pagination--inverted ul li a[aria-current]:focus-visible {
|
|
939
940
|
outline-color: rgb(var(--sd-color-white, 255 255 255) / 1) /* Used for buttons, inverted focus state */;
|
|
940
941
|
}
|
|
941
942
|
|
|
942
|
-
.sd-1-
|
|
943
|
+
.sd-1-4-1-pagination--inverted.sd-1-4-1-pagination--simple ul li {
|
|
943
944
|
|
|
944
945
|
color: rgb(var(--sd-color-white, 255 255 255) / var(--tw-text-opacity, 1)) /* Inverted text color */;
|
|
945
946
|
}
|
|
946
947
|
|
|
947
|
-
.sd-1-
|
|
948
|
+
.sd-1-4-1-pagination--inverted.sd-1-4-1-pagination--simple ul li::after {
|
|
948
949
|
content: var(--tw-content);
|
|
949
950
|
|
|
950
951
|
color: rgb(var(--sd-color-white, 255 255 255) / var(--tw-text-opacity, 1)) /* Inverted text color */;
|
|
@@ -952,18 +953,18 @@ Used for inverted pressed interaction text link */;
|
|
|
952
953
|
|
|
953
954
|
/**
|
|
954
955
|
* Description of the style.
|
|
955
|
-
* @name sd-1-
|
|
956
|
+
* @name sd-1-4-1-status-badge
|
|
956
957
|
* @status stable
|
|
957
958
|
* @since 1.0
|
|
958
|
-
* @variant { sucess | warning | error | info } sd-1-
|
|
959
|
+
* @variant { sucess | warning | error | info } sd-1-4-1-status-badge--...
|
|
959
960
|
*/
|
|
960
961
|
|
|
961
|
-
.sd-1-
|
|
962
|
+
.sd-1-4-1-status-badge {
|
|
962
963
|
display: inline-flex;
|
|
963
964
|
align-items: center;
|
|
964
965
|
}
|
|
965
966
|
|
|
966
|
-
.sd-1-
|
|
967
|
+
.sd-1-4-1-status-badge sd-icon {
|
|
967
968
|
margin-right: var(--sd-spacing-2, 0.5rem) /* 8px */;
|
|
968
969
|
display: flex;
|
|
969
970
|
height: var(--sd-spacing-3, 0.75rem) /* 12px */;
|
|
@@ -974,22 +975,22 @@ Used for inverted pressed interaction text link */;
|
|
|
974
975
|
color: rgb(var(--sd-color-white, 255 255 255) / var(--tw-text-opacity, 1)) /* Inverted text color */ !important;
|
|
975
976
|
}
|
|
976
977
|
|
|
977
|
-
.sd-1-
|
|
978
|
+
.sd-1-4-1-status-badge--success sd-icon {
|
|
978
979
|
|
|
979
980
|
background-color: rgb(var(--sd-color-success, 37 136 14) / var(--tw-bg-opacity, 1)) /* Used for success messages */;
|
|
980
981
|
}
|
|
981
982
|
|
|
982
|
-
.sd-1-
|
|
983
|
+
.sd-1-4-1-status-badge--warning sd-icon {
|
|
983
984
|
|
|
984
985
|
background-color: rgb(var(--sd-color-warning, 187 141 32) / var(--tw-bg-opacity, 1)) /* Used for notifications */;
|
|
985
986
|
}
|
|
986
987
|
|
|
987
|
-
.sd-1-
|
|
988
|
+
.sd-1-4-1-status-badge--error sd-icon {
|
|
988
989
|
|
|
989
990
|
background-color: rgb(var(--sd-color-error, 204 25 55) / var(--tw-bg-opacity, 1)) /* Used for notification, status-badge */;
|
|
990
991
|
}
|
|
991
992
|
|
|
992
|
-
.sd-1-
|
|
993
|
+
.sd-1-4-1-status-badge--info sd-icon {
|
|
993
994
|
|
|
994
995
|
background-color: rgb(var(--sd-color-info, 21 130 213) / var(--tw-bg-opacity, 1)) /* Used for notification, status-badge */;
|
|
995
996
|
}
|
|
@@ -998,23 +999,23 @@ Used for inverted pressed interaction text link */;
|
|
|
998
999
|
|
|
999
1000
|
/**
|
|
1000
1001
|
* Prose
|
|
1001
|
-
* @name sd-1-
|
|
1002
|
+
* @name sd-1-4-1-prose
|
|
1002
1003
|
* @status stable
|
|
1003
1004
|
* @since 3.6.0
|
|
1004
|
-
* @boolean sd-1-
|
|
1005
|
-
* @boolean sd-1-
|
|
1005
|
+
* @boolean sd-1-4-1-prose--inverted Inverts the content, but not tables.
|
|
1006
|
+
* @boolean sd-1-4-1-prose--full-width Overrides the 80ch max-width and makes the prose full width.
|
|
1006
1007
|
*/
|
|
1007
1008
|
|
|
1008
1009
|
/**
|
|
1009
1010
|
* Display provides larger text sizes that are not used as headlines. The different sizes allow for a more versatile styling of text elements. Display text should not be used as substitute for headlines.
|
|
1010
|
-
* @name sd-1-
|
|
1011
|
+
* @name sd-1-4-1-display
|
|
1011
1012
|
* @status stable
|
|
1012
1013
|
* @since 1.7
|
|
1013
|
-
* @variant { xl | 3xl } sd-1-
|
|
1014
|
-
* @boolean sd-1-
|
|
1014
|
+
* @variant { xl | 3xl } sd-1-4-1-display--size-... The display's size.
|
|
1015
|
+
* @boolean sd-1-4-1-display--inverted Inverts the display text.
|
|
1015
1016
|
*/
|
|
1016
1017
|
|
|
1017
|
-
.sd-1-
|
|
1018
|
+
.sd-1-4-1-display {
|
|
1018
1019
|
font-size: var(--sd-font-size-3xl, 2rem) /* 32px */;
|
|
1019
1020
|
font-weight: 400;
|
|
1020
1021
|
line-height: var(--sd-line-height-tight, 120%) /* Used for display and large titles */;
|
|
@@ -1024,12 +1025,12 @@ Used for inverted pressed interaction text link */;
|
|
|
1024
1025
|
|
|
1025
1026
|
@media (min-width: 1024px) {
|
|
1026
1027
|
|
|
1027
|
-
.sd-1-
|
|
1028
|
+
.sd-1-4-1-display {
|
|
1028
1029
|
font-size: var(--sd-font-size-4xl, 2.5rem) /* 40px */;
|
|
1029
1030
|
}
|
|
1030
1031
|
}
|
|
1031
1032
|
|
|
1032
|
-
.sd-1-
|
|
1033
|
+
.sd-1-4-1-display--size-xl {
|
|
1033
1034
|
font-size: var(--sd-font-size-xl, 1.5rem) /* 24px */;
|
|
1034
1035
|
font-weight: 400;
|
|
1035
1036
|
line-height: var(--sd-line-height-tight, 120%) /* Used for display and large titles */;
|
|
@@ -1037,7 +1038,7 @@ Used for inverted pressed interaction text link */;
|
|
|
1037
1038
|
color: rgb(var(--sd-color-black, 24 24 24) / var(--tw-text-opacity, 1)) /* Default text color */;
|
|
1038
1039
|
}
|
|
1039
1040
|
|
|
1040
|
-
.sd-1-
|
|
1041
|
+
.sd-1-4-1-display--size-3xl {
|
|
1041
1042
|
font-size: var(--sd-font-size-2xl, 1.75rem) /* 28px */;
|
|
1042
1043
|
font-weight: 400;
|
|
1043
1044
|
line-height: var(--sd-line-height-tight, 120%) /* Used for display and large titles */;
|
|
@@ -1047,35 +1048,35 @@ Used for inverted pressed interaction text link */;
|
|
|
1047
1048
|
|
|
1048
1049
|
@media (min-width: 1024px) {
|
|
1049
1050
|
|
|
1050
|
-
.sd-1-
|
|
1051
|
+
.sd-1-4-1-display--size-3xl {
|
|
1051
1052
|
font-size: var(--sd-font-size-3xl, 2rem) /* 32px */;
|
|
1052
1053
|
}
|
|
1053
1054
|
}
|
|
1054
1055
|
|
|
1055
|
-
.sd-1-
|
|
1056
|
+
.sd-1-4-1-display--inverted {
|
|
1056
1057
|
|
|
1057
1058
|
color: rgb(var(--sd-color-white, 255 255 255) / var(--tw-text-opacity, 1)) /* Inverted text color */;
|
|
1058
1059
|
}
|
|
1059
1060
|
|
|
1060
1061
|
/**
|
|
1061
1062
|
* Headlines are vital for displaying content hierarchy and to improve accessibility. A headline can be additionally accompanied by an icon. The icon can be displayed on the left side or inline.
|
|
1062
|
-
* @name sd-1-
|
|
1063
|
+
* @name sd-1-4-1-headline
|
|
1063
1064
|
* @status stable
|
|
1064
1065
|
* @since 1.16
|
|
1065
|
-
* @variant { 3xl | xl | lg | base } sd-1-
|
|
1066
|
-
* @boolean sd-1-
|
|
1067
|
-
* @boolean sd-1-
|
|
1066
|
+
* @variant { 3xl | xl | lg | base } sd-1-4-1-headline--size-... The headline's size.
|
|
1067
|
+
* @boolean sd-1-4-1-headline--inverted Inverts the headline text.
|
|
1068
|
+
* @boolean sd-1-4-1-headline--inline Sets inline behavior. Used exclusively when an sd-icon or other component is present. See usage <a href="#inline">here.</a>
|
|
1068
1069
|
*/
|
|
1069
1070
|
|
|
1070
|
-
.sd-1-
|
|
1071
|
-
.sd-1-
|
|
1071
|
+
.sd-1-4-1-headline,
|
|
1072
|
+
.sd-1-4-1-prose :is(h1, h2, h3, h4, h5) {
|
|
1072
1073
|
display: flex;
|
|
1073
1074
|
font-weight: 700;
|
|
1074
1075
|
|
|
1075
1076
|
color: rgb(var(--sd-color-primary, 0 53 142) / var(--tw-text-opacity, 1)) /* Primary brand color for text */;
|
|
1076
1077
|
}
|
|
1077
1078
|
|
|
1078
|
-
.sd-1-
|
|
1079
|
+
.sd-1-4-1-headline sd-icon, .sd-1-4-1-prose :is(h1, h2, h3, h4, h5) sd-icon {
|
|
1079
1080
|
flex-shrink: 0;
|
|
1080
1081
|
font-size: 3rem;
|
|
1081
1082
|
|
|
@@ -1084,15 +1085,15 @@ Used for inverted pressed interaction text link */;
|
|
|
1084
1085
|
|
|
1085
1086
|
@media (min-width: 640px) {
|
|
1086
1087
|
|
|
1087
|
-
.sd-1-
|
|
1088
|
+
.sd-1-4-1-headline sd-icon, .sd-1-4-1-prose :is(h1, h2, h3, h4, h5) sd-icon {
|
|
1088
1089
|
margin-top: var(--sd-spacing-2, 0.5rem) /* 8px */;
|
|
1089
1090
|
}
|
|
1090
1091
|
}
|
|
1091
1092
|
|
|
1092
|
-
.sd-1-
|
|
1093
|
-
.sd-1-
|
|
1094
|
-
.sd-1-
|
|
1095
|
-
.sd-1-
|
|
1093
|
+
.sd-1-4-1-headline.sd-1-4-1-headline,
|
|
1094
|
+
.sd-1-4-1-headline:is(h1):not(.sd-1-4-1-headline),
|
|
1095
|
+
.sd-1-4-1-prose :is(h1, h2, h3, h4, h5).sd-1-4-1-headline,
|
|
1096
|
+
.sd-1-4-1-prose :is(h1, h2, h3, h4, h5):is(h1):not(.sd-1-4-1-headline) {
|
|
1096
1097
|
gap: var(--sd-spacing-4, 1rem) /* 16px */;
|
|
1097
1098
|
font-size: var(--sd-font-size-3xl, 2rem) /* 32px */;
|
|
1098
1099
|
line-height: var(--sd-line-height-tight, 120%) /* Used for display and large titles */;
|
|
@@ -1100,29 +1101,29 @@ Used for inverted pressed interaction text link */;
|
|
|
1100
1101
|
|
|
1101
1102
|
@media (min-width: 640px) {
|
|
1102
1103
|
|
|
1103
|
-
.sd-1-
|
|
1104
|
-
.sd-1-
|
|
1105
|
-
.sd-1-
|
|
1106
|
-
.sd-1-
|
|
1104
|
+
.sd-1-4-1-headline.sd-1-4-1-headline,
|
|
1105
|
+
.sd-1-4-1-headline:is(h1):not(.sd-1-4-1-headline),
|
|
1106
|
+
.sd-1-4-1-prose :is(h1, h2, h3, h4, h5).sd-1-4-1-headline,
|
|
1107
|
+
.sd-1-4-1-prose :is(h1, h2, h3, h4, h5):is(h1):not(.sd-1-4-1-headline) {
|
|
1107
1108
|
font-size: var(--sd-font-size-4xl, 2.5rem) /* 40px */;
|
|
1108
1109
|
}
|
|
1109
1110
|
}
|
|
1110
1111
|
|
|
1111
|
-
.sd-1-
|
|
1112
|
+
.sd-1-4-1-headline.sd-1-4-1-headline sd-icon, .sd-1-4-1-headline:is(h1):not(.sd-1-4-1-headline) sd-icon, .sd-1-4-1-prose :is(h1, h2, h3, h4, h5).sd-1-4-1-headline sd-icon, .sd-1-4-1-prose :is(h1, h2, h3, h4, h5):is(h1):not(.sd-1-4-1-headline) sd-icon {
|
|
1112
1113
|
margin-top: calc(var(--sd-spacing-1, 0.25rem) /* 4px */ * -1);
|
|
1113
1114
|
}
|
|
1114
1115
|
|
|
1115
1116
|
@media (min-width: 640px) {
|
|
1116
1117
|
|
|
1117
|
-
.sd-1-
|
|
1118
|
+
.sd-1-4-1-headline.sd-1-4-1-headline sd-icon, .sd-1-4-1-headline:is(h1):not(.sd-1-4-1-headline) sd-icon, .sd-1-4-1-prose :is(h1, h2, h3, h4, h5).sd-1-4-1-headline sd-icon, .sd-1-4-1-prose :is(h1, h2, h3, h4, h5):is(h1):not(.sd-1-4-1-headline) sd-icon {
|
|
1118
1119
|
margin-top: var(--sd-spacing-0, 0px) /* No spacing (manually added) */;
|
|
1119
1120
|
}
|
|
1120
1121
|
}
|
|
1121
1122
|
|
|
1122
|
-
.sd-1-
|
|
1123
|
-
.sd-1-
|
|
1124
|
-
.sd-1-
|
|
1125
|
-
.sd-1-
|
|
1123
|
+
.sd-1-4-1-headline.sd-1-4-1-headline--size-3xl,
|
|
1124
|
+
.sd-1-4-1-headline:is(h2):not(.sd-1-4-1-headline),
|
|
1125
|
+
.sd-1-4-1-prose :is(h1, h2, h3, h4, h5).sd-1-4-1-headline--size-3xl,
|
|
1126
|
+
.sd-1-4-1-prose :is(h1, h2, h3, h4, h5):is(h2):not(.sd-1-4-1-headline) {
|
|
1126
1127
|
gap: var(--sd-spacing-4, 1rem) /* 16px */;
|
|
1127
1128
|
font-size: var(--sd-font-size-2xl, 1.75rem) /* 28px */;
|
|
1128
1129
|
line-height: var(--sd-line-height-tight, 120%) /* Used for display and large titles */;
|
|
@@ -1130,227 +1131,231 @@ Used for inverted pressed interaction text link */;
|
|
|
1130
1131
|
|
|
1131
1132
|
@media (min-width: 640px) {
|
|
1132
1133
|
|
|
1133
|
-
.sd-1-
|
|
1134
|
-
.sd-1-
|
|
1135
|
-
.sd-1-
|
|
1136
|
-
.sd-1-
|
|
1134
|
+
.sd-1-4-1-headline.sd-1-4-1-headline--size-3xl,
|
|
1135
|
+
.sd-1-4-1-headline:is(h2):not(.sd-1-4-1-headline),
|
|
1136
|
+
.sd-1-4-1-prose :is(h1, h2, h3, h4, h5).sd-1-4-1-headline--size-3xl,
|
|
1137
|
+
.sd-1-4-1-prose :is(h1, h2, h3, h4, h5):is(h2):not(.sd-1-4-1-headline) {
|
|
1137
1138
|
font-size: var(--sd-font-size-3xl, 2rem) /* 32px */;
|
|
1138
1139
|
}
|
|
1139
1140
|
}
|
|
1140
1141
|
|
|
1141
|
-
.sd-1-
|
|
1142
|
+
.sd-1-4-1-headline.sd-1-4-1-headline--size-3xl sd-icon, .sd-1-4-1-headline:is(h2):not(.sd-1-4-1-headline) sd-icon, .sd-1-4-1-prose :is(h1, h2, h3, h4, h5).sd-1-4-1-headline--size-3xl sd-icon, .sd-1-4-1-prose :is(h1, h2, h3, h4, h5):is(h2):not(.sd-1-4-1-headline) sd-icon {
|
|
1142
1143
|
margin-top: calc(var(--sd-spacing-1, 0.25rem) /* 4px */ * -1);
|
|
1143
1144
|
}
|
|
1144
1145
|
|
|
1145
1146
|
@media (min-width: 640px) {
|
|
1146
1147
|
|
|
1147
|
-
.sd-1-
|
|
1148
|
+
.sd-1-4-1-headline.sd-1-4-1-headline--size-3xl sd-icon, .sd-1-4-1-headline:is(h2):not(.sd-1-4-1-headline) sd-icon, .sd-1-4-1-prose :is(h1, h2, h3, h4, h5).sd-1-4-1-headline--size-3xl sd-icon, .sd-1-4-1-prose :is(h1, h2, h3, h4, h5):is(h2):not(.sd-1-4-1-headline) sd-icon {
|
|
1148
1149
|
margin-top: var(--sd-spacing-0, 0px) /* No spacing (manually added) */;
|
|
1149
1150
|
}
|
|
1150
1151
|
}
|
|
1151
1152
|
|
|
1152
|
-
.sd-1-
|
|
1153
|
-
.sd-1-
|
|
1154
|
-
.sd-1-
|
|
1155
|
-
.sd-1-
|
|
1156
|
-
.sd-1-
|
|
1157
|
-
.sd-1-
|
|
1158
|
-
.sd-1-
|
|
1159
|
-
.sd-1-
|
|
1153
|
+
.sd-1-4-1-headline.sd-1-4-1-headline--size-xl,
|
|
1154
|
+
.sd-1-4-1-headline.sd-1-4-1-headline--size-lg,
|
|
1155
|
+
.sd-1-4-1-headline.sd-1-4-1-headline--size-base,
|
|
1156
|
+
.sd-1-4-1-headline:is(h3, h4, h5):not(.sd-1-4-1-headline),
|
|
1157
|
+
.sd-1-4-1-prose :is(h1, h2, h3, h4, h5).sd-1-4-1-headline--size-xl,
|
|
1158
|
+
.sd-1-4-1-prose :is(h1, h2, h3, h4, h5).sd-1-4-1-headline--size-lg,
|
|
1159
|
+
.sd-1-4-1-prose :is(h1, h2, h3, h4, h5).sd-1-4-1-headline--size-base,
|
|
1160
|
+
.sd-1-4-1-prose :is(h1, h2, h3, h4, h5):is(h3, h4, h5):not(.sd-1-4-1-headline) {
|
|
1160
1161
|
gap: var(--sd-spacing-2, 0.5rem) /* 8px */;
|
|
1161
1162
|
|
|
1162
1163
|
color: rgb(var(--sd-color-black, 24 24 24) / var(--tw-text-opacity, 1)) /* Default text color */;
|
|
1163
1164
|
}
|
|
1164
1165
|
|
|
1165
|
-
.sd-1-
|
|
1166
|
+
.sd-1-4-1-headline.sd-1-4-1-headline--size-xl sd-icon, .sd-1-4-1-headline.sd-1-4-1-headline--size-lg sd-icon, .sd-1-4-1-headline.sd-1-4-1-headline--size-base sd-icon, .sd-1-4-1-headline:is(h3, h4, h5):not(.sd-1-4-1-headline) sd-icon, .sd-1-4-1-prose :is(h1, h2, h3, h4, h5).sd-1-4-1-headline--size-xl sd-icon, .sd-1-4-1-prose :is(h1, h2, h3, h4, h5).sd-1-4-1-headline--size-lg sd-icon, .sd-1-4-1-prose :is(h1, h2, h3, h4, h5).sd-1-4-1-headline--size-base sd-icon, .sd-1-4-1-prose :is(h1, h2, h3, h4, h5):is(h3, h4, h5):not(.sd-1-4-1-headline) sd-icon {
|
|
1166
1167
|
font-size: 2rem;
|
|
1167
1168
|
}
|
|
1168
1169
|
|
|
1169
|
-
.sd-1-
|
|
1170
|
-
.sd-1-
|
|
1171
|
-
.sd-1-
|
|
1172
|
-
.sd-1-
|
|
1170
|
+
.sd-1-4-1-headline.sd-1-4-1-headline--size-xl,
|
|
1171
|
+
.sd-1-4-1-headline:is(h3):not(.sd-1-4-1-headline),
|
|
1172
|
+
.sd-1-4-1-prose :is(h1, h2, h3, h4, h5).sd-1-4-1-headline--size-xl,
|
|
1173
|
+
.sd-1-4-1-prose :is(h1, h2, h3, h4, h5):is(h3):not(.sd-1-4-1-headline) {
|
|
1173
1174
|
font-size: var(--sd-font-size-xl, 1.5rem) /* 24px */;
|
|
1174
1175
|
}
|
|
1175
1176
|
|
|
1176
|
-
.sd-1-
|
|
1177
|
+
.sd-1-4-1-headline.sd-1-4-1-headline--size-xl sd-icon, .sd-1-4-1-headline:is(h3):not(.sd-1-4-1-headline) sd-icon, .sd-1-4-1-prose :is(h1, h2, h3, h4, h5).sd-1-4-1-headline--size-xl sd-icon, .sd-1-4-1-prose :is(h1, h2, h3, h4, h5):is(h3):not(.sd-1-4-1-headline) sd-icon {
|
|
1177
1178
|
margin-top: var(--sd-spacing-0-5, 0.125rem) /* 2px */;
|
|
1178
1179
|
}
|
|
1179
1180
|
|
|
1180
1181
|
@media (min-width: 640px) {
|
|
1181
1182
|
|
|
1182
|
-
.sd-1-
|
|
1183
|
+
.sd-1-4-1-headline.sd-1-4-1-headline--size-xl sd-icon, .sd-1-4-1-headline:is(h3):not(.sd-1-4-1-headline) sd-icon, .sd-1-4-1-prose :is(h1, h2, h3, h4, h5).sd-1-4-1-headline--size-xl sd-icon, .sd-1-4-1-prose :is(h1, h2, h3, h4, h5):is(h3):not(.sd-1-4-1-headline) sd-icon {
|
|
1183
1184
|
margin-top: var(--sd-spacing-0-5, 0.125rem) /* 2px */;
|
|
1184
1185
|
}
|
|
1185
1186
|
}
|
|
1186
1187
|
|
|
1187
|
-
.sd-1-
|
|
1188
|
-
.sd-1-
|
|
1189
|
-
.sd-1-
|
|
1190
|
-
.sd-1-
|
|
1191
|
-
.sd-1-
|
|
1192
|
-
.sd-1-
|
|
1188
|
+
.sd-1-4-1-headline.sd-1-4-1-headline--size-lg,
|
|
1189
|
+
.sd-1-4-1-headline.sd-1-4-1-headline--size-base,
|
|
1190
|
+
.sd-1-4-1-headline:is(h4, h5):not(.sd-1-4-1-headline),
|
|
1191
|
+
.sd-1-4-1-prose :is(h1, h2, h3, h4, h5).sd-1-4-1-headline--size-lg,
|
|
1192
|
+
.sd-1-4-1-prose :is(h1, h2, h3, h4, h5).sd-1-4-1-headline--size-base,
|
|
1193
|
+
.sd-1-4-1-prose :is(h1, h2, h3, h4, h5):is(h4, h5):not(.sd-1-4-1-headline) {
|
|
1193
1194
|
line-height: var(--sd-line-height-normal, 150%) /* Used for body copy and smaller titles */;
|
|
1194
1195
|
}
|
|
1195
1196
|
|
|
1196
|
-
.sd-1-
|
|
1197
|
-
.sd-1-
|
|
1198
|
-
.sd-1-
|
|
1199
|
-
.sd-1-
|
|
1197
|
+
.sd-1-4-1-headline.sd-1-4-1-headline--size-lg,
|
|
1198
|
+
.sd-1-4-1-headline:is(h4),
|
|
1199
|
+
.sd-1-4-1-prose :is(h1, h2, h3, h4, h5).sd-1-4-1-headline--size-lg,
|
|
1200
|
+
.sd-1-4-1-prose :is(h1, h2, h3, h4, h5):is(h4) {
|
|
1200
1201
|
font-size: var(--sd-font-size-lg, 1.25rem) /* 20px */;
|
|
1201
1202
|
}
|
|
1202
1203
|
|
|
1203
|
-
.sd-1-
|
|
1204
|
+
.sd-1-4-1-headline.sd-1-4-1-headline--size-lg sd-icon, .sd-1-4-1-headline:is(h4) sd-icon, .sd-1-4-1-prose :is(h1, h2, h3, h4, h5).sd-1-4-1-headline--size-lg sd-icon, .sd-1-4-1-prose :is(h1, h2, h3, h4, h5):is(h4) sd-icon {
|
|
1204
1205
|
margin-top: var(--sd-spacing-0, 0px) /* No spacing (manually added) */;
|
|
1205
1206
|
}
|
|
1206
1207
|
|
|
1207
1208
|
@media (min-width: 640px) {
|
|
1208
1209
|
|
|
1209
|
-
.sd-1-
|
|
1210
|
+
.sd-1-4-1-headline.sd-1-4-1-headline--size-lg sd-icon, .sd-1-4-1-headline:is(h4) sd-icon, .sd-1-4-1-prose :is(h1, h2, h3, h4, h5).sd-1-4-1-headline--size-lg sd-icon, .sd-1-4-1-prose :is(h1, h2, h3, h4, h5):is(h4) sd-icon {
|
|
1210
1211
|
margin-top: var(--sd-spacing-0, 0px) /* No spacing (manually added) */;
|
|
1211
1212
|
}
|
|
1212
1213
|
}
|
|
1213
1214
|
|
|
1214
|
-
.sd-1-
|
|
1215
|
-
.sd-1-
|
|
1216
|
-
.sd-1-
|
|
1217
|
-
.sd-1-
|
|
1215
|
+
.sd-1-4-1-headline.sd-1-4-1-headline--size-base,
|
|
1216
|
+
.sd-1-4-1-headline:is(h5):not(.sd-1-4-1-headline),
|
|
1217
|
+
.sd-1-4-1-prose :is(h1, h2, h3, h4, h5).sd-1-4-1-headline--size-base,
|
|
1218
|
+
.sd-1-4-1-prose :is(h1, h2, h3, h4, h5):is(h5):not(.sd-1-4-1-headline) {
|
|
1218
1219
|
font-size: var(--sd-font-size-base, 1rem) /* 16px */;
|
|
1219
1220
|
}
|
|
1220
1221
|
|
|
1221
|
-
.sd-1-
|
|
1222
|
+
.sd-1-4-1-headline.sd-1-4-1-headline--size-base sd-icon, .sd-1-4-1-headline:is(h5):not(.sd-1-4-1-headline) sd-icon, .sd-1-4-1-prose :is(h1, h2, h3, h4, h5).sd-1-4-1-headline--size-base sd-icon, .sd-1-4-1-prose :is(h1, h2, h3, h4, h5):is(h5):not(.sd-1-4-1-headline) sd-icon {
|
|
1222
1223
|
margin-top: calc(var(--sd-spacing-1, 0.25rem) /* 4px */ * -1);
|
|
1223
1224
|
}
|
|
1224
1225
|
|
|
1225
|
-
.sd-1-
|
|
1226
|
+
.sd-1-4-1-headline.sd-1-4-1-headline--size-base mark, .sd-1-4-1-headline:is(h5):not(.sd-1-4-1-headline) mark, .sd-1-4-1-prose :is(h1, h2, h3, h4, h5).sd-1-4-1-headline--size-base mark, .sd-1-4-1-prose :is(h1, h2, h3, h4, h5):is(h5):not(.sd-1-4-1-headline) mark {
|
|
1226
1227
|
color: inherit;
|
|
1227
1228
|
}
|
|
1228
1229
|
|
|
1229
|
-
.sd-1-
|
|
1230
|
+
.sd-1-4-1-headline--inline {
|
|
1230
1231
|
display: inline-block;
|
|
1231
1232
|
}
|
|
1232
1233
|
|
|
1233
|
-
.sd-1-
|
|
1234
|
+
.sd-1-4-1-headline--inline sd-icon {
|
|
1234
1235
|
margin-right: var(--sd-spacing-2, 0.5rem) /* 8px */;
|
|
1235
1236
|
margin-top: calc(var(--sd-spacing-1, 0.25rem) /* 4px */ * -1);
|
|
1236
1237
|
vertical-align: middle;
|
|
1237
1238
|
}
|
|
1238
1239
|
|
|
1239
|
-
.sd-1-
|
|
1240
|
+
.sd-1-4-1-headline--inline:is(.sd-1-4-1-headline--size-xl, .sd-1-4-1-headline--size-lg, .sd-1-4-1-headline--size-base) sd-icon {
|
|
1240
1241
|
margin-right: var(--sd-spacing-0-5, 0.125rem) /* 2px */;
|
|
1241
1242
|
}
|
|
1242
1243
|
|
|
1243
|
-
.sd-1-
|
|
1244
|
-
.sd-1-
|
|
1244
|
+
.sd-1-4-1-headline--inverted:not(#_),
|
|
1245
|
+
.sd-1-4-1-prose--inverted :is(h1, h2, h3, h4, h5):not(.sd-1-4-1-headline):not(#_) {
|
|
1245
1246
|
|
|
1246
1247
|
color: rgb(var(--sd-color-white, 255 255 255) / var(--tw-text-opacity, 1)) /* Inverted text color */;
|
|
1247
1248
|
}
|
|
1248
1249
|
|
|
1249
|
-
.sd-1-
|
|
1250
|
+
.sd-1-4-1-headline--inverted:not(#_) sd-icon, .sd-1-4-1-prose--inverted :is(h1, h2, h3, h4, h5):not(.sd-1-4-1-headline):not(#_) sd-icon {
|
|
1250
1251
|
|
|
1251
1252
|
color: rgb(var(--sd-color-white, 255 255 255) / var(--tw-text-opacity, 1)) /* Inverted text color */;
|
|
1252
1253
|
}
|
|
1253
1254
|
|
|
1254
1255
|
/**
|
|
1255
1256
|
* Generates basic styles for interactive elements.
|
|
1256
|
-
* @name sd-1-
|
|
1257
|
+
* @name sd-1-4-1-interactive
|
|
1257
1258
|
* @status stable
|
|
1258
1259
|
* @since 1.11
|
|
1259
|
-
* @boolean sd-1-
|
|
1260
|
-
* @boolean sd-1-
|
|
1261
|
-
* @boolean sd-1-
|
|
1260
|
+
* @boolean sd-1-4-1-interactive--disabled Makes an element look disabled.
|
|
1261
|
+
* @boolean sd-1-4-1-interactive--inverted Inverts the colors of an element.
|
|
1262
|
+
* @boolean sd-1-4-1-interactive--reset Resets the default browser styles of e.g., a button.
|
|
1262
1263
|
*/
|
|
1263
1264
|
|
|
1264
|
-
.sd-1-
|
|
1265
|
+
.sd-1-4-1-prose a--reset, .sd-1-4-1-interactive--reset {
|
|
1265
1266
|
all: unset;
|
|
1266
1267
|
outline: revert;
|
|
1267
1268
|
}
|
|
1268
1269
|
|
|
1269
|
-
.sd-1-
|
|
1270
|
-
.sd-1-
|
|
1270
|
+
.sd-1-4-1-prose a,
|
|
1271
|
+
.sd-1-4-1-interactive {
|
|
1271
1272
|
cursor: pointer;
|
|
1272
1273
|
|
|
1273
1274
|
color: rgb(var(--sd-color-primary, 0 53 142) / var(--tw-text-opacity, 1)) /* Primary brand color for text */;
|
|
1274
1275
|
text-decoration-line: underline;
|
|
1275
1276
|
transition-property: color, background-color, border-color, text-decoration-color, fill, stroke;
|
|
1276
|
-
transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
|
|
1277
1277
|
transition-duration: 150ms;
|
|
1278
|
+
transition-duration: var(--sd-duration-fast, 150ms) /* Component State
|
|
1279
|
+
Animation of states like hover or pressed
|
|
1280
|
+
Microinteractions
|
|
1281
|
+
Smooth transitions eg. for buttons or dropdowns */;
|
|
1282
|
+
transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
|
|
1278
1283
|
}
|
|
1279
1284
|
|
|
1280
|
-
.sd-1-
|
|
1281
|
-
.sd-1-
|
|
1285
|
+
.sd-1-4-1-prose a:hover:not([disabled]),
|
|
1286
|
+
.sd-1-4-1-interactive:hover:not([disabled]) {
|
|
1282
1287
|
|
|
1283
1288
|
color: rgb(var(--sd-color-primary-500, 70 109 175) / var(--tw-text-opacity, 1)) /* Used for hover interaction */;
|
|
1284
1289
|
}
|
|
1285
1290
|
|
|
1286
|
-
.sd-1-
|
|
1287
|
-
.sd-1-
|
|
1291
|
+
.sd-1-4-1-prose a:active:not([disabled]),
|
|
1292
|
+
.sd-1-4-1-interactive:active:not([disabled]) {
|
|
1288
1293
|
|
|
1289
1294
|
color: rgb(var(--sd-color-primary-800, 5 21 48) / var(--tw-text-opacity, 1)) /* Used for pressed interaction */;
|
|
1290
1295
|
}
|
|
1291
1296
|
|
|
1292
|
-
.sd-1-
|
|
1297
|
+
.sd-1-4-1-prose a:is(.sd-1-4-1-interactive), .sd-1-4-1-interactive:is(.sd-1-4-1-interactive) {
|
|
1293
1298
|
text-decoration-line: none;
|
|
1294
1299
|
}
|
|
1295
1300
|
|
|
1296
|
-
.sd-1-
|
|
1301
|
+
.sd-1-4-1-prose a:focus-visible, .sd-1-4-1-interactive:focus-visible {
|
|
1297
1302
|
outline-style: solid;
|
|
1298
1303
|
outline-width: 2px;
|
|
1299
1304
|
outline-offset: 2px;
|
|
1300
1305
|
outline-color: rgb(var(--sd-color-primary, 0 53 142) / 1) /* Used for buttons, select field, focus state */;
|
|
1301
1306
|
}
|
|
1302
1307
|
|
|
1303
|
-
.sd-1-
|
|
1304
|
-
.sd-1-
|
|
1305
|
-
.sd-1-
|
|
1306
|
-
.sd-1-
|
|
1307
|
-
.sd-1-
|
|
1308
|
-
.sd-1-
|
|
1308
|
+
.sd-1-4-1-prose a--disabled,
|
|
1309
|
+
.sd-1-4-1-prose a[disabled],
|
|
1310
|
+
.sd-1-4-1-prose a[href=''],
|
|
1311
|
+
.sd-1-4-1-interactive--disabled,
|
|
1312
|
+
.sd-1-4-1-interactive[disabled],
|
|
1313
|
+
.sd-1-4-1-interactive[href=''] {
|
|
1309
1314
|
cursor: not-allowed;
|
|
1310
1315
|
|
|
1311
1316
|
color: rgb(var(--sd-color-neutral-600, 136 136 136) / var(--tw-text-opacity, 1)) /* Used for inverted disabled state */;
|
|
1312
1317
|
}
|
|
1313
1318
|
|
|
1314
|
-
.sd-1-
|
|
1315
|
-
.sd-1-
|
|
1316
|
-
.sd-1-
|
|
1317
|
-
.sd-1-
|
|
1318
|
-
.sd-1-
|
|
1319
|
-
.sd-1-
|
|
1319
|
+
.sd-1-4-1-prose a--disabled:hover:not([disabled]),
|
|
1320
|
+
.sd-1-4-1-prose a[disabled]:hover:not([disabled]),
|
|
1321
|
+
.sd-1-4-1-prose a[href='']:hover:not([disabled]),
|
|
1322
|
+
.sd-1-4-1-interactive--disabled:hover:not([disabled]),
|
|
1323
|
+
.sd-1-4-1-interactive[disabled]:hover:not([disabled]),
|
|
1324
|
+
.sd-1-4-1-interactive[href='']:hover:not([disabled]) {
|
|
1320
1325
|
|
|
1321
1326
|
color: rgb(var(--sd-color-neutral-600, 136 136 136) / var(--tw-text-opacity, 1)) /* Used for inverted disabled state */;
|
|
1322
1327
|
}
|
|
1323
1328
|
|
|
1324
|
-
.sd-1-
|
|
1325
|
-
.sd-1-
|
|
1326
|
-
.sd-1-
|
|
1327
|
-
.sd-1-
|
|
1328
|
-
.sd-1-
|
|
1329
|
-
.sd-1-
|
|
1329
|
+
.sd-1-4-1-prose a--disabled:active:not([disabled]),
|
|
1330
|
+
.sd-1-4-1-prose a[disabled]:active:not([disabled]),
|
|
1331
|
+
.sd-1-4-1-prose a[href='']:active:not([disabled]),
|
|
1332
|
+
.sd-1-4-1-interactive--disabled:active:not([disabled]),
|
|
1333
|
+
.sd-1-4-1-interactive[disabled]:active:not([disabled]),
|
|
1334
|
+
.sd-1-4-1-interactive[href='']:active:not([disabled]) {
|
|
1330
1335
|
|
|
1331
1336
|
color: rgb(var(--sd-color-neutral-600, 136 136 136) / var(--tw-text-opacity, 1)) /* Used for inverted disabled state */;
|
|
1332
1337
|
}
|
|
1333
1338
|
|
|
1334
|
-
.sd-1-
|
|
1335
|
-
.sd-1-
|
|
1339
|
+
.sd-1-4-1-prose--inverted a,
|
|
1340
|
+
.sd-1-4-1-interactive--inverted {
|
|
1336
1341
|
|
|
1337
1342
|
color: rgb(var(--sd-color-white, 255 255 255) / var(--tw-text-opacity, 1)) /* Inverted text color */;
|
|
1338
1343
|
}
|
|
1339
1344
|
|
|
1340
|
-
.sd-1-
|
|
1341
|
-
.sd-1-
|
|
1345
|
+
.sd-1-4-1-prose--inverted a:hover:not([disabled]),
|
|
1346
|
+
.sd-1-4-1-interactive--inverted:hover:not([disabled]) {
|
|
1342
1347
|
|
|
1343
1348
|
color: rgb(var(--sd-color-primary-200, 224 233 243) / var(--tw-text-opacity, 1)) /* Used for inverted hover interaction text link and inverted pressed interaction button label */;
|
|
1344
1349
|
}
|
|
1345
1350
|
|
|
1346
|
-
.sd-1-
|
|
1347
|
-
.sd-1-
|
|
1351
|
+
.sd-1-4-1-prose--inverted a:active:not([disabled]),
|
|
1352
|
+
.sd-1-4-1-interactive--inverted:active:not([disabled]) {
|
|
1348
1353
|
|
|
1349
1354
|
color: rgb(var(--sd-color-primary-400, 153 171 208) / var(--tw-text-opacity, 1)) /* Additional text inverted color
|
|
1350
1355
|
Used for inverted pressed interaction text link */;
|
|
1351
1356
|
}
|
|
1352
1357
|
|
|
1353
|
-
.sd-1-
|
|
1358
|
+
.sd-1-4-1-prose--inverted a:focus-visible, .sd-1-4-1-interactive--inverted:focus-visible {
|
|
1354
1359
|
outline-style: solid;
|
|
1355
1360
|
outline-width: 2px;
|
|
1356
1361
|
outline-offset: 2px;
|
|
@@ -1359,15 +1364,15 @@ Used for inverted pressed interaction text link */;
|
|
|
1359
1364
|
|
|
1360
1365
|
/**
|
|
1361
1366
|
* Leadtext is used for text that should be highlighted and a focal point of the page.
|
|
1362
|
-
* @name sd-1-
|
|
1367
|
+
* @name sd-1-4-1-leadtext
|
|
1363
1368
|
* @status stable
|
|
1364
1369
|
* @since 1.7
|
|
1365
|
-
* @variant { lg } sd-1-
|
|
1366
|
-
* @boolean sd-1-
|
|
1370
|
+
* @variant { lg } sd-1-4-1-leadtext--size-... The leadtext's size.
|
|
1371
|
+
* @boolean sd-1-4-1-leadtext--inverted Inverts the leadtext text.
|
|
1367
1372
|
*/
|
|
1368
1373
|
|
|
1369
|
-
.sd-1-
|
|
1370
|
-
.sd-1-
|
|
1374
|
+
.sd-1-4-1-prose > .sd-1-4-1-leadtext,
|
|
1375
|
+
.sd-1-4-1-leadtext {
|
|
1371
1376
|
font-size: var(--sd-font-size-xl, 1.5rem) /* 24px */;
|
|
1372
1377
|
font-weight: 400;
|
|
1373
1378
|
line-height: var(--sd-line-height-normal, 150%) /* Used for body copy and smaller titles */;
|
|
@@ -1375,7 +1380,7 @@ Used for inverted pressed interaction text link */;
|
|
|
1375
1380
|
color: rgb(var(--sd-color-black, 24 24 24) / var(--tw-text-opacity, 1)) /* Default text color */;
|
|
1376
1381
|
}
|
|
1377
1382
|
|
|
1378
|
-
.sd-1-
|
|
1383
|
+
.sd-1-4-1-prose > .sd-1-4-1-leadtext--size-lg, .sd-1-4-1-leadtext--size-lg {
|
|
1379
1384
|
font-size: var(--sd-font-size-lg, 1.25rem) /* 20px */;
|
|
1380
1385
|
font-weight: 400;
|
|
1381
1386
|
line-height: var(--sd-line-height-normal, 150%) /* Used for body copy and smaller titles */;
|
|
@@ -1383,22 +1388,22 @@ Used for inverted pressed interaction text link */;
|
|
|
1383
1388
|
color: rgb(var(--sd-color-black, 24 24 24) / var(--tw-text-opacity, 1)) /* Default text color */;
|
|
1384
1389
|
}
|
|
1385
1390
|
|
|
1386
|
-
.sd-1-
|
|
1387
|
-
.sd-1-
|
|
1391
|
+
.sd-1-4-1-prose--inverted > .sd-1-4-1-leadtext,
|
|
1392
|
+
.sd-1-4-1-leadtext--inverted {
|
|
1388
1393
|
|
|
1389
1394
|
color: rgb(var(--sd-color-white, 255 255 255) / var(--tw-text-opacity, 1)) /* Inverted text color */;
|
|
1390
1395
|
}
|
|
1391
1396
|
|
|
1392
1397
|
/**
|
|
1393
1398
|
* Generates basic styles for list elements.
|
|
1394
|
-
* @name sd-1-
|
|
1399
|
+
* @name sd-1-4-1-list
|
|
1395
1400
|
* @status stable
|
|
1396
1401
|
* @since 1.39.0
|
|
1397
|
-
* @boolean sd-1-
|
|
1402
|
+
* @boolean sd-1-4-1-list--inverted Inverts the list text.
|
|
1398
1403
|
*/
|
|
1399
1404
|
|
|
1400
|
-
.sd-1-
|
|
1401
|
-
.sd-1-
|
|
1405
|
+
.sd-1-4-1-list:not(.sd-1-4-1-list--icon),
|
|
1406
|
+
.sd-1-4-1-prose > :is(ol, ul) {
|
|
1402
1407
|
list-style-position: revert;
|
|
1403
1408
|
list-style-type: revert;
|
|
1404
1409
|
padding: revert;
|
|
@@ -1412,14 +1417,14 @@ Used for inverted pressed interaction text link */;
|
|
|
1412
1417
|
*/
|
|
1413
1418
|
}
|
|
1414
1419
|
|
|
1415
|
-
.sd-1-
|
|
1420
|
+
.sd-1-4-1-list:not(.sd-1-4-1-list--icon) li:not(:first-child), .sd-1-4-1-prose > :is(ol, ul) li:not(:first-child) {
|
|
1416
1421
|
margin-top: var(--sd-spacing-3, 0.75rem) /* 12px */;
|
|
1417
1422
|
}
|
|
1418
1423
|
|
|
1419
|
-
.sd-1-
|
|
1420
|
-
.sd-1-
|
|
1421
|
-
.sd-1-
|
|
1422
|
-
.sd-1-
|
|
1424
|
+
.sd-1-4-1-list:not(.sd-1-4-1-list--icon) ul,
|
|
1425
|
+
.sd-1-4-1-list:not(.sd-1-4-1-list--icon) ol,
|
|
1426
|
+
.sd-1-4-1-prose > :is(ol, ul) ul,
|
|
1427
|
+
.sd-1-4-1-prose > :is(ol, ul) ol {
|
|
1423
1428
|
all: revert;
|
|
1424
1429
|
padding-left: 1.4em;
|
|
1425
1430
|
padding-top: 0.75em;
|
|
@@ -1427,8 +1432,8 @@ Used for inverted pressed interaction text link */;
|
|
|
1427
1432
|
|
|
1428
1433
|
@supports not (-webkit-hyphens: none) {
|
|
1429
1434
|
|
|
1430
|
-
.sd-1-
|
|
1431
|
-
.sd-1-
|
|
1435
|
+
.sd-1-4-1-list:not(.sd-1-4-1-list--icon),
|
|
1436
|
+
.sd-1-4-1-prose > :is(ol, ul) {
|
|
1432
1437
|
/* Safari automatically adds some spacing. This adds it for other browsers. */
|
|
1433
1438
|
|
|
1434
1439
|
/*
|
|
@@ -1442,38 +1447,38 @@ Used for inverted pressed interaction text link */;
|
|
|
1442
1447
|
*/
|
|
1443
1448
|
/* Level 1 */
|
|
1444
1449
|
}
|
|
1445
|
-
.sd-1-
|
|
1450
|
+
.sd-1-4-1-list:not(.sd-1-4-1-list--icon) li, .sd-1-4-1-prose > :is(ol, ul) li {
|
|
1446
1451
|
padding-left: 0.3em;
|
|
1447
1452
|
}
|
|
1448
|
-
.sd-1-
|
|
1453
|
+
.sd-1-4-1-list:not(.sd-1-4-1-list--icon):is(ol):not(.sd-1-4-1-list--icon), .sd-1-4-1-prose > :is(ol, ul):is(ol):not(.sd-1-4-1-list--icon) {
|
|
1449
1454
|
counter-reset: item;
|
|
1450
1455
|
}
|
|
1451
|
-
.sd-1-
|
|
1456
|
+
.sd-1-4-1-list:not(.sd-1-4-1-list--icon):is(ol):not(.sd-1-4-1-list--icon) > li, .sd-1-4-1-prose > :is(ol, ul):is(ol):not(.sd-1-4-1-list--icon) > li {
|
|
1452
1457
|
counter-increment: item;
|
|
1453
1458
|
}
|
|
1454
|
-
.sd-1-
|
|
1459
|
+
.sd-1-4-1-list:not(.sd-1-4-1-list--icon):is(ol):not(.sd-1-4-1-list--icon) > li::marker, .sd-1-4-1-prose > :is(ol, ul):is(ol):not(.sd-1-4-1-list--icon) > li::marker {
|
|
1455
1460
|
content: counters(item, '.', decimal) '. ';
|
|
1456
1461
|
}
|
|
1457
1462
|
/* Level 2 */
|
|
1458
|
-
.sd-1-
|
|
1463
|
+
.sd-1-4-1-list:not(.sd-1-4-1-list--icon):is(ol):not(.sd-1-4-1-list--icon) > li > ol, .sd-1-4-1-prose > :is(ol, ul):is(ol):not(.sd-1-4-1-list--icon) > li > ol {
|
|
1459
1464
|
padding-left: 1.9em;
|
|
1460
1465
|
counter-reset: subitem;
|
|
1461
1466
|
}
|
|
1462
|
-
.sd-1-
|
|
1467
|
+
.sd-1-4-1-list:not(.sd-1-4-1-list--icon):is(ol):not(.sd-1-4-1-list--icon) > li > ol > li, .sd-1-4-1-prose > :is(ol, ul):is(ol):not(.sd-1-4-1-list--icon) > li > ol > li {
|
|
1463
1468
|
counter-increment: subitem;
|
|
1464
1469
|
}
|
|
1465
|
-
.sd-1-
|
|
1470
|
+
.sd-1-4-1-list:not(.sd-1-4-1-list--icon):is(ol):not(.sd-1-4-1-list--icon) > li > ol > li::marker, .sd-1-4-1-prose > :is(ol, ul):is(ol):not(.sd-1-4-1-list--icon) > li > ol > li::marker {
|
|
1466
1471
|
content: counters(item, '.', decimal) '.' counters(subitem, '.', decimal) '. ';
|
|
1467
1472
|
}
|
|
1468
1473
|
/* Level 3 */
|
|
1469
|
-
.sd-1-
|
|
1474
|
+
.sd-1-4-1-list:not(.sd-1-4-1-list--icon):is(ol):not(.sd-1-4-1-list--icon) > li > ol > li > ol, .sd-1-4-1-prose > :is(ol, ul):is(ol):not(.sd-1-4-1-list--icon) > li > ol > li > ol {
|
|
1470
1475
|
padding-left: 2.7em;
|
|
1471
1476
|
counter-reset: subsubitem;
|
|
1472
1477
|
}
|
|
1473
|
-
.sd-1-
|
|
1478
|
+
.sd-1-4-1-list:not(.sd-1-4-1-list--icon):is(ol):not(.sd-1-4-1-list--icon) > li > ol > li > ol > li, .sd-1-4-1-prose > :is(ol, ul):is(ol):not(.sd-1-4-1-list--icon) > li > ol > li > ol > li {
|
|
1474
1479
|
counter-increment: subsubitem;
|
|
1475
1480
|
}
|
|
1476
|
-
.sd-1-
|
|
1481
|
+
.sd-1-4-1-list:not(.sd-1-4-1-list--icon):is(ol):not(.sd-1-4-1-list--icon) > li > ol > li > ol > li::marker, .sd-1-4-1-prose > :is(ol, ul):is(ol):not(.sd-1-4-1-list--icon) > li > ol > li > ol > li::marker {
|
|
1477
1482
|
content: counters(item, '.', decimal) '.' counters(subitem, '.', decimal) '.'
|
|
1478
1483
|
counters(subsubitem, '.', decimal) '. ';
|
|
1479
1484
|
}
|
|
@@ -1481,35 +1486,35 @@ Used for inverted pressed interaction text link */;
|
|
|
1481
1486
|
|
|
1482
1487
|
/* Level 1 */
|
|
1483
1488
|
|
|
1484
|
-
.sd-1-
|
|
1485
|
-
.sd-1-
|
|
1486
|
-
.sd-1-
|
|
1487
|
-
.sd-1-
|
|
1489
|
+
.sd-1-4-1-list:not(.sd-1-4-1-list--icon):is(ul):not(.sd-1-4-1-list--icon),
|
|
1490
|
+
.sd-1-4-1-list:not(.sd-1-4-1-list--icon) ul,
|
|
1491
|
+
.sd-1-4-1-prose > :is(ol, ul):is(ul):not(.sd-1-4-1-list--icon),
|
|
1492
|
+
.sd-1-4-1-prose > :is(ol, ul) ul {
|
|
1488
1493
|
padding-left: 0.5em;
|
|
1489
1494
|
}
|
|
1490
1495
|
|
|
1491
|
-
.sd-1-
|
|
1496
|
+
.sd-1-4-1-list:not(.sd-1-4-1-list--icon):is(ul):not(.sd-1-4-1-list--icon) > li, .sd-1-4-1-list:not(.sd-1-4-1-list--icon) ul > li, .sd-1-4-1-prose > :is(ol, ul):is(ul):not(.sd-1-4-1-list--icon) > li, .sd-1-4-1-prose > :is(ol, ul) ul > li {
|
|
1492
1497
|
padding-left: 0.75em;
|
|
1493
1498
|
list-style-type: '\2022'; /* • */
|
|
1494
1499
|
}
|
|
1495
1500
|
|
|
1496
1501
|
/* Level 2 */
|
|
1497
1502
|
|
|
1498
|
-
.sd-1-
|
|
1503
|
+
.sd-1-4-1-list:not(.sd-1-4-1-list--icon):is(ul):not(.sd-1-4-1-list--icon) > li > ul, .sd-1-4-1-list:not(.sd-1-4-1-list--icon) ul > li > ul, .sd-1-4-1-prose > :is(ol, ul):is(ul):not(.sd-1-4-1-list--icon) > li > ul, .sd-1-4-1-prose > :is(ol, ul) ul > li > ul {
|
|
1499
1504
|
padding-left: 0.3em;
|
|
1500
1505
|
}
|
|
1501
1506
|
|
|
1502
|
-
.sd-1-
|
|
1507
|
+
.sd-1-4-1-list:not(.sd-1-4-1-list--icon):is(ul):not(.sd-1-4-1-list--icon) > li > ul > li, .sd-1-4-1-list:not(.sd-1-4-1-list--icon) ul > li > ul > li, .sd-1-4-1-prose > :is(ol, ul):is(ul):not(.sd-1-4-1-list--icon) > li > ul > li, .sd-1-4-1-prose > :is(ol, ul) ul > li > ul > li {
|
|
1503
1508
|
list-style-type: '\002B1D'; /* · */
|
|
1504
1509
|
}
|
|
1505
1510
|
|
|
1506
1511
|
/* Level 3 */
|
|
1507
1512
|
|
|
1508
|
-
.sd-1-
|
|
1513
|
+
.sd-1-4-1-list:not(.sd-1-4-1-list--icon):is(ul):not(.sd-1-4-1-list--icon) > li > ul > li > ul, .sd-1-4-1-list:not(.sd-1-4-1-list--icon) ul > li > ul > li > ul, .sd-1-4-1-prose > :is(ol, ul):is(ul):not(.sd-1-4-1-list--icon) > li > ul > li > ul, .sd-1-4-1-prose > :is(ol, ul) ul > li > ul > li > ul {
|
|
1509
1514
|
padding-left: 0.4em;
|
|
1510
1515
|
}
|
|
1511
1516
|
|
|
1512
|
-
.sd-1-
|
|
1517
|
+
.sd-1-4-1-list:not(.sd-1-4-1-list--icon):is(ul):not(.sd-1-4-1-list--icon) > li > ul > li > ul > li, .sd-1-4-1-list:not(.sd-1-4-1-list--icon) ul > li > ul > li > ul > li, .sd-1-4-1-prose > :is(ol, ul):is(ul):not(.sd-1-4-1-list--icon) > li > ul > li > ul > li, .sd-1-4-1-prose > :is(ol, ul) ul > li > ul > li > ul > li {
|
|
1513
1518
|
list-style-type: '\2010'; /* - */
|
|
1514
1519
|
}
|
|
1515
1520
|
|
|
@@ -1517,19 +1522,19 @@ Used for inverted pressed interaction text link */;
|
|
|
1517
1522
|
* Icon lists
|
|
1518
1523
|
*/
|
|
1519
1524
|
|
|
1520
|
-
.sd-1-
|
|
1525
|
+
.sd-1-4-1-list--icon {
|
|
1521
1526
|
padding-top: var(--sd-spacing-4, 1rem) /* 16px */;
|
|
1522
1527
|
padding-bottom: var(--sd-spacing-4, 1rem) /* 16px */;
|
|
1523
1528
|
text-align: left;
|
|
1524
1529
|
}
|
|
1525
1530
|
|
|
1526
|
-
.sd-1-
|
|
1527
|
-
.sd-1-
|
|
1531
|
+
.sd-1-4-1-list--icon li sd-icon:first-of-type,
|
|
1532
|
+
.sd-1-4-1-list--icon li .sd-1-4-1-list--icon__icon:first-of-type {
|
|
1528
1533
|
|
|
1529
1534
|
color: rgb(var(--sd-color-white, 255 255 255) / var(--tw-text-opacity, 1)) /* Inverted text color */;
|
|
1530
1535
|
}
|
|
1531
1536
|
|
|
1532
|
-
.sd-1-
|
|
1537
|
+
.sd-1-4-1-list--icon {
|
|
1533
1538
|
list-style-type: '';
|
|
1534
1539
|
}
|
|
1535
1540
|
|
|
@@ -1537,19 +1542,19 @@ Used for inverted pressed interaction text link */;
|
|
|
1537
1542
|
styles without affecting semantics is to set list-style-type to an empty string.
|
|
1538
1543
|
https://www.matuzo.at/blog/2023/removing-list-styles-without-affecting-semantics */
|
|
1539
1544
|
|
|
1540
|
-
.sd-1-
|
|
1545
|
+
.sd-1-4-1-list--icon > li:first-of-type {
|
|
1541
1546
|
padding-top: var(--sd-spacing-0, 0px) /* No spacing (manually added) */;
|
|
1542
1547
|
}
|
|
1543
1548
|
|
|
1544
|
-
.sd-1-
|
|
1549
|
+
.sd-1-4-1-list--icon li {
|
|
1545
1550
|
position: relative;
|
|
1546
1551
|
padding-top: var(--sd-spacing-3, 0.75rem) /* 12px */;
|
|
1547
1552
|
padding-left: var(--sd-spacing-10, 2.5rem) /* 40px */;
|
|
1548
1553
|
line-height: 32px;
|
|
1549
1554
|
}
|
|
1550
1555
|
|
|
1551
|
-
.sd-1-
|
|
1552
|
-
.sd-1-
|
|
1556
|
+
.sd-1-4-1-list--icon li > sd-icon:first-of-type,
|
|
1557
|
+
.sd-1-4-1-list--icon li > .sd-1-4-1-list--icon__icon:first-of-type {
|
|
1553
1558
|
position: absolute;
|
|
1554
1559
|
left: var(--sd-spacing-0, 0px) /* No spacing (manually added) */;
|
|
1555
1560
|
font-size: var(--sd-font-size-3xl, 2rem) /* 32px */;
|
|
@@ -1557,16 +1562,16 @@ Used for inverted pressed interaction text link */;
|
|
|
1557
1562
|
color: rgb(var(--sd-color-primary, 0 53 142) / var(--tw-text-opacity, 1)) /* Primary brand color for text */;
|
|
1558
1563
|
}
|
|
1559
1564
|
|
|
1560
|
-
.sd-1-
|
|
1565
|
+
.sd-1-4-1-list--icon.sd-1-4-1-list--horizontal {
|
|
1561
1566
|
display: flex;
|
|
1562
1567
|
}
|
|
1563
1568
|
|
|
1564
|
-
.sd-1-
|
|
1569
|
+
.sd-1-4-1-list--icon.sd-1-4-1-list--horizontal li {
|
|
1565
1570
|
display: flex;
|
|
1566
1571
|
padding-top: var(--sd-spacing-0, 0px) /* No spacing (manually added) */;
|
|
1567
1572
|
}
|
|
1568
1573
|
|
|
1569
|
-
.sd-1-
|
|
1574
|
+
.sd-1-4-1-list--icon.sd-1-4-1-list--horizontal li:not(:last-child) {
|
|
1570
1575
|
margin-right: var(--sd-spacing-8, 2rem) /* 32px */;
|
|
1571
1576
|
}
|
|
1572
1577
|
|
|
@@ -1574,31 +1579,31 @@ Used for inverted pressed interaction text link */;
|
|
|
1574
1579
|
* Inverted
|
|
1575
1580
|
*/
|
|
1576
1581
|
|
|
1577
|
-
.sd-1-
|
|
1578
|
-
.sd-1-
|
|
1582
|
+
.sd-1-4-1-list--inverted,
|
|
1583
|
+
.sd-1-4-1-prose--inverted > :is(ol, ul) {
|
|
1579
1584
|
|
|
1580
1585
|
color: rgb(var(--sd-color-white, 255 255 255) / var(--tw-text-opacity, 1)) /* Inverted text color */;
|
|
1581
1586
|
}
|
|
1582
1587
|
|
|
1583
|
-
.sd-1-
|
|
1584
|
-
.sd-1-
|
|
1585
|
-
.sd-1-
|
|
1586
|
-
.sd-1-
|
|
1588
|
+
.sd-1-4-1-list--inverted li > sd-icon:first-of-type,
|
|
1589
|
+
.sd-1-4-1-list--inverted li > .sd-1-4-1-list--icon__icon:first-of-type,
|
|
1590
|
+
.sd-1-4-1-prose--inverted > :is(ol, ul) li > sd-icon:first-of-type,
|
|
1591
|
+
.sd-1-4-1-prose--inverted > :is(ol, ul) li > .sd-1-4-1-list--icon__icon:first-of-type {
|
|
1587
1592
|
|
|
1588
1593
|
color: rgb(var(--sd-color-white, 255 255 255) / var(--tw-text-opacity, 1)) /* Inverted text color */;
|
|
1589
1594
|
}
|
|
1590
1595
|
|
|
1591
1596
|
/**
|
|
1592
1597
|
* A paragraph is used to display blocks of text. It uses the base font size and can contain bold and/or link styles.
|
|
1593
|
-
* @name sd-1-
|
|
1598
|
+
* @name sd-1-4-1-paragraph
|
|
1594
1599
|
* @status stable
|
|
1595
1600
|
* @since 1.7
|
|
1596
|
-
* @variant { sm } sd-1-
|
|
1597
|
-
* @boolean sd-1-
|
|
1601
|
+
* @variant { sm } sd-1-4-1-paragraph--size-... The paragraph's font size.
|
|
1602
|
+
* @boolean sd-1-4-1-paragraph--inverted Inverts the paragraph text.
|
|
1598
1603
|
*/
|
|
1599
1604
|
|
|
1600
|
-
.sd-1-
|
|
1601
|
-
.sd-1-
|
|
1605
|
+
.sd-1-4-1-paragraph,
|
|
1606
|
+
.sd-1-4-1-prose p {
|
|
1602
1607
|
font-size: var(--sd-font-size-base, 1rem) /* 16px */;
|
|
1603
1608
|
font-weight: 400;
|
|
1604
1609
|
line-height: var(--sd-line-height-normal, 150%) /* Used for body copy and smaller titles */;
|
|
@@ -1606,7 +1611,7 @@ Used for inverted pressed interaction text link */;
|
|
|
1606
1611
|
color: rgb(var(--sd-color-black, 24 24 24) / var(--tw-text-opacity, 1)) /* Default text color */;
|
|
1607
1612
|
}
|
|
1608
1613
|
|
|
1609
|
-
.sd-1-
|
|
1614
|
+
.sd-1-4-1-paragraph--size-sm, .sd-1-4-1-prose p--size-sm {
|
|
1610
1615
|
font-size: var(--sd-font-size-sm, 0.875rem) /* 14px */;
|
|
1611
1616
|
font-weight: 400;
|
|
1612
1617
|
line-height: var(--sd-line-height-normal, 150%) /* Used for body copy and smaller titles */;
|
|
@@ -1614,35 +1619,35 @@ Used for inverted pressed interaction text link */;
|
|
|
1614
1619
|
color: rgb(var(--sd-color-black, 24 24 24) / var(--tw-text-opacity, 1)) /* Default text color */;
|
|
1615
1620
|
}
|
|
1616
1621
|
|
|
1617
|
-
.sd-1-
|
|
1618
|
-
.sd-1-
|
|
1622
|
+
.sd-1-4-1-paragraph--inverted,
|
|
1623
|
+
.sd-1-4-1-prose--inverted p {
|
|
1619
1624
|
|
|
1620
1625
|
color: rgb(var(--sd-color-white, 255 255 255) / var(--tw-text-opacity, 1)) /* Inverted text color */;
|
|
1621
1626
|
}
|
|
1622
1627
|
|
|
1623
1628
|
/**
|
|
1624
1629
|
* Generates basic styles for media elements.
|
|
1625
|
-
* @name sd-1-
|
|
1630
|
+
* @name sd-1-4-1-media
|
|
1626
1631
|
* @status stable
|
|
1627
1632
|
* @since 2.5.0
|
|
1628
|
-
* @boolean sd-1-
|
|
1633
|
+
* @boolean sd-1-4-1-media--inverted Inverts the figcaption text.
|
|
1629
1634
|
*/
|
|
1630
1635
|
|
|
1631
|
-
.sd-1-
|
|
1632
|
-
figure.sd-1-
|
|
1636
|
+
.sd-1-4-1-prose figure,
|
|
1637
|
+
figure.sd-1-4-1-media {
|
|
1633
1638
|
margin: var(--sd-spacing-0, 0px) /* No spacing (manually added) */;
|
|
1634
1639
|
}
|
|
1635
1640
|
|
|
1636
|
-
.sd-1-
|
|
1641
|
+
.sd-1-4-1-prose figure figcaption, figure.sd-1-4-1-media figcaption {
|
|
1637
1642
|
|
|
1638
1643
|
color: rgb(var(--sd-color-neutral-700, 104 104 104) / var(--tw-text-opacity, 1)) /* Additional text color */;
|
|
1639
1644
|
}
|
|
1640
1645
|
|
|
1641
|
-
.sd-1-
|
|
1646
|
+
.sd-1-4-1-prose figure figcaption:last-child, figure.sd-1-4-1-media figcaption:last-child {
|
|
1642
1647
|
margin-top: var(--sd-spacing-3, 0.75rem) /* 12px */;
|
|
1643
1648
|
}
|
|
1644
1649
|
|
|
1645
|
-
.sd-1-
|
|
1650
|
+
.sd-1-4-1-prose--inverted figure figcaption, figure.sd-1-4-1-media--inverted figcaption {
|
|
1646
1651
|
|
|
1647
1652
|
color: rgb(var(--sd-color-primary-400, 153 171 208) / var(--tw-text-opacity, 1)) /* Additional text inverted color
|
|
1648
1653
|
Used for inverted pressed interaction text link */;
|
|
@@ -1650,18 +1655,18 @@ Used for inverted pressed interaction text link */;
|
|
|
1650
1655
|
|
|
1651
1656
|
/**
|
|
1652
1657
|
* A table cell is a single cell inside a table, used to display discrete data elements.
|
|
1653
|
-
* @name sd-1-
|
|
1658
|
+
* @name sd-1-4-1-table-cell
|
|
1654
1659
|
* @status stable
|
|
1655
1660
|
* @since 1.13
|
|
1656
|
-
* @boolean sd-1-
|
|
1657
|
-
* @variant { white | primary-100 | neutral-100 } sd-1-
|
|
1658
|
-
* @boolean sd-1-
|
|
1659
|
-
* @variant { top | left | right | bottom } sd-1-
|
|
1661
|
+
* @boolean sd-1-4-1-table-cell--divider Displays a divider to the right.
|
|
1662
|
+
* @variant { white | primary-100 | neutral-100 } sd-1-4-1-table-cell--bg-... Applies the selected background-color to the table cell. If not selected, a transparent background-color is used per default.
|
|
1663
|
+
* @boolean sd-1-4-1-table-cell--shadow-active Displays the table shadow.
|
|
1664
|
+
* @variant { top | left | right | bottom } sd-1-4-1-table-cell--shadow-... Applies the selected shadow to the table cell.
|
|
1660
1665
|
*/
|
|
1661
1666
|
|
|
1662
|
-
.sd-1-
|
|
1663
|
-
.sd-1-
|
|
1664
|
-
.sd-1-
|
|
1667
|
+
.sd-1-4-1-prose td,
|
|
1668
|
+
.sd-1-4-1-prose th,
|
|
1669
|
+
.sd-1-4-1-table-cell {
|
|
1665
1670
|
border-top-width: 1px;
|
|
1666
1671
|
border-bottom-width: 1px;
|
|
1667
1672
|
border-left-width: 0px;
|
|
@@ -1678,11 +1683,11 @@ Used for divider, teaser, container, ... */;
|
|
|
1678
1683
|
color: rgb(var(--sd-color-black, 24 24 24) / var(--tw-text-opacity, 1)) /* Default text color */;
|
|
1679
1684
|
}
|
|
1680
1685
|
|
|
1681
|
-
.sd-1-
|
|
1686
|
+
.sd-1-4-1-table-cell--divider {
|
|
1682
1687
|
border-right-width: 1px;
|
|
1683
1688
|
}
|
|
1684
1689
|
|
|
1685
|
-
.sd-1-
|
|
1690
|
+
.sd-1-4-1-table-cell--shadow-top:after, .sd-1-4-1-table-cell--shadow-bottom:after, .sd-1-4-1-table-cell--shadow-left:after, .sd-1-4-1-table-cell--shadow-right:after {
|
|
1686
1691
|
pointer-events: none;
|
|
1687
1692
|
position: absolute;
|
|
1688
1693
|
--tw-gradient-from: rgb(0 0 0 / var(--sd-opacity-10, 0.1)) var(--tw-gradient-from-position);
|
|
@@ -1697,7 +1702,7 @@ Used for divider, teaser, container, ... */;
|
|
|
1697
1702
|
content: var(--tw-content);
|
|
1698
1703
|
}
|
|
1699
1704
|
|
|
1700
|
-
.sd-1-
|
|
1705
|
+
.sd-1-4-1-table-cell--shadow-top:after, .sd-1-4-1-table-cell--shadow-bottom:after {
|
|
1701
1706
|
left: var(--sd-spacing-0, 0px) /* No spacing (manually added) */;
|
|
1702
1707
|
right: var(--sd-spacing-0, 0px) /* No spacing (manually added) */;
|
|
1703
1708
|
height: var(--sd-spacing-2-5, 0.625rem) /* 10px */;
|
|
@@ -1705,7 +1710,7 @@ Used for divider, teaser, container, ... */;
|
|
|
1705
1710
|
|
|
1706
1711
|
/* fix that shows line on top of table-cell */
|
|
1707
1712
|
|
|
1708
|
-
.sd-1-
|
|
1713
|
+
.sd-1-4-1-table-cell--shadow-top:before, .sd-1-4-1-table-cell--shadow-bottom:before {
|
|
1709
1714
|
position: absolute;
|
|
1710
1715
|
left: var(--sd-spacing-0, 0px) /* No spacing (manually added) */;
|
|
1711
1716
|
display: block;
|
|
@@ -1719,66 +1724,66 @@ Used for divider, teaser, container, ... */;
|
|
|
1719
1724
|
content: var(--tw-content);
|
|
1720
1725
|
}
|
|
1721
1726
|
|
|
1722
|
-
.sd-1-
|
|
1727
|
+
.sd-1-4-1-table-cell--shadow-left:after, .sd-1-4-1-table-cell--shadow-right:after {
|
|
1723
1728
|
top: var(--sd-spacing-0, 0px) /* No spacing (manually added) */;
|
|
1724
1729
|
bottom: var(--sd-spacing-0, 0px) /* No spacing (manually added) */;
|
|
1725
1730
|
width: var(--sd-spacing-2-5, 0.625rem) /* 10px */;
|
|
1726
1731
|
}
|
|
1727
1732
|
|
|
1728
|
-
.sd-1-
|
|
1733
|
+
.sd-1-4-1-table-cell.sd-1-4-1-table-cell--shadow-active:after {
|
|
1729
1734
|
opacity: 100%;
|
|
1730
1735
|
}
|
|
1731
1736
|
|
|
1732
|
-
.sd-1-
|
|
1737
|
+
.sd-1-4-1-table-cell--shadow-top:after {
|
|
1733
1738
|
top: -10px;
|
|
1734
1739
|
background-image: linear-gradient(to top, var(--tw-gradient-stops));
|
|
1735
1740
|
}
|
|
1736
1741
|
|
|
1737
1742
|
/* fix that shows line on top of table-cell */
|
|
1738
1743
|
|
|
1739
|
-
.sd-1-
|
|
1744
|
+
.sd-1-4-1-table-cell--shadow-top:before {
|
|
1740
1745
|
bottom: -1px;
|
|
1741
1746
|
}
|
|
1742
1747
|
|
|
1743
|
-
.sd-1-
|
|
1748
|
+
.sd-1-4-1-table-cell--shadow-bottom:after {
|
|
1744
1749
|
bottom: -10px;
|
|
1745
1750
|
background-image: linear-gradient(to bottom, var(--tw-gradient-stops));
|
|
1746
1751
|
}
|
|
1747
1752
|
|
|
1748
1753
|
/* fix that shows line on top of table-cell */
|
|
1749
1754
|
|
|
1750
|
-
.sd-1-
|
|
1755
|
+
.sd-1-4-1-table-cell--shadow-bottom:before {
|
|
1751
1756
|
top: -1px;
|
|
1752
1757
|
}
|
|
1753
1758
|
|
|
1754
|
-
.sd-1-
|
|
1759
|
+
.sd-1-4-1-table-cell--shadow-left:after {
|
|
1755
1760
|
left: -10px;
|
|
1756
1761
|
background-image: linear-gradient(to left, var(--tw-gradient-stops));
|
|
1757
1762
|
}
|
|
1758
1763
|
|
|
1759
|
-
.sd-1-
|
|
1764
|
+
.sd-1-4-1-table-cell--shadow-right:after {
|
|
1760
1765
|
right: -10px;
|
|
1761
1766
|
background-image: linear-gradient(to right, var(--tw-gradient-stops));
|
|
1762
1767
|
}
|
|
1763
1768
|
|
|
1764
|
-
.sd-1-
|
|
1769
|
+
.sd-1-4-1-table-cell--bg-white {
|
|
1765
1770
|
|
|
1766
1771
|
background-color: rgb(var(--sd-color-white, 255 255 255) / var(--tw-bg-opacity, 1)) /* Default background color (light mode)
Used for inverted button */;
|
|
1767
1772
|
}
|
|
1768
1773
|
|
|
1769
|
-
.sd-1-
|
|
1774
|
+
.sd-1-4-1-table-cell--bg-primary-100 {
|
|
1770
1775
|
|
|
1771
1776
|
background-color: rgb(var(--sd-color-primary-100, 236 240 249) / var(--tw-bg-opacity, 1)) /* Additional background color (light mode) */;
|
|
1772
1777
|
}
|
|
1773
1778
|
|
|
1774
|
-
.sd-1-
|
|
1779
|
+
.sd-1-4-1-table-cell--bg-neutral-100 {
|
|
1775
1780
|
|
|
1776
1781
|
background-color: rgb(var(--sd-color-neutral-100, 246 246 246) / var(--tw-bg-opacity, 1)) /* Additional background color (light mode) */;
|
|
1777
1782
|
}
|
|
1778
1783
|
|
|
1779
1784
|
/**
|
|
1780
1785
|
* A table is organized structured content, used for scanning, comparing, and analyzing the data.
|
|
1781
|
-
* @name sd-1-
|
|
1786
|
+
* @name sd-1-4-1-table
|
|
1782
1787
|
* @status stable
|
|
1783
1788
|
* @since 1.13
|
|
1784
1789
|
*/
|
|
@@ -1787,8 +1792,8 @@ Used for divider, teaser, container, ... */;
|
|
|
1787
1792
|
* Remove inherited styles from table before applying our styles.
|
|
1788
1793
|
*/
|
|
1789
1794
|
|
|
1790
|
-
.sd-1-
|
|
1791
|
-
.sd-1-
|
|
1795
|
+
.sd-1-4-1-table,
|
|
1796
|
+
.sd-1-4-1-prose table {
|
|
1792
1797
|
all: unset;
|
|
1793
1798
|
display: table;
|
|
1794
1799
|
border-collapse: collapse;
|
|
@@ -1797,13 +1802,13 @@ Used for divider, teaser, container, ... */;
|
|
|
1797
1802
|
border-spacing: var(--tw-border-spacing-x) var(--tw-border-spacing-y);
|
|
1798
1803
|
}
|
|
1799
1804
|
|
|
1800
|
-
.sd-1-
|
|
1805
|
+
.sd-1-4-1-table thead tr:first-of-type, .sd-1-4-1-table tfoot tr:first-of-type, .sd-1-4-1-prose table thead tr:first-of-type, .sd-1-4-1-prose table tfoot tr:first-of-type {
|
|
1801
1806
|
position: relative;
|
|
1802
1807
|
}
|
|
1803
1808
|
|
|
1804
1809
|
/* plop:style */
|
|
1805
1810
|
|
|
1806
|
-
.sd-1-
|
|
1811
|
+
.sd-1-4-1-prose {
|
|
1807
1812
|
/* Optimize for reading. */
|
|
1808
1813
|
max-width: 80ch;
|
|
1809
1814
|
text-align: left;
|
|
@@ -1811,67 +1816,67 @@ Used for divider, teaser, container, ... */;
|
|
|
1811
1816
|
|
|
1812
1817
|
/* Add default spacings */
|
|
1813
1818
|
|
|
1814
|
-
.sd-1-
|
|
1819
|
+
.sd-1-4-1-prose > *:not(:first-child) {
|
|
1815
1820
|
margin-top: var(--sd-spacing-4, 1rem) /* 16px */;
|
|
1816
1821
|
}
|
|
1817
1822
|
|
|
1818
1823
|
/* First element has no margin-top */
|
|
1819
1824
|
|
|
1820
|
-
.sd-1-
|
|
1825
|
+
.sd-1-4-1-prose > *:first-child {
|
|
1821
1826
|
margin-top: var(--sd-spacing-0, 0px) /* No spacing (manually added) */;
|
|
1822
1827
|
}
|
|
1823
1828
|
|
|
1824
1829
|
/* headings after a heading have a smaller margin-top */
|
|
1825
1830
|
|
|
1826
|
-
.sd-1-
|
|
1831
|
+
.sd-1-4-1-prose > :is(h1, h2, h3, h4, h5):not(#_) + :is(h1, h2, h3, h4, h5) {
|
|
1827
1832
|
/* :not(#_) is a hack to raise specifity, see https://stackoverflow.com/a/61781795 */
|
|
1828
1833
|
margin-top: var(--sd-spacing-2, 0.5rem) /* 8px */;
|
|
1829
1834
|
}
|
|
1830
1835
|
|
|
1831
1836
|
/* Headlines after other non-headlines have a larger margin-top */
|
|
1832
1837
|
|
|
1833
|
-
.sd-1-
|
|
1838
|
+
.sd-1-4-1-prose > *:not(:is(h1, h2, h3, h4, h5)) + :is(h1, h2, h3, h4, h5):not(#_) {
|
|
1834
1839
|
margin-top: var(--sd-spacing-8, 2rem) /* 32px */;
|
|
1835
1840
|
}
|
|
1836
1841
|
|
|
1837
1842
|
/* Images and figures lead to a bigger margin-top for the next element */
|
|
1838
1843
|
|
|
1839
|
-
.sd-1-
|
|
1840
|
-
.sd-1-
|
|
1844
|
+
.sd-1-4-1-prose > figure + *:not(#_),
|
|
1845
|
+
.sd-1-4-1-prose > img + *:not(#_) {
|
|
1841
1846
|
margin-top: var(--sd-spacing-6, 1.5rem) /* 24px */;
|
|
1842
1847
|
}
|
|
1843
1848
|
|
|
1844
1849
|
/* Add styles for elements that are not based on existing CSS styles */
|
|
1845
1850
|
|
|
1846
|
-
.sd-1-
|
|
1851
|
+
.sd-1-4-1-prose hr {
|
|
1847
1852
|
height: var(--sd-spacing-0, 0px) /* No spacing (manually added) */;
|
|
1848
1853
|
border-top-width: 1px;
|
|
1849
1854
|
--tw-border-opacity: 1;
|
|
1850
1855
|
border-color: rgb(var(--sd-color-neutral-500, 174 174 174) / var(--tw-border-opacity, 1)) /* Used for disabled state */;
|
|
1851
1856
|
}
|
|
1852
1857
|
|
|
1853
|
-
.sd-1-
|
|
1858
|
+
.sd-1-4-1-prose pre {
|
|
1854
1859
|
overflow: auto;
|
|
1855
1860
|
}
|
|
1856
1861
|
|
|
1857
|
-
.sd-1-
|
|
1858
|
-
.sd-1-
|
|
1862
|
+
.sd-1-4-1-prose blockquote,
|
|
1863
|
+
.sd-1-4-1-prose blockquote > * {
|
|
1859
1864
|
font-size: var(--sd-font-size-xl, 1.5rem) /* 24px */;
|
|
1860
1865
|
}
|
|
1861
1866
|
|
|
1862
|
-
.sd-1-
|
|
1867
|
+
.sd-1-4-1-prose blockquote:has(*) *:first-child::before, .sd-1-4-1-prose blockquote:not(:has(*))::before {
|
|
1863
1868
|
content: open-quote;
|
|
1864
1869
|
display: inline;
|
|
1865
1870
|
}
|
|
1866
1871
|
|
|
1867
|
-
.sd-1-
|
|
1872
|
+
.sd-1-4-1-prose blockquote:has(*) *:first-child::after, .sd-1-4-1-prose blockquote:not(:has(*))::after {
|
|
1868
1873
|
content: close-quote;
|
|
1869
1874
|
display: inline;
|
|
1870
1875
|
}
|
|
1871
1876
|
|
|
1872
1877
|
/* Fixes for other elements */
|
|
1873
1878
|
|
|
1874
|
-
.sd-1-
|
|
1879
|
+
.sd-1-4-1-prose > :is(ul, ol):not(#_) {
|
|
1875
1880
|
/* ul and ol have padding that has to be reset */
|
|
1876
1881
|
padding-top: var(--sd-spacing-0, 0px) /* No spacing (manually added) */;
|
|
1877
1882
|
padding-bottom: var(--sd-spacing-0, 0px) /* No spacing (manually added) */;
|
|
@@ -1879,18 +1884,18 @@ Used for divider, teaser, container, ... */;
|
|
|
1879
1884
|
|
|
1880
1885
|
/* Inverted styles */
|
|
1881
1886
|
|
|
1882
|
-
.sd-1-
|
|
1887
|
+
.sd-1-4-1-prose--inverted hr {
|
|
1883
1888
|
--tw-border-opacity: 1;
|
|
1884
1889
|
border-color: rgb(var(--sd-color-white, 255 255 255) / var(--tw-border-opacity, 1)) /* Used for buttons, inverted focus state */;
|
|
1885
1890
|
}
|
|
1886
1891
|
|
|
1887
|
-
.sd-1-
|
|
1892
|
+
.sd-1-4-1-prose--inverted pre {
|
|
1888
1893
|
|
|
1889
1894
|
color: rgb(var(--sd-color-white, 255 255 255) / var(--tw-text-opacity, 1)) /* Inverted text color */;
|
|
1890
1895
|
}
|
|
1891
1896
|
|
|
1892
1897
|
/* Full width styles */
|
|
1893
1898
|
|
|
1894
|
-
.sd-1-
|
|
1899
|
+
.sd-1-4-1-prose--full-width {
|
|
1895
1900
|
max-width: unset;
|
|
1896
1901
|
}
|