@stackoverflow/stacks 1.3.6 → 1.4.1

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 +1347 -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 +182 -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,208 @@
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
+ // NOTE: ignored and watched variants are used in core with the .post-tag class (in place of the base tag .s-tag)
51
+ &__ignored, // TODO: remove all single `&` ignored styles once core no longer requires them
52
+ &&__ignored,
53
+ &__watched, // TODO: remove all single `&` watched styles once core no longer requires them
54
+ &&__watched {
55
+ --_ta-pl: calc(var(--su-static24) - var(--su-static2)); // 22px
56
+ --_ta-before-size: calc(var(--su-static16) - var(--su-static2)); // 14px
57
+ // --_ta-before-icon defined per variant
58
+
59
+ &:before {
60
+ height: var(--_ta-before-size);
61
+ width: var(--_ta-before-size);
62
+ -webkit-mask: var(--_ta-before-icon) no-repeat center;
63
+ mask: var(--_ta-before-icon) no-repeat center;
64
+
65
+ background-color: currentColor;
66
+ content: "";
67
+ display: block;
68
+ left: var(--su-static4);
69
+ margin-right: var(--su2);
70
+ position: absolute;
71
+ top: calc(50% - calc(var(--su-static8) - var(--su-static1)));
72
+ -webkit-mask-size: contain;
73
+ mask-size: contain;
74
+ }
75
+ position: relative;
98
76
  }
99
- &.s-tag__sm {
100
- font-size: var(--fs-caption);
101
- line-height: 1.5;
77
+ &__ignored, // TODO: remove all single `&` ignored styles once core no longer requires them
78
+ &&__ignored {
79
+ --_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
80
  }
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;
81
+ // moderator overrides other muted and required, required overrides muted
82
+ &&__moderator {
83
+ --_ta-bc: var(--red-200);
84
+ --_ta-bg: var(--red-050);
85
+ --_ta-fc: var(--red-800);
86
+ --_ta-bc-hover: var(--red-300);
87
+ --_ta-bg-hover: var(--red-100);
88
+ --_ta-fc-hover: var(--red-900);
89
+ --_ta-bc-selected: var(--red-400);
90
+ --_ta-bg-selected: var(--red-200);
91
+ --_ta-fc-selected: var(--red-800);
108
92
  }
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;
93
+ &&__muted:not(&__moderator):not(&__required) {
94
+ --_ta-bc: transparent;
95
+ --_ta-bg: var(--black-075);
96
+ --_ta-fc: var(--black-700);
97
+ --_ta-bc-hover: transparent;
98
+ --_ta-bg-hover: var(--black-100);
99
+ --_ta-fc-hover: var(--black-800);
100
+ --_ta-bc-selected: transparent;
101
+ --_ta-bg-selected: var(--black-200);
102
+ --_ta-fc-selected: var(--black-900);
103
+
104
+ .highcontrast-mode({ --_ta-bc: currentColor; }); // Specificity has bit us, so we need this override
115
105
  }
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);
106
+ &&__required:not(&__moderator) {
107
+ --_ta-bc: var(--bc-darker);
108
+ --_ta-bg: var(--black-075);
109
+ --_ta-fc: var(--black-700);
110
+ --_ta-bc-hover: var(--black-300);
111
+ --_ta-bg-hover: var(--black-100);
112
+ --_ta-fc-hover: var(--black-800);
113
+ --_ta-bc-selected: var(--black-500);
114
+ --_ta-bg-selected: var(--black-200);
115
+ --_ta-fc-selected: var(--black-900);
139
116
  }
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%;
117
+ &__watched, // TODO: remove all single `&` watched styles once core no longer requires them
118
+ &&__watched {
119
+ --_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
120
  }
157
- }
158
121
 
122
+ // CHILD ELEMENTS
123
+ & &--dismiss { // Style adjustment to @Svg.ClearSm
124
+ &:hover {
125
+ .highcontrast-mode({
126
+ color: var(--white);
127
+ });
159
128
 
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));
129
+ background-color: var(--_ta-fc);
130
+ color: var(--_ta-bg);
131
+ }
168
132
 
169
- &.is-selected {
170
- .s-tag-selected-styles(var(--black-500), var(--black-200), var(--black-900));
133
+ align-content: center;
134
+ align-self: center;
135
+ background-color: transparent;
136
+ border-radius: var(--br-sm);
137
+ color: inherit;
138
+ cursor: pointer;
139
+ display: flex;
140
+ height: var(--su-static16);
141
+ justify-content: center;
142
+ margin-left: var(--su4);
143
+ padding: var(--su1);
144
+ width: var(--su-static16);
171
145
  }
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));
146
+ & &--sponsor { // The small sponsor favicon displayed within a tag
147
+ img,
148
+ .svg-icon {
149
+ width: 100%;
150
+ height: 100%;
151
+ }
181
152
 
182
- &.is-selected {
183
- .s-tag-selected-styles(var(--red-400), var(--red-200), var(--red-800));
153
+ align-self: center;
154
+ border-radius: calc(var(--br-sm) - var(--su-static1));
155
+ display: inline-flex;
156
+ margin: calc(var(--su1) * -1) var(--su4) calc(var(--su2) * -1) calc(var(--su2) * -1);
157
+ max-width: calc(var(--su-static16) + var(--su-static2));
184
158
  }
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
159
 
190
- // $$ Muted Tag
191
- // ---------------------------------------------------------------------------
192
- .s-tag__muted {
193
- .s-tag-styles(transparent, var(--black-075), var(--black-700));
194
160
 
195
- &.is-selected {
196
- .s-tag-selected-styles(transparent, var(--black-200), var(--black-900));
161
+ // INTERACTION
162
+ a&:not(.is-selected) {
163
+ &:hover,
164
+ &:focus,
165
+ &:active {
166
+ background-color: var(--_ta-bg-hover);
167
+ border-color: var(--_ta-bc-hover);
168
+ color: var(--_ta-fc-hover);
169
+
170
+ .highcontrast-mode({
171
+ border-color: currentColor;
172
+ });
173
+ }
197
174
  }
198
- }
199
- a.s-tag__muted:not(.is-selected) {
200
- .s-tag-hover-styles(transparent, var(--black-100), var(--black-800));
201
- }
175
+ // Selected
176
+ &.is-selected {
177
+ &,
178
+ a&,
179
+ a&:active,
180
+ a&:hover,
181
+ a&:focus {
182
+ background-color: var(--_ta-bg-selected);
183
+ border-color: var(--_ta-bc-selected);
184
+ color: var(--_ta-fc-selected);
202
185
 
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;
186
+ .highcontrast-mode({
187
+ border-color: currentColor;
188
+ });
189
+ }
224
190
  }
225
- }
226
191
 
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
- }
192
+ background-color: var(--_ta-bg);
193
+ border: var(--su-static1) solid var(--_ta-bc);
194
+ border-radius: var(--_ta-br);
195
+ color: var(--_ta-fc);
196
+ font-size: var(--_ta-fs);
197
+ line-height: var(--_ta-lh);
198
+ padding-left: var(--_ta-pl);
199
+ padding-right: var(--_ta-pr);
232
200
 
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
- }
201
+ align-items: center;
202
+ display: inline-flex;
203
+ justify-content: center;
204
+ min-width: 0;
205
+ text-decoration: none;
206
+ vertical-align: middle;
207
+ white-space: nowrap;
208
+ }
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";