@stackoverflow/stacks 3.0.0-beta.14 → 3.0.0-beta.16
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 +4679 -4864
- package/dist/css/stacks.min.css +1 -1
- package/lib/atomic/flex.less +6 -34
- package/lib/atomic/height.less +22 -0
- package/lib/atomic/positioning.less +34 -0
- package/lib/atomic/sizing.less +76 -0
- package/lib/atomic/spacing.less +35 -75
- package/lib/atomic/width.less +27 -0
- package/lib/base/body.less +2 -4
- package/lib/base/internal.less +3 -5
- package/lib/base/reset-normalize.less +1 -1
- package/lib/components/avatar/avatar.less +2 -2
- package/lib/components/badge/badge.less +2 -2
- package/lib/components/banner/banner.less +1 -1
- package/lib/components/button/button.less +1 -1
- package/lib/components/button-group/button-group.less +1 -1
- package/lib/components/code-block/code-block.less +1 -1
- package/lib/components/input-icon/input-icon.less +1 -1
- package/lib/components/notice/notice.less +82 -73
- package/lib/components/popover/popover.less +5 -5
- package/lib/components/post-summary/post-summary.less +5 -5
- package/lib/components/progress-bar/progress-bar.less +1 -1
- package/lib/components/prose/prose.less +5 -5
- package/lib/components/sidebar-widget/sidebar-widget.less +2 -2
- package/lib/components/toast/toast.less +1 -2
- package/lib/components/topbar/topbar.less +4 -4
- package/lib/components/user-card/user-card.less +88 -96
- package/lib/exports/constants-helpers.less +0 -4
- package/lib/exports/constants-type.less +18 -36
- package/lib/exports/mixins.less +71 -0
- package/lib/stacks-static.less +4 -1
- package/package.json +1 -1
- package/lib/atomic/width-height.less +0 -194
- package/lib/exports/spacing-mixins.less +0 -67
|
@@ -9,32 +9,18 @@
|
|
|
9
9
|
*/
|
|
10
10
|
.generate-variant-variables(@colorName: "", @modifier: "") {
|
|
11
11
|
& when (@modifier = "") {
|
|
12
|
-
--_no-bc: ~"var(--@{colorName}-300)";
|
|
13
12
|
--_no-bg: ~"var(--@{colorName}-100)";
|
|
14
|
-
--_no-
|
|
15
|
-
--_no-btn-bg-focus: ~"var(--@{colorName}-200)";
|
|
16
|
-
--_no-btn-fc: ~"var(--@{colorName}-500)";
|
|
13
|
+
--_no-icon-bg: ~"var(--@{colorName}-200)";
|
|
17
14
|
--_no-code-bc: ~"var(--@{colorName}-300)";
|
|
18
15
|
--_no-code-bg: ~"var(--@{colorName}-200)";
|
|
19
|
-
|
|
20
|
-
.highcontrast-mode({
|
|
21
|
-
--_no-bc: ~"var(--@{colorName}-400)";
|
|
22
|
-
});
|
|
23
16
|
}
|
|
24
17
|
|
|
25
18
|
& when (@modifier = important) {
|
|
26
|
-
--_no-bc: var(--_no-bg);
|
|
27
19
|
--_no-bg: ~"var(--@{colorName}-400)";
|
|
20
|
+
--_no-icon-bg: ~"var(--@{colorName}-500)";
|
|
28
21
|
--_no-fc: var(--white);
|
|
29
|
-
--_no-btn-bg-active: ~"var(--@{colorName}-500)";
|
|
30
|
-
--_no-btn-bg-focus: ~"var(--@{colorName}-500)";
|
|
31
|
-
--_no-btn-fc: ~"var(--@{colorName}-100)";
|
|
32
22
|
--_no-code-bc: ~"var(--@{colorName}-300)";
|
|
33
23
|
--_no-code-bg: ~"var(--@{colorName}-500)";
|
|
34
|
-
|
|
35
|
-
.highcontrast-mode({
|
|
36
|
-
--_no-bg: ~"var(--@{colorName}-500)";
|
|
37
|
-
});
|
|
38
24
|
}
|
|
39
25
|
}
|
|
40
26
|
|
|
@@ -47,47 +33,27 @@
|
|
|
47
33
|
* @baseClass - The base class name for the notice component
|
|
48
34
|
*/
|
|
49
35
|
.construct-notice-component(@baseClass) {
|
|
50
|
-
--_no-
|
|
51
|
-
--_no-bg: var(--black-
|
|
52
|
-
--_no-fc: var(--black-
|
|
53
|
-
--_no-btn-bg-active: var(--black-250);
|
|
54
|
-
--_no-btn-bg-focus: var(--black-225);
|
|
55
|
-
--_no-btn-fc: var(--_no-fc);
|
|
36
|
+
--_no-bg: var(--black-150);
|
|
37
|
+
--_no-icon-bg: var(--black-200);
|
|
38
|
+
--_no-fc: var(--black-600);
|
|
56
39
|
--_no-code-bc: var(--black-300);
|
|
57
40
|
--_no-code-bg: var(--black-200);
|
|
58
41
|
--_no-code-fc: var(--_no-fc);
|
|
59
42
|
|
|
60
43
|
// CONTEXTUAL STYLES
|
|
61
44
|
.highcontrast-mode({
|
|
62
|
-
|
|
63
|
-
|
|
64
|
-
&.@{baseClass}__info,
|
|
65
|
-
&.@{baseClass}__success,
|
|
66
|
-
&.@{baseClass}__warning {
|
|
67
|
-
--_no-code-bc: var(--black-400);
|
|
68
|
-
--_no-code-bg: var(--white);
|
|
69
|
-
--_no-code-fc: var(--black);
|
|
70
|
-
|
|
71
|
-
&.@{baseClass}__important {
|
|
72
|
-
--_no-code-bc: var(--black-200);
|
|
73
|
-
--_no-code-bg: var(--black);
|
|
74
|
-
--_no-code-fc: var(--white);
|
|
75
|
-
}
|
|
45
|
+
&:not(&__important) {
|
|
46
|
+
--_no-icon-bc: var(--_no-code-bc);
|
|
76
47
|
}
|
|
77
|
-
|
|
78
|
-
--_no-bc: var(--black-400);
|
|
79
48
|
});
|
|
80
49
|
|
|
81
50
|
// MODIFIERS
|
|
82
|
-
&__important
|
|
83
|
-
--_no-
|
|
84
|
-
--_no-bg: var(--black-500);
|
|
51
|
+
&__important {
|
|
52
|
+
--_no-bg: var(--black-400);
|
|
53
|
+
--_no-icon-bg: var(--black-500);
|
|
85
54
|
--_no-fc: var(--white);
|
|
86
|
-
--_no-btn-bg-focus: var(--black-600);
|
|
87
|
-
--_no-btn-bg-active: var(--black-600);
|
|
88
|
-
--_no-btn-fc: var(--_no-fc);
|
|
89
55
|
--_no-code-bc: var(--black-300);
|
|
90
|
-
--_no-code-bg: var(--black-
|
|
56
|
+
--_no-code-bg: var(--black-500);
|
|
91
57
|
}
|
|
92
58
|
|
|
93
59
|
// VARIANTS
|
|
@@ -103,11 +69,11 @@
|
|
|
103
69
|
|
|
104
70
|
&__info {
|
|
105
71
|
&:not(.@{baseClass}__important) {
|
|
106
|
-
.generate-variant-variables(
|
|
72
|
+
.generate-variant-variables(blue);
|
|
107
73
|
}
|
|
108
74
|
|
|
109
75
|
&.@{baseClass}__important {
|
|
110
|
-
.generate-variant-variables(
|
|
76
|
+
.generate-variant-variables(blue, important);
|
|
111
77
|
}
|
|
112
78
|
}
|
|
113
79
|
|
|
@@ -121,33 +87,57 @@
|
|
|
121
87
|
}
|
|
122
88
|
}
|
|
123
89
|
|
|
90
|
+
&__featured {
|
|
91
|
+
&:not(.@{baseClass}__important) {
|
|
92
|
+
.generate-variant-variables(purple);
|
|
93
|
+
}
|
|
94
|
+
|
|
95
|
+
&.@{baseClass}__important {
|
|
96
|
+
.generate-variant-variables(purple, important);
|
|
97
|
+
}
|
|
98
|
+
}
|
|
99
|
+
|
|
100
|
+
&__activity {
|
|
101
|
+
&:not(.@{baseClass}__important) {
|
|
102
|
+
.generate-variant-variables(pink);
|
|
103
|
+
}
|
|
104
|
+
|
|
105
|
+
&.@{baseClass}__important {
|
|
106
|
+
.generate-variant-variables(pink, important);
|
|
107
|
+
}
|
|
108
|
+
}
|
|
109
|
+
|
|
124
110
|
&__warning {
|
|
125
111
|
&:not(.@{baseClass}__important) {
|
|
126
112
|
.generate-variant-variables(yellow);
|
|
127
|
-
|
|
113
|
+
|
|
128
114
|
}
|
|
129
115
|
|
|
130
116
|
&.@{baseClass}__important {
|
|
131
|
-
--_no-
|
|
132
|
-
--_no-bg: var(--yellow-400);
|
|
117
|
+
--_no-bg: var(--yellow-300);
|
|
118
|
+
--_no-icon-bg: var(--yellow-400);
|
|
133
119
|
--_no-fc: var(--black);
|
|
134
|
-
--_no-
|
|
135
|
-
--_no-
|
|
136
|
-
|
|
137
|
-
--
|
|
138
|
-
|
|
120
|
+
--_no-code-bc: var(--yellow-400);
|
|
121
|
+
--_no-code-bg: var(--yellow-200);
|
|
122
|
+
|
|
123
|
+
.s-notice--icon {
|
|
124
|
+
color: var(--white);
|
|
125
|
+
}
|
|
139
126
|
|
|
140
127
|
.dark-mode({
|
|
141
128
|
--_no-fc: var(--white);
|
|
142
129
|
--_no-code-bc: var(--yellow-300);
|
|
143
130
|
--_no-code-bg: var(--yellow-500);
|
|
131
|
+
--_no-bg: var(--yellow-400);
|
|
132
|
+
--_no-icon-bg: var(--yellow-500);
|
|
144
133
|
});
|
|
145
134
|
|
|
146
135
|
.highcontrast-mode({
|
|
147
|
-
--_no-bg: var(--yellow-
|
|
136
|
+
--_no-bg: var(--yellow-400);
|
|
137
|
+
--_no-icon-bg: var(--yellow-500);
|
|
138
|
+
--_no-code-bc: var(--yellow-300);
|
|
139
|
+
--_no-code-bg: var(--yellow-500);
|
|
148
140
|
--_no-fc: var(--white);
|
|
149
|
-
--_no-btn-bg-active: transparent;
|
|
150
|
-
--_no-btn-bg-focus: transparent;
|
|
151
141
|
});
|
|
152
142
|
}
|
|
153
143
|
}
|
|
@@ -157,41 +147,60 @@
|
|
|
157
147
|
background-color: var(--_no-code-bg);
|
|
158
148
|
color: var(--_no-code-fc);
|
|
159
149
|
outline: var(--su-static1) solid var(--_no-code-bc);
|
|
160
|
-
|
|
161
|
-
border-radius: var(--br-md);
|
|
162
150
|
padding-left: var(--su2);
|
|
163
151
|
padding-right: var(--su2);
|
|
152
|
+
white-space: nowrap;
|
|
164
153
|
}
|
|
165
154
|
|
|
166
|
-
|
|
167
|
-
// TODO: decouple .s-notice--btn from .s-btn
|
|
155
|
+
button&--dismiss {
|
|
168
156
|
&:active {
|
|
169
|
-
background-color: var(--_no-
|
|
157
|
+
background-color: var(--_no-fc);
|
|
158
|
+
color: var(--_no-bg);
|
|
170
159
|
}
|
|
171
160
|
|
|
172
161
|
&:focus-visible,
|
|
173
162
|
&:hover,
|
|
174
163
|
&.focus-inset-bordered {
|
|
175
|
-
background-color: var(--_no-
|
|
164
|
+
background-color: var(--_no-fc);
|
|
165
|
+
color: var(--_no-bg);
|
|
176
166
|
}
|
|
167
|
+
}
|
|
177
168
|
|
|
178
|
-
|
|
179
|
-
padding: var(--
|
|
169
|
+
:has(>button&--dismiss) {
|
|
170
|
+
padding-left: var(--su24);
|
|
171
|
+
//Add spacing between multiple notice actions
|
|
172
|
+
gap: calc(var(--su24) - var(--su2)); //22px
|
|
173
|
+
//Fix css issue caused by svelte-sonner-toast in the NoticeAction svelte component
|
|
174
|
+
word-wrap: initial !important;
|
|
180
175
|
}
|
|
181
176
|
|
|
182
177
|
// STYLES MODIFIED BY COMPONENT-SPECIFIC CUSTOM PROPERTIES
|
|
183
178
|
background: var(--_no-bg);
|
|
184
|
-
border-color: var(--_no-bc);
|
|
185
179
|
color: var(--_no-fc);
|
|
186
|
-
|
|
187
|
-
border-style: solid;
|
|
188
|
-
font-size: var(--fs-body1);
|
|
189
180
|
}
|
|
190
181
|
|
|
191
182
|
.s-notice {
|
|
192
183
|
.construct-notice-component(s-notice);
|
|
193
184
|
|
|
194
|
-
|
|
195
|
-
|
|
196
|
-
|
|
185
|
+
display: flex;
|
|
186
|
+
align-items: center;
|
|
187
|
+
|
|
188
|
+
--_no-pd: var(--su8);
|
|
189
|
+
padding: var(--_no-pd) var(--su12) var(--_no-pd) 0;
|
|
190
|
+
|
|
191
|
+
&--icon {
|
|
192
|
+
background: var(--_no-icon-bg);
|
|
193
|
+
border: var(--su1) solid var(--_no-icon-bc, var(--_no-icon-bg));
|
|
194
|
+
padding: var(--_no-pd);
|
|
195
|
+
margin-right: var(--su12);
|
|
196
|
+
align-self: stretch;
|
|
197
|
+
|
|
198
|
+
//Position the svg icon
|
|
199
|
+
display: flex;
|
|
200
|
+
align-items: top;
|
|
201
|
+
|
|
202
|
+
//Negative margin to make up for s-notice's padding
|
|
203
|
+
margin-top: calc(var(--_no-pd) * -1);
|
|
204
|
+
margin-bottom: calc(var(--_no-pd) * -1);
|
|
205
|
+
}
|
|
197
206
|
}
|
|
@@ -3,7 +3,7 @@
|
|
|
3
3
|
--_po-bc: var(--bc-medium);
|
|
4
4
|
--_po-bs: var(--bs-md);
|
|
5
5
|
--_po-d: none;
|
|
6
|
-
--_po-wmn:
|
|
6
|
+
--_po-wmn: 10.5rem;
|
|
7
7
|
--_po-w: 100%;
|
|
8
8
|
// content
|
|
9
9
|
// --_po-topbar-height assumes the topbar height based on topbar styles
|
|
@@ -29,15 +29,15 @@
|
|
|
29
29
|
// Close btn
|
|
30
30
|
& &--close {
|
|
31
31
|
float: right; // Use floats for title wrapping
|
|
32
|
-
top:
|
|
33
|
-
right:
|
|
32
|
+
top: var(--sun8); // Compensate for s-popover's padding
|
|
33
|
+
right: var(--sun8); // Compensate for s-popover's padding
|
|
34
34
|
padding: var(--su6) !important;
|
|
35
35
|
}
|
|
36
36
|
|
|
37
37
|
& &--content {
|
|
38
38
|
max-height: var(--_po-content-mxh);
|
|
39
39
|
overflow-y: auto;
|
|
40
|
-
margin:
|
|
40
|
+
margin: var(--sun12);
|
|
41
41
|
padding: var(--su12);
|
|
42
42
|
}
|
|
43
43
|
|
|
@@ -51,7 +51,7 @@
|
|
|
51
51
|
border-radius: var(--br-md);
|
|
52
52
|
color: var(--fc-dark);
|
|
53
53
|
font-size: var(--fs-body1);
|
|
54
|
-
max-width:
|
|
54
|
+
max-width: 21rem;
|
|
55
55
|
padding: var(--su12);
|
|
56
56
|
position: absolute;
|
|
57
57
|
white-space: normal; // Guard against popovers being in a container with white-space: nowrap. Without this, the content pops *out* of the popover.
|
|
@@ -217,7 +217,7 @@
|
|
|
217
217
|
.v-truncate2;
|
|
218
218
|
color: var( --_ps-content-excerpt-fc);
|
|
219
219
|
font-family: var(--theme-post-body-font-family, var(--theme-body-font-family));
|
|
220
|
-
margin-top:
|
|
220
|
+
margin-top: var(--sun2);
|
|
221
221
|
margin-bottom: var(--su8);
|
|
222
222
|
}
|
|
223
223
|
|
|
@@ -261,7 +261,7 @@
|
|
|
261
261
|
|
|
262
262
|
.svg-icon {
|
|
263
263
|
position: relative;
|
|
264
|
-
top:
|
|
264
|
+
top: var(--sun1);
|
|
265
265
|
vertical-align: text-bottom; // Optical alignment
|
|
266
266
|
}
|
|
267
267
|
|
|
@@ -270,15 +270,15 @@
|
|
|
270
270
|
font-size: var(--fs-body3);
|
|
271
271
|
font-weight: normal;
|
|
272
272
|
line-height: var(--lh-md);
|
|
273
|
-
margin-bottom: 0.
|
|
274
|
-
margin-top: -0.
|
|
273
|
+
margin-bottom: 0.3365rem;
|
|
274
|
+
margin-top: -0.125rem; // Optical alignment to compensate for title's containing block
|
|
275
275
|
padding-right: var(--su24);
|
|
276
276
|
}
|
|
277
277
|
|
|
278
278
|
&--content-type {
|
|
279
279
|
.svg-icon {
|
|
280
280
|
color: var(--fc-light);
|
|
281
|
-
margin-left:
|
|
281
|
+
margin-left: var(--sun2);
|
|
282
282
|
}
|
|
283
283
|
|
|
284
284
|
color: var(--fc-medium);
|
|
@@ -49,11 +49,11 @@
|
|
|
49
49
|
&&__xs,
|
|
50
50
|
&&__sm,
|
|
51
51
|
&&__md {
|
|
52
|
-
--_pr-h1-fs:
|
|
53
|
-
--_pr-h2-fs:
|
|
54
|
-
--_pr-h3-fs:
|
|
55
|
-
--_pr-h4-fs:
|
|
56
|
-
--_pr-h5-fs:
|
|
52
|
+
--_pr-h1-fs: 1.75em;
|
|
53
|
+
--_pr-h2-fs: 1.375em;
|
|
54
|
+
--_pr-h3-fs: 1.25em;
|
|
55
|
+
--_pr-h4-fs: 1.125em;
|
|
56
|
+
--_pr-h5-fs: 1em;
|
|
57
57
|
}
|
|
58
58
|
|
|
59
59
|
&&__xs {
|
|
@@ -123,8 +123,8 @@
|
|
|
123
123
|
content: '';
|
|
124
124
|
height: calc(100% + var(--su16));
|
|
125
125
|
left: 0;
|
|
126
|
-
margin-left:
|
|
127
|
-
margin-top:
|
|
126
|
+
margin-left: var(--sun16); // the orange selection indicator overlaps with the widget border
|
|
127
|
+
margin-top: var(--sun8);
|
|
128
128
|
position: absolute;
|
|
129
129
|
}
|
|
130
130
|
|
|
@@ -31,7 +31,7 @@
|
|
|
31
31
|
--_tb-searchbar-p: 0 var(--su8);
|
|
32
32
|
--_tb-searchbar-open-d: unset;
|
|
33
33
|
--_tb-searchbar-open-mxw: 0;
|
|
34
|
-
--_tb-searchbar-popover-wmn:
|
|
34
|
+
--_tb-searchbar-popover-wmn: var(--su448);
|
|
35
35
|
--_tb-searchbar-popover-content-mxh: calc(100vh - var(--_tb-h) - var(--su16));
|
|
36
36
|
|
|
37
37
|
// CONTEXTUAL STYLES
|
|
@@ -147,7 +147,7 @@
|
|
|
147
147
|
height: 100%;
|
|
148
148
|
margin: 0 auto;
|
|
149
149
|
max-width: 100%;
|
|
150
|
-
width: var(--
|
|
150
|
+
width: var(--su-max);
|
|
151
151
|
}
|
|
152
152
|
|
|
153
153
|
& &--content {
|
|
@@ -413,8 +413,8 @@
|
|
|
413
413
|
|
|
414
414
|
align-self: stretch;
|
|
415
415
|
color: var(--theme-topbar-select-color, var(--black-500));
|
|
416
|
-
margin-right:
|
|
417
|
-
max-width:
|
|
416
|
+
margin-right: var(--sun1);
|
|
417
|
+
max-width: var(--su256) !important;
|
|
418
418
|
}
|
|
419
419
|
|
|
420
420
|
&.s-topbar--searchbar__open {
|
|
@@ -1,129 +1,121 @@
|
|
|
1
1
|
.s-user-card {
|
|
2
2
|
--_uc-ai: center;
|
|
3
|
-
--_uc-
|
|
4
|
-
--_uc-
|
|
5
|
-
--_uc-
|
|
6
|
-
--_uc-
|
|
7
|
-
--_uc-
|
|
8
|
-
--_uc-p: var(--su8);
|
|
9
|
-
--_uc-info-ai: unset;
|
|
10
|
-
--_uc-info-fd: column;
|
|
11
|
-
--_uc-link-fs: var(--fs-caption);
|
|
12
|
-
--_uc-link-ws: unset;
|
|
13
|
-
--_uc-rep-fc: unset;
|
|
14
|
-
--_uc-time-fc: var(--black-400);
|
|
15
|
-
--_uc-time-ws: unset;
|
|
16
|
-
--_uc-type-fc: var(--theme-primary-400);
|
|
17
|
-
|
|
18
|
-
// MODIFIERS
|
|
19
|
-
&&__deleted {
|
|
20
|
-
--_uc-fc: var(--black-400);
|
|
21
|
-
}
|
|
22
|
-
|
|
23
|
-
&&__highlighted {
|
|
24
|
-
--_uc-bg: var(--theme-secondary-100);
|
|
25
|
-
--_uc-bar: var(--br-md);
|
|
26
|
-
--_uc-time-fc: var(--black-500);
|
|
27
|
-
--_uc-type-fc: var(--black-500);
|
|
28
|
-
}
|
|
3
|
+
--_uc-fd: unset;
|
|
4
|
+
--_uc-column-gap: var(--su6);
|
|
5
|
+
--_uc-group-gap: var(--su4);
|
|
6
|
+
--_uc-row-gap: var(--su6);
|
|
7
|
+
--_uc-username-fs: unset;
|
|
29
8
|
|
|
30
9
|
// VARIANTS
|
|
31
|
-
|
|
32
|
-
&&
|
|
33
|
-
|
|
34
|
-
|
|
35
|
-
|
|
36
|
-
--_uc-info-ai: center;
|
|
37
|
-
--_uc-info-fd: row;
|
|
38
|
-
}
|
|
10
|
+
// SIZES
|
|
11
|
+
&&__lg {
|
|
12
|
+
.s-avatar {
|
|
13
|
+
margin-right: var(--su6);
|
|
14
|
+
}
|
|
39
15
|
|
|
40
|
-
|
|
41
|
-
|
|
42
|
-
|
|
43
|
-
}
|
|
16
|
+
.s-user-card--username {
|
|
17
|
+
margin-right: var(--su2);
|
|
18
|
+
}
|
|
44
19
|
|
|
45
|
-
|
|
46
|
-
|
|
47
|
-
|
|
48
|
-
|
|
20
|
+
.s-user-card--group:has(> .s-user-card--rep) {
|
|
21
|
+
margin-top: calc(var(--su2) * -1);
|
|
22
|
+
}
|
|
23
|
+
|
|
24
|
+
--_uc-ai: flex-start;
|
|
25
|
+
--_uc-fd: column;
|
|
26
|
+
--_uc-username-fs: var(--fs-body3);
|
|
49
27
|
}
|
|
50
28
|
|
|
51
29
|
// CHILD ELEMENTS
|
|
52
|
-
& &--
|
|
53
|
-
|
|
54
|
-
font-size: var(--fs-caption);
|
|
30
|
+
& &--bio {
|
|
31
|
+
.truncation(3);
|
|
55
32
|
color: var(--black-400);
|
|
56
33
|
}
|
|
57
34
|
|
|
58
|
-
& &--
|
|
59
|
-
|
|
60
|
-
font-size: var(--fs-caption);
|
|
61
|
-
}
|
|
35
|
+
& &--recognition {
|
|
36
|
+
--_uc-row-gap: var(--su4);
|
|
62
37
|
|
|
63
|
-
|
|
64
|
-
|
|
65
|
-
|
|
66
|
-
|
|
38
|
+
&,
|
|
39
|
+
& a {
|
|
40
|
+
color: var(--theme-primary);
|
|
41
|
+
}
|
|
67
42
|
}
|
|
68
43
|
|
|
69
|
-
& &--
|
|
70
|
-
|
|
71
|
-
|
|
72
|
-
|
|
73
|
-
display: flex;
|
|
74
|
-
gap: var(--su4);
|
|
44
|
+
& &--rep {
|
|
45
|
+
color: var(--black-600);
|
|
46
|
+
font-weight: 600;
|
|
75
47
|
}
|
|
76
48
|
|
|
77
|
-
& &--
|
|
78
|
-
|
|
79
|
-
|
|
49
|
+
& &--time {
|
|
50
|
+
color: var(--black-400);
|
|
51
|
+
}
|
|
80
52
|
|
|
81
|
-
|
|
82
|
-
|
|
83
|
-
|
|
53
|
+
& &--username {
|
|
54
|
+
font-size: var(--_uc-username-fs);
|
|
55
|
+
font-weight: 500;
|
|
56
|
+
min-width: 0;
|
|
84
57
|
overflow-wrap: break-word;
|
|
58
|
+
word-break: break-all;
|
|
85
59
|
}
|
|
86
60
|
|
|
87
|
-
|
|
88
|
-
|
|
89
|
-
|
|
90
|
-
|
|
61
|
+
// Layout specific
|
|
62
|
+
& &--column {
|
|
63
|
+
align-items: flex-start;
|
|
64
|
+
display: flex;
|
|
65
|
+
flex-direction: column;
|
|
66
|
+
gap: var(--_uc-column-gap);
|
|
91
67
|
}
|
|
92
68
|
|
|
93
|
-
& &--
|
|
94
|
-
|
|
95
|
-
|
|
96
|
-
|
|
97
|
-
}
|
|
69
|
+
& &--group {
|
|
70
|
+
&:has(> .s-avatar) {
|
|
71
|
+
--_uc-group-gap: var(--su6);
|
|
72
|
+
}
|
|
98
73
|
|
|
99
|
-
|
|
100
|
-
|
|
101
|
-
|
|
74
|
+
&:has(+ .s-user-card--time) {
|
|
75
|
+
margin-right: var(--su2);
|
|
76
|
+
}
|
|
102
77
|
|
|
103
|
-
|
|
104
|
-
|
|
105
|
-
|
|
78
|
+
align-items: center;
|
|
79
|
+
display: flex;
|
|
80
|
+
gap: var(--_uc-group-gap);
|
|
106
81
|
}
|
|
107
82
|
|
|
108
|
-
& &--
|
|
109
|
-
|
|
110
|
-
|
|
83
|
+
& ul&--group {
|
|
84
|
+
&.s-user-card--group__split {
|
|
85
|
+
li:not(:last-child) {
|
|
86
|
+
&:after {
|
|
87
|
+
background-color: var(--black-350);
|
|
88
|
+
content: "";
|
|
89
|
+
display: block;
|
|
90
|
+
margin-left: var(--su4);
|
|
91
|
+
width: var(--su4);
|
|
92
|
+
height: var(--su4);
|
|
93
|
+
}
|
|
94
|
+
}
|
|
111
95
|
}
|
|
112
96
|
|
|
113
|
-
|
|
97
|
+
li {
|
|
98
|
+
align-items: center;
|
|
99
|
+
display: inline-flex;
|
|
100
|
+
gap: var(--su2);
|
|
101
|
+
}
|
|
114
102
|
|
|
115
|
-
|
|
116
|
-
|
|
103
|
+
.list-reset;
|
|
104
|
+
}
|
|
105
|
+
|
|
106
|
+
& &--row {
|
|
107
|
+
align-items: center;
|
|
108
|
+
display: flex;
|
|
109
|
+
flex-direction: row;
|
|
110
|
+
flex-wrap: wrap;
|
|
111
|
+
gap: var(--_uc-row-gap);
|
|
117
112
|
}
|
|
118
113
|
|
|
119
114
|
align-items: var(--_uc-ai);
|
|
120
|
-
|
|
121
|
-
|
|
122
|
-
|
|
123
|
-
|
|
124
|
-
|
|
125
|
-
|
|
126
|
-
|
|
127
|
-
line-height: 1;
|
|
128
|
-
padding: var(--_uc-p);
|
|
129
|
-
}
|
|
115
|
+
color: var(--black-500);
|
|
116
|
+
display: flex;
|
|
117
|
+
flex-direction: var(--_uc-fd);
|
|
118
|
+
flex-wrap: wrap;
|
|
119
|
+
font-size: var(--fs-caption);
|
|
120
|
+
gap: var(--su6);
|
|
121
|
+
}
|
|
@@ -50,10 +50,6 @@ body {
|
|
|
50
50
|
|
|
51
51
|
--default-transition-duration: 0.1s;
|
|
52
52
|
--transition-time: var(--default-transition-duration);
|
|
53
|
-
|
|
54
|
-
// Sizing
|
|
55
|
-
--s-full: 97.2307692rem; // Based on a pixel size of 1264px;
|
|
56
|
-
--s-step: calc(var(--s-full) / 12);
|
|
57
53
|
}
|
|
58
54
|
|
|
59
55
|
// ============================================================================
|