@solid-design-system/styles 1.5.1 → 1.5.2
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/interactive.css +1 -1
- package/cdn/modules/prose.css +1 -1
- package/cdn/solid-styles.css +1 -1
- package/cdn-versioned/modules/chip.css +1 -1
- package/cdn-versioned/modules/container.css +1 -1
- package/cdn-versioned/modules/copyright.css +1 -1
- package/cdn-versioned/modules/display.css +1 -1
- package/cdn-versioned/modules/flag.css +1 -1
- package/cdn-versioned/modules/footnotes.css +1 -1
- package/cdn-versioned/modules/headline.css +1 -1
- package/cdn-versioned/modules/hidden-links.css +1 -1
- package/cdn-versioned/modules/interactive.css +1 -1
- package/cdn-versioned/modules/leadtext.css +1 -1
- package/cdn-versioned/modules/list.css +1 -1
- package/cdn-versioned/modules/mark.css +1 -1
- package/cdn-versioned/modules/media.css +1 -1
- package/cdn-versioned/modules/meta.css +1 -1
- package/cdn-versioned/modules/pagination.css +1 -1
- package/cdn-versioned/modules/paragraph.css +1 -1
- package/cdn-versioned/modules/prose.css +1 -1
- package/cdn-versioned/modules/status-badge.css +1 -1
- package/cdn-versioned/modules/table-cell.css +1 -1
- package/cdn-versioned/modules/table.css +1 -1
- package/cdn-versioned/solid-styles.css +1 -1
- package/dist/modules/interactive.css +17 -2
- package/dist/modules/prose.css +17 -2
- package/dist/solid-styles.css +17 -2
- 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 +53 -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 +109 -109
- package/dist-versioned/modules/paragraph.css +8 -8
- package/dist-versioned/modules/prose.css +246 -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 +478 -463
- package/package.json +1 -1
|
@@ -1,12 +1,12 @@
|
|
|
1
1
|
/**
|
|
2
2
|
* Generates basic styles for chip elements.
|
|
3
|
-
* @name sd-1-5-
|
|
3
|
+
* @name sd-1-5-2-chip
|
|
4
4
|
* @status stable
|
|
5
5
|
* @since 1.30.0
|
|
6
|
-
* @variant { primary-300 | primary-500 | white } sd-1-5-
|
|
6
|
+
* @variant { primary-300 | primary-500 | white } sd-1-5-2-chip--...
|
|
7
7
|
*/
|
|
8
8
|
|
|
9
|
-
.sd-1-5-
|
|
9
|
+
.sd-1-5-2-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-5-
|
|
25
|
+
.sd-1-5-2-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-5-
|
|
32
|
+
.sd-1-5-2-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-5-
|
|
37
|
+
.sd-1-5-2-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-5-
|
|
44
|
+
* @name sd-1-5-2-container
|
|
45
45
|
* @status stable
|
|
46
46
|
* @since 1.30.0
|
|
47
|
-
* @variant { primary-100 | primary | border-neutral-400 | white } sd-1-5-
|
|
48
|
-
* @variant { sm } sd-1-5-
|
|
49
|
-
* @variant { top | right | bottom | left } sd-1-5-
|
|
47
|
+
* @variant { primary-100 | primary | border-neutral-400 | white } sd-1-5-2-container--variant-... Defines the background color and border of sd-1-5-2-container.
|
|
48
|
+
* @variant { sm } sd-1-5-2-container--padding-... Defines the padding of sd-1-5-2-container. This makes it adaptable to both small and large screens.
|
|
49
|
+
* @variant { top | right | bottom | left } sd-1-5-2-container--triangle-... Defines an optional triangle cut-out for sd-1-5-2-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-5-
|
|
52
|
+
.sd-1-5-2-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-5-
|
|
62
|
+
.sd-1-5-2-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-5-
|
|
67
|
+
.sd-1-5-2-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-5-
|
|
73
|
+
.sd-1-5-2-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-5-
|
|
83
|
+
.sd-1-5-2-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-5-
|
|
88
|
+
.sd-1-5-2-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-5-
|
|
95
|
+
.sd-1-5-2-container {
|
|
96
96
|
|
|
97
97
|
--triangle-background: white;
|
|
98
98
|
}
|
|
99
99
|
|
|
100
|
-
.sd-1-5-
|
|
101
|
-
.sd-1-5-
|
|
102
|
-
.sd-1-5-
|
|
103
|
-
.sd-1-5-
|
|
100
|
+
.sd-1-5-2-container--triangle-top::before,
|
|
101
|
+
.sd-1-5-2-container--triangle-right::before,
|
|
102
|
+
.sd-1-5-2-container--triangle-bottom::before,
|
|
103
|
+
.sd-1-5-2-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-5-
|
|
112
|
+
.sd-1-5-2-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-5-
|
|
118
|
+
.sd-1-5-2-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-5-
|
|
124
|
+
.sd-1-5-2-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-5-
|
|
130
|
+
.sd-1-5-2-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-5-
|
|
137
|
-
.sd-1-5-
|
|
138
|
-
.sd-1-5-
|
|
139
|
-
.sd-1-5-
|
|
140
|
-
.sd-1-5-
|
|
141
|
-
.sd-1-5-
|
|
142
|
-
.sd-1-5-
|
|
143
|
-
.sd-1-5-
|
|
136
|
+
.sd-1-5-2-container--triangle-top-border::after,
|
|
137
|
+
.sd-1-5-2-container--triangle-top-border::before,
|
|
138
|
+
.sd-1-5-2-container--triangle-right-border::after,
|
|
139
|
+
.sd-1-5-2-container--triangle-right-border::before,
|
|
140
|
+
.sd-1-5-2-container--triangle-bottom-border::after,
|
|
141
|
+
.sd-1-5-2-container--triangle-bottom-border::before,
|
|
142
|
+
.sd-1-5-2-container--triangle-left-border::after,
|
|
143
|
+
.sd-1-5-2-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-5-
|
|
151
|
+
.sd-1-5-2-container--triangle-top-border::after, .sd-1-5-2-container--triangle-right-border::after, .sd-1-5-2-container--triangle-bottom-border::after, .sd-1-5-2-container--triangle-left-border::after {
|
|
152
152
|
border-width: 14px;
|
|
153
153
|
}
|
|
154
154
|
|
|
155
|
-
.sd-1-5-
|
|
155
|
+
.sd-1-5-2-container--triangle-top-border::before, .sd-1-5-2-container--triangle-right-border::before, .sd-1-5-2-container--triangle-bottom-border::before, .sd-1-5-2-container--triangle-left-border::before {
|
|
156
156
|
border-width: 15px;
|
|
157
157
|
}
|
|
158
158
|
|
|
159
|
-
.sd-1-5-
|
|
160
|
-
.sd-1-5-
|
|
159
|
+
.sd-1-5-2-container--triangle-top-border::after,
|
|
160
|
+
.sd-1-5-2-container--triangle-top-border::before {
|
|
161
161
|
top: -1px;
|
|
162
162
|
}
|
|
163
163
|
|
|
164
|
-
.sd-1-5-
|
|
164
|
+
.sd-1-5-2-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-5-
|
|
171
|
+
.sd-1-5-2-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-5-
|
|
177
|
-
.sd-1-5-
|
|
176
|
+
.sd-1-5-2-container--triangle-right-border::after,
|
|
177
|
+
.sd-1-5-2-container--triangle-right-border::before {
|
|
178
178
|
right: -1px;
|
|
179
179
|
}
|
|
180
180
|
|
|
181
|
-
.sd-1-5-
|
|
181
|
+
.sd-1-5-2-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-5-
|
|
188
|
+
.sd-1-5-2-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-5-
|
|
194
|
-
.sd-1-5-
|
|
193
|
+
.sd-1-5-2-container--triangle-bottom-border::after,
|
|
194
|
+
.sd-1-5-2-container--triangle-bottom-border::before {
|
|
195
195
|
bottom: -1px;
|
|
196
196
|
}
|
|
197
197
|
|
|
198
|
-
.sd-1-5-
|
|
198
|
+
.sd-1-5-2-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-5-
|
|
205
|
+
.sd-1-5-2-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-5-
|
|
211
|
-
.sd-1-5-
|
|
210
|
+
.sd-1-5-2-container--triangle-left-border::after,
|
|
211
|
+
.sd-1-5-2-container--triangle-left-border::before {
|
|
212
212
|
left: -1px;
|
|
213
213
|
}
|
|
214
214
|
|
|
215
|
-
.sd-1-5-
|
|
215
|
+
.sd-1-5-2-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-5-
|
|
222
|
+
.sd-1-5-2-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-5-
|
|
229
|
+
* @name sd-1-5-2-copyright
|
|
230
230
|
* @status stable
|
|
231
231
|
* @since 2.5.0
|
|
232
|
-
* @variant { vertical } sd-1-5-
|
|
233
|
-
* @variant { black } sd-1-5-
|
|
234
|
-
* @boolean sd-1-5-
|
|
235
|
-
* @variant { top } sd-1-5-
|
|
232
|
+
* @variant { vertical } sd-1-5-2-copyright--orientation-... The copyright's orientation.
|
|
233
|
+
* @variant { black } sd-1-5-2-copyright--color-... The copyright's text color.
|
|
234
|
+
* @boolean sd-1-5-2-copyright--... Removes the shadow.
|
|
235
|
+
* @variant { top } sd-1-5-2-copyright--placement-... The copyright's placement.
|
|
236
236
|
*/
|
|
237
237
|
|
|
238
|
-
.sd-1-5-
|
|
238
|
+
.sd-1-5-2-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-5-
|
|
251
|
+
.sd-1-5-2-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-5-
|
|
267
|
+
.sd-1-5-2-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-5-
|
|
279
|
+
.sd-1-5-2-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-5-
|
|
285
|
+
.sd-1-5-2-copyright--no-shadow::after {
|
|
286
286
|
filter: drop-shadow(0 0 transparent);
|
|
287
287
|
}
|
|
288
288
|
|
|
289
|
-
.sd-1-5-
|
|
289
|
+
.sd-1-5-2-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-5-
|
|
302
|
+
* @name sd-1-5-2-flag
|
|
303
303
|
* @status stable
|
|
304
304
|
* @since 1.34.0
|
|
305
|
-
* @variant { neutral-300 | neutral-500 | white } sd-1-5-
|
|
305
|
+
* @variant { neutral-300 | neutral-500 | white } sd-1-5-2-flag--...
|
|
306
306
|
*/
|
|
307
307
|
|
|
308
|
-
.sd-1-5-
|
|
308
|
+
.sd-1-5-2-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-5-
|
|
323
|
+
.sd-1-5-2-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-5-
|
|
330
|
+
.sd-1-5-2-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-5-
|
|
335
|
+
.sd-1-5-2-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-5-
|
|
342
|
+
* @name sd-1-5-2-footnotes
|
|
343
343
|
* @status stable
|
|
344
344
|
* @since 3.0.0
|
|
345
|
-
* @boolean sd-1-5-
|
|
345
|
+
* @boolean sd-1-5-2-footnotes--inverted Inverts the footnote text.
|
|
346
346
|
*/
|
|
347
347
|
|
|
348
|
-
.sd-1-5-
|
|
348
|
+
.sd-1-5-2-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-5-
|
|
358
|
+
.sd-1-5-2-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-5-
|
|
363
|
+
.sd-1-5-2-footnotes:is(ol) {
|
|
364
364
|
padding-inline-start: var(--sd-spacing-8, 2rem) /* 32px */;
|
|
365
365
|
}
|
|
366
366
|
|
|
367
|
-
.sd-1-5-
|
|
367
|
+
.sd-1-5-2-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-5-
|
|
373
|
+
.sd-1-5-2-footnotes:is(ol) li .sd-1-5-2-footnotes--marker::before, .sd-1-5-2-footnotes:is(ol) li:has(.sd-1-5-2-footnotes--marker:nth-of-type(2))::before, .sd-1-5-2-footnotes:is(ol) li:not(:has(.sd-1-5-2-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-5-
|
|
384
|
+
.sd-1-5-2-footnotes:is(ol) li .sd-1-5-2-footnotes--marker::after, .sd-1-5-2-footnotes:is(ol) li:has(.sd-1-5-2-footnotes--marker:nth-of-type(2))::after, .sd-1-5-2-footnotes:is(ol) li:not(:has(.sd-1-5-2-footnotes--marker))::after {
|
|
385
385
|
content: none;
|
|
386
386
|
}
|
|
387
387
|
|
|
388
|
-
.sd-1-5-
|
|
388
|
+
.sd-1-5-2-footnotes:is(ol) li .sd-1-5-2-footnotes--marker .sd-1-5-2-footnotes--marker, .sd-1-5-2-footnotes:is(ol) li:has(.sd-1-5-2-footnotes--marker:nth-of-type(2)) .sd-1-5-2-footnotes--marker, .sd-1-5-2-footnotes:is(ol) li:not(:has(.sd-1-5-2-footnotes--marker)) .sd-1-5-2-footnotes--marker {
|
|
389
389
|
display: inline-block;
|
|
390
390
|
counter-increment: footnotes-multiple;
|
|
391
391
|
}
|
|
392
392
|
|
|
393
|
-
.sd-1-5-
|
|
393
|
+
.sd-1-5-2-footnotes:is(ol) li .sd-1-5-2-footnotes--marker .sd-1-5-2-footnotes--marker::before, .sd-1-5-2-footnotes:is(ol) li:has(.sd-1-5-2-footnotes--marker:nth-of-type(2)) .sd-1-5-2-footnotes--marker::before, .sd-1-5-2-footnotes:is(ol) li:not(:has(.sd-1-5-2-footnotes--marker)) .sd-1-5-2-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-5-
|
|
402
|
+
.sd-1-5-2-footnotes:is(ol) li .sd-1-5-2-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-5-
|
|
407
|
+
.sd-1-5-2-footnotes:is(ol) li .sd-1-5-2-footnotes--marker:focus-visible {
|
|
408
408
|
outline-width: 0px;
|
|
409
409
|
}
|
|
410
410
|
|
|
411
|
-
.sd-1-5-
|
|
411
|
+
.sd-1-5-2-footnotes:is(ol) li .sd-1-5-2-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-5-
|
|
419
|
+
.sd-1-5-2-footnotes:is(ul) {
|
|
420
420
|
list-style: '';
|
|
421
421
|
}
|
|
422
422
|
|
|
423
|
-
.sd-1-5-
|
|
423
|
+
.sd-1-5-2-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-5-
|
|
429
|
+
.sd-1-5-2-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-5-
|
|
434
|
+
.sd-1-5-2-footnotes--inverted .sd-1-5-2-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-5-
|
|
440
|
+
.sd-1-5-2-footnotes--inverted:is(.sd-1-5-2-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-5-
|
|
446
|
+
.sd-1-5-2-footnotes--inverted:is(.sd-1-5-2-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-5-
|
|
451
|
+
.sd-1-5-2-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-5-
|
|
461
|
+
.sd-1-5-2-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-5-
|
|
466
|
+
.sd-1-5-2-footnotes--marker::before {
|
|
467
467
|
content: '[ ';
|
|
468
468
|
display: inline-block;
|
|
469
469
|
}
|
|
470
470
|
|
|
471
|
-
.sd-1-5-
|
|
471
|
+
.sd-1-5-2-footnotes--marker::after {
|
|
472
472
|
content: ' ]';
|
|
473
473
|
display: inline-block;
|
|
474
474
|
}
|
|
475
475
|
|
|
476
|
-
.sd-1-5-
|
|
477
|
-
.sd-1-5-
|
|
476
|
+
.sd-1-5-2-footnotes--marker:link,
|
|
477
|
+
.sd-1-5-2-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-5-
|
|
482
|
+
.sd-1-5-2-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-5-
|
|
492
|
+
* @name sd-1-5-2-hidden-links
|
|
493
493
|
* @status stable
|
|
494
494
|
* @since 3.15.0
|
|
495
|
-
* @boolean sd-1-5-
|
|
496
|
-
* @boolean sd-1-5-
|
|
495
|
+
* @boolean sd-1-5-2-hidden-links--multiple Adapts styling for multiple skip links.
|
|
496
|
+
* @boolean sd-1-5-2-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-5-
|
|
507
|
+
.sd-1-5-2-hidden-links:not(:focus-within):not(.sd-1-5-2-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-5-
|
|
519
|
+
.sd-1-5-2-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-5-
|
|
525
|
+
.sd-1-5-2-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-5-
|
|
539
|
+
.sd-1-5-2-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-5-
|
|
550
|
+
* @name sd-1-5-2-mark
|
|
551
551
|
* @status stable
|
|
552
552
|
* @since 1.7
|
|
553
553
|
*/
|
|
554
554
|
|
|
555
|
-
mark.sd-1-5-
|
|
555
|
+
mark.sd-1-5-2-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-5-1-mark {
|
|
|
560
560
|
|
|
561
561
|
/**
|
|
562
562
|
* Meta information like file size, date, or whatever is needed.
|
|
563
|
-
* @name sd-1-5-
|
|
563
|
+
* @name sd-1-5-2-meta
|
|
564
564
|
* @status stable
|
|
565
565
|
* @since 1.7
|
|
566
|
-
* @variant { sm } sd-1-5-
|
|
567
|
-
* @boolean sd-1-5-
|
|
568
|
-
* @boolean sd-1-5-
|
|
569
|
-
* @boolean sd-1-5-
|
|
566
|
+
* @variant { sm } sd-1-5-2-meta--size-... The size. Small can be used as an alternative in tight spaces.
|
|
567
|
+
* @boolean sd-1-5-2-meta--inverted Inverts the meta element.
|
|
568
|
+
* @boolean sd-1-5-2-meta--pipe Adds a pipe right from the meta element.
|
|
569
|
+
* @boolean sd-1-5-2-meta--light Makes sd-1-5-2-meta light.
|
|
570
570
|
*/
|
|
571
571
|
|
|
572
|
-
.sd-1-5-
|
|
572
|
+
.sd-1-5-2-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,72 +577,72 @@ mark.sd-1-5-1-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-5-
|
|
580
|
+
.sd-1-5-2-meta--size-sm {
|
|
581
581
|
font-size: var(--sd-font-size-sm, 0.875rem) /* 14px */;
|
|
582
582
|
}
|
|
583
583
|
|
|
584
|
-
.sd-1-5-
|
|
584
|
+
.sd-1-5-2-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-5-
|
|
589
|
+
.sd-1-5-2-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-5-
|
|
594
|
+
.sd-1-5-2-meta--inverted.sd-1-5-2-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-5-
|
|
600
|
+
.sd-1-5-2-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-5-
|
|
606
|
+
.sd-1-5-2-meta--pipe.sd-1-5-2-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-5-
|
|
613
|
+
* @name sd-1-5-2-pagination
|
|
614
614
|
* @status stable
|
|
615
615
|
* @since 1.3
|
|
616
|
-
* @variant { simple } sd-1-5-
|
|
617
|
-
* @boolean sd-1-5-
|
|
616
|
+
* @variant { simple } sd-1-5-2-pagination--... The pagination format.
|
|
617
|
+
* @boolean sd-1-5-2-pagination--inverted Inverts the pagination style.
|
|
618
618
|
*/
|
|
619
619
|
|
|
620
|
-
.sd-1-5-
|
|
620
|
+
.sd-1-5-2-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-5-
|
|
627
|
+
.sd-1-5-2-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-5-
|
|
633
|
+
.sd-1-5-2-pagination ul li button {
|
|
634
634
|
all: unset;
|
|
635
635
|
border-width: 2px;
|
|
636
636
|
border-style: solid;
|
|
637
637
|
border-color: transparent;
|
|
638
638
|
}
|
|
639
639
|
|
|
640
|
-
.sd-1-5-
|
|
640
|
+
.sd-1-5-2-pagination ul li button:hover:not([disabled]) {
|
|
641
641
|
cursor: pointer;
|
|
642
642
|
}
|
|
643
643
|
|
|
644
|
-
.sd-1-5-
|
|
645
|
-
.sd-1-5-
|
|
644
|
+
.sd-1-5-2-pagination ul li a,
|
|
645
|
+
.sd-1-5-2-pagination ul li button {
|
|
646
646
|
display: flex;
|
|
647
647
|
align-items: center;
|
|
648
648
|
justify-content: center;
|
|
@@ -654,19 +654,19 @@ Used for inverted pressed interaction text link */;
|
|
|
654
654
|
transition-duration: 150ms;
|
|
655
655
|
}
|
|
656
656
|
|
|
657
|
-
.sd-1-5-
|
|
658
|
-
.sd-1-5-
|
|
657
|
+
.sd-1-5-2-pagination ul li a:hover:not([disabled]),
|
|
658
|
+
.sd-1-5-2-pagination ul li button:hover:not([disabled]) {
|
|
659
659
|
|
|
660
660
|
color: rgb(var(--sd-color-primary-500, 70 109 175) / var(--tw-text-opacity, 1)) /* Used for hover interaction */;
|
|
661
661
|
}
|
|
662
662
|
|
|
663
|
-
.sd-1-5-
|
|
664
|
-
.sd-1-5-
|
|
663
|
+
.sd-1-5-2-pagination ul li a:active:not([disabled]),
|
|
664
|
+
.sd-1-5-2-pagination ul li button:active:not([disabled]) {
|
|
665
665
|
|
|
666
666
|
color: rgb(var(--sd-color-primary-800, 5 21 48) / var(--tw-text-opacity, 1)) /* Used for pressed interaction */;
|
|
667
667
|
}
|
|
668
668
|
|
|
669
|
-
.sd-1-5-
|
|
669
|
+
.sd-1-5-2-pagination ul li a:focus-visible, .sd-1-5-2-pagination ul li button:focus-visible {
|
|
670
670
|
outline-style: solid;
|
|
671
671
|
outline-width: 2px;
|
|
672
672
|
outline-offset: 2px;
|
|
@@ -675,24 +675,24 @@ Used for inverted pressed interaction text link */;
|
|
|
675
675
|
|
|
676
676
|
/* Previous and Next */
|
|
677
677
|
|
|
678
|
-
.sd-1-5-
|
|
679
|
-
.sd-1-5-
|
|
678
|
+
.sd-1-5-2-pagination ul li:first-child,
|
|
679
|
+
.sd-1-5-2-pagination ul li:last-child {
|
|
680
680
|
height: var(--sd-spacing-12, 3rem) /* 48px */;
|
|
681
681
|
width: var(--sd-spacing-12, 3rem) /* 48px */;
|
|
682
682
|
font-size: var(--sd-font-size-xl, 1.5rem) /* 24px */;
|
|
683
683
|
}
|
|
684
684
|
|
|
685
|
-
.sd-1-5-
|
|
686
|
-
.sd-1-5-
|
|
687
|
-
.sd-1-5-
|
|
688
|
-
.sd-1-5-
|
|
685
|
+
.sd-1-5-2-pagination ul li:first-child a,
|
|
686
|
+
.sd-1-5-2-pagination ul li:first-child button,
|
|
687
|
+
.sd-1-5-2-pagination ul li:last-child a,
|
|
688
|
+
.sd-1-5-2-pagination ul li:last-child button {
|
|
689
689
|
height: 100%;
|
|
690
690
|
width: 100%;
|
|
691
691
|
}
|
|
692
692
|
|
|
693
693
|
/* Numbers */
|
|
694
694
|
|
|
695
|
-
.sd-1-5-
|
|
695
|
+
.sd-1-5-2-pagination ul li {
|
|
696
696
|
display: flex;
|
|
697
697
|
height: var(--sd-spacing-8, 2rem) /* 32px */;
|
|
698
698
|
width: var(--sd-spacing-8, 2rem) /* 32px */;
|
|
@@ -701,47 +701,47 @@ Used for inverted pressed interaction text link */;
|
|
|
701
701
|
text-align: center;
|
|
702
702
|
}
|
|
703
703
|
|
|
704
|
-
.sd-1-5-
|
|
705
|
-
.sd-1-5-
|
|
704
|
+
.sd-1-5-2-pagination ul li:not(:first-child):not(:last-child) a,
|
|
705
|
+
.sd-1-5-2-pagination ul li:not(:first-child):not(:last-child) button {
|
|
706
706
|
height: 100%;
|
|
707
707
|
width: 100%;
|
|
708
708
|
border-bottom-width: 2px;
|
|
709
709
|
border-bottom-color: transparent;
|
|
710
710
|
}
|
|
711
711
|
|
|
712
|
-
.sd-1-5-
|
|
712
|
+
.sd-1-5-2-pagination ul li:not(:first-child):not(:last-child) a[aria-current], .sd-1-5-2-pagination ul li:not(:first-child):not(:last-child) button[aria-current] {
|
|
713
713
|
--tw-border-opacity: 1;
|
|
714
714
|
border-bottom-color: rgb(var(--sd-color-accent, 45 157 0) / var(--tw-border-opacity, 1)) /* Used to highlight active/selected elements
|
|
715
715
|
*/;
|
|
716
716
|
}
|
|
717
717
|
|
|
718
|
-
.sd-1-5-
|
|
719
|
-
.sd-1-5-
|
|
718
|
+
.sd-1-5-2-pagination ul li a[aria-current],
|
|
719
|
+
.sd-1-5-2-pagination ul li button[aria-current] {
|
|
720
720
|
|
|
721
721
|
color: rgb(var(--sd-color-black, 24 24 24) / var(--tw-text-opacity, 1)) /* Default text color */;
|
|
722
722
|
}
|
|
723
723
|
|
|
724
|
-
.sd-1-5-
|
|
725
|
-
.sd-1-5-
|
|
724
|
+
.sd-1-5-2-pagination ul li a[aria-current]:hover:not([disabled]),
|
|
725
|
+
.sd-1-5-2-pagination ul li button[aria-current]:hover:not([disabled]) {
|
|
726
726
|
|
|
727
727
|
color: rgb(var(--sd-color-black, 24 24 24) / var(--tw-text-opacity, 1)) /* Default text color */;
|
|
728
728
|
}
|
|
729
729
|
|
|
730
730
|
/* Previous and next arrow when it has no href */
|
|
731
731
|
|
|
732
|
-
.sd-1-5-
|
|
733
|
-
.sd-1-5-
|
|
734
|
-
.sd-1-5-
|
|
735
|
-
.sd-1-5-
|
|
732
|
+
.sd-1-5-2-pagination ul li:first-child:has(a:not([href])) a,
|
|
733
|
+
.sd-1-5-2-pagination ul li:last-child:has(a:not([href])) a,
|
|
734
|
+
.sd-1-5-2-pagination ul li:first-child:has(button[disabled]) button,
|
|
735
|
+
.sd-1-5-2-pagination ul li:last-child:has(button[disabled]) button {
|
|
736
736
|
cursor: not-allowed;
|
|
737
737
|
|
|
738
738
|
color: rgb(var(--sd-color-neutral-500, 174 174 174) / var(--tw-text-opacity, 1)) /* Used for disabled state */;
|
|
739
739
|
}
|
|
740
740
|
|
|
741
|
-
.sd-1-5-
|
|
742
|
-
.sd-1-5-
|
|
743
|
-
.sd-1-5-
|
|
744
|
-
.sd-1-5-
|
|
741
|
+
.sd-1-5-2-pagination ul li:first-child:has(a:not([href])) a:hover:not([disabled]),
|
|
742
|
+
.sd-1-5-2-pagination ul li:last-child:has(a:not([href])) a:hover:not([disabled]),
|
|
743
|
+
.sd-1-5-2-pagination ul li:first-child:has(button[disabled]) button:hover:not([disabled]),
|
|
744
|
+
.sd-1-5-2-pagination ul li:last-child:has(button[disabled]) button:hover:not([disabled]) {
|
|
745
745
|
|
|
746
746
|
color: rgb(var(--sd-color-neutral-500, 174 174 174) / var(--tw-text-opacity, 1)) /* Used for disabled state */;
|
|
747
747
|
}
|
|
@@ -750,66 +750,66 @@ Used for inverted pressed interaction text link */;
|
|
|
750
750
|
|
|
751
751
|
/* Number which is not current */
|
|
752
752
|
|
|
753
|
-
.sd-1-5-
|
|
753
|
+
.sd-1-5-2-pagination:not(.sd-1-5-2-pagination--simple) ul li:not(:first-child):not(:last-child):not(:has(a[aria-current], button[aria-current])) {
|
|
754
754
|
pointer-events: none;
|
|
755
755
|
position: absolute;
|
|
756
756
|
}
|
|
757
757
|
|
|
758
|
-
.sd-1-5-
|
|
759
|
-
.sd-1-5-
|
|
758
|
+
.sd-1-5-2-pagination:not(.sd-1-5-2-pagination--simple) ul li:not(:first-child):not(:last-child):not(:has(a[aria-current], button[aria-current])) a,
|
|
759
|
+
.sd-1-5-2-pagination:not(.sd-1-5-2-pagination--simple) ul li:not(:first-child):not(:last-child):not(:has(a[aria-current], button[aria-current])) button {
|
|
760
760
|
display: none;
|
|
761
761
|
}
|
|
762
762
|
|
|
763
763
|
/* Apply ellipsis to (n + 2 && n - 1) */
|
|
764
764
|
|
|
765
|
-
.sd-1-5-
|
|
765
|
+
.sd-1-5-2-pagination:not(.sd-1-5-2-pagination--simple) ul li:not(:first-child):not(:last-child):has(+ li + li a[aria-current], + li + li button[aria-current]), .sd-1-5-2-pagination:not(.sd-1-5-2-pagination--simple) ul li:not(:first-child):not(:last-child):has(a[aria-current], button[aria-current]) + li + li:not(:last-child) {
|
|
766
766
|
pointer-events: auto !important;
|
|
767
767
|
position: relative !important;
|
|
768
768
|
}
|
|
769
769
|
|
|
770
|
-
.sd-1-5-
|
|
770
|
+
.sd-1-5-2-pagination:not(.sd-1-5-2-pagination--simple) ul li:not(:first-child):not(:last-child):has(+ li + li a[aria-current], + li + li button[aria-current])::after, .sd-1-5-2-pagination:not(.sd-1-5-2-pagination--simple) ul li:not(:first-child):not(:last-child):has(a[aria-current], button[aria-current]) + li + li:not(:last-child)::after {
|
|
771
771
|
--tw-content: '...';
|
|
772
772
|
content: var(--tw-content);
|
|
773
773
|
}
|
|
774
774
|
|
|
775
|
-
.sd-1-5-
|
|
776
|
-
.sd-1-5-
|
|
777
|
-
.sd-1-5-
|
|
775
|
+
.sd-1-5-2-pagination:not(.sd-1-5-2-pagination--simple) ul li:not(:first-child):not(:last-child):nth-child(2),
|
|
776
|
+
.sd-1-5-2-pagination:not(.sd-1-5-2-pagination--simple) ul li:not(:first-child):not(:last-child):nth-last-child(2),
|
|
777
|
+
.sd-1-5-2-pagination:not(.sd-1-5-2-pagination--simple) ul li:not(:first-child):not(:last-child):has(
|
|
778
778
|
+ li a[aria-current],
|
|
779
779
|
+ li button[aria-current]),
|
|
780
|
-
.sd-1-5-
|
|
780
|
+
.sd-1-5-2-pagination:not(.sd-1-5-2-pagination--simple) ul li:not(:first-child):not(:last-child):has(
|
|
781
781
|
a[aria-current],
|
|
782
782
|
button[aria-current]) + li {
|
|
783
783
|
pointer-events: auto !important;
|
|
784
784
|
position: relative !important;
|
|
785
785
|
}
|
|
786
786
|
|
|
787
|
-
.sd-1-5-
|
|
788
|
-
.sd-1-5-
|
|
789
|
-
.sd-1-5-
|
|
787
|
+
.sd-1-5-2-pagination:not(.sd-1-5-2-pagination--simple) ul li:not(:first-child):not(:last-child):nth-child(2)::after,
|
|
788
|
+
.sd-1-5-2-pagination:not(.sd-1-5-2-pagination--simple) ul li:not(:first-child):not(:last-child):nth-last-child(2)::after,
|
|
789
|
+
.sd-1-5-2-pagination:not(.sd-1-5-2-pagination--simple) ul li:not(:first-child):not(:last-child):has(
|
|
790
790
|
+ li a[aria-current],
|
|
791
791
|
+ li button[aria-current])::after,
|
|
792
|
-
.sd-1-5-
|
|
792
|
+
.sd-1-5-2-pagination:not(.sd-1-5-2-pagination--simple) ul li:not(:first-child):not(:last-child):has(
|
|
793
793
|
a[aria-current],
|
|
794
794
|
button[aria-current]) + li::after {
|
|
795
795
|
content: var(--tw-content) !important;
|
|
796
796
|
display: none !important;
|
|
797
797
|
}
|
|
798
798
|
|
|
799
|
-
.sd-1-5-
|
|
800
|
-
.sd-1-5-
|
|
801
|
-
.sd-1-5-
|
|
802
|
-
.sd-1-5-
|
|
803
|
-
.sd-1-5-
|
|
799
|
+
.sd-1-5-2-pagination:not(.sd-1-5-2-pagination--simple) ul li:not(:first-child):not(:last-child):nth-child(2) a,
|
|
800
|
+
.sd-1-5-2-pagination:not(.sd-1-5-2-pagination--simple) ul li:not(:first-child):not(:last-child):nth-child(2) button,
|
|
801
|
+
.sd-1-5-2-pagination:not(.sd-1-5-2-pagination--simple) ul li:not(:first-child):not(:last-child):nth-last-child(2) a,
|
|
802
|
+
.sd-1-5-2-pagination:not(.sd-1-5-2-pagination--simple) ul li:not(:first-child):not(:last-child):nth-last-child(2) button,
|
|
803
|
+
.sd-1-5-2-pagination:not(.sd-1-5-2-pagination--simple) ul li:not(:first-child):not(:last-child):has(
|
|
804
804
|
+ li a[aria-current],
|
|
805
805
|
+ li button[aria-current]) a,
|
|
806
|
-
.sd-1-5-
|
|
806
|
+
.sd-1-5-2-pagination:not(.sd-1-5-2-pagination--simple) ul li:not(:first-child):not(:last-child):has(
|
|
807
807
|
+ li a[aria-current],
|
|
808
808
|
+ li button[aria-current]) button,
|
|
809
|
-
.sd-1-5-
|
|
809
|
+
.sd-1-5-2-pagination:not(.sd-1-5-2-pagination--simple) ul li:not(:first-child):not(:last-child):has(
|
|
810
810
|
a[aria-current],
|
|
811
811
|
button[aria-current]) + li a,
|
|
812
|
-
.sd-1-5-
|
|
812
|
+
.sd-1-5-2-pagination:not(.sd-1-5-2-pagination--simple) ul li:not(:first-child):not(:last-child):has(
|
|
813
813
|
a[aria-current],
|
|
814
814
|
button[aria-current]) + li button {
|
|
815
815
|
display: flex !important;
|
|
@@ -819,70 +819,70 @@ Used for inverted pressed interaction text link */;
|
|
|
819
819
|
|
|
820
820
|
/* Show until the 5th page (forward) */
|
|
821
821
|
|
|
822
|
-
.sd-1-5-
|
|
822
|
+
.sd-1-5-2-pagination:not(.sd-1-5-2-pagination--simple) ul li:not(:first-child):not(:last-child):nth-child(-n + 6):has(a[aria-current], button[aria-current]) ~ :nth-child(-n + 6) {
|
|
823
823
|
pointer-events: auto;
|
|
824
824
|
position: relative;
|
|
825
825
|
}
|
|
826
826
|
|
|
827
|
-
.sd-1-5-
|
|
827
|
+
.sd-1-5-2-pagination:not(.sd-1-5-2-pagination--simple) ul li:not(:first-child):not(:last-child):nth-child(-n + 6):has(a[aria-current], button[aria-current]) ~ :nth-child(-n + 6)::after {
|
|
828
828
|
content: var(--tw-content);
|
|
829
829
|
display: none;
|
|
830
830
|
}
|
|
831
831
|
|
|
832
|
-
.sd-1-5-
|
|
833
|
-
.sd-1-5-
|
|
832
|
+
.sd-1-5-2-pagination:not(.sd-1-5-2-pagination--simple) ul li:not(:first-child):not(:last-child):nth-child(-n + 6):has(a[aria-current], button[aria-current]) ~ :nth-child(-n + 6) a,
|
|
833
|
+
.sd-1-5-2-pagination:not(.sd-1-5-2-pagination--simple) ul li:not(:first-child):not(:last-child):nth-child(-n + 6):has(a[aria-current], button[aria-current]) ~ :nth-child(-n + 6) button {
|
|
834
834
|
display: flex;
|
|
835
835
|
}
|
|
836
836
|
|
|
837
837
|
/* Show ellipsis on the 6th */
|
|
838
838
|
|
|
839
|
-
.sd-1-5-
|
|
839
|
+
.sd-1-5-2-pagination:not(.sd-1-5-2-pagination--simple) ul li:not(:first-child):not(:last-child):nth-child(-n + 6):has(a[aria-current], button[aria-current]) ~ :nth-child(6):not(:last-child) + li {
|
|
840
840
|
pointer-events: none;
|
|
841
841
|
position: relative;
|
|
842
842
|
}
|
|
843
843
|
|
|
844
|
-
.sd-1-5-
|
|
844
|
+
.sd-1-5-2-pagination:not(.sd-1-5-2-pagination--simple) ul li:not(:first-child):not(:last-child):nth-child(-n + 6):has(a[aria-current], button[aria-current]) ~ :nth-child(6):not(:last-child) + li::after {
|
|
845
845
|
--tw-content: '...';
|
|
846
846
|
content: var(--tw-content);
|
|
847
847
|
}
|
|
848
848
|
|
|
849
849
|
/* When one of the first 4 pages is selected, show until the 5th page (backward) */
|
|
850
850
|
|
|
851
|
-
.sd-1-5-
|
|
851
|
+
.sd-1-5-2-pagination:not(.sd-1-5-2-pagination--simple) ul li:not(:first-child):not(:last-child):nth-child(-n + 6):has(~ :nth-child(-n + 5) a[aria-current], ~ :nth-child(-n + 5) button[aria-current]) {
|
|
852
852
|
pointer-events: auto;
|
|
853
853
|
position: relative;
|
|
854
854
|
}
|
|
855
855
|
|
|
856
|
-
.sd-1-5-
|
|
856
|
+
.sd-1-5-2-pagination:not(.sd-1-5-2-pagination--simple) ul li:not(:first-child):not(:last-child):nth-child(-n + 6):has(~ :nth-child(-n + 5) a[aria-current], ~ :nth-child(-n + 5) button[aria-current])::after {
|
|
857
857
|
content: var(--tw-content);
|
|
858
858
|
display: none;
|
|
859
859
|
}
|
|
860
860
|
|
|
861
|
-
.sd-1-5-
|
|
862
|
-
.sd-1-5-
|
|
861
|
+
.sd-1-5-2-pagination:not(.sd-1-5-2-pagination--simple) ul li:not(:first-child):not(:last-child):nth-child(-n + 6):has(~ :nth-child(-n + 5) a[aria-current], ~ :nth-child(-n + 5) button[aria-current]) a,
|
|
862
|
+
.sd-1-5-2-pagination:not(.sd-1-5-2-pagination--simple) ul li:not(:first-child):not(:last-child):nth-child(-n + 6):has(~ :nth-child(-n + 5) a[aria-current], ~ :nth-child(-n + 5) button[aria-current]) button {
|
|
863
863
|
display: flex;
|
|
864
864
|
}
|
|
865
865
|
|
|
866
866
|
/* When one of the last 4 pages is selected, show the last 4 pages (forward) */
|
|
867
867
|
|
|
868
|
-
.sd-1-5-
|
|
868
|
+
.sd-1-5-2-pagination:not(.sd-1-5-2-pagination--simple) ul li:not(:first-child):not(:last-child):nth-last-child(-n + 5):has(a[aria-current], button[aria-current]) ~ :nth-last-child(-n + 5):not(:first-child):not(:last-child) {
|
|
869
869
|
pointer-events: auto;
|
|
870
870
|
position: relative;
|
|
871
871
|
}
|
|
872
872
|
|
|
873
|
-
.sd-1-5-
|
|
873
|
+
.sd-1-5-2-pagination:not(.sd-1-5-2-pagination--simple) ul li:not(:first-child):not(:last-child):nth-last-child(-n + 5):has(a[aria-current], button[aria-current]) ~ :nth-last-child(-n + 5):not(:first-child):not(:last-child)::after {
|
|
874
874
|
content: var(--tw-content);
|
|
875
875
|
display: none;
|
|
876
876
|
}
|
|
877
877
|
|
|
878
|
-
.sd-1-5-
|
|
879
|
-
.sd-1-5-
|
|
878
|
+
.sd-1-5-2-pagination:not(.sd-1-5-2-pagination--simple) ul li:not(:first-child):not(:last-child):nth-last-child(-n + 5):has(a[aria-current], button[aria-current]) ~ :nth-last-child(-n + 5):not(:first-child):not(:last-child) a,
|
|
879
|
+
.sd-1-5-2-pagination:not(.sd-1-5-2-pagination--simple) ul li:not(:first-child):not(:last-child):nth-last-child(-n + 5):has(a[aria-current], button[aria-current]) ~ :nth-last-child(-n + 5):not(:first-child):not(:last-child) button {
|
|
880
880
|
display: flex;
|
|
881
881
|
}
|
|
882
882
|
|
|
883
883
|
/* When one of the last 4 pages is selected, show the last 4 pages (backward) */
|
|
884
884
|
|
|
885
|
-
.sd-1-5-
|
|
885
|
+
.sd-1-5-2-pagination:not(.sd-1-5-2-pagination--simple) ul li:not(:first-child):not(:last-child):nth-last-child(-n + 6):has(
|
|
886
886
|
~ :nth-last-child(-n + 5) a[aria-current],
|
|
887
887
|
~ :nth-last-child(-n + 5) button[aria-current]
|
|
888
888
|
) {
|
|
@@ -890,7 +890,7 @@ Used for inverted pressed interaction text link */;
|
|
|
890
890
|
position: relative;
|
|
891
891
|
}
|
|
892
892
|
|
|
893
|
-
.sd-1-5-
|
|
893
|
+
.sd-1-5-2-pagination:not(.sd-1-5-2-pagination--simple) ul li:not(:first-child):not(:last-child):nth-last-child(-n + 6):has(
|
|
894
894
|
~ :nth-last-child(-n + 5) a[aria-current],
|
|
895
895
|
~ :nth-last-child(-n + 5) button[aria-current]
|
|
896
896
|
)::after {
|
|
@@ -898,11 +898,11 @@ Used for inverted pressed interaction text link */;
|
|
|
898
898
|
display: none;
|
|
899
899
|
}
|
|
900
900
|
|
|
901
|
-
.sd-1-5-
|
|
901
|
+
.sd-1-5-2-pagination:not(.sd-1-5-2-pagination--simple) ul li:not(:first-child):not(:last-child):nth-last-child(-n + 6):has(
|
|
902
902
|
~ :nth-last-child(-n + 5) a[aria-current],
|
|
903
903
|
~ :nth-last-child(-n + 5) button[aria-current]
|
|
904
904
|
) a,
|
|
905
|
-
.sd-1-5-
|
|
905
|
+
.sd-1-5-2-pagination:not(.sd-1-5-2-pagination--simple) ul li:not(:first-child):not(:last-child):nth-last-child(-n + 6):has(
|
|
906
906
|
~ :nth-last-child(-n + 5) a[aria-current],
|
|
907
907
|
~ :nth-last-child(-n + 5) button[aria-current]
|
|
908
908
|
) button {
|
|
@@ -911,7 +911,7 @@ Used for inverted pressed interaction text link */;
|
|
|
911
911
|
|
|
912
912
|
/* Show ellipsis on the 6th to last */
|
|
913
913
|
|
|
914
|
-
.sd-1-5-
|
|
914
|
+
.sd-1-5-2-pagination:not(.sd-1-5-2-pagination--simple) ul li:not(:first-child):not(:last-child):nth-last-child(7):has(
|
|
915
915
|
~ :nth-last-child(-n + 5) a[aria-current],
|
|
916
916
|
~ :nth-last-child(-n + 5) button[aria-current]
|
|
917
917
|
) {
|
|
@@ -919,7 +919,7 @@ Used for inverted pressed interaction text link */;
|
|
|
919
919
|
position: relative;
|
|
920
920
|
}
|
|
921
921
|
|
|
922
|
-
.sd-1-5-
|
|
922
|
+
.sd-1-5-2-pagination:not(.sd-1-5-2-pagination--simple) ul li:not(:first-child):not(:last-child):nth-last-child(7):has(
|
|
923
923
|
~ :nth-last-child(-n + 5) a[aria-current],
|
|
924
924
|
~ :nth-last-child(-n + 5) button[aria-current]
|
|
925
925
|
)::after {
|
|
@@ -929,22 +929,22 @@ Used for inverted pressed interaction text link */;
|
|
|
929
929
|
|
|
930
930
|
/* When it only has 5 numbers + 2 prev & next buttons */
|
|
931
931
|
|
|
932
|
-
.sd-1-5-
|
|
932
|
+
.sd-1-5-2-pagination:not(.sd-1-5-2-pagination--simple) ul:has(> li:last-child:nth-child(-n + 9)) li {
|
|
933
933
|
pointer-events: auto;
|
|
934
934
|
position: relative;
|
|
935
935
|
}
|
|
936
936
|
|
|
937
|
-
.sd-1-5-
|
|
937
|
+
.sd-1-5-2-pagination:not(.sd-1-5-2-pagination--simple) ul:has(> li:last-child:nth-child(-n + 9)) li::after {
|
|
938
938
|
content: var(--tw-content);
|
|
939
939
|
display: none;
|
|
940
940
|
}
|
|
941
941
|
|
|
942
|
-
.sd-1-5-
|
|
943
|
-
.sd-1-5-
|
|
942
|
+
.sd-1-5-2-pagination:not(.sd-1-5-2-pagination--simple) ul:has(> li:last-child:nth-child(-n + 9)) li a,
|
|
943
|
+
.sd-1-5-2-pagination:not(.sd-1-5-2-pagination--simple) ul:has(> li:last-child:nth-child(-n + 9)) li button {
|
|
944
944
|
display: flex;
|
|
945
945
|
}
|
|
946
946
|
|
|
947
|
-
.sd-1-5-
|
|
947
|
+
.sd-1-5-2-pagination--simple ul li:nth-child(2) {
|
|
948
948
|
position: relative;
|
|
949
949
|
margin-inline-end: var(--sd-spacing-5, 1.25rem) /* 20px */;
|
|
950
950
|
width: var(--sd-spacing-8, 2rem) /* 32px */;
|
|
@@ -954,7 +954,7 @@ Used for inverted pressed interaction text link */;
|
|
|
954
954
|
*/;
|
|
955
955
|
}
|
|
956
956
|
|
|
957
|
-
.sd-1-5-
|
|
957
|
+
.sd-1-5-2-pagination--simple ul li:nth-child(2)::after {
|
|
958
958
|
position: absolute;
|
|
959
959
|
right: -18px;
|
|
960
960
|
--tw-scale-y: 1.5;
|
|
@@ -963,73 +963,73 @@ Used for inverted pressed interaction text link */;
|
|
|
963
963
|
content: var(--tw-content);
|
|
964
964
|
}
|
|
965
965
|
|
|
966
|
-
.sd-1-5-
|
|
966
|
+
.sd-1-5-2-pagination--simple ul li:nth-child(2) {
|
|
967
967
|
|
|
968
968
|
border-bottom-style: solid;
|
|
969
969
|
}
|
|
970
970
|
|
|
971
|
-
.sd-1-5-
|
|
971
|
+
.sd-1-5-2-pagination--simple ul li:nth-last-child(2) {
|
|
972
972
|
border-bottom-width: 2px;
|
|
973
973
|
border-bottom-color: transparent;
|
|
974
974
|
}
|
|
975
975
|
|
|
976
|
-
.sd-1-5-
|
|
976
|
+
.sd-1-5-2-pagination--inverted ul li::after {
|
|
977
977
|
content: var(--tw-content);
|
|
978
978
|
|
|
979
979
|
color: rgb(var(--sd-color-white, 255 255 255) / var(--tw-text-opacity, 1)) /* Inverted text color */;
|
|
980
980
|
}
|
|
981
981
|
|
|
982
|
-
.sd-1-5-
|
|
983
|
-
.sd-1-5-
|
|
984
|
-
.sd-1-5-
|
|
985
|
-
.sd-1-5-
|
|
982
|
+
.sd-1-5-2-pagination--inverted ul li:first-child:has(a:not([href])) a,
|
|
983
|
+
.sd-1-5-2-pagination--inverted ul li:last-child:has(a:not([href])) a,
|
|
984
|
+
.sd-1-5-2-pagination--inverted ul li:first-child:has(button[disabled]) button,
|
|
985
|
+
.sd-1-5-2-pagination--inverted ul li:last-child:has(button[disabled]) button {
|
|
986
986
|
|
|
987
987
|
color: rgb(var(--sd-color-neutral-600, 136 136 136) / var(--tw-text-opacity, 1)) /* Used for inverted disabled state */;
|
|
988
988
|
}
|
|
989
989
|
|
|
990
|
-
.sd-1-5-
|
|
991
|
-
.sd-1-5-
|
|
992
|
-
.sd-1-5-
|
|
993
|
-
.sd-1-5-
|
|
990
|
+
.sd-1-5-2-pagination--inverted ul li:first-child:has(a:not([href])) a:hover:not([disabled]),
|
|
991
|
+
.sd-1-5-2-pagination--inverted ul li:last-child:has(a:not([href])) a:hover:not([disabled]),
|
|
992
|
+
.sd-1-5-2-pagination--inverted ul li:first-child:has(button[disabled]) button:hover:not([disabled]),
|
|
993
|
+
.sd-1-5-2-pagination--inverted ul li:last-child:has(button[disabled]) button:hover:not([disabled]) {
|
|
994
994
|
|
|
995
995
|
color: rgb(var(--sd-color-neutral-600, 136 136 136) / var(--tw-text-opacity, 1)) /* Used for inverted disabled state */;
|
|
996
996
|
}
|
|
997
997
|
|
|
998
|
-
.sd-1-5-
|
|
999
|
-
.sd-1-5-
|
|
1000
|
-
.sd-1-5-
|
|
1001
|
-
.sd-1-5-
|
|
998
|
+
.sd-1-5-2-pagination--inverted ul li a,
|
|
999
|
+
.sd-1-5-2-pagination--inverted ul li a[aria-current],
|
|
1000
|
+
.sd-1-5-2-pagination--inverted ul li button,
|
|
1001
|
+
.sd-1-5-2-pagination--inverted ul li button[aria-current] {
|
|
1002
1002
|
|
|
1003
1003
|
color: rgb(var(--sd-color-white, 255 255 255) / var(--tw-text-opacity, 1)) /* Inverted text color */;
|
|
1004
1004
|
}
|
|
1005
1005
|
|
|
1006
|
-
.sd-1-5-
|
|
1007
|
-
.sd-1-5-
|
|
1008
|
-
.sd-1-5-
|
|
1009
|
-
.sd-1-5-
|
|
1006
|
+
.sd-1-5-2-pagination--inverted ul li a:hover:not([disabled]),
|
|
1007
|
+
.sd-1-5-2-pagination--inverted ul li a[aria-current]:hover:not([disabled]),
|
|
1008
|
+
.sd-1-5-2-pagination--inverted ul li button:hover:not([disabled]),
|
|
1009
|
+
.sd-1-5-2-pagination--inverted ul li button[aria-current]:hover:not([disabled]) {
|
|
1010
1010
|
|
|
1011
1011
|
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 */;
|
|
1012
1012
|
}
|
|
1013
1013
|
|
|
1014
|
-
.sd-1-5-
|
|
1015
|
-
.sd-1-5-
|
|
1016
|
-
.sd-1-5-
|
|
1017
|
-
.sd-1-5-
|
|
1014
|
+
.sd-1-5-2-pagination--inverted ul li a:active:not([disabled]),
|
|
1015
|
+
.sd-1-5-2-pagination--inverted ul li a[aria-current]:active:not([disabled]),
|
|
1016
|
+
.sd-1-5-2-pagination--inverted ul li button:active:not([disabled]),
|
|
1017
|
+
.sd-1-5-2-pagination--inverted ul li button[aria-current]:active:not([disabled]) {
|
|
1018
1018
|
|
|
1019
1019
|
color: rgb(var(--sd-color-primary-400, 153 171 208) / var(--tw-text-opacity, 1)) /* Additional text inverted color
|
|
1020
1020
|
Used for inverted pressed interaction text link */;
|
|
1021
1021
|
}
|
|
1022
1022
|
|
|
1023
|
-
.sd-1-5-
|
|
1023
|
+
.sd-1-5-2-pagination--inverted ul li a:focus-visible, .sd-1-5-2-pagination--inverted ul li a[aria-current]:focus-visible, .sd-1-5-2-pagination--inverted ul li button:focus-visible, .sd-1-5-2-pagination--inverted ul li button[aria-current]:focus-visible {
|
|
1024
1024
|
outline-color: rgb(var(--sd-color-white, 255 255 255) / 1) /* Used for buttons, inverted focus state */;
|
|
1025
1025
|
}
|
|
1026
1026
|
|
|
1027
|
-
.sd-1-5-
|
|
1027
|
+
.sd-1-5-2-pagination--inverted.sd-1-5-2-pagination--simple ul li {
|
|
1028
1028
|
|
|
1029
1029
|
color: rgb(var(--sd-color-white, 255 255 255) / var(--tw-text-opacity, 1)) /* Inverted text color */;
|
|
1030
1030
|
}
|
|
1031
1031
|
|
|
1032
|
-
.sd-1-5-
|
|
1032
|
+
.sd-1-5-2-pagination--inverted.sd-1-5-2-pagination--simple ul li::after {
|
|
1033
1033
|
content: var(--tw-content);
|
|
1034
1034
|
|
|
1035
1035
|
color: rgb(var(--sd-color-white, 255 255 255) / var(--tw-text-opacity, 1)) /* Inverted text color */;
|
|
@@ -1037,18 +1037,18 @@ Used for inverted pressed interaction text link */;
|
|
|
1037
1037
|
|
|
1038
1038
|
/**
|
|
1039
1039
|
* Description of the style.
|
|
1040
|
-
* @name sd-1-5-
|
|
1040
|
+
* @name sd-1-5-2-status-badge
|
|
1041
1041
|
* @status stable
|
|
1042
1042
|
* @since 1.0
|
|
1043
|
-
* @variant { sucess | warning | error | info } sd-1-5-
|
|
1043
|
+
* @variant { sucess | warning | error | info } sd-1-5-2-status-badge--...
|
|
1044
1044
|
*/
|
|
1045
1045
|
|
|
1046
|
-
.sd-1-5-
|
|
1046
|
+
.sd-1-5-2-status-badge {
|
|
1047
1047
|
display: inline-flex;
|
|
1048
1048
|
align-items: center;
|
|
1049
1049
|
}
|
|
1050
1050
|
|
|
1051
|
-
.sd-1-5-
|
|
1051
|
+
.sd-1-5-2-status-badge sd-icon {
|
|
1052
1052
|
margin-right: var(--sd-spacing-2, 0.5rem) /* 8px */;
|
|
1053
1053
|
display: flex;
|
|
1054
1054
|
height: var(--sd-spacing-3, 0.75rem) /* 12px */;
|
|
@@ -1059,22 +1059,22 @@ Used for inverted pressed interaction text link */;
|
|
|
1059
1059
|
color: rgb(var(--sd-color-white, 255 255 255) / var(--tw-text-opacity, 1)) /* Inverted text color */ !important;
|
|
1060
1060
|
}
|
|
1061
1061
|
|
|
1062
|
-
.sd-1-5-
|
|
1062
|
+
.sd-1-5-2-status-badge--success sd-icon {
|
|
1063
1063
|
|
|
1064
1064
|
background-color: rgb(var(--sd-color-success, 37 136 14) / var(--tw-bg-opacity, 1)) /* Used for success messages */;
|
|
1065
1065
|
}
|
|
1066
1066
|
|
|
1067
|
-
.sd-1-5-
|
|
1067
|
+
.sd-1-5-2-status-badge--warning sd-icon {
|
|
1068
1068
|
|
|
1069
1069
|
background-color: rgb(var(--sd-color-warning, 187 141 32) / var(--tw-bg-opacity, 1)) /* Used for notifications */;
|
|
1070
1070
|
}
|
|
1071
1071
|
|
|
1072
|
-
.sd-1-5-
|
|
1072
|
+
.sd-1-5-2-status-badge--error sd-icon {
|
|
1073
1073
|
|
|
1074
1074
|
background-color: rgb(var(--sd-color-error, 204 25 55) / var(--tw-bg-opacity, 1)) /* Used for notification, status-badge */;
|
|
1075
1075
|
}
|
|
1076
1076
|
|
|
1077
|
-
.sd-1-5-
|
|
1077
|
+
.sd-1-5-2-status-badge--info sd-icon {
|
|
1078
1078
|
|
|
1079
1079
|
background-color: rgb(var(--sd-color-info, 21 130 213) / var(--tw-bg-opacity, 1)) /* Used for notification, status-badge */;
|
|
1080
1080
|
}
|
|
@@ -1083,23 +1083,23 @@ Used for inverted pressed interaction text link */;
|
|
|
1083
1083
|
|
|
1084
1084
|
/**
|
|
1085
1085
|
* Prose
|
|
1086
|
-
* @name sd-1-5-
|
|
1086
|
+
* @name sd-1-5-2-prose
|
|
1087
1087
|
* @status stable
|
|
1088
1088
|
* @since 3.6.0
|
|
1089
|
-
* @boolean sd-1-5-
|
|
1090
|
-
* @boolean sd-1-5-
|
|
1089
|
+
* @boolean sd-1-5-2-prose--inverted Inverts the content, but not tables.
|
|
1090
|
+
* @boolean sd-1-5-2-prose--full-width Overrides the 80ch max-width and makes the prose full width.
|
|
1091
1091
|
*/
|
|
1092
1092
|
|
|
1093
1093
|
/**
|
|
1094
1094
|
* 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.
|
|
1095
|
-
* @name sd-1-5-
|
|
1095
|
+
* @name sd-1-5-2-display
|
|
1096
1096
|
* @status stable
|
|
1097
1097
|
* @since 1.7
|
|
1098
|
-
* @variant { xl | 3xl } sd-1-5-
|
|
1099
|
-
* @boolean sd-1-5-
|
|
1098
|
+
* @variant { xl | 3xl } sd-1-5-2-display--size-... The display's size.
|
|
1099
|
+
* @boolean sd-1-5-2-display--inverted Inverts the display text.
|
|
1100
1100
|
*/
|
|
1101
1101
|
|
|
1102
|
-
.sd-1-5-
|
|
1102
|
+
.sd-1-5-2-display {
|
|
1103
1103
|
font-size: var(--sd-font-size-3xl, 2rem) /* 32px */;
|
|
1104
1104
|
font-weight: 400;
|
|
1105
1105
|
line-height: var(--sd-line-height-tight, 120%) /* Used for display and large titles */;
|
|
@@ -1109,12 +1109,12 @@ Used for inverted pressed interaction text link */;
|
|
|
1109
1109
|
|
|
1110
1110
|
@media (min-width: 1024px) {
|
|
1111
1111
|
|
|
1112
|
-
.sd-1-5-
|
|
1112
|
+
.sd-1-5-2-display {
|
|
1113
1113
|
font-size: var(--sd-font-size-4xl, 2.5rem) /* 40px */;
|
|
1114
1114
|
}
|
|
1115
1115
|
}
|
|
1116
1116
|
|
|
1117
|
-
.sd-1-5-
|
|
1117
|
+
.sd-1-5-2-display--size-xl {
|
|
1118
1118
|
font-size: var(--sd-font-size-xl, 1.5rem) /* 24px */;
|
|
1119
1119
|
font-weight: 400;
|
|
1120
1120
|
line-height: var(--sd-line-height-tight, 120%) /* Used for display and large titles */;
|
|
@@ -1122,7 +1122,7 @@ Used for inverted pressed interaction text link */;
|
|
|
1122
1122
|
color: rgb(var(--sd-color-black, 24 24 24) / var(--tw-text-opacity, 1)) /* Default text color */;
|
|
1123
1123
|
}
|
|
1124
1124
|
|
|
1125
|
-
.sd-1-5-
|
|
1125
|
+
.sd-1-5-2-display--size-3xl {
|
|
1126
1126
|
font-size: var(--sd-font-size-2xl, 1.75rem) /* 28px */;
|
|
1127
1127
|
font-weight: 400;
|
|
1128
1128
|
line-height: var(--sd-line-height-tight, 120%) /* Used for display and large titles */;
|
|
@@ -1132,35 +1132,35 @@ Used for inverted pressed interaction text link */;
|
|
|
1132
1132
|
|
|
1133
1133
|
@media (min-width: 1024px) {
|
|
1134
1134
|
|
|
1135
|
-
.sd-1-5-
|
|
1135
|
+
.sd-1-5-2-display--size-3xl {
|
|
1136
1136
|
font-size: var(--sd-font-size-3xl, 2rem) /* 32px */;
|
|
1137
1137
|
}
|
|
1138
1138
|
}
|
|
1139
1139
|
|
|
1140
|
-
.sd-1-5-
|
|
1140
|
+
.sd-1-5-2-display--inverted {
|
|
1141
1141
|
|
|
1142
1142
|
color: rgb(var(--sd-color-white, 255 255 255) / var(--tw-text-opacity, 1)) /* Inverted text color */;
|
|
1143
1143
|
}
|
|
1144
1144
|
|
|
1145
1145
|
/**
|
|
1146
1146
|
* 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.
|
|
1147
|
-
* @name sd-1-5-
|
|
1147
|
+
* @name sd-1-5-2-headline
|
|
1148
1148
|
* @status stable
|
|
1149
1149
|
* @since 1.16
|
|
1150
|
-
* @variant { 3xl | xl | lg | base } sd-1-5-
|
|
1151
|
-
* @boolean sd-1-5-
|
|
1152
|
-
* @boolean sd-1-5-
|
|
1150
|
+
* @variant { 3xl | xl | lg | base } sd-1-5-2-headline--size-... The headline's size.
|
|
1151
|
+
* @boolean sd-1-5-2-headline--inverted Inverts the headline text.
|
|
1152
|
+
* @boolean sd-1-5-2-headline--inline Sets inline behavior. Used exclusively when an sd-icon or other component is present. See usage <a href="#inline">here.</a>
|
|
1153
1153
|
*/
|
|
1154
1154
|
|
|
1155
|
-
.sd-1-5-
|
|
1156
|
-
.sd-1-5-
|
|
1155
|
+
.sd-1-5-2-headline,
|
|
1156
|
+
.sd-1-5-2-prose :is(h1, h2, h3, h4, h5) {
|
|
1157
1157
|
display: flex;
|
|
1158
1158
|
font-weight: 700;
|
|
1159
1159
|
|
|
1160
1160
|
color: rgb(var(--sd-color-primary, 0 53 142) / var(--tw-text-opacity, 1)) /* Primary brand color for text */;
|
|
1161
1161
|
}
|
|
1162
1162
|
|
|
1163
|
-
.sd-1-5-
|
|
1163
|
+
.sd-1-5-2-headline sd-icon, .sd-1-5-2-prose :is(h1, h2, h3, h4, h5) sd-icon {
|
|
1164
1164
|
flex-shrink: 0;
|
|
1165
1165
|
font-size: 3rem;
|
|
1166
1166
|
|
|
@@ -1169,15 +1169,15 @@ Used for inverted pressed interaction text link */;
|
|
|
1169
1169
|
|
|
1170
1170
|
@media (min-width: 640px) {
|
|
1171
1171
|
|
|
1172
|
-
.sd-1-5-
|
|
1172
|
+
.sd-1-5-2-headline sd-icon, .sd-1-5-2-prose :is(h1, h2, h3, h4, h5) sd-icon {
|
|
1173
1173
|
margin-top: var(--sd-spacing-2, 0.5rem) /* 8px */;
|
|
1174
1174
|
}
|
|
1175
1175
|
}
|
|
1176
1176
|
|
|
1177
|
-
.sd-1-5-
|
|
1178
|
-
.sd-1-5-
|
|
1179
|
-
.sd-1-5-
|
|
1180
|
-
.sd-1-5-
|
|
1177
|
+
.sd-1-5-2-headline.sd-1-5-2-headline,
|
|
1178
|
+
.sd-1-5-2-headline:is(h1):not(.sd-1-5-2-headline),
|
|
1179
|
+
.sd-1-5-2-prose :is(h1, h2, h3, h4, h5).sd-1-5-2-headline,
|
|
1180
|
+
.sd-1-5-2-prose :is(h1, h2, h3, h4, h5):is(h1):not(.sd-1-5-2-headline) {
|
|
1181
1181
|
gap: var(--sd-spacing-4, 1rem) /* 16px */;
|
|
1182
1182
|
font-size: var(--sd-font-size-3xl, 2rem) /* 32px */;
|
|
1183
1183
|
line-height: var(--sd-line-height-tight, 120%) /* Used for display and large titles */;
|
|
@@ -1185,29 +1185,29 @@ Used for inverted pressed interaction text link */;
|
|
|
1185
1185
|
|
|
1186
1186
|
@media (min-width: 640px) {
|
|
1187
1187
|
|
|
1188
|
-
.sd-1-5-
|
|
1189
|
-
.sd-1-5-
|
|
1190
|
-
.sd-1-5-
|
|
1191
|
-
.sd-1-5-
|
|
1188
|
+
.sd-1-5-2-headline.sd-1-5-2-headline,
|
|
1189
|
+
.sd-1-5-2-headline:is(h1):not(.sd-1-5-2-headline),
|
|
1190
|
+
.sd-1-5-2-prose :is(h1, h2, h3, h4, h5).sd-1-5-2-headline,
|
|
1191
|
+
.sd-1-5-2-prose :is(h1, h2, h3, h4, h5):is(h1):not(.sd-1-5-2-headline) {
|
|
1192
1192
|
font-size: var(--sd-font-size-4xl, 2.5rem) /* 40px */;
|
|
1193
1193
|
}
|
|
1194
1194
|
}
|
|
1195
1195
|
|
|
1196
|
-
.sd-1-5-
|
|
1196
|
+
.sd-1-5-2-headline.sd-1-5-2-headline sd-icon, .sd-1-5-2-headline:is(h1):not(.sd-1-5-2-headline) sd-icon, .sd-1-5-2-prose :is(h1, h2, h3, h4, h5).sd-1-5-2-headline sd-icon, .sd-1-5-2-prose :is(h1, h2, h3, h4, h5):is(h1):not(.sd-1-5-2-headline) sd-icon {
|
|
1197
1197
|
margin-top: calc(var(--sd-spacing-1, 0.25rem) /* 4px */ * -1);
|
|
1198
1198
|
}
|
|
1199
1199
|
|
|
1200
1200
|
@media (min-width: 640px) {
|
|
1201
1201
|
|
|
1202
|
-
.sd-1-5-
|
|
1202
|
+
.sd-1-5-2-headline.sd-1-5-2-headline sd-icon, .sd-1-5-2-headline:is(h1):not(.sd-1-5-2-headline) sd-icon, .sd-1-5-2-prose :is(h1, h2, h3, h4, h5).sd-1-5-2-headline sd-icon, .sd-1-5-2-prose :is(h1, h2, h3, h4, h5):is(h1):not(.sd-1-5-2-headline) sd-icon {
|
|
1203
1203
|
margin-top: var(--sd-spacing-0, 0px) /* No spacing (manually added) */;
|
|
1204
1204
|
}
|
|
1205
1205
|
}
|
|
1206
1206
|
|
|
1207
|
-
.sd-1-5-
|
|
1208
|
-
.sd-1-5-
|
|
1209
|
-
.sd-1-5-
|
|
1210
|
-
.sd-1-5-
|
|
1207
|
+
.sd-1-5-2-headline.sd-1-5-2-headline--size-3xl,
|
|
1208
|
+
.sd-1-5-2-headline:is(h2):not(.sd-1-5-2-headline),
|
|
1209
|
+
.sd-1-5-2-prose :is(h1, h2, h3, h4, h5).sd-1-5-2-headline--size-3xl,
|
|
1210
|
+
.sd-1-5-2-prose :is(h1, h2, h3, h4, h5):is(h2):not(.sd-1-5-2-headline) {
|
|
1211
1211
|
gap: var(--sd-spacing-4, 1rem) /* 16px */;
|
|
1212
1212
|
font-size: var(--sd-font-size-2xl, 1.75rem) /* 28px */;
|
|
1213
1213
|
line-height: var(--sd-line-height-tight, 120%) /* Used for display and large titles */;
|
|
@@ -1215,144 +1215,144 @@ Used for inverted pressed interaction text link */;
|
|
|
1215
1215
|
|
|
1216
1216
|
@media (min-width: 640px) {
|
|
1217
1217
|
|
|
1218
|
-
.sd-1-5-
|
|
1219
|
-
.sd-1-5-
|
|
1220
|
-
.sd-1-5-
|
|
1221
|
-
.sd-1-5-
|
|
1218
|
+
.sd-1-5-2-headline.sd-1-5-2-headline--size-3xl,
|
|
1219
|
+
.sd-1-5-2-headline:is(h2):not(.sd-1-5-2-headline),
|
|
1220
|
+
.sd-1-5-2-prose :is(h1, h2, h3, h4, h5).sd-1-5-2-headline--size-3xl,
|
|
1221
|
+
.sd-1-5-2-prose :is(h1, h2, h3, h4, h5):is(h2):not(.sd-1-5-2-headline) {
|
|
1222
1222
|
font-size: var(--sd-font-size-3xl, 2rem) /* 32px */;
|
|
1223
1223
|
}
|
|
1224
1224
|
}
|
|
1225
1225
|
|
|
1226
|
-
.sd-1-5-
|
|
1226
|
+
.sd-1-5-2-headline.sd-1-5-2-headline--size-3xl sd-icon, .sd-1-5-2-headline:is(h2):not(.sd-1-5-2-headline) sd-icon, .sd-1-5-2-prose :is(h1, h2, h3, h4, h5).sd-1-5-2-headline--size-3xl sd-icon, .sd-1-5-2-prose :is(h1, h2, h3, h4, h5):is(h2):not(.sd-1-5-2-headline) sd-icon {
|
|
1227
1227
|
margin-top: calc(var(--sd-spacing-1, 0.25rem) /* 4px */ * -1);
|
|
1228
1228
|
}
|
|
1229
1229
|
|
|
1230
1230
|
@media (min-width: 640px) {
|
|
1231
1231
|
|
|
1232
|
-
.sd-1-5-
|
|
1232
|
+
.sd-1-5-2-headline.sd-1-5-2-headline--size-3xl sd-icon, .sd-1-5-2-headline:is(h2):not(.sd-1-5-2-headline) sd-icon, .sd-1-5-2-prose :is(h1, h2, h3, h4, h5).sd-1-5-2-headline--size-3xl sd-icon, .sd-1-5-2-prose :is(h1, h2, h3, h4, h5):is(h2):not(.sd-1-5-2-headline) sd-icon {
|
|
1233
1233
|
margin-top: var(--sd-spacing-0, 0px) /* No spacing (manually added) */;
|
|
1234
1234
|
}
|
|
1235
1235
|
}
|
|
1236
1236
|
|
|
1237
|
-
.sd-1-5-
|
|
1238
|
-
.sd-1-5-
|
|
1239
|
-
.sd-1-5-
|
|
1240
|
-
.sd-1-5-
|
|
1241
|
-
.sd-1-5-
|
|
1242
|
-
.sd-1-5-
|
|
1243
|
-
.sd-1-5-
|
|
1244
|
-
.sd-1-5-
|
|
1237
|
+
.sd-1-5-2-headline.sd-1-5-2-headline--size-xl,
|
|
1238
|
+
.sd-1-5-2-headline.sd-1-5-2-headline--size-lg,
|
|
1239
|
+
.sd-1-5-2-headline.sd-1-5-2-headline--size-base,
|
|
1240
|
+
.sd-1-5-2-headline:is(h3, h4, h5):not(.sd-1-5-2-headline),
|
|
1241
|
+
.sd-1-5-2-prose :is(h1, h2, h3, h4, h5).sd-1-5-2-headline--size-xl,
|
|
1242
|
+
.sd-1-5-2-prose :is(h1, h2, h3, h4, h5).sd-1-5-2-headline--size-lg,
|
|
1243
|
+
.sd-1-5-2-prose :is(h1, h2, h3, h4, h5).sd-1-5-2-headline--size-base,
|
|
1244
|
+
.sd-1-5-2-prose :is(h1, h2, h3, h4, h5):is(h3, h4, h5):not(.sd-1-5-2-headline) {
|
|
1245
1245
|
gap: var(--sd-spacing-2, 0.5rem) /* 8px */;
|
|
1246
1246
|
|
|
1247
1247
|
color: rgb(var(--sd-color-black, 24 24 24) / var(--tw-text-opacity, 1)) /* Default text color */;
|
|
1248
1248
|
}
|
|
1249
1249
|
|
|
1250
|
-
.sd-1-5-
|
|
1250
|
+
.sd-1-5-2-headline.sd-1-5-2-headline--size-xl sd-icon, .sd-1-5-2-headline.sd-1-5-2-headline--size-lg sd-icon, .sd-1-5-2-headline.sd-1-5-2-headline--size-base sd-icon, .sd-1-5-2-headline:is(h3, h4, h5):not(.sd-1-5-2-headline) sd-icon, .sd-1-5-2-prose :is(h1, h2, h3, h4, h5).sd-1-5-2-headline--size-xl sd-icon, .sd-1-5-2-prose :is(h1, h2, h3, h4, h5).sd-1-5-2-headline--size-lg sd-icon, .sd-1-5-2-prose :is(h1, h2, h3, h4, h5).sd-1-5-2-headline--size-base sd-icon, .sd-1-5-2-prose :is(h1, h2, h3, h4, h5):is(h3, h4, h5):not(.sd-1-5-2-headline) sd-icon {
|
|
1251
1251
|
font-size: 2rem;
|
|
1252
1252
|
}
|
|
1253
1253
|
|
|
1254
|
-
.sd-1-5-
|
|
1255
|
-
.sd-1-5-
|
|
1256
|
-
.sd-1-5-
|
|
1257
|
-
.sd-1-5-
|
|
1254
|
+
.sd-1-5-2-headline.sd-1-5-2-headline--size-xl,
|
|
1255
|
+
.sd-1-5-2-headline:is(h3):not(.sd-1-5-2-headline),
|
|
1256
|
+
.sd-1-5-2-prose :is(h1, h2, h3, h4, h5).sd-1-5-2-headline--size-xl,
|
|
1257
|
+
.sd-1-5-2-prose :is(h1, h2, h3, h4, h5):is(h3):not(.sd-1-5-2-headline) {
|
|
1258
1258
|
font-size: var(--sd-font-size-xl, 1.5rem) /* 24px */;
|
|
1259
1259
|
}
|
|
1260
1260
|
|
|
1261
|
-
.sd-1-5-
|
|
1261
|
+
.sd-1-5-2-headline.sd-1-5-2-headline--size-xl sd-icon, .sd-1-5-2-headline:is(h3):not(.sd-1-5-2-headline) sd-icon, .sd-1-5-2-prose :is(h1, h2, h3, h4, h5).sd-1-5-2-headline--size-xl sd-icon, .sd-1-5-2-prose :is(h1, h2, h3, h4, h5):is(h3):not(.sd-1-5-2-headline) sd-icon {
|
|
1262
1262
|
margin-top: var(--sd-spacing-0-5, 0.125rem) /* 2px */;
|
|
1263
1263
|
}
|
|
1264
1264
|
|
|
1265
1265
|
@media (min-width: 640px) {
|
|
1266
1266
|
|
|
1267
|
-
.sd-1-5-
|
|
1267
|
+
.sd-1-5-2-headline.sd-1-5-2-headline--size-xl sd-icon, .sd-1-5-2-headline:is(h3):not(.sd-1-5-2-headline) sd-icon, .sd-1-5-2-prose :is(h1, h2, h3, h4, h5).sd-1-5-2-headline--size-xl sd-icon, .sd-1-5-2-prose :is(h1, h2, h3, h4, h5):is(h3):not(.sd-1-5-2-headline) sd-icon {
|
|
1268
1268
|
margin-top: var(--sd-spacing-0-5, 0.125rem) /* 2px */;
|
|
1269
1269
|
}
|
|
1270
1270
|
}
|
|
1271
1271
|
|
|
1272
|
-
.sd-1-5-
|
|
1273
|
-
.sd-1-5-
|
|
1274
|
-
.sd-1-5-
|
|
1275
|
-
.sd-1-5-
|
|
1276
|
-
.sd-1-5-
|
|
1277
|
-
.sd-1-5-
|
|
1272
|
+
.sd-1-5-2-headline.sd-1-5-2-headline--size-lg,
|
|
1273
|
+
.sd-1-5-2-headline.sd-1-5-2-headline--size-base,
|
|
1274
|
+
.sd-1-5-2-headline:is(h4, h5):not(.sd-1-5-2-headline),
|
|
1275
|
+
.sd-1-5-2-prose :is(h1, h2, h3, h4, h5).sd-1-5-2-headline--size-lg,
|
|
1276
|
+
.sd-1-5-2-prose :is(h1, h2, h3, h4, h5).sd-1-5-2-headline--size-base,
|
|
1277
|
+
.sd-1-5-2-prose :is(h1, h2, h3, h4, h5):is(h4, h5):not(.sd-1-5-2-headline) {
|
|
1278
1278
|
line-height: var(--sd-line-height-normal, 150%) /* Used for body copy and smaller titles */;
|
|
1279
1279
|
}
|
|
1280
1280
|
|
|
1281
|
-
.sd-1-5-
|
|
1282
|
-
.sd-1-5-
|
|
1283
|
-
.sd-1-5-
|
|
1284
|
-
.sd-1-5-
|
|
1281
|
+
.sd-1-5-2-headline.sd-1-5-2-headline--size-lg,
|
|
1282
|
+
.sd-1-5-2-headline:is(h4),
|
|
1283
|
+
.sd-1-5-2-prose :is(h1, h2, h3, h4, h5).sd-1-5-2-headline--size-lg,
|
|
1284
|
+
.sd-1-5-2-prose :is(h1, h2, h3, h4, h5):is(h4) {
|
|
1285
1285
|
font-size: var(--sd-font-size-lg, 1.25rem) /* 20px */;
|
|
1286
1286
|
}
|
|
1287
1287
|
|
|
1288
|
-
.sd-1-5-
|
|
1288
|
+
.sd-1-5-2-headline.sd-1-5-2-headline--size-lg sd-icon, .sd-1-5-2-headline:is(h4) sd-icon, .sd-1-5-2-prose :is(h1, h2, h3, h4, h5).sd-1-5-2-headline--size-lg sd-icon, .sd-1-5-2-prose :is(h1, h2, h3, h4, h5):is(h4) sd-icon {
|
|
1289
1289
|
margin-top: var(--sd-spacing-0, 0px) /* No spacing (manually added) */;
|
|
1290
1290
|
}
|
|
1291
1291
|
|
|
1292
1292
|
@media (min-width: 640px) {
|
|
1293
1293
|
|
|
1294
|
-
.sd-1-5-
|
|
1294
|
+
.sd-1-5-2-headline.sd-1-5-2-headline--size-lg sd-icon, .sd-1-5-2-headline:is(h4) sd-icon, .sd-1-5-2-prose :is(h1, h2, h3, h4, h5).sd-1-5-2-headline--size-lg sd-icon, .sd-1-5-2-prose :is(h1, h2, h3, h4, h5):is(h4) sd-icon {
|
|
1295
1295
|
margin-top: var(--sd-spacing-0, 0px) /* No spacing (manually added) */;
|
|
1296
1296
|
}
|
|
1297
1297
|
}
|
|
1298
1298
|
|
|
1299
|
-
.sd-1-5-
|
|
1300
|
-
.sd-1-5-
|
|
1301
|
-
.sd-1-5-
|
|
1302
|
-
.sd-1-5-
|
|
1299
|
+
.sd-1-5-2-headline.sd-1-5-2-headline--size-base,
|
|
1300
|
+
.sd-1-5-2-headline:is(h5):not(.sd-1-5-2-headline),
|
|
1301
|
+
.sd-1-5-2-prose :is(h1, h2, h3, h4, h5).sd-1-5-2-headline--size-base,
|
|
1302
|
+
.sd-1-5-2-prose :is(h1, h2, h3, h4, h5):is(h5):not(.sd-1-5-2-headline) {
|
|
1303
1303
|
font-size: var(--sd-font-size-base, 1rem) /* 16px */;
|
|
1304
1304
|
}
|
|
1305
1305
|
|
|
1306
|
-
.sd-1-5-
|
|
1306
|
+
.sd-1-5-2-headline.sd-1-5-2-headline--size-base sd-icon, .sd-1-5-2-headline:is(h5):not(.sd-1-5-2-headline) sd-icon, .sd-1-5-2-prose :is(h1, h2, h3, h4, h5).sd-1-5-2-headline--size-base sd-icon, .sd-1-5-2-prose :is(h1, h2, h3, h4, h5):is(h5):not(.sd-1-5-2-headline) sd-icon {
|
|
1307
1307
|
margin-top: calc(var(--sd-spacing-1, 0.25rem) /* 4px */ * -1);
|
|
1308
1308
|
}
|
|
1309
1309
|
|
|
1310
|
-
.sd-1-5-
|
|
1310
|
+
.sd-1-5-2-headline.sd-1-5-2-headline--size-base mark, .sd-1-5-2-headline:is(h5):not(.sd-1-5-2-headline) mark, .sd-1-5-2-prose :is(h1, h2, h3, h4, h5).sd-1-5-2-headline--size-base mark, .sd-1-5-2-prose :is(h1, h2, h3, h4, h5):is(h5):not(.sd-1-5-2-headline) mark {
|
|
1311
1311
|
color: inherit;
|
|
1312
1312
|
}
|
|
1313
1313
|
|
|
1314
|
-
.sd-1-5-
|
|
1314
|
+
.sd-1-5-2-headline--inline {
|
|
1315
1315
|
display: inline-block;
|
|
1316
1316
|
}
|
|
1317
1317
|
|
|
1318
|
-
.sd-1-5-
|
|
1318
|
+
.sd-1-5-2-headline--inline sd-icon {
|
|
1319
1319
|
margin-right: var(--sd-spacing-2, 0.5rem) /* 8px */;
|
|
1320
1320
|
margin-top: calc(var(--sd-spacing-1, 0.25rem) /* 4px */ * -1);
|
|
1321
1321
|
vertical-align: middle;
|
|
1322
1322
|
}
|
|
1323
1323
|
|
|
1324
|
-
.sd-1-5-
|
|
1324
|
+
.sd-1-5-2-headline--inline:is(.sd-1-5-2-headline--size-xl, .sd-1-5-2-headline--size-lg, .sd-1-5-2-headline--size-base) sd-icon {
|
|
1325
1325
|
margin-right: var(--sd-spacing-0-5, 0.125rem) /* 2px */;
|
|
1326
1326
|
}
|
|
1327
1327
|
|
|
1328
|
-
.sd-1-5-
|
|
1329
|
-
.sd-1-5-
|
|
1328
|
+
.sd-1-5-2-headline--inverted:not(#_),
|
|
1329
|
+
.sd-1-5-2-prose--inverted :is(h1, h2, h3, h4, h5):not(.sd-1-5-2-headline):not(#_) {
|
|
1330
1330
|
|
|
1331
1331
|
color: rgb(var(--sd-color-white, 255 255 255) / var(--tw-text-opacity, 1)) /* Inverted text color */;
|
|
1332
1332
|
}
|
|
1333
1333
|
|
|
1334
|
-
.sd-1-5-
|
|
1334
|
+
.sd-1-5-2-headline--inverted:not(#_) sd-icon, .sd-1-5-2-prose--inverted :is(h1, h2, h3, h4, h5):not(.sd-1-5-2-headline):not(#_) sd-icon {
|
|
1335
1335
|
|
|
1336
1336
|
color: rgb(var(--sd-color-white, 255 255 255) / var(--tw-text-opacity, 1)) /* Inverted text color */;
|
|
1337
1337
|
}
|
|
1338
1338
|
|
|
1339
1339
|
/**
|
|
1340
1340
|
* Generates basic styles for interactive elements.
|
|
1341
|
-
* @name sd-1-5-
|
|
1341
|
+
* @name sd-1-5-2-interactive
|
|
1342
1342
|
* @status stable
|
|
1343
1343
|
* @since 1.11
|
|
1344
|
-
* @boolean sd-1-5-
|
|
1345
|
-
* @boolean sd-1-5-
|
|
1346
|
-
* @boolean sd-1-5-
|
|
1344
|
+
* @boolean sd-1-5-2-interactive--disabled Makes an element look disabled.
|
|
1345
|
+
* @boolean sd-1-5-2-interactive--inverted Inverts the colors of an element.
|
|
1346
|
+
* @boolean sd-1-5-2-interactive--reset Resets the default browser styles of e.g., a button.
|
|
1347
1347
|
*/
|
|
1348
1348
|
|
|
1349
|
-
.sd-1-5-
|
|
1349
|
+
.sd-1-5-2-prose a--reset, .sd-1-5-2-interactive--reset {
|
|
1350
1350
|
all: unset;
|
|
1351
1351
|
outline: revert;
|
|
1352
1352
|
}
|
|
1353
1353
|
|
|
1354
|
-
.sd-1-5-
|
|
1355
|
-
.sd-1-5-
|
|
1354
|
+
.sd-1-5-2-prose a,
|
|
1355
|
+
.sd-1-5-2-interactive {
|
|
1356
1356
|
cursor: pointer;
|
|
1357
1357
|
|
|
1358
1358
|
color: rgb(var(--sd-color-primary, 0 53 142) / var(--tw-text-opacity, 1)) /* Primary brand color for text */;
|
|
@@ -1366,80 +1366,95 @@ Smooth transitions eg. for buttons or dropdowns */;
|
|
|
1366
1366
|
transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
|
|
1367
1367
|
}
|
|
1368
1368
|
|
|
1369
|
-
.sd-1-5-
|
|
1370
|
-
.sd-1-5-
|
|
1369
|
+
.sd-1-5-2-prose a:hover:not([disabled]),
|
|
1370
|
+
.sd-1-5-2-interactive:hover:not([disabled]) {
|
|
1371
1371
|
|
|
1372
1372
|
color: rgb(var(--sd-color-primary-500, 70 109 175) / var(--tw-text-opacity, 1)) /* Used for hover interaction */;
|
|
1373
1373
|
}
|
|
1374
1374
|
|
|
1375
|
-
.sd-1-5-
|
|
1376
|
-
.sd-1-5-
|
|
1375
|
+
.sd-1-5-2-prose a:active:not([disabled]),
|
|
1376
|
+
.sd-1-5-2-interactive:active:not([disabled]) {
|
|
1377
1377
|
|
|
1378
1378
|
color: rgb(var(--sd-color-primary-800, 5 21 48) / var(--tw-text-opacity, 1)) /* Used for pressed interaction */;
|
|
1379
1379
|
}
|
|
1380
1380
|
|
|
1381
|
-
.sd-1-5-
|
|
1381
|
+
.sd-1-5-2-prose a:is(.sd-1-5-2-interactive), .sd-1-5-2-interactive:is(.sd-1-5-2-interactive) {
|
|
1382
1382
|
text-decoration-line: none;
|
|
1383
1383
|
}
|
|
1384
1384
|
|
|
1385
|
-
.sd-1-5-
|
|
1385
|
+
.sd-1-5-2-prose a:focus-visible, .sd-1-5-2-interactive:focus-visible {
|
|
1386
1386
|
outline-style: solid;
|
|
1387
1387
|
outline-width: 2px;
|
|
1388
1388
|
outline-offset: 2px;
|
|
1389
1389
|
outline-color: rgb(var(--sd-color-primary, 0 53 142) / 1) /* Used for buttons, select field, focus state */;
|
|
1390
1390
|
}
|
|
1391
1391
|
|
|
1392
|
-
.sd-1-5-
|
|
1393
|
-
.sd-1-5-
|
|
1394
|
-
.sd-1-5-
|
|
1395
|
-
.sd-1-5-
|
|
1396
|
-
.sd-1-5-
|
|
1397
|
-
.sd-1-5-
|
|
1392
|
+
.sd-1-5-2-prose a--disabled,
|
|
1393
|
+
.sd-1-5-2-prose a[disabled],
|
|
1394
|
+
.sd-1-5-2-prose a[href=''],
|
|
1395
|
+
.sd-1-5-2-interactive--disabled,
|
|
1396
|
+
.sd-1-5-2-interactive[disabled],
|
|
1397
|
+
.sd-1-5-2-interactive[href=''] {
|
|
1398
1398
|
cursor: not-allowed;
|
|
1399
1399
|
|
|
1400
|
+
color: rgb(var(--sd-color-neutral-500, 174 174 174) / var(--tw-text-opacity, 1)) /* Used for disabled state */;
|
|
1401
|
+
}
|
|
1402
|
+
|
|
1403
|
+
.sd-1-5-2-prose a--disabled:hover:not([disabled]),
|
|
1404
|
+
.sd-1-5-2-prose a[disabled]:hover:not([disabled]),
|
|
1405
|
+
.sd-1-5-2-prose a[href='']:hover:not([disabled]),
|
|
1406
|
+
.sd-1-5-2-interactive--disabled:hover:not([disabled]),
|
|
1407
|
+
.sd-1-5-2-interactive[disabled]:hover:not([disabled]),
|
|
1408
|
+
.sd-1-5-2-interactive[href='']:hover:not([disabled]) {
|
|
1409
|
+
|
|
1410
|
+
color: rgb(var(--sd-color-neutral-500, 174 174 174) / var(--tw-text-opacity, 1)) /* Used for disabled state */;
|
|
1411
|
+
}
|
|
1412
|
+
|
|
1413
|
+
.sd-1-5-2-prose a--disabled:active:not([disabled]),
|
|
1414
|
+
.sd-1-5-2-prose a[disabled]:active:not([disabled]),
|
|
1415
|
+
.sd-1-5-2-prose a[href='']:active:not([disabled]),
|
|
1416
|
+
.sd-1-5-2-interactive--disabled:active:not([disabled]),
|
|
1417
|
+
.sd-1-5-2-interactive[disabled]:active:not([disabled]),
|
|
1418
|
+
.sd-1-5-2-interactive[href='']:active:not([disabled]) {
|
|
1419
|
+
|
|
1420
|
+
color: rgb(var(--sd-color-neutral-500, 174 174 174) / var(--tw-text-opacity, 1)) /* Used for disabled state */;
|
|
1421
|
+
}
|
|
1422
|
+
|
|
1423
|
+
.sd-1-5-2-prose a--disabled.sd-1-5-2-interactive--inverted, .sd-1-5-2-prose a[disabled].sd-1-5-2-interactive--inverted, .sd-1-5-2-prose a[href=''].sd-1-5-2-interactive--inverted, .sd-1-5-2-interactive--disabled.sd-1-5-2-interactive--inverted, .sd-1-5-2-interactive[disabled].sd-1-5-2-interactive--inverted, .sd-1-5-2-interactive[href=''].sd-1-5-2-interactive--inverted {
|
|
1424
|
+
|
|
1400
1425
|
color: rgb(var(--sd-color-neutral-600, 136 136 136) / var(--tw-text-opacity, 1)) /* Used for inverted disabled state */;
|
|
1401
1426
|
}
|
|
1402
1427
|
|
|
1403
|
-
.sd-1-5-1-prose a--disabled:hover:not([disabled]),
|
|
1404
|
-
.sd-1-5-1-prose a[disabled]:hover:not([disabled]),
|
|
1405
|
-
.sd-1-5-1-prose a[href='']:hover:not([disabled]),
|
|
1406
|
-
.sd-1-5-1-interactive--disabled:hover:not([disabled]),
|
|
1407
|
-
.sd-1-5-1-interactive[disabled]:hover:not([disabled]),
|
|
1408
|
-
.sd-1-5-1-interactive[href='']:hover:not([disabled]) {
|
|
1428
|
+
.sd-1-5-2-prose a--disabled.sd-1-5-2-interactive--inverted:hover:not([disabled]), .sd-1-5-2-prose a[disabled].sd-1-5-2-interactive--inverted:hover:not([disabled]), .sd-1-5-2-prose a[href=''].sd-1-5-2-interactive--inverted:hover:not([disabled]), .sd-1-5-2-interactive--disabled.sd-1-5-2-interactive--inverted:hover:not([disabled]), .sd-1-5-2-interactive[disabled].sd-1-5-2-interactive--inverted:hover:not([disabled]), .sd-1-5-2-interactive[href=''].sd-1-5-2-interactive--inverted:hover:not([disabled]) {
|
|
1409
1429
|
|
|
1410
1430
|
color: rgb(var(--sd-color-neutral-600, 136 136 136) / var(--tw-text-opacity, 1)) /* Used for inverted disabled state */;
|
|
1411
1431
|
}
|
|
1412
1432
|
|
|
1413
|
-
.sd-1-5-1-prose a--disabled:active:not([disabled]),
|
|
1414
|
-
.sd-1-5-1-prose a[disabled]:active:not([disabled]),
|
|
1415
|
-
.sd-1-5-1-prose a[href='']:active:not([disabled]),
|
|
1416
|
-
.sd-1-5-1-interactive--disabled:active:not([disabled]),
|
|
1417
|
-
.sd-1-5-1-interactive[disabled]:active:not([disabled]),
|
|
1418
|
-
.sd-1-5-1-interactive[href='']:active:not([disabled]) {
|
|
1433
|
+
.sd-1-5-2-prose a--disabled.sd-1-5-2-interactive--inverted:active:not([disabled]), .sd-1-5-2-prose a[disabled].sd-1-5-2-interactive--inverted:active:not([disabled]), .sd-1-5-2-prose a[href=''].sd-1-5-2-interactive--inverted:active:not([disabled]), .sd-1-5-2-interactive--disabled.sd-1-5-2-interactive--inverted:active:not([disabled]), .sd-1-5-2-interactive[disabled].sd-1-5-2-interactive--inverted:active:not([disabled]), .sd-1-5-2-interactive[href=''].sd-1-5-2-interactive--inverted:active:not([disabled]) {
|
|
1419
1434
|
|
|
1420
1435
|
color: rgb(var(--sd-color-neutral-600, 136 136 136) / var(--tw-text-opacity, 1)) /* Used for inverted disabled state */;
|
|
1421
1436
|
}
|
|
1422
1437
|
|
|
1423
|
-
.sd-1-5-
|
|
1424
|
-
.sd-1-5-
|
|
1438
|
+
.sd-1-5-2-prose--inverted a,
|
|
1439
|
+
.sd-1-5-2-interactive--inverted {
|
|
1425
1440
|
|
|
1426
1441
|
color: rgb(var(--sd-color-white, 255 255 255) / var(--tw-text-opacity, 1)) /* Inverted text color */;
|
|
1427
1442
|
}
|
|
1428
1443
|
|
|
1429
|
-
.sd-1-5-
|
|
1430
|
-
.sd-1-5-
|
|
1444
|
+
.sd-1-5-2-prose--inverted a:hover:not([disabled]),
|
|
1445
|
+
.sd-1-5-2-interactive--inverted:hover:not([disabled]) {
|
|
1431
1446
|
|
|
1432
1447
|
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 */;
|
|
1433
1448
|
}
|
|
1434
1449
|
|
|
1435
|
-
.sd-1-5-
|
|
1436
|
-
.sd-1-5-
|
|
1450
|
+
.sd-1-5-2-prose--inverted a:active:not([disabled]),
|
|
1451
|
+
.sd-1-5-2-interactive--inverted:active:not([disabled]) {
|
|
1437
1452
|
|
|
1438
1453
|
color: rgb(var(--sd-color-primary-400, 153 171 208) / var(--tw-text-opacity, 1)) /* Additional text inverted color
|
|
1439
1454
|
Used for inverted pressed interaction text link */;
|
|
1440
1455
|
}
|
|
1441
1456
|
|
|
1442
|
-
.sd-1-5-
|
|
1457
|
+
.sd-1-5-2-prose--inverted a:focus-visible, .sd-1-5-2-interactive--inverted:focus-visible {
|
|
1443
1458
|
outline-style: solid;
|
|
1444
1459
|
outline-width: 2px;
|
|
1445
1460
|
outline-offset: 2px;
|
|
@@ -1448,15 +1463,15 @@ Used for inverted pressed interaction text link */;
|
|
|
1448
1463
|
|
|
1449
1464
|
/**
|
|
1450
1465
|
* Leadtext is used for text that should be highlighted and a focal point of the page.
|
|
1451
|
-
* @name sd-1-5-
|
|
1466
|
+
* @name sd-1-5-2-leadtext
|
|
1452
1467
|
* @status stable
|
|
1453
1468
|
* @since 1.7
|
|
1454
|
-
* @variant { lg } sd-1-5-
|
|
1455
|
-
* @boolean sd-1-5-
|
|
1469
|
+
* @variant { lg } sd-1-5-2-leadtext--size-... The leadtext's size.
|
|
1470
|
+
* @boolean sd-1-5-2-leadtext--inverted Inverts the leadtext text.
|
|
1456
1471
|
*/
|
|
1457
1472
|
|
|
1458
|
-
.sd-1-5-
|
|
1459
|
-
.sd-1-5-
|
|
1473
|
+
.sd-1-5-2-prose > .sd-1-5-2-leadtext,
|
|
1474
|
+
.sd-1-5-2-leadtext {
|
|
1460
1475
|
font-size: var(--sd-font-size-xl, 1.5rem) /* 24px */;
|
|
1461
1476
|
font-weight: 400;
|
|
1462
1477
|
line-height: var(--sd-line-height-normal, 150%) /* Used for body copy and smaller titles */;
|
|
@@ -1464,7 +1479,7 @@ Used for inverted pressed interaction text link */;
|
|
|
1464
1479
|
color: rgb(var(--sd-color-black, 24 24 24) / var(--tw-text-opacity, 1)) /* Default text color */;
|
|
1465
1480
|
}
|
|
1466
1481
|
|
|
1467
|
-
.sd-1-5-
|
|
1482
|
+
.sd-1-5-2-prose > .sd-1-5-2-leadtext--size-lg, .sd-1-5-2-leadtext--size-lg {
|
|
1468
1483
|
font-size: var(--sd-font-size-lg, 1.25rem) /* 20px */;
|
|
1469
1484
|
font-weight: 400;
|
|
1470
1485
|
line-height: var(--sd-line-height-normal, 150%) /* Used for body copy and smaller titles */;
|
|
@@ -1472,22 +1487,22 @@ Used for inverted pressed interaction text link */;
|
|
|
1472
1487
|
color: rgb(var(--sd-color-black, 24 24 24) / var(--tw-text-opacity, 1)) /* Default text color */;
|
|
1473
1488
|
}
|
|
1474
1489
|
|
|
1475
|
-
.sd-1-5-
|
|
1476
|
-
.sd-1-5-
|
|
1490
|
+
.sd-1-5-2-prose--inverted > .sd-1-5-2-leadtext,
|
|
1491
|
+
.sd-1-5-2-leadtext--inverted {
|
|
1477
1492
|
|
|
1478
1493
|
color: rgb(var(--sd-color-white, 255 255 255) / var(--tw-text-opacity, 1)) /* Inverted text color */;
|
|
1479
1494
|
}
|
|
1480
1495
|
|
|
1481
1496
|
/**
|
|
1482
1497
|
* Generates basic styles for list elements.
|
|
1483
|
-
* @name sd-1-5-
|
|
1498
|
+
* @name sd-1-5-2-list
|
|
1484
1499
|
* @status stable
|
|
1485
1500
|
* @since 1.39.0
|
|
1486
|
-
* @boolean sd-1-5-
|
|
1501
|
+
* @boolean sd-1-5-2-list--inverted Inverts the list text.
|
|
1487
1502
|
*/
|
|
1488
1503
|
|
|
1489
|
-
.sd-1-5-
|
|
1490
|
-
.sd-1-5-
|
|
1504
|
+
.sd-1-5-2-list:not(.sd-1-5-2-list--icon),
|
|
1505
|
+
.sd-1-5-2-prose > :is(ol, ul) {
|
|
1491
1506
|
list-style-position: revert;
|
|
1492
1507
|
list-style-type: revert;
|
|
1493
1508
|
padding: revert;
|
|
@@ -1501,14 +1516,14 @@ Used for inverted pressed interaction text link */;
|
|
|
1501
1516
|
*/
|
|
1502
1517
|
}
|
|
1503
1518
|
|
|
1504
|
-
.sd-1-5-
|
|
1519
|
+
.sd-1-5-2-list:not(.sd-1-5-2-list--icon) li:not(:first-child), .sd-1-5-2-prose > :is(ol, ul) li:not(:first-child) {
|
|
1505
1520
|
margin-top: var(--sd-spacing-3, 0.75rem) /* 12px */;
|
|
1506
1521
|
}
|
|
1507
1522
|
|
|
1508
|
-
.sd-1-5-
|
|
1509
|
-
.sd-1-5-
|
|
1510
|
-
.sd-1-5-
|
|
1511
|
-
.sd-1-5-
|
|
1523
|
+
.sd-1-5-2-list:not(.sd-1-5-2-list--icon) ul,
|
|
1524
|
+
.sd-1-5-2-list:not(.sd-1-5-2-list--icon) ol,
|
|
1525
|
+
.sd-1-5-2-prose > :is(ol, ul) ul,
|
|
1526
|
+
.sd-1-5-2-prose > :is(ol, ul) ol {
|
|
1512
1527
|
all: revert;
|
|
1513
1528
|
padding-left: 1.4em;
|
|
1514
1529
|
padding-top: 0.75em;
|
|
@@ -1516,8 +1531,8 @@ Used for inverted pressed interaction text link */;
|
|
|
1516
1531
|
|
|
1517
1532
|
@supports not (-webkit-hyphens: none) {
|
|
1518
1533
|
|
|
1519
|
-
.sd-1-5-
|
|
1520
|
-
.sd-1-5-
|
|
1534
|
+
.sd-1-5-2-list:not(.sd-1-5-2-list--icon),
|
|
1535
|
+
.sd-1-5-2-prose > :is(ol, ul) {
|
|
1521
1536
|
/* Safari automatically adds some spacing. This adds it for other browsers. */
|
|
1522
1537
|
|
|
1523
1538
|
/*
|
|
@@ -1531,38 +1546,38 @@ Used for inverted pressed interaction text link */;
|
|
|
1531
1546
|
*/
|
|
1532
1547
|
/* Level 1 */
|
|
1533
1548
|
}
|
|
1534
|
-
.sd-1-5-
|
|
1549
|
+
.sd-1-5-2-list:not(.sd-1-5-2-list--icon) li, .sd-1-5-2-prose > :is(ol, ul) li {
|
|
1535
1550
|
padding-left: 0.3em;
|
|
1536
1551
|
}
|
|
1537
|
-
.sd-1-5-
|
|
1552
|
+
.sd-1-5-2-list:not(.sd-1-5-2-list--icon):is(ol):not(.sd-1-5-2-list--icon), .sd-1-5-2-prose > :is(ol, ul):is(ol):not(.sd-1-5-2-list--icon) {
|
|
1538
1553
|
counter-reset: item;
|
|
1539
1554
|
}
|
|
1540
|
-
.sd-1-5-
|
|
1555
|
+
.sd-1-5-2-list:not(.sd-1-5-2-list--icon):is(ol):not(.sd-1-5-2-list--icon) > li, .sd-1-5-2-prose > :is(ol, ul):is(ol):not(.sd-1-5-2-list--icon) > li {
|
|
1541
1556
|
counter-increment: item;
|
|
1542
1557
|
}
|
|
1543
|
-
.sd-1-5-
|
|
1558
|
+
.sd-1-5-2-list:not(.sd-1-5-2-list--icon):is(ol):not(.sd-1-5-2-list--icon) > li::marker, .sd-1-5-2-prose > :is(ol, ul):is(ol):not(.sd-1-5-2-list--icon) > li::marker {
|
|
1544
1559
|
content: counters(item, '.', decimal) '. ';
|
|
1545
1560
|
}
|
|
1546
1561
|
/* Level 2 */
|
|
1547
|
-
.sd-1-5-
|
|
1562
|
+
.sd-1-5-2-list:not(.sd-1-5-2-list--icon):is(ol):not(.sd-1-5-2-list--icon) > li > ol, .sd-1-5-2-prose > :is(ol, ul):is(ol):not(.sd-1-5-2-list--icon) > li > ol {
|
|
1548
1563
|
padding-left: 1.9em;
|
|
1549
1564
|
counter-reset: subitem;
|
|
1550
1565
|
}
|
|
1551
|
-
.sd-1-5-
|
|
1566
|
+
.sd-1-5-2-list:not(.sd-1-5-2-list--icon):is(ol):not(.sd-1-5-2-list--icon) > li > ol > li, .sd-1-5-2-prose > :is(ol, ul):is(ol):not(.sd-1-5-2-list--icon) > li > ol > li {
|
|
1552
1567
|
counter-increment: subitem;
|
|
1553
1568
|
}
|
|
1554
|
-
.sd-1-5-
|
|
1569
|
+
.sd-1-5-2-list:not(.sd-1-5-2-list--icon):is(ol):not(.sd-1-5-2-list--icon) > li > ol > li::marker, .sd-1-5-2-prose > :is(ol, ul):is(ol):not(.sd-1-5-2-list--icon) > li > ol > li::marker {
|
|
1555
1570
|
content: counters(item, '.', decimal) '.' counters(subitem, '.', decimal) '. ';
|
|
1556
1571
|
}
|
|
1557
1572
|
/* Level 3 */
|
|
1558
|
-
.sd-1-5-
|
|
1573
|
+
.sd-1-5-2-list:not(.sd-1-5-2-list--icon):is(ol):not(.sd-1-5-2-list--icon) > li > ol > li > ol, .sd-1-5-2-prose > :is(ol, ul):is(ol):not(.sd-1-5-2-list--icon) > li > ol > li > ol {
|
|
1559
1574
|
padding-left: 2.7em;
|
|
1560
1575
|
counter-reset: subsubitem;
|
|
1561
1576
|
}
|
|
1562
|
-
.sd-1-5-
|
|
1577
|
+
.sd-1-5-2-list:not(.sd-1-5-2-list--icon):is(ol):not(.sd-1-5-2-list--icon) > li > ol > li > ol > li, .sd-1-5-2-prose > :is(ol, ul):is(ol):not(.sd-1-5-2-list--icon) > li > ol > li > ol > li {
|
|
1563
1578
|
counter-increment: subsubitem;
|
|
1564
1579
|
}
|
|
1565
|
-
.sd-1-5-
|
|
1580
|
+
.sd-1-5-2-list:not(.sd-1-5-2-list--icon):is(ol):not(.sd-1-5-2-list--icon) > li > ol > li > ol > li::marker, .sd-1-5-2-prose > :is(ol, ul):is(ol):not(.sd-1-5-2-list--icon) > li > ol > li > ol > li::marker {
|
|
1566
1581
|
content: counters(item, '.', decimal) '.' counters(subitem, '.', decimal) '.'
|
|
1567
1582
|
counters(subsubitem, '.', decimal) '. ';
|
|
1568
1583
|
}
|
|
@@ -1570,35 +1585,35 @@ Used for inverted pressed interaction text link */;
|
|
|
1570
1585
|
|
|
1571
1586
|
/* Level 1 */
|
|
1572
1587
|
|
|
1573
|
-
.sd-1-5-
|
|
1574
|
-
.sd-1-5-
|
|
1575
|
-
.sd-1-5-
|
|
1576
|
-
.sd-1-5-
|
|
1588
|
+
.sd-1-5-2-list:not(.sd-1-5-2-list--icon):is(ul):not(.sd-1-5-2-list--icon),
|
|
1589
|
+
.sd-1-5-2-list:not(.sd-1-5-2-list--icon) ul,
|
|
1590
|
+
.sd-1-5-2-prose > :is(ol, ul):is(ul):not(.sd-1-5-2-list--icon),
|
|
1591
|
+
.sd-1-5-2-prose > :is(ol, ul) ul {
|
|
1577
1592
|
padding-left: 0.5em;
|
|
1578
1593
|
}
|
|
1579
1594
|
|
|
1580
|
-
.sd-1-5-
|
|
1595
|
+
.sd-1-5-2-list:not(.sd-1-5-2-list--icon):is(ul):not(.sd-1-5-2-list--icon) > li, .sd-1-5-2-list:not(.sd-1-5-2-list--icon) ul > li, .sd-1-5-2-prose > :is(ol, ul):is(ul):not(.sd-1-5-2-list--icon) > li, .sd-1-5-2-prose > :is(ol, ul) ul > li {
|
|
1581
1596
|
padding-left: 0.75em;
|
|
1582
1597
|
list-style-type: '\2022'; /* • */
|
|
1583
1598
|
}
|
|
1584
1599
|
|
|
1585
1600
|
/* Level 2 */
|
|
1586
1601
|
|
|
1587
|
-
.sd-1-5-
|
|
1602
|
+
.sd-1-5-2-list:not(.sd-1-5-2-list--icon):is(ul):not(.sd-1-5-2-list--icon) > li > ul, .sd-1-5-2-list:not(.sd-1-5-2-list--icon) ul > li > ul, .sd-1-5-2-prose > :is(ol, ul):is(ul):not(.sd-1-5-2-list--icon) > li > ul, .sd-1-5-2-prose > :is(ol, ul) ul > li > ul {
|
|
1588
1603
|
padding-left: 0.3em;
|
|
1589
1604
|
}
|
|
1590
1605
|
|
|
1591
|
-
.sd-1-5-
|
|
1606
|
+
.sd-1-5-2-list:not(.sd-1-5-2-list--icon):is(ul):not(.sd-1-5-2-list--icon) > li > ul > li, .sd-1-5-2-list:not(.sd-1-5-2-list--icon) ul > li > ul > li, .sd-1-5-2-prose > :is(ol, ul):is(ul):not(.sd-1-5-2-list--icon) > li > ul > li, .sd-1-5-2-prose > :is(ol, ul) ul > li > ul > li {
|
|
1592
1607
|
list-style-type: '\002B1D'; /* · */
|
|
1593
1608
|
}
|
|
1594
1609
|
|
|
1595
1610
|
/* Level 3 */
|
|
1596
1611
|
|
|
1597
|
-
.sd-1-5-
|
|
1612
|
+
.sd-1-5-2-list:not(.sd-1-5-2-list--icon):is(ul):not(.sd-1-5-2-list--icon) > li > ul > li > ul, .sd-1-5-2-list:not(.sd-1-5-2-list--icon) ul > li > ul > li > ul, .sd-1-5-2-prose > :is(ol, ul):is(ul):not(.sd-1-5-2-list--icon) > li > ul > li > ul, .sd-1-5-2-prose > :is(ol, ul) ul > li > ul > li > ul {
|
|
1598
1613
|
padding-left: 0.4em;
|
|
1599
1614
|
}
|
|
1600
1615
|
|
|
1601
|
-
.sd-1-5-
|
|
1616
|
+
.sd-1-5-2-list:not(.sd-1-5-2-list--icon):is(ul):not(.sd-1-5-2-list--icon) > li > ul > li > ul > li, .sd-1-5-2-list:not(.sd-1-5-2-list--icon) ul > li > ul > li > ul > li, .sd-1-5-2-prose > :is(ol, ul):is(ul):not(.sd-1-5-2-list--icon) > li > ul > li > ul > li, .sd-1-5-2-prose > :is(ol, ul) ul > li > ul > li > ul > li {
|
|
1602
1617
|
list-style-type: '\2010'; /* - */
|
|
1603
1618
|
}
|
|
1604
1619
|
|
|
@@ -1606,19 +1621,19 @@ Used for inverted pressed interaction text link */;
|
|
|
1606
1621
|
* Icon lists
|
|
1607
1622
|
*/
|
|
1608
1623
|
|
|
1609
|
-
.sd-1-5-
|
|
1624
|
+
.sd-1-5-2-list--icon {
|
|
1610
1625
|
padding-top: var(--sd-spacing-4, 1rem) /* 16px */;
|
|
1611
1626
|
padding-bottom: var(--sd-spacing-4, 1rem) /* 16px */;
|
|
1612
1627
|
text-align: left;
|
|
1613
1628
|
}
|
|
1614
1629
|
|
|
1615
|
-
.sd-1-5-
|
|
1616
|
-
.sd-1-5-
|
|
1630
|
+
.sd-1-5-2-list--icon li sd-icon:first-of-type,
|
|
1631
|
+
.sd-1-5-2-list--icon li .sd-1-5-2-list--icon__icon:first-of-type {
|
|
1617
1632
|
|
|
1618
1633
|
color: rgb(var(--sd-color-white, 255 255 255) / var(--tw-text-opacity, 1)) /* Inverted text color */;
|
|
1619
1634
|
}
|
|
1620
1635
|
|
|
1621
|
-
.sd-1-5-
|
|
1636
|
+
.sd-1-5-2-list--icon {
|
|
1622
1637
|
list-style-type: '';
|
|
1623
1638
|
}
|
|
1624
1639
|
|
|
@@ -1626,19 +1641,19 @@ Used for inverted pressed interaction text link */;
|
|
|
1626
1641
|
styles without affecting semantics is to set list-style-type to an empty string.
|
|
1627
1642
|
https://www.matuzo.at/blog/2023/removing-list-styles-without-affecting-semantics */
|
|
1628
1643
|
|
|
1629
|
-
.sd-1-5-
|
|
1644
|
+
.sd-1-5-2-list--icon > li:first-of-type {
|
|
1630
1645
|
padding-top: var(--sd-spacing-0, 0px) /* No spacing (manually added) */;
|
|
1631
1646
|
}
|
|
1632
1647
|
|
|
1633
|
-
.sd-1-5-
|
|
1648
|
+
.sd-1-5-2-list--icon li {
|
|
1634
1649
|
position: relative;
|
|
1635
1650
|
padding-top: var(--sd-spacing-3, 0.75rem) /* 12px */;
|
|
1636
1651
|
padding-left: var(--sd-spacing-10, 2.5rem) /* 40px */;
|
|
1637
1652
|
line-height: 32px;
|
|
1638
1653
|
}
|
|
1639
1654
|
|
|
1640
|
-
.sd-1-5-
|
|
1641
|
-
.sd-1-5-
|
|
1655
|
+
.sd-1-5-2-list--icon li > sd-icon:first-of-type,
|
|
1656
|
+
.sd-1-5-2-list--icon li > .sd-1-5-2-list--icon__icon:first-of-type {
|
|
1642
1657
|
position: absolute;
|
|
1643
1658
|
left: var(--sd-spacing-0, 0px) /* No spacing (manually added) */;
|
|
1644
1659
|
font-size: var(--sd-font-size-3xl, 2rem) /* 32px */;
|
|
@@ -1646,16 +1661,16 @@ Used for inverted pressed interaction text link */;
|
|
|
1646
1661
|
color: rgb(var(--sd-color-primary, 0 53 142) / var(--tw-text-opacity, 1)) /* Primary brand color for text */;
|
|
1647
1662
|
}
|
|
1648
1663
|
|
|
1649
|
-
.sd-1-5-
|
|
1664
|
+
.sd-1-5-2-list--icon.sd-1-5-2-list--horizontal {
|
|
1650
1665
|
display: flex;
|
|
1651
1666
|
}
|
|
1652
1667
|
|
|
1653
|
-
.sd-1-5-
|
|
1668
|
+
.sd-1-5-2-list--icon.sd-1-5-2-list--horizontal li {
|
|
1654
1669
|
display: flex;
|
|
1655
1670
|
padding-top: var(--sd-spacing-0, 0px) /* No spacing (manually added) */;
|
|
1656
1671
|
}
|
|
1657
1672
|
|
|
1658
|
-
.sd-1-5-
|
|
1673
|
+
.sd-1-5-2-list--icon.sd-1-5-2-list--horizontal li:not(:last-child) {
|
|
1659
1674
|
margin-right: var(--sd-spacing-8, 2rem) /* 32px */;
|
|
1660
1675
|
}
|
|
1661
1676
|
|
|
@@ -1663,31 +1678,31 @@ Used for inverted pressed interaction text link */;
|
|
|
1663
1678
|
* Inverted
|
|
1664
1679
|
*/
|
|
1665
1680
|
|
|
1666
|
-
.sd-1-5-
|
|
1667
|
-
.sd-1-5-
|
|
1681
|
+
.sd-1-5-2-list--inverted,
|
|
1682
|
+
.sd-1-5-2-prose--inverted > :is(ol, ul) {
|
|
1668
1683
|
|
|
1669
1684
|
color: rgb(var(--sd-color-white, 255 255 255) / var(--tw-text-opacity, 1)) /* Inverted text color */;
|
|
1670
1685
|
}
|
|
1671
1686
|
|
|
1672
|
-
.sd-1-5-
|
|
1673
|
-
.sd-1-5-
|
|
1674
|
-
.sd-1-5-
|
|
1675
|
-
.sd-1-5-
|
|
1687
|
+
.sd-1-5-2-list--inverted li > sd-icon:first-of-type,
|
|
1688
|
+
.sd-1-5-2-list--inverted li > .sd-1-5-2-list--icon__icon:first-of-type,
|
|
1689
|
+
.sd-1-5-2-prose--inverted > :is(ol, ul) li > sd-icon:first-of-type,
|
|
1690
|
+
.sd-1-5-2-prose--inverted > :is(ol, ul) li > .sd-1-5-2-list--icon__icon:first-of-type {
|
|
1676
1691
|
|
|
1677
1692
|
color: rgb(var(--sd-color-white, 255 255 255) / var(--tw-text-opacity, 1)) /* Inverted text color */;
|
|
1678
1693
|
}
|
|
1679
1694
|
|
|
1680
1695
|
/**
|
|
1681
1696
|
* A paragraph is used to display blocks of text. It uses the base font size and can contain bold and/or link styles.
|
|
1682
|
-
* @name sd-1-5-
|
|
1697
|
+
* @name sd-1-5-2-paragraph
|
|
1683
1698
|
* @status stable
|
|
1684
1699
|
* @since 1.7
|
|
1685
|
-
* @variant { sm } sd-1-5-
|
|
1686
|
-
* @boolean sd-1-5-
|
|
1700
|
+
* @variant { sm } sd-1-5-2-paragraph--size-... The paragraph's font size.
|
|
1701
|
+
* @boolean sd-1-5-2-paragraph--inverted Inverts the paragraph text.
|
|
1687
1702
|
*/
|
|
1688
1703
|
|
|
1689
|
-
.sd-1-5-
|
|
1690
|
-
.sd-1-5-
|
|
1704
|
+
.sd-1-5-2-paragraph,
|
|
1705
|
+
.sd-1-5-2-prose p {
|
|
1691
1706
|
font-size: var(--sd-font-size-base, 1rem) /* 16px */;
|
|
1692
1707
|
font-weight: 400;
|
|
1693
1708
|
line-height: var(--sd-line-height-normal, 150%) /* Used for body copy and smaller titles */;
|
|
@@ -1695,7 +1710,7 @@ Used for inverted pressed interaction text link */;
|
|
|
1695
1710
|
color: rgb(var(--sd-color-black, 24 24 24) / var(--tw-text-opacity, 1)) /* Default text color */;
|
|
1696
1711
|
}
|
|
1697
1712
|
|
|
1698
|
-
.sd-1-5-
|
|
1713
|
+
.sd-1-5-2-paragraph--size-sm, .sd-1-5-2-prose p--size-sm {
|
|
1699
1714
|
font-size: var(--sd-font-size-sm, 0.875rem) /* 14px */;
|
|
1700
1715
|
font-weight: 400;
|
|
1701
1716
|
line-height: var(--sd-line-height-normal, 150%) /* Used for body copy and smaller titles */;
|
|
@@ -1703,35 +1718,35 @@ Used for inverted pressed interaction text link */;
|
|
|
1703
1718
|
color: rgb(var(--sd-color-black, 24 24 24) / var(--tw-text-opacity, 1)) /* Default text color */;
|
|
1704
1719
|
}
|
|
1705
1720
|
|
|
1706
|
-
.sd-1-5-
|
|
1707
|
-
.sd-1-5-
|
|
1721
|
+
.sd-1-5-2-paragraph--inverted,
|
|
1722
|
+
.sd-1-5-2-prose--inverted p {
|
|
1708
1723
|
|
|
1709
1724
|
color: rgb(var(--sd-color-white, 255 255 255) / var(--tw-text-opacity, 1)) /* Inverted text color */;
|
|
1710
1725
|
}
|
|
1711
1726
|
|
|
1712
1727
|
/**
|
|
1713
1728
|
* Generates basic styles for media elements.
|
|
1714
|
-
* @name sd-1-5-
|
|
1729
|
+
* @name sd-1-5-2-media
|
|
1715
1730
|
* @status stable
|
|
1716
1731
|
* @since 2.5.0
|
|
1717
|
-
* @boolean sd-1-5-
|
|
1732
|
+
* @boolean sd-1-5-2-media--inverted Inverts the figcaption text.
|
|
1718
1733
|
*/
|
|
1719
1734
|
|
|
1720
|
-
.sd-1-5-
|
|
1721
|
-
figure.sd-1-5-
|
|
1735
|
+
.sd-1-5-2-prose figure,
|
|
1736
|
+
figure.sd-1-5-2-media {
|
|
1722
1737
|
margin: var(--sd-spacing-0, 0px) /* No spacing (manually added) */;
|
|
1723
1738
|
}
|
|
1724
1739
|
|
|
1725
|
-
.sd-1-5-
|
|
1740
|
+
.sd-1-5-2-prose figure figcaption, figure.sd-1-5-2-media figcaption {
|
|
1726
1741
|
|
|
1727
1742
|
color: rgb(var(--sd-color-neutral-700, 104 104 104) / var(--tw-text-opacity, 1)) /* Additional text color */;
|
|
1728
1743
|
}
|
|
1729
1744
|
|
|
1730
|
-
.sd-1-5-
|
|
1745
|
+
.sd-1-5-2-prose figure figcaption:last-child, figure.sd-1-5-2-media figcaption:last-child {
|
|
1731
1746
|
margin-top: var(--sd-spacing-3, 0.75rem) /* 12px */;
|
|
1732
1747
|
}
|
|
1733
1748
|
|
|
1734
|
-
.sd-1-5-
|
|
1749
|
+
.sd-1-5-2-prose--inverted figure figcaption, figure.sd-1-5-2-media--inverted figcaption {
|
|
1735
1750
|
|
|
1736
1751
|
color: rgb(var(--sd-color-primary-400, 153 171 208) / var(--tw-text-opacity, 1)) /* Additional text inverted color
|
|
1737
1752
|
Used for inverted pressed interaction text link */;
|
|
@@ -1739,18 +1754,18 @@ Used for inverted pressed interaction text link */;
|
|
|
1739
1754
|
|
|
1740
1755
|
/**
|
|
1741
1756
|
* A table cell is a single cell inside a table, used to display discrete data elements.
|
|
1742
|
-
* @name sd-1-5-
|
|
1757
|
+
* @name sd-1-5-2-table-cell
|
|
1743
1758
|
* @status stable
|
|
1744
1759
|
* @since 1.13
|
|
1745
|
-
* @boolean sd-1-5-
|
|
1746
|
-
* @variant { white | primary-100 | neutral-100 } sd-1-5-
|
|
1747
|
-
* @boolean sd-1-5-
|
|
1748
|
-
* @variant { top | left | right | bottom } sd-1-5-
|
|
1760
|
+
* @boolean sd-1-5-2-table-cell--divider Displays a divider to the right.
|
|
1761
|
+
* @variant { white | primary-100 | neutral-100 } sd-1-5-2-table-cell--bg-... Applies the selected background-color to the table cell. If not selected, a transparent background-color is used per default.
|
|
1762
|
+
* @boolean sd-1-5-2-table-cell--shadow-active Displays the table shadow.
|
|
1763
|
+
* @variant { top | left | right | bottom } sd-1-5-2-table-cell--shadow-... Applies the selected shadow to the table cell.
|
|
1749
1764
|
*/
|
|
1750
1765
|
|
|
1751
|
-
.sd-1-5-
|
|
1752
|
-
.sd-1-5-
|
|
1753
|
-
.sd-1-5-
|
|
1766
|
+
.sd-1-5-2-prose td,
|
|
1767
|
+
.sd-1-5-2-prose th,
|
|
1768
|
+
.sd-1-5-2-table-cell {
|
|
1754
1769
|
border-top-width: 1px;
|
|
1755
1770
|
border-bottom-width: 1px;
|
|
1756
1771
|
border-left-width: 0px;
|
|
@@ -1767,11 +1782,11 @@ Used for divider, teaser, container, ... */;
|
|
|
1767
1782
|
color: rgb(var(--sd-color-black, 24 24 24) / var(--tw-text-opacity, 1)) /* Default text color */;
|
|
1768
1783
|
}
|
|
1769
1784
|
|
|
1770
|
-
.sd-1-5-
|
|
1785
|
+
.sd-1-5-2-table-cell--divider {
|
|
1771
1786
|
border-right-width: 1px;
|
|
1772
1787
|
}
|
|
1773
1788
|
|
|
1774
|
-
.sd-1-5-
|
|
1789
|
+
.sd-1-5-2-table-cell--shadow-top:after, .sd-1-5-2-table-cell--shadow-bottom:after, .sd-1-5-2-table-cell--shadow-left:after, .sd-1-5-2-table-cell--shadow-right:after {
|
|
1775
1790
|
pointer-events: none;
|
|
1776
1791
|
position: absolute;
|
|
1777
1792
|
--tw-gradient-from: rgb(0 0 0 / var(--sd-opacity-10, 0.1)) var(--tw-gradient-from-position);
|
|
@@ -1786,7 +1801,7 @@ Used for divider, teaser, container, ... */;
|
|
|
1786
1801
|
content: var(--tw-content);
|
|
1787
1802
|
}
|
|
1788
1803
|
|
|
1789
|
-
.sd-1-5-
|
|
1804
|
+
.sd-1-5-2-table-cell--shadow-top:after, .sd-1-5-2-table-cell--shadow-bottom:after {
|
|
1790
1805
|
left: var(--sd-spacing-0, 0px) /* No spacing (manually added) */;
|
|
1791
1806
|
right: var(--sd-spacing-0, 0px) /* No spacing (manually added) */;
|
|
1792
1807
|
height: var(--sd-spacing-2-5, 0.625rem) /* 10px */;
|
|
@@ -1794,7 +1809,7 @@ Used for divider, teaser, container, ... */;
|
|
|
1794
1809
|
|
|
1795
1810
|
/* fix that shows line on top of table-cell */
|
|
1796
1811
|
|
|
1797
|
-
.sd-1-5-
|
|
1812
|
+
.sd-1-5-2-table-cell--shadow-top:before, .sd-1-5-2-table-cell--shadow-bottom:before {
|
|
1798
1813
|
position: absolute;
|
|
1799
1814
|
left: var(--sd-spacing-0, 0px) /* No spacing (manually added) */;
|
|
1800
1815
|
display: block;
|
|
@@ -1808,66 +1823,66 @@ Used for divider, teaser, container, ... */;
|
|
|
1808
1823
|
content: var(--tw-content);
|
|
1809
1824
|
}
|
|
1810
1825
|
|
|
1811
|
-
.sd-1-5-
|
|
1826
|
+
.sd-1-5-2-table-cell--shadow-left:after, .sd-1-5-2-table-cell--shadow-right:after {
|
|
1812
1827
|
top: var(--sd-spacing-0, 0px) /* No spacing (manually added) */;
|
|
1813
1828
|
bottom: var(--sd-spacing-0, 0px) /* No spacing (manually added) */;
|
|
1814
1829
|
width: var(--sd-spacing-2-5, 0.625rem) /* 10px */;
|
|
1815
1830
|
}
|
|
1816
1831
|
|
|
1817
|
-
.sd-1-5-
|
|
1832
|
+
.sd-1-5-2-table-cell.sd-1-5-2-table-cell--shadow-active:after {
|
|
1818
1833
|
opacity: 100%;
|
|
1819
1834
|
}
|
|
1820
1835
|
|
|
1821
|
-
.sd-1-5-
|
|
1836
|
+
.sd-1-5-2-table-cell--shadow-top:after {
|
|
1822
1837
|
top: -10px;
|
|
1823
1838
|
background-image: linear-gradient(to top, var(--tw-gradient-stops));
|
|
1824
1839
|
}
|
|
1825
1840
|
|
|
1826
1841
|
/* fix that shows line on top of table-cell */
|
|
1827
1842
|
|
|
1828
|
-
.sd-1-5-
|
|
1843
|
+
.sd-1-5-2-table-cell--shadow-top:before {
|
|
1829
1844
|
bottom: -1px;
|
|
1830
1845
|
}
|
|
1831
1846
|
|
|
1832
|
-
.sd-1-5-
|
|
1847
|
+
.sd-1-5-2-table-cell--shadow-bottom:after {
|
|
1833
1848
|
bottom: -10px;
|
|
1834
1849
|
background-image: linear-gradient(to bottom, var(--tw-gradient-stops));
|
|
1835
1850
|
}
|
|
1836
1851
|
|
|
1837
1852
|
/* fix that shows line on top of table-cell */
|
|
1838
1853
|
|
|
1839
|
-
.sd-1-5-
|
|
1854
|
+
.sd-1-5-2-table-cell--shadow-bottom:before {
|
|
1840
1855
|
top: -1px;
|
|
1841
1856
|
}
|
|
1842
1857
|
|
|
1843
|
-
.sd-1-5-
|
|
1858
|
+
.sd-1-5-2-table-cell--shadow-left:after {
|
|
1844
1859
|
left: -10px;
|
|
1845
1860
|
background-image: linear-gradient(to left, var(--tw-gradient-stops));
|
|
1846
1861
|
}
|
|
1847
1862
|
|
|
1848
|
-
.sd-1-5-
|
|
1863
|
+
.sd-1-5-2-table-cell--shadow-right:after {
|
|
1849
1864
|
right: -10px;
|
|
1850
1865
|
background-image: linear-gradient(to right, var(--tw-gradient-stops));
|
|
1851
1866
|
}
|
|
1852
1867
|
|
|
1853
|
-
.sd-1-5-
|
|
1868
|
+
.sd-1-5-2-table-cell--bg-white {
|
|
1854
1869
|
|
|
1855
1870
|
background-color: rgb(var(--sd-color-white, 255 255 255) / var(--tw-bg-opacity, 1)) /* Default background color (light mode)
Used for inverted button */;
|
|
1856
1871
|
}
|
|
1857
1872
|
|
|
1858
|
-
.sd-1-5-
|
|
1873
|
+
.sd-1-5-2-table-cell--bg-primary-100 {
|
|
1859
1874
|
|
|
1860
1875
|
background-color: rgb(var(--sd-color-primary-100, 236 240 249) / var(--tw-bg-opacity, 1)) /* Additional background color (light mode) */;
|
|
1861
1876
|
}
|
|
1862
1877
|
|
|
1863
|
-
.sd-1-5-
|
|
1878
|
+
.sd-1-5-2-table-cell--bg-neutral-100 {
|
|
1864
1879
|
|
|
1865
1880
|
background-color: rgb(var(--sd-color-neutral-100, 246 246 246) / var(--tw-bg-opacity, 1)) /* Additional background color (light mode) */;
|
|
1866
1881
|
}
|
|
1867
1882
|
|
|
1868
1883
|
/**
|
|
1869
1884
|
* A table is organized structured content, used for scanning, comparing, and analyzing the data.
|
|
1870
|
-
* @name sd-1-5-
|
|
1885
|
+
* @name sd-1-5-2-table
|
|
1871
1886
|
* @status stable
|
|
1872
1887
|
* @since 1.13
|
|
1873
1888
|
*/
|
|
@@ -1876,8 +1891,8 @@ Used for divider, teaser, container, ... */;
|
|
|
1876
1891
|
* Remove inherited styles from table before applying our styles.
|
|
1877
1892
|
*/
|
|
1878
1893
|
|
|
1879
|
-
.sd-1-5-
|
|
1880
|
-
.sd-1-5-
|
|
1894
|
+
.sd-1-5-2-table,
|
|
1895
|
+
.sd-1-5-2-prose table {
|
|
1881
1896
|
all: unset;
|
|
1882
1897
|
display: table;
|
|
1883
1898
|
border-collapse: collapse;
|
|
@@ -1886,13 +1901,13 @@ Used for divider, teaser, container, ... */;
|
|
|
1886
1901
|
border-spacing: var(--tw-border-spacing-x) var(--tw-border-spacing-y);
|
|
1887
1902
|
}
|
|
1888
1903
|
|
|
1889
|
-
.sd-1-5-
|
|
1904
|
+
.sd-1-5-2-table thead tr:first-of-type, .sd-1-5-2-table tfoot tr:first-of-type, .sd-1-5-2-prose table thead tr:first-of-type, .sd-1-5-2-prose table tfoot tr:first-of-type {
|
|
1890
1905
|
position: relative;
|
|
1891
1906
|
}
|
|
1892
1907
|
|
|
1893
1908
|
/* plop:style */
|
|
1894
1909
|
|
|
1895
|
-
.sd-1-5-
|
|
1910
|
+
.sd-1-5-2-prose {
|
|
1896
1911
|
/* Optimize for reading. */
|
|
1897
1912
|
max-width: 80ch;
|
|
1898
1913
|
text-align: left;
|
|
@@ -1900,67 +1915,67 @@ Used for divider, teaser, container, ... */;
|
|
|
1900
1915
|
|
|
1901
1916
|
/* Add default spacings */
|
|
1902
1917
|
|
|
1903
|
-
.sd-1-5-
|
|
1918
|
+
.sd-1-5-2-prose > *:not(:first-child) {
|
|
1904
1919
|
margin-top: var(--sd-spacing-4, 1rem) /* 16px */;
|
|
1905
1920
|
}
|
|
1906
1921
|
|
|
1907
1922
|
/* First element has no margin-top */
|
|
1908
1923
|
|
|
1909
|
-
.sd-1-5-
|
|
1924
|
+
.sd-1-5-2-prose > *:first-child {
|
|
1910
1925
|
margin-top: var(--sd-spacing-0, 0px) /* No spacing (manually added) */;
|
|
1911
1926
|
}
|
|
1912
1927
|
|
|
1913
1928
|
/* headings after a heading have a smaller margin-top */
|
|
1914
1929
|
|
|
1915
|
-
.sd-1-5-
|
|
1930
|
+
.sd-1-5-2-prose > :is(h1, h2, h3, h4, h5):not(#_) + :is(h1, h2, h3, h4, h5) {
|
|
1916
1931
|
/* :not(#_) is a hack to raise specifity, see https://stackoverflow.com/a/61781795 */
|
|
1917
1932
|
margin-top: var(--sd-spacing-2, 0.5rem) /* 8px */;
|
|
1918
1933
|
}
|
|
1919
1934
|
|
|
1920
1935
|
/* Headlines after other non-headlines have a larger margin-top */
|
|
1921
1936
|
|
|
1922
|
-
.sd-1-5-
|
|
1937
|
+
.sd-1-5-2-prose > *:not(:is(h1, h2, h3, h4, h5)) + :is(h1, h2, h3, h4, h5):not(#_) {
|
|
1923
1938
|
margin-top: var(--sd-spacing-8, 2rem) /* 32px */;
|
|
1924
1939
|
}
|
|
1925
1940
|
|
|
1926
1941
|
/* Images and figures lead to a bigger margin-top for the next element */
|
|
1927
1942
|
|
|
1928
|
-
.sd-1-5-
|
|
1929
|
-
.sd-1-5-
|
|
1943
|
+
.sd-1-5-2-prose > figure + *:not(#_),
|
|
1944
|
+
.sd-1-5-2-prose > img + *:not(#_) {
|
|
1930
1945
|
margin-top: var(--sd-spacing-6, 1.5rem) /* 24px */;
|
|
1931
1946
|
}
|
|
1932
1947
|
|
|
1933
1948
|
/* Add styles for elements that are not based on existing CSS styles */
|
|
1934
1949
|
|
|
1935
|
-
.sd-1-5-
|
|
1950
|
+
.sd-1-5-2-prose hr {
|
|
1936
1951
|
height: var(--sd-spacing-0, 0px) /* No spacing (manually added) */;
|
|
1937
1952
|
border-top-width: 1px;
|
|
1938
1953
|
--tw-border-opacity: 1;
|
|
1939
1954
|
border-color: rgb(var(--sd-color-neutral-500, 174 174 174) / var(--tw-border-opacity, 1)) /* Used for disabled state */;
|
|
1940
1955
|
}
|
|
1941
1956
|
|
|
1942
|
-
.sd-1-5-
|
|
1957
|
+
.sd-1-5-2-prose pre {
|
|
1943
1958
|
overflow: auto;
|
|
1944
1959
|
}
|
|
1945
1960
|
|
|
1946
|
-
.sd-1-5-
|
|
1947
|
-
.sd-1-5-
|
|
1961
|
+
.sd-1-5-2-prose blockquote,
|
|
1962
|
+
.sd-1-5-2-prose blockquote > * {
|
|
1948
1963
|
font-size: var(--sd-font-size-xl, 1.5rem) /* 24px */;
|
|
1949
1964
|
}
|
|
1950
1965
|
|
|
1951
|
-
.sd-1-5-
|
|
1966
|
+
.sd-1-5-2-prose blockquote:has(*) *:first-child::before, .sd-1-5-2-prose blockquote:not(:has(*))::before {
|
|
1952
1967
|
content: open-quote;
|
|
1953
1968
|
display: inline;
|
|
1954
1969
|
}
|
|
1955
1970
|
|
|
1956
|
-
.sd-1-5-
|
|
1971
|
+
.sd-1-5-2-prose blockquote:has(*) *:first-child::after, .sd-1-5-2-prose blockquote:not(:has(*))::after {
|
|
1957
1972
|
content: close-quote;
|
|
1958
1973
|
display: inline;
|
|
1959
1974
|
}
|
|
1960
1975
|
|
|
1961
1976
|
/* Fixes for other elements */
|
|
1962
1977
|
|
|
1963
|
-
.sd-1-5-
|
|
1978
|
+
.sd-1-5-2-prose > :is(ul, ol):not(#_) {
|
|
1964
1979
|
/* ul and ol have padding that has to be reset */
|
|
1965
1980
|
padding-top: var(--sd-spacing-0, 0px) /* No spacing (manually added) */;
|
|
1966
1981
|
padding-bottom: var(--sd-spacing-0, 0px) /* No spacing (manually added) */;
|
|
@@ -1968,18 +1983,18 @@ Used for divider, teaser, container, ... */;
|
|
|
1968
1983
|
|
|
1969
1984
|
/* Inverted styles */
|
|
1970
1985
|
|
|
1971
|
-
.sd-1-5-
|
|
1986
|
+
.sd-1-5-2-prose--inverted hr {
|
|
1972
1987
|
--tw-border-opacity: 1;
|
|
1973
1988
|
border-color: rgb(var(--sd-color-white, 255 255 255) / var(--tw-border-opacity, 1)) /* Used for buttons, inverted focus state */;
|
|
1974
1989
|
}
|
|
1975
1990
|
|
|
1976
|
-
.sd-1-5-
|
|
1991
|
+
.sd-1-5-2-prose--inverted pre {
|
|
1977
1992
|
|
|
1978
1993
|
color: rgb(var(--sd-color-white, 255 255 255) / var(--tw-text-opacity, 1)) /* Inverted text color */;
|
|
1979
1994
|
}
|
|
1980
1995
|
|
|
1981
1996
|
/* Full width styles */
|
|
1982
1997
|
|
|
1983
|
-
.sd-1-5-
|
|
1998
|
+
.sd-1-5-2-prose--full-width {
|
|
1984
1999
|
max-width: unset;
|
|
1985
2000
|
}
|