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