@stackoverflow/stacks 0.73.1 → 0.74.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 +115 -59
- package/dist/css/stacks.min.css +1 -1
- package/dist/js/stacks.js +29 -10
- package/dist/js/stacks.min.js +1 -1
- package/lib/css/atomic/_stacks-typography.less +3 -0
- package/lib/css/components/_stacks-inputs.less +4 -0
- package/lib/css/components/_stacks-post-summary.less +49 -30
- package/lib/css/components/_stacks-tags.less +37 -1
- package/lib/css/components/_stacks-toggle-switches.less +8 -1
- package/lib/css/components/_stacks-user-cards.less +15 -39
- package/lib/css/exports/_stacks-constants-colors.less +2 -0
- package/package.json +7 -7
|
@@ -19,12 +19,10 @@
|
|
|
19
19
|
|
|
20
20
|
#stacks-internals #screen-md({
|
|
21
21
|
flex-direction: column;
|
|
22
|
-
align-items: flex-start;
|
|
23
22
|
});
|
|
24
23
|
|
|
25
24
|
&.s-post-summary__minimal {
|
|
26
25
|
flex-direction: column;
|
|
27
|
-
align-items: flex-start;
|
|
28
26
|
|
|
29
27
|
.s-post-summary--stats {
|
|
30
28
|
width: auto;
|
|
@@ -54,29 +52,34 @@
|
|
|
54
52
|
--s-post-summary-stats-gap: @su6; // Replace with gap property as soon as browser support makes sense.
|
|
55
53
|
margin-right: @su8;
|
|
56
54
|
margin-bottom: -@su2;
|
|
57
|
-
width: @su96;
|
|
55
|
+
width: @su96 + @su12;
|
|
58
56
|
display: flex;
|
|
59
57
|
flex-direction: column;
|
|
60
58
|
flex-shrink: 0;
|
|
61
59
|
flex-wrap: wrap;
|
|
62
60
|
align-items: flex-end;
|
|
63
|
-
font-size: @fs-
|
|
61
|
+
font-size: @fs-body1;
|
|
64
62
|
color: var(--fc-light);
|
|
65
63
|
|
|
66
64
|
.s-post-summary--stats-item {
|
|
65
|
+
display: inline-flex;
|
|
66
|
+
align-items: center;
|
|
67
|
+
justify-content: center;
|
|
67
68
|
margin-right: var(--s-post-summary-stats-gap);
|
|
68
69
|
margin-bottom: var(--s-post-summary-stats-gap);
|
|
69
70
|
white-space: nowrap;
|
|
70
71
|
border: 1px solid transparent;
|
|
71
72
|
|
|
72
73
|
.svg-icon {
|
|
73
|
-
|
|
74
|
+
margin-right: @su4;
|
|
75
|
+
}
|
|
76
|
+
|
|
77
|
+
&.s-post-summary--stats-item__emphasized {
|
|
78
|
+
color: var(--fc-dark);
|
|
74
79
|
}
|
|
75
80
|
|
|
76
81
|
&.has-answers,
|
|
77
82
|
&.has-bounty,
|
|
78
|
-
&.is-watched,
|
|
79
|
-
&.is-ignored,
|
|
80
83
|
&.is-deleted,
|
|
81
84
|
&.is-published,
|
|
82
85
|
&.is-draft,
|
|
@@ -88,12 +91,13 @@
|
|
|
88
91
|
}
|
|
89
92
|
|
|
90
93
|
&.has-answers {
|
|
91
|
-
color: var(--green-
|
|
92
|
-
border: 1px solid var(--green-
|
|
94
|
+
color: var(--green-600);
|
|
95
|
+
border: 1px solid var(--green-600);
|
|
93
96
|
|
|
94
97
|
&.has-accepted-answer {
|
|
95
98
|
color: @white;
|
|
96
99
|
background-color: var(--green-500);
|
|
100
|
+
border-color: var(--green-500);
|
|
97
101
|
|
|
98
102
|
.highcontrast-mode({
|
|
99
103
|
color: var(--white);
|
|
@@ -160,8 +164,9 @@
|
|
|
160
164
|
max-width: 100%;
|
|
161
165
|
|
|
162
166
|
.s-post-summary--content-title {
|
|
163
|
-
display:
|
|
167
|
+
display: block;
|
|
164
168
|
font-size: @fs-body3;
|
|
169
|
+
margin-top: -0.15rem; // Optical alignment to compensate for title's containing block
|
|
165
170
|
margin-bottom: @su6;
|
|
166
171
|
overflow-wrap: break-word;
|
|
167
172
|
word-wrap: break-word;
|
|
@@ -182,7 +187,7 @@
|
|
|
182
187
|
|
|
183
188
|
.s-post-summary--content-type {
|
|
184
189
|
color: var(--fc-medium);
|
|
185
|
-
margin-bottom: @
|
|
190
|
+
margin-bottom: @su4;
|
|
186
191
|
|
|
187
192
|
.svg-icon {
|
|
188
193
|
margin-left: -@su2;
|
|
@@ -193,7 +198,20 @@
|
|
|
193
198
|
.s-post-summary--content-excerpt {
|
|
194
199
|
margin-top: -@su2;
|
|
195
200
|
margin-bottom: @su8;
|
|
201
|
+
color: var(--fc-medium);
|
|
196
202
|
.v-truncate2;
|
|
203
|
+
|
|
204
|
+
&.s-post-summary--content-excerpt__sm {
|
|
205
|
+
.v-truncate1;
|
|
206
|
+
}
|
|
207
|
+
|
|
208
|
+
&.s-post-summary--content-excerpt__md {
|
|
209
|
+
.v-truncate3;
|
|
210
|
+
}
|
|
211
|
+
|
|
212
|
+
&.s-post-summary--content-excerpt__lg {
|
|
213
|
+
.v-truncate4;
|
|
214
|
+
}
|
|
197
215
|
}
|
|
198
216
|
}
|
|
199
217
|
|
|
@@ -221,6 +239,7 @@
|
|
|
221
239
|
flex-wrap: wrap;
|
|
222
240
|
margin-bottom: var(--s-post-summary-tags-gap);
|
|
223
241
|
margin-left: auto;
|
|
242
|
+
justify-content: flex-end;
|
|
224
243
|
}
|
|
225
244
|
}
|
|
226
245
|
|
|
@@ -263,41 +282,41 @@
|
|
|
263
282
|
}
|
|
264
283
|
}
|
|
265
284
|
|
|
266
|
-
.s-post-summary__watched
|
|
267
|
-
color: var(--
|
|
268
|
-
background-color: var(--yellow-600);
|
|
285
|
+
.s-post-summary__watched {
|
|
286
|
+
background-color: var(--yellow-050);
|
|
269
287
|
}
|
|
270
288
|
|
|
271
|
-
.s-post-
|
|
272
|
-
color: var(--
|
|
273
|
-
background-color: var(--black-600);
|
|
274
|
-
}
|
|
289
|
+
.s-post-summary__deleted {
|
|
290
|
+
background-color: var(--red-050);
|
|
275
291
|
|
|
276
|
-
.
|
|
277
|
-
|
|
278
|
-
|
|
292
|
+
.is-deleted {
|
|
293
|
+
color: @white;
|
|
294
|
+
background-color: var(--red-500);
|
|
295
|
+
}
|
|
279
296
|
}
|
|
280
297
|
|
|
281
298
|
.s-post-summary__ignored,
|
|
282
299
|
.s-post-summary__deleted {
|
|
283
300
|
.s-post-summary--content {
|
|
284
|
-
opacity: 0.
|
|
301
|
+
opacity: 0.6;
|
|
285
302
|
}
|
|
286
303
|
|
|
287
|
-
.s-post-summary--stats-item:not(.is-
|
|
288
|
-
opacity: 0.
|
|
304
|
+
.s-post-summary--stats-item:not(.is-deleted) {
|
|
305
|
+
opacity: 0.6;
|
|
289
306
|
filter: grayscale(100%);
|
|
290
307
|
}
|
|
291
308
|
|
|
292
309
|
.s-post-summary--content-title {
|
|
293
|
-
|
|
310
|
+
&, & .s-link {
|
|
311
|
+
color: var(--black-600);
|
|
294
312
|
|
|
295
|
-
|
|
296
|
-
|
|
297
|
-
|
|
313
|
+
&:hover {
|
|
314
|
+
color: var(--black-500);
|
|
315
|
+
}
|
|
298
316
|
|
|
299
|
-
|
|
300
|
-
|
|
317
|
+
&:visited {
|
|
318
|
+
color: var(--black-700);
|
|
319
|
+
}
|
|
301
320
|
}
|
|
302
321
|
}
|
|
303
322
|
|
|
@@ -68,7 +68,7 @@
|
|
|
68
68
|
.s-tag {
|
|
69
69
|
#stacks-internals #load-config();
|
|
70
70
|
display: inline-flex;
|
|
71
|
-
align-
|
|
71
|
+
align-items: center;
|
|
72
72
|
justify-content: center;
|
|
73
73
|
min-width: 0;
|
|
74
74
|
padding-left: @su4;
|
|
@@ -207,3 +207,39 @@ a.s-tag__muted:not(.is-selected) {
|
|
|
207
207
|
#stacks-internals #load-config();
|
|
208
208
|
.s-tag-hover-styles(@tags-muted-hover-border, @tags-muted-hover-background, @tags-muted-hover-color);
|
|
209
209
|
}
|
|
210
|
+
|
|
211
|
+
// $$ Tag with Icons (watched, ignored)
|
|
212
|
+
// ---------------------------------------------------------------------------
|
|
213
|
+
.s-tag__watched,
|
|
214
|
+
.s-tag__ignored {
|
|
215
|
+
position: relative;
|
|
216
|
+
padding-left: 22px;
|
|
217
|
+
|
|
218
|
+
&:before {
|
|
219
|
+
content: "";
|
|
220
|
+
display: block;
|
|
221
|
+
width: 14px;
|
|
222
|
+
height: 14px;
|
|
223
|
+
margin-right: @su2;
|
|
224
|
+
background-color: currentColor;
|
|
225
|
+
position: absolute;
|
|
226
|
+
left: 4px;
|
|
227
|
+
top: calc(50% - 7px);
|
|
228
|
+
-webkit-mask: var(--s-tag-icon) no-repeat center;
|
|
229
|
+
mask: var(--s-tag-icon) no-repeat center;
|
|
230
|
+
-webkit-mask-size: contain;
|
|
231
|
+
mask-size: contain;
|
|
232
|
+
}
|
|
233
|
+
}
|
|
234
|
+
|
|
235
|
+
// $$ Watched Tag
|
|
236
|
+
// ---------------------------------------------------------------------------
|
|
237
|
+
.s-tag__watched {
|
|
238
|
+
--s-tag-icon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='14' height='14' viewBox='0 0 14 14'%3E%3Cpath d='M7.05 1C2.63 1 0 6.5 0 6.5S2.63 12 7.05 12C11.38 12 14 6.5 14 6.5S11.37 1 7.05 1ZM7 10.17A3.59 3.59 0 0 1 3.5 6.5 3.6 3.6 0 0 1 7 2.83c1.94 0 3.5 1.65 3.5 3.67A3.57 3.57 0 0 1 7 10.17Zm0-1.84c.97 0 1.75-.81 1.75-1.83S7.97 4.67 7 4.67s-1.75.81-1.75 1.83S6.03 8.33 7 8.33Z'/%3E%3C/svg%3E");
|
|
239
|
+
}
|
|
240
|
+
|
|
241
|
+
// $$ Ignored Tag
|
|
242
|
+
// ---------------------------------------------------------------------------
|
|
243
|
+
.s-tag__ignored {
|
|
244
|
+
--s-tag-icon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='14' height='14' viewBox='0 0 14 14'%3E%3Cpath d='M3.52 7.38 1.58 9.26A12.38 12.38 0 0 1 0 7s2.63-5.14 7.05-5.14c.66 0 1.28.12 1.86.32L7.44 3.6a3.48 3.48 0 0 0-3.92 3.78ZM5.3 9.99c.5.28 1.1.44 1.71.44 1.94 0 3.5-1.53 3.5-3.43 0-.62-.17-1.21-.47-1.72L8.7 6.6a1.73 1.73 0 0 1-2.08 2.07L5.29 10Zm6.23-6.19A12.7 12.7 0 0 1 14 7s-2.63 5.14-6.95 5.14A6.1 6.1 0 0 1 4 11.3L2.27 13l-1.4-1.36L11.9 1l1.23 1.2-1.6 1.6Z'/%3E%3C/svg%3E");
|
|
245
|
+
}
|
|
@@ -112,7 +112,6 @@
|
|
|
112
112
|
// If the input is selected, style its label accordingly.
|
|
113
113
|
input[type="radio"]:checked {
|
|
114
114
|
+ label {
|
|
115
|
-
// Color activated options green
|
|
116
115
|
&.s-toggle-switch--label-off {
|
|
117
116
|
background-color: var(--black-300);
|
|
118
117
|
color: @white;
|
|
@@ -132,6 +131,14 @@
|
|
|
132
131
|
});
|
|
133
132
|
}
|
|
134
133
|
}
|
|
134
|
+
|
|
135
|
+
&:focus + label.s-toggle-switch--label-off {
|
|
136
|
+
box-shadow: 0 0 0 @su4 var(--focus-ring-muted);
|
|
137
|
+
}
|
|
138
|
+
|
|
139
|
+
&:focus + label:not(.s-toggle-switch--label-off) {
|
|
140
|
+
box-shadow: 0 0 0 @su4 var(--focus-ring-success);
|
|
141
|
+
}
|
|
135
142
|
}
|
|
136
143
|
}
|
|
137
144
|
}
|
|
@@ -13,7 +13,8 @@
|
|
|
13
13
|
.s-user-card {
|
|
14
14
|
display: grid;
|
|
15
15
|
grid-template-columns: auto 1fr;
|
|
16
|
-
|
|
16
|
+
column-gap: @su8;
|
|
17
|
+
row-gap: @su4;
|
|
17
18
|
align-items: center;
|
|
18
19
|
line-height: 1;
|
|
19
20
|
padding: @su8;
|
|
@@ -25,7 +26,7 @@
|
|
|
25
26
|
// $$ Highlighted
|
|
26
27
|
// ---------------------------------------------------------------------------
|
|
27
28
|
&.s-user-card__highlighted {
|
|
28
|
-
background-color: var(--theme-secondary-
|
|
29
|
+
background-color: var(--theme-secondary-050);
|
|
29
30
|
border-radius: @br-md;
|
|
30
31
|
|
|
31
32
|
.s-user-card--type {
|
|
@@ -38,10 +39,6 @@
|
|
|
38
39
|
&.s-user-card__full {
|
|
39
40
|
align-items: start;
|
|
40
41
|
|
|
41
|
-
.s-user-card--info {
|
|
42
|
-
grid-gap: @su4;
|
|
43
|
-
}
|
|
44
|
-
|
|
45
42
|
.s-user-card--link {
|
|
46
43
|
font-size: @fs-body2;
|
|
47
44
|
}
|
|
@@ -58,26 +55,12 @@
|
|
|
58
55
|
&.s-user-card__small {
|
|
59
56
|
display: flex;
|
|
60
57
|
align-items: center;
|
|
61
|
-
|
|
58
|
+
gap: @su4;
|
|
62
59
|
padding: 0;
|
|
63
60
|
|
|
64
|
-
.s-user-card--time {
|
|
65
|
-
margin-right: @su6;
|
|
66
|
-
margin-bottom: 0;
|
|
67
|
-
}
|
|
68
|
-
|
|
69
|
-
.s-user-card--link {
|
|
70
|
-
margin-right: @su6;
|
|
71
|
-
}
|
|
72
|
-
|
|
73
|
-
.s-user-card--avatar {
|
|
74
|
-
margin-right: @su6;
|
|
75
|
-
}
|
|
76
|
-
|
|
77
61
|
.s-user-card--info {
|
|
78
|
-
|
|
62
|
+
flex-direction: row;
|
|
79
63
|
align-items: center;
|
|
80
|
-
grid-column-gap: unset; // Firefox flex layouts respect column gaps, so we need to reset this
|
|
81
64
|
}
|
|
82
65
|
}
|
|
83
66
|
|
|
@@ -86,41 +69,35 @@
|
|
|
86
69
|
&.s-user-card__minimal {
|
|
87
70
|
display: flex;
|
|
88
71
|
align-items: center;
|
|
89
|
-
|
|
72
|
+
gap: @su4;
|
|
90
73
|
padding: 0;
|
|
91
74
|
|
|
92
75
|
.s-user-card--time {
|
|
93
|
-
margin-right: @su4;
|
|
94
|
-
margin-bottom: 0;
|
|
95
76
|
white-space: nowrap;
|
|
96
77
|
}
|
|
97
78
|
|
|
98
79
|
.s-user-card--link {
|
|
99
|
-
margin-right: @su4;
|
|
100
80
|
white-space: nowrap;
|
|
101
81
|
}
|
|
102
82
|
|
|
103
|
-
.s-user-card--avatar {
|
|
104
|
-
margin-right: @su4;
|
|
105
|
-
}
|
|
106
|
-
|
|
107
83
|
.s-user-card--rep {
|
|
108
|
-
padding: 0;
|
|
109
84
|
color: var(--black-600);
|
|
110
85
|
}
|
|
111
86
|
|
|
112
87
|
.s-user-card--info {
|
|
113
|
-
|
|
88
|
+
flex-direction: row;
|
|
114
89
|
align-items: center;
|
|
115
|
-
grid-column-gap: unset; // Firefox flex layouts respect column gaps, so we need to reset this
|
|
116
90
|
}
|
|
117
91
|
}
|
|
118
92
|
|
|
119
93
|
.s-user-card--type {
|
|
120
94
|
grid-column: ~"1 / 3";
|
|
121
|
-
padding-top: @su4;
|
|
122
95
|
font-size: @fs-caption;
|
|
123
96
|
color: var(--theme-primary-400);
|
|
97
|
+
|
|
98
|
+
a {
|
|
99
|
+
color: inherit;
|
|
100
|
+
}
|
|
124
101
|
}
|
|
125
102
|
}
|
|
126
103
|
|
|
@@ -132,7 +109,6 @@
|
|
|
132
109
|
grid-row: ~"1 / 2";
|
|
133
110
|
color: var(--black-500);
|
|
134
111
|
font-size: @fs-caption;
|
|
135
|
-
margin-bottom: @su4;
|
|
136
112
|
}
|
|
137
113
|
|
|
138
114
|
// $ USER INFO CONTAINER
|
|
@@ -140,8 +116,9 @@
|
|
|
140
116
|
// vertical grid layout
|
|
141
117
|
// ---------------------------------------------------------------------------
|
|
142
118
|
.s-user-card--info {
|
|
143
|
-
display:
|
|
144
|
-
|
|
119
|
+
display: flex;
|
|
120
|
+
flex-direction: column;
|
|
121
|
+
gap: @su4;
|
|
145
122
|
}
|
|
146
123
|
|
|
147
124
|
// $ USER LINK
|
|
@@ -162,9 +139,9 @@
|
|
|
162
139
|
.list-reset;
|
|
163
140
|
display: flex;
|
|
164
141
|
align-items: center;
|
|
142
|
+
gap: @su6;
|
|
165
143
|
|
|
166
144
|
li {
|
|
167
|
-
margin-right: @su6;
|
|
168
145
|
font-size: @fs-caption;
|
|
169
146
|
}
|
|
170
147
|
}
|
|
@@ -186,7 +163,6 @@
|
|
|
186
163
|
// Apply layout to a bunch of child tags
|
|
187
164
|
// ---------------------------------------------------------------------------
|
|
188
165
|
.s-user-card--tags {
|
|
189
|
-
padding-top: (@su2 / 2); // Optically align these a bit, but we can't use margin because of `gs[x]` being applied
|
|
190
166
|
min-width: 0; // Allow things to wrap
|
|
191
167
|
align-items: center;
|
|
192
168
|
flex-wrap: wrap;
|
package/package.json
CHANGED
|
@@ -5,7 +5,7 @@
|
|
|
5
5
|
"type": "git",
|
|
6
6
|
"url": "https://github.com/StackExchange/Stacks.git"
|
|
7
7
|
},
|
|
8
|
-
"version": "0.
|
|
8
|
+
"version": "0.74.0",
|
|
9
9
|
"files": [
|
|
10
10
|
"dist",
|
|
11
11
|
"lib"
|
|
@@ -19,14 +19,14 @@
|
|
|
19
19
|
},
|
|
20
20
|
"license": "MIT",
|
|
21
21
|
"dependencies": {
|
|
22
|
-
"@popperjs/core": "^2.11.
|
|
22
|
+
"@popperjs/core": "^2.11.2",
|
|
23
23
|
"stimulus": "^2.0.0"
|
|
24
24
|
},
|
|
25
25
|
"devDependencies": {
|
|
26
26
|
"@11ty/eleventy": "^0.12.1",
|
|
27
|
-
"@highlightjs/cdn-assets": "^11.
|
|
27
|
+
"@highlightjs/cdn-assets": "^11.4.0",
|
|
28
28
|
"@stackoverflow/stacks-editor": "^0.4.1",
|
|
29
|
-
"@stackoverflow/stacks-icons": "^2.
|
|
29
|
+
"@stackoverflow/stacks-icons": "^2.26.0",
|
|
30
30
|
"backstopjs": "^6.0.4",
|
|
31
31
|
"docsearch.js": "^2.6.3",
|
|
32
32
|
"eleventy-plugin-highlightjs": "^0.3.0",
|
|
@@ -46,12 +46,12 @@
|
|
|
46
46
|
"grunt-ts": "^6.0.0-beta.22",
|
|
47
47
|
"jquery": "^3.6.0",
|
|
48
48
|
"list.js": "^2.3.1",
|
|
49
|
-
"postcss-less": "^
|
|
50
|
-
"stylelint": "^14.
|
|
49
|
+
"postcss-less": "^6.0.0",
|
|
50
|
+
"stylelint": "^14.3.0",
|
|
51
51
|
"stylelint-config-recommended-less": "^1.0.1",
|
|
52
52
|
"stylelint-config-standard": "^24.0.0",
|
|
53
53
|
"stylelint-less": "^1.0.1",
|
|
54
|
-
"typescript": "^4.5.
|
|
54
|
+
"typescript": "^4.5.5"
|
|
55
55
|
},
|
|
56
56
|
"browserslist": [
|
|
57
57
|
"last 2 versions",
|