@stackoverflow/stacks 1.1.0 → 1.2.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 (5) hide show
  1. package/dist/css/stacks.css +43 -5
  2. package/dist/css/stacks.min.css +1 -1
  3. package/lib/css/components/badges.less +45 -0
  4. package/lib/css/components/post-summary.less +24 -13
  5. package/package.json +17 -17
package/lib/css/components/badges.less CHANGED
@@ -59,6 +59,13 @@
59
59
  margin-left: calc((var(--su4) + var(--su1)) * -1);
60
60
  }
61
61
 
62
+ // $ BADGE ICON
63
+ // When we have a badge icon
64
+ // ---------------------------------------------------------------------------
65
+ .s-badge__icon {
66
+ gap: 0.3em;
67
+ }
68
+
62
69
  // $ BADGE SIZES
63
70
  // ---------------------------------------------------------------------------
64
71
  .s-badge__sm {
@@ -174,6 +181,44 @@
174
181
  .highcontrast-mode({ border-color: currentColor; });
175
182
  }
176
183
 
184
+ // $$ States
185
+ // ---------------------------------------------------------------------------
186
+ &.s-badge__danger {
187
+ color: var(--red-900);
188
+ background-color: var(--red-100);
189
+ border-color: var(--red-600);
190
+
191
+ &.s-badge__filled {
192
+ color: @white;
193
+ background-color: var(--red-500);
194
+ border-color: transparent;
195
+ }
196
+ }
197
+
198
+ &.s-badge__info {
199
+ color: var(--blue-900);
200
+ background-color: var(--blue-100);
201
+ border-color: var(--blue-600);
202
+ }
203
+
204
+ &.s-badge__warning {
205
+ color: var(--yellow-900);
206
+ background-color: var(--yellow-100);
207
+ border-color: var(--yellow-600);
208
+ }
209
+
210
+ &.s-badge__muted {
211
+ color: var(--black-900);
212
+ background-color: var(--black-100);
213
+ border-color: var(--black-600);
214
+
215
+ &.s-badge__filled {
216
+ color: var(--white);
217
+ background-color: var(--black-700);
218
+ border-color: transparent;
219
+ }
220
+ }
221
+
177
222
  // $$ Award Count
178
223
  // ---------------------------------------------------------------------------
179
224
  .s-award-bling {
package/lib/css/components/post-summary.less CHANGED
@@ -143,12 +143,14 @@
143
143
  color: var(--fc-light);
144
144
 
145
145
  .s-post-summary--stats-item {
146
- display: inline-flex;
147
- gap: 0.3em;
148
- align-items: center;
149
- justify-content: center;
150
- white-space: nowrap;
151
- border: 1px solid transparent;
146
+ &:not(.s-badge) {
147
+ display: inline-flex;
148
+ gap: 0.3em;
149
+ align-items: center;
150
+ justify-content: center;
151
+ white-space: nowrap;
152
+ border: 1px solid transparent;
153
+ }
152
154
 
153
155
  &.s-post-summary--stats-item__emphasized {
154
156
  color: var(--fc-dark);
@@ -158,7 +160,14 @@
158
160
  font-weight: 500;
159
161
  }
160
162
 
163
+ &.s-badge {
164
+ font-size: var(--fs-body1);
165
+ line-height: var(--lh-md);
166
+ padding: var(--su2) var(--su4);
167
+ }
168
+
161
169
  &.has-answers,
170
+ // TODO DEPRECATED: Remove .has-bounty styling
162
171
  &.has-bounty,
163
172
  &.is-deleted,
164
173
  &.is-published,
@@ -186,6 +195,7 @@
186
195
  }
187
196
  }
188
197
 
198
+ // TODO DEPRECATED: Remove and replace with references with `s-badge s-badge__bounty`
189
199
  &.has-bounty {
190
200
  color: var(--white);
191
201
  background-color: var(--blue-600);
@@ -207,31 +217,31 @@
207
217
  color: var(--black-800);
208
218
  background-color: var(--black-050);
209
219
  }
210
-
220
+ // TODO DEPRECATED: Remove and replace with references with `s-badge s-badge__info s-badge__icon`
211
221
  &.is-draft {
212
222
  color: var(--blue-900);
213
223
  background-color: var(--blue-100);
214
224
  border-color: var(--blue-600);
215
225
  }
216
-
226
+ // TODO DEPRECATED: Remove and replace with references with `s-badge s-badge__warning s-badge__icon`
217
227
  &.is-review {
218
228
  color: var(--yellow-900);
219
229
  background-color: var(--yellow-100);
220
230
  border-color: var(--yellow-600);
221
231
  }
