@stackoverflow/stacks 2.5.8 → 2.6.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.
Files changed (8) hide show
  1. package/dist/css/stacks.css +46 -55
  2. package/dist/css/stacks.min.css +1 -1
  3. package/lib/components/badge/badge.less +269 -258
  4. package/lib/components/button/button.less +5 -3
  5. package/lib/components/input_textarea/input_textarea.less +150 -150
  6. package/lib/components/link/link.less +136 -136
  7. package/lib/components/sidebar-widget/sidebar-widget.less +34 -73
  8. package/package.json +2 -2
package/lib/components/badge/badge.less CHANGED
@@ -1,258 +1,269 @@
1
- .s-badge {
2
- --_ba-as: unset;
3
- --_ba-bc: var(--bc-medium);
4
- --_ba-bg: var(--black-150);
5
- --_ba-fc: var(--black-500);
6
- --_ba-fs: var(--fs-caption);
7
- --_ba-fw: normal;
8
- --_ba-g: 0.3em;
9
- --_ba-lh: 2;
10
- --_ba-px: var(--su6);
11
- --_ba-py: 0;
12
- --_ba-tt: unset;
13
- --_ba-wmn: 0;
14
-
15
- // CONTEXTUAL STYLES
16
- .highcontrast-mode({
17
- // Badge counts
18
- &__gold,
19
- &__silver,
20
- &__bronze,
21
- // Number counts
22
- &__rep,
23
- &__rep-down,
24
- &__votes:not(.s-badge__answered),
25
- // Users
26
- &__admin,
27
- &__moderator,
28
- &__staff {
29
- --_ba-bc: currentColor;
30
- }
31
-
32
- &__new {
33
- --_ba-fc: var(--purple-600);
34
- }
35
- });
36
-
37
- // MODIFIERS
38
- // Sizes
39
- &&__xs,
40
- &&__sm {
41
- --_ba-as: flex-start;
42
- --_ba-fs: var(--fs-fine);
43
- }
44
-
45
- &&__xs {
46
- --_ba-lh: 1.5;
47
- --_ba-px: var(--su2);
48
- --_ba-wmn: calc(var(--su-static16) + var(--su-static2));
49
- }
50
-
51
- &&__sm {
52
- --_ba-lh: 1.8;
53
- --_ba-px: var(--su4);
54
- --_ba-wmn: calc(var(--su-static16) + var(--su-static2));
55
- }
56
-
57
- // Badge counts
58
- &&__gold,
59
- &&__silver,
60
- &&__bronze {
61
- --_ba-fc: var(--black-500);
62
- }
63
-
64
- &&__gold {
65
- --_ba-bc: var(--gold-300);
66
- --_ba-bg: var(--gold-100);
67
- }
68
-
69
- &&__silver {
70
- --_ba-bc: var(--silver-300);
71
- --_ba-bg: var(--silver-100);
72
- }
73
-
74
- &&__bronze {
75
- --_ba-bc: var(--bronze-300);
76
- --_ba-bg: var(--bronze-100);
77
- }
78
-
79
- // Number counts
80
- &&__answered,
81
- &&__bounty,
82
- &&__important {
83
- --_ba-bc: transparent;
84
- --_ba-fc: var(--white);
85
- }
86
-
87
- &&__rep,
88
- &&__rep-down,
89
- &&__votes:not(&__answered) {
90
- --_ba-bg: var(--white);
91
- }
92
-
93
- &&__answered {
94
- --_ba-bg: var(--green-400);
95
- }
96
-
97
- &&__bounty {
98
- --_ba-bg: var(--blue-400);
99
- }
100
-
101
- &&__important {
102
- --_ba-bg: var(--red-400);
103
- }
104
-
105
- &&__rep {
106
- --_ba-bc: var(--green-300);
107
- --_ba-fc: var(--green-400);
108
- }
109
-
110
- &&__rep-down {
111
- --_ba-bc: var(--red-300);
112
- --_ba-fc: var(--red-400);
113
- }
114
-
115
- &&__votes:not(&__answered) {
116
- --_ba-bc: var(--black-250);
117
- --_ba-fc: var(--black-500);
118
- }
119
-
120
- // Users
121
- &&__admin {
122
- --_ba-bc: var(--theme-primary-200);
123
- --_ba-bg: var(--theme-primary-100);
124
- --_ba-fc: var(--theme-primary-500);
125
- }
126
-
127
- &&__moderator {
128
- --_ba-bc: var(--theme-secondary-300);
129
- --_ba-bg: var(--theme-secondary-200);
130
- --_ba-fc: var(--theme-secondary-600);
131
- --_ba-g: calc(var(--su-static4) - var(--su-static1)); // 3px
132
- // :before icon
133
- --_ba-before-h: calc(var(--su-static16) - var(--su-static2)); // 14px
134
- --_ba-before-icon: url("data:image/svg+xml;,%3Csvg width='12' height='14' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M5.528.746c.257-.329.675-.327.93 0l4.42 5.66c.258.329.257.864 0 1.192l-4.42 5.66c-.256.328-.674.327-.93 0l-4.42-5.66c-.257-.329-.256-.865 0-1.192l4.42-5.66z' fill='%23fff'/%3E%3C/svg%3E");
135
- --_ba-before-mt: calc(var(--su-static1) * -1); // -1px
136
- --_ba-before-w: var(--su-static12);
137
-
138
- // Sizes
139
- &.s-badge__xs {
140
- --_ba-before-h: calc(var(--su-static8) + var(--su-static1)); // 9px
141
- --_ba-before-icon: url("data:image/svg+xml;,%3Csvg width='7' height='9' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M3 .246c.3-.329.701-.327 1 0L6.776 4c.3.329.298.672 0 1L4 8.75c-.299.329-.702.327-1 0L.224 5c-.284-.324-.285-.675 0-1L3 .246z' fill='%23fff'/%3E%3C/svg%3E");
142
- --_ba-before-mt: 0;
143
- --_ba-before-w: calc(var(--su-static8) - var(--su-static1)); // 7px
144
- }
145
-
146
- &.s-badge__sm {
147
- --_ba-g: var(--su-static2);
148
- --_ba-before-h: calc(var(--su-static12) - var(--su-static1)); // 11px
149
- --_ba-before-icon: url("data:image/svg+xml;,%3Csvg width='9' height='11' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M3.55.246c.257-.329.647-.327.903 0l3.36 4.66c.256.329.256.864 0 1.192L4.45 10.75c-.257.329-.644.327-.9 0L.192 6.098c-.256-.329-.256-.865 0-1.192L3.55.246z' fill='%23fff'/%3E%3C/svg%3E");
150
- --_ba-before-mt: 0;
151
- --_ba-before-w: calc(var(--su-static8) + var(--su-static1)); // 9px
152
- }
153
-
154
- &:before {
155
- height: var(--_ba-before-h);
156
- margin-top: var(--_ba-before-mt);
157
- width: var(--_ba-before-w);
158
-
159
- content: "";
160
- display: inline-block;
161
- background-color: currentColor;
162
- -webkit-mask: var(--_ba-before-icon) no-repeat center;
163
- mask: var(--_ba-before-icon) no-repeat center;
164
- -webkit-mask-size: contain;
165
- mask-size: contain;
166
- }
167
- }
168
-
169
- &&__staff {
170
- // Staff badges are always "Stack Overflow Orange"
171
- --_ba-bc: var(--orange-300);
172
- --_ba-bg: var(--orange-200);
173
- --_ba-fc: var(--orange-600);
174
- }
175
-
176
- // VARIANTS
177
- &&__danger,
178
- &&__muted {
179
- &.s-badge__filled {
180
- --_ba-bc: transparent;
181
- }
182
- }
183
-
184
- &&__danger {
185
- --_ba-bc: var(--red-300);
186
- --_ba-bg: var(--red-200);
187
- --_ba-fc: var(--red-600);
188
-
189
- &.s-badge__filled {
190
- --_ba-bg: var(--red-400);
191
- --_ba-fc: var(--white);
192
- }
193
- }
194
- &&__info {
195
- --_ba-bc: var(--blue-300);
196
- --_ba-bg: var(--blue-200);
197
- --_ba-fc: var(--blue-600);
198
- }
199
-
200
- &&__warning {
201
- --_ba-bc: var(--yellow-300);
202
- --_ba-bg: var(--yellow-200);
203
- --_ba-fc: var(--yellow-600);
204
- }
205
-
206
- &&__muted {
207
- --_ba-bc: var(--black-300);
208
- --_ba-bg: var(--black-200);
209
- --_ba-fc: var(--black-500);
210
-
211
- &.s-badge__filled {
212
- --_ba-bg: var(--black-500);
213
- --_ba-fc: var(--white);
214
- }
215
- }
216
-
217
- &&__new {
218
- --_ba-bc: var(--_ba-bg);
219
- --_ba-bg: var(--purple-100);
220
- --_ba-fc: var(--purple-400);
221
- --_ba-fw: bold;
222
- --_ba-tt: uppercase;
223
- }
224
-
225
- // CHILD ELEMENTS
226
- &--image, // Included with no base class to account for usage in .s-progress__badge
227
- & &--image {
228
- align-self: center;
229
- display: inline-flex;
230
- margin-right: var(--su1);
231
- margin-left: calc((var(--su4) + var(--su1)) * -1);
232
- }
233
-
234
- // INTERACTION
235
- a&:hover {
236
- text-decoration: none;
237
- }
238
-
239
- align-self: var(--_ba-as);
240
- background-color: var(--_ba-bg);
241
- border: var(--su-static1) solid var(--_ba-bc);
242
- color: var(--_ba-fc);
243
- font-size: var(--_ba-fs);
244
- gap: var(--_ba-g);
245
- font-weight: var(--_ba-fw);
246
- line-height: var(--_ba-lh);
247
- min-width: var(--_ba-wmn);
248
- padding: var(--_ba-py) var(--_ba-px);
249
- text-transform: var(--_ba-tt);
250
-
251
- align-items: center;
252
- border-radius: var(--br-sm);
253
- display: inline-flex;
254
- justify-content: center;
255
- text-decoration: none;
256
- vertical-align: middle;
257
- white-space: nowrap;
258
- }
1
+ .s-badge {
2
+ --_ba-as: unset;
3
+ --_ba-bc: var(--bc-medium);
4
+ --_ba-bg: var(--black-150);
5
+ --_ba-fc: var(--black-500);
6
+ --_ba-fs: var(--fs-caption);
7
+ --_ba-fw: normal;
8
+ --_ba-g: 0.3em;
9
+ --_ba-lh: 2;
10
+ --_ba-px: var(--su6);
11
+ --_ba-py: 0;
12
+ --_ba-tt: unset;
13
+ --_ba-wmn: 0;
14
+
15
+ // CONTEXTUAL STYLES
16
+ .highcontrast-mode({
17
+ // Badge counts
18
+ &__gold,
19
+ &__silver,
20
+ &__bronze,
21
+ // Number counts
22
+ &__rep,
23
+ &__rep-down,
24
+ &__votes:not(.s-badge__answered),
25
+ // Users
26
+ &__admin,
27
+ &__moderator,
28
+ &__staff {
29
+ --_ba-bc: currentColor;
30
+ }
31
+
32
+ &__new {
33
+ --_ba-fc: var(--purple-600);
34
+ }
35
+ });
36
+
37
+ // MODIFIERS
38
+ // Sizes
39
+ &&__xs,
40
+ &&__sm {
41
+ --_ba-as: flex-start;
42
+ --_ba-fs: var(--fs-fine);
43
+ }
44
+
45
+ &&__xs {
46
+ --_ba-lh: 1.5;
47
+ --_ba-px: var(--su2);
48
+ --_ba-wmn: calc(var(--su-static16) + var(--su-static2));
49
+ }
50
+
51
+ &&__sm {
52
+ --_ba-lh: 1.8;
53
+ --_ba-px: var(--su4);
54
+ --_ba-wmn: calc(var(--su-static16) + var(--su-static2));
55
+ }
56
+
57
+ // Badge counts
58
+ &&__gold,
59
+ &&__silver,
60
+ &&__bronze {
61
+ --_ba-fc: var(--black-500);
62
+ }
63
+
64
+ &&__gold {
65
+ --_ba-bc: var(--gold-300);
66
+ --_ba-bg: var(--gold-100);
67
+ }
68
+
69
+ &&__silver {
70
+ --_ba-bc: var(--silver-300);
71
+ --_ba-bg: var(--silver-100);
72
+ }
73
+
74
+ &&__bronze {
75
+ --_ba-bc: var(--bronze-300);
76
+ --_ba-bg: var(--bronze-100);
77
+ }
78
+
79
+ // Number counts
80
+ &&__answered,
81
+ &&__bounty,
82
+ &&__important {
83
+ --_ba-bc: transparent;
84
+ --_ba-fc: var(--white);
85
+ }
86
+
87
+ &&__rep,
88
+ &&__rep-down,
89
+ &&__votes:not(&__answered) {
90
+ --_ba-bg: var(--white);
91
+ }
92
+
93
+ &&__answered {
94
+ --_ba-bg: var(--green-400);
95
+ }
96
+
97
+ &&__bounty {
98
+ --_ba-bg: var(--blue-400);
99
+ }
100
+
101
+ &&__important {
102
+ --_ba-bg: var(--red-400);
103
+ }
104
+
105
+ &&__rep {
106
+ --_ba-bc: var(--green-300);
107
+ --_ba-fc: var(--green-400);
108
+ }
109
+
110
+ &&__rep-down {
111
+ --_ba-bc: var(--red-300);
112
+ --_ba-fc: var(--red-400);
113
+ }
114
+
115
+ &&__votes:not(&__answered) {
116
+ --_ba-bc: var(--black-250);
117
+ --_ba-fc: var(--black-500);
118
+ }
119
+
120
+ // Users
121
+ &&__admin {
122
+ --_ba-bc: var(--theme-primary-200);
123
+ --_ba-bg: var(--theme-primary-100);
124
+ --_ba-fc: var(--theme-primary-500);
125
+ }
126
+
127
+ &&__moderator {
128
+ --_ba-bc: var(--theme-secondary-300);
129
+ --_ba-bg: var(--theme-secondary-200);
130
+ --_ba-fc: var(--theme-secondary-600);
131
+ --_ba-g: calc(var(--su-static4) - var(--su-static1)); // 3px
132
+ // :before icon
133
+ --_ba-before-h: calc(var(--su-static16) - var(--su-static2)); // 14px
134
+ --_ba-before-icon: url("data:image/svg+xml;,%3Csvg width='12' height='14' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M5.528.746c.257-.329.675-.327.93 0l4.42 5.66c.258.329.257.864 0 1.192l-4.42 5.66c-.256.328-.674.327-.93 0l-4.42-5.66c-.257-.329-.256-.865 0-1.192l4.42-5.66z' fill='%23fff'/%3E%3C/svg%3E");
135
+ --_ba-before-mt: calc(var(--su-static1) * -1); // -1px
136
+ --_ba-before-w: var(--su-static12);
137
+
138
+ // Sizes
139
+ &.s-badge__xs {
140
+ --_ba-before-h: calc(var(--su-static8) + var(--su-static1)); // 9px
141
+ --_ba-before-icon: url("data:image/svg+xml;,%3Csvg width='7' height='9' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M3 .246c.3-.329.701-.327 1 0L6.776 4c.3.329.298.672 0 1L4 8.75c-.299.329-.702.327-1 0L.224 5c-.284-.324-.285-.675 0-1L3 .246z' fill='%23fff'/%3E%3C/svg%3E");
142
+ --_ba-before-mt: 0;
143
+ --_ba-before-w: calc(var(--su-static8) - var(--su-static1)); // 7px
144
+ }
145
+
146
+ &.s-badge__sm {
147
+ --_ba-g: var(--su-static2);
148
+ --_ba-before-h: calc(var(--su-static12) - var(--su-static1)); // 11px
149
+ --_ba-before-icon: url("data:image/svg+xml;,%3Csvg width='9' height='11' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M3.55.246c.257-.329.647-.327.903 0l3.36 4.66c.256.329.256.864 0 1.192L4.45 10.75c-.257.329-.644.327-.9 0L.192 6.098c-.256-.329-.256-.865 0-1.192L3.55.246z' fill='%23fff'/%3E%3C/svg%3E");
150
+ --_ba-before-mt: 0;
151
+ --_ba-before-w: calc(var(--su-static8) + var(--su-static1)); // 9px
152
+ }
153
+
154
+ &:before {
155
+ height: var(--_ba-before-h);
156
+ margin-top: var(--_ba-before-mt);
157
+ width: var(--_ba-before-w);
158
+
159
+ content: "";
160
+ display: inline-block;
161
+ background-color: currentColor;
162
+ -webkit-mask: var(--_ba-before-icon) no-repeat center;
163
+ mask: var(--_ba-before-icon) no-repeat center;
164
+ -webkit-mask-size: contain;
165
+ mask-size: contain;
166
+ }
167
+ }
168
+
169
+ &&__staff {
170
+ // Staff badges are always "Stack Overflow Orange"
171
+ --_ba-bc: var(--orange-300);
172
+ --_ba-bg: var(--orange-200);
173
+ --_ba-fc: var(--orange-600);
174
+ }
175
+
176
+ // VARIANTS
177
+ &&__ai {
178
+ --_ba-bc: var(--_ba-fc);
179
+ --_ba-bg: var(--black-050);
180
+ --_ba-fc: var(--orange-500);
181
+ --_ba-tt: uppercase;
182
+ }
183
+
184
+ &&__bot {
185
+ --_ba-bc: var(--black-300);
186
+ }
187
+
188
+ &&__danger,
189
+ &&__muted {
190
+ &.s-badge__filled {
191
+ --_ba-bc: transparent;
192
+ }
193
+ }
194
+
195
+ &&__danger {
196
+ --_ba-bc: var(--red-300);
197
+ --_ba-bg: var(--red-200);
198
+ --_ba-fc: var(--red-600);
199
+
200
+ &.s-badge__filled {
201
+ --_ba-bg: var(--red-400);
202
+ --_ba-fc: var(--white);
203
+ }
204
+ }
205
+ &&__info {
206
+ --_ba-bc: var(--blue-300);
207
+ --_ba-bg: var(--blue-200);
208
+ --_ba-fc: var(--blue-600);
209
+ }
210
+
211
+ &&__warning {
212
+ --_ba-bc: var(--yellow-300);
213
+ --_ba-bg: var(--yellow-200);
214
+ --_ba-fc: var(--yellow-600);
215
+ }
216
+
217
+ &&__muted {
218
+ --_ba-bc: var(--black-300);
219
+ --_ba-bg: var(--black-200);
220
+ --_ba-fc: var(--black-500);
221
+
222
+ &.s-badge__filled {
223
+ --_ba-bg: var(--black-500);
224
+ --_ba-fc: var(--white);
225
+ }
226
+ }
227
+
228
+ &&__new {
229
+ --_ba-bc: var(--_ba-bg);
230
+ --_ba-bg: var(--purple-100);
231
+ --_ba-fc: var(--purple-400);
232
+ --_ba-fw: bold;
233
+ --_ba-tt: uppercase;
234
+ }
235
+
236
+ // CHILD ELEMENTS
237
+ &--image, // Included with no base class to account for usage in .s-progress__badge
238
+ & &--image {
239
+ align-self: center;
240
+ display: inline-flex;
241
+ margin-right: var(--su1);
242
+ margin-left: calc((var(--su4) + var(--su1)) * -1);
243
+ }
244
+
245
+ // INTERACTION
246
+ a&:hover {
247
+ text-decoration: none;
248
+ }
249
+
250
+ align-self: var(--_ba-as);
251
+ background-color: var(--_ba-bg);
252
+ border: var(--su-static1) solid var(--_ba-bc);
253
+ color: var(--_ba-fc);
254
+ font-size: var(--_ba-fs);
255
+ gap: var(--_ba-g);
256
+ font-weight: var(--_ba-fw);
257
+ line-height: var(--_ba-lh);
258
+ min-width: var(--_ba-wmn);
259
+ padding: var(--_ba-py) var(--_ba-px);
260
+ text-transform: var(--_ba-tt);
261
+
262
+ align-items: center;
263
+ border-radius: var(--br-sm);
264
+ display: inline-flex;
265
+ justify-content: center;
266
+ text-decoration: none;
267
+ vertical-align: middle;
268
+ white-space: nowrap;
269
+ }
package/lib/components/button/button.less CHANGED
@@ -419,9 +419,11 @@
419
419
  color: var(--_bu-filled-fc);
420
420
  }
421
421
 
422
- background-color: var(--_bu-bg);
423
- border-color: var(--_bu-bc);
424
- color: var(--_bu-fc);
422
+ &:not(.s-btn__outlined) {
423
+ background-color: var(--_bu-bg);
424
+ border-color: var(--_bu-bc);
425
+ color: var(--_bu-fc);
426
+ }
425
427
  }
426
428
 
427
429
  background-color: var(--_bu-bg-hover);