@solid-design-system/styles 1.5.0 → 1.5.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 +6 -0
- package/cdn/modules/pagination.css +1 -1
- package/cdn/solid-styles.css +1 -1
- package/cdn-versioned/modules/chip.css +1 -1
- package/cdn-versioned/modules/container.css +1 -1
- package/cdn-versioned/modules/copyright.css +1 -1
- package/cdn-versioned/modules/display.css +1 -1
- package/cdn-versioned/modules/flag.css +1 -1
- package/cdn-versioned/modules/footnotes.css +1 -1
- package/cdn-versioned/modules/headline.css +1 -1
- package/cdn-versioned/modules/hidden-links.css +1 -1
- package/cdn-versioned/modules/interactive.css +1 -1
- package/cdn-versioned/modules/leadtext.css +1 -1
- package/cdn-versioned/modules/list.css +1 -1
- package/cdn-versioned/modules/mark.css +1 -1
- package/cdn-versioned/modules/media.css +1 -1
- package/cdn-versioned/modules/meta.css +1 -1
- package/cdn-versioned/modules/pagination.css +1 -1
- package/cdn-versioned/modules/paragraph.css +1 -1
- package/cdn-versioned/modules/prose.css +1 -1
- package/cdn-versioned/modules/status-badge.css +1 -1
- package/cdn-versioned/modules/table-cell.css +1 -1
- package/cdn-versioned/modules/table.css +1 -1
- package/cdn-versioned/solid-styles.css +1 -1
- package/dist/modules/pagination.css +144 -256
- package/dist/solid-styles.css +16 -0
- package/dist-versioned/modules/chip.css +6 -6
- package/dist-versioned/modules/container.css +45 -45
- package/dist-versioned/modules/copyright.css +11 -11
- package/dist-versioned/modules/display.css +9 -9
- package/dist-versioned/modules/flag.css +6 -6
- package/dist-versioned/modules/footnotes.css +26 -26
- package/dist-versioned/modules/headline.css +67 -67
- package/dist-versioned/modules/hidden-links.css +7 -7
- package/dist-versioned/modules/interactive.css +38 -38
- package/dist-versioned/modules/leadtext.css +8 -8
- package/dist-versioned/modules/list.css +47 -47
- package/dist-versioned/modules/mark.css +2 -2
- package/dist-versioned/modules/media.css +7 -7
- package/dist-versioned/modules/meta.css +12 -12
- package/dist-versioned/modules/pagination.css +249 -361
- 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 +476 -460
- package/package.json +1 -1
@@ -1,538 +1,426 @@
|
|
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-5-
|
3
|
+
* @name sd-1-5-1-pagination
|
4
4
|
* @status stable
|
5
5
|
* @since 1.3
|
6
|
-
* @variant { simple } sd-1-5-
|
7
|
-
* @boolean sd-1-5-
|
6
|
+
* @variant { simple } sd-1-5-1-pagination--... The pagination format.
|
7
|
+
* @boolean sd-1-5-1-pagination--inverted Inverts the pagination style.
|
8
8
|
*/
|
9
9
|
|
10
|
-
.sd-1-5-
|
11
|
-
|
12
|
-
|
13
|
-
|
14
|
-
|
15
|
-
|
16
|
-
width: var(--sd-spacing-0-25, 1px) /* 1px */;
|
17
|
-
|
18
|
-
overflow: hidden
|
10
|
+
.sd-1-5-1-pagination > :not(ul) {
|
11
|
+
position: absolute;
|
12
|
+
height: var(--sd-spacing-0-25, 1px) /* 1px */;
|
13
|
+
width: var(--sd-spacing-0-25, 1px) /* 1px */;
|
14
|
+
overflow: hidden;
|
19
15
|
}
|
20
16
|
|
21
|
-
.sd-1-5-
|
22
|
-
|
23
|
-
|
24
|
-
|
25
|
-
align-items: center;
|
26
|
-
|
27
|
-
gap: var(--sd-spacing-2, 0.5rem) /* 8px */
|
17
|
+
.sd-1-5-1-pagination ul {
|
18
|
+
display: flex;
|
19
|
+
align-items: center;
|
20
|
+
gap: var(--sd-spacing-2, 0.5rem) /* 8px */;
|
28
21
|
}
|
29
22
|
|
30
|
-
.sd-1-5-
|
31
|
-
|
32
|
-
|
33
|
-
|
23
|
+
.sd-1-5-1-pagination ul li button {
|
24
|
+
all: unset;
|
25
|
+
border-width: 2px;
|
26
|
+
border-style: solid;
|
27
|
+
border-color: transparent;
|
28
|
+
}
|
34
29
|
|
35
|
-
|
36
|
-
|
37
|
-
justify-content: center;
|
38
|
-
|
39
|
-
|
40
|
-
|
41
|
-
color: rgb(var(--sd-color-primary, 0 53 142) / var(--tw-text-opacity, 1)) /* Primary brand color for text */;
|
42
|
-
|
43
|
-
text-decoration-line: none;
|
44
|
-
|
45
|
-
transition-property: color;
|
46
|
-
|
47
|
-
transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
|
48
|
-
|
49
|
-
transition-duration: 150ms
|
30
|
+
.sd-1-5-1-pagination ul li button:hover:not([disabled]) {
|
31
|
+
cursor: pointer;
|
50
32
|
}
|
51
33
|
|
52
|
-
.sd-1-5-
|
53
|
-
.sd-1-5-
|
54
|
-
|
55
|
-
|
56
|
-
|
57
|
-
|
34
|
+
.sd-1-5-1-pagination ul li a,
|
35
|
+
.sd-1-5-1-pagination ul li button {
|
36
|
+
display: flex;
|
37
|
+
align-items: center;
|
38
|
+
justify-content: center;
|
39
|
+
|
40
|
+
color: rgb(var(--sd-color-primary, 0 53 142) / var(--tw-text-opacity, 1)) /* Primary brand color for text */;
|
41
|
+
text-decoration-line: none;
|
42
|
+
transition-property: color;
|
43
|
+
transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
|
44
|
+
transition-duration: 150ms;
|
58
45
|
}
|
59
46
|
|
60
|
-
.sd-1-5-
|
61
|
-
.sd-1-5-
|
62
|
-
|
63
|
-
|
64
|
-
|
65
|
-
color: rgb(var(--sd-color-primary-800, 5 21 48) / var(--tw-text-opacity, 1)) /* Used for pressed interaction */
|
47
|
+
.sd-1-5-1-pagination ul li a:hover:not([disabled]),
|
48
|
+
.sd-1-5-1-pagination ul li button:hover:not([disabled]) {
|
49
|
+
|
50
|
+
color: rgb(var(--sd-color-primary-500, 70 109 175) / var(--tw-text-opacity, 1)) /* Used for hover interaction */;
|
66
51
|
}
|
67
52
|
|
68
|
-
.sd-1-5-
|
69
|
-
|
70
|
-
|
71
|
-
|
72
|
-
|
73
|
-
|
74
|
-
outline-offset: 2px;
|
53
|
+
.sd-1-5-1-pagination ul li a:active:not([disabled]),
|
54
|
+
.sd-1-5-1-pagination ul li button:active:not([disabled]) {
|
55
|
+
|
56
|
+
color: rgb(var(--sd-color-primary-800, 5 21 48) / var(--tw-text-opacity, 1)) /* Used for pressed interaction */;
|
57
|
+
}
|
75
58
|
|
76
|
-
|
59
|
+
.sd-1-5-1-pagination ul li a:focus-visible, .sd-1-5-1-pagination ul li button:focus-visible {
|
60
|
+
outline-style: solid;
|
61
|
+
outline-width: 2px;
|
62
|
+
outline-offset: 2px;
|
63
|
+
outline-color: rgb(var(--sd-color-primary, 0 53 142) / 1) /* Used for buttons, select field, focus state */;
|
77
64
|
}
|
78
65
|
|
79
66
|
/* Previous and Next */
|
80
67
|
|
81
|
-
.sd-1-5-
|
82
|
-
.sd-1-5-
|
83
|
-
|
84
|
-
|
85
|
-
|
86
|
-
width: var(--sd-spacing-12, 3rem) /* 48px */;
|
87
|
-
|
88
|
-
font-size: var(--sd-font-size-xl, 1.5rem) /* 24px */
|
68
|
+
.sd-1-5-1-pagination ul li:first-child,
|
69
|
+
.sd-1-5-1-pagination ul li:last-child {
|
70
|
+
height: var(--sd-spacing-12, 3rem) /* 48px */;
|
71
|
+
width: var(--sd-spacing-12, 3rem) /* 48px */;
|
72
|
+
font-size: var(--sd-font-size-xl, 1.5rem) /* 24px */;
|
89
73
|
}
|
90
74
|
|
91
|
-
.sd-1-5-
|
92
|
-
.sd-1-5-
|
93
|
-
.sd-1-5-
|
94
|
-
.sd-1-5-
|
95
|
-
|
96
|
-
|
97
|
-
|
98
|
-
width: 100%
|
75
|
+
.sd-1-5-1-pagination ul li:first-child a,
|
76
|
+
.sd-1-5-1-pagination ul li:first-child button,
|
77
|
+
.sd-1-5-1-pagination ul li:last-child a,
|
78
|
+
.sd-1-5-1-pagination ul li:last-child button {
|
79
|
+
height: 100%;
|
80
|
+
width: 100%;
|
99
81
|
}
|
100
82
|
|
101
83
|
/* Numbers */
|
102
84
|
|
103
|
-
.sd-1-5-
|
104
|
-
|
105
|
-
|
106
|
-
|
107
|
-
|
108
|
-
|
109
|
-
|
110
|
-
|
111
|
-
align-items: center;
|
112
|
-
|
113
|
-
justify-content: center;
|
114
|
-
|
115
|
-
text-align: center
|
85
|
+
.sd-1-5-1-pagination ul li {
|
86
|
+
display: flex;
|
87
|
+
height: var(--sd-spacing-8, 2rem) /* 32px */;
|
88
|
+
width: var(--sd-spacing-8, 2rem) /* 32px */;
|
89
|
+
align-items: center;
|
90
|
+
justify-content: center;
|
91
|
+
text-align: center;
|
116
92
|
}
|
117
93
|
|
118
|
-
.sd-1-5-
|
119
|
-
.sd-1-5-
|
120
|
-
|
121
|
-
|
122
|
-
|
123
|
-
|
124
|
-
|
125
|
-
border-bottom-width: 2px;
|
126
|
-
|
127
|
-
border-bottom-color: transparent
|
94
|
+
.sd-1-5-1-pagination ul li:not(:first-child):not(:last-child) a,
|
95
|
+
.sd-1-5-1-pagination ul li:not(:first-child):not(:last-child) button {
|
96
|
+
height: 100%;
|
97
|
+
width: 100%;
|
98
|
+
border-bottom-width: 2px;
|
99
|
+
border-bottom-color: transparent;
|
128
100
|
}
|
129
101
|
|
130
|
-
.sd-1-5-
|
131
|
-
|
132
|
-
|
133
|
-
|
134
|
-
border-bottom-color: rgb(var(--sd-color-accent, 45 157 0) / var(--tw-border-opacity, 1)) /* Used to highlight active/selected elements
|
135
|
-
*/
|
102
|
+
.sd-1-5-1-pagination ul li:not(:first-child):not(:last-child) a[aria-current], .sd-1-5-1-pagination ul li:not(:first-child):not(:last-child) button[aria-current] {
|
103
|
+
--tw-border-opacity: 1;
|
104
|
+
border-bottom-color: rgb(var(--sd-color-accent, 45 157 0) / var(--tw-border-opacity, 1)) /* Used to highlight active/selected elements
|
105
|
+
*/;
|
136
106
|
}
|
137
107
|
|
138
|
-
.sd-1-5-
|
139
|
-
.sd-1-5-
|
140
|
-
|
141
|
-
|
142
|
-
|
143
|
-
color: rgb(var(--sd-color-black, 24 24 24) / var(--tw-text-opacity, 1)) /* Default text color */
|
108
|
+
.sd-1-5-1-pagination ul li a[aria-current],
|
109
|
+
.sd-1-5-1-pagination ul li button[aria-current] {
|
110
|
+
|
111
|
+
color: rgb(var(--sd-color-black, 24 24 24) / var(--tw-text-opacity, 1)) /* Default text color */;
|
144
112
|
}
|
145
113
|
|
146
|
-
.sd-1-5-
|
147
|
-
.sd-1-5-
|
148
|
-
|
149
|
-
|
150
|
-
|
151
|
-
color: rgb(var(--sd-color-black, 24 24 24) / var(--tw-text-opacity, 1)) /* Default text color */
|
114
|
+
.sd-1-5-1-pagination ul li a[aria-current]:hover:not([disabled]),
|
115
|
+
.sd-1-5-1-pagination ul li button[aria-current]:hover:not([disabled]) {
|
116
|
+
|
117
|
+
color: rgb(var(--sd-color-black, 24 24 24) / var(--tw-text-opacity, 1)) /* Default text color */;
|
152
118
|
}
|
153
119
|
|
154
120
|
/* Previous and next arrow when it has no href */
|
155
121
|
|
156
|
-
.sd-1-5-
|
157
|
-
.sd-1-5-
|
158
|
-
.sd-1-5-
|
159
|
-
.sd-1-5-
|
160
|
-
|
161
|
-
|
162
|
-
|
163
|
-
|
164
|
-
|
165
|
-
color: rgb(var(--sd-color-neutral-500, 174 174 174) / var(--tw-text-opacity, 1)) /* Used for disabled state */
|
122
|
+
.sd-1-5-1-pagination ul li:first-child:has(a:not([href])) a,
|
123
|
+
.sd-1-5-1-pagination ul li:last-child:has(a:not([href])) a,
|
124
|
+
.sd-1-5-1-pagination ul li:first-child:has(button[disabled]) button,
|
125
|
+
.sd-1-5-1-pagination ul li:last-child:has(button[disabled]) button {
|
126
|
+
cursor: not-allowed;
|
127
|
+
|
128
|
+
color: rgb(var(--sd-color-neutral-500, 174 174 174) / var(--tw-text-opacity, 1)) /* Used for disabled state */;
|
166
129
|
}
|
167
130
|
|
168
|
-
.sd-1-5-
|
169
|
-
.sd-1-5-
|
170
|
-
.sd-1-5-
|
171
|
-
.sd-1-5-
|
172
|
-
|
173
|
-
|
174
|
-
|
175
|
-
color: rgb(var(--sd-color-neutral-500, 174 174 174) / var(--tw-text-opacity, 1)) /* Used for disabled state */
|
131
|
+
.sd-1-5-1-pagination ul li:first-child:has(a:not([href])) a:hover:not([disabled]),
|
132
|
+
.sd-1-5-1-pagination ul li:last-child:has(a:not([href])) a:hover:not([disabled]),
|
133
|
+
.sd-1-5-1-pagination ul li:first-child:has(button[disabled]) button:hover:not([disabled]),
|
134
|
+
.sd-1-5-1-pagination ul li:last-child:has(button[disabled]) button:hover:not([disabled]) {
|
135
|
+
|
136
|
+
color: rgb(var(--sd-color-neutral-500, 174 174 174) / var(--tw-text-opacity, 1)) /* Used for disabled state */;
|
176
137
|
}
|
177
138
|
|
178
139
|
/* Numbers */
|
179
140
|
|
180
141
|
/* Number which is not current */
|
181
142
|
|
182
|
-
.sd-1-5-
|
183
|
-
|
184
|
-
|
185
|
-
|
186
|
-
position: absolute
|
143
|
+
.sd-1-5-1-pagination:not(.sd-1-5-1-pagination--simple) ul li:not(:first-child):not(:last-child):not(:has(a[aria-current], button[aria-current])) {
|
144
|
+
pointer-events: none;
|
145
|
+
position: absolute;
|
187
146
|
}
|
188
147
|
|
189
|
-
.sd-1-5-
|
190
|
-
.sd-1-5-
|
191
|
-
|
192
|
-
display: none
|
148
|
+
.sd-1-5-1-pagination:not(.sd-1-5-1-pagination--simple) ul li:not(:first-child):not(:last-child):not(:has(a[aria-current], button[aria-current])) a,
|
149
|
+
.sd-1-5-1-pagination:not(.sd-1-5-1-pagination--simple) ul li:not(:first-child):not(:last-child):not(:has(a[aria-current], button[aria-current])) button {
|
150
|
+
display: none;
|
193
151
|
}
|
194
152
|
|
195
153
|
/* Apply ellipsis to (n + 2 && n - 1) */
|
196
154
|
|
197
|
-
.sd-1-5-
|
198
|
-
|
199
|
-
|
200
|
-
|
201
|
-
position: relative !important
|
155
|
+
.sd-1-5-1-pagination:not(.sd-1-5-1-pagination--simple) ul li:not(:first-child):not(:last-child):has(+ li + li a[aria-current], + li + li button[aria-current]), .sd-1-5-1-pagination:not(.sd-1-5-1-pagination--simple) ul li:not(:first-child):not(:last-child):has(a[aria-current], button[aria-current]) + li + li:not(:last-child) {
|
156
|
+
pointer-events: auto !important;
|
157
|
+
position: relative !important;
|
202
158
|
}
|
203
159
|
|
204
|
-
.sd-1-5-
|
205
|
-
|
206
|
-
|
207
|
-
|
208
|
-
content: var(--tw-content)
|
160
|
+
.sd-1-5-1-pagination:not(.sd-1-5-1-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-1-pagination:not(.sd-1-5-1-pagination--simple) ul li:not(:first-child):not(:last-child):has(a[aria-current], button[aria-current]) + li + li:not(:last-child)::after {
|
161
|
+
--tw-content: '...';
|
162
|
+
content: var(--tw-content);
|
209
163
|
}
|
210
164
|
|
211
|
-
.sd-1-5-
|
212
|
-
.sd-1-5-
|
213
|
-
.sd-1-5-
|
165
|
+
.sd-1-5-1-pagination:not(.sd-1-5-1-pagination--simple) ul li:not(:first-child):not(:last-child):nth-child(2),
|
166
|
+
.sd-1-5-1-pagination:not(.sd-1-5-1-pagination--simple) ul li:not(:first-child):not(:last-child):nth-last-child(2),
|
167
|
+
.sd-1-5-1-pagination:not(.sd-1-5-1-pagination--simple) ul li:not(:first-child):not(:last-child):has(
|
214
168
|
+ li a[aria-current],
|
215
169
|
+ li button[aria-current]),
|
216
|
-
.sd-1-5-
|
170
|
+
.sd-1-5-1-pagination:not(.sd-1-5-1-pagination--simple) ul li:not(:first-child):not(:last-child):has(
|
217
171
|
a[aria-current],
|
218
172
|
button[aria-current]) + li {
|
219
|
-
|
220
|
-
|
221
|
-
|
222
|
-
position: relative !important
|
173
|
+
pointer-events: auto !important;
|
174
|
+
position: relative !important;
|
223
175
|
}
|
224
176
|
|
225
|
-
.sd-1-5-
|
226
|
-
.sd-1-5-
|
227
|
-
.sd-1-5-
|
177
|
+
.sd-1-5-1-pagination:not(.sd-1-5-1-pagination--simple) ul li:not(:first-child):not(:last-child):nth-child(2)::after,
|
178
|
+
.sd-1-5-1-pagination:not(.sd-1-5-1-pagination--simple) ul li:not(:first-child):not(:last-child):nth-last-child(2)::after,
|
179
|
+
.sd-1-5-1-pagination:not(.sd-1-5-1-pagination--simple) ul li:not(:first-child):not(:last-child):has(
|
228
180
|
+ li a[aria-current],
|
229
181
|
+ li button[aria-current])::after,
|
230
|
-
.sd-1-5-
|
182
|
+
.sd-1-5-1-pagination:not(.sd-1-5-1-pagination--simple) ul li:not(:first-child):not(:last-child):has(
|
231
183
|
a[aria-current],
|
232
184
|
button[aria-current]) + li::after {
|
233
|
-
|
234
|
-
|
235
|
-
|
236
|
-
display: none !important
|
185
|
+
content: var(--tw-content) !important;
|
186
|
+
display: none !important;
|
237
187
|
}
|
238
188
|
|
239
|
-
.sd-1-5-
|
240
|
-
.sd-1-5-
|
241
|
-
.sd-1-5-
|
242
|
-
.sd-1-5-
|
243
|
-
.sd-1-5-
|
189
|
+
.sd-1-5-1-pagination:not(.sd-1-5-1-pagination--simple) ul li:not(:first-child):not(:last-child):nth-child(2) a,
|
190
|
+
.sd-1-5-1-pagination:not(.sd-1-5-1-pagination--simple) ul li:not(:first-child):not(:last-child):nth-child(2) button,
|
191
|
+
.sd-1-5-1-pagination:not(.sd-1-5-1-pagination--simple) ul li:not(:first-child):not(:last-child):nth-last-child(2) a,
|
192
|
+
.sd-1-5-1-pagination:not(.sd-1-5-1-pagination--simple) ul li:not(:first-child):not(:last-child):nth-last-child(2) button,
|
193
|
+
.sd-1-5-1-pagination:not(.sd-1-5-1-pagination--simple) ul li:not(:first-child):not(:last-child):has(
|
244
194
|
+ li a[aria-current],
|
245
195
|
+ li button[aria-current]) a,
|
246
|
-
.sd-1-5-
|
196
|
+
.sd-1-5-1-pagination:not(.sd-1-5-1-pagination--simple) ul li:not(:first-child):not(:last-child):has(
|
247
197
|
+ li a[aria-current],
|
248
198
|
+ li button[aria-current]) button,
|
249
|
-
.sd-1-5-
|
199
|
+
.sd-1-5-1-pagination:not(.sd-1-5-1-pagination--simple) ul li:not(:first-child):not(:last-child):has(
|
250
200
|
a[aria-current],
|
251
201
|
button[aria-current]) + li a,
|
252
|
-
.sd-1-5-
|
202
|
+
.sd-1-5-1-pagination:not(.sd-1-5-1-pagination--simple) ul li:not(:first-child):not(:last-child):has(
|
253
203
|
a[aria-current],
|
254
204
|
button[aria-current]) + li button {
|
255
|
-
|
256
|
-
display: flex !important
|
205
|
+
display: flex !important;
|
257
206
|
}
|
258
207
|
|
259
208
|
/* When one of the first 4 pages is selected */
|
260
209
|
|
261
210
|
/* Show until the 5th page (forward) */
|
262
211
|
|
263
|
-
.sd-1-5-
|
264
|
-
|
265
|
-
|
266
|
-
|
267
|
-
position: relative
|
212
|
+
.sd-1-5-1-pagination:not(.sd-1-5-1-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) {
|
213
|
+
pointer-events: auto;
|
214
|
+
position: relative;
|
268
215
|
}
|
269
216
|
|
270
|
-
.sd-1-5-
|
271
|
-
|
272
|
-
|
273
|
-
|
274
|
-
display: none
|
217
|
+
.sd-1-5-1-pagination:not(.sd-1-5-1-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 {
|
218
|
+
content: var(--tw-content);
|
219
|
+
display: none;
|
275
220
|
}
|
276
221
|
|
277
|
-
.sd-1-5-
|
278
|
-
.sd-1-5-
|
279
|
-
|
280
|
-
display: flex
|
222
|
+
.sd-1-5-1-pagination:not(.sd-1-5-1-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,
|
223
|
+
.sd-1-5-1-pagination:not(.sd-1-5-1-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 {
|
224
|
+
display: flex;
|
281
225
|
}
|
282
226
|
|
283
227
|
/* Show ellipsis on the 6th */
|
284
228
|
|
285
|
-
.sd-1-5-
|
286
|
-
|
287
|
-
|
288
|
-
|
289
|
-
position: relative
|
229
|
+
.sd-1-5-1-pagination:not(.sd-1-5-1-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 {
|
230
|
+
pointer-events: none;
|
231
|
+
position: relative;
|
290
232
|
}
|
291
233
|
|
292
|
-
.sd-1-5-
|
293
|
-
|
294
|
-
|
295
|
-
|
296
|
-
content: var(--tw-content)
|
234
|
+
.sd-1-5-1-pagination:not(.sd-1-5-1-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 {
|
235
|
+
--tw-content: '...';
|
236
|
+
content: var(--tw-content);
|
297
237
|
}
|
298
238
|
|
299
239
|
/* When one of the first 4 pages is selected, show until the 5th page (backward) */
|
300
240
|
|
301
|
-
.sd-1-5-
|
302
|
-
|
303
|
-
|
304
|
-
|
305
|
-
position: relative
|
241
|
+
.sd-1-5-1-pagination:not(.sd-1-5-1-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]) {
|
242
|
+
pointer-events: auto;
|
243
|
+
position: relative;
|
306
244
|
}
|
307
245
|
|
308
|
-
.sd-1-5-
|
309
|
-
|
310
|
-
|
311
|
-
|
312
|
-
display: none
|
246
|
+
.sd-1-5-1-pagination:not(.sd-1-5-1-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 {
|
247
|
+
content: var(--tw-content);
|
248
|
+
display: none;
|
313
249
|
}
|
314
250
|
|
315
|
-
.sd-1-5-
|
316
|
-
.sd-1-5-
|
317
|
-
|
318
|
-
display: flex
|
251
|
+
.sd-1-5-1-pagination:not(.sd-1-5-1-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,
|
252
|
+
.sd-1-5-1-pagination:not(.sd-1-5-1-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 {
|
253
|
+
display: flex;
|
319
254
|
}
|
320
255
|
|
321
256
|
/* When one of the last 4 pages is selected, show the last 4 pages (forward) */
|
322
257
|
|
323
|
-
.sd-1-5-
|
324
|
-
|
325
|
-
|
326
|
-
|
327
|
-
position: relative
|
258
|
+
.sd-1-5-1-pagination:not(.sd-1-5-1-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) {
|
259
|
+
pointer-events: auto;
|
260
|
+
position: relative;
|
328
261
|
}
|
329
262
|
|
330
|
-
.sd-1-5-
|
331
|
-
|
332
|
-
|
333
|
-
|
334
|
-
display: none
|
263
|
+
.sd-1-5-1-pagination:not(.sd-1-5-1-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 {
|
264
|
+
content: var(--tw-content);
|
265
|
+
display: none;
|
335
266
|
}
|
336
267
|
|
337
|
-
.sd-1-5-
|
338
|
-
.sd-1-5-
|
339
|
-
|
340
|
-
display: flex
|
268
|
+
.sd-1-5-1-pagination:not(.sd-1-5-1-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,
|
269
|
+
.sd-1-5-1-pagination:not(.sd-1-5-1-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 {
|
270
|
+
display: flex;
|
341
271
|
}
|
342
272
|
|
343
273
|
/* When one of the last 4 pages is selected, show the last 4 pages (backward) */
|
344
274
|
|
345
|
-
.sd-1-5-
|
275
|
+
.sd-1-5-1-pagination:not(.sd-1-5-1-pagination--simple) ul li:not(:first-child):not(:last-child):nth-last-child(-n + 6):has(
|
346
276
|
~ :nth-last-child(-n + 5) a[aria-current],
|
347
277
|
~ :nth-last-child(-n + 5) button[aria-current]
|
348
278
|
) {
|
349
|
-
|
350
|
-
|
351
|
-
|
352
|
-
position: relative
|
279
|
+
pointer-events: auto;
|
280
|
+
position: relative;
|
353
281
|
}
|
354
282
|
|
355
|
-
.sd-1-5-
|
283
|
+
.sd-1-5-1-pagination:not(.sd-1-5-1-pagination--simple) ul li:not(:first-child):not(:last-child):nth-last-child(-n + 6):has(
|
356
284
|
~ :nth-last-child(-n + 5) a[aria-current],
|
357
285
|
~ :nth-last-child(-n + 5) button[aria-current]
|
358
286
|
)::after {
|
359
|
-
|
360
|
-
|
361
|
-
|
362
|
-
display: none
|
287
|
+
content: var(--tw-content);
|
288
|
+
display: none;
|
363
289
|
}
|
364
290
|
|
365
|
-
.sd-1-5-
|
291
|
+
.sd-1-5-1-pagination:not(.sd-1-5-1-pagination--simple) ul li:not(:first-child):not(:last-child):nth-last-child(-n + 6):has(
|
366
292
|
~ :nth-last-child(-n + 5) a[aria-current],
|
367
293
|
~ :nth-last-child(-n + 5) button[aria-current]
|
368
294
|
) a,
|
369
|
-
.sd-1-5-
|
295
|
+
.sd-1-5-1-pagination:not(.sd-1-5-1-pagination--simple) ul li:not(:first-child):not(:last-child):nth-last-child(-n + 6):has(
|
370
296
|
~ :nth-last-child(-n + 5) a[aria-current],
|
371
297
|
~ :nth-last-child(-n + 5) button[aria-current]
|
372
298
|
) button {
|
373
|
-
|
374
|
-
display: flex
|
299
|
+
display: flex;
|
375
300
|
}
|
376
301
|
|
377
302
|
/* Show ellipsis on the 6th to last */
|
378
303
|
|
379
|
-
.sd-1-5-
|
304
|
+
.sd-1-5-1-pagination:not(.sd-1-5-1-pagination--simple) ul li:not(:first-child):not(:last-child):nth-last-child(7):has(
|
380
305
|
~ :nth-last-child(-n + 5) a[aria-current],
|
381
306
|
~ :nth-last-child(-n + 5) button[aria-current]
|
382
307
|
) {
|
383
|
-
|
384
|
-
|
385
|
-
|
386
|
-
position: relative
|
308
|
+
pointer-events: none;
|
309
|
+
position: relative;
|
387
310
|
}
|
388
311
|
|
389
|
-
.sd-1-5-
|
312
|
+
.sd-1-5-1-pagination:not(.sd-1-5-1-pagination--simple) ul li:not(:first-child):not(:last-child):nth-last-child(7):has(
|
390
313
|
~ :nth-last-child(-n + 5) a[aria-current],
|
391
314
|
~ :nth-last-child(-n + 5) button[aria-current]
|
392
315
|
)::after {
|
393
|
-
|
394
|
-
|
395
|
-
|
396
|
-
content: var(--tw-content)
|
316
|
+
--tw-content: '...';
|
317
|
+
content: var(--tw-content);
|
397
318
|
}
|
398
319
|
|
399
320
|
/* When it only has 5 numbers + 2 prev & next buttons */
|
400
321
|
|
401
|
-
.sd-1-5-
|
402
|
-
|
403
|
-
|
404
|
-
|
405
|
-
position: relative
|
322
|
+
.sd-1-5-1-pagination:not(.sd-1-5-1-pagination--simple) ul:has(> li:last-child:nth-child(-n + 9)) li {
|
323
|
+
pointer-events: auto;
|
324
|
+
position: relative;
|
406
325
|
}
|
407
326
|
|
408
|
-
.sd-1-5-
|
409
|
-
|
410
|
-
|
411
|
-
|
412
|
-
display: none
|
327
|
+
.sd-1-5-1-pagination:not(.sd-1-5-1-pagination--simple) ul:has(> li:last-child:nth-child(-n + 9)) li::after {
|
328
|
+
content: var(--tw-content);
|
329
|
+
display: none;
|
413
330
|
}
|
414
331
|
|
415
|
-
.sd-1-5-
|
416
|
-
.sd-1-5-
|
417
|
-
|
418
|
-
display: flex
|
332
|
+
.sd-1-5-1-pagination:not(.sd-1-5-1-pagination--simple) ul:has(> li:last-child:nth-child(-n + 9)) li a,
|
333
|
+
.sd-1-5-1-pagination:not(.sd-1-5-1-pagination--simple) ul:has(> li:last-child:nth-child(-n + 9)) li button {
|
334
|
+
display: flex;
|
419
335
|
}
|
420
336
|
|
421
|
-
.sd-1-5-
|
422
|
-
|
423
|
-
|
424
|
-
|
425
|
-
|
426
|
-
|
427
|
-
|
428
|
-
|
429
|
-
border-bottom-width: 2px;
|
430
|
-
|
431
|
-
--tw-border-opacity: 1;
|
432
|
-
|
433
|
-
border-bottom-color: rgb(var(--sd-color-accent, 45 157 0) / var(--tw-border-opacity, 1)) /* Used to highlight active/selected elements
|
434
|
-
*/
|
337
|
+
.sd-1-5-1-pagination--simple ul li:nth-child(2) {
|
338
|
+
position: relative;
|
339
|
+
margin-inline-end: var(--sd-spacing-5, 1.25rem) /* 20px */;
|
340
|
+
width: var(--sd-spacing-8, 2rem) /* 32px */;
|
341
|
+
border-bottom-width: 2px;
|
342
|
+
--tw-border-opacity: 1;
|
343
|
+
border-bottom-color: rgb(var(--sd-color-accent, 45 157 0) / var(--tw-border-opacity, 1)) /* Used to highlight active/selected elements
|
344
|
+
*/;
|
435
345
|
}
|
436
346
|
|
437
|
-
.sd-1-5-
|
438
|
-
|
439
|
-
|
440
|
-
|
441
|
-
|
442
|
-
|
443
|
-
|
444
|
-
|
445
|
-
transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y));
|
446
|
-
|
447
|
-
--tw-content: '/';
|
448
|
-
|
449
|
-
content: var(--tw-content)
|
347
|
+
.sd-1-5-1-pagination--simple ul li:nth-child(2)::after {
|
348
|
+
position: absolute;
|
349
|
+
right: -18px;
|
350
|
+
--tw-scale-y: 1.5;
|
351
|
+
transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y));
|
352
|
+
--tw-content: '/';
|
353
|
+
content: var(--tw-content);
|
450
354
|
}
|
451
355
|
|
452
|
-
.sd-1-5-
|
356
|
+
.sd-1-5-1-pagination--simple ul li:nth-child(2) {
|
453
357
|
|
454
|
-
|
358
|
+
border-bottom-style: solid;
|
359
|
+
}
|
455
360
|
|
456
|
-
|
361
|
+
.sd-1-5-1-pagination--simple ul li:nth-last-child(2) {
|
362
|
+
border-bottom-width: 2px;
|
363
|
+
border-bottom-color: transparent;
|
457
364
|
}
|
458
365
|
|
459
|
-
.sd-1-5-
|
460
|
-
|
461
|
-
|
462
|
-
|
463
|
-
|
464
|
-
|
465
|
-
color: rgb(var(--sd-color-white, 255 255 255) / var(--tw-text-opacity, 1)) /* Inverted text color */
|
366
|
+
.sd-1-5-1-pagination--inverted ul li::after {
|
367
|
+
content: var(--tw-content);
|
368
|
+
|
369
|
+
color: rgb(var(--sd-color-white, 255 255 255) / var(--tw-text-opacity, 1)) /* Inverted text color */;
|
466
370
|
}
|
467
371
|
|
468
|
-
.sd-1-5-
|
469
|
-
.sd-1-5-
|
470
|
-
.sd-1-5-
|
471
|
-
.sd-1-5-
|
472
|
-
|
473
|
-
|
474
|
-
|
475
|
-
color: rgb(var(--sd-color-neutral-600, 136 136 136) / var(--tw-text-opacity, 1)) /* Used for inverted disabled state */
|
372
|
+
.sd-1-5-1-pagination--inverted ul li:first-child:has(a:not([href])) a,
|
373
|
+
.sd-1-5-1-pagination--inverted ul li:last-child:has(a:not([href])) a,
|
374
|
+
.sd-1-5-1-pagination--inverted ul li:first-child:has(button[disabled]) button,
|
375
|
+
.sd-1-5-1-pagination--inverted ul li:last-child:has(button[disabled]) button {
|
376
|
+
|
377
|
+
color: rgb(var(--sd-color-neutral-600, 136 136 136) / var(--tw-text-opacity, 1)) /* Used for inverted disabled state */;
|
476
378
|
}
|
477
379
|
|
478
|
-
.sd-1-5-
|
479
|
-
.sd-1-5-
|
480
|
-
.sd-1-5-
|
481
|
-
.sd-1-5-
|
482
|
-
|
483
|
-
|
484
|
-
|
485
|
-
color: rgb(var(--sd-color-neutral-600, 136 136 136) / var(--tw-text-opacity, 1)) /* Used for inverted disabled state */
|
380
|
+
.sd-1-5-1-pagination--inverted ul li:first-child:has(a:not([href])) a:hover:not([disabled]),
|
381
|
+
.sd-1-5-1-pagination--inverted ul li:last-child:has(a:not([href])) a:hover:not([disabled]),
|
382
|
+
.sd-1-5-1-pagination--inverted ul li:first-child:has(button[disabled]) button:hover:not([disabled]),
|
383
|
+
.sd-1-5-1-pagination--inverted ul li:last-child:has(button[disabled]) button:hover:not([disabled]) {
|
384
|
+
|
385
|
+
color: rgb(var(--sd-color-neutral-600, 136 136 136) / var(--tw-text-opacity, 1)) /* Used for inverted disabled state */;
|
486
386
|
}
|
487
387
|
|
488
|
-
.sd-1-5-
|
489
|
-
.sd-1-5-
|
490
|
-
.sd-1-5-
|
491
|
-
.sd-1-5-
|
492
|
-
|
493
|
-
|
494
|
-
|
495
|
-
color: rgb(var(--sd-color-white, 255 255 255) / var(--tw-text-opacity, 1)) /* Inverted text color */
|
388
|
+
.sd-1-5-1-pagination--inverted ul li a,
|
389
|
+
.sd-1-5-1-pagination--inverted ul li a[aria-current],
|
390
|
+
.sd-1-5-1-pagination--inverted ul li button,
|
391
|
+
.sd-1-5-1-pagination--inverted ul li button[aria-current] {
|
392
|
+
|
393
|
+
color: rgb(var(--sd-color-white, 255 255 255) / var(--tw-text-opacity, 1)) /* Inverted text color */;
|
496
394
|
}
|
497
395
|
|
498
|
-
.sd-1-5-
|
499
|
-
.sd-1-5-
|
500
|
-
.sd-1-5-
|
501
|
-
.sd-1-5-
|
502
|
-
|
503
|
-
|
504
|
-
|
505
|
-
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 */
|
396
|
+
.sd-1-5-1-pagination--inverted ul li a:hover:not([disabled]),
|
397
|
+
.sd-1-5-1-pagination--inverted ul li a[aria-current]:hover:not([disabled]),
|
398
|
+
.sd-1-5-1-pagination--inverted ul li button:hover:not([disabled]),
|
399
|
+
.sd-1-5-1-pagination--inverted ul li button[aria-current]:hover:not([disabled]) {
|
400
|
+
|
401
|
+
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 */;
|
506
402
|
}
|
507
403
|
|
508
|
-
.sd-1-5-
|
509
|
-
.sd-1-5-
|
510
|
-
.sd-1-5-
|
511
|
-
.sd-1-5-
|
512
|
-
|
513
|
-
|
514
|
-
|
515
|
-
color: rgb(var(--sd-color-primary-400, 153 171 208) / var(--tw-text-opacity, 1)) /* Additional text inverted color
|
516
|
-
Used for inverted pressed interaction text link */
|
404
|
+
.sd-1-5-1-pagination--inverted ul li a:active:not([disabled]),
|
405
|
+
.sd-1-5-1-pagination--inverted ul li a[aria-current]:active:not([disabled]),
|
406
|
+
.sd-1-5-1-pagination--inverted ul li button:active:not([disabled]),
|
407
|
+
.sd-1-5-1-pagination--inverted ul li button[aria-current]:active:not([disabled]) {
|
408
|
+
|
409
|
+
color: rgb(var(--sd-color-primary-400, 153 171 208) / var(--tw-text-opacity, 1)) /* Additional text inverted color
|
410
|
+
Used for inverted pressed interaction text link */;
|
517
411
|
}
|
518
412
|
|
519
|
-
.sd-1-5-
|
520
|
-
|
521
|
-
outline-color: rgb(var(--sd-color-white, 255 255 255) / 1) /* Used for buttons, inverted focus state */
|
413
|
+
.sd-1-5-1-pagination--inverted ul li a:focus-visible, .sd-1-5-1-pagination--inverted ul li a[aria-current]:focus-visible, .sd-1-5-1-pagination--inverted ul li button:focus-visible, .sd-1-5-1-pagination--inverted ul li button[aria-current]:focus-visible {
|
414
|
+
outline-color: rgb(var(--sd-color-white, 255 255 255) / 1) /* Used for buttons, inverted focus state */;
|
522
415
|
}
|
523
416
|
|
524
|
-
.sd-1-5-
|
525
|
-
|
526
|
-
|
527
|
-
|
528
|
-
color: rgb(var(--sd-color-white, 255 255 255) / var(--tw-text-opacity, 1)) /* Inverted text color */
|
417
|
+
.sd-1-5-1-pagination--inverted.sd-1-5-1-pagination--simple ul li {
|
418
|
+
|
419
|
+
color: rgb(var(--sd-color-white, 255 255 255) / var(--tw-text-opacity, 1)) /* Inverted text color */;
|
529
420
|
}
|
530
421
|
|
531
|
-
.sd-1-5-
|
532
|
-
|
533
|
-
|
534
|
-
|
535
|
-
|
536
|
-
|
537
|
-
color: rgb(var(--sd-color-white, 255 255 255) / var(--tw-text-opacity, 1)) /* Inverted text color */
|
422
|
+
.sd-1-5-1-pagination--inverted.sd-1-5-1-pagination--simple ul li::after {
|
423
|
+
content: var(--tw-content);
|
424
|
+
|
425
|
+
color: rgb(var(--sd-color-white, 255 255 255) / var(--tw-text-opacity, 1)) /* Inverted text color */;
|
538
426
|
}
|