@stackoverflow/stacks 0.74.0 → 0.75.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 +251 -40
- package/dist/css/stacks.min.css +1 -1
- package/lib/css/atomic/_stacks-misc.less +1 -0
- package/lib/css/atomic/_stacks-spacing.less +6 -0
- package/lib/css/atomic/_stacks-width-height.less +8 -2
- package/lib/css/components/_stacks-post-summary.less +134 -39
- package/lib/css/exports/_stacks-constants-colors.less +13 -1
- package/package.json +8 -8
|
@@ -292,6 +292,7 @@
|
|
|
292
292
|
.h\:bs-md:hover { .bs-md; }
|
|
293
293
|
.bs-lg { box-shadow: var(--bs-lg) !important; }
|
|
294
294
|
.h\:bs-lg:hover { .bs-lg; }
|
|
295
|
+
.bs-xl { box-shadow: var(--bs-xl) !important; }
|
|
295
296
|
.bs-ring { box-shadow: 0 0 0 @su4 var(--focus-ring); }
|
|
296
297
|
.h\:bs-ring:hover { .bs-ring; }
|
|
297
298
|
.f\:bs-ring {
|
|
@@ -160,3 +160,9 @@
|
|
|
160
160
|
'.l', { .template(@value) { left: @value !important; } },
|
|
161
161
|
0 1px -1px @su2 -@su2 @su4 -@su4 @su6 -@su6 @su8 -@su8 @su12 -@su12 @su16 -@su16 @su24 -@su24 @su32 -@su32 @su48 -@su48 @su64 -@su64 @su96 -@su96 @su128 -@su128 50% -50% 100% -100%
|
|
162
162
|
);
|
|
163
|
+
|
|
164
|
+
// $$ Inset
|
|
165
|
+
#stacks-internals #build-classes(
|
|
166
|
+
'.i', { .template(@value) { inset: @value !important; } },
|
|
167
|
+
0 1px @su2 @su4 @su6 @su8 @su12 @su16 @su24 @su32 @su48 @su64 @su96 @su128
|
|
168
|
+
);
|
|
@@ -20,7 +20,7 @@
|
|
|
20
20
|
// ============================================================================
|
|
21
21
|
// $ WIDTH
|
|
22
22
|
// ----------------------------------------------------------------------------
|
|
23
|
-
// $$ PERCENTAGE
|
|
23
|
+
// $$ PERCENTAGE AND VIEWPORT UNITS
|
|
24
24
|
.w0 { width: 0 !important; }
|
|
25
25
|
.w10 { width: 10% !important; }
|
|
26
26
|
.w20 { width: 20% !important; }
|
|
@@ -37,6 +37,8 @@
|
|
|
37
37
|
.w90 { width: 90% !important; }
|
|
38
38
|
#stacks-internals #responsify('.w100', { width: 100% !important; });
|
|
39
39
|
#stacks-internals #responsify('.w-auto', { width: auto !important; });
|
|
40
|
+
#stacks-internals #responsify('.w-screen', { width: 100vw !important; });
|
|
41
|
+
|
|
40
42
|
|
|
41
43
|
// $$ STATIC
|
|
42
44
|
.ws0,
|
|
@@ -89,6 +91,7 @@
|
|
|
89
91
|
.wmx12 { max-width: @s-full !important; }
|
|
90
92
|
#stacks-internals #responsify('.wmx100', { max-width: 100% !important; });
|
|
91
93
|
#stacks-internals #responsify('.wmx-initial', { max-width: initial !important; });
|
|
94
|
+
#stacks-internals #responsify('.wmx-screen', { max-width: 100vw !important; });
|
|
92
95
|
|
|
93
96
|
// ============================================================================
|
|
94
97
|
// $ MIN-WIDTH
|
|
@@ -115,10 +118,11 @@
|
|
|
115
118
|
// ============================================================================
|
|
116
119
|
// $ HEIGHT
|
|
117
120
|
// ----------------------------------------------------------------------------
|
|
118
|
-
// $$ PERCENTAGE
|
|
121
|
+
// $$ PERCENTAGE AND VIEWPORT UNITS
|
|
119
122
|
.h0 { height: 0 !important; }
|
|
120
123
|
#stacks-internals #responsify('.h100', { height: 100% !important; });
|
|
121
124
|
#stacks-internals #responsify('.h-auto', { height: auto !important; });
|
|
125
|
+
#stacks-internals #responsify('.h-screen', { height: 100vh !important; });
|
|
122
126
|
|
|
123
127
|
// $$ STATIC
|
|
124
128
|
.hs0,
|
|
@@ -168,6 +172,7 @@
|
|
|
168
172
|
.hmx12 { max-height: @s-full !important; }
|
|
169
173
|
#stacks-internals #responsify('.hmx100', { max-height: 100% !important; });
|
|
170
174
|
#stacks-internals #responsify('.hmx-initial', { max-height: initial !important; });
|
|
175
|
+
#stacks-internals #responsify('.hmx-screen', { max-height: 100vh !important; });
|
|
171
176
|
|
|
172
177
|
// ============================================================================
|
|
173
178
|
// $ MIN-HEIGHT
|
|
@@ -187,3 +192,4 @@
|
|
|
187
192
|
.hmn12 { min-height: @s-full !important; }
|
|
188
193
|
#stacks-internals #responsify('.hmn100', { min-height: 100% !important; });
|
|
189
194
|
#stacks-internals #responsify('.hmn-initial', { min-height: initial !important; });
|
|
195
|
+
#stacks-internals #responsify('.hmx-screen', { min-height: 100vh !important; });
|
|
@@ -34,6 +34,87 @@
|
|
|
34
34
|
width: 100%;
|
|
35
35
|
}
|
|
36
36
|
}
|
|
37
|
+
|
|
38
|
+
&.s-post-summary__legacy {
|
|
39
|
+
padding-left: 0; // Since stats have padding, we don't need it on the parent
|
|
40
|
+
|
|
41
|
+
#stacks-internals #screen-md({
|
|
42
|
+
padding-left: @su16;
|
|
43
|
+
});
|
|
44
|
+
|
|
45
|
+
.s-post-summary--stats {
|
|
46
|
+
width: auto;
|
|
47
|
+
flex-direction: row;
|
|
48
|
+
align-items: center;
|
|
49
|
+
gap: @su2;
|
|
50
|
+
|
|
51
|
+
.s-post-summary--stats-item {
|
|
52
|
+
min-width: @su64;
|
|
53
|
+
height: @su48;
|
|
54
|
+
flex-direction: column;
|
|
55
|
+
gap: 0;
|
|
56
|
+
font-size: @fs-caption;
|
|
57
|
+
|
|
58
|
+
&.s-post-summary--stats-item__emphasized {
|
|
59
|
+
color: inherit;
|
|
60
|
+
}
|
|
61
|
+
|
|
62
|
+
&.has-accepted-answer .svg-icon {
|
|
63
|
+
display: none;
|
|
64
|
+
}
|
|
65
|
+
|
|
66
|
+
.s-post-summary--stats-item-number {
|
|
67
|
+
font-weight: normal;
|
|
68
|
+
font-size: @fs-body3;
|
|
69
|
+
}
|
|
70
|
+
|
|
71
|
+
&.is-deleted,
|
|
72
|
+
&.is-published,
|
|
73
|
+
&.is-draft,
|
|
74
|
+
&.is-review,
|
|
75
|
+
&.is-closed,
|
|
76
|
+
&.is-archived,
|
|
77
|
+
&.is-pinned {
|
|
78
|
+
display: none;
|
|
79
|
+
}
|
|
80
|
+
}
|
|
81
|
+
|
|
82
|
+
#stacks-internals #screen-md({
|
|
83
|
+
flex-direction: row;
|
|
84
|
+
align-items: center;
|
|
85
|
+
gap: @su8;
|
|
86
|
+
|
|
87
|
+
.s-post-summary--stats-item {
|
|
88
|
+
min-width: auto;
|
|
89
|
+
height: auto;
|
|
90
|
+
flex-direction: row;
|
|
91
|
+
gap: 3px; // HTML spacing
|
|
92
|
+
|
|
93
|
+
.s-post-summary--stats-item-number {
|
|
94
|
+
font-size: inherit;
|
|
95
|
+
}
|
|
96
|
+
|
|
97
|
+
&.s-post-summary--stats-item__emphasized {
|
|
98
|
+
color: var(--fc-dark);
|
|
99
|
+
}
|
|
100
|
+
|
|
101
|
+
&.has-accepted-answer .svg-icon {
|
|
102
|
+
display: block;
|
|
103
|
+
}
|
|
104
|
+
|
|
105
|
+
&.is-deleted,
|
|
106
|
+
&.is-published,
|
|
107
|
+
&.is-draft,
|
|
108
|
+
&.is-review,
|
|
109
|
+
&.is-closed,
|
|
110
|
+
&.is-archived,
|
|
111
|
+
&.is-pinned {
|
|
112
|
+
display: block;
|
|
113
|
+
}
|
|
114
|
+
}
|
|
115
|
+
});
|
|
116
|
+
}
|
|
117
|
+
}
|
|
37
118
|
}
|
|
38
119
|
|
|
39
120
|
// [1] To override .s-btn class attributes
|
|
@@ -49,9 +130,9 @@
|
|
|
49
130
|
}
|
|
50
131
|
|
|
51
132
|
.s-post-summary--stats {
|
|
52
|
-
|
|
53
|
-
margin-right: @
|
|
54
|
-
margin-bottom:
|
|
133
|
+
gap: @su6;
|
|
134
|
+
margin-right: @su16;
|
|
135
|
+
margin-bottom: @su4;
|
|
55
136
|
width: @su96 + @su12;
|
|
56
137
|
display: flex;
|
|
57
138
|
flex-direction: column;
|
|
@@ -63,21 +144,20 @@
|
|
|
63
144
|
|
|
64
145
|
.s-post-summary--stats-item {
|
|
65
146
|
display: inline-flex;
|
|
147
|
+
gap: 0.3em;
|
|
66
148
|
align-items: center;
|
|
67
149
|
justify-content: center;
|
|
68
|
-
margin-right: var(--s-post-summary-stats-gap);
|
|
69
|
-
margin-bottom: var(--s-post-summary-stats-gap);
|
|
70
150
|
white-space: nowrap;
|
|
71
151
|
border: 1px solid transparent;
|
|
72
152
|
|
|
73
|
-
.svg-icon {
|
|
74
|
-
margin-right: @su4;
|
|
75
|
-
}
|
|
76
|
-
|
|
77
153
|
&.s-post-summary--stats-item__emphasized {
|
|
78
154
|
color: var(--fc-dark);
|
|
79
155
|
}
|
|
80
156
|
|
|
157
|
+
.s-post-summary--stats-item-number {
|
|
158
|
+
font-weight: 500;
|
|
159
|
+
}
|
|
160
|
+
|
|
81
161
|
&.has-answers,
|
|
82
162
|
&.has-bounty,
|
|
83
163
|
&.is-deleted,
|
|
@@ -85,7 +165,8 @@
|
|
|
85
165
|
&.is-draft,
|
|
86
166
|
&.is-review,
|
|
87
167
|
&.is-closed,
|
|
88
|
-
&.is-archived
|
|
168
|
+
&.is-archived,
|
|
169
|
+
&.is-pinned {
|
|
89
170
|
border-radius: @br-sm;
|
|
90
171
|
padding: @su2 @su4;
|
|
91
172
|
}
|
|
@@ -150,6 +231,11 @@
|
|
|
150
231
|
background-color: var(--black-100);
|
|
151
232
|
border-color: var(--black-600);
|
|
152
233
|
}
|
|
234
|
+
|
|
235
|
+
&.is-pinned {
|
|
236
|
+
color: var(--white);
|
|
237
|
+
background-color: var(--black-700);
|
|
238
|
+
}
|
|
153
239
|
}
|
|
154
240
|
|
|
155
241
|
#stacks-internals #screen-md({
|
|
@@ -167,21 +253,36 @@
|
|
|
167
253
|
display: block;
|
|
168
254
|
font-size: @fs-body3;
|
|
169
255
|
margin-top: -0.15rem; // Optical alignment to compensate for title's containing block
|
|
170
|
-
margin-bottom:
|
|
171
|
-
overflow-wrap: break-word;
|
|
172
|
-
word-wrap: break-word;
|
|
256
|
+
margin-bottom: 0.3846rem;
|
|
173
257
|
padding-right: @su24;
|
|
258
|
+
line-height: @lh-md;
|
|
259
|
+
font-weight: normal;
|
|
260
|
+
.break-word;
|
|
174
261
|
|
|
175
262
|
.iconShield {
|
|
176
|
-
color: var(--
|
|
177
|
-
|
|
263
|
+
color: var(--fc-light);
|
|
264
|
+
}
|
|
265
|
+
|
|
266
|
+
.svg-icon {
|
|
267
|
+
vertical-align: text-bottom; // Optical alignment
|
|
178
268
|
position: relative;
|
|
179
|
-
|
|
269
|
+
top: -1px;
|
|
270
|
+
}
|
|
180
271
|
|
|
181
|
-
|
|
182
|
-
|
|
183
|
-
|
|
184
|
-
|
|
272
|
+
a {
|
|
273
|
+
.break-word;
|
|
274
|
+
|
|
275
|
+
color: var(--theme-post-title-color);
|
|
276
|
+
font-family: var(--theme-post-title-font-family);
|
|
277
|
+
|
|
278
|
+
&:visited {
|
|
279
|
+
color: var(--theme-post-title-color-visited);
|
|
280
|
+
}
|
|
281
|
+
|
|
282
|
+
&:hover,
|
|
283
|
+
&:active {
|
|
284
|
+
color: var(--theme-post-title-color-hover);
|
|
285
|
+
}
|
|
185
286
|
}
|
|
186
287
|
}
|
|
187
288
|
|
|
@@ -198,8 +299,10 @@
|
|
|
198
299
|
.s-post-summary--content-excerpt {
|
|
199
300
|
margin-top: -@su2;
|
|
200
301
|
margin-bottom: @su8;
|
|
302
|
+
font-family: var(--theme-post-body-font-family);
|
|
201
303
|
color: var(--fc-medium);
|
|
202
304
|
.v-truncate2;
|
|
305
|
+
.break-word;
|
|
203
306
|
|
|
204
307
|
&.s-post-summary--content-excerpt__sm {
|
|
205
308
|
.v-truncate1;
|
|
@@ -216,28 +319,21 @@
|
|
|
216
319
|
}
|
|
217
320
|
|
|
218
321
|
.s-post-summary--meta {
|
|
219
|
-
--s-post-summary-tags-gap: @su4; // Replace with gap property as soon as browser support makes sense.
|
|
220
|
-
|
|
221
322
|
display: flex;
|
|
222
323
|
align-items: center;
|
|
223
324
|
justify-content: space-between;
|
|
224
325
|
flex-wrap: wrap;
|
|
225
|
-
|
|
326
|
+
column-gap: @su6;
|
|
327
|
+
row-gap: @su8;
|
|
226
328
|
|
|
227
329
|
.s-post-summary--meta-tags {
|
|
228
330
|
display: flex;
|
|
229
331
|
flex-wrap: wrap;
|
|
230
|
-
|
|
231
|
-
|
|
232
|
-
& > * {
|
|
233
|
-
margin-right: var(--s-post-summary-tags-gap);
|
|
234
|
-
margin-bottom: var(--s-post-summary-tags-gap);
|
|
235
|
-
}
|
|
332
|
+
gap: @su4;
|
|
236
333
|
}
|
|
237
334
|
|
|
238
335
|
.s-user-card {
|
|
239
336
|
flex-wrap: wrap;
|
|
240
|
-
margin-bottom: var(--s-post-summary-tags-gap);
|
|
241
337
|
margin-left: auto;
|
|
242
338
|
justify-content: flex-end;
|
|
243
339
|
}
|
|
@@ -306,17 +402,16 @@
|
|
|
306
402
|
filter: grayscale(100%);
|
|
307
403
|
}
|
|
308
404
|
|
|
309
|
-
.s-post-summary--content-title {
|
|
310
|
-
|
|
311
|
-
color: var(--black-600);
|
|
405
|
+
.s-post-summary--content-title a {
|
|
406
|
+
color: var(--black-600);
|
|
312
407
|
|
|
313
|
-
|
|
314
|
-
|
|
315
|
-
|
|
408
|
+
&:hover,
|
|
409
|
+
&:active {
|
|
410
|
+
color: var(--black-500);
|
|
411
|
+
}
|
|
316
412
|
|
|
317
|
-
|
|
318
|
-
|
|
319
|
-
}
|
|
413
|
+
&:visited {
|
|
414
|
+
color: var(--black-700);
|
|
320
415
|
}
|
|
321
416
|
}
|
|
322
417
|
|
|
@@ -150,6 +150,7 @@
|
|
|
150
150
|
@bs-sm: 0 1px 2px hsla(0, 0%, 0%, 0.05), 0 1px 4px hsla(0, 0%, 0%, 0.05), 0 2px 8px hsla(0, 0%, 0%, 0.05);
|
|
151
151
|
@bs-md: 0 1px 3px hsla(0, 0%, 0%, 0.06), 0 2px 6px hsla(0, 0%, 0%, 0.06), 0 3px 8px hsla(0, 0%, 0%, 0.09);
|
|
152
152
|
@bs-lg: 0 1px 4px hsla(0, 0%, 0%, 0.09), 0 3px 8px hsla(0, 0%, 0%, 0.09), 0 4px 13px hsla(0, 0%, 0%, 0.13);
|
|
153
|
+
@bs-xl: 0 10px 24px hsla(0, 0%, 0%, 0.05), 0 20px 48px hsla(0, 0%, 0%, 0.05), 0 1px 4px hsla(0, 0%, 0%, 0.1);
|
|
153
154
|
|
|
154
155
|
// $ SCROLLBARS
|
|
155
156
|
// ----------------------------------------------------------------------------
|
|
@@ -271,6 +272,13 @@
|
|
|
271
272
|
|
|
272
273
|
// Topbar themed border accent
|
|
273
274
|
--theme-topbar-accent-border: 3px solid var(--theme-primary-color);
|
|
275
|
+
|
|
276
|
+
// Post summary
|
|
277
|
+
--theme-post-title-color: var(--theme-link-color);
|
|
278
|
+
--theme-post-title-color-hover: var(--theme-link-color-hover);
|
|
279
|
+
--theme-post-title-color-visited: var(--theme-link-color-visited);
|
|
280
|
+
--theme-post-title-font-family: var(--theme-body-font-family);
|
|
281
|
+
--theme-post-body-font-family: var(--theme-body-font-family);
|
|
274
282
|
}
|
|
275
283
|
|
|
276
284
|
// -- Light mode
|
|
@@ -412,6 +420,7 @@
|
|
|
412
420
|
--bs-sm: @bs-sm;
|
|
413
421
|
--bs-md: @bs-md;
|
|
414
422
|
--bs-lg: @bs-lg;
|
|
423
|
+
--bs-xl: @bs-xl;
|
|
415
424
|
|
|
416
425
|
// Scrollbars
|
|
417
426
|
--scrollbar: hsla(0, 0, 0, 0.2);
|
|
@@ -610,7 +619,8 @@
|
|
|
610
619
|
--bs-sm: 0 1px 2px hsla(0, 0%, 0%, 0.1), 0 1px 4px hsla(0, 0%, 0%, 0.1), 0 2px 8px hsla(0, 0%, 0%, 0.1);
|
|
611
620
|
--bs-md: 0 1px 3px hsla(0, 0%, 0%, 0.11), 0 2px 6px hsla(0, 0%, 0%, 0.11), 0 3px 8px hsla(0, 0%, 0%, 0.14);
|
|
612
621
|
--bs-lg: 0 1px 4px hsla(0, 0%, 0%, 0.14), 0 3px 8px hsla(0, 0%, 0%, 0.14), 0 4px 13px hsla(0, 0%, 0%, 0.18);
|
|
613
|
-
|
|
622
|
+
--bs-xl: 0 10px 24px hsla(0, 0%, 0%, 0.1), 0 20px 48px hsla(0, 0%, 0%, 0.1), 0 1px 4px hsla(0, 0%, 0%, 0.15);
|
|
623
|
+
|
|
614
624
|
// Scrollbars
|
|
615
625
|
--scrollbar: hsla(0, 0%, 100%, 0.2);
|
|
616
626
|
|
|
@@ -825,6 +835,7 @@
|
|
|
825
835
|
--bs-sm: none;
|
|
826
836
|
--bs-md: none;
|
|
827
837
|
--bs-lg: none;
|
|
838
|
+
--bs-xl: none;
|
|
828
839
|
|
|
829
840
|
// Scrollbars
|
|
830
841
|
--scrollbar: var(--black);
|
|
@@ -980,6 +991,7 @@
|
|
|
980
991
|
--bs-sm: none;
|
|
981
992
|
--bs-md: none;
|
|
982
993
|
--bs-lg: none;
|
|
994
|
+
--bs-xl: none;
|
|
983
995
|
|
|
984
996
|
// Scrollbars
|
|
985
997
|
--scrollbar: var(--black);
|
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.75.0",
|
|
9
9
|
"files": [
|
|
10
10
|
"dist",
|
|
11
11
|
"lib"
|
|
@@ -25,8 +25,8 @@
|
|
|
25
25
|
"devDependencies": {
|
|
26
26
|
"@11ty/eleventy": "^0.12.1",
|
|
27
27
|
"@highlightjs/cdn-assets": "^11.4.0",
|
|
28
|
-
"@stackoverflow/stacks-editor": "^0.4.
|
|
29
|
-
"@stackoverflow/stacks-icons": "^2.
|
|
28
|
+
"@stackoverflow/stacks-editor": "^0.4.2",
|
|
29
|
+
"@stackoverflow/stacks-icons": "^2.27.0",
|
|
30
30
|
"backstopjs": "^6.0.4",
|
|
31
31
|
"docsearch.js": "^2.6.3",
|
|
32
32
|
"eleventy-plugin-highlightjs": "^0.3.0",
|
|
@@ -47,11 +47,11 @@
|
|
|
47
47
|
"jquery": "^3.6.0",
|
|
48
48
|
"list.js": "^2.3.1",
|
|
49
49
|
"postcss-less": "^6.0.0",
|
|
50
|
-
"stylelint": "^14.3
|
|
51
|
-
"stylelint-config-recommended-less": "^1.0.
|
|
52
|
-
"stylelint-config-standard": "^
|
|
53
|
-
"stylelint-less": "^1.0.
|
|
54
|
-
"typescript": "^4.
|
|
50
|
+
"stylelint": "^14.5.3",
|
|
51
|
+
"stylelint-config-recommended-less": "^1.0.4",
|
|
52
|
+
"stylelint-config-standard": "^25.0.0",
|
|
53
|
+
"stylelint-less": "^1.0.3",
|
|
54
|
+
"typescript": "^4.6.2"
|
|
55
55
|
},
|
|
56
56
|
"browserslist": [
|
|
57
57
|
"last 2 versions",
|