@stackoverflow/stacks 1.6.6 → 1.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/README.md +86 -2
- package/dist/controllers/index.d.ts +2 -0
- package/dist/controllers/s-banner.d.ts +41 -0
- package/dist/controllers/s-toast.d.ts +97 -0
- package/dist/css/stacks.css +18884 -18912
- package/dist/css/stacks.min.css +1 -1
- package/dist/js/stacks.js +5252 -5260
- package/dist/js/stacks.min.js +1 -1
- package/dist/stacks.d.ts +1 -1
- package/lib/css/components/anchors.less +61 -0
- package/lib/css/components/block-link.less +80 -0
- package/lib/css/components/buttons.less +20 -4
- package/lib/css/components/expandable.less +1 -1
- package/lib/css/components/inputs.less +4 -0
- package/lib/css/components/link.less +104 -0
- package/lib/css/components/post-summary.less +327 -356
- package/lib/css/components/table.less +297 -0
- package/lib/css/stacks-dynamic.less +0 -8
- package/lib/css/stacks-static.less +9 -1
- package/lib/test/s-banner.test.ts +73 -0
- package/lib/test/s-banner.visual.test.ts +61 -0
- package/lib/test/s-button.visual.test.ts +12 -0
- package/lib/test/s-toast.test.ts +63 -0
- package/lib/test/s-toast.visual.test.ts +48 -0
- package/lib/test/s-tooltip.test.ts +62 -0
- package/lib/test/s-tooltip.visual.test.ts +31 -0
- package/lib/ts/controllers/index.ts +2 -0
- package/lib/ts/controllers/s-banner.ts +149 -0
- package/lib/ts/controllers/s-toast.ts +357 -0
- package/lib/ts/index.ts +4 -0
- package/lib/ts/stacks.ts +1 -1
- package/lib/tsconfig.json +2 -2
- package/package.json +35 -19
- package/lib/css/components/links.less +0 -214
- package/lib/css/components/tables.less +0 -313
|
@@ -0,0 +1,80 @@
|
|
|
1
|
+
a.s-block-link,
|
|
2
|
+
.s-block-link {
|
|
3
|
+
@bl-bs: inset var(--_li-block-bs-offset-x, 3px) 0 0 var(--theme-primary-color);
|
|
4
|
+
--_bl-bg: transparent;
|
|
5
|
+
--_bl-fc: var(--black-600);
|
|
6
|
+
--_bl-fc-hover: var(--black-800);
|
|
7
|
+
--_bl-fc-visited: var(--_bl-fc);
|
|
8
|
+
|
|
9
|
+
// CONTEXTUAL STYLES
|
|
10
|
+
.dark-mode({
|
|
11
|
+
&.is-selected {
|
|
12
|
+
--_bl-bg: var(--black-025);
|
|
13
|
+
}
|
|
14
|
+
});
|
|
15
|
+
|
|
16
|
+
// STATES
|
|
17
|
+
&.is-selected {
|
|
18
|
+
--_bl-bg: var(--black-050);
|
|
19
|
+
--_bl-fc: var(--black-800);
|
|
20
|
+
|
|
21
|
+
font-weight: bold;
|
|
22
|
+
}
|
|
23
|
+
|
|
24
|
+
// MODIFIERS
|
|
25
|
+
&&__left,
|
|
26
|
+
&&__right {
|
|
27
|
+
&.is-selected {
|
|
28
|
+
&:focus:not(:focus-visible),
|
|
29
|
+
&:focus-visible {
|
|
30
|
+
outline: none;
|
|
31
|
+
}
|
|
32
|
+
|
|
33
|
+
&:focus-visible {
|
|
34
|
+
box-shadow: @bl-bs, 0 0 0 var(--su-static4) var(--focus-ring-muted);
|
|
35
|
+
}
|
|
36
|
+
|
|
37
|
+
box-shadow: @bl-bs;
|
|
38
|
+
}
|
|
39
|
+
}
|
|
40
|
+
|
|
41
|
+
&&__right {
|
|
42
|
+
&.is-selected {
|
|
43
|
+
--_li-block-bs-offset-x: -3px;
|
|
44
|
+
}
|
|
45
|
+
}
|
|
46
|
+
|
|
47
|
+
// VARIANTS
|
|
48
|
+
&&__danger {
|
|
49
|
+
--_bl-fc: var(--red-500);
|
|
50
|
+
--_bl-fc-hover: var(--red-700);
|
|
51
|
+
}
|
|
52
|
+
|
|
53
|
+
&:active,
|
|
54
|
+
&:hover {
|
|
55
|
+
&,
|
|
56
|
+
&:visited {
|
|
57
|
+
color: var(--_bl-fc-hover);
|
|
58
|
+
}
|
|
59
|
+
}
|
|
60
|
+
|
|
61
|
+
&:visited {
|
|
62
|
+
color: var(--_bl-fc-focus);
|
|
63
|
+
}
|
|
64
|
+
|
|
65
|
+
@focus-styles();
|
|
66
|
+
background-color: var(--_bl-bg); // [1]
|
|
67
|
+
color: var(--_bl-fc);
|
|
68
|
+
|
|
69
|
+
border-radius: 0; // [1]
|
|
70
|
+
border: none; // [1]
|
|
71
|
+
cursor: pointer; // [1]
|
|
72
|
+
display: block;
|
|
73
|
+
font-family: inherit; // [1]
|
|
74
|
+
line-height: inherit; // [1]
|
|
75
|
+
padding: var(--su6) var(--su12);
|
|
76
|
+
text-align: left; // [1]
|
|
77
|
+
width: 100%;
|
|
78
|
+
}
|
|
79
|
+
|
|
80
|
+
// [1] Normalize for when applying to a button
|
|
@@ -25,6 +25,7 @@
|
|
|
25
25
|
--_bu-filled-bg: var(--theme-button-filled-background-color);
|
|
26
26
|
--_bu-filled-bg-active: var(--theme-button-filled-active-background-color);
|
|
27
27
|
--_bu-filled-bg-selected: var(--theme-button-filled-selected-background-color);
|
|
28
|
+
--_bu-filled-bs: inset 0 var(--su-static1) 0 0 hsla(0, 0, 100%, 0.7);
|
|
28
29
|
--_bu-filled-fc: var(--theme-button-filled-color);
|
|
29
30
|
--_bu-filled-fc-active: var(--theme-button-filled-hover-color); // Note: hover color used here intentionally
|
|
30
31
|
--_bu-filled-fc-hover: var(--theme-button-filled-hover-color);
|
|
@@ -44,6 +45,7 @@
|
|
|
44
45
|
// CONTEXTUAL STYLES
|
|
45
46
|
.dark-mode({
|
|
46
47
|
--_bu-bs: none;
|
|
48
|
+
--_bu-filled-bs: var(--_bu-bs);
|
|
47
49
|
});
|
|
48
50
|
|
|
49
51
|
.highcontrast-mode({
|
|
@@ -58,6 +60,7 @@
|
|
|
58
60
|
&[disabled],
|
|
59
61
|
&[aria-disabled="true"] {
|
|
60
62
|
--_bu-bs: none !important;
|
|
63
|
+
--_bu-filled-bs: var(--_bu-bs);
|
|
61
64
|
opacity: var(--_o-disabled-static);
|
|
62
65
|
pointer-events: none;
|
|
63
66
|
text-decoration: none;
|
|
@@ -78,6 +81,8 @@
|
|
|
78
81
|
margin-left: -23px;
|
|
79
82
|
opacity: 0; // [2]
|
|
80
83
|
}
|
|
84
|
+
|
|
85
|
+
padding-left: 2.2em;
|
|
81
86
|
}
|
|
82
87
|
|
|
83
88
|
&.is-selected,
|
|
@@ -118,10 +123,9 @@
|
|
|
118
123
|
|
|
119
124
|
// MODIFIERS
|
|
120
125
|
&&__filled {
|
|
121
|
-
--_bu-bs: inset 0 var(--su-static1) 0 0 hsla(0, 0, 100%, 0.7);
|
|
122
|
-
|
|
123
126
|
border-color: var(--_bu-filled-bc);
|
|
124
127
|
background-color: var(--_bu-filled-bg);
|
|
128
|
+
box-shadow: var(--_bu-filled-bs);
|
|
125
129
|
color: var(--_bu-filled-fc);
|
|
126
130
|
}
|
|
127
131
|
|
|
@@ -145,6 +149,7 @@
|
|
|
145
149
|
--_bu-baw: 0;
|
|
146
150
|
--_bu-br: 0;
|
|
147
151
|
--_bu-bs: none;
|
|
152
|
+
--_bu-filled-bs: var(--_bu-bs);
|
|
148
153
|
--_bu-focus-ring: none;
|
|
149
154
|
--_bu-p: 0;
|
|
150
155
|
|
|
@@ -176,6 +181,7 @@
|
|
|
176
181
|
--_bu-bg: none;
|
|
177
182
|
--_bu-br: 0;
|
|
178
183
|
--_bu-bs: none;
|
|
184
|
+
--_bu-filled-bs: var(--_bu-bs);
|
|
179
185
|
--_bu-fc: unset;
|
|
180
186
|
--_bu-focus-ring: none;
|
|
181
187
|
--_bu-p: 0;
|
|
@@ -242,7 +248,6 @@
|
|
|
242
248
|
--_bu-bg-active: var(--red-100);
|
|
243
249
|
--_bu-bg-hover: var(--red-050);
|
|
244
250
|
--_bu-bg-selected: var(--red-200);
|
|
245
|
-
--_bu-bs: inset 0 var(--su-static1) 0 0 hsla(0, 0%, 100%, 0.4);
|
|
246
251
|
--_bu-fc: var(--red-600);
|
|
247
252
|
--_bu-fc-active: var(--_bu-fc);
|
|
248
253
|
--_bu-fc-hover: var(--red-700);
|
|
@@ -254,6 +259,7 @@
|
|
|
254
259
|
--_bu-filled-bg-active: var(--red-700);
|
|
255
260
|
--_bu-filled-bg-hover: var(--red-600);
|
|
256
261
|
--_bu-filled-bg-selected: var(--red-800);
|
|
262
|
+
--_bu-filled-bs: inset 0 var(--su-static1) 0 0 hsla(0, 0%, 100%, 0.4);
|
|
257
263
|
--_bu-filled-fc: var(--white);
|
|
258
264
|
--_bu-filled-fc-active: var(--_bu-filled-fc);
|
|
259
265
|
--_bu-filled-fc-hover: var(--_bu-filled-fc);
|
|
@@ -285,7 +291,6 @@
|
|
|
285
291
|
--_bu-bg-active: var(--black-050);
|
|
286
292
|
--_bu-bg-hover: var(--black-025);
|
|
287
293
|
--_bu-bg-selected: var(--black-075);
|
|
288
|
-
--_bu-bs: inset 0 var(--su-static1) 0 0 hsla(0, 0%, 100%, 0.4);
|
|
289
294
|
--_bu-fc: var(--black-500);
|
|
290
295
|
--_bu-fc-active: var(--_bu-fc);
|
|
291
296
|
--_bu-fc-hover: var(--black-600);
|
|
@@ -297,6 +302,7 @@
|
|
|
297
302
|
--_bu-filled-bg-active: var(--black-200);
|
|
298
303
|
--_bu-filled-bg-hover: var(--black-150);
|
|
299
304
|
--_bu-filled-bg-selected: var(--black-350);
|
|
305
|
+
--_bu-filled-bs: inset 0 var(--su-static1) 0 0 hsla(0, 0%, 100%, 0.4);
|
|
300
306
|
--_bu-filled-fc: var(--black-700);
|
|
301
307
|
--_bu-filled-fc-active: var(--_bu-filled-fc);
|
|
302
308
|
--_bu-filled-fc-hover: var(--_bu-filled-fc);
|
|
@@ -448,6 +454,16 @@
|
|
|
448
454
|
background-color: var(--_bu-bg-active);
|
|
449
455
|
color: var(--_bu-fc-active);
|
|
450
456
|
}
|
|
457
|
+
|
|
458
|
+
&:visited:not(:hover):not(:focus) {
|
|
459
|
+
&.s-btn__filled {
|
|
460
|
+
background-color: var(--_bu-filled-bg);
|
|
461
|
+
color: var(--_bu-filled-fc);
|
|
462
|
+
}
|
|
463
|
+
|
|
464
|
+
background-color: var(--_bu-bg);
|
|
465
|
+
color: var(--_bu-fc);
|
|
466
|
+
}
|
|
451
467
|
}
|
|
452
468
|
|
|
453
469
|
&:focus,
|
|
@@ -35,7 +35,7 @@
|
|
|
35
35
|
|
|
36
36
|
& .s-expandable--content {
|
|
37
37
|
@supports ((-webkit-clip-path: polygon(0% 0%, 100% 0%, 100% 100%, 0% 100%)) or (clip-path: polygon(0% 0%, 100% 0%, 100% 100%, 0% 100%))) {
|
|
38
|
-
--_ex-content-o:
|
|
38
|
+
--_ex-content-o: 0;
|
|
39
39
|
--_ex-content-transform: none;
|
|
40
40
|
}
|
|
41
41
|
}
|
|
@@ -0,0 +1,104 @@
|
|
|
1
|
+
// TODO we *really* shouldn't be apply styles directly onto `<a>` like this, but
|
|
2
|
+
// it's tech debt that'll take some doing in comsumer's code to pay down.
|
|
3
|
+
a,
|
|
4
|
+
.s-link {
|
|
5
|
+
--_li-fc: var(--theme-link-color);
|
|
6
|
+
--_li-fc-hover: var(--theme-link-color-hover);
|
|
7
|
+
--_li-fc-visited: var(--theme-link-color-visited);
|
|
8
|
+
|
|
9
|
+
// CONTEXTUAL STYLES
|
|
10
|
+
.highcontrast-mode({
|
|
11
|
+
text-decoration: underline;
|
|
12
|
+
});
|
|
13
|
+
|
|
14
|
+
// STATES
|
|
15
|
+
&.s-link {
|
|
16
|
+
// MODIFIERS
|
|
17
|
+
&__dropdown {
|
|
18
|
+
&:after {
|
|
19
|
+
border-width: var(--su-static4); // this needs to come before any below border modifications
|
|
20
|
+
border-bottom-width: 0;
|
|
21
|
+
border-color: currentColor transparent;
|
|
22
|
+
border-style: solid;
|
|
23
|
+
border-top-width: var(--su-static4);
|
|
24
|
+
content: "";
|
|
25
|
+
pointer-events: none;
|
|
26
|
+
position: absolute;
|
|
27
|
+
right: 0;
|
|
28
|
+
top: calc(50% - var(--su-static2));
|
|
29
|
+
z-index: var(--zi-active);
|
|
30
|
+
}
|
|
31
|
+
|
|
32
|
+
padding-right: 0.9em;
|
|
33
|
+
position: relative;
|
|
34
|
+
}
|
|
35
|
+
|
|
36
|
+
&__underlined {
|
|
37
|
+
text-decoration: underline !important;
|
|
38
|
+
}
|
|
39
|
+
|
|
40
|
+
&__visited { // TODO can we get rid of this? It's only in 3 places in Core and seems to me it doesn't even serve a purpose.
|
|
41
|
+
--_li-fc-hover: var(--theme-link-color-hover);
|
|
42
|
+
--_li-fc-visited: var(--theme-link-color-visited);
|
|
43
|
+
}
|
|
44
|
+
|
|
45
|
+
// VARIANTS
|
|
46
|
+
&__danger {
|
|
47
|
+
--_li-fc: var(--red-500);
|
|
48
|
+
--_li-fc-hover: var(--red-400);
|
|
49
|
+
--_li-fc-visited: var(--red-600);
|
|
50
|
+
}
|
|
51
|
+
|
|
52
|
+
&__grayscale {
|
|
53
|
+
--_li-fc: var(--black-800);
|
|
54
|
+
--_li-fc-hover: var(--black-900);
|
|
55
|
+
--_li-fc-visited: var(--black-700);
|
|
56
|
+
}
|
|
57
|
+
|
|
58
|
+
&__inherit {
|
|
59
|
+
--_li-fc: inherit !important;
|
|
60
|
+
--_li-fc-hover: inherit !important;
|
|
61
|
+
--_li-fc-visited: inherit !important;
|
|
62
|
+
}
|
|
63
|
+
|
|
64
|
+
&__muted {
|
|
65
|
+
--_li-fc: var(--black-500);
|
|
66
|
+
--_li-fc-hover: var(--black-600);
|
|
67
|
+
--_li-fc-visited: var(--black-700);
|
|
68
|
+
}
|
|
69
|
+
}
|
|
70
|
+
|
|
71
|
+
// INTERACTION
|
|
72
|
+
&:active,
|
|
73
|
+
&:hover {
|
|
74
|
+
&,
|
|
75
|
+
&:visited {
|
|
76
|
+
color: var(--_li-fc-hover);
|
|
77
|
+
}
|
|
78
|
+
}
|
|
79
|
+
|
|
80
|
+
&:visited {
|
|
81
|
+
color: var(--_li-fc-visited);
|
|
82
|
+
}
|
|
83
|
+
|
|
84
|
+
color: var(--_li-fc);
|
|
85
|
+
cursor: pointer;
|
|
86
|
+
text-decoration: none;
|
|
87
|
+
user-select: auto;
|
|
88
|
+
}
|
|
89
|
+
|
|
90
|
+
.s-link {
|
|
91
|
+
button& {
|
|
92
|
+
&:focus {
|
|
93
|
+
outline: none;
|
|
94
|
+
}
|
|
95
|
+
|
|
96
|
+
appearance: none;
|
|
97
|
+
background: transparent;
|
|
98
|
+
border: 0;
|
|
99
|
+
font-family: inherit;
|
|
100
|
+
line-height: inherit;
|
|
101
|
+
padding: 0;
|
|
102
|
+
user-select: auto;
|
|
103
|
+
}
|
|
104
|
+
}
|