@stackoverflow/stacks 0.73.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 +371 -92
- 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-misc.less +1 -0
- package/lib/css/atomic/_stacks-spacing.less +6 -0
- package/lib/css/atomic/_stacks-typography.less +3 -0
- package/lib/css/atomic/_stacks-width-height.less +8 -2
- package/lib/css/components/_stacks-inputs.less +4 -0
- package/lib/css/components/_stacks-post-summary.less +185 -57
- 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 +15 -1
- package/package.json +11 -11
|
@@ -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; });
|
|
@@ -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;
|
|
@@ -36,6 +34,87 @@
|
|
|
36
34
|
width: 100%;
|
|
37
35
|
}
|
|
38
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
|
+
}
|
|
39
118
|
}
|
|
40
119
|
|
|
41
120
|
// [1] To override .s-btn class attributes
|
|
@@ -51,44 +130,55 @@
|
|
|
51
130
|
}
|
|
52
131
|
|
|
53
132
|
.s-post-summary--stats {
|
|
54
|
-
|
|
55
|
-
margin-right: @
|
|
56
|
-
margin-bottom:
|
|
57
|
-
width: @su96;
|
|
133
|
+
gap: @su6;
|
|
134
|
+
margin-right: @su16;
|
|
135
|
+
margin-bottom: @su4;
|
|
136
|
+
width: @su96 + @su12;
|
|
58
137
|
display: flex;
|
|
59
138
|
flex-direction: column;
|
|
60
139
|
flex-shrink: 0;
|
|
61
140
|
flex-wrap: wrap;
|
|
62
141
|
align-items: flex-end;
|
|
63
|
-
font-size: @fs-
|
|
142
|
+
font-size: @fs-body1;
|
|
64
143
|
color: var(--fc-light);
|
|
65
144
|
|
|
66
145
|
.s-post-summary--stats-item {
|
|
67
|
-
|
|
68
|
-
|
|
146
|
+
display: inline-flex;
|
|
147
|
+
gap: 0.3em;
|
|
148
|
+
align-items: center;
|
|
149
|
+
justify-content: center;
|
|
69
150
|
white-space: nowrap;
|
|
70
151
|
border: 1px solid transparent;
|
|
71
152
|
|
|
153
|
+
&.s-post-summary--stats-item__emphasized {
|
|
154
|
+
color: var(--fc-dark);
|
|
155
|
+
}
|
|
156
|
+
|
|
157
|
+
.s-post-summary--stats-item-number {
|
|
158
|
+
font-weight: 500;
|
|
159
|
+
}
|
|
160
|
+
|
|
72
161
|
&.has-answers,
|
|
73
162
|
&.has-bounty,
|
|
74
|
-
&.is-watched,
|
|
75
|
-
&.is-ignored,
|
|
76
163
|
&.is-deleted,
|
|
77
164
|
&.is-published,
|
|
78
165
|
&.is-draft,
|
|
79
166
|
&.is-review,
|
|
80
|
-
&.is-
|
|
167
|
+
&.is-closed,
|
|
168
|
+
&.is-archived,
|
|
169
|
+
&.is-pinned {
|
|
81
170
|
border-radius: @br-sm;
|
|
82
171
|
padding: @su2 @su4;
|
|
83
172
|
}
|
|
84
173
|
|
|
85
174
|
&.has-answers {
|
|
86
|
-
color: var(--green-
|
|
87
|
-
border: 1px solid var(--green-
|
|
175
|
+
color: var(--green-600);
|
|
176
|
+
border: 1px solid var(--green-600);
|
|
88
177
|
|
|
89
178
|
&.has-accepted-answer {
|
|
90
179
|
color: @white;
|
|
91
180
|
background-color: var(--green-500);
|
|
181
|
+
border-color: var(--green-500);
|
|
92
182
|
|
|
93
183
|
.highcontrast-mode({
|
|
94
184
|
color: var(--white);
|
|
@@ -119,18 +209,32 @@
|
|
|
119
209
|
}
|
|
120
210
|
|
|
121
211
|
&.is-draft {
|
|
122
|
-
color: var(--
|
|
123
|
-
background-color: var(--blue-
|
|
212
|
+
color: var(--blue-900);
|
|
213
|
+
background-color: var(--blue-100);
|
|
214
|
+
border-color: var(--blue-600);
|
|
124
215
|
}
|
|
125
216
|
|
|
126
217
|
&.is-review {
|
|
127
|
-
color: var(--
|
|
128
|
-
background-color: var(--yellow-
|
|
218
|
+
color: var(--yellow-900);
|
|
219
|
+
background-color: var(--yellow-100);
|
|
220
|
+
border-color: var(--yellow-600);
|
|
129
221
|
}
|
|
130
222
|
|
|
131
|
-
&.is-
|
|
223
|
+
&.is-closed {
|
|
224
|
+
color: var(--red-900);
|
|
225
|
+
background-color: var(--red-100);
|
|
226
|
+
border-color: var(--red-600);
|
|
227
|
+
}
|
|
228
|
+
|
|
229
|
+
&.is-archived {
|
|
230
|
+
color: var(--black-900);
|
|
231
|
+
background-color: var(--black-100);
|
|
232
|
+
border-color: var(--black-600);
|
|
233
|
+
}
|
|
234
|
+
|
|
235
|
+
&.is-pinned {
|
|
132
236
|
color: var(--white);
|
|
133
|
-
background-color: var(--
|
|
237
|
+
background-color: var(--black-700);
|
|
134
238
|
}
|
|
135
239
|
}
|
|
136
240
|
|
|
@@ -146,29 +250,45 @@
|
|
|
146
250
|
max-width: 100%;
|
|
147
251
|
|
|
148
252
|
.s-post-summary--content-title {
|
|
149
|
-
display:
|
|
253
|
+
display: block;
|
|
150
254
|
font-size: @fs-body3;
|
|
151
|
-
margin-
|
|
152
|
-
|
|
153
|
-
word-wrap: break-word;
|
|
255
|
+
margin-top: -0.15rem; // Optical alignment to compensate for title's containing block
|
|
256
|
+
margin-bottom: 0.3846rem;
|
|
154
257
|
padding-right: @su24;
|
|
258
|
+
line-height: @lh-md;
|
|
259
|
+
font-weight: normal;
|
|
260
|
+
.break-word;
|
|
155
261
|
|
|
156
262
|
.iconShield {
|
|
157
|
-
color: var(--
|
|
158
|
-
|
|
263
|
+
color: var(--fc-light);
|
|
264
|
+
}
|
|
265
|
+
|
|
266
|
+
.svg-icon {
|
|
267
|
+
vertical-align: text-bottom; // Optical alignment
|
|
159
268
|
position: relative;
|
|
160
|
-
|
|
269
|
+
top: -1px;
|
|
270
|
+
}
|
|
161
271
|
|
|
162
|
-
|
|
163
|
-
|
|
164
|
-
|
|
165
|
-
|
|
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
|
+
}
|
|
166
286
|
}
|
|
167
287
|
}
|
|
168
288
|
|
|
169
289
|
.s-post-summary--content-type {
|
|
170
290
|
color: var(--fc-medium);
|
|
171
|
-
margin-bottom: @
|
|
291
|
+
margin-bottom: @su4;
|
|
172
292
|
|
|
173
293
|
.svg-icon {
|
|
174
294
|
margin-left: -@su2;
|
|
@@ -179,34 +299,43 @@
|
|
|
179
299
|
.s-post-summary--content-excerpt {
|
|
180
300
|
margin-top: -@su2;
|
|
181
301
|
margin-bottom: @su8;
|
|
302
|
+
font-family: var(--theme-post-body-font-family);
|
|
303
|
+
color: var(--fc-medium);
|
|
182
304
|
.v-truncate2;
|
|
305
|
+
.break-word;
|
|
306
|
+
|
|
307
|
+
&.s-post-summary--content-excerpt__sm {
|
|
308
|
+
.v-truncate1;
|
|
309
|
+
}
|
|
310
|
+
|
|
311
|
+
&.s-post-summary--content-excerpt__md {
|
|
312
|
+
.v-truncate3;
|
|
313
|
+
}
|
|
314
|
+
|
|
315
|
+
&.s-post-summary--content-excerpt__lg {
|
|
316
|
+
.v-truncate4;
|
|
317
|
+
}
|
|
183
318
|
}
|
|
184
319
|
}
|
|
185
320
|
|
|
186
321
|
.s-post-summary--meta {
|
|
187
|
-
--s-post-summary-tags-gap: @su4; // Replace with gap property as soon as browser support makes sense.
|
|
188
|
-
|
|
189
322
|
display: flex;
|
|
190
323
|
align-items: center;
|
|
191
324
|
justify-content: space-between;
|
|
192
325
|
flex-wrap: wrap;
|
|
193
|
-
|
|
326
|
+
column-gap: @su6;
|
|
327
|
+
row-gap: @su8;
|
|
194
328
|
|
|
195
329
|
.s-post-summary--meta-tags {
|
|
196
330
|
display: flex;
|
|
197
331
|
flex-wrap: wrap;
|
|
198
|
-
|
|
199
|
-
|
|
200
|
-
& > * {
|
|
201
|
-
margin-right: var(--s-post-summary-tags-gap);
|
|
202
|
-
margin-bottom: var(--s-post-summary-tags-gap);
|
|
203
|
-
}
|
|
332
|
+
gap: @su4;
|
|
204
333
|
}
|
|
205
334
|
|
|
206
335
|
.s-user-card {
|
|
207
336
|
flex-wrap: wrap;
|
|
208
|
-
margin-bottom: var(--s-post-summary-tags-gap);
|
|
209
337
|
margin-left: auto;
|
|
338
|
+
justify-content: flex-end;
|
|
210
339
|
}
|
|
211
340
|
}
|
|
212
341
|
|
|
@@ -249,36 +378,35 @@
|
|
|
249
378
|
}
|
|
250
379
|
}
|
|
251
380
|
|
|
252
|
-
.s-post-summary__watched
|
|
253
|
-
color: var(--
|
|
254
|
-
background-color: var(--yellow-600);
|
|
381
|
+
.s-post-summary__watched {
|
|
382
|
+
background-color: var(--yellow-050);
|
|
255
383
|
}
|
|
256
384
|
|
|
257
|
-
.s-post-
|
|
258
|
-
color: var(--
|
|
259
|
-
background-color: var(--black-600);
|
|
260
|
-
}
|
|
385
|
+
.s-post-summary__deleted {
|
|
386
|
+
background-color: var(--red-050);
|
|
261
387
|
|
|
262
|
-
.
|
|
263
|
-
|
|
264
|
-
|
|
388
|
+
.is-deleted {
|
|
389
|
+
color: @white;
|
|
390
|
+
background-color: var(--red-500);
|
|
391
|
+
}
|
|
265
392
|
}
|
|
266
393
|
|
|
267
394
|
.s-post-summary__ignored,
|
|
268
395
|
.s-post-summary__deleted {
|
|
269
396
|
.s-post-summary--content {
|
|
270
|
-
opacity: 0.
|
|
397
|
+
opacity: 0.6;
|
|
271
398
|
}
|
|
272
399
|
|
|
273
|
-
.s-post-summary--stats-item:not(.is-
|
|
274
|
-
opacity: 0.
|
|
400
|
+
.s-post-summary--stats-item:not(.is-deleted) {
|
|
401
|
+
opacity: 0.6;
|
|
275
402
|
filter: grayscale(100%);
|
|
276
403
|
}
|
|
277
404
|
|
|
278
|
-
.s-post-summary--content-title {
|
|
405
|
+
.s-post-summary--content-title a {
|
|
279
406
|
color: var(--black-600);
|
|
280
407
|
|
|
281
|
-
&:hover
|
|
408
|
+
&:hover,
|
|
409
|
+
&:active {
|
|
282
410
|
color: var(--black-500);
|
|
283
411
|
}
|
|
284
412
|
|
|
@@ -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;
|