@stackoverflow/stacks 1.3.6 → 1.4.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 (26) hide show
  1. package/dist/css/stacks.css +1341 -997
  2. package/dist/css/stacks.min.css +1 -1
  3. package/lib/css/atomic/gap.less +44 -0
  4. package/lib/css/atomic/grid.less +0 -35
  5. package/lib/css/components/_styles-template.less +75 -0
  6. package/lib/css/components/activity-indicator.less +23 -33
  7. package/lib/css/components/avatars.less +71 -82
  8. package/lib/css/components/award-bling.less +29 -0
  9. package/lib/css/components/badges.less +199 -230
  10. package/lib/css/components/breadcrumbs.less +23 -30
  11. package/lib/css/components/buttons.less +4 -2
  12. package/lib/css/components/cards.less +18 -36
  13. package/lib/css/components/labels.less +66 -66
  14. package/lib/css/components/links.less +4 -4
  15. package/lib/css/components/menu.less +27 -38
  16. package/lib/css/components/navigation.less +114 -117
  17. package/lib/css/components/notices.less +77 -77
  18. package/lib/css/components/page-titles.less +39 -36
  19. package/lib/css/components/pagination.less +44 -47
  20. package/lib/css/components/post-summary.less +29 -32
  21. package/lib/css/components/tags.less +177 -211
  22. package/lib/css/components/topbar.less +10 -4
  23. package/lib/css/components/uploader.less +43 -53
  24. package/lib/css/components/user-cards.less +5 -1
  25. package/lib/css/stacks-static.less +2 -0
  26. package/package.json +12 -12
