@anyblades/blades 2.4.9 → 3.0.0-alpha.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.
- package/.github/ISSUE_TEMPLATE/bug_report.md +25 -0
- package/.github/ISSUE_TEMPLATE/config.yml +8 -0
- package/.prettierrc.json +6 -0
- package/README.md +112 -149
- package/context7.json +4 -0
- package/css/blades.css +436 -153
- package/css/blades.min.css +145 -0
- package/css/blades.standalone.css +197 -222
- package/css/blades.standalone.min.css +37 -0
- package/css/{blades.ninja.css → ninja.css} +7 -2
- package/css/ninja.min.css +5 -0
- package/css/pico.conditional.css +3189 -0
- package/css/pico.conditional.min.css +107 -0
- package/css/pico.css +3186 -0
- package/css/pico.min.css +105 -0
- package/css/postcss.config.js +23 -0
- package/index.html +63 -0
- package/package.json +27 -11
- package/src/blades.css +4 -3
- package/src/blades.standalone.css +2 -2
- package/src/{blades.ninja.css → ninja.css} +7 -2
- package/src/pico/_components.css +974 -0
- package/src/pico/_content.css +608 -0
- package/src/pico/_forms.css +747 -0
- package/src/pico/_index.css +12 -0
- package/src/pico/_layout.css +128 -0
- package/src/pico/_utilities.css +53 -0
- package/src/pico/_variables.css +671 -0
- package/src/pico.css +1 -0
- package/src/standalone/_core.css +32 -0
- package/src/{blades.standalone.theme.css → standalone/_theme.css} +2 -2
- package/src/{_utilities.css → standalone/_utilities.css} +1 -1
- package/src/standalone/_variables.css +20 -0
- package/src/{link-icon.css → standalone/components/_icon-helper.css} +0 -2
- package/src/{components → standalone/components}/_timeline.css +1 -1
- package/src/{content → standalone/content}/_code.css +6 -5
- package/src/{content/_typography.css → standalone/content/_list.css} +4 -42
- package/src/standalone/content/_typography.css +38 -0
- package/src/{float-label.core.css → standalone/forms/_float-label.core.css} +12 -4
- package/src/standalone/forms/_float-label.css +2 -0
- package/src/{breakout.css → standalone/layout/_breakout.css} +3 -6
- package/src/{_layout.css → standalone/layout/_columns.css} +2 -12
- package/src/standalone/layout/_scroller.css +10 -0
- package/_config.yml +0 -5
- package/blades.gemspec +0 -16
- package/css/blades.standalone.core.css +0 -712
- package/css/blades.standalone.theme.css +0 -143
- package/css/breakout.css +0 -125
- package/css/float-label.core.css +0 -56
- package/css/float-label.css +0 -96
- package/css/float-label.theme.css +0 -39
- package/css/link-icon.css +0 -59
- package/css/responsive-table.css +0 -57
- package/src/blades.standalone.core.css +0 -23
- package/src/float-label.css +0 -3
- /package/src/{responsive-table.css → standalone/content/_table-responsive.css} +0 -0
- /package/src/{content → standalone/content}/_table.css +0 -0
- /package/src/{float-label.theme.css → standalone/forms/_float-label.theme.css} +0 -0
|
@@ -0,0 +1,37 @@
|
|
|
1
|
+
/*!
|
|
2
|
+
* Blades CSS standalone kit v3 🥷
|
|
3
|
+
* Copyright 2026 (https://blades.ninja/css/standalone/)
|
|
4
|
+
* Licensed under MIT
|
|
5
|
+
*/:host,:scope{--blades-token-primary:var(--pico-primary, dodgerblue);--in-pico:#01aaff;--blades-token-secondary:var(--pico-secondary, lightslategray);--in-pico:#969eaf;--blades-timeline-border-color:color-mix(
|
|
6
|
+
in srgb,
|
|
7
|
+
var(--blades-token-secondary) 50%,
|
|
8
|
+
transparent
|
|
9
|
+
)}.breakout,.breakout-all{max-width:calc(10% + 65ch + 10%);padding-inline:10%}@media (width < 768px){.breakout,.breakout-all{max-width:calc(1rem + 65ch + 1rem);padding-inline:1rem}}.breakout-all>:is(
|
|
10
|
+
table,pre,figure,video,iframe,canvas,img,picture,.breakout-item,.breakout-item-max
|
|
11
|
+
),.breakout>:is(
|
|
12
|
+
table,pre,figure,video,iframe,canvas,img,picture,.breakout-item,.breakout-item-max
|
|
13
|
+
){width:-moz-fit-content;width:fit-content;min-width:100%;max-width:min(125%,100dvw);margin-left:50%;transform:translateX(-50%)}.breakout-all>:is(img,picture):not(.does-not-exist),.breakout>:is(img,picture):not(.does-not-exist){min-width:auto}.breakout-all>.breakout-item-max,.breakout>.breakout-item-max{width:min(125%,100dvw)!important}.breakout-all>:is(h2,h3,h4,h5,h6,hr):not([class]){position:relative}.breakout-all>:is(h2,h3,h4,h5,h6,hr):not([class])::before{display:block;position:absolute;background:gray;content:"";opacity:12.5%}.breakout-all>:is(h2,h3,h4,h5,h6):not([class])::before{top:50%;right:100%;width:10em;height:.25em;margin-right:.8ch;transform:translateY(-50%);background:linear-gradient(to left,gray,transparent)}.breakout-all>:is(h2,h3,h4,h5,h6):not([class]):where(hr + *)::before{display:none!important}.breakout-all>:is(hr){height:.5rem;overflow:visible;border:none}.breakout-all>:is(hr)::before{left:50%;width:100dvw;height:100%;transform:translateX(-50%)}.columns{-moz-columns:25ch auto;columns:25ch auto}.columns>*{-moz-column-break-inside:avoid;break-inside:avoid}[href="#top"]{position:fixed;right:0;bottom:0;padding-top:50vh}h1,h2,h3,h4,h5,h6{position:relative}h1 a[aria-hidden=true],h2 a[aria-hidden=true],h3 a[aria-hidden=true],h4 a[aria-hidden=true],h5 a[aria-hidden=true],h6 a[aria-hidden=true]{visibility:hidden;position:absolute;top:50%;right:100%;padding-right:.2ch;transform:translateY(-50%);color:silver;text-decoration:none}@media (hover:hover){h1:hover a[aria-hidden=true],h2:hover a[aria-hidden=true],h3:hover a[aria-hidden=true],h4:hover a[aria-hidden=true],h5:hover a[aria-hidden=true],h6:hover a[aria-hidden=true]{visibility:visible}}ol[style*="--list-marker:"],ul[style*="--list-marker:"]{list-style-type:var(--list-marker)}ol[style*="--list-marker:"]>li,ul[style*="--list-marker:"]>li{list-style-type:inherit}ol li[style*="--list-marker:"],ul li[style*="--list-marker:"]{list-style-type:var(--list-marker)}ol li[data-marker]::marker,ul li[data-marker]::marker{content:attr(data-marker) " "}ol.markerless,ul.markerless{padding-inline-start:1.25rem}ol.markerless li,ul.markerless li{list-style:none}.unlist-all ol,.unlist-all ul,ol.unlist,ol.unlist-all,ul.unlist,ul.unlist-all{padding-inline-start:0}.unlist-all ol>li,.unlist-all ul>li,ol.unlist-all>li,ol.unlist>li,ul.unlist-all>li,ul.unlist>li{list-style:none}th hr{visibility:hidden;width:12ch;height:0;margin:0}th hr.lg{width:18ch}th hr.x2{width:24ch}table.borderless td,table.borderless th{border:none}.breakout-all>table:not(.does-not-exist),.breakout>table:not(.does-not-exist),table.responsive{display:block;width:-moz-max-content;width:max-content;min-width:auto;max-width:100dvw;margin-left:50%;padding-inline:7.5%;overflow-x:auto;transform:translateX(-50%);-webkit-overflow-scrolling:touch}.breakout-all>table:not(.does-not-exist) td,.breakout-all>table:not(.does-not-exist) th,.breakout>table:not(.does-not-exist) td,.breakout>table:not(.does-not-exist) th,table.responsive td,table.responsive th{padding-inline-start:0}@media (width < 768px){pre{border-radius:0}}code[data-caption]::before{display:block;margin-bottom:1rem;content:attr(data-caption);font-style:italic;opacity:50%}/*!
|
|
14
|
+
* Float Label CSS v2 by Blades CSS 🥷🏷️
|
|
15
|
+
* Copyright 2016–2026 (https://blades.ninja/css/float-label/)
|
|
16
|
+
* Licensed under MIT
|
|
17
|
+
*/.has-float-label,label:has(> span):has(
|
|
18
|
+
input:not([type=checkbox],[type=radio],[type=range]),textarea,select
|
|
19
|
+
){display:block;position:relative}.has-float-label label,.has-float-label>span,label:has(> span):has(
|
|
20
|
+
input:not([type=checkbox],[type=radio],[type=range]),textarea,select
|
|
21
|
+
) label,label:has(> span):has(
|
|
22
|
+
input:not([type=checkbox],[type=radio],[type=range]),textarea,select
|
|
23
|
+
)>span{position:absolute;top:0;left:0;font-size:75%;cursor:text}.has-float-label :placeholder-shown:not(:focus)::-moz-placeholder,label:has(> span):has(
|
|
24
|
+
input:not([type=checkbox],[type=radio],[type=range]),textarea,select
|
|
25
|
+
) :placeholder-shown:not(:focus)::-moz-placeholder{opacity:0}.has-float-label :-moz-placeholder:not(:focus)::placeholder,label:has(> span):has(
|
|
26
|
+
input:not([type=checkbox],[type=radio],[type=range]),textarea,select
|
|
27
|
+
) :-moz-placeholder:not(:focus)::placeholder{opacity:0}.has-float-label :placeholder-shown:not(:focus)::placeholder,label:has(> span):has(
|
|
28
|
+
input:not([type=checkbox],[type=radio],[type=range]),textarea,select
|
|
29
|
+
) :placeholder-shown:not(:focus)::placeholder{opacity:0}.has-float-label:has(:-moz-placeholder:not(:focus)) label,.has-float-label:has(:-moz-placeholder:not(:focus))>span,label:has(> span):has(
|
|
30
|
+
input:not([type=checkbox],[type=radio],[type=range]),textarea,select
|
|
31
|
+
):has(:-moz-placeholder:not(:focus)) label,label:has(> span):has(
|
|
32
|
+
input:not([type=checkbox],[type=radio],[type=range]),textarea,select
|
|
33
|
+
):has(:-moz-placeholder:not(:focus))>span{font-size:inherit;opacity:50%}.has-float-label:has(:placeholder-shown:not(:focus)) label,.has-float-label:has(:placeholder-shown:not(:focus))>span,label:has(> span):has(
|
|
34
|
+
input:not([type=checkbox],[type=radio],[type=range]),textarea,select
|
|
35
|
+
):has(:placeholder-shown:not(:focus)) label,label:has(> span):has(
|
|
36
|
+
input:not([type=checkbox],[type=radio],[type=range]),textarea,select
|
|
37
|
+
):has(:placeholder-shown:not(:focus))>span{font-size:inherit;opacity:50%}a:not(.does-not-exist):has(> i){display:inline-flex;overflow-y:clip;gap:.375ch;text-wrap:balance}a:not(.does-not-exist)>i{float:left;font-style:normal;text-underline-offset:-2em}a:not(.does-not-exist)>i>img{display:inline-block;max-width:none;height:1.25em;margin-block-start:calc(-0.25em / 2)}a:not(.does-not-exist)>i[class*=" fa-"],a:not(.does-not-exist)>i[class^=fa-]{line-height:inherit;--fa-width:auto}a:not(.does-not-exist)>i.fa-lg{line-height:normal}.has-timeline>dl dd,dl.timeline dd{margin-block:0;padding:.25rem 0 .75rem 1rem;border-inline-start:0.25rem solid var(--blades-timeline-border-color)}:root{--blades-dark-filter:invert(100%) hue-rotate(180deg)}@media (prefers-color-scheme:dark){.dark-auto{filter:var(--blades-dark-filter)}}.dark-auto:where([data-theme=dark] *),.dark-auto[data-theme=dark]{filter:var(--blades-dark-filter)}.faded{opacity:50%}.faded:hover{opacity:87.5%}.invert ::-webkit-scrollbar{filter:invert(1)!important}.has-float-label label,.has-float-label>span,label:has(> span):has(input:not([type=checkbox],[type=radio],[type=range]),textarea,select) label,label:has(> span):has(input:not([type=checkbox],[type=radio],[type=range]),textarea,select)>span{padding-inline-start:calc(1rem + 1px);padding-block-start:0.25rem;opacity:75%;transition:all .25s}.has-float-label input,.has-float-label select,.has-float-label textarea,label:has(> span):has(input:not([type=checkbox],[type=radio],[type=range]),textarea,select) input,label:has(> span):has(input:not([type=checkbox],[type=radio],[type=range]),textarea,select) select,label:has(> span):has(input:not([type=checkbox],[type=radio],[type=range]),textarea,select) textarea{margin-block-start:0;padding-inline-start:1rem;padding-block:1.125rem 0.375rem}.has-float-label input::-moz-placeholder,.has-float-label select::-moz-placeholder,.has-float-label textarea::-moz-placeholder,label:has(> span):has(input:not([type=checkbox],[type=radio],[type=range]),textarea,select) input::-moz-placeholder,label:has(> span):has(input:not([type=checkbox],[type=radio],[type=range]),textarea,select) select::-moz-placeholder,label:has(> span):has(input:not([type=checkbox],[type=radio],[type=range]),textarea,select) textarea::-moz-placeholder{opacity:100%;-moz-transition:all .25s;transition:all .25s}.has-float-label input::placeholder,.has-float-label select::placeholder,.has-float-label textarea::placeholder,label:has(> span):has(input:not([type=checkbox],[type=radio],[type=range]),textarea,select) input::placeholder,label:has(> span):has(input:not([type=checkbox],[type=radio],[type=range]),textarea,select) select::placeholder,label:has(> span):has(input:not([type=checkbox],[type=radio],[type=range]),textarea,select) textarea::placeholder{opacity:100%;transition:all .25s}.has-float-label:has(:-moz-placeholder:not(:focus)) label,.has-float-label:has(:-moz-placeholder:not(:focus))>span,label:has(> span):has(input:not([type=checkbox],[type=radio],[type=range]),textarea,select):has(:-moz-placeholder:not(:focus)) label,label:has(> span):has(input:not([type=checkbox],[type=radio],[type=range]),textarea,select):has(:-moz-placeholder:not(:focus))>span{padding-block:0.75rem}.has-float-label:has(:placeholder-shown:not(:focus)) label,.has-float-label:has(:placeholder-shown:not(:focus))>span,label:has(> span):has(input:not([type=checkbox],[type=radio],[type=range]),textarea,select):has(:placeholder-shown:not(:focus)) label,label:has(> span):has(input:not([type=checkbox],[type=radio],[type=range]),textarea,select):has(:placeholder-shown:not(:focus))>span{padding-block:0.75rem}html{overflow-x:clip;-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale}body{display:flex;flex-direction:column;min-height:100dvh}body>main{flex-grow:1}body{hyphens:auto;text-wrap:pretty}body a,body table{hyphens:none}a:not([href^="#"]){text-decoration-thickness:1px}a:not([href^="#"]):hover{text-decoration-thickness:2px}h1,h2,h3,h4,h5,h6{text-wrap:balance}h1{margin-bottom:1rem;font-size:2.5em}hr{margin-block:2em}ul ul{font-size:87.5%}dl dt{margin-block:0.25rem;font-weight:500}dl dd{margin-block-end:1rem}pre small{font-weight:lighter;opacity:75%}pre:has(code){background:#181c25!important}table th{font-weight:700;vertical-align:bottom}table td{vertical-align:top}table pre{margin-bottom:.25rem}[href="#top"]{opacity:25%}[href="#top"]:hover{opacity:75%}[href="#top"]>i{display:inline-block;margin:.5rem;padding:.25rem .375rem;border-color:#000;color:#000;font-size:.75rem}.breakout-all>figure,.breakout-all>img,.breakout>figure,.breakout>img{margin-bottom:1rem}.faded a{text-decoration-style:dotted}
|
|
@@ -1,3 +1,8 @@
|
|
|
1
|
+
/*!
|
|
2
|
+
* Blades CSS' ninja add-ons (experimental) 🥷🧪
|
|
3
|
+
* Copyright 2026 (https://blades.ninja/css/ninja/)
|
|
4
|
+
* Licensed under MIT
|
|
5
|
+
*/
|
|
1
6
|
/*\3c !--section:docs-->
|
|
2
7
|
|
|
3
8
|
### `sup`er and `sub`headings
|
|
@@ -12,7 +17,7 @@ How it works:
|
|
|
12
17
|
```css */
|
|
13
18
|
sup[style] {
|
|
14
19
|
display: block;
|
|
15
|
-
font-size: 0.75rem;
|
|
20
|
+
font-size: min(50%, 0.75rem);
|
|
16
21
|
letter-spacing: 0.0625em;
|
|
17
22
|
text-transform: uppercase;
|
|
18
23
|
}
|
|
@@ -51,7 +56,7 @@ a[role="button"]:has(h1, h2, h3, h4, h5, h6) {
|
|
|
51
56
|
How it works:
|
|
52
57
|
```css */
|
|
53
58
|
@media (width < 1024px) {
|
|
54
|
-
.opt {
|
|
59
|
+
.opt:not(.does-not-exist) {
|
|
55
60
|
display: none
|
|
56
61
|
}
|
|
57
62
|
}
|
|
@@ -0,0 +1,5 @@
|
|
|
1
|
+
/*!
|
|
2
|
+
* Blades CSS' ninja add-ons (experimental) 🥷🧪
|
|
3
|
+
* Copyright 2026 (https://blades.ninja/css/ninja/)
|
|
4
|
+
* Licensed under MIT
|
|
5
|
+
*/sup[style]{display:block;font-size:min(50%, .75rem);letter-spacing:.0625em;text-transform:uppercase}sub[style]{display:block;bottom:0;font-weight:300;line-height:1.1;opacity:75%}sub[style]:where(h1 > *){font-size:50%}a[role=button]:has(h1,h2,h3,h4,h5,h6){margin:0 0 .5rem -1rem;border-width:1px 0 0 1px;text-align:start}@media (width < 1024px){.opt:not(.does-not-exist){display:none}}img[src*="?domain=github.com&"]{border-radius:50%}@media (prefers-color-scheme:dark){img[src*="?domain=github.com&"]{filter:invert(1)}}
|