@anydigital/blades 0.27.0-beta.7 → 0.27.0-beta.8

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 (4) hide show
  1. package/assets/blades.css +20 -7
  2. package/blades.gemspec +1 -1
  3. package/package.json +1 -1
  4. package/src/_typography.css +20 -7
package/assets/blades.css CHANGED
@@ -218,15 +218,15 @@ h6 {
218
218
 
219
219
  ### List markers
220
220
 
221
- Use `data-marker="🥷"` helper attribute to customize list markers:
221
+ Use inline `style="--list-marker:'🥷 '"` on `<ul>/<ol>` or even individual `<li>` to customize list markers:
222
222
  <article>
223
223
 
224
- - You can make
225
- - really {data-marker=❄️}
226
- - cool {data-marker=🥶}
227
- - markers {data-marker=🧊}
228
- - with Blades CSS {data-marker=🥷}
229
- - using `data-marker` helper attribute.
224
+ - Customize
225
+ - list
226
+ - markers
227
+ - with [Blades CSS](https://blades.ninja/css/) {style="--list-marker:'🥷 '"}
228
+
229
+ {style="--list-marker:'🧊 '"}
230
230
  </article>
231
231
 
232
232
  How it works:
@@ -234,10 +234,23 @@ How it works:
234
234
 
235
235
  ul,
236
236
  ol {
237
+ &[style*="--list-marker:"] {
238
+ list-style-type: var(--list-marker);
239
+
240
+ > li {
241
+ list-style-type: inherit;
242
+ }
243
+ }
244
+
245
+ li[style*="--list-marker:"] {
246
+ list-style-type: var(--list-marker);
247
+ }
237
248
  li[data-marker]::marker {
249
+ /* ⚠️ `data-marker` works only in Chrome and Firefox */
238
250
  content: attr(data-marker) " ";
239
251
  }
240
252
 
253
+ /* Helper class to remove list styling at all */
241
254
  &.unlist {
242
255
  padding-inline-start: 0;
243
256
 
package/blades.gemspec CHANGED
@@ -2,7 +2,7 @@
2
2
 
3
3
  Gem::Specification.new do |spec|
4
4
  spec.name = "blades"
5
- spec.version = "0.27.0-beta.7"
5
+ spec.version = "0.27.0-beta.8"
6
6
  spec.authors = ["Anton Staroverov"]
7
7
 
8
8
  spec.summary = "Framework-agnostic CSS utilities and single-file Liquid 'blades' for modern web development."
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@anydigital/blades",
3
- "version": "0.27.0-beta.7",
3
+ "version": "0.27.0-beta.8",
4
4
  "description": "Framework-agnostic CSS utilities and single-file Liquid 'blades' for modern web development.",
5
5
  "style": "./assets/blades.css",
6
6
  "exports": {
package/src/_typography.css CHANGED
@@ -59,25 +59,38 @@ h6 {
59
59
 
60
60
  ### List markers
61
61
 
62
- Use `data-marker="🥷"` helper attribute to customize list markers:
62
+ Use inline `style="--list-marker:'🥷 '"` on `<ul>/<ol>` or even individual `<li>` to customize list markers:
63
63
  <article>
64
64
 
65
- - You can make
66
- - really {data-marker=❄️}
67
- - cool {data-marker=🥶}
68
- - markers {data-marker=🧊}
69
- - with Blades CSS {data-marker=🥷}
70
- - using `data-marker` helper attribute.
65
+ - Customize
66
+ - list
67
+ - markers
68
+ - with [Blades CSS](https://blades.ninja/css/) {style="--list-marker:'🥷 '"}
69
+
70
+ {style="--list-marker:'🧊 '"}
71
71
  </article>
72
72
 
73
73
  How it works:
74
74
  ```css */
75
75
  ul,
76
76
  ol {
77
+ &[style*="--list-marker:"] {
78
+ list-style-type: var(--list-marker);
79
+
80
+ > li {
81
+ list-style-type: inherit;
82
+ }
83
+ }
84
+
85
+ li[style*="--list-marker:"] {
86
+ list-style-type: var(--list-marker);
87
+ }
77
88
  li[data-marker]::marker {
89
+ /* ⚠️ `data-marker` works only in Chrome and Firefox */
78
90
  content: attr(data-marker) " ";
79
91
  }
80
92
 
93
+ /* Helper class to remove list styling at all */
81
94
  &.unlist {
82
95
  padding-inline-start: 0;
83
96