@anydigital/blades 0.27.0-beta.16 → 0.27.0-beta.17
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.
- package/README.md +2 -4
- package/assets/blades.core.css +598 -0
- package/assets/blades.css +181 -0
- package/assets/blades.theme.css +31 -0
- package/assets/float-label.core.css +32 -0
- package/assets/float-label.css +63 -0
- package/assets/float-label.theme.css +31 -0
- package/blades.gemspec +1 -1
- package/package.json +3 -1
- package/src/blades.core.css +18 -0
- package/src/blades.css +2 -15
- package/src/blades.theme.css +2 -0
- package/src/float-label.core.css +32 -0
- package/src/float-label.css +2 -0
- package/src/float-label.theme.css +31 -0
package/README.md
CHANGED
|
@@ -49,8 +49,7 @@ Nunjucks/Liquid batteries included (for 11ty/Build Awesome, Jekyll, etc.) 🥷
|
|
|
49
49
|
|
|
50
50
|
<!--prettier-ignore-->
|
|
51
51
|
```html
|
|
52
|
-
<link href="https://cdn.jsdelivr.net/npm/@anydigital/blades@^0.27.0-
|
|
53
|
-
<link href="https://cdn.jsdelivr.net/npm/@anydigital/blades@^0.27.0-alpha/assets/blades.theme.min.css" rel="stylesheet" /><!-- optional -->
|
|
52
|
+
<link href="https://cdn.jsdelivr.net/npm/@anydigital/blades@^0.27.0-beta/assets/blades.min.css" rel="stylesheet" />
|
|
54
53
|
```
|
|
55
54
|
|
|
56
55
|
<mark>Via npm:</mark>
|
|
@@ -59,11 +58,10 @@ Nunjucks/Liquid batteries included (for 11ty/Build Awesome, Jekyll, etc.) 🥷
|
|
|
59
58
|
npm install @anydigital/blades
|
|
60
59
|
```
|
|
61
60
|
|
|
62
|
-
Then
|
|
61
|
+
Then in your .css:
|
|
63
62
|
|
|
64
63
|
```css
|
|
65
64
|
@import "@anydigital/blades";
|
|
66
|
-
@import "@anydigital/blades.theme"; /* optional */
|
|
67
65
|
```
|
|
68
66
|
|
|
69
67
|
Living example: https://github.com/anydigital/build-awesome-starter/blob/main/_styles/styles.css
|
|
@@ -0,0 +1,598 @@
|
|
|
1
|
+
/*** Follows https://github.com/picocss/pico/blob/main/scss/_index.scss ***/
|
|
2
|
+
|
|
3
|
+
/* Layout */
|
|
4
|
+
|
|
5
|
+
/* Extends https://github.com/picocss/pico/blob/main/scss/layout/
|
|
6
|
+
<!--section:docs-intro-->
|
|
7
|
+
|
|
8
|
+
Global styles:
|
|
9
|
+
```css */
|
|
10
|
+
|
|
11
|
+
html {
|
|
12
|
+
/* Prevent horizontal overflow and scrolling, modern way. */
|
|
13
|
+
overflow-x: clip;
|
|
14
|
+
}
|
|
15
|
+
|
|
16
|
+
body {
|
|
17
|
+
/* Ensure `body` takes at least the full height of the viewport (using dynamic viewport height for better mobile support). */
|
|
18
|
+
min-height: 100dvh;
|
|
19
|
+
}
|
|
20
|
+
|
|
21
|
+
/*```
|
|
22
|
+
<!--section:docs-->
|
|
23
|
+
|
|
24
|
+
### Auto-columns
|
|
25
|
+
```css */
|
|
26
|
+
|
|
27
|
+
.columns,
|
|
28
|
+
[data-is-toc] > ul,
|
|
29
|
+
[data-is-toc] > ol {
|
|
30
|
+
columns: 30ch auto; /* 2 cols max for 65ch container */
|
|
31
|
+
|
|
32
|
+
/* Avoid breaking inside elements, such as nested lists */
|
|
33
|
+
> * {
|
|
34
|
+
break-inside: avoid;
|
|
35
|
+
}
|
|
36
|
+
}
|
|
37
|
+
|
|
38
|
+
/*```
|
|
39
|
+
|
|
40
|
+
Table of contents (`[data-is-toc]`) has auto-columns by default.
|
|
41
|
+
|
|
42
|
+
### Jump to top
|
|
43
|
+
```css */
|
|
44
|
+
|
|
45
|
+
[data-jump-to="top"] {
|
|
46
|
+
position: fixed;
|
|
47
|
+
bottom: 0;
|
|
48
|
+
right: 0;
|
|
49
|
+
padding-top: 50vh;
|
|
50
|
+
opacity: 25%;
|
|
51
|
+
|
|
52
|
+
&:hover {
|
|
53
|
+
opacity: 75%;
|
|
54
|
+
}
|
|
55
|
+
}
|
|
56
|
+
|
|
57
|
+
/*```
|
|
58
|
+
<!--section--> */
|
|
59
|
+
|
|
60
|
+
/* <!--section:code-->```css */
|
|
61
|
+
|
|
62
|
+
.breakout,
|
|
63
|
+
.breakout-all {
|
|
64
|
+
/* Prepare the container for breakout elements */
|
|
65
|
+
padding-inline: 10%;
|
|
66
|
+
max-width: calc(10% + 65ch + 10%);
|
|
67
|
+
|
|
68
|
+
/* Breakout direct children only */
|
|
69
|
+
& > * {
|
|
70
|
+
&:is(
|
|
71
|
+
table,
|
|
72
|
+
pre,
|
|
73
|
+
figure, video, iframe, canvas,
|
|
74
|
+
img, picture,
|
|
75
|
+
/* Custom utility classes for other tags that need to be broken out */
|
|
76
|
+
.breakout-item,
|
|
77
|
+
.breakout-item-max
|
|
78
|
+
) {
|
|
79
|
+
width: fit-content;
|
|
80
|
+
min-width: 100%;
|
|
81
|
+
max-width: 125%;
|
|
82
|
+
margin-left: 50%;
|
|
83
|
+
transform: translateX(-50%);
|
|
84
|
+
}
|
|
85
|
+
|
|
86
|
+
/* Respect img/picture min-width */
|
|
87
|
+
&:is(img, picture) {
|
|
88
|
+
min-width: auto;
|
|
89
|
+
}
|
|
90
|
+
|
|
91
|
+
/* Max out the width of the element */
|
|
92
|
+
&.breakout-item-max {
|
|
93
|
+
width: 125% !important; /* !important is for cases like figure.breakout-item-max @TODO */
|
|
94
|
+
}
|
|
95
|
+
}
|
|
96
|
+
}
|
|
97
|
+
|
|
98
|
+
.breakout-all > * {
|
|
99
|
+
&:is(h2, h3, h4, h5, h6, hr):not([class]) {
|
|
100
|
+
position: relative;
|
|
101
|
+
|
|
102
|
+
&::before {
|
|
103
|
+
content: "";
|
|
104
|
+
display: block;
|
|
105
|
+
position: absolute;
|
|
106
|
+
background: gray;
|
|
107
|
+
opacity: 12.5%;
|
|
108
|
+
}
|
|
109
|
+
}
|
|
110
|
+
|
|
111
|
+
&:is(h2, h3, h4, h5, h6):not([class]) {
|
|
112
|
+
&::before {
|
|
113
|
+
width: 10em;
|
|
114
|
+
right: 100%;
|
|
115
|
+
margin-right: 0.8ch;
|
|
116
|
+
height: 0.25em;
|
|
117
|
+
top: 50%;
|
|
118
|
+
transform: translateY(-50%);
|
|
119
|
+
background: linear-gradient(to left, gray, transparent);
|
|
120
|
+
}
|
|
121
|
+
|
|
122
|
+
/* @TODO: add to tricks-wiki why `*` works here, but `&` fails */
|
|
123
|
+
&:where(hr + *) {
|
|
124
|
+
&::before {
|
|
125
|
+
display: none !important;
|
|
126
|
+
}
|
|
127
|
+
}
|
|
128
|
+
}
|
|
129
|
+
&:is(hr) {
|
|
130
|
+
height: 0.5rem;
|
|
131
|
+
border: none;
|
|
132
|
+
overflow: visible;
|
|
133
|
+
|
|
134
|
+
&::before {
|
|
135
|
+
width: 100vw;
|
|
136
|
+
left: 50%;
|
|
137
|
+
height: 100%;
|
|
138
|
+
transform: translateX(-50%);
|
|
139
|
+
}
|
|
140
|
+
}
|
|
141
|
+
}
|
|
142
|
+
|
|
143
|
+
/*```
|
|
144
|
+
<!--section:docs,summary-->
|
|
145
|
+
|
|
146
|
+
Framework-agnostic utilities for breaking out images and figures beyond their container width.
|
|
147
|
+
|
|
148
|
+
Use the `.breakout` class to allow elements to extend beyond their parent container.
|
|
149
|
+
|
|
150
|
+
<!--section:docs-->
|
|
151
|
+
|
|
152
|
+
```html
|
|
153
|
+
<div class="breakout">
|
|
154
|
+
<img src="image.jpg" alt="Description" />
|
|
155
|
+
</div>
|
|
156
|
+
```
|
|
157
|
+
|
|
158
|
+
The breakout container has `10%` inline padding and a max-width of `calc(10% + 65ch + 10%)`. The breakout utilities support images, pictures, figures, canvas, audio, video, tables, pre, iframe, and other media elements. Tables inside `.breakout` are specifically enhanced for horizontal scrolling and full-bleed mobile display. This is automatically included when you import the stylesheet.
|
|
159
|
+
|
|
160
|
+
<!--section--> */
|
|
161
|
+
|
|
162
|
+
/* Content */
|
|
163
|
+
|
|
164
|
+
/* Extends https://github.com/picocss/pico/blob/main/scss/content/_typography.scss
|
|
165
|
+
<!--section:docs-intro-->
|
|
166
|
+
|
|
167
|
+
Global styles:
|
|
168
|
+
```css */
|
|
169
|
+
|
|
170
|
+
html {
|
|
171
|
+
/* Enable font smoothing */
|
|
172
|
+
-webkit-font-smoothing: antialiased;
|
|
173
|
+
-moz-osx-font-smoothing: grayscale;
|
|
174
|
+
}
|
|
175
|
+
|
|
176
|
+
body {
|
|
177
|
+
/* Enable global hyphenation */
|
|
178
|
+
hyphens: auto;
|
|
179
|
+
/* ... except for links and tables which are better (safer) without hyphenation */
|
|
180
|
+
a,
|
|
181
|
+
table {
|
|
182
|
+
hyphens: none;
|
|
183
|
+
}
|
|
184
|
+
}
|
|
185
|
+
|
|
186
|
+
/*```
|
|
187
|
+
<!--section:docs-->
|
|
188
|
+
|
|
189
|
+
### Heading anchors
|
|
190
|
+
|
|
191
|
+
Set `data-is-anchor` attribute on anchors inside headings to position them absolutely, and show only on hover (when supported):
|
|
192
|
+
|
|
193
|
+
<article><h2>Heading with anchor <a href="#hwa" data-is-anchor>#</a></h2></article>
|
|
194
|
+
|
|
195
|
+
How it works:
|
|
196
|
+
```css */
|
|
197
|
+
|
|
198
|
+
h1,
|
|
199
|
+
h2,
|
|
200
|
+
h3,
|
|
201
|
+
h4,
|
|
202
|
+
h5,
|
|
203
|
+
h6 {
|
|
204
|
+
position: relative;
|
|
205
|
+
|
|
206
|
+
[data-is-anchor] {
|
|
207
|
+
position: absolute;
|
|
208
|
+
right: 100%;
|
|
209
|
+
top: 50%;
|
|
210
|
+
transform: translateY(-50%);
|
|
211
|
+
padding-right: 0.2ch;
|
|
212
|
+
color: silver;
|
|
213
|
+
text-decoration: none;
|
|
214
|
+
visibility: hidden;
|
|
215
|
+
}
|
|
216
|
+
/* Avoid double-tap on touch devices */
|
|
217
|
+
@media (hover: hover) {
|
|
218
|
+
&:hover {
|
|
219
|
+
[data-is-anchor] {
|
|
220
|
+
visibility: visible;
|
|
221
|
+
}
|
|
222
|
+
}
|
|
223
|
+
}
|
|
224
|
+
}
|
|
225
|
+
|
|
226
|
+
/*```
|
|
227
|
+
> **PRO-TIP** for 11ty + markdown-it-anchor: https://github.com/anydigital/eleventy-blades/blob/main/src/eleventy.config.js
|
|
228
|
+
|
|
229
|
+
### List markers
|
|
230
|
+
|
|
231
|
+
Use inline `style="--list-marker:'🥷 '"` on `<ul>/<ol>` or even individual `<li>` to customize list markers:
|
|
232
|
+
<article>
|
|
233
|
+
|
|
234
|
+
- Customize
|
|
235
|
+
- list
|
|
236
|
+
- markers
|
|
237
|
+
- with [Blades CSS](https://blades.ninja/css/) {style="--list-marker:'🥷 '"}
|
|
238
|
+
|
|
239
|
+
{style="--list-marker:'🧊 '"}
|
|
240
|
+
</article>
|
|
241
|
+
|
|
242
|
+
How it works:
|
|
243
|
+
```css */
|
|
244
|
+
|
|
245
|
+
ul,
|
|
246
|
+
ol {
|
|
247
|
+
&[style*="--list-marker:"] {
|
|
248
|
+
list-style-type: var(--list-marker);
|
|
249
|
+
|
|
250
|
+
> li {
|
|
251
|
+
list-style-type: inherit;
|
|
252
|
+
}
|
|
253
|
+
}
|
|
254
|
+
|
|
255
|
+
li[style*="--list-marker:"] {
|
|
256
|
+
list-style-type: var(--list-marker);
|
|
257
|
+
}
|
|
258
|
+
li[data-marker]::marker {
|
|
259
|
+
/* ⚠️ `data-marker` works only in Chrome and Firefox */
|
|
260
|
+
content: attr(data-marker) " ";
|
|
261
|
+
}
|
|
262
|
+
}
|
|
263
|
+
|
|
264
|
+
/*```
|
|
265
|
+
|
|
266
|
+
### Unlist
|
|
267
|
+
|
|
268
|
+
Helper class to remove list styling at all:
|
|
269
|
+
```css */
|
|
270
|
+
|
|
271
|
+
.unlist {
|
|
272
|
+
padding-inline-start: 0;
|
|
273
|
+
|
|
274
|
+
> li {
|
|
275
|
+
list-style: none;
|
|
276
|
+
}
|
|
277
|
+
}
|
|
278
|
+
|
|
279
|
+
/*```
|
|
280
|
+
<!--section--> */
|
|
281
|
+
|
|
282
|
+
/* Extends https://github.com/picocss/pico/blob/main/scss/content/_link.scss
|
|
283
|
+
<!--section:code-->
|
|
284
|
+
```css */
|
|
285
|
+
|
|
286
|
+
a {
|
|
287
|
+
/* Use inline flex only if link contains an icon */
|
|
288
|
+
&:has(> i) {
|
|
289
|
+
display: inline-flex;
|
|
290
|
+
gap: 0.375ch; /* =3/8 */
|
|
291
|
+
text-wrap: balance;
|
|
292
|
+
overflow-y: clip; /* to work in pair with text-underline-offset in Safari */
|
|
293
|
+
}
|
|
294
|
+
> i {
|
|
295
|
+
font-style: normal;
|
|
296
|
+
float: left; /* ✅ Chrome ❌ Safari */
|
|
297
|
+
text-underline-offset: -2em; /* ❌ Chrome ✅ Safari - to clip it with overflow-y */
|
|
298
|
+
|
|
299
|
+
/* Favicons */
|
|
300
|
+
> img {
|
|
301
|
+
height: 1.25em;
|
|
302
|
+
margin-block: calc(-0.25em / 2);
|
|
303
|
+
display: inline-block; /* for Tailwind CSS Typography */
|
|
304
|
+
}
|
|
305
|
+
|
|
306
|
+
/* Font Awesome */
|
|
307
|
+
&[class^="fa-"],
|
|
308
|
+
&[class*=" fa-"] {
|
|
309
|
+
line-height: inherit;
|
|
310
|
+
--fa-width: auto;
|
|
311
|
+
}
|
|
312
|
+
&.fa-lg {
|
|
313
|
+
line-height: normal;
|
|
314
|
+
}
|
|
315
|
+
}
|
|
316
|
+
}
|
|
317
|
+
|
|
318
|
+
/*```
|
|
319
|
+
> **PRO-TIP** for 11ty: https://blades.ninja/build-awesome-11ty/processors/#auto-link-favicons
|
|
320
|
+
|
|
321
|
+
<!--section:docs,summary-->
|
|
322
|
+
|
|
323
|
+
Use Blades' `<i>`-helper to wrap emojis, favicons, or simply drop Font Awesome icons inside links. It automatically handles sizing and alignment while preventing underline on icons.
|
|
324
|
+
|
|
325
|
+
<!--section:docs-->
|
|
326
|
+
|
|
327
|
+
Compare:
|
|
328
|
+
|
|
329
|
+
| Without Blades <hr class="lg"> | With Blades' `<i>`-helper <hr class="lg"> | Clean HTML without `<span>ning` <hr class="x2"> |
|
|
330
|
+
| ------------------------------------------------------------------------------------------------------- | -------------------------------------------------------------------------------------------------------------- | ----------------------------------------------- |
|
|
331
|
+
| [🥷 Link with emoji](#) | [<i>🥷</i> Link with emoji](#) | `<a><i>🥷</i> Text</a>` |
|
|
332
|
+
| [ Multi-line link <br> with favicon](#) | [<i></i> Multi-line link <br> with favicon](#) | `<a><i><img src="..."></i> Text</a>` |
|
|
333
|
+
| [<b class="fa-brands fa-github fa-lg"></b> Link with Font Awesome icon](#) | [<i class="fa-brands fa-github fa-lg"></i> Link with Font Awesome icon](#) | `<a><i class="fa-..."></i> Text</a>` |
|
|
334
|
+
|
|
335
|
+
---
|
|
336
|
+
|
|
337
|
+
[How we made it ↗ <small>(on Codepen)</small>](https://codepen.io/editor/anydigital/pen/019d2b94-5616-75dc-a23e-e111869d5237){role=button .outline}
|
|
338
|
+
|
|
339
|
+
<!--section--> */
|
|
340
|
+
|
|
341
|
+
/* Extends https://github.com/picocss/pico/blob/main/scss/content/_table.scss
|
|
342
|
+
<!--section:docs-->
|
|
343
|
+
|
|
344
|
+
### Horizontal expanders
|
|
345
|
+
|
|
346
|
+
Simply insert `<hr>` inside `<th>` to forcibly widen too narrow columns (especially useful in markdown):
|
|
347
|
+
```html
|
|
348
|
+
<th>Col <hr></th>
|
|
349
|
+
```
|
|
350
|
+
Example table before:
|
|
351
|
+
<article class="overflow-auto"><table>
|
|
352
|
+
<tr><th>Wide tables</th><th>with many</th><th>columns might</th><th>get collapsed</th><th>and be really</th><th>hard to read!</th></tr>
|
|
353
|
+
</table></article>
|
|
354
|
+
|
|
355
|
+
Same table after adding `<hr>`-expanders:
|
|
356
|
+
<article class="overflow-auto"><table>
|
|
357
|
+
<tr><th>Wide tables <hr></th><th>with many <hr></th><th>columns might <hr></th><th>get collapsed <hr></th><th>and be really <hr></th><th>hard to read! <hr></th></tr>
|
|
358
|
+
</table></article>
|
|
359
|
+
|
|
360
|
+
Living examples of big tables with `<hr>`-expanders:
|
|
361
|
+
- https://any.digital/insights/ai-ide/
|
|
362
|
+
- https://any.digital/insights/css-frameworks/
|
|
363
|
+
- https://any.digital/insights/ssg/
|
|
364
|
+
- https://blades.ninja/build-awesome-11ty/#min-starters
|
|
365
|
+
|
|
366
|
+
How it works:
|
|
367
|
+
```css */
|
|
368
|
+
|
|
369
|
+
table {
|
|
370
|
+
th {
|
|
371
|
+
hr {
|
|
372
|
+
width: 12ch; /* min ~65/12 = ~5 cols */
|
|
373
|
+
height: 0;
|
|
374
|
+
margin: 0;
|
|
375
|
+
visibility: hidden;
|
|
376
|
+
|
|
377
|
+
&.lg {
|
|
378
|
+
width: 18ch;
|
|
379
|
+
}
|
|
380
|
+
&.x2 {
|
|
381
|
+
width: 24ch;
|
|
382
|
+
}
|
|
383
|
+
}
|
|
384
|
+
}
|
|
385
|
+
}
|
|
386
|
+
|
|
387
|
+
/*```
|
|
388
|
+
### Borderless table
|
|
389
|
+
|
|
390
|
+
`<table class="borderless">` removes all default borders:
|
|
391
|
+
|
|
392
|
+
<article>
|
|
393
|
+
|
|
394
|
+
| Less | borders |
|
|
395
|
+
| ---- | ------- |
|
|
396
|
+
| more | fun |
|
|
397
|
+
|
|
398
|
+
{.borderless}
|
|
399
|
+
</article>
|
|
400
|
+
|
|
401
|
+
Living example: https://bladeswitch.com/#minimal-dependencies table
|
|
402
|
+
|
|
403
|
+
<!--section--> */
|
|
404
|
+
|
|
405
|
+
table.borderless {
|
|
406
|
+
th,
|
|
407
|
+
td {
|
|
408
|
+
border: none;
|
|
409
|
+
}
|
|
410
|
+
}
|
|
411
|
+
|
|
412
|
+
/* <!--section:code-->
|
|
413
|
+
```css */
|
|
414
|
+
|
|
415
|
+
table.responsive,
|
|
416
|
+
.breakout > table:not(.does-not-exist),
|
|
417
|
+
.breakout-all > table:not(.does-not-exist) {
|
|
418
|
+
/* Center horizontally */
|
|
419
|
+
margin-left: 50%;
|
|
420
|
+
transform: translateX(-50%);
|
|
421
|
+
|
|
422
|
+
/* Let them full-bleed */
|
|
423
|
+
width: max-content;
|
|
424
|
+
min-width: auto;
|
|
425
|
+
max-width: 100vw;
|
|
426
|
+
padding-inline: 7.5%;
|
|
427
|
+
|
|
428
|
+
/* Let them scroll */
|
|
429
|
+
display: block;
|
|
430
|
+
overflow-x: auto;
|
|
431
|
+
-webkit-overflow-scrolling: touch; /* Smooth scroll for iOS */
|
|
432
|
+
|
|
433
|
+
th,
|
|
434
|
+
td {
|
|
435
|
+
padding-inline-start: 0;
|
|
436
|
+
}
|
|
437
|
+
}
|
|
438
|
+
|
|
439
|
+
/*```
|
|
440
|
+
<!--#TODO:css-blade-->
|
|
441
|
+
Soft-increase selector specificity trick:
|
|
442
|
+
|
|
443
|
+
`table:not(.does-not-exist)` (inspired by postcss) is used here to increase specificity against selectors like `&:is(table, .table)`
|
|
444
|
+
|
|
445
|
+
<!--section:docs,summary-->
|
|
446
|
+
|
|
447
|
+
`<table class="responsive">` allows a table to full-bleed and scroll on mobile.
|
|
448
|
+
|
|
449
|
+
<!--section:docs-->
|
|
450
|
+
|
|
451
|
+
| Term | Description <hr class="x2"> | Link |
|
|
452
|
+
| ----------------- | -------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | --------------------------------------------------- |
|
|
453
|
+
| Responsive design | Approach to web design that aims to make web pages render well on a variety of devices and window or screen sizes from minimum to maximum display size to ensure usability and satisfaction. | https://en.wikipedia.org/wiki/Responsive_web_design |
|
|
454
|
+
|
|
455
|
+
{.responsive}
|
|
456
|
+
|
|
457
|
+
---
|
|
458
|
+
|
|
459
|
+
Tables inside https://blades.ninja/css/breakout/ are responsive by default.
|
|
460
|
+
|
|
461
|
+
Living examples:
|
|
462
|
+
|
|
463
|
+
- https://any.digital/insights/ai-ide/
|
|
464
|
+
- https://any.digital/insights/css-frameworks/
|
|
465
|
+
- https://any.digital/insights/ssg/
|
|
466
|
+
- https://blades.ninja/build-awesome-11ty/#min-starters
|
|
467
|
+
|
|
468
|
+
<!--section--> */
|
|
469
|
+
|
|
470
|
+
/* <!--section:docs-->
|
|
471
|
+
### Code
|
|
472
|
+
Extends https://github.com/picocss/pico/blob/main/scss/content/_code.scss
|
|
473
|
+
```css */
|
|
474
|
+
|
|
475
|
+
pre {
|
|
476
|
+
padding: 1rem 1.5rem;
|
|
477
|
+
padding-inline-end: 2rem;
|
|
478
|
+
|
|
479
|
+
@media screen and (max-width: 767px) {
|
|
480
|
+
border-radius: 0;
|
|
481
|
+
}
|
|
482
|
+
}
|
|
483
|
+
|
|
484
|
+
code {
|
|
485
|
+
/* Code block caption via data-attr (to display filename, etc.) */
|
|
486
|
+
&[data-caption] {
|
|
487
|
+
&::before {
|
|
488
|
+
content: attr(data-caption);
|
|
489
|
+
display: block;
|
|
490
|
+
margin-bottom: 1rem;
|
|
491
|
+
opacity: 50%;
|
|
492
|
+
font-style: italic;
|
|
493
|
+
}
|
|
494
|
+
}
|
|
495
|
+
|
|
496
|
+
&:where(pre > *) {
|
|
497
|
+
padding: 0;
|
|
498
|
+
}
|
|
499
|
+
}
|
|
500
|
+
|
|
501
|
+
/*** Extends https://github.com/PrismJS/prism/blob/master/plugins/treeview/prism-treeview.css ***/
|
|
502
|
+
|
|
503
|
+
.token.treeview-part {
|
|
504
|
+
.entry-line {
|
|
505
|
+
width: 2.5em !important;
|
|
506
|
+
opacity: 25%;
|
|
507
|
+
}
|
|
508
|
+
.entry-name:last-child {
|
|
509
|
+
opacity: 50%;
|
|
510
|
+
|
|
511
|
+
&::before {
|
|
512
|
+
display: none !important;
|
|
513
|
+
}
|
|
514
|
+
}
|
|
515
|
+
}
|
|
516
|
+
|
|
517
|
+
/*``` <!--section--> */
|
|
518
|
+
|
|
519
|
+
/* Forms */
|
|
520
|
+
|
|
521
|
+
/* Moved here from https://github.com/anydigital/float-label-css for easier maintenance
|
|
522
|
+
<!--section:code-->
|
|
523
|
+
```css */
|
|
524
|
+
|
|
525
|
+
label:has(input:not([type="checkbox"], [type="radio"], [type="range"]), textarea, select),
|
|
526
|
+
.has-float-label {
|
|
527
|
+
display: block;
|
|
528
|
+
position: relative;
|
|
529
|
+
|
|
530
|
+
/* Default/fallback state when float label is minimized */
|
|
531
|
+
> span,
|
|
532
|
+
label {
|
|
533
|
+
position: absolute;
|
|
534
|
+
left: 0;
|
|
535
|
+
top: 0;
|
|
536
|
+
cursor: text;
|
|
537
|
+
font-size: 75%;
|
|
538
|
+
}
|
|
539
|
+
|
|
540
|
+
/* Modern browser ? enlarge float label instead of placeholder : otherwise, code below is ignored in favor of default state above */
|
|
541
|
+
*:placeholder-shown:not(:focus)::placeholder {
|
|
542
|
+
opacity: 0;
|
|
543
|
+
}
|
|
544
|
+
&:has(*:placeholder-shown:not(:focus)) {
|
|
545
|
+
> span,
|
|
546
|
+
label {
|
|
547
|
+
font-size: inherit;
|
|
548
|
+
opacity: 50%;
|
|
549
|
+
}
|
|
550
|
+
}
|
|
551
|
+
}
|
|
552
|
+
|
|
553
|
+
/*```
|
|
554
|
+
<!--section--> */
|
|
555
|
+
|
|
556
|
+
/* Utilities */
|
|
557
|
+
|
|
558
|
+
/*
|
|
559
|
+
<!--section:docs-->
|
|
560
|
+
|
|
561
|
+
### Auto-dark
|
|
562
|
+
```css */
|
|
563
|
+
|
|
564
|
+
@media (prefers-color-scheme: dark) {
|
|
565
|
+
:root:not([data-theme="light"]) {
|
|
566
|
+
.dark-auto {
|
|
567
|
+
filter: invert(100%) hue-rotate(180deg);
|
|
568
|
+
}
|
|
569
|
+
}
|
|
570
|
+
}
|
|
571
|
+
|
|
572
|
+
/*```
|
|
573
|
+
|
|
574
|
+
### Faded
|
|
575
|
+
```css */
|
|
576
|
+
|
|
577
|
+
.faded {
|
|
578
|
+
opacity: 50%;
|
|
579
|
+
&:hover {
|
|
580
|
+
opacity: 87.5%;
|
|
581
|
+
}
|
|
582
|
+
}
|
|
583
|
+
|
|
584
|
+
/*```
|
|
585
|
+
|
|
586
|
+
### Invert
|
|
587
|
+
```css */
|
|
588
|
+
|
|
589
|
+
/* Extends https://tailwindcss.com/docs/filter-invert */
|
|
590
|
+
|
|
591
|
+
.invert {
|
|
592
|
+
/* Fix the scrollbar color when inverted */
|
|
593
|
+
::-webkit-scrollbar {
|
|
594
|
+
filter: invert(1) !important;
|
|
595
|
+
}
|
|
596
|
+
}
|
|
597
|
+
|
|
598
|
+
/*``` <!--section--> */
|
package/assets/blades.css
CHANGED
|
@@ -516,6 +516,43 @@ code {
|
|
|
516
516
|
|
|
517
517
|
/*``` <!--section--> */
|
|
518
518
|
|
|
519
|
+
/* Forms */
|
|
520
|
+
|
|
521
|
+
/* Moved here from https://github.com/anydigital/float-label-css for easier maintenance
|
|
522
|
+
<!--section:code-->
|
|
523
|
+
```css */
|
|
524
|
+
|
|
525
|
+
label:has(input:not([type="checkbox"], [type="radio"], [type="range"]), textarea, select),
|
|
526
|
+
.has-float-label {
|
|
527
|
+
display: block;
|
|
528
|
+
position: relative;
|
|
529
|
+
|
|
530
|
+
/* Default/fallback state when float label is minimized */
|
|
531
|
+
> span,
|
|
532
|
+
label {
|
|
533
|
+
position: absolute;
|
|
534
|
+
left: 0;
|
|
535
|
+
top: 0;
|
|
536
|
+
cursor: text;
|
|
537
|
+
font-size: 75%;
|
|
538
|
+
}
|
|
539
|
+
|
|
540
|
+
/* Modern browser ? enlarge float label instead of placeholder : otherwise, code below is ignored in favor of default state above */
|
|
541
|
+
*:placeholder-shown:not(:focus)::placeholder {
|
|
542
|
+
opacity: 0;
|
|
543
|
+
}
|
|
544
|
+
&:has(*:placeholder-shown:not(:focus)) {
|
|
545
|
+
> span,
|
|
546
|
+
label {
|
|
547
|
+
font-size: inherit;
|
|
548
|
+
opacity: 50%;
|
|
549
|
+
}
|
|
550
|
+
}
|
|
551
|
+
}
|
|
552
|
+
|
|
553
|
+
/*```
|
|
554
|
+
<!--section--> */
|
|
555
|
+
|
|
519
556
|
/* Utilities */
|
|
520
557
|
|
|
521
558
|
/*
|
|
@@ -559,3 +596,147 @@ code {
|
|
|
559
596
|
}
|
|
560
597
|
|
|
561
598
|
/*``` <!--section--> */
|
|
599
|
+
|
|
600
|
+
/* <!--section:code-->
|
|
601
|
+
```css */
|
|
602
|
+
|
|
603
|
+
label:has(input:not([type="checkbox"], [type="radio"], [type="range"]), textarea, select),
|
|
604
|
+
.has-float-label {
|
|
605
|
+
/* Default/fallback state */
|
|
606
|
+
> span,
|
|
607
|
+
label {
|
|
608
|
+
padding-inline-start: calc(1rem + 1px); /* match Pico's padding + border */
|
|
609
|
+
padding-block-start: 0.25rem;
|
|
610
|
+
opacity: 75%;
|
|
611
|
+
transition: all 0.25s;
|
|
612
|
+
}
|
|
613
|
+
input,
|
|
614
|
+
textarea,
|
|
615
|
+
select {
|
|
616
|
+
margin-block-start: 0; /* reset Pico */
|
|
617
|
+
padding-inline-start: 1rem; /* match Pico */
|
|
618
|
+
padding-block: 1.125rem 0.375rem; /* match Pico's total: 2 x 0.75rem = 1.5rem */
|
|
619
|
+
|
|
620
|
+
&::placeholder {
|
|
621
|
+
opacity: 100%;
|
|
622
|
+
transition: all 0.25s;
|
|
623
|
+
}
|
|
624
|
+
}
|
|
625
|
+
|
|
626
|
+
/* Enlarged state */
|
|
627
|
+
&:has(*:placeholder-shown:not(:focus)) {
|
|
628
|
+
> span,
|
|
629
|
+
label {
|
|
630
|
+
padding-block: 0.75rem; /* match Pico */
|
|
631
|
+
}
|
|
632
|
+
}
|
|
633
|
+
}
|
|
634
|
+
|
|
635
|
+
body {
|
|
636
|
+
/* Make the `body` a flex container with column layout, and `main` to automatically fill available space. This is useful for creating sticky footers and full-height layouts. */
|
|
637
|
+
display: flex;
|
|
638
|
+
flex-direction: column;
|
|
639
|
+
> main {
|
|
640
|
+
flex-grow: 1;
|
|
641
|
+
}
|
|
642
|
+
}
|
|
643
|
+
|
|
644
|
+
a {
|
|
645
|
+
&:not([href^="#"]) {
|
|
646
|
+
text-decoration-thickness: 1px;
|
|
647
|
+
&:hover {
|
|
648
|
+
text-decoration-thickness: 2px;
|
|
649
|
+
}
|
|
650
|
+
}
|
|
651
|
+
}
|
|
652
|
+
|
|
653
|
+
h1 {
|
|
654
|
+
font-size: 2.5em; /* for pico.css & tw-typography */
|
|
655
|
+
margin-bottom: 1rem; /* for tw-typography */
|
|
656
|
+
}
|
|
657
|
+
|
|
658
|
+
/* Potential fix https://github.com/picocss/pico/blob/main/css/pico.css for the very first headings
|
|
659
|
+
:where(article, address, blockquote, dl, figure, form, ol, p, pre, table, ul) ~ :is(h1, h2, h3, h4, h5, h6) {
|
|
660
|
+
margin-top: var(--pico-typography-spacing-top);
|
|
661
|
+
}
|
|
662
|
+
h1,
|
|
663
|
+
h2,
|
|
664
|
+
h3,
|
|
665
|
+
h4,
|
|
666
|
+
h5,
|
|
667
|
+
h6 {
|
|
668
|
+
& ~ & {
|
|
669
|
+
margin-bottom: 2rem;
|
|
670
|
+
}
|
|
671
|
+
}
|
|
672
|
+
NOTE: be careful with wrapped headings, i.e. inside nav: https://blades.ninja/build-awesome-11ty/#usage
|
|
673
|
+
*/
|
|
674
|
+
|
|
675
|
+
hr {
|
|
676
|
+
margin-block: 2em; /* for pico.css & tw-typography */
|
|
677
|
+
}
|
|
678
|
+
|
|
679
|
+
ul {
|
|
680
|
+
ul {
|
|
681
|
+
font-size: 87.5%;
|
|
682
|
+
}
|
|
683
|
+
}
|
|
684
|
+
|
|
685
|
+
pre {
|
|
686
|
+
small {
|
|
687
|
+
opacity: 75%;
|
|
688
|
+
font-weight: lighter;
|
|
689
|
+
}
|
|
690
|
+
}
|
|
691
|
+
|
|
692
|
+
table {
|
|
693
|
+
th {
|
|
694
|
+
vertical-align: bottom;
|
|
695
|
+
font-weight: bold;
|
|
696
|
+
}
|
|
697
|
+
td {
|
|
698
|
+
vertical-align: top;
|
|
699
|
+
}
|
|
700
|
+
pre {
|
|
701
|
+
margin-bottom: 0.25rem;
|
|
702
|
+
}
|
|
703
|
+
}
|
|
704
|
+
|
|
705
|
+
[data-jump-to="top"] {
|
|
706
|
+
> i {
|
|
707
|
+
display: inline-block;
|
|
708
|
+
padding: 0.25rem 0.375rem;
|
|
709
|
+
margin: 0.5rem;
|
|
710
|
+
font-size: 0.75rem;
|
|
711
|
+
color: black;
|
|
712
|
+
border-color: black;
|
|
713
|
+
}
|
|
714
|
+
}
|
|
715
|
+
|
|
716
|
+
[data-is-toc] {
|
|
717
|
+
font-size: 87.5%;
|
|
718
|
+
|
|
719
|
+
a {
|
|
720
|
+
text-decoration: none;
|
|
721
|
+
}
|
|
722
|
+
> ul > * > a {
|
|
723
|
+
font-weight: 500;
|
|
724
|
+
}
|
|
725
|
+
}
|
|
726
|
+
|
|
727
|
+
.breakout,
|
|
728
|
+
.breakout-all {
|
|
729
|
+
> img,
|
|
730
|
+
> figure {
|
|
731
|
+
margin-bottom: 1rem;
|
|
732
|
+
}
|
|
733
|
+
}
|
|
734
|
+
|
|
735
|
+
.faded {
|
|
736
|
+
a {
|
|
737
|
+
text-decoration-style: dotted;
|
|
738
|
+
}
|
|
739
|
+
}
|
|
740
|
+
|
|
741
|
+
/*```
|
|
742
|
+
<!--section--> */
|
package/assets/blades.theme.css
CHANGED
|
@@ -1,5 +1,36 @@
|
|
|
1
1
|
/* <!--section:code-->
|
|
2
2
|
```css */
|
|
3
|
+
label:has(input:not([type="checkbox"], [type="radio"], [type="range"]), textarea, select),
|
|
4
|
+
.has-float-label {
|
|
5
|
+
/* Default/fallback state */
|
|
6
|
+
> span,
|
|
7
|
+
label {
|
|
8
|
+
padding-inline-start: calc(1rem + 1px); /* match Pico's padding + border */
|
|
9
|
+
padding-block-start: 0.25rem;
|
|
10
|
+
opacity: 75%;
|
|
11
|
+
transition: all 0.25s;
|
|
12
|
+
}
|
|
13
|
+
input,
|
|
14
|
+
textarea,
|
|
15
|
+
select {
|
|
16
|
+
margin-block-start: 0; /* reset Pico */
|
|
17
|
+
padding-inline-start: 1rem; /* match Pico */
|
|
18
|
+
padding-block: 1.125rem 0.375rem; /* match Pico's total: 2 x 0.75rem = 1.5rem */
|
|
19
|
+
|
|
20
|
+
&::placeholder {
|
|
21
|
+
opacity: 100%;
|
|
22
|
+
transition: all 0.25s;
|
|
23
|
+
}
|
|
24
|
+
}
|
|
25
|
+
|
|
26
|
+
/* Enlarged state */
|
|
27
|
+
&:has(*:placeholder-shown:not(:focus)) {
|
|
28
|
+
> span,
|
|
29
|
+
label {
|
|
30
|
+
padding-block: 0.75rem; /* match Pico */
|
|
31
|
+
}
|
|
32
|
+
}
|
|
33
|
+
}
|
|
3
34
|
body {
|
|
4
35
|
/* Make the `body` a flex container with column layout, and `main` to automatically fill available space. This is useful for creating sticky footers and full-height layouts. */
|
|
5
36
|
display: flex;
|
|
@@ -0,0 +1,32 @@
|
|
|
1
|
+
/* Moved here from https://github.com/anydigital/float-label-css for easier maintenance
|
|
2
|
+
<!--section:code-->
|
|
3
|
+
```css */
|
|
4
|
+
label:has(input:not([type="checkbox"], [type="radio"], [type="range"]), textarea, select),
|
|
5
|
+
.has-float-label {
|
|
6
|
+
display: block;
|
|
7
|
+
position: relative;
|
|
8
|
+
|
|
9
|
+
/* Default/fallback state when float label is minimized */
|
|
10
|
+
> span,
|
|
11
|
+
label {
|
|
12
|
+
position: absolute;
|
|
13
|
+
left: 0;
|
|
14
|
+
top: 0;
|
|
15
|
+
cursor: text;
|
|
16
|
+
font-size: 75%;
|
|
17
|
+
}
|
|
18
|
+
|
|
19
|
+
/* Modern browser ? enlarge float label instead of placeholder : otherwise, code below is ignored in favor of default state above */
|
|
20
|
+
*:placeholder-shown:not(:focus)::placeholder {
|
|
21
|
+
opacity: 0;
|
|
22
|
+
}
|
|
23
|
+
&:has(*:placeholder-shown:not(:focus)) {
|
|
24
|
+
> span,
|
|
25
|
+
label {
|
|
26
|
+
font-size: inherit;
|
|
27
|
+
opacity: 50%;
|
|
28
|
+
}
|
|
29
|
+
}
|
|
30
|
+
}
|
|
31
|
+
/*```
|
|
32
|
+
<!--section--> */
|
|
@@ -0,0 +1,63 @@
|
|
|
1
|
+
/* Moved here from https://github.com/anydigital/float-label-css for easier maintenance
|
|
2
|
+
<!--section:code-->
|
|
3
|
+
```css */
|
|
4
|
+
label:has(input:not([type="checkbox"], [type="radio"], [type="range"]), textarea, select),
|
|
5
|
+
.has-float-label {
|
|
6
|
+
display: block;
|
|
7
|
+
position: relative;
|
|
8
|
+
|
|
9
|
+
/* Default/fallback state when float label is minimized */
|
|
10
|
+
> span,
|
|
11
|
+
label {
|
|
12
|
+
position: absolute;
|
|
13
|
+
left: 0;
|
|
14
|
+
top: 0;
|
|
15
|
+
cursor: text;
|
|
16
|
+
font-size: 75%;
|
|
17
|
+
}
|
|
18
|
+
|
|
19
|
+
/* Modern browser ? enlarge float label instead of placeholder : otherwise, code below is ignored in favor of default state above */
|
|
20
|
+
*:placeholder-shown:not(:focus)::placeholder {
|
|
21
|
+
opacity: 0;
|
|
22
|
+
}
|
|
23
|
+
&:has(*:placeholder-shown:not(:focus)) {
|
|
24
|
+
> span,
|
|
25
|
+
label {
|
|
26
|
+
font-size: inherit;
|
|
27
|
+
opacity: 50%;
|
|
28
|
+
}
|
|
29
|
+
}
|
|
30
|
+
}
|
|
31
|
+
/*```
|
|
32
|
+
<!--section--> */
|
|
33
|
+
label:has(input:not([type="checkbox"], [type="radio"], [type="range"]), textarea, select),
|
|
34
|
+
.has-float-label {
|
|
35
|
+
/* Default/fallback state */
|
|
36
|
+
> span,
|
|
37
|
+
label {
|
|
38
|
+
padding-inline-start: calc(1rem + 1px); /* match Pico's padding + border */
|
|
39
|
+
padding-block-start: 0.25rem;
|
|
40
|
+
opacity: 75%;
|
|
41
|
+
transition: all 0.25s;
|
|
42
|
+
}
|
|
43
|
+
input,
|
|
44
|
+
textarea,
|
|
45
|
+
select {
|
|
46
|
+
margin-block-start: 0; /* reset Pico */
|
|
47
|
+
padding-inline-start: 1rem; /* match Pico */
|
|
48
|
+
padding-block: 1.125rem 0.375rem; /* match Pico's total: 2 x 0.75rem = 1.5rem */
|
|
49
|
+
|
|
50
|
+
&::placeholder {
|
|
51
|
+
opacity: 100%;
|
|
52
|
+
transition: all 0.25s;
|
|
53
|
+
}
|
|
54
|
+
}
|
|
55
|
+
|
|
56
|
+
/* Enlarged state */
|
|
57
|
+
&:has(*:placeholder-shown:not(:focus)) {
|
|
58
|
+
> span,
|
|
59
|
+
label {
|
|
60
|
+
padding-block: 0.75rem; /* match Pico */
|
|
61
|
+
}
|
|
62
|
+
}
|
|
63
|
+
}
|
|
@@ -0,0 +1,31 @@
|
|
|
1
|
+
label:has(input:not([type="checkbox"], [type="radio"], [type="range"]), textarea, select),
|
|
2
|
+
.has-float-label {
|
|
3
|
+
/* Default/fallback state */
|
|
4
|
+
> span,
|
|
5
|
+
label {
|
|
6
|
+
padding-inline-start: calc(1rem + 1px); /* match Pico's padding + border */
|
|
7
|
+
padding-block-start: 0.25rem;
|
|
8
|
+
opacity: 75%;
|
|
9
|
+
transition: all 0.25s;
|
|
10
|
+
}
|
|
11
|
+
input,
|
|
12
|
+
textarea,
|
|
13
|
+
select {
|
|
14
|
+
margin-block-start: 0; /* reset Pico */
|
|
15
|
+
padding-inline-start: 1rem; /* match Pico */
|
|
16
|
+
padding-block: 1.125rem 0.375rem; /* match Pico's total: 2 x 0.75rem = 1.5rem */
|
|
17
|
+
|
|
18
|
+
&::placeholder {
|
|
19
|
+
opacity: 100%;
|
|
20
|
+
transition: all 0.25s;
|
|
21
|
+
}
|
|
22
|
+
}
|
|
23
|
+
|
|
24
|
+
/* Enlarged state */
|
|
25
|
+
&:has(*:placeholder-shown:not(:focus)) {
|
|
26
|
+
> span,
|
|
27
|
+
label {
|
|
28
|
+
padding-block: 0.75rem; /* match Pico */
|
|
29
|
+
}
|
|
30
|
+
}
|
|
31
|
+
}
|
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.
|
|
5
|
+
spec.version = "0.27.0-beta.17"
|
|
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,11 +1,13 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@anydigital/blades",
|
|
3
|
-
"version": "0.27.0-beta.
|
|
3
|
+
"version": "0.27.0-beta.17",
|
|
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": {
|
|
7
7
|
".": "./src/blades.css",
|
|
8
|
+
"./core": "./src/blades.core.css",
|
|
8
9
|
"./theme": "./src/blades.theme.css",
|
|
10
|
+
"./float-label": "./src/float-label.css",
|
|
9
11
|
"./unreduce-motion": "./src/_unreduce-motion.css"
|
|
10
12
|
},
|
|
11
13
|
"scripts": {
|
|
@@ -0,0 +1,18 @@
|
|
|
1
|
+
/*** Follows https://github.com/picocss/pico/blob/main/scss/_index.scss ***/
|
|
2
|
+
|
|
3
|
+
/* Layout */
|
|
4
|
+
@import "./_layout";
|
|
5
|
+
@import "./breakout";
|
|
6
|
+
|
|
7
|
+
/* Content */
|
|
8
|
+
@import "./_typography";
|
|
9
|
+
@import "./link-icon";
|
|
10
|
+
@import "./_table";
|
|
11
|
+
@import "./responsive-table";
|
|
12
|
+
@import "./_code";
|
|
13
|
+
|
|
14
|
+
/* Forms */
|
|
15
|
+
@import "./float-label.core";
|
|
16
|
+
|
|
17
|
+
/* Utilities */
|
|
18
|
+
@import "./_utilities";
|
package/src/blades.css
CHANGED
|
@@ -1,15 +1,2 @@
|
|
|
1
|
-
|
|
2
|
-
|
|
3
|
-
/* Layout */
|
|
4
|
-
@import "./_layout";
|
|
5
|
-
@import "./breakout";
|
|
6
|
-
|
|
7
|
-
/* Content */
|
|
8
|
-
@import "./_typography";
|
|
9
|
-
@import "./link-icon";
|
|
10
|
-
@import "./_table";
|
|
11
|
-
@import "./responsive-table";
|
|
12
|
-
@import "./_code";
|
|
13
|
-
|
|
14
|
-
/* Utilities */
|
|
15
|
-
@import "./_utilities";
|
|
1
|
+
@import "./blades.core";
|
|
2
|
+
@import "./blades.theme";
|
package/src/blades.theme.css
CHANGED
|
@@ -1,5 +1,7 @@
|
|
|
1
1
|
/* <!--section:code-->
|
|
2
2
|
```css */
|
|
3
|
+
@import "./float-label.theme";
|
|
4
|
+
|
|
3
5
|
body {
|
|
4
6
|
/* Make the `body` a flex container with column layout, and `main` to automatically fill available space. This is useful for creating sticky footers and full-height layouts. */
|
|
5
7
|
display: flex;
|
|
@@ -0,0 +1,32 @@
|
|
|
1
|
+
/* Moved here from https://github.com/anydigital/float-label-css for easier maintenance
|
|
2
|
+
<!--section:code-->
|
|
3
|
+
```css */
|
|
4
|
+
label:has(input:not([type="checkbox"], [type="radio"], [type="range"]), textarea, select),
|
|
5
|
+
.has-float-label {
|
|
6
|
+
display: block;
|
|
7
|
+
position: relative;
|
|
8
|
+
|
|
9
|
+
/* Default/fallback state when float label is minimized */
|
|
10
|
+
> span,
|
|
11
|
+
label {
|
|
12
|
+
position: absolute;
|
|
13
|
+
left: 0;
|
|
14
|
+
top: 0;
|
|
15
|
+
cursor: text;
|
|
16
|
+
font-size: 75%;
|
|
17
|
+
}
|
|
18
|
+
|
|
19
|
+
/* Modern browser ? enlarge float label instead of placeholder : otherwise, code below is ignored in favor of default state above */
|
|
20
|
+
*:placeholder-shown:not(:focus)::placeholder {
|
|
21
|
+
opacity: 0;
|
|
22
|
+
}
|
|
23
|
+
&:has(*:placeholder-shown:not(:focus)) {
|
|
24
|
+
> span,
|
|
25
|
+
label {
|
|
26
|
+
font-size: inherit;
|
|
27
|
+
opacity: 50%;
|
|
28
|
+
}
|
|
29
|
+
}
|
|
30
|
+
}
|
|
31
|
+
/*```
|
|
32
|
+
<!--section--> */
|
|
@@ -0,0 +1,31 @@
|
|
|
1
|
+
label:has(input:not([type="checkbox"], [type="radio"], [type="range"]), textarea, select),
|
|
2
|
+
.has-float-label {
|
|
3
|
+
/* Default/fallback state */
|
|
4
|
+
> span,
|
|
5
|
+
label {
|
|
6
|
+
padding-inline-start: calc(1rem + 1px); /* match Pico's padding + border */
|
|
7
|
+
padding-block-start: 0.25rem;
|
|
8
|
+
opacity: 75%;
|
|
9
|
+
transition: all 0.25s;
|
|
10
|
+
}
|
|
11
|
+
input,
|
|
12
|
+
textarea,
|
|
13
|
+
select {
|
|
14
|
+
margin-block-start: 0; /* reset Pico */
|
|
15
|
+
padding-inline-start: 1rem; /* match Pico */
|
|
16
|
+
padding-block: 1.125rem 0.375rem; /* match Pico's total: 2 x 0.75rem = 1.5rem */
|
|
17
|
+
|
|
18
|
+
&::placeholder {
|
|
19
|
+
opacity: 100%;
|
|
20
|
+
transition: all 0.25s;
|
|
21
|
+
}
|
|
22
|
+
}
|
|
23
|
+
|
|
24
|
+
/* Enlarged state */
|
|
25
|
+
&:has(*:placeholder-shown:not(:focus)) {
|
|
26
|
+
> span,
|
|
27
|
+
label {
|
|
28
|
+
padding-block: 0.75rem; /* match Pico */
|
|
29
|
+
}
|
|
30
|
+
}
|
|
31
|
+
}
|