@stackoverflow/stacks 2.5.8 → 2.7.0
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/dist/css/stacks.css +91 -65
- package/dist/css/stacks.min.css +1 -1
- package/dist/js/stacks.js +2 -5
- package/lib/components/badge/badge.less +269 -258
- package/lib/components/button/button.less +35 -5
- package/lib/components/expandable/expandable.ts +238 -238
- package/lib/components/input_textarea/input_textarea.less +150 -150
- package/lib/components/link/link.less +136 -136
- package/lib/components/pagination/pagination.less +77 -65
- package/lib/components/sidebar-widget/sidebar-widget.less +34 -73
- package/lib/components/table/table.less +309 -307
- package/lib/components/uploader/uploader.ts +207 -207
- package/lib/exports/color-sets.less +711 -711
- package/lib/exports/color.less +65 -65
- package/lib/stacks.ts +113 -113
- package/lib/test/a11y-test-utils.ts +94 -94
- package/lib/test/test-utils.ts +364 -364
- package/package.json +12 -12
|
@@ -1,65 +1,77 @@
|
|
|
1
|
-
.s-pagination {
|
|
2
|
-
|
|
3
|
-
|
|
4
|
-
|
|
5
|
-
|
|
6
|
-
|
|
7
|
-
|
|
8
|
-
|
|
9
|
-
|
|
10
|
-
|
|
11
|
-
|
|
12
|
-
|
|
13
|
-
|
|
14
|
-
|
|
15
|
-
|
|
16
|
-
|
|
17
|
-
|
|
18
|
-
|
|
19
|
-
|
|
20
|
-
|
|
21
|
-
}
|
|
22
|
-
|
|
23
|
-
|
|
24
|
-
|
|
25
|
-
--_pa-item-
|
|
26
|
-
|
|
27
|
-
|
|
28
|
-
|
|
29
|
-
|
|
30
|
-
|
|
31
|
-
--_pa-item-bg
|
|
32
|
-
--_pa-item-
|
|
33
|
-
|
|
34
|
-
|
|
35
|
-
//
|
|
36
|
-
|
|
37
|
-
|
|
38
|
-
|
|
39
|
-
|
|
40
|
-
|
|
41
|
-
|
|
42
|
-
|
|
43
|
-
|
|
44
|
-
|
|
45
|
-
|
|
46
|
-
|
|
47
|
-
|
|
48
|
-
|
|
49
|
-
|
|
50
|
-
|
|
51
|
-
|
|
52
|
-
|
|
53
|
-
|
|
54
|
-
|
|
55
|
-
|
|
56
|
-
|
|
57
|
-
|
|
58
|
-
|
|
59
|
-
|
|
60
|
-
|
|
61
|
-
|
|
62
|
-
|
|
63
|
-
|
|
64
|
-
|
|
65
|
-
|
|
1
|
+
.s-pagination {
|
|
2
|
+
// reset list styles on ul.s-pagination and .s-pagination ul
|
|
3
|
+
ul,
|
|
4
|
+
ul& {
|
|
5
|
+
list-style: none;
|
|
6
|
+
margin: 0;
|
|
7
|
+
padding: 0;
|
|
8
|
+
}
|
|
9
|
+
|
|
10
|
+
& &--item {
|
|
11
|
+
--_pa-item-bg: transparent;
|
|
12
|
+
--_pa-item-bc: var(--bc-darker);
|
|
13
|
+
--_pa-item-fc: var(--fc-medium);
|
|
14
|
+
--_pa-item-bg-focus: var(--black-400);
|
|
15
|
+
--_pa-item-fc-focus: var(--white);
|
|
16
|
+
--_pa-item-bg-hover: var(--black-225);
|
|
17
|
+
--_pa-item-bc-hover: var(--bc-darker);
|
|
18
|
+
--_pa-item-fc-hover: var(--fc-dark);
|
|
19
|
+
|
|
20
|
+
// CONTEXTUAL STYLES
|
|
21
|
+
.highcontrast-mode({ text-decoration: none; });
|
|
22
|
+
|
|
23
|
+
// MODIFIERS
|
|
24
|
+
&.is-selected {
|
|
25
|
+
--_pa-item-bg: var(--theme-primary);
|
|
26
|
+
--_pa-item-bc: transparent;
|
|
27
|
+
--_pa-item-fc: var(--white);
|
|
28
|
+
--_pa-item-bg-focus: var(--theme-primary-400);
|
|
29
|
+
}
|
|
30
|
+
&.s-pagination--item__clear {
|
|
31
|
+
--_pa-item-bg: transparent;
|
|
32
|
+
--_pa-item-bc: transparent;
|
|
33
|
+
--_pa-item-fc: inherit;
|
|
34
|
+
}
|
|
35
|
+
// override hover styles to match base styles
|
|
36
|
+
&.is-selected,
|
|
37
|
+
&.s-pagination--item__clear {
|
|
38
|
+
--_pa-item-bc-hover: var(--_pa-item-bc);
|
|
39
|
+
--_pa-item-bg-hover: var(--_pa-item-bg);
|
|
40
|
+
--_pa-item-fc-hover: var(--_pa-item-fc);
|
|
41
|
+
}
|
|
42
|
+
|
|
43
|
+
// INTERACTION
|
|
44
|
+
&:hover {
|
|
45
|
+
background-color: var(--_pa-item-bg-hover);
|
|
46
|
+
border-color: var(--_pa-item-bc-hover);
|
|
47
|
+
color: var(--_pa-item-fc-hover);
|
|
48
|
+
}
|
|
49
|
+
|
|
50
|
+
&:focus-visible {
|
|
51
|
+
.focus-styles(true, true);
|
|
52
|
+
}
|
|
53
|
+
|
|
54
|
+
&:focus-visible,
|
|
55
|
+
&.focus-inset-bordered {
|
|
56
|
+
background-color: var(--_pa-item-bg-focus);
|
|
57
|
+
color: var(--_pa-item-fc-focus);
|
|
58
|
+
}
|
|
59
|
+
|
|
60
|
+
background-color: var(--_pa-item-bg);
|
|
61
|
+
border: 1px solid var(--_pa-item-bc);
|
|
62
|
+
color: var(--_pa-item-fc);
|
|
63
|
+
|
|
64
|
+
border-radius: var(--br-sm);
|
|
65
|
+
display: inline-block;
|
|
66
|
+
font-size: var(--fs-body1);
|
|
67
|
+
line-height: var(--lh-xl);
|
|
68
|
+
padding: 0 var(--su8);
|
|
69
|
+
}
|
|
70
|
+
|
|
71
|
+
&,
|
|
72
|
+
ul {
|
|
73
|
+
display: flex;
|
|
74
|
+
flex-wrap: wrap;
|
|
75
|
+
gap: var(--su4);
|
|
76
|
+
}
|
|
77
|
+
}
|
|
@@ -1,20 +1,13 @@
|
|
|
1
1
|
.s-sidebarwidget {
|
|
2
|
-
// COMPONENT-SPECIFIC CONSTANTS
|
|
3
|
-
@sw-content-px: calc(var(--su16) - var(--su1)); // subtract 1px for border
|
|
4
|
-
@sw-content-spacing-inner: var(--su12); // the spacing between two adjacent simple items
|
|
5
|
-
@sw-content-spacing-outer: var(--su16); // the spacing at the start/end of a group of simple items, as well as between a complex item and its separator line
|
|
6
2
|
// COMPONENT-SPECIFIC CUSTOM PROPERTIES
|
|
7
3
|
--_sw-bc: var(--bc-medium);
|
|
8
|
-
--_sw-after-bc: var(--_sw-bc);
|
|
9
|
-
--_sw-content-bc: var(--bc-light);
|
|
10
|
-
--_sw-header-bc: var(--_sw-content-bc);
|
|
11
4
|
|
|
12
5
|
// MODIFIERS
|
|
13
6
|
&:not(.s-anchors) {
|
|
14
|
-
a:not(.button):not(.post-tag):not(.s-btn):not(.s-sidebarwidget--action):not(.s-user-card--link) {
|
|
7
|
+
a:not(.button):not(.s-tag):not(.post-tag):not(.s-btn):not(.s-sidebarwidget--action):not(.s-user-card--link) {
|
|
15
8
|
&,
|
|
16
9
|
&:visited {
|
|
17
|
-
color: var(--black-
|
|
10
|
+
color: var(--black-600);
|
|
18
11
|
}
|
|
19
12
|
}
|
|
20
13
|
}
|
|
@@ -27,10 +20,9 @@
|
|
|
27
20
|
// CHILD ELEMENTS
|
|
28
21
|
& &--action {
|
|
29
22
|
color: var(--blue-400);
|
|
30
|
-
|
|
31
|
-
font-
|
|
32
|
-
|
|
33
|
-
margin: 0 0 var(--su4) var(--su8);
|
|
23
|
+
font-size: var(--fs-body1);
|
|
24
|
+
font-weight: normal;
|
|
25
|
+
margin-left: auto;
|
|
34
26
|
}
|
|
35
27
|
|
|
36
28
|
& &--content {
|
|
@@ -41,28 +33,35 @@
|
|
|
41
33
|
}
|
|
42
34
|
}
|
|
43
35
|
|
|
36
|
+
+ .s-sidebarwidget--content {
|
|
37
|
+
border-top: var(--su-static1) solid var(--bc-light);
|
|
38
|
+
}
|
|
39
|
+
|
|
44
40
|
&.s-sidebarwidget__items {
|
|
45
41
|
&,
|
|
46
42
|
&.s-sidebarwidget__block-items .s-sidebarwidget--item {
|
|
47
43
|
display: block;
|
|
48
44
|
}
|
|
49
45
|
|
|
50
|
-
padding:
|
|
46
|
+
padding: var(--su6) var(--su16); // the items themselves provide part of the spacing, so the content padding needs to account for that
|
|
51
47
|
}
|
|
52
48
|
|
|
53
49
|
&:active {
|
|
54
50
|
outline: none;
|
|
55
51
|
}
|
|
52
|
+
|
|
56
53
|
|
|
57
|
-
border-top: var(--su-static1) solid var(--_sw-content-bc);
|
|
58
54
|
margin: 0;
|
|
59
|
-
padding:
|
|
55
|
+
padding: var(--su16);
|
|
60
56
|
}
|
|
61
57
|
|
|
62
58
|
& &--header {
|
|
63
59
|
&:first-child {
|
|
64
|
-
border-top
|
|
65
|
-
|
|
60
|
+
border-top: none;
|
|
61
|
+
}
|
|
62
|
+
|
|
63
|
+
+ .s-expandable:not(.is-expanded) {
|
|
64
|
+
margin-bottom: var(--su16);
|
|
66
65
|
}
|
|
67
66
|
|
|
68
67
|
&.s-sidebarwidget {
|
|
@@ -100,13 +99,16 @@
|
|
|
100
99
|
outline: none;
|
|
101
100
|
}
|
|
102
101
|
|
|
103
|
-
|
|
104
|
-
border-top: var(--su-static1) solid var(--
|
|
105
|
-
color: var(--black-
|
|
102
|
+
align-items: center;
|
|
103
|
+
border-top: var(--su-static1) solid var(--bc-light);
|
|
104
|
+
color: var(--black-600);
|
|
105
|
+
display: flex;
|
|
106
106
|
font-size: var(--fs-body2);
|
|
107
|
-
font-weight:
|
|
107
|
+
font-weight: bold;
|
|
108
|
+
justify-content: flex-start;
|
|
109
|
+
line-height: var(--lh-xs);
|
|
108
110
|
margin: 0;
|
|
109
|
-
padding:
|
|
111
|
+
padding: var(--su16) var(--su16) 0;
|
|
110
112
|
}
|
|
111
113
|
|
|
112
114
|
& &--item {
|
|
@@ -119,10 +121,10 @@
|
|
|
119
121
|
border-left-style: solid;
|
|
120
122
|
border-left-width: calc(var(--su-static1) * 3); // 3px
|
|
121
123
|
content: '';
|
|
122
|
-
height: calc(100% +
|
|
124
|
+
height: calc(100% + var(--su16));
|
|
123
125
|
left: 0;
|
|
124
|
-
margin-left: calc(
|
|
125
|
-
margin-top: calc(
|
|
126
|
+
margin-left: calc(var(--su16) * -1 - var(--su-static1)); // the orange selection indicator overlaps with the widget border
|
|
127
|
+
margin-top: calc(var(--su16) / 2 * -1);
|
|
126
128
|
position: absolute;
|
|
127
129
|
}
|
|
128
130
|
|
|
@@ -139,7 +141,7 @@
|
|
|
139
141
|
}
|
|
140
142
|
}
|
|
141
143
|
|
|
142
|
-
margin:
|
|
144
|
+
margin: var(--su12) 0;
|
|
143
145
|
}
|
|
144
146
|
|
|
145
147
|
& &--subnav {
|
|
@@ -181,35 +183,14 @@
|
|
|
181
183
|
}
|
|
182
184
|
|
|
183
185
|
border-collapse: separate;
|
|
184
|
-
border-spacing:
|
|
185
|
-
padding:
|
|
186
|
-
}
|
|
187
|
-
|
|
188
|
-
&:before { // [1]
|
|
189
|
-
content: '';
|
|
190
|
-
display: block;
|
|
191
|
-
margin-top: calc(var(--su-static1) * -1); // -1px
|
|
192
|
-
}
|
|
193
|
-
|
|
194
|
-
&:after { // [2]
|
|
195
|
-
border: var(--su-static1) solid var(--_sw-after-bc);
|
|
196
|
-
border-radius: var(--br-sm);
|
|
197
|
-
clip-path: polygon(0% 0%, 100% 0%, 100% 50%, 0% 50%); // [3]
|
|
198
|
-
content: '';
|
|
199
|
-
// TODO: this makes no sense. revisit.
|
|
200
|
-
height: calc(var(--su-static2) + var(--br-sm)); // we need 2px border + 2px border radius to have the correct corner shape
|
|
201
|
-
left: calc(var(--su-static1) * -1); // -1px
|
|
202
|
-
pointer-events: none; // if the top item is clickable, then we don't want to prevent clicking the top 2 pixels
|
|
203
|
-
position: absolute;
|
|
204
|
-
right: calc(var(--su-static1) * -1); // -1px
|
|
205
|
-
top: calc(var(--su-static1) * -1); // -1px
|
|
186
|
+
border-spacing: var(--su16) var(--su12);
|
|
187
|
+
padding: var(--su6) 0 0;
|
|
206
188
|
}
|
|
207
189
|
|
|
208
190
|
background-color: var(--white);
|
|
209
191
|
border: var(--su-static1) solid var(--_sw-bc);
|
|
210
|
-
border-radius: var(--br-
|
|
192
|
+
border-radius: var(--br-md);
|
|
211
193
|
font-size: var(--fs-body1);
|
|
212
|
-
position: relative; // so that it's the positioning parent for the :after
|
|
213
194
|
}
|
|
214
195
|
|
|
215
196
|
// COLOR ALTERNATIVES
|
|
@@ -222,36 +203,16 @@
|
|
|
222
203
|
});
|
|
223
204
|
|
|
224
205
|
&:after,
|
|
225
|
-
.s-sidebarwidget--content,
|
|
206
|
+
.s-sidebarwidget--content + .s-sidebarwidget--content,
|
|
226
207
|
.s-sidebarwidget--header {
|
|
227
208
|
border-color: var(--_sw-bc);
|
|
228
209
|
}
|
|
229
210
|
|
|
230
211
|
.s-sidebarwidget--header {
|
|
231
|
-
background-color: var(~"--@{name}-200");
|
|
232
212
|
color: var(--fc-medium);
|
|
233
213
|
}
|
|
234
214
|
|
|
235
215
|
background-color: var(~"--@{name}-100");
|
|
236
216
|
border-color: var(--_sw-bc);
|
|
237
217
|
}
|
|
238
|
-
}
|
|
239
|
-
|
|
240
|
-
// [1] We must support things like collapsible (in particular invisble) elements, wrapper elements,
|
|
241
|
-
// etc. Therefore every .-content and .-header must stand on its own; we cannot rely on things
|
|
242
|
-
// like :first-child, because the *first* child may not be the first *visible* child, and it may
|
|
243
|
-
// also be the :first-child of some wrapper. This is why every .-header and .-content has a
|
|
244
|
-
// border-top. But because you shouldn't see the first visible item's or header's top border
|
|
245
|
-
// (the widget itself provides for that border), we shift everything up by one pixel with the following pseudo-element.
|
|
246
|
-
|
|
247
|
-
// [2] The top item's divider line sits above the .s-sidebarwidget's top border.
|
|
248
|
-
// We could fix this by using overflow: hidden, but that would constrain users of
|
|
249
|
-
// .s-sidebarwidget to never have things like tooltips, autocompletes or the like that reach
|
|
250
|
-
// outside the widget boundaries.
|
|
251
|
-
// What we do instead is re-create the widget's top border in an absolutely positioned :after,
|
|
252
|
-
// which sits above our item's top border. Technically, a tiny corner of the item's border will
|
|
253
|
-
// still be visible, but at its highest point, this corner has a height of 0.27 pixels. And for
|
|
254
|
-
// this sub-pixel issues, we're talking about different shades of gray. So we can live with that.
|
|
255
|
-
|
|
256
|
-
// [3] In order to perfectly recreate the inner corner shape, our pseudo-element needs
|
|
257
|
-
// the border on all sides. But we can only do that if we're able to hide the bottom part.
|
|
218
|
+
}
|