@stackoverflow/stacks 3.0.0-beta.21 → 3.0.0-beta.23
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 +400 -679
- package/dist/css/stacks.min.css +1 -1
- package/lib/components/button/button.less +75 -12
- package/lib/components/loader/loader.less +88 -0
- package/lib/components/post-summary/post-summary.less +219 -386
- package/lib/components/sidebar-widget/sidebar-widget.less +26 -196
- package/lib/stacks-static.less +1 -1
- package/package.json +1 -1
- package/lib/components/spinner/spinner.less +0 -103
|
@@ -15,15 +15,19 @@
|
|
|
15
15
|
// Base
|
|
16
16
|
&:not(&__danger):not(&__featured):not(&__tonal):not(&__link):not(&__unset):not(&__facebook):not(&__github):not(&__google) { // Exclude default styles from impacting these variants
|
|
17
17
|
--_bu-bg: var(--theme-button-color, var(--theme-secondary));
|
|
18
|
-
--_bu-bg-disabled: var(--
|
|
18
|
+
--_bu-bg-disabled: var(--theme-secondary-300);
|
|
19
19
|
--_bu-bg-hover: var(--theme-button-hover-background-color, var(--theme-secondary-500));
|
|
20
20
|
--_bu-fc: var(--white);
|
|
21
|
-
--_bu-fc-disabled: var(--
|
|
21
|
+
--_bu-fc-disabled: var(--theme-secondary-100);
|
|
22
22
|
--_bu-fc-hover: var(--theme-button-hover-color, var(--white));
|
|
23
23
|
--_bu-badge-bg: var(--theme-secondary-500);
|
|
24
24
|
--_bu-badge-fc: var(--white);
|
|
25
|
-
--_bu-badge-bg-disabled: var(--
|
|
26
|
-
--_bu-badge-fc-disabled: var(--
|
|
25
|
+
--_bu-badge-bg-disabled: var(--theme-secondary-300);
|
|
26
|
+
--_bu-badge-fc-disabled: var(--theme-secondary-100);
|
|
27
|
+
|
|
28
|
+
.highcontrast-mode({
|
|
29
|
+
--_bu-bg-disabled: var(--theme-secondary-300);
|
|
30
|
+
});
|
|
27
31
|
|
|
28
32
|
&.s-btn__clear {
|
|
29
33
|
--_bu-bg: transparent;
|
|
@@ -35,11 +39,15 @@
|
|
|
35
39
|
--_bu-fc-hover: var(--_bu-fc);
|
|
36
40
|
--_bu-badge-bg: var(--theme-secondary-100);
|
|
37
41
|
--_bu-badge-fc: var(--theme-secondary-500);
|
|
38
|
-
--_bu-badge-bg-disabled: var(--
|
|
39
|
-
--_bu-badge-fc-disabled: var(--
|
|
42
|
+
--_bu-badge-bg-disabled: var(--theme-secondary-100);
|
|
43
|
+
--_bu-badge-fc-disabled: var(--theme-secondary-300);
|
|
40
44
|
|
|
41
45
|
.highcontrast-mode({
|
|
42
|
-
--_bu-bc: var(--theme-secondary-
|
|
46
|
+
--_bu-bc: var(--theme-secondary-400);
|
|
47
|
+
--_bu-bc-disabled: var(--theme-secondary-300);
|
|
48
|
+
--_bu-bg-disabled: var(--white);
|
|
49
|
+
--_bu-badge-bg-disabled: var(--theme-secondary-100);
|
|
50
|
+
--_bu-badge-fc-disabled: var(--theme-secondary-300);
|
|
43
51
|
});
|
|
44
52
|
}
|
|
45
53
|
}
|
|
@@ -57,6 +65,25 @@
|
|
|
57
65
|
--_bu-badge-bg-disabled: var(--red-300);
|
|
58
66
|
--_bu-badge-fc-disabled: var(--black-100);
|
|
59
67
|
|
|
68
|
+
.dark-mode({
|
|
69
|
+
--_bu-bg-disabled: var(--red-300);
|
|
70
|
+
--_bu-badge-fc-disabled: var(--black-050);
|
|
71
|
+
--_bu-badge-bg-disabled: var(--red-400);
|
|
72
|
+
});
|
|
73
|
+
|
|
74
|
+
.highcontrast-mode({
|
|
75
|
+
--_bu-fc-disabled: var(--black-300);
|
|
76
|
+
--_bu-badge-bg-disabled: var(--red-100);
|
|
77
|
+
--_bu-badge-fc-disabled: var(--black-300);
|
|
78
|
+
});
|
|
79
|
+
|
|
80
|
+
.highcontrast-dark-mode({
|
|
81
|
+
--_bu-bg-disabled: var(--red-300);
|
|
82
|
+
--_bu-fc-disabled: var(--black-050);
|
|
83
|
+
--_bu-badge-fc-disabled: var(--black-050);
|
|
84
|
+
--_bu-badge-bg-disabled: var(--red-400);
|
|
85
|
+
});
|
|
86
|
+
|
|
60
87
|
&.s-btn__clear {
|
|
61
88
|
--_bu-bg: transparent;
|
|
62
89
|
--_bu-bg-disabled: var(--_bu-bg);
|
|
@@ -71,9 +98,23 @@
|
|
|
71
98
|
--_bu-badge-bg-disabled: var(--red-100);
|
|
72
99
|
--_bu-badge-fc-disabled: var(--red-300);
|
|
73
100
|
|
|
101
|
+
.dark-mode({
|
|
102
|
+
--_bu-bg-disabled: var(--_bu-bg);
|
|
103
|
+
--_bu-fc-disabled: var(--red-300);
|
|
104
|
+
--_bu-badge-bg-disabled: var(--red-100);
|
|
105
|
+
--_bu-badge-fc-disabled: var(--red-400);
|
|
106
|
+
});
|
|
107
|
+
|
|
74
108
|
.highcontrast-mode({
|
|
75
109
|
--_bu-bc: var(--red-600);
|
|
76
|
-
--_bu-bc-disabled: var(--
|
|
110
|
+
--_bu-bc-disabled: var(--black-300);
|
|
111
|
+
});
|
|
112
|
+
|
|
113
|
+
.highcontrast-dark-mode({
|
|
114
|
+
--_bu-bg-disabled: var(--black-050);
|
|
115
|
+
--_bu-fc-disabled: var(--red-300);
|
|
116
|
+
--_bu-badge-bg-disabled: var(--red-100);
|
|
117
|
+
--_bu-badge-fc-disabled: var(--red-300);
|
|
77
118
|
});
|
|
78
119
|
}
|
|
79
120
|
}
|
|
@@ -89,22 +130,43 @@
|
|
|
89
130
|
--_bu-badge-fc: var(--black-050);
|
|
90
131
|
--_bu-badge-bg-disabled: var(--purple-300);
|
|
91
132
|
--_bu-badge-fc-disabled: var(--black-100);
|
|
133
|
+
|
|
134
|
+
.dark-mode({
|
|
135
|
+
--_bu-bg-disabled: var(--purple-100);
|
|
136
|
+
--_bu-fc-disabled: var(--purple-400);
|
|
137
|
+
--_bu-badge-fc-disabled: var(--purple-400);
|
|
138
|
+
--_bu-badge-bg-disabled: var(--purple-200);
|
|
139
|
+
});
|
|
140
|
+
|
|
141
|
+
.highcontrast-mode({
|
|
142
|
+
--_bu-fc-disabled: var(--black-300);
|
|
143
|
+
--_bu-badge-fc-disabled: var(--black-300);
|
|
144
|
+
--_bu-badge-bg-disabled: var(--purple-200);
|
|
145
|
+
});
|
|
146
|
+
|
|
147
|
+
.highcontrast-dark-mode({
|
|
148
|
+
--_bu-fc-disabled: var(--purple-400);
|
|
149
|
+
--_bu-badge-bg-disabled: var(--purple-200);
|
|
150
|
+
--_bu-badge-fc-disabled: var(--purple-400);
|
|
151
|
+
});
|
|
92
152
|
}
|
|
93
153
|
|
|
94
154
|
&&__tonal {
|
|
95
155
|
--_bu-bg: var(--black-150);
|
|
96
156
|
--_bu-bg-disabled: var(--black-100);
|
|
97
157
|
--_bu-bg-hover: var(--black-200);
|
|
158
|
+
--_bu-bg-selected: var(--black-200);
|
|
98
159
|
--_bu-fc: var(--black);
|
|
99
160
|
--_bu-fc-disabled: var(--black-300);
|
|
100
161
|
--_bu-fc-selected: var(--_bu-fc);
|
|
101
162
|
--_bu-badge-bg: var(--black-200);
|
|
102
163
|
--_bu-badge-fc: var(--black-600);
|
|
103
164
|
--_bu-badge-bg-disabled: var(--black-100);
|
|
104
|
-
--_bu-badge-fc-disabled: var(--black-
|
|
165
|
+
--_bu-badge-fc-disabled: var(--black-300);
|
|
105
166
|
|
|
106
167
|
.highcontrast-mode({
|
|
107
|
-
--_bu-bc: var(--black-
|
|
168
|
+
--_bu-bc: var(--black-400);
|
|
169
|
+
--_bu-bc-disabled: var(--black-300);
|
|
108
170
|
});
|
|
109
171
|
}
|
|
110
172
|
|
|
@@ -204,8 +266,9 @@
|
|
|
204
266
|
var(--_bu-bg-selected, var(--_bu-bg)),
|
|
205
267
|
var(--white) var(--_bu-bg-selected-overlay-o)
|
|
206
268
|
);
|
|
207
|
-
--_bu-bg-gradient-top: var(--_bu-bg-selected, var(--_bu-bg));
|
|
208
|
-
--_bu-bg-gradient-bottom:
|
|
269
|
+
--_bu-bg-gradient-top: var(--_bu-bg-selected-overlay, var(--_bu-bg));
|
|
270
|
+
--_bu-bg-gradient-bottom: var(--_bu-bg-selected, var(--_bu-bg));
|
|
271
|
+
|
|
209
272
|
|
|
210
273
|
.dark-mode({
|
|
211
274
|
--_bu-bg-selected-overlay-o: 13%;
|
|
@@ -0,0 +1,88 @@
|
|
|
1
|
+
.s-loader {
|
|
2
|
+
--_ld-color: var(--black-600);
|
|
3
|
+
--_ld-gap: calc(var(--_ld-size) / 2);
|
|
4
|
+
--_ld-size: calc(var(--su4) + var(--su1)); // 5px
|
|
5
|
+
--_ld-offset: calc(calc(var(--_ld-size) / 8) * -5); // -5/8ths of the size
|
|
6
|
+
|
|
7
|
+
// MODIFIERS
|
|
8
|
+
&__sm {
|
|
9
|
+
--_ld-size: calc(calc(var(--su8) - var(--su1)) / 2); // 3.5px
|
|
10
|
+
margin-left: var(--su1);
|
|
11
|
+
margin-right: var(--su1);
|
|
12
|
+
}
|
|
13
|
+
|
|
14
|
+
&__lg {
|
|
15
|
+
--_ld-size: var(--su8);
|
|
16
|
+
}
|
|
17
|
+
|
|
18
|
+
// CHILD ELEMENTS – three blocks via pseudo-elements (::before, --sr-text::before, ::after)
|
|
19
|
+
&:before,
|
|
20
|
+
& &--sr-text:before,
|
|
21
|
+
&:after {
|
|
22
|
+
background-color: currentColor;
|
|
23
|
+
content: "";
|
|
24
|
+
display: block;
|
|
25
|
+
height: var(--_ld-size);
|
|
26
|
+
width: var(--_ld-size);
|
|
27
|
+
|
|
28
|
+
animation: loader-animation .8s cubic-bezier(1, 1, 0, 1) infinite;
|
|
29
|
+
}
|
|
30
|
+
|
|
31
|
+
& &--sr-text {
|
|
32
|
+
// Visible flex item so its ::before (middle block) shows; overflow visible so translateY isn't clipped
|
|
33
|
+
display: block;
|
|
34
|
+
flex-shrink: 0;
|
|
35
|
+
height: var(--_ld-size);
|
|
36
|
+
width: var(--_ld-size);
|
|
37
|
+
font-size: 0;
|
|
38
|
+
overflow: visible;
|
|
39
|
+
}
|
|
40
|
+
|
|
41
|
+
& &--sr-text:before {
|
|
42
|
+
animation-delay: .25s;
|
|
43
|
+
}
|
|
44
|
+
|
|
45
|
+
&:after {
|
|
46
|
+
animation-delay: .5s;
|
|
47
|
+
}
|
|
48
|
+
|
|
49
|
+
display: flex;
|
|
50
|
+
gap: var(--_ld-gap);
|
|
51
|
+
margin-top: var(--_ld-gap);
|
|
52
|
+
}
|
|
53
|
+
|
|
54
|
+
@media (prefers-reduced-motion:reduce){
|
|
55
|
+
.s-loader {
|
|
56
|
+
&:before,
|
|
57
|
+
& &--sr-text:before,
|
|
58
|
+
&:after {
|
|
59
|
+
animation: loader-animation-reduced-motion 2s ease-in-out infinite;
|
|
60
|
+
}
|
|
61
|
+
}
|
|
62
|
+
}
|
|
63
|
+
|
|
64
|
+
@keyframes loader-animation {
|
|
65
|
+
0%,1%,99%,to{
|
|
66
|
+
opacity: 0.2;
|
|
67
|
+
transform: translateY(0);
|
|
68
|
+
}
|
|
69
|
+
49%,50%{
|
|
70
|
+
opacity: 1;
|
|
71
|
+
transform: translateY(var(--_ld-offset));
|
|
72
|
+
}
|
|
73
|
+
51%{
|
|
74
|
+
opacity: 0.2;
|
|
75
|
+
transform: translateY(var(--_ld-offset));
|
|
76
|
+
}
|
|
77
|
+
}
|
|
78
|
+
|
|
79
|
+
@keyframes loader-animation-reduced-motion {
|
|
80
|
+
0%,to{
|
|
81
|
+
opacity: 0.3;
|
|
82
|
+
transform: none;
|
|
83
|
+
}
|
|
84
|
+
50%{
|
|
85
|
+
opacity: 1;
|
|
86
|
+
transform: none;
|
|
87
|
+
}
|
|
88
|
+
}
|