@stackoverflow/stacks 3.0.0-beta.19 → 3.0.0-beta.20
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.
|
@@ -77,7 +77,8 @@
|
|
|
77
77
|
&&__moderator,
|
|
78
78
|
&&__staff,
|
|
79
79
|
&&__ai,
|
|
80
|
-
&&__bot
|
|
80
|
+
&&__bot,
|
|
81
|
+
&&__new {
|
|
81
82
|
--_ba-bl: var(--su4);
|
|
82
83
|
--_ba-bg: var(--black-150);
|
|
83
84
|
--_ba-fc: var(--black-600);
|
|
@@ -126,6 +127,32 @@
|
|
|
126
127
|
--_ba-bc: var(--black-400);
|
|
127
128
|
}
|
|
128
129
|
|
|
130
|
+
&&__new {
|
|
131
|
+
--_ba-bg: var(--purple-100);
|
|
132
|
+
--_ba-fc: var(--purple-500);
|
|
133
|
+
--_ba-sq-bg: var(--purple-200);
|
|
134
|
+
--_ba-bc: var(--purple-400);
|
|
135
|
+
--_ba-gap: var(--su2); // 2px gap between icon and text
|
|
136
|
+
--_ba-before-h: calc(var(--su12) + var(--su2)); // 14px
|
|
137
|
+
--_ba-before-w: calc(var(--su12) + var(--su2)); // 14px
|
|
138
|
+
--_ba-before-icon: url("data:image/svg+xml;,%3Csvg width='14' height='14' viewBox='0 0 16 16' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M8 1a7 7 0 1 1 0 14A7 7 0 0 1 8 1m0 1.25a5.75 5.75 0 1 0 0 11.5 5.75 5.75 0 0 0 0-11.5m1 10.06H7V10.6h2zM8.14 4c1.78 0 2.77.96 2.77 2.5 0 1.79-2.1 2.2-2.1 3.25h-1.6c0-2 2-2.08 2-3.26 0-.54-.27-.96-1.02-.96-.7 0-1.03.46-1.1 1.23H5.4A2.75 2.75 0 0 1 8.13 4' fill='%23fff'/%3E%3C/svg%3E");
|
|
139
|
+
|
|
140
|
+
&:before {
|
|
141
|
+
height: var(--_ba-before-h);
|
|
142
|
+
margin-top: 0;
|
|
143
|
+
margin-left: var(--sun2);
|
|
144
|
+
width: var(--_ba-before-w);
|
|
145
|
+
|
|
146
|
+
content: "";
|
|
147
|
+
display: inline-block;
|
|
148
|
+
background-color: var(--_ba-bc);
|
|
149
|
+
-webkit-mask: var(--_ba-before-icon) no-repeat center;
|
|
150
|
+
mask: var(--_ba-before-icon) no-repeat center;
|
|
151
|
+
-webkit-mask-size: contain;
|
|
152
|
+
mask-size: contain;
|
|
153
|
+
}
|
|
154
|
+
}
|
|
155
|
+
|
|
129
156
|
// STATES
|
|
130
157
|
&&__info {
|
|
131
158
|
--_ba-bg: var(--blue-100);
|
|
@@ -105,6 +105,15 @@
|
|
|
105
105
|
}
|
|
106
106
|
|
|
107
107
|
// CHILD ELEMENTS
|
|
108
|
+
a {
|
|
109
|
+
&:focus-visible {
|
|
110
|
+
.focus-styles();
|
|
111
|
+
}
|
|
112
|
+
|
|
113
|
+
color: var(--_ta-fc) !important;
|
|
114
|
+
margin: calc(var(--_ta-pt) * -1) calc(var(--_ta-pr) * -1) calc(var(--_ta-pb) * -1) calc(var(--_ta-pl) * -1);
|
|
115
|
+
padding: var(--_ta-pt) var(--_ta-pr) var(--_ta-pb) var(--_ta-pl);
|
|
116
|
+
}
|
|
108
117
|
// Dismiss
|
|
109
118
|
&:has(> &--dismiss) {
|
|
110
119
|
--_ta-pr: var(--su2);
|
|
@@ -164,7 +173,7 @@
|
|
|
164
173
|
color: var(--_ta-fc);
|
|
165
174
|
font-size: var(--_ta-fs);
|
|
166
175
|
padding: var(--_ta-pt) var(--_ta-pr) var(--_ta-pb) var(--_ta-pl);
|
|
167
|
-
|
|
176
|
+
|
|
168
177
|
align-items: center;
|
|
169
178
|
display: inline-flex;
|
|
170
179
|
gap: var(--su4);
|
|
@@ -5,6 +5,12 @@
|
|
|
5
5
|
--_uc-group-gap: var(--su4);
|
|
6
6
|
--_uc-row-gap: var(--su6);
|
|
7
7
|
--_uc-username-fs: unset;
|
|
8
|
+
--_uc-username-p: unset;
|
|
9
|
+
--_uc-username-bl: unset;
|
|
10
|
+
--_uc-username-bg: unset;
|
|
11
|
+
--_uc-username-fc: unset;
|
|
12
|
+
--_uc-username-d: unset;
|
|
13
|
+
--_uc-username-ai: unset;
|
|
8
14
|
|
|
9
15
|
// VARIANTS
|
|
10
16
|
// SIZES
|
|
@@ -26,6 +32,10 @@
|
|
|
26
32
|
--_uc-username-fs: var(--fs-body3);
|
|
27
33
|
}
|
|
28
34
|
|
|
35
|
+
&&__deleted {
|
|
36
|
+
--_uc-username-fc: var(--black-400);
|
|
37
|
+
}
|
|
38
|
+
|
|
29
39
|
// CHILD ELEMENTS
|
|
30
40
|
& &--bio {
|
|
31
41
|
.truncation(3);
|
|
@@ -41,6 +51,13 @@
|
|
|
41
51
|
}
|
|
42
52
|
}
|
|
43
53
|
|
|
54
|
+
& &--recognition-additional-bling {
|
|
55
|
+
&,
|
|
56
|
+
& a {
|
|
57
|
+
color: var(--theme-primary);
|
|
58
|
+
}
|
|
59
|
+
}
|
|
60
|
+
|
|
44
61
|
& &--rep {
|
|
45
62
|
color: var(--black-600);
|
|
46
63
|
font-weight: 600;
|
|
@@ -51,13 +68,30 @@
|
|
|
51
68
|
}
|
|
52
69
|
|
|
53
70
|
& &--username {
|
|
71
|
+
align-items: var(--_uc-username-ai);
|
|
72
|
+
background-color: var(--_uc-username-bg);
|
|
73
|
+
border-left: var(--_uc-username-bl);
|
|
74
|
+
color: var(--_uc-username-fc);
|
|
75
|
+
display: var(--_uc-username-d);
|
|
54
76
|
font-size: var(--_uc-username-fs);
|
|
55
77
|
font-weight: 500;
|
|
56
78
|
min-width: 0;
|
|
57
79
|
overflow-wrap: break-word;
|
|
80
|
+
padding: var(--_uc-username-p);
|
|
58
81
|
word-break: break-all;
|
|
59
82
|
}
|
|
60
83
|
|
|
84
|
+
&--username__op {
|
|
85
|
+
--_uc-username-p: calc(var(--su4) - var(--su1)) var(--su4) calc(var(--su4) - var(--su1)) var(--su4);
|
|
86
|
+
--_uc-username-bg: var(--blue-100);
|
|
87
|
+
--_uc-username-bl: var(--su4) solid var(--blue-300);
|
|
88
|
+
--_uc-username-d: flex;
|
|
89
|
+
--_uc-username-ai: center;
|
|
90
|
+
.s-user-card__sm & {
|
|
91
|
+
--_uc-username-p: 0 var(--su4);
|
|
92
|
+
}
|
|
93
|
+
}
|
|
94
|
+
|
|
61
95
|
// Layout specific
|
|
62
96
|
& &--column {
|
|
63
97
|
align-items: flex-start;
|
package/package.json
CHANGED
|
@@ -1,7 +1,7 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@stackoverflow/stacks",
|
|
3
3
|
"description": "Stack Overflow’s CSS and Design Pattern Library. Stacks is an atomic CSS library with classes and components for rapidly building Stack Overflow.",
|
|
4
|
-
"version": "3.0.0-beta.
|
|
4
|
+
"version": "3.0.0-beta.20",
|
|
5
5
|
"files": [
|
|
6
6
|
"dist",
|
|
7
7
|
"lib",
|