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