222
-
232
+ // TODO DEPRECATED: Remove and replace with references with `s-badge s-badge__danger s-badge__icon`
223
233
  &.is-closed {
224
234
  color: var(--red-900);
225
235
  background-color: var(--red-100);
226
236
  border-color: var(--red-600);
227
237
  }
228
-
238
+ // TODO DEPRECATED: Remove and replace with references with `s-badge s-badge__muted s-badge__icon`
229
239
  &.is-archived {
230
240
  color: var(--black-900);
231
241
  background-color: var(--black-100);
232
242
  border-color: var(--black-600);
233
243
  }
234
-
244
+ // TODO DEPRECATED: Remove and replace with references with `s-badge s-badge__muted s-badge__filled s-badge__icon`
235
245
  &.is-pinned {
236
246
  color: var(--white);
237
247
  background-color: var(--black-700);
@@ -393,11 +403,12 @@
393
403
 
394
404
  .s-post-summary__ignored,
395
405
  .s-post-summary__deleted {
396
- .s-post-summary--content {
406
+ .s-post-summary--content > *:not(.s-post-summary--content-menu-button) {
397
407
  opacity: 0.6;
398
408
  }
399
409
 
400
- .s-post-summary--stats-item:not(.is-deleted) {
410
+ // TODO DEPRECATED remove `:not(.is-deleted)`
411
+ .s-post-summary--stats-item:not(.s-badge):not(.is-deleted) {
401
412
  opacity: 0.6;
402
413
  filter: grayscale(100%);
403
414
  }
package/package.json CHANGED
@@ -5,7 +5,7 @@
5
5
  "type": "git",
6
6
  "url": "https://github.com/StackExchange/Stacks.git"
7
7
  },
8
- "version": "1.1.0",
8
+ "version": "1.2.0",
9
9
  "files": [
10
10
  "dist",
11
11
  "lib"
@@ -36,36 +36,36 @@
36
36
  "devDependencies": {
37
37
  "@11ty/eleventy": "^1.0.1",
38
38
  "@highlightjs/cdn-assets": "^11.5.1",
39
- "@stackoverflow/stacks-editor": "^0.4.2",
39
+ "@stackoverflow/stacks-editor": "^0.5.0",
40
40
  "@stackoverflow/stacks-icons": "^2.27.0",
41
- "@typescript-eslint/eslint-plugin": "^5.22.0",
42
- "@typescript-eslint/parser": "^5.22.0",
43
- "backstopjs": "^6.0.4",
44
- "concurrently": "^7.1.0",
41
+ "@typescript-eslint/eslint-plugin": "^5.27.1",
42
+ "@typescript-eslint/parser": "^5.27.1",
43
+ "backstopjs": "^6.1.0",
44
+ "concurrently": "^7.2.1",
45
45
  "css-loader": "^6.7.1",
46
- "cssnano": "^5.1.7",
46
+ "cssnano": "^5.1.11",
47
47
  "docsearch.js": "^2.6.3",
48
48
  "eleventy-plugin-highlightjs": "^1.1.0",
49
49
  "eleventy-plugin-nesting-toc": "^1.3.0",
50
- "eslint": "^8.15.0",
50
+ "eslint": "^8.17.0",
51
51
  "eslint-config-prettier": "^8.5.0",
52
52
  "eslint-plugin-no-unsanitized": "^4.0.1",
53
53
  "jquery": "^3.6.0",
54
- "less-loader": "^10.2.0",
54
+ "less-loader": "^11.0.0",
55
55
  "list.js": "^2.3.1",
56
56
  "markdown-it": "^13.0.1",
57
57
  "mini-css-extract-plugin": "^2.6.0",
58
58
  "postcss-less": "^6.0.0",
59
- "postcss-loader": "^6.2.1",
59
+ "postcss-loader": "^7.0.0",
60
60
  "prettier": "^2.6.2",
61
- "stylelint": "^14.8.2",
62
- "stylelint-config-recommended": "^7.0.0",
63
- "stylelint-config-standard": "^25.0.0",
64
- "terser-webpack-plugin": "^5.3.1",
61
+ "stylelint": "^14.9.1",
62
+ "stylelint-config-recommended": "^8.0.0",
63
+ "stylelint-config-standard": "^26.0.0",
64
+ "terser-webpack-plugin": "^5.3.3",
65
65
  "ts-loader": "^9.3.0",
66
- "typescript": "^4.6.4",
67
- "webpack": "^5.72.0",
68
- "webpack-cli": "^4.9.2",
66
+ "typescript": "^4.7.3",
67
+ "webpack": "^5.73.0",
68
+ "webpack-cli": "^4.10.0",
69
69
  "webpack-merge": "^5.8.0"
70
70
  },
71
71
  "browserslist": [