@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
|
@@ -1,218 +1,48 @@
|
|
|
1
|
-
|
|
2
|
-
// COMPONENT-SPECIFIC CUSTOM PROPERTIES
|
|
3
|
-
--_sw-bc: var(--bc-medium);
|
|
4
|
-
|
|
5
|
-
// MODIFIERS
|
|
6
|
-
&:not(.s-anchors) {
|
|
7
|
-
a:not(.button):not(.s-tag):not(.post-tag):not(.s-btn):not(.s-sidebarwidget--action):not(.s-user-card--link) {
|
|
8
|
-
&,
|
|
9
|
-
&:visited {
|
|
10
|
-
color: var(--black-600);
|
|
11
|
-
}
|
|
12
|
-
}
|
|
13
|
-
}
|
|
14
|
-
|
|
15
|
-
// VARIANTS
|
|
16
|
-
.alternate-color(blue);
|
|
17
|
-
.alternate-color(yellow);
|
|
18
|
-
.alternate-color(green);
|
|
1
|
+
@headings: h1, h2, h3, h4, h5, h6;
|
|
19
2
|
|
|
3
|
+
.s-sidebarwidget {
|
|
20
4
|
// CHILD ELEMENTS
|
|
21
|
-
& &--
|
|
22
|
-
|
|
23
|
-
|
|
24
|
-
|
|
25
|
-
|
|
26
|
-
}
|
|
27
|
-
|
|
28
|
-
& &--content {
|
|
29
|
-
&:not(table) {
|
|
30
|
-
&:not(.s-sidebarwidget__items),
|
|
31
|
-
&:not(.s-sidebarwidget__block-items) .s-sidebarwidget--item {
|
|
32
|
-
display: flex;
|
|
33
|
-
}
|
|
34
|
-
}
|
|
35
|
-
|
|
36
|
-
+ .s-sidebarwidget--content {
|
|
37
|
-
border-top: var(--su-static1) solid var(--bc-light);
|
|
38
|
-
}
|
|
39
|
-
|
|
40
|
-
&.s-sidebarwidget__items {
|
|
41
|
-
&,
|
|
42
|
-
&.s-sidebarwidget__block-items .s-sidebarwidget--item {
|
|
43
|
-
display: block;
|
|
44
|
-
}
|
|
45
|
-
|
|
46
|
-
padding: var(--su6) var(--su16); // the items themselves provide part of the spacing, so the content padding needs to account for that
|
|
5
|
+
& &--content {
|
|
6
|
+
.s-sidebarwidget--action {
|
|
7
|
+
font-size: var(--fs-fine);
|
|
8
|
+
margin-left: var(--su16);
|
|
9
|
+
align-self: flex-start;
|
|
47
10
|
}
|
|
48
11
|
|
|
49
|
-
|
|
50
|
-
|
|
51
|
-
|
|
52
|
-
|
|
53
|
-
|
|
54
|
-
margin: 0;
|
|
55
|
-
padding: var(--su16);
|
|
12
|
+
display: flex;
|
|
13
|
+
padding: var(--su12) 0 var(--su16) 0;
|
|
14
|
+
font-size: var(--fs-body2);
|
|
56
15
|
}
|
|
57
16
|
|
|
58
17
|
& &--header {
|
|
59
|
-
|
|
60
|
-
|
|
61
|
-
|
|
62
|
-
|
|
63
|
-
|
|
64
|
-
margin-bottom: var(--su16);
|
|
65
|
-
}
|
|
66
|
-
|
|
67
|
-
&.s-sidebarwidget {
|
|
68
|
-
&__expanding-control {
|
|
69
|
-
&:before {
|
|
70
|
-
border: calc(var(--su-static4) + var(--su-static1)) solid transparent;
|
|
71
|
-
border-left-color: var(--black-400);
|
|
72
|
-
border-right-width: 0;
|
|
73
|
-
content: '';
|
|
74
|
-
float: left;
|
|
75
|
-
margin-right: var(--su12);
|
|
76
|
-
margin-top: calc(calc(var(--lh-base) * 1em) / 2 - 5px); // 1.3 is our standard line height
|
|
77
|
-
transition: transform 0.3s cubic-bezier(0.4, 0.4, 0.6, 1);
|
|
78
|
-
}
|
|
79
|
-
|
|
80
|
-
&[aria-expanded='true']:before {
|
|
81
|
-
transform: rotate(90deg);
|
|
82
|
-
}
|
|
83
|
-
|
|
84
|
-
cursor: pointer;
|
|
85
|
-
}
|
|
86
|
-
|
|
87
|
-
&__small-bold-text {
|
|
88
|
-
.s-sidebarwidget--action {
|
|
89
|
-
font-weight: normal;
|
|
90
|
-
line-height: calc(var(--lh-base) * var(--fs-caption)); // line-height should be the same as in the outside element, so the header and action baselines line up
|
|
91
|
-
}
|
|
92
|
-
|
|
93
|
-
font-size: var(--fs-caption);
|
|
94
|
-
font-weight: bold;
|
|
95
|
-
}
|
|
18
|
+
> @{headings} {
|
|
19
|
+
margin: 0;
|
|
20
|
+
padding-right: var(--su6);
|
|
21
|
+
font-size: var(--fs-body1);
|
|
22
|
+
font-weight: 500;
|
|
96
23
|
}
|
|
97
24
|
|
|
98
|
-
|
|
99
|
-
|
|
25
|
+
.s-sidebarwidget--action {
|
|
26
|
+
margin-left: auto;
|
|
100
27
|
}
|
|
101
28
|
|
|
102
29
|
align-items: center;
|
|
103
|
-
border-top: var(--su-static1) solid var(--bc-light);
|
|
104
|
-
color: var(--black-600);
|
|
105
30
|
display: flex;
|
|
106
|
-
|
|
107
|
-
font-weight: bold;
|
|
108
|
-
justify-content: flex-start;
|
|
109
|
-
line-height: var(--lh-xs);
|
|
110
|
-
margin: 0;
|
|
111
|
-
padding: var(--su16) var(--su16) 0;
|
|
31
|
+
padding: var(--su4) 0;
|
|
112
32
|
}
|
|
113
33
|
|
|
114
|
-
& &--
|
|
115
|
-
|
|
116
|
-
|
|
117
|
-
&[aria-current="true"],
|
|
118
|
-
&[aria-current="page"] {
|
|
119
|
-
&:before {
|
|
120
|
-
border-left-color: var(--theme-primary);
|
|
121
|
-
border-left-style: solid;
|
|
122
|
-
border-left-width: calc(var(--su-static1) * 3); // 3px
|
|
123
|
-
content: '';
|
|
124
|
-
height: calc(100% + var(--su16));
|
|
125
|
-
left: 0;
|
|
126
|
-
margin-left: var(--sun16); // the orange selection indicator overlaps with the widget border
|
|
127
|
-
margin-top: var(--sun8);
|
|
128
|
-
position: absolute;
|
|
129
|
-
}
|
|
130
|
-
|
|
131
|
-
a { // TODO: this isn't the best way to go about this. There should be a "is current" highlight without font modification for more complex cases
|
|
132
|
-
&,
|
|
133
|
-
&:visited {
|
|
134
|
-
color: inherit;
|
|
135
|
-
}
|
|
136
|
-
}
|
|
137
|
-
|
|
138
|
-
color: var(--black);
|
|
139
|
-
font-weight: bold;
|
|
140
|
-
position: relative;
|
|
141
|
-
}
|
|
34
|
+
& &--footer {
|
|
35
|
+
.s-sidebarwidget--action {
|
|
36
|
+
flex: 1;
|
|
142
37
|
}
|
|
143
|
-
|
|
144
|
-
|
|
145
|
-
|
|
146
|
-
|
|
147
|
-
& &--subnav {
|
|
148
|
-
li {
|
|
149
|
-
&[aria-current="page"],
|
|
150
|
-
&[aria-current="true"] {
|
|
151
|
-
a {
|
|
152
|
-
&,
|
|
153
|
-
&:visited {
|
|
154
|
-
color: inherit;
|
|
155
|
-
}
|
|
156
|
-
}
|
|
157
|
-
|
|
158
|
-
#stacks-internals #bullet-arrow(var(--theme-primary));
|
|
159
|
-
color: var(--black);
|
|
160
|
-
font-weight: bold;
|
|
161
|
-
}
|
|
162
|
-
|
|
163
|
-
#stacks-internals #bullet-arrow(var(--black-225));
|
|
164
|
-
background-position: 0 calc((1.2em - calc(var(--su-static8) + var(--su-static2))) / 2); // 0 ((1.2em - 10) / 2)
|
|
165
|
-
background-repeat: no-repeat;
|
|
166
|
-
background-size: auto calc(var(--su-static8) + var(--su-static2)); // auto 10px
|
|
167
|
-
margin-top: var(--su-static12);
|
|
168
|
-
padding-left: var(--su-static16);
|
|
169
|
-
}
|
|
170
|
-
|
|
171
|
-
list-style-type: none;
|
|
172
|
-
margin-left: var(--su8);
|
|
173
|
-
padding-left: 0;
|
|
38
|
+
|
|
39
|
+
display: flex;
|
|
40
|
+
font-size: var(--fs-body2);
|
|
174
41
|
}
|
|
175
42
|
|
|
176
|
-
&
|
|
177
|
-
|
|
178
|
-
td {
|
|
179
|
-
padding: 0;
|
|
180
|
-
}
|
|
181
|
-
|
|
182
|
-
display: table-row;
|
|
183
|
-
}
|
|
184
|
-
|
|
185
|
-
border-collapse: separate;
|
|
186
|
-
border-spacing: var(--su16) var(--su12);
|
|
187
|
-
padding: var(--su6) 0 0;
|
|
43
|
+
& &--action:is(a, button) {
|
|
44
|
+
white-space: nowrap;
|
|
188
45
|
}
|
|
189
46
|
|
|
190
|
-
background-color: var(--white);
|
|
191
|
-
border: var(--su-static1) solid var(--_sw-bc);
|
|
192
|
-
border-radius: var(--br-md);
|
|
193
47
|
font-size: var(--fs-body1);
|
|
194
|
-
}
|
|
195
|
-
|
|
196
|
-
// COLOR ALTERNATIVES
|
|
197
|
-
.alternate-color(@name) {
|
|
198
|
-
&.s-sidebarwidget__@{name} {
|
|
199
|
-
--_sw-bc: var(~"--@{name}-300");
|
|
200
|
-
|
|
201
|
-
.highcontrast-mode({
|
|
202
|
-
--_sw-bc: var(~"--@{name}-500");
|
|
203
|
-
});
|
|
204
|
-
|
|
205
|
-
&:after,
|
|
206
|
-
.s-sidebarwidget--content + .s-sidebarwidget--content,
|
|
207
|
-
.s-sidebarwidget--header {
|
|
208
|
-
border-color: var(--_sw-bc);
|
|
209
|
-
}
|
|
210
|
-
|
|
211
|
-
.s-sidebarwidget--header {
|
|
212
|
-
color: var(--fc-medium);
|
|
213
|
-
}
|
|
214
|
-
|
|
215
|
-
background-color: var(~"--@{name}-100");
|
|
216
|
-
border-color: var(--_sw-bc);
|
|
217
|
-
}
|
|
218
48
|
}
|
package/lib/stacks-static.less
CHANGED
|
@@ -42,7 +42,7 @@
|
|
|
42
42
|
@import "components/prose/prose.less";
|
|
43
43
|
@import "components/select/select.less";
|
|
44
44
|
@import "components/sidebar-widget/sidebar-widget.less";
|
|
45
|
-
@import "components/
|
|
45
|
+
@import "components/loader/loader.less";
|
|
46
46
|
@import "components/table/table.less";
|
|
47
47
|
@import "components/table-container/table-container.less";
|
|
48
48
|
@import "components/tag/tag.less";
|
package/package.json
CHANGED
|
@@ -1,7 +1,7 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@stackoverflow/stacks",
|
|
3
3
|
"description": "Stack Overflow’s CSS and Design Pattern Library. Stacks is an atomic CSS library with classes and components for rapidly building Stack Overflow.",
|
|
4
|
-
"version": "3.0.0-beta.
|
|
4
|
+
"version": "3.0.0-beta.23",
|
|
5
5
|
"files": [
|
|
6
6
|
"dist",
|
|
7
7
|
"lib",
|
|
@@ -1,103 +0,0 @@
|
|
|
1
|
-
.s-spinner {
|
|
2
|
-
--_sp-baw: calc(var(--su-static1) * 3); // 3px
|
|
3
|
-
--_sp-size: var(--su-static24);
|
|
4
|
-
|
|
5
|
-
// MODIFIERS
|
|
6
|
-
&&__xs {
|
|
7
|
-
--_sp-baw: var(--su-static1);
|
|
8
|
-
--_sp-size: var(--su-static12);
|
|
9
|
-
}
|
|
10
|
-
|
|
11
|
-
&&__sm {
|
|
12
|
-
--_sp-baw: var(--su-static2);
|
|
13
|
-
--_sp-size: var(--su-static16);
|
|
14
|
-
}
|
|
15
|
-
|
|
16
|
-
&&__md {
|
|
17
|
-
--_sp-baw: var(--su-static4);
|
|
18
|
-
--_sp-size: var(--su-static32);
|
|
19
|
-
}
|
|
20
|
-
|
|
21
|
-
&&__lg {
|
|
22
|
-
--_sp-baw: var(--su-static6);
|
|
23
|
-
--_sp-size: var(--su-static48);
|
|
24
|
-
}
|
|
25
|
-
|
|
26
|
-
// CHILD ELEMENTS
|
|
27
|
-
&:after,
|
|
28
|
-
&:before {
|
|
29
|
-
border: var(--_sp-baw) solid currentColor;
|
|
30
|
-
|
|
31
|
-
border-radius: var(--br-circle);
|
|
32
|
-
content: '';
|
|
33
|
-
height: 100%;
|
|
34
|
-
position: absolute;
|
|
35
|
-
width: 100%;
|
|
36
|
-
}
|
|
37
|
-
|
|
38
|
-
&:after {
|
|
39
|
-
border-top-color: transparent;
|
|
40
|
-
border-right-color: transparent;
|
|
41
|
-
border-bottom-color: transparent;
|
|
42
|
-
animation: s-spinner-rotate 0.9s infinite cubic-bezier(0.5, 0.1, 0.5, 0.9);
|
|
43
|
-
}
|
|
44
|
-
|
|
45
|
-
&:before {
|
|
46
|
-
opacity: 0.25;
|
|
47
|
-
transform: rotate(90deg); // [1]
|
|
48
|
-
}
|
|
49
|
-
|
|
50
|
-
height: var(--_sp-size);
|
|
51
|
-
width: var(--_sp-size);
|
|
52
|
-
|
|
53
|
-
position: relative;
|
|
54
|
-
text-align: left; // [2]
|
|
55
|
-
}
|
|
56
|
-
|
|
57
|
-
.is-loading {
|
|
58
|
-
--_li-offset: 0.6em;
|
|
59
|
-
--_il-size: 1.23076923em;
|
|
60
|
-
|
|
61
|
-
&:after,
|
|
62
|
-
&:before {
|
|
63
|
-
border-radius: var(--br-circle);
|
|
64
|
-
border-style: solid;
|
|
65
|
-
border-width: var(--su-static2);
|
|
66
|
-
content: "";
|
|
67
|
-
height: var(--_il-size);
|
|
68
|
-
left: var(--_li-offset);
|
|
69
|
-
position: absolute;
|
|
70
|
-
top: calc(50% - var(--_li-offset));
|
|
71
|
-
width: var(--_il-size);
|
|
72
|
-
}
|
|
73
|
-
|
|
74
|
-
&:after {
|
|
75
|
-
animation: s-spinner-rotate 0.9s infinite cubic-bezier(0.5, 0.1, 0.5, 0.9);
|
|
76
|
-
border-color: transparent;
|
|
77
|
-
border-left-color: currentColor;
|
|
78
|
-
filter: invert(0); // [1]
|
|
79
|
-
transform-origin: 50% 50% var(--su-static1); // [1]
|
|
80
|
-
}
|
|
81
|
-
|
|
82
|
-
&:before {
|
|
83
|
-
border-color: currentColor;
|
|
84
|
-
opacity: 0.3;
|
|
85
|
-
}
|
|
86
|
-
|
|
87
|
-
padding-left: 2.2em;
|
|
88
|
-
position: relative;
|
|
89
|
-
}
|
|
90
|
-
|
|
91
|
-
// Keyframes
|
|
92
|
-
@keyframes s-spinner-rotate {
|
|
93
|
-
from {
|
|
94
|
-
transform: rotate(0deg);
|
|
95
|
-
}
|
|
96
|
-
to {
|
|
97
|
-
transform: rotate(360deg);
|
|
98
|
-
}
|
|
99
|
-
}
|
|
100
|
-
|
|
101
|
-
// [1] no-op to reduce wobble in Edge. More info: https://github.com/StackExchange/Stacks/blob/d2af26aca06c47e3f1f7a638e49b221a9e28e450/lib/css/components/_stacks-spinner.less#L16-L26
|
|
102
|
-
|
|
103
|
-
// [2] When within a parent that has text-align: center, the spinner's entire container spins, not just the spinner. Let's force text-align left so things spin internally.
|