package/lib/css/components/tags.less CHANGED
@@ -1,237 +1,203 @@
1
- //
2
- // TAGS
3
- //
4
- // TABLE OF CONTENTS
5
- // • BASE STYLE
6
- // • STYLE VARIATIONS
7
- // • LAYOUTS & SIZES
8
- //
9
- // ===========================================================================
10
- // $ MIXIN
11
- // Any tag we use will always modify the same items, so to save time,
12
- // here's a mixin to state all that CSS.
13
- // ---------------------------------------------------------------------------
14
-
15
- .s-tag-styles(@border: transparent, @background: transparent, @color: inherit) {
16
- border-color: @border;
17
- background-color: @background;
18
- color: @color;
19
-
1
+ .s-tag {
2
+ --_ta-bc: var(--theme-tag-border-color);
3
+ --_ta-bg: var(--theme-tag-background-color);
4
+ --_ta-br: var(--br-sm);
5
+ --_ta-fc: var(--theme-tag-color);
6
+ --_ta-fs: var(--fs-caption);
7
+ --_ta-lh: 1.846153846;
8
+ --_ta-pl: var(--_ta-px);
9
+ --_ta-pr: var(--_ta-px);
10
+ --_ta-px: var(--su4);
11
+ // hover, focus, active
12
+ --_ta-bc-hover: var(--theme-tag-hover-border-color);
13
+ --_ta-bg-hover: var(--theme-tag-hover-background-color);
14
+ --_ta-fc-hover: var(--theme-tag-hover-color);
15
+ // .is-selected
16
+ --_ta-bc-selected: transparent;
17
+ --_ta-bg-selected: var(--theme-secondary-200);
18
+ --_ta-fc-selected: var(--theme-secondary-900);
19
+
20
+ // CONTEXTUAL STYLES
20
21
  .highcontrast-mode({
21
- border-color: currentColor;
22
+ --_ta-bc: currentColor;
23
+ text-decoration: none;
22
24
  });
23
25
 
24
- .s-tag--dismiss {
25
- color: inherit;
26
- background-color: transparent;
27
-
28
- &:hover {
29
- color: @background;
30
- background-color: @color;
31
-
32
- .highcontrast-mode({
33
- color: var(--white); // We do not want this color to remain fixed
34
- });
35
- }
26
+ // MODIFIERS
27
+ // Sizes
28
+ &&__xs {
29
+ --_ta-fs: var(--fs-fine);
30
+ --_ta-lh: 1.4;
31
+ --_ta-px: var(--su2);
36
32
  }
37
- }
38
-
39
- .s-tag-selected-styles(@border: transparent, @background: transparent, @color: inherit) {
40
- border-color: @border;
41
- background-color: @background;
42
- color: @color;
43
-
44
- .highcontrast-mode({
45
- border-color: currentColor;
46
- });
47
- }
48
-
49
- .s-tag-hover-styles(@border-hover: transparent, @background-hover: transparent, @color-hover: inherit) {
50
- &:hover,
51
- &:focus,
52
- &:active {
53
- border-color: @border-hover;
54
- background-color: @background-hover;
55
- color: @color-hover;
56
-
57
- .highcontrast-mode({
58
- border-color: currentColor;
59
- });
33
+ &&__sm {
34
+ --_ta-fs: var(--fs-caption);
35
+ --_ta-lh: 1.5;
60
36
  }
61
- }
62
-
63
-
64
- // ===========================================================================
65
- // $ BASE STYLE
66
- // The same style is applied to all tags. Do not modify the core style.
67
- // ---------------------------------------------------------------------------
68
- .s-tag {
69
- display: inline-flex;
70
- align-items: center;
71
- justify-content: center;
72
- min-width: 0;
73
- padding-left: var(--su4);
74
- padding-right: var(--su4);
75
- border-style: solid;
76
- border-width: 1px;
77
- border-radius: var(--br-sm);
78
- font-size: var(--fs-caption);
79
- line-height: 1.846153846;
80
- text-decoration: none;
81
- vertical-align: middle;
82
- white-space: nowrap;
83
-
84
- .s-tag-styles(var(--theme-tag-border-color), var(--theme-tag-background-color), var(--theme-tag-color));
85
-
86
- .highcontrast-mode({ text-decoration: none; });
87
-
88
- &.is-selected {
89
- .s-tag-selected-styles(transparent, var(--theme-secondary-200), var(--theme-secondary-900));
37
+ &&__md {
38
+ --_ta-px: var(--su6);
39
+ --_ta-fs: var(--fs-body2);
40
+ --_ta-lh: 1.733333333;
41
+ }
42
+ &&__lg {
43
+ --_ta-br: calc(var(--br-sm) + 1px);
44
+ --_ta-fs: var(--fs-subheading);
45
+ --_ta-lh: 1.684210526;
46
+ --_ta-px: var(--su6);
90
47
  }
91
48
 
92
- // -- SIZES
93
- &.s-tag__xs {
94
- font-size: var(--fs-fine);
95
- line-height: 1.4;
96
- padding-left: var(--su2);
97
- padding-right: var(--su2);
49
+ // VARIANTS
50
+ &&__ignored,
51
+ &&__watched {
52
+ --_ta-pl: calc(var(--su-static24) - var(--su-static2)); // 22px
53
+ --_ta-before-size: calc(var(--su-static16) - var(--su-static2)); // 14px
54
+ // --_ta-before-icon defined per variant
55
+
56
+ &:before {
57
+ height: var(--_ta-before-size);
58
+ width: var(--_ta-before-size);
59
+ -webkit-mask: var(--_ta-before-icon) no-repeat center;
60
+ mask: var(--_ta-before-icon) no-repeat center;
61
+
62
+ background-color: currentColor;
63
+ content: "";
64
+ display: block;
65
+ left: var(--su-static4);
66
+ margin-right: var(--su2);
67
+ position: absolute;
68
+ top: calc(50% - calc(var(--su-static8) - var(--su-static1)));
69
+ -webkit-mask-size: contain;
70
+ mask-size: contain;
71
+ }
72
+ position: relative;
98
73
  }
99
- &.s-tag__sm {
100
- font-size: var(--fs-caption);
101
- line-height: 1.5;
74
+ &&__ignored {
75
+ --_ta-before-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");
102
76
  }
103
- &.s-tag__md {
104
- padding-left: var(--su6);
105
- padding-right: var(--su6);
106
- font-size: var(--fs-body2);
107
- line-height: 1.733333333;
77
+ // moderator overrides other muted and required, required overrides muted
78
+ &&__moderator {
79
+ --_ta-bc: var(--red-200);
80
+ --_ta-bg: var(--red-050);
81
+ --_ta-fc: var(--red-800);
82
+ --_ta-bc-hover: var(--red-300);
83
+ --_ta-bg-hover: var(--red-100);
84
+ --_ta-fc-hover: var(--red-900);
85
+ --_ta-bc-selected: var(--red-400);
86
+ --_ta-bg-selected: var(--red-200);
87
+ --_ta-fc-selected: var(--red-800);
108
88
  }
109
- &.s-tag__lg {
110
- padding-left: var(--su6);
111
- padding-right: var(--su6);
112
- border-radius: calc(var(--br-sm) + 1px);
113
- font-size: var(--fs-subheading);
114
- line-height: 1.684210526;
89
+ &&__muted:not(&__moderator):not(&__required) {
90
+ --_ta-bc: transparent;
91
+ --_ta-bg: var(--black-075);
92
+ --_ta-fc: var(--black-700);
93
+ --_ta-bc-hover: transparent;
94
+ --_ta-bg-hover: var(--black-100);
95
+ --_ta-fc-hover: var(--black-800);
96
+ --_ta-bc-selected: transparent;
97
+ --_ta-bg-selected: var(--black-200);
98
+ --_ta-fc-selected: var(--black-900);
99
+
100
+ .highcontrast-mode({ --_ta-bc: currentColor; }); // Specificity has bit us, so we need this override
115
101
  }
116
- }
117
-
118
- a.s-tag:not(.is-selected) {
119
- .s-tag-hover-styles(var(--theme-tag-hover-border-color), var(--theme-tag-hover-background-color), var(--theme-tag-hover-color));
120
- }
121
-
122
- // $$ DISMISS ICON
123
- // Style adjustment to @Svg.ClearSm
124
- // ---------------------------------------------------------------------------
125
- .s-tag--dismiss {
126
- display: flex;
127
- align-content: center;
128
- align-self: center;
129
- justify-content: center;
130
- width: var(--su-static16);
131
- height: var(--su-static16);
132
- margin-left: var(--su4);
133
- padding: var(--su1);
134
- border-radius: var(--br-sm);
135
- cursor: pointer;
136
-
137
- &:hover {
138
- color: var(--white);
102
+ &&__required:not(&__moderator) {
103
+ --_ta-bc: var(--bc-darker);
104
+ --_ta-bg: var(--black-075);
105
+ --_ta-fc: var(--black-700);
106
+ --_ta-bc-hover: var(--black-300);
107
+ --_ta-bg-hover: var(--black-100);
108
+ --_ta-fc-hover: var(--black-800);
109
+ --_ta-bc-selected: var(--black-500);
110
+ --_ta-bg-selected: var(--black-200);
111
+ --_ta-fc-selected: var(--black-900);
139
112
  }
140
- }
141
-
142
- // $$ SPONSOR IMAGE
143
- // The small sponsor favicon displayed within a tag
144
- // ---------------------------------------------------------------------------
145
- .s-tag--sponsor {
146
- display: inline-flex;
147
- align-self: center;
148
- margin: calc(var(--su1) * -1) var(--su4) calc(var(--su2) * -1) calc(var(--su2) * -1);
149
- max-width: calc(var(--su-static16) + var(--su-static2));
150
- border-radius: calc(var(--br-sm) - 1px);
151
-
152
- .svg-icon,
153
- img {
154
- width: 100%;
155
- height: 100%;
113
+ &&__watched {
114
+ --_ta-before-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");
156
115
  }
157
- }
158
116
 
117
+ // CHILD ELEMENTS
118
+ & &--dismiss { // Style adjustment to @Svg.ClearSm
119
+ &:hover {
120
+ .highcontrast-mode({
121
+ color: var(--white);
122
+ });
159
123
 
160
- // ===========================================================================
161
- // $ STYLE VARIATIONS
162
- // This is what can be modified on each community (for the most part).
163
- // ===========================================================================
164
- // $$ Required Tag
165
- // ---------------------------------------------------------------------------
166
- .s-tag__required {
167
- .s-tag-styles(var(--bc-darker), var(--black-075), var(--black-700));
124
+ background-color: var(--_ta-fc);
125
+ color: var(--_ta-bg);
126
+ }
168
127
 
169
- &.is-selected {
170
- .s-tag-selected-styles(var(--black-500), var(--black-200), var(--black-900));
128
+ align-content: center;
129
+ align-self: center;
130
+ background-color: transparent;
131
+ border-radius: var(--br-sm);
132
+ color: inherit;
133
+ cursor: pointer;
134
+ display: flex;
135
+ height: var(--su-static16);
136
+ justify-content: center;
137
+ margin-left: var(--su4);
138
+ padding: var(--su1);
139
+ width: var(--su-static16);
171
140
  }
172
- }
173
- a.s-tag__required:not(.is-selected) {
174
- .s-tag-hover-styles(var(--black-300), var(--black-100), var(--black-800));
175
- }
176
-
177
- // $$ Moderator Tag
178
- // ---------------------------------------------------------------------------
179
- .s-tag__moderator {
180
- .s-tag-styles(var(--red-200), var(--red-050), var(--red-800));
141
+ & &--sponsor { // The small sponsor favicon displayed within a tag
142
+ img,
143
+ .svg-icon {
144
+ width: 100%;
145
+ height: 100%;
146
+ }
181
147
 
182
- &.is-selected {
183
- .s-tag-selected-styles(var(--red-400), var(--red-200), var(--red-800));
148
+ align-self: center;
149
+ border-radius: calc(var(--br-sm) - var(--su-static1));
150
+ display: inline-flex;
151
+ margin: calc(var(--su1) * -1) var(--su4) calc(var(--su2) * -1) calc(var(--su2) * -1);
152
+ max-width: calc(var(--su-static16) + var(--su-static2));
184
153
  }
185
- }
186
- a.s-tag__moderator:not(.is-selected) {
187
- .s-tag-hover-styles(var(--red-300), var(--red-100), var(--red-900));
188
- }
189
154
 
190
- // $$ Muted Tag
191
- // ---------------------------------------------------------------------------
192
- .s-tag__muted {
193
- .s-tag-styles(transparent, var(--black-075), var(--black-700));
194
155
 
195
- &.is-selected {
196
- .s-tag-selected-styles(transparent, var(--black-200), var(--black-900));
156
+ // INTERACTION
157
+ a&:not(.is-selected) {
158
+ &:hover,
159
+ &:focus,
160
+ &:active {
161
+ background-color: var(--_ta-bg-hover);
162
+ border-color: var(--_ta-bc-hover);
163
+ color: var(--_ta-fc-hover);
164
+
165
+ .highcontrast-mode({
166
+ border-color: currentColor;
167
+ });
168
+ }
197
169
  }
198
- }
199
- a.s-tag__muted:not(.is-selected) {
200
- .s-tag-hover-styles(transparent, var(--black-100), var(--black-800));
201
- }
170
+ // Selected
171
+ &.is-selected {
172
+ &,
173
+ a&,
174
+ a&:active,
175
+ a&:hover,
176
+ a&:focus {
177
+ background-color: var(--_ta-bg-selected);
178
+ border-color: var(--_ta-bc-selected);
179
+ color: var(--_ta-fc-selected);
202
180
 
203
- // $$ Tag with Icons (watched, ignored)
204
- // ---------------------------------------------------------------------------
205
- .s-tag__watched,
206
- .s-tag__ignored {
207
- position: relative;
208
- padding-left: 22px;
209
-
210
- &:before {
211
- content: "";
212
- display: block;
213
- width: 14px;
214
- height: 14px;
215
- margin-right: var(--su2);
216
- background-color: currentColor;
217
- position: absolute;
218
- left: 4px;
219
- top: calc(50% - 7px);
220
- -webkit-mask: var(--s-tag-icon) no-repeat center;
221
- mask: var(--s-tag-icon) no-repeat center;
222
- -webkit-mask-size: contain;
223
- mask-size: contain;
181
+ .highcontrast-mode({
182
+ border-color: currentColor;
183
+ });
184
+ }
224
185
  }
225
- }
226
186
 
227
- // $$ Watched Tag
228
- // ---------------------------------------------------------------------------
229
- .s-tag__watched {
230
- --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");
231
- }
187
+ background-color: var(--_ta-bg);
188
+ border: var(--su-static1) solid var(--_ta-bc);
189
+ border-radius: var(--_ta-br);
190
+ color: var(--_ta-fc);
191
+ font-size: var(--_ta-fs);
192
+ line-height: var(--_ta-lh);
193
+ padding-left: var(--_ta-pl);
194
+ padding-right: var(--_ta-pr);
232
195
 
233
- // $$ Ignored Tag
234
- // ---------------------------------------------------------------------------
235
- .s-tag__ignored {
236
- --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");
237
- }
196
+ align-items: center;
197
+ display: inline-flex;
198
+ justify-content: center;
199
+ min-width: 0;
200
+ text-decoration: none;
201
+ vertical-align: middle;
202
+ white-space: nowrap;
203
+ }
package/lib/css/components/topbar.less CHANGED
@@ -9,6 +9,12 @@
9
9
  // ============================================================================
10
10
  // $ BASE STYLE
11
11
  // ----------------------------------------------------------------------------
12
+ .topbar-notice-styles(@border: transparent, @background: transparent, @color: inherit) {
13
+ border-color: @border;
14
+ background-color: @background;
15
+ color: @color;
16
+ }
17
+
12
18
  .s-topbar {
13
19
  min-width: auto;
14
20
  box-shadow: var(--bs-sm);
@@ -318,19 +324,19 @@
318
324
  margin-right: var(--su8);
319
325
  flex-shrink: 0;
320
326
 
321
- .badge-styles(transparent, transparent, var(--theme-topbar-item-color));
327
+ .topbar-notice-styles(transparent, transparent, var(--theme-topbar-item-color));
322
328
 
323
329
  &:hover,
324
330
  &:focus {
325
- .badge-styles(var(--theme-topbar-item-background-hover), var(--theme-topbar-item-background-hover), var(--theme-topbar-item-color-hover));
331
+ .topbar-notice-styles(var(--theme-topbar-item-background-hover), var(--theme-topbar-item-background-hover), var(--theme-topbar-item-color-hover));
326
332
  }
327
333
 
328
334
  &.is-unread {
329
- .badge-styles(var(--theme-primary-color), var(--theme-primary-color), var(--white));
335
+ .topbar-notice-styles(var(--theme-primary-color), var(--theme-primary-color), var(--white));
330
336
 
331
337
  &:hover,
332
338
  &:focus {
333
- .badge-styles(var(--theme-primary-600), var(--theme-primary-600), var(--white));
339
+ .topbar-notice-styles(var(--theme-primary-600), var(--theme-primary-600), var(--white));
334
340
  }
335
341
  }
336
342
  }
package/lib/css/components/uploader.less CHANGED
@@ -7,70 +7,64 @@
7
7
  // visit https://stackoverflow.design/
8
8
 
9
9
  .s-uploader {
10
- --_bg: var(--black-025);
11
- --_bg-focus: var(--black-050);
12
- --_bg-bc: var(--black-150);
13
- --_focus-ring-color: var(--focus-ring);
14
-
10
+ --_up-bg: var(--black-025);
11
+ --_up-bg-focus: var(--black-050);
12
+ --_up-bg-bc: var(--black-150);
13
+ --_up-focus-ring-color: var(--focus-ring);
15
14
  // Static custom properties (not redefined but repeated enough to warrant a custom property)
16
- --_bg-b-image: url("data:image/svg+xml,%3csvg width='100%25' height='100%25' xmlns='http://www.w3.org/2000/svg'%3e%3crect width='100%25' height='100%25' fill='none' rx='5' ry='5' stroke='%23000000' stroke-width='8' stroke-dasharray='7%2c 22' stroke-dashoffset='0' stroke-linecap='square'/%3e%3c/svg%3e");
15
+ --_up-bg-b-image: url("data:image/svg+xml,%3csvg width='100%25' height='100%25' xmlns='http://www.w3.org/2000/svg'%3e%3crect width='100%25' height='100%25' fill='none' rx='5' ry='5' stroke='%23000000' stroke-width='8' stroke-dasharray='7%2c 22' stroke-dashoffset='0' stroke-linecap='square'/%3e%3c/svg%3e");
17
16
 
18
- .highcontrast-mode({
19
- --_bg-bc-hc: var(--black-400);
20
- });
17
+ .highcontrast-mode({ --_up-bg-bc-hc: var(--black-400); });
21
18
 
19
+ // MODIFIERS
22
20
  &.is-active {
23
- --_bg: var(--black-050);
24
- --_bg-bc: var(--black-200);
21
+ --_up-bg: var(--black-050);
22
+ --_up-bg-bc: var(--black-200);
25
23
  }
26
-
27
24
  &.is-disabled {
28
25
  opacity: var(--_o-disabled-static);
29
26
  }
30
-
31
27
  &.has-error {
32
- --_bg: var(--red-050);
33
- --_bg-focus: var(--red-100);
34
- --_bg-bc: var(--red-400);
35
- --_bg-bc-hc-state: var(--red-400);
36
- --_focus-ring-color: var(--focus-ring-error);
37
- --_link-fc: var(--red-900);
28
+ --_up-bg: var(--red-050);
29
+ --_up-bg-focus: var(--red-100);
30
+ --_up-bg-bc: var(--red-400);
31
+ --_up-bg-bc-hc-state: var(--red-400);
32
+ --_up-focus-ring-color: var(--focus-ring-error);
33
+ --_up-link-fc: var(--red-900);
38
34
  }
39
-
40
35
  &.has-success {
41
- --_bg: var(--green-025);
42
- --_bg-focus: var(--green-050);
43
- --_bg-bc: var(--green-400);
44
- --_bg-bc-hc-state: var(--green-400);
45
- --_focus-ring-color: var(--focus-ring-success);
46
- --_link-fc: var(--green-900);
36
+ --_up-bg: var(--green-025);
37
+ --_up-bg-focus: var(--green-050);
38
+ --_up-bg-bc: var(--green-400);
39
+ --_up-bg-bc-hc-state: var(--green-400);
40
+ --_up-focus-ring-color: var(--focus-ring-success);
41
+ --_up-link-fc: var(--green-900);
47
42
  }
48
-
49
43
  &.has-warning {
50
- --_bg: var(--yellow-050);
51
- --_bg-focus: var(--yellow-100);
52
- --_bg-bc: var(--yellow-400);
53
- --_bg-bc-hc-state: var(--yellow-400);
54
- --_focus-ring-color: var(--focus-ring-warning);
55
- --_link-fc: var(--yellow-900);
44
+ --_up-bg: var(--yellow-050);
45
+ --_up-bg-focus: var(--yellow-100);
46
+ --_up-bg-bc: var(--yellow-400);
47
+ --_up-bg-bc-hc-state: var(--yellow-400);
48
+ --_up-focus-ring-color: var(--focus-ring-warning);
49
+ --_up-link-fc: var(--yellow-900);
56
50
  }
57
-
58
51
  &.has-error,
59
52
  &.has-success,
60
53
  &.has-warning {
61
54
  .s-link {
62
- color: var(--_link-fc);
55
+ color: var(--_up-link-fc);
63
56
  }
64
57
  }
65
58
 
66
- // This is to for safari shadow DOM
59
+ // CHILD ELEMENTS
60
+ // This is for safari shadow DOM
67
61
  // see https://github.com/StackExchange/Stacks/pull/690#issuecomment-861028193
68
62
  input[type="file"]::file-selector-button {
69
63
  cursor: pointer;
70
64
  }
71
- .s-uploader--container {
65
+ & &--container {
72
66
  align-items: center;
73
- background-color: var(--_bg);
67
+ background-color: var(--_up-bg);
74
68
  border-radius: var(--br-lg);
75
69
  display: flex;
76
70
  flex-direction: column;
@@ -82,9 +76,9 @@
82
76
 
83
77
  // Add the dashed border as an SVG background mask
84
78
  &:before {
85
- -webkit-mask-image: var(--_bg-b-image);
86
- mask-image: var(--_bg-b-image);
87
- background-color: var(--_bg-bc-hc-state, var(--_bg-bc-hc, var(--_bg-bc)));
79
+ -webkit-mask-image: var(--_up-bg-b-image);
80
+ mask-image: var(--_up-bg-b-image);
81
+ background-color: var(--_up-bg-bc-hc-state, var(--_up-bg-bc-hc, var(--_up-bg-bc)));
88
82
  content: '';
89
83
  border-radius: var(--br-lg);
90
84
  display: block;
@@ -92,7 +86,7 @@
92
86
  inset: 0;
93
87
  }
94
88
  }
95
- .s-uploader--input {
89
+ & &--input {
96
90
  cursor: pointer;
97
91
  height: 100%;
98
92
  inset: 0;
@@ -102,16 +96,15 @@
102
96
  z-index: var(--zi-selected);
103
97
 
104
98
  &:focus:focus-visible + .s-uploader--container {
105
- background-color: var(--_bg-focus);
106
- box-shadow: 0 0 0 var(--su-static4) var(--_focus-ring-color);
99
+ background-color: var(--_up-bg-focus);
100
+ box-shadow: 0 0 0 var(--su-static4) var(--_up-focus-ring-color);
107
101
  }
108
102
  }
109
- .s-uploader--preview {
103
+ & &--preview {
110
104
  max-width: 100%;
111
105
  pointer-events: none;
112
106
  }
113
-
114
- .s-uploader--preview-thumbnail {
107
+ & &--preview-thumbnail {
115
108
  background-color: var(--white);
116
109
  border-radius: var(--br-sm);
117
110
  box-shadow: var(--bs-md);
@@ -132,8 +125,7 @@
132
125
  padding: var(--su16);
133
126
  }
134
127
  }
135
-
136
- .s-uploader--previews {
128
+ & &--previews {
137
129
  max-width: 100%;
138
130
  text-align: left;
139
131
 
@@ -177,15 +169,13 @@
177
169
  }
178
170
  }
179
171
  }
180
-
181
- .s-uploader--previews-heading {
172
+ & &--previews-heading {
182
173
  color: var(--black-900);
183
174
  font-size: var(--fs-body2);
184
175
  font-weight: 600;
185
176
  padding-bottom: var(--su8);
186
177
  }
187
-
188
- .s-uploader--reset {
178
+ & &--reset {
189
179
  position: absolute;
190
180
  right: var(--su8);
191
181
  top: var(--su8);
package/lib/css/components/user-cards.less CHANGED
@@ -29,6 +29,10 @@
29
29
  background-color: var(--theme-secondary-050);
30
30
  border-radius: var(--br-md);
31
31
 
32
+ .s-user-card--time {
33
+ color: var(--black-600);
34
+ }
35
+
32
36
  .s-user-card--type {
33
37
  color: var(--black-700);
34
38
  }
@@ -37,7 +41,7 @@
37
41
  // $$ Full meta data
38
42
  // ---------------------------------------------------------------------------
39
43
  &.s-user-card__full {
40
- align-items: start;
44
+ align-items: flex-start;
41
45
 
42
46
  .s-user-card--link {
43
47
  font-size: var(--fs-body2);
package/lib/css/stacks-static.less CHANGED
@@ -18,6 +18,7 @@
18
18
 
19
19
  // -- COMPONENTS
20
20
  @import "components/activity-indicator.less";
21
+ @import "components/award-bling.less";
21
22
  @import "components/avatars.less";
22
23
  @import "components/badges.less";
23
24
  @import "components/empty-states.less";
@@ -51,6 +52,7 @@
51
52
  @import "atomic/borders.less";
52
53
  @import "atomic/colors.less";
53
54
  @import "atomic/flex.less";
55
+ @import "atomic/gap.less";
54
56
  @import "atomic/grid.less";
55
57
  @import "atomic/spacing.less";
56
58
  @import "atomic/typography.less";