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