@solid-design-system/styles 1.3.0 → 1.3.1
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/CHANGELOG.md +8 -0
- package/cdn/modules/copyright.css +1 -1
- package/cdn/solid-styles.css +1 -1
- package/cdn-versioned/modules/chip.css +1 -1
- package/cdn-versioned/modules/container.css +1 -1
- package/cdn-versioned/modules/copyright.css +1 -1
- package/cdn-versioned/modules/display.css +1 -1
- package/cdn-versioned/modules/flag.css +1 -1
- package/cdn-versioned/modules/footnotes.css +1 -1
- package/cdn-versioned/modules/headline.css +1 -1
- package/cdn-versioned/modules/hidden-links.css +1 -1
- package/cdn-versioned/modules/interactive.css +1 -1
- package/cdn-versioned/modules/leadtext.css +1 -1
- package/cdn-versioned/modules/list.css +1 -1
- package/cdn-versioned/modules/mark.css +1 -1
- package/cdn-versioned/modules/media.css +1 -1
- package/cdn-versioned/modules/meta.css +1 -1
- package/cdn-versioned/modules/pagination.css +1 -1
- package/cdn-versioned/modules/paragraph.css +1 -1
- package/cdn-versioned/modules/prose.css +1 -1
- package/cdn-versioned/modules/status-badge.css +1 -1
- package/cdn-versioned/modules/table-cell.css +1 -1
- package/cdn-versioned/modules/table.css +1 -1
- package/cdn-versioned/solid-styles.css +1 -1
- package/dist/modules/copyright.css +38 -29
- package/dist/solid-styles.css +9 -0
- package/dist-versioned/modules/chip.css +6 -6
- package/dist-versioned/modules/container.css +45 -45
- package/dist-versioned/modules/copyright.css +49 -40
- package/dist-versioned/modules/display.css +9 -9
- package/dist-versioned/modules/flag.css +6 -6
- package/dist-versioned/modules/footnotes.css +26 -26
- package/dist-versioned/modules/headline.css +67 -67
- package/dist-versioned/modules/hidden-links.css +7 -7
- package/dist-versioned/modules/interactive.css +38 -38
- package/dist-versioned/modules/leadtext.css +8 -8
- package/dist-versioned/modules/list.css +47 -47
- package/dist-versioned/modules/mark.css +2 -2
- package/dist-versioned/modules/media.css +7 -7
- package/dist-versioned/modules/meta.css +12 -12
- package/dist-versioned/modules/pagination.css +69 -69
- package/dist-versioned/modules/paragraph.css +8 -8
- package/dist-versioned/modules/prose.css +231 -231
- package/dist-versioned/modules/status-badge.css +8 -8
- package/dist-versioned/modules/table-cell.css +23 -23
- package/dist-versioned/modules/table.css +4 -4
- package/dist-versioned/solid-styles.css +434 -425
- package/package.json +4 -4
|
@@ -1,13 +1,13 @@
|
|
|
1
1
|
/**
|
|
2
2
|
* Used to split large content into several pages, allowing users to navigate between them instead of displaying all information on a single page.
|
|
3
|
-
* @name sd-1-3-
|
|
3
|
+
* @name sd-1-3-1-pagination
|
|
4
4
|
* @status stable
|
|
5
5
|
* @since 1.3
|
|
6
|
-
* @variant { simple } sd-1-3-
|
|
7
|
-
* @boolean sd-1-3-
|
|
6
|
+
* @variant { simple } sd-1-3-1-pagination--... The pagination format.
|
|
7
|
+
* @boolean sd-1-3-1-pagination--inverted Inverts the pagination style.
|
|
8
8
|
*/
|
|
9
9
|
|
|
10
|
-
.sd-1-3-
|
|
10
|
+
.sd-1-3-1-pagination > :not(ul) {
|
|
11
11
|
|
|
12
12
|
position: absolute;
|
|
13
13
|
|
|
@@ -18,7 +18,7 @@
|
|
|
18
18
|
overflow: hidden
|
|
19
19
|
}
|
|
20
20
|
|
|
21
|
-
.sd-1-3-
|
|
21
|
+
.sd-1-3-1-pagination ul {
|
|
22
22
|
|
|
23
23
|
display: flex;
|
|
24
24
|
|
|
@@ -27,7 +27,7 @@
|
|
|
27
27
|
gap: var(--sd-spacing-2, 0.5rem) /* 8px */
|
|
28
28
|
}
|
|
29
29
|
|
|
30
|
-
.sd-1-3-
|
|
30
|
+
.sd-1-3-1-pagination ul li a {
|
|
31
31
|
|
|
32
32
|
display: flex;
|
|
33
33
|
|
|
@@ -46,21 +46,21 @@
|
|
|
46
46
|
transition-duration: 150ms
|
|
47
47
|
}
|
|
48
48
|
|
|
49
|
-
.sd-1-3-
|
|
49
|
+
.sd-1-3-1-pagination ul li a:hover:not([disabled]) {
|
|
50
50
|
|
|
51
51
|
|
|
52
52
|
|
|
53
53
|
color: rgb(var(--sd-color-primary-500, 70 109 175) / var(--tw-text-opacity, 1)) /* Used for hover interaction */
|
|
54
54
|
}
|
|
55
55
|
|
|
56
|
-
.sd-1-3-
|
|
56
|
+
.sd-1-3-1-pagination ul li a:active:not([disabled]) {
|
|
57
57
|
|
|
58
58
|
|
|
59
59
|
|
|
60
60
|
color: rgb(var(--sd-color-primary-800, 5 21 48) / var(--tw-text-opacity, 1)) /* Used for pressed interaction */
|
|
61
61
|
}
|
|
62
62
|
|
|
63
|
-
.sd-1-3-
|
|
63
|
+
.sd-1-3-1-pagination ul li a:focus-visible {
|
|
64
64
|
|
|
65
65
|
outline-style: solid;
|
|
66
66
|
|
|
@@ -73,22 +73,22 @@
|
|
|
73
73
|
|
|
74
74
|
/* Previous and Next */
|
|
75
75
|
|
|
76
|
-
.sd-1-3-
|
|
77
|
-
.sd-1-3-
|
|
76
|
+
.sd-1-3-1-pagination ul li:first-child,
|
|
77
|
+
.sd-1-3-1-pagination ul li:last-child {
|
|
78
78
|
|
|
79
79
|
height: var(--sd-spacing-12, 3rem) /* 48px */;
|
|
80
80
|
|
|
81
81
|
width: var(--sd-spacing-12, 3rem) /* 48px */
|
|
82
82
|
}
|
|
83
83
|
|
|
84
|
-
.sd-1-3-
|
|
84
|
+
.sd-1-3-1-pagination ul li:first-child a, .sd-1-3-1-pagination ul li:last-child a {
|
|
85
85
|
|
|
86
86
|
height: 100%;
|
|
87
87
|
|
|
88
88
|
width: 100%
|
|
89
89
|
}
|
|
90
90
|
|
|
91
|
-
.sd-1-3-
|
|
91
|
+
.sd-1-3-1-pagination ul li:first-child sd-icon, .sd-1-3-1-pagination ul li:last-child sd-icon {
|
|
92
92
|
|
|
93
93
|
height: var(--sd-spacing-6, 1.5rem) /* 24px */;
|
|
94
94
|
|
|
@@ -97,7 +97,7 @@
|
|
|
97
97
|
|
|
98
98
|
/* Numbers */
|
|
99
99
|
|
|
100
|
-
.sd-1-3-
|
|
100
|
+
.sd-1-3-1-pagination ul li {
|
|
101
101
|
|
|
102
102
|
display: flex;
|
|
103
103
|
|
|
@@ -112,7 +112,7 @@
|
|
|
112
112
|
text-align: center
|
|
113
113
|
}
|
|
114
114
|
|
|
115
|
-
.sd-1-3-
|
|
115
|
+
.sd-1-3-1-pagination ul li:not(:has(a sd-icon)) a {
|
|
116
116
|
|
|
117
117
|
height: 100%;
|
|
118
118
|
|
|
@@ -123,7 +123,7 @@
|
|
|
123
123
|
border-bottom-color: transparent
|
|
124
124
|
}
|
|
125
125
|
|
|
126
|
-
.sd-1-3-
|
|
126
|
+
.sd-1-3-1-pagination ul li:not(:has(a sd-icon)) a[aria-current] {
|
|
127
127
|
|
|
128
128
|
--tw-border-opacity: 1;
|
|
129
129
|
|
|
@@ -131,14 +131,14 @@
|
|
|
131
131
|
*/
|
|
132
132
|
}
|
|
133
133
|
|
|
134
|
-
.sd-1-3-
|
|
134
|
+
.sd-1-3-1-pagination ul li a[aria-current] {
|
|
135
135
|
|
|
136
136
|
|
|
137
137
|
|
|
138
138
|
color: rgb(var(--sd-color-black, 24 24 24) / var(--tw-text-opacity, 1)) /* Default text color */
|
|
139
139
|
}
|
|
140
140
|
|
|
141
|
-
.sd-1-3-
|
|
141
|
+
.sd-1-3-1-pagination ul li a[aria-current]:hover:not([disabled]) {
|
|
142
142
|
|
|
143
143
|
|
|
144
144
|
|
|
@@ -147,7 +147,7 @@
|
|
|
147
147
|
|
|
148
148
|
/* Previous and next arrow when it has no href */
|
|
149
149
|
|
|
150
|
-
.sd-1-3-
|
|
150
|
+
.sd-1-3-1-pagination ul li:has(a:not([href]) sd-icon) a {
|
|
151
151
|
|
|
152
152
|
cursor: not-allowed;
|
|
153
153
|
|
|
@@ -156,7 +156,7 @@
|
|
|
156
156
|
color: rgb(var(--sd-color-neutral-500, 174 174 174) / var(--tw-text-opacity, 1)) /* Used for disabled state */
|
|
157
157
|
}
|
|
158
158
|
|
|
159
|
-
.sd-1-3-
|
|
159
|
+
.sd-1-3-1-pagination ul li:has(a:not([href]) sd-icon) a:hover:not([disabled]) {
|
|
160
160
|
|
|
161
161
|
|
|
162
162
|
|
|
@@ -167,57 +167,57 @@
|
|
|
167
167
|
|
|
168
168
|
/* Number which is not current */
|
|
169
169
|
|
|
170
|
-
.sd-1-3-
|
|
170
|
+
.sd-1-3-1-pagination:not(.sd-1-3-1-pagination--simple) ul li:not(:has(a sd-icon)):not(:has(a[aria-current])) {
|
|
171
171
|
|
|
172
172
|
pointer-events: none;
|
|
173
173
|
|
|
174
174
|
position: absolute
|
|
175
175
|
}
|
|
176
176
|
|
|
177
|
-
.sd-1-3-
|
|
177
|
+
.sd-1-3-1-pagination:not(.sd-1-3-1-pagination--simple) ul li:not(:has(a sd-icon)):not(:has(a[aria-current])) a {
|
|
178
178
|
|
|
179
179
|
display: none
|
|
180
180
|
}
|
|
181
181
|
|
|
182
182
|
/* Apply ellipsis to (n + 2 && n - 1) */
|
|
183
183
|
|
|
184
|
-
.sd-1-3-
|
|
185
|
-
.sd-1-3-
|
|
184
|
+
.sd-1-3-1-pagination:not(.sd-1-3-1-pagination--simple) ul li:not(:has(a sd-icon)):has(+ li + li a[aria-current]),
|
|
185
|
+
.sd-1-3-1-pagination:not(.sd-1-3-1-pagination--simple) ul li:not(:has(a sd-icon)):has(a[aria-current]) + li + li:not(:last-child) {
|
|
186
186
|
|
|
187
187
|
pointer-events: auto !important;
|
|
188
188
|
|
|
189
189
|
position: relative !important
|
|
190
190
|
}
|
|
191
191
|
|
|
192
|
-
.sd-1-3-
|
|
193
|
-
.sd-1-3-
|
|
192
|
+
.sd-1-3-1-pagination:not(.sd-1-3-1-pagination--simple) ul li:not(:has(a sd-icon)):has(+ li + li a[aria-current])::after,
|
|
193
|
+
.sd-1-3-1-pagination:not(.sd-1-3-1-pagination--simple) ul li:not(:has(a sd-icon)):has(a[aria-current]) + li + li:not(:last-child)::after {
|
|
194
194
|
|
|
195
195
|
--tw-content: '...';
|
|
196
196
|
|
|
197
197
|
content: var(--tw-content)
|
|
198
198
|
}
|
|
199
199
|
|
|
200
|
-
.sd-1-3-
|
|
201
|
-
.sd-1-3-
|
|
202
|
-
.sd-1-3-
|
|
203
|
-
.sd-1-3-
|
|
200
|
+
.sd-1-3-1-pagination:not(.sd-1-3-1-pagination--simple) ul li:not(:has(a sd-icon)):nth-child(2),
|
|
201
|
+
.sd-1-3-1-pagination:not(.sd-1-3-1-pagination--simple) ul li:not(:has(a sd-icon)):nth-last-child(2),
|
|
202
|
+
.sd-1-3-1-pagination:not(.sd-1-3-1-pagination--simple) ul li:not(:has(a sd-icon)):has(+ li a[aria-current]),
|
|
203
|
+
.sd-1-3-1-pagination:not(.sd-1-3-1-pagination--simple) ul li:not(:has(a sd-icon)):has(a[aria-current]) + li {
|
|
204
204
|
|
|
205
205
|
pointer-events: auto !important;
|
|
206
206
|
|
|
207
207
|
position: relative !important
|
|
208
208
|
}
|
|
209
209
|
|
|
210
|
-
.sd-1-3-
|
|
211
|
-
.sd-1-3-
|
|
212
|
-
.sd-1-3-
|
|
213
|
-
.sd-1-3-
|
|
210
|
+
.sd-1-3-1-pagination:not(.sd-1-3-1-pagination--simple) ul li:not(:has(a sd-icon)):nth-child(2)::after,
|
|
211
|
+
.sd-1-3-1-pagination:not(.sd-1-3-1-pagination--simple) ul li:not(:has(a sd-icon)):nth-last-child(2)::after,
|
|
212
|
+
.sd-1-3-1-pagination:not(.sd-1-3-1-pagination--simple) ul li:not(:has(a sd-icon)):has(+ li a[aria-current])::after,
|
|
213
|
+
.sd-1-3-1-pagination:not(.sd-1-3-1-pagination--simple) ul li:not(:has(a sd-icon)):has(a[aria-current]) + li::after {
|
|
214
214
|
|
|
215
215
|
content: var(--tw-content) !important;
|
|
216
216
|
|
|
217
217
|
display: none !important
|
|
218
218
|
}
|
|
219
219
|
|
|
220
|
-
.sd-1-3-
|
|
220
|
+
.sd-1-3-1-pagination:not(.sd-1-3-1-pagination--simple) ul li:not(:has(a sd-icon)):nth-child(2) a, .sd-1-3-1-pagination:not(.sd-1-3-1-pagination--simple) ul li:not(:has(a sd-icon)):nth-last-child(2) a, .sd-1-3-1-pagination:not(.sd-1-3-1-pagination--simple) ul li:not(:has(a sd-icon)):has(+ li a[aria-current]) a, .sd-1-3-1-pagination:not(.sd-1-3-1-pagination--simple) ul li:not(:has(a sd-icon)):has(a[aria-current]) + li a {
|
|
221
221
|
|
|
222
222
|
display: flex !important
|
|
223
223
|
}
|
|
@@ -226,35 +226,35 @@
|
|
|
226
226
|
|
|
227
227
|
/* Show until the 5th page (forward) */
|
|
228
228
|
|
|
229
|
-
.sd-1-3-
|
|
229
|
+
.sd-1-3-1-pagination:not(.sd-1-3-1-pagination--simple) ul li:not(:has(a sd-icon)):nth-child(-n + 6):has(a[aria-current]) ~ :nth-child(-n + 6) {
|
|
230
230
|
|
|
231
231
|
pointer-events: auto;
|
|
232
232
|
|
|
233
233
|
position: relative
|
|
234
234
|
}
|
|
235
235
|
|
|
236
|
-
.sd-1-3-
|
|
236
|
+
.sd-1-3-1-pagination:not(.sd-1-3-1-pagination--simple) ul li:not(:has(a sd-icon)):nth-child(-n + 6):has(a[aria-current]) ~ :nth-child(-n + 6)::after {
|
|
237
237
|
|
|
238
238
|
content: var(--tw-content);
|
|
239
239
|
|
|
240
240
|
display: none
|
|
241
241
|
}
|
|
242
242
|
|
|
243
|
-
.sd-1-3-
|
|
243
|
+
.sd-1-3-1-pagination:not(.sd-1-3-1-pagination--simple) ul li:not(:has(a sd-icon)):nth-child(-n + 6):has(a[aria-current]) ~ :nth-child(-n + 6) a {
|
|
244
244
|
|
|
245
245
|
display: flex
|
|
246
246
|
}
|
|
247
247
|
|
|
248
248
|
/* Show ellipsis on the 6th */
|
|
249
249
|
|
|
250
|
-
.sd-1-3-
|
|
250
|
+
.sd-1-3-1-pagination:not(.sd-1-3-1-pagination--simple) ul li:not(:has(a sd-icon)):nth-child(-n + 6):has(a[aria-current]) ~ :nth-child(6):not(:last-child) + li {
|
|
251
251
|
|
|
252
252
|
pointer-events: none;
|
|
253
253
|
|
|
254
254
|
position: relative
|
|
255
255
|
}
|
|
256
256
|
|
|
257
|
-
.sd-1-3-
|
|
257
|
+
.sd-1-3-1-pagination:not(.sd-1-3-1-pagination--simple) ul li:not(:has(a sd-icon)):nth-child(-n + 6):has(a[aria-current]) ~ :nth-child(6):not(:last-child) + li::after {
|
|
258
258
|
|
|
259
259
|
--tw-content: '...';
|
|
260
260
|
|
|
@@ -263,77 +263,77 @@
|
|
|
263
263
|
|
|
264
264
|
/* When one of the first 4 pages is selected, show until the 5th page (backward) */
|
|
265
265
|
|
|
266
|
-
.sd-1-3-
|
|
266
|
+
.sd-1-3-1-pagination:not(.sd-1-3-1-pagination--simple) ul li:not(:has(a sd-icon)):nth-child(-n + 6):has(~ :nth-child(-n + 5) a[aria-current]) {
|
|
267
267
|
|
|
268
268
|
pointer-events: auto;
|
|
269
269
|
|
|
270
270
|
position: relative
|
|
271
271
|
}
|
|
272
272
|
|
|
273
|
-
.sd-1-3-
|
|
273
|
+
.sd-1-3-1-pagination:not(.sd-1-3-1-pagination--simple) ul li:not(:has(a sd-icon)):nth-child(-n + 6):has(~ :nth-child(-n + 5) a[aria-current])::after {
|
|
274
274
|
|
|
275
275
|
content: var(--tw-content);
|
|
276
276
|
|
|
277
277
|
display: none
|
|
278
278
|
}
|
|
279
279
|
|
|
280
|
-
.sd-1-3-
|
|
280
|
+
.sd-1-3-1-pagination:not(.sd-1-3-1-pagination--simple) ul li:not(:has(a sd-icon)):nth-child(-n + 6):has(~ :nth-child(-n + 5) a[aria-current]) a {
|
|
281
281
|
|
|
282
282
|
display: flex
|
|
283
283
|
}
|
|
284
284
|
|
|
285
285
|
/* When one of the last 4 pages is selected, show the last 4 pages (forward) */
|
|
286
286
|
|
|
287
|
-
.sd-1-3-
|
|
287
|
+
.sd-1-3-1-pagination:not(.sd-1-3-1-pagination--simple) ul li:not(:has(a sd-icon)):nth-last-child(-n + 5):has(a[aria-current]) ~ :nth-last-child(-n + 5):not(:has(a sd-icon)) {
|
|
288
288
|
|
|
289
289
|
pointer-events: auto;
|
|
290
290
|
|
|
291
291
|
position: relative
|
|
292
292
|
}
|
|
293
293
|
|
|
294
|
-
.sd-1-3-
|
|
294
|
+
.sd-1-3-1-pagination:not(.sd-1-3-1-pagination--simple) ul li:not(:has(a sd-icon)):nth-last-child(-n + 5):has(a[aria-current]) ~ :nth-last-child(-n + 5):not(:has(a sd-icon))::after {
|
|
295
295
|
|
|
296
296
|
content: var(--tw-content);
|
|
297
297
|
|
|
298
298
|
display: none
|
|
299
299
|
}
|
|
300
300
|
|
|
301
|
-
.sd-1-3-
|
|
301
|
+
.sd-1-3-1-pagination:not(.sd-1-3-1-pagination--simple) ul li:not(:has(a sd-icon)):nth-last-child(-n + 5):has(a[aria-current]) ~ :nth-last-child(-n + 5):not(:has(a sd-icon)) a {
|
|
302
302
|
|
|
303
303
|
display: flex
|
|
304
304
|
}
|
|
305
305
|
|
|
306
306
|
/* When one of the last 4 pages is selected, show the last 4 pages (backward) */
|
|
307
307
|
|
|
308
|
-
.sd-1-3-
|
|
308
|
+
.sd-1-3-1-pagination:not(.sd-1-3-1-pagination--simple) ul li:not(:has(a sd-icon)):nth-last-child(-n + 6):has(~ :nth-last-child(-n + 5) a[aria-current]) {
|
|
309
309
|
|
|
310
310
|
pointer-events: auto;
|
|
311
311
|
|
|
312
312
|
position: relative
|
|
313
313
|
}
|
|
314
314
|
|
|
315
|
-
.sd-1-3-
|
|
315
|
+
.sd-1-3-1-pagination:not(.sd-1-3-1-pagination--simple) ul li:not(:has(a sd-icon)):nth-last-child(-n + 6):has(~ :nth-last-child(-n + 5) a[aria-current])::after {
|
|
316
316
|
|
|
317
317
|
content: var(--tw-content);
|
|
318
318
|
|
|
319
319
|
display: none
|
|
320
320
|
}
|
|
321
321
|
|
|
322
|
-
.sd-1-3-
|
|
322
|
+
.sd-1-3-1-pagination:not(.sd-1-3-1-pagination--simple) ul li:not(:has(a sd-icon)):nth-last-child(-n + 6):has(~ :nth-last-child(-n + 5) a[aria-current]) a {
|
|
323
323
|
|
|
324
324
|
display: flex
|
|
325
325
|
}
|
|
326
326
|
|
|
327
327
|
/* Show ellipsis on the 6th to last */
|
|
328
328
|
|
|
329
|
-
.sd-1-3-
|
|
329
|
+
.sd-1-3-1-pagination:not(.sd-1-3-1-pagination--simple) ul li:not(:has(a sd-icon)):nth-last-child(7):has(~ :nth-last-child(-n + 5) a[aria-current]) {
|
|
330
330
|
|
|
331
331
|
pointer-events: none;
|
|
332
332
|
|
|
333
333
|
position: relative
|
|
334
334
|
}
|
|
335
335
|
|
|
336
|
-
.sd-1-3-
|
|
336
|
+
.sd-1-3-1-pagination:not(.sd-1-3-1-pagination--simple) ul li:not(:has(a sd-icon)):nth-last-child(7):has(~ :nth-last-child(-n + 5) a[aria-current])::after {
|
|
337
337
|
|
|
338
338
|
--tw-content: '...';
|
|
339
339
|
|
|
@@ -342,26 +342,26 @@
|
|
|
342
342
|
|
|
343
343
|
/* When it only has 5 numbers + 2 prev & next buttons */
|
|
344
344
|
|
|
345
|
-
.sd-1-3-
|
|
345
|
+
.sd-1-3-1-pagination:not(.sd-1-3-1-pagination--simple) ul:has(> li:last-child:nth-child(-n + 9)) li {
|
|
346
346
|
|
|
347
347
|
pointer-events: auto;
|
|
348
348
|
|
|
349
349
|
position: relative
|
|
350
350
|
}
|
|
351
351
|
|
|
352
|
-
.sd-1-3-
|
|
352
|
+
.sd-1-3-1-pagination:not(.sd-1-3-1-pagination--simple) ul:has(> li:last-child:nth-child(-n + 9)) li::after {
|
|
353
353
|
|
|
354
354
|
content: var(--tw-content);
|
|
355
355
|
|
|
356
356
|
display: none
|
|
357
357
|
}
|
|
358
358
|
|
|
359
|
-
.sd-1-3-
|
|
359
|
+
.sd-1-3-1-pagination:not(.sd-1-3-1-pagination--simple) ul:has(> li:last-child:nth-child(-n + 9)) li a {
|
|
360
360
|
|
|
361
361
|
display: flex
|
|
362
362
|
}
|
|
363
363
|
|
|
364
|
-
.sd-1-3-
|
|
364
|
+
.sd-1-3-1-pagination--simple ul li:nth-child(2) {
|
|
365
365
|
|
|
366
366
|
position: relative;
|
|
367
367
|
|
|
@@ -377,7 +377,7 @@
|
|
|
377
377
|
*/
|
|
378
378
|
}
|
|
379
379
|
|
|
380
|
-
.sd-1-3-
|
|
380
|
+
.sd-1-3-1-pagination--simple ul li:nth-child(2)::after {
|
|
381
381
|
|
|
382
382
|
position: absolute;
|
|
383
383
|
|
|
@@ -392,14 +392,14 @@
|
|
|
392
392
|
content: var(--tw-content)
|
|
393
393
|
}
|
|
394
394
|
|
|
395
|
-
.sd-1-3-
|
|
395
|
+
.sd-1-3-1-pagination--simple ul li:nth-last-child(2) {
|
|
396
396
|
|
|
397
397
|
border-bottom-width: 2px;
|
|
398
398
|
|
|
399
399
|
border-bottom-color: transparent
|
|
400
400
|
}
|
|
401
401
|
|
|
402
|
-
.sd-1-3-
|
|
402
|
+
.sd-1-3-1-pagination--inverted ul li::after {
|
|
403
403
|
|
|
404
404
|
content: var(--tw-content);
|
|
405
405
|
|
|
@@ -408,38 +408,38 @@
|
|
|
408
408
|
color: rgb(var(--sd-color-white, 255 255 255) / var(--tw-text-opacity, 1)) /* Inverted text color */
|
|
409
409
|
}
|
|
410
410
|
|
|
411
|
-
.sd-1-3-
|
|
411
|
+
.sd-1-3-1-pagination--inverted ul li:has(a:not([href]) sd-icon) a {
|
|
412
412
|
|
|
413
413
|
|
|
414
414
|
|
|
415
415
|
color: rgb(var(--sd-color-neutral-600, 136 136 136) / var(--tw-text-opacity, 1)) /* Used for inverted disabled state */
|
|
416
416
|
}
|
|
417
417
|
|
|
418
|
-
.sd-1-3-
|
|
418
|
+
.sd-1-3-1-pagination--inverted ul li:has(a:not([href]) sd-icon) a:hover:not([disabled]) {
|
|
419
419
|
|
|
420
420
|
|
|
421
421
|
|
|
422
422
|
color: rgb(var(--sd-color-neutral-600, 136 136 136) / var(--tw-text-opacity, 1)) /* Used for inverted disabled state */
|
|
423
423
|
}
|
|
424
424
|
|
|
425
|
-
.sd-1-3-
|
|
426
|
-
.sd-1-3-
|
|
425
|
+
.sd-1-3-1-pagination--inverted ul li a,
|
|
426
|
+
.sd-1-3-1-pagination--inverted ul li a[aria-current] {
|
|
427
427
|
|
|
428
428
|
|
|
429
429
|
|
|
430
430
|
color: rgb(var(--sd-color-white, 255 255 255) / var(--tw-text-opacity, 1)) /* Inverted text color */
|
|
431
431
|
}
|
|
432
432
|
|
|
433
|
-
.sd-1-3-
|
|
434
|
-
.sd-1-3-
|
|
433
|
+
.sd-1-3-1-pagination--inverted ul li a:hover:not([disabled]),
|
|
434
|
+
.sd-1-3-1-pagination--inverted ul li a[aria-current]:hover:not([disabled]) {
|
|
435
435
|
|
|
436
436
|
|
|
437
437
|
|
|
438
438
|
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 */
|
|
439
439
|
}
|
|
440
440
|
|
|
441
|
-
.sd-1-3-
|
|
442
|
-
.sd-1-3-
|
|
441
|
+
.sd-1-3-1-pagination--inverted ul li a:active:not([disabled]),
|
|
442
|
+
.sd-1-3-1-pagination--inverted ul li a[aria-current]:active:not([disabled]) {
|
|
443
443
|
|
|
444
444
|
|
|
445
445
|
|
|
@@ -447,19 +447,19 @@
|
|
|
447
447
|
Used for inverted pressed interaction text link */
|
|
448
448
|
}
|
|
449
449
|
|
|
450
|
-
.sd-1-3-
|
|
450
|
+
.sd-1-3-1-pagination--inverted ul li a:focus-visible, .sd-1-3-1-pagination--inverted ul li a[aria-current]:focus-visible {
|
|
451
451
|
|
|
452
452
|
outline-color: rgb(var(--sd-color-white, 255 255 255) / 1) /* Used for buttons, inverted focus state */
|
|
453
453
|
}
|
|
454
454
|
|
|
455
|
-
.sd-1-3-
|
|
455
|
+
.sd-1-3-1-pagination--inverted.sd-1-3-1-pagination--simple ul li {
|
|
456
456
|
|
|
457
457
|
|
|
458
458
|
|
|
459
459
|
color: rgb(var(--sd-color-white, 255 255 255) / var(--tw-text-opacity, 1)) /* Inverted text color */
|
|
460
460
|
}
|
|
461
461
|
|
|
462
|
-
.sd-1-3-
|
|
462
|
+
.sd-1-3-1-pagination--inverted.sd-1-3-1-pagination--simple ul li::after {
|
|
463
463
|
|
|
464
464
|
content: var(--tw-content);
|
|
465
465
|
|
|
@@ -1,28 +1,28 @@
|
|
|
1
1
|
/**
|
|
2
2
|
* A paragraph is used to display blocks of text. It uses the base font size and can contain bold and/or link styles.
|
|
3
|
-
* @name sd-1-3-
|
|
3
|
+
* @name sd-1-3-1-paragraph
|
|
4
4
|
* @status stable
|
|
5
5
|
* @since 1.7
|
|
6
|
-
* @variant { sm } sd-1-3-
|
|
7
|
-
* @boolean sd-1-3-
|
|
6
|
+
* @variant { sm } sd-1-3-1-paragraph--size-... The paragraph's font size.
|
|
7
|
+
* @boolean sd-1-3-1-paragraph--inverted Inverts the paragraph text.
|
|
8
8
|
*/
|
|
9
|
-
.sd-1-3-
|
|
10
|
-
.sd-1-3-
|
|
9
|
+
.sd-1-3-1-paragraph,
|
|
10
|
+
.sd-1-3-1-prose p {
|
|
11
11
|
font-size: var(--sd-font-size-base, 1rem) /* 16px */;
|
|
12
12
|
font-weight: 400;
|
|
13
13
|
line-height: var(--sd-line-height-normal, 150%) /* Used for body copy and smaller titles */;
|
|
14
14
|
|
|
15
15
|
color: rgb(var(--sd-color-black, 24 24 24) / var(--tw-text-opacity, 1)) /* Default text color */
|
|
16
16
|
}
|
|
17
|
-
.sd-1-3-
|
|
17
|
+
.sd-1-3-1-paragraph--size-sm, .sd-1-3-1-prose p--size-sm {
|
|
18
18
|
font-size: var(--sd-font-size-sm, 0.875rem) /* 14px */;
|
|
19
19
|
font-weight: 400;
|
|
20
20
|
line-height: var(--sd-line-height-normal, 150%) /* Used for body copy and smaller titles */;
|
|
21
21
|
|
|
22
22
|
color: rgb(var(--sd-color-black, 24 24 24) / var(--tw-text-opacity, 1)) /* Default text color */
|
|
23
23
|
}
|
|
24
|
-
.sd-1-3-
|
|
25
|
-
.sd-1-3-
|
|
24
|
+
.sd-1-3-1-paragraph--inverted,
|
|
25
|
+
.sd-1-3-1-prose--inverted p {
|
|
26
26
|
|
|
27
27
|
color: rgb(var(--sd-color-white, 255 255 255) / var(--tw-text-opacity, 1)) /* Inverted text color */
|
|
28
28
|
}
|