@stackoverflow/stacks 0.71.0 → 0.72.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 +183 -39
- package/dist/css/stacks.min.css +1 -1
- package/dist/js/stacks.js +76 -31
- package/dist/js/stacks.min.js +1 -1
- package/lib/css/atomic/_stacks-misc.less +6 -0
- package/lib/css/components/_stacks-activity-indicator.less +26 -2
- package/lib/css/components/_stacks-badges.less +0 -4
- package/lib/css/components/_stacks-buttons.less +44 -8
- package/lib/css/components/_stacks-cards.less +7 -11
- package/lib/css/components/_stacks-inputs.less +10 -0
- package/lib/css/components/_stacks-link-previews.less +4 -0
- package/lib/css/components/_stacks-links.less +25 -2
- package/lib/css/components/_stacks-navigation.less +8 -0
- package/lib/css/components/_stacks-pagination.less +2 -0
- package/lib/css/components/_stacks-post-summary.less +39 -0
- package/lib/css/components/_stacks-prose.less +7 -2
- package/lib/css/components/_stacks-tags.less +2 -0
- package/lib/css/components/_stacks-topbar.less +440 -0
- package/lib/css/components/_stacks-uploader.less +2 -0
- package/lib/css/exports/_stacks-constants-colors.less +40 -14
- package/lib/css/exports/_stacks-constants-helpers.less +0 -2
- package/lib/css/exports/_stacks-mixins.less +11 -0
- package/lib/css/stacks-dynamic.less +0 -1
- package/lib/css/stacks-static.less +2 -0
- package/package.json +10 -10
|
@@ -0,0 +1,440 @@
|
|
|
1
|
+
//
|
|
2
|
+
// STACK OVERFLOW
|
|
3
|
+
// TOPBAR
|
|
4
|
+
//
|
|
5
|
+
// This CSS comes from Stacks, our CSS & Pattern library for rapidly building
|
|
6
|
+
// Stack Overflow. For documentation of all these classes and how to contribute,
|
|
7
|
+
// visit https://stackoverflow.design/
|
|
8
|
+
//
|
|
9
|
+
// ============================================================================
|
|
10
|
+
// $ BASE STYLE
|
|
11
|
+
// ----------------------------------------------------------------------------
|
|
12
|
+
.s-topbar {
|
|
13
|
+
min-width: auto;
|
|
14
|
+
box-shadow: var(--bs-sm);
|
|
15
|
+
width: 100%;
|
|
16
|
+
z-index: @zi-navigation-fixed;
|
|
17
|
+
background-color: var(--theme-topbar-background-color);
|
|
18
|
+
height: var(--theme-topbar-height);
|
|
19
|
+
display: flex;
|
|
20
|
+
border-top: var(--theme-topbar-accent-border);
|
|
21
|
+
position: relative;
|
|
22
|
+
align-items: center;
|
|
23
|
+
|
|
24
|
+
// Redefine the variables for extra contrast in high-contrast mode
|
|
25
|
+
.highcontrast-mode({
|
|
26
|
+
// Search input
|
|
27
|
+
--theme-topbar-search-color: var(--theme-topbar-item-color);
|
|
28
|
+
--theme-topbar-search-background: var(--theme-topbar-background-color);
|
|
29
|
+
--theme-topbar-search-placeholder: var(--theme-topbar-item-color);
|
|
30
|
+
--theme-topbar-search-border: var(--theme-topbar-item-color);
|
|
31
|
+
--theme-topbar-search-border-focus: var(--theme-topbar-item-color);
|
|
32
|
+
|
|
33
|
+
// Search switcher
|
|
34
|
+
--theme-topbar-select-color: var(--theme-topbar-item-color);
|
|
35
|
+
--theme-topbar-select-background: var(--theme-topbar-background-color);
|
|
36
|
+
|
|
37
|
+
// Topbar items
|
|
38
|
+
--theme-topbar-item-color: var(--black-800);
|
|
39
|
+
--theme-topbar-item-color-hover: var(--black-900);
|
|
40
|
+
--theme-topbar-item-background-hover: var(--black-200);
|
|
41
|
+
--theme-topbar-item-color-current: var(--black);
|
|
42
|
+
});
|
|
43
|
+
|
|
44
|
+
.highcontrast-mode({ border-bottom: 1px solid currentColor; });
|
|
45
|
+
|
|
46
|
+
// Wraps the content so the topbar stretches 100% w/ content at some value below that
|
|
47
|
+
.s-topbar--container {
|
|
48
|
+
width: @s-full; // wmx12; Consumers should use atomic classes to override this
|
|
49
|
+
max-width: 100%;
|
|
50
|
+
height: 100%;
|
|
51
|
+
display: flex;
|
|
52
|
+
margin: 0 auto;
|
|
53
|
+
align-items: center;
|
|
54
|
+
}
|
|
55
|
+
|
|
56
|
+
.s-topbar--logo {
|
|
57
|
+
padding: 0 @su8;
|
|
58
|
+
height: 100%;
|
|
59
|
+
display: flex;
|
|
60
|
+
align-items: center;
|
|
61
|
+
background-color: transparent;
|
|
62
|
+
}
|
|
63
|
+
|
|
64
|
+
a.s-topbar--logo:hover {
|
|
65
|
+
background-color: var(--theme-topbar-item-background-hover);
|
|
66
|
+
}
|
|
67
|
+
|
|
68
|
+
a.s-topbar--logo.is-selected {
|
|
69
|
+
background-color: var(--theme-topbar-item-background-hover);
|
|
70
|
+
}
|
|
71
|
+
|
|
72
|
+
.s-topbar--menu-btn {
|
|
73
|
+
display: flex;
|
|
74
|
+
height: 100%;
|
|
75
|
+
padding: 0 @su16;
|
|
76
|
+
flex-shrink: 0;
|
|
77
|
+
align-items: center;
|
|
78
|
+
justify-content: center;
|
|
79
|
+
|
|
80
|
+
// Build a hamburger icon manually using spans instead of using `@Svg` helper so
|
|
81
|
+
// we can more easily animate its content and transform the hamburger into an x
|
|
82
|
+
span {
|
|
83
|
+
&,
|
|
84
|
+
&:before,
|
|
85
|
+
&:after {
|
|
86
|
+
width: @su16;
|
|
87
|
+
height: @su2;
|
|
88
|
+
background-color: var(--theme-topbar-item-color);
|
|
89
|
+
position: relative;
|
|
90
|
+
}
|
|
91
|
+
|
|
92
|
+
&:before,
|
|
93
|
+
&:after {
|
|
94
|
+
position: absolute;
|
|
95
|
+
content: '';
|
|
96
|
+
left: 0;
|
|
97
|
+
top: -5px;
|
|
98
|
+
transition: top, transform;
|
|
99
|
+
transition-duration: 0.1s;
|
|
100
|
+
transition-timing-function: ease-in-out;
|
|
101
|
+
}
|
|
102
|
+
|
|
103
|
+
&:after {
|
|
104
|
+
top: 5px;
|
|
105
|
+
}
|
|
106
|
+
}
|
|
107
|
+
|
|
108
|
+
// Transforming hamburger into x
|
|
109
|
+
&.is-selected {
|
|
110
|
+
color: var(--theme-topbar-item-color-current);
|
|
111
|
+
background-color: var(--theme-topbar-item-background-current);
|
|
112
|
+
|
|
113
|
+
span {
|
|
114
|
+
background-color: transparent;
|
|
115
|
+
|
|
116
|
+
&:before,
|
|
117
|
+
&:after {
|
|
118
|
+
top: 0;
|
|
119
|
+
transform: rotate(-45deg);
|
|
120
|
+
}
|
|
121
|
+
|
|
122
|
+
&:after { transform: rotate(45deg); }
|
|
123
|
+
}
|
|
124
|
+
}
|
|
125
|
+
|
|
126
|
+
&:hover {
|
|
127
|
+
color: var(--theme-topbar-item-color-hover);
|
|
128
|
+
background-color: var(--theme-topbar-item-background-hover);
|
|
129
|
+
}
|
|
130
|
+
}
|
|
131
|
+
|
|
132
|
+
.s-navigation {
|
|
133
|
+
.s-navigation--item:not(.is-selected) {
|
|
134
|
+
color: var(--theme-topbar-item-color);
|
|
135
|
+
}
|
|
136
|
+
|
|
137
|
+
.s-navigation--item:not(.is-selected):hover {
|
|
138
|
+
color: var(--theme-topbar-item-color-hover);
|
|
139
|
+
background-color: var(--theme-topbar-item-background-hover);
|
|
140
|
+
}
|
|
141
|
+
}
|
|
142
|
+
}
|
|
143
|
+
|
|
144
|
+
// ===========================================================================
|
|
145
|
+
// $ LIGHT
|
|
146
|
+
// ---------------------------------------------------------------------------
|
|
147
|
+
.s-topbar__light {
|
|
148
|
+
// TODO this only works 100% perfectly in light mode, due to child elements inheriting current theme colors
|
|
149
|
+
// TODO extend forced light mode instead of overriding
|
|
150
|
+
|
|
151
|
+
--theme-topbar-background-color: @black-025;
|
|
152
|
+
|
|
153
|
+
// Search input
|
|
154
|
+
--theme-topbar-search-color: @black-700;
|
|
155
|
+
--theme-topbar-search-background: @white;
|
|
156
|
+
--theme-topbar-search-placeholder: @black-200;
|
|
157
|
+
--theme-topbar-search-border: @black-200;
|
|
158
|
+
--theme-topbar-search-border-focus: @blue-300;
|
|
159
|
+
--theme-topbar-search-shadow-focus: 0 0 0 @su4 var(--focus-ring);
|
|
160
|
+
|
|
161
|
+
// Search switcher
|
|
162
|
+
--theme-topbar-select-color: @black-700;
|
|
163
|
+
--theme-topbar-select-background: @black-050;
|
|
164
|
+
|
|
165
|
+
// Items
|
|
166
|
+
--theme-topbar-item-color: @black-600;
|
|
167
|
+
--theme-topbar-item-color-hover: @black-800;
|
|
168
|
+
--theme-topbar-item-background-hover: @black-075;
|
|
169
|
+
--theme-topbar-item-color-current: @black;
|
|
170
|
+
--theme-topbar-item-border-current: var(--theme-primary-color);
|
|
171
|
+
|
|
172
|
+
// TODO HACK remove everything below once light/dark topbars are inheriting forced themes correctly
|
|
173
|
+
// redefine the variables for extra contrast in high-contrast mode
|
|
174
|
+
.highcontrast-mode({
|
|
175
|
+
// Topbar items
|
|
176
|
+
--theme-topbar-item-color: @black-800;
|
|
177
|
+
--theme-topbar-item-color-hover: @black-900;
|
|
178
|
+
--theme-topbar-item-background-hover: @black-075;
|
|
179
|
+
--theme-topbar-item-color-current: @black;
|
|
180
|
+
});
|
|
181
|
+
|
|
182
|
+
--scrollbar: hsla(0, 0%, 0%, 0.2);
|
|
183
|
+
}
|
|
184
|
+
|
|
185
|
+
// ===========================================================================
|
|
186
|
+
// $ DARK
|
|
187
|
+
// ---------------------------------------------------------------------------
|
|
188
|
+
.s-topbar__dark {
|
|
189
|
+
// TODO this only works 100% perfectly in dark mode, due to child elements inheriting current theme colors
|
|
190
|
+
// TODO extend forced dark mode instead of overriding
|
|
191
|
+
|
|
192
|
+
@topbar-actual-background: @black-800;
|
|
193
|
+
// TODO
|
|
194
|
+
#calc-topbar-lightness-increase() when (lightness(@topbar-actual-background) < 15%) {
|
|
195
|
+
@topbar-search-lightness-increase: 20%;
|
|
196
|
+
}
|
|
197
|
+
#calc-topbar-lightness-increase() when not (lightness(@topbar-actual-background) < 15%) {
|
|
198
|
+
@topbar-search-lightness-increase: 10%;
|
|
199
|
+
}
|
|
200
|
+
#calc-topbar-lightness-increase();
|
|
201
|
+
|
|
202
|
+
--theme-topbar-background-color: @topbar-actual-background;
|
|
203
|
+
|
|
204
|
+
// Search input
|
|
205
|
+
--theme-topbar-search-color: lighten(@topbar-actual-background, 80% + @topbar-search-lightness-increase);
|
|
206
|
+
--theme-topbar-search-background: lighten(@topbar-actual-background, @topbar-search-lightness-increase);
|
|
207
|
+
--theme-topbar-search-placeholder: lighten(@topbar-actual-background, 60% + @topbar-search-lightness-increase);
|
|
208
|
+
--theme-topbar-search-border: lighten(@topbar-actual-background, 20% + @topbar-search-lightness-increase);
|
|
209
|
+
--theme-topbar-search-border-focus: lighten(@topbar-actual-background, 45% + @topbar-search-lightness-increase);
|
|
210
|
+
--theme-topbar-search-shadow-focus: 0 0 0 @su4 fade(@white, 30%);
|
|
211
|
+
|
|
212
|
+
// Search switcher
|
|
213
|
+
--theme-topbar-select-color: lighten(@topbar-actual-background, 60% + @topbar-search-lightness-increase);
|
|
214
|
+
--theme-topbar-select-background: lighten(@topbar-actual-background, 10% + @topbar-search-lightness-increase);
|
|
215
|
+
|
|
216
|
+
// Items
|
|
217
|
+
--theme-topbar-item-color: @black-025;
|
|
218
|
+
--theme-topbar-item-color-hover: @white;
|
|
219
|
+
--theme-topbar-item-background-hover: @black-700;
|
|
220
|
+
--theme-topbar-item-color-current: @white;
|
|
221
|
+
--theme-topbar-item-border-current: var(--theme-primary-color);
|
|
222
|
+
|
|
223
|
+
// Themed border accent
|
|
224
|
+
--theme-topbar-accent-border: none;
|
|
225
|
+
|
|
226
|
+
// TODO HACK remove everything below once light/dark topbars are inheriting forced themes correctly
|
|
227
|
+
// redefine the variables for extra contrast in high-contrast mode
|
|
228
|
+
.highcontrast-mode({
|
|
229
|
+
// Topbar items
|
|
230
|
+
--theme-topbar-item-color: @white;
|
|
231
|
+
--theme-topbar-item-color-hover: @white;
|
|
232
|
+
--theme-topbar-item-background-hover: @black-700;
|
|
233
|
+
--theme-topbar-item-color-current: @white;
|
|
234
|
+
|
|
235
|
+
.s-badge {
|
|
236
|
+
border-color: currentColor;
|
|
237
|
+
}
|
|
238
|
+
});
|
|
239
|
+
|
|
240
|
+
--scrollbar: hsla(0, 0%, 100%, 0.2);
|
|
241
|
+
}
|
|
242
|
+
|
|
243
|
+
// ===========================================================================
|
|
244
|
+
// $ CONTENT & CTAS
|
|
245
|
+
// ---------------------------------------------------------------------------
|
|
246
|
+
.s-topbar .s-topbar--content,
|
|
247
|
+
.s-topbar .s-topbar--ctas {
|
|
248
|
+
display: flex;
|
|
249
|
+
height: 100%;
|
|
250
|
+
.list-reset;
|
|
251
|
+
|
|
252
|
+
& > li {
|
|
253
|
+
display: inline-flex;
|
|
254
|
+
}
|
|
255
|
+
}
|
|
256
|
+
|
|
257
|
+
.s-topbar .s-topbar--content {
|
|
258
|
+
overflow-x: auto; // Allow this content to scroll if it gets too long
|
|
259
|
+
@scrollbar-styles(); // Style the scrollbars
|
|
260
|
+
margin-left: auto; // Push this section as far to the right as possible
|
|
261
|
+
|
|
262
|
+
.s-topbar--item {
|
|
263
|
+
color: var(--theme-topbar-item-color);
|
|
264
|
+
display: inline-flex;
|
|
265
|
+
align-items: center;
|
|
266
|
+
padding: 0 (@su12 - @su2);
|
|
267
|
+
text-decoration: none;
|
|
268
|
+
white-space: nowrap;
|
|
269
|
+
position: relative;
|
|
270
|
+
|
|
271
|
+
&:hover,
|
|
272
|
+
&:focus,
|
|
273
|
+
&.is-selected,
|
|
274
|
+
&.is-selected:hover,
|
|
275
|
+
&.is-selected:focus {
|
|
276
|
+
color: var(--theme-topbar-item-color-hover);
|
|
277
|
+
background-color: var(--theme-topbar-item-background-hover);
|
|
278
|
+
text-decoration: none;
|
|
279
|
+
outline: none;
|
|
280
|
+
|
|
281
|
+
.s-activity-indicator {
|
|
282
|
+
top: calc(50% - 18px);
|
|
283
|
+
}
|
|
284
|
+
}
|
|
285
|
+
|
|
286
|
+
.svg-icon {
|
|
287
|
+
vertical-align: text-top;
|
|
288
|
+
}
|
|
289
|
+
|
|
290
|
+
.s-activity-indicator {
|
|
291
|
+
position: absolute;
|
|
292
|
+
top: calc(50% - 14px);
|
|
293
|
+
right: 2px;
|
|
294
|
+
transition: top @te-smooth 0.15s;
|
|
295
|
+
}
|
|
296
|
+
}
|
|
297
|
+
}
|
|
298
|
+
|
|
299
|
+
// CTAs: Sign in, Sign up, etc. on the far right
|
|
300
|
+
.s-topbar .s-topbar--ctas {
|
|
301
|
+
padding-left: @su4;
|
|
302
|
+
padding-right: @su8;
|
|
303
|
+
overflow-x: auto; // Allow this content to scroll if it gets too long
|
|
304
|
+
@scrollbar-styles(); // Style the scrollbars
|
|
305
|
+
margin-left: auto; // Push this section as far to the right as possible
|
|
306
|
+
|
|
307
|
+
li + li {
|
|
308
|
+
margin-left: @su4;
|
|
309
|
+
}
|
|
310
|
+
|
|
311
|
+
.s-topbar--item {
|
|
312
|
+
align-self: center;
|
|
313
|
+
padding-top: @su8;
|
|
314
|
+
padding-bottom: @su8;
|
|
315
|
+
}
|
|
316
|
+
}
|
|
317
|
+
|
|
318
|
+
// ===========================================================================
|
|
319
|
+
// $ NOTICE
|
|
320
|
+
// ---------------------------------------------------------------------------
|
|
321
|
+
.s-topbar--notice {
|
|
322
|
+
&:extend(.s-badge);
|
|
323
|
+
|
|
324
|
+
text-transform: uppercase;
|
|
325
|
+
font-size: @fs-fine;
|
|
326
|
+
font-weight: 700;
|
|
327
|
+
margin-left: @su8;
|
|
328
|
+
margin-right: @su8;
|
|
329
|
+
flex-shrink: 0;
|
|
330
|
+
|
|
331
|
+
.badge-styles(transparent, transparent, var(--theme-topbar-item-color));
|
|
332
|
+
|
|
333
|
+
&:hover,
|
|
334
|
+
&:focus {
|
|
335
|
+
.badge-styles(var(--theme-topbar-item-background-hover), var(--theme-topbar-item-background-hover), var(--theme-topbar-item-color-hover));
|
|
336
|
+
}
|
|
337
|
+
|
|
338
|
+
&.is-unread {
|
|
339
|
+
.badge-styles(var(--theme-primary-color), var(--theme-primary-color), var(--white));
|
|
340
|
+
|
|
341
|
+
&:hover,
|
|
342
|
+
&:focus {
|
|
343
|
+
.badge-styles(var(--theme-primary-600), var(--theme-primary-600), var(--white));
|
|
344
|
+
}
|
|
345
|
+
}
|
|
346
|
+
}
|
|
347
|
+
|
|
348
|
+
// ===========================================================================
|
|
349
|
+
// $ SEARCHBAR
|
|
350
|
+
// ---------------------------------------------------------------------------
|
|
351
|
+
.s-topbar .s-topbar--searchbar {
|
|
352
|
+
@inputLineHeights: @lh-sm; // Ensure the line heights between the elements match up
|
|
353
|
+
padding: 0 @su8;
|
|
354
|
+
display: flex;
|
|
355
|
+
align-items: center;
|
|
356
|
+
flex-shrink: 10000; // Force the searchbar to shrink as much as possible if there's no extra space
|
|
357
|
+
flex-grow: 1; //...but allow it to grow if there *is* extra space
|
|
358
|
+
|
|
359
|
+
.s-topbar--searchbar--input-group {
|
|
360
|
+
position: relative;
|
|
361
|
+
flex-grow: 1;
|
|
362
|
+
|
|
363
|
+
.s-input {
|
|
364
|
+
border-color: var(--theme-topbar-search-border);
|
|
365
|
+
background-color: var(--theme-topbar-search-background);
|
|
366
|
+
box-shadow: var(--theme-topbar-search-shadow);
|
|
367
|
+
color: var(--theme-topbar-search-color);
|
|
368
|
+
display: block;
|
|
369
|
+
line-height: @inputLineHeights;
|
|
370
|
+
|
|
371
|
+
&:focus {
|
|
372
|
+
border-color: var(--theme-topbar-search-border-focus);
|
|
373
|
+
box-shadow: var(--theme-topbar-search-shadow-focus);
|
|
374
|
+
}
|
|
375
|
+
|
|
376
|
+
&::placeholder {
|
|
377
|
+
color: var(--theme-topbar-search-placeholder);
|
|
378
|
+
font-style: normal;
|
|
379
|
+
}
|
|
380
|
+
}
|
|
381
|
+
|
|
382
|
+
.s-input-icon {
|
|
383
|
+
color: var(--theme-topbar-search-placeholder);
|
|
384
|
+
}
|
|
385
|
+
}
|
|
386
|
+
|
|
387
|
+
.s-select {
|
|
388
|
+
.wmx2;
|
|
389
|
+
|
|
390
|
+
align-self: stretch;
|
|
391
|
+
margin-right: -1px;
|
|
392
|
+
color: var(--theme-topbar-select-color);
|
|
393
|
+
|
|
394
|
+
&:before,
|
|
395
|
+
&:after {
|
|
396
|
+
z-index: @zi-active; // Make sure our focus ring is above the search input
|
|
397
|
+
}
|
|
398
|
+
}
|
|
399
|
+
|
|
400
|
+
.s-select > select {
|
|
401
|
+
.brr0;
|
|
402
|
+
height: 100%;
|
|
403
|
+
line-height: @inputLineHeights;
|
|
404
|
+
|
|
405
|
+
border-color: var(--theme-topbar-search-border);
|
|
406
|
+
background-color: var(--theme-topbar-select-background);
|
|
407
|
+
color: var(--theme-topbar-select-color);
|
|
408
|
+
|
|
409
|
+
&:focus {
|
|
410
|
+
border-color: var(--theme-topbar-search-border-focus);
|
|
411
|
+
box-shadow: var(--theme-topbar-search-shadow-focus);
|
|
412
|
+
z-index: @zi-selected;
|
|
413
|
+
}
|
|
414
|
+
}
|
|
415
|
+
|
|
416
|
+
// Drop the left border of the search input when it is next to the select
|
|
417
|
+
.s-select + .s-topbar--searchbar--input-group > .s-input {
|
|
418
|
+
.blr0;
|
|
419
|
+
}
|
|
420
|
+
|
|
421
|
+
#stacks-internals #screen-sm({
|
|
422
|
+
display: none;
|
|
423
|
+
position: absolute;
|
|
424
|
+
left: 0;
|
|
425
|
+
right: 0;
|
|
426
|
+
top: 100%;
|
|
427
|
+
max-width: 100%;
|
|
428
|
+
padding: @su8 @su12;
|
|
429
|
+
background: var(--theme-topbar-item-background-hover);
|
|
430
|
+
|
|
431
|
+
&.s-topbar--searchbar__open {
|
|
432
|
+
display: flex;
|
|
433
|
+
max-width: none;
|
|
434
|
+
}
|
|
435
|
+
|
|
436
|
+
.s-select {
|
|
437
|
+
.w25;
|
|
438
|
+
}
|
|
439
|
+
});
|
|
440
|
+
}
|
|
@@ -235,6 +235,32 @@
|
|
|
235
235
|
// Button Outline
|
|
236
236
|
--theme-button-outlined-border-color: var(--theme-secondary-300);
|
|
237
237
|
--theme-button-outlined-selected-border-color: var(--theme-secondary-400);
|
|
238
|
+
|
|
239
|
+
// Topbar
|
|
240
|
+
--theme-topbar-height: @su48;
|
|
241
|
+
--theme-topbar-background-color: var(--black-025);
|
|
242
|
+
|
|
243
|
+
// Topbar Search input
|
|
244
|
+
--theme-topbar-search-color: var(--black-700);
|
|
245
|
+
--theme-topbar-search-background: var(--white);
|
|
246
|
+
--theme-topbar-search-placeholder: var(--black-200);
|
|
247
|
+
--theme-topbar-search-border: var(--black-200);
|
|
248
|
+
--theme-topbar-search-border-focus: var(--blue-300);
|
|
249
|
+
--theme-topbar-search-shadow-focus: 0 0 0 @su4 var(--focus-ring);
|
|
250
|
+
|
|
251
|
+
// Topbar Search switcher
|
|
252
|
+
--theme-topbar-select-color: var(--black-700);
|
|
253
|
+
--theme-topbar-select-background: var(--black-075);
|
|
254
|
+
|
|
255
|
+
// Topbar items
|
|
256
|
+
--theme-topbar-item-color: var(--black-600);
|
|
257
|
+
--theme-topbar-item-color-hover: var(--black-800);
|
|
258
|
+
--theme-topbar-item-background-hover: var(--black-075);
|
|
259
|
+
--theme-topbar-item-color-current: var(--black);
|
|
260
|
+
--theme-topbar-item-border-current: var(--theme-primary-color);
|
|
261
|
+
|
|
262
|
+
// Topbar themed border accent
|
|
263
|
+
--theme-topbar-accent-border: 3px solid var(--theme-primary-color);
|
|
238
264
|
}
|
|
239
265
|
|
|
240
266
|
// -- Light mode
|
|
@@ -779,11 +805,11 @@
|
|
|
779
805
|
--fc-light: var(--black-500);
|
|
780
806
|
|
|
781
807
|
// Focus rings
|
|
782
|
-
--focus-ring: fade(@blue-600,
|
|
783
|
-
--focus-ring-success: fade(@green-600,
|
|
784
|
-
--focus-ring-warning: fade(@yellow-600,
|
|
785
|
-
--focus-ring-error: fade(@red-600,
|
|
786
|
-
--focus-ring-muted: fade(@black-
|
|
808
|
+
--focus-ring: fade(@blue-600, 90%);
|
|
809
|
+
--focus-ring-success: fade(@green-600, 90%);
|
|
810
|
+
--focus-ring-warning: fade(@yellow-600, 90%);
|
|
811
|
+
--focus-ring-error: fade(@red-600, 90%);
|
|
812
|
+
--focus-ring-muted: fade(@black-400, 95%);
|
|
787
813
|
|
|
788
814
|
// Shadows
|
|
789
815
|
--bs-sm: none;
|
|
@@ -845,10 +871,10 @@
|
|
|
845
871
|
--orange-900: hsl(@orange-h, 100%, 91%);
|
|
846
872
|
|
|
847
873
|
// Blue
|
|
848
|
-
--blue-050: hsl(@blue-h, 100%,
|
|
849
|
-
--blue-100: hsl(@blue-h, 100%,
|
|
850
|
-
--blue-200: hsl(@blue-h, 100%,
|
|
851
|
-
--blue-300: hsl(@blue-h, 100%,
|
|
874
|
+
--blue-050: hsl(@blue-h, 100%, 4%);
|
|
875
|
+
--blue-100: hsl(@blue-h, 100%, 11%);
|
|
876
|
+
--blue-200: hsl(@blue-h, 100%, 18%);
|
|
877
|
+
--blue-300: hsl(@blue-h, 100%, 25%);
|
|
852
878
|
--blue-400: hsl(@blue-h, 100%, 75%);
|
|
853
879
|
--blue-500: hsl(@blue-h, 100%, 80%);
|
|
854
880
|
--blue-600: hsl(@blue-h, 100%, 85%);
|
|
@@ -929,11 +955,11 @@
|
|
|
929
955
|
--bc-darker: var(--black-900);
|
|
930
956
|
|
|
931
957
|
// Focus rings
|
|
932
|
-
--focus-ring: fade(@blue-600,
|
|
933
|
-
--focus-ring-success: fade(@green-600,
|
|
934
|
-
--focus-ring-warning: fade(@yellow-600,
|
|
935
|
-
--focus-ring-error: fade(@red-600,
|
|
936
|
-
--focus-ring-muted: fade(@black-
|
|
958
|
+
--focus-ring: fade(@blue-600, 90%);
|
|
959
|
+
--focus-ring-success: fade(@green-600, 90%);
|
|
960
|
+
--focus-ring-warning: fade(@yellow-600, 90%);
|
|
961
|
+
--focus-ring-error: fade(@red-600, 90%);
|
|
962
|
+
--focus-ring-muted: fade(@black-400, 95%);
|
|
937
963
|
|
|
938
964
|
// Font colors
|
|
939
965
|
--fc-dark: var(--black-900);
|
|
@@ -126,14 +126,12 @@
|
|
|
126
126
|
// Hide focus styles if they're not needed, for example,
|
|
127
127
|
// when an element receives focus via the mouse.
|
|
128
128
|
&:focus:not(:focus-visible) {
|
|
129
|
-
color: inherit;
|
|
130
129
|
outline: none;
|
|
131
130
|
box-shadow: none;
|
|
132
131
|
}
|
|
133
132
|
|
|
134
133
|
// Show focus styles on keyboard focus.
|
|
135
134
|
&:focus-visible {
|
|
136
|
-
color: inherit;
|
|
137
135
|
outline: none;
|
|
138
136
|
box-shadow: 0 0 0 @su4 var(--focus-ring-muted);
|
|
139
137
|
}
|
|
@@ -60,6 +60,17 @@
|
|
|
60
60
|
}
|
|
61
61
|
}
|
|
62
62
|
|
|
63
|
+
.highcontrast-dark-mode(@rules) {
|
|
64
|
+
body.theme-highcontrast.theme-system & {
|
|
65
|
+
@media (prefers-color-scheme: dark) {
|
|
66
|
+
@rules();
|
|
67
|
+
}
|
|
68
|
+
}
|
|
69
|
+
body.theme-highcontrast.theme-dark & {
|
|
70
|
+
@rules();
|
|
71
|
+
}
|
|
72
|
+
}
|
|
73
|
+
|
|
63
74
|
// ===========================================================================
|
|
64
75
|
// -- APPEARANCE
|
|
65
76
|
// Use this to overwrite the default appearance properties
|
|
@@ -22,7 +22,6 @@
|
|
|
22
22
|
@import "components/_stacks-buttons.less";
|
|
23
23
|
@import "components/_stacks-links.less";
|
|
24
24
|
@import "components/_stacks-link-previews.less";
|
|
25
|
-
@import "components/_stacks-navigation.less";
|
|
26
25
|
@import "components/_stacks-notices.less";
|
|
27
26
|
@import "components/_stacks-tags.less";
|
|
28
27
|
@import "components/_stacks-pagination.less";
|
|
@@ -29,6 +29,7 @@
|
|
|
29
29
|
@import "components/_stacks-inputs.less";
|
|
30
30
|
@import "components/_stacks-menu.less";
|
|
31
31
|
@import "components/_stacks-modals.less";
|
|
32
|
+
@import "components/_stacks-navigation.less";
|
|
32
33
|
@import "components/_stacks-page-titles.less";
|
|
33
34
|
@import "components/_stacks-popovers.less";
|
|
34
35
|
@import "components/_stacks-post-summary.less";
|
|
@@ -37,6 +38,7 @@
|
|
|
37
38
|
@import "components/_stacks-spinner.less";
|
|
38
39
|
@import "components/_stacks-tables.less";
|
|
39
40
|
@import "components/_stacks-toggle-switches.less";
|
|
41
|
+
@import "components/_stacks-topbar.less";
|
|
40
42
|
@import "components/_stacks-uploader.less";
|
|
41
43
|
@import "components/_stacks-user-cards.less";
|
|
42
44
|
@import "components/_stacks-widget-static.less";
|
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.72.0",
|
|
9
9
|
"files": [
|
|
10
10
|
"dist",
|
|
11
11
|
"lib"
|
|
@@ -19,24 +19,24 @@
|
|
|
19
19
|
},
|
|
20
20
|
"license": "MIT",
|
|
21
21
|
"dependencies": {
|
|
22
|
-
"@popperjs/core": "^2.
|
|
22
|
+
"@popperjs/core": "^2.10.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.3.1",
|
|
28
28
|
"@stackoverflow/stacks-editor": "^0.4.1",
|
|
29
|
-
"@stackoverflow/stacks-icons": "^2.
|
|
30
|
-
"backstopjs": "^
|
|
29
|
+
"@stackoverflow/stacks-icons": "^2.25.0",
|
|
30
|
+
"backstopjs": "^6.0.1",
|
|
31
31
|
"docsearch.js": "^2.6.3",
|
|
32
32
|
"eleventy-plugin-highlightjs": "^0.3.0",
|
|
33
33
|
"eleventy-plugin-markdown-shortcode": "^1.1.0",
|
|
34
|
-
"eleventy-plugin-nesting-toc": "^1.
|
|
35
|
-
"grunt": "^1.
|
|
36
|
-
"grunt-cli": "^1.4.
|
|
34
|
+
"eleventy-plugin-nesting-toc": "^1.3.0",
|
|
35
|
+
"grunt": "^1.4.1",
|
|
36
|
+
"grunt-cli": "^1.4.3",
|
|
37
37
|
"grunt-concurrent": "^3.0.0",
|
|
38
38
|
"grunt-contrib-clean": "^2.0.0",
|
|
39
|
-
"grunt-contrib-concat": "^
|
|
39
|
+
"grunt-contrib-concat": "^2.0.0",
|
|
40
40
|
"grunt-contrib-copy": "^1.0.0",
|
|
41
41
|
"grunt-contrib-cssmin": "^4.0.0",
|
|
42
42
|
"grunt-contrib-less": "^3.0.0",
|
|
@@ -48,7 +48,7 @@
|
|
|
48
48
|
"list.js": "^2.3.1",
|
|
49
49
|
"stylelint": "^13.13.1",
|
|
50
50
|
"stylelint-config-standard": "^22.0.0",
|
|
51
|
-
"typescript": "^4.2
|
|
51
|
+
"typescript": "^4.5.2"
|
|
52
52
|
},
|
|
53
53
|
"browserslist": [
|
|
54
54
|
"last 2 versions",
|