@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.
Files changed (58) hide show
  1. package/.github/ISSUE_TEMPLATE/bug_report.md +25 -0
  2. package/.github/ISSUE_TEMPLATE/config.yml +8 -0
  3. package/.prettierrc.json +6 -0
  4. package/README.md +112 -149
  5. package/context7.json +4 -0
  6. package/css/blades.css +436 -153
  7. package/css/blades.min.css +145 -0
  8. package/css/blades.standalone.css +197 -222
  9. package/css/blades.standalone.min.css +37 -0
  10. package/css/{blades.ninja.css → ninja.css} +7 -2
  11. package/css/ninja.min.css +5 -0
  12. package/css/pico.conditional.css +3189 -0
  13. package/css/pico.conditional.min.css +107 -0
  14. package/css/pico.css +3186 -0
  15. package/css/pico.min.css +105 -0
  16. package/css/postcss.config.js +23 -0
  17. package/index.html +63 -0
  18. package/package.json +27 -11
  19. package/src/blades.css +4 -3
  20. package/src/blades.standalone.css +2 -2
  21. package/src/{blades.ninja.css → ninja.css} +7 -2
  22. package/src/pico/_components.css +974 -0
  23. package/src/pico/_content.css +608 -0
  24. package/src/pico/_forms.css +747 -0
  25. package/src/pico/_index.css +12 -0
  26. package/src/pico/_layout.css +128 -0
  27. package/src/pico/_utilities.css +53 -0
  28. package/src/pico/_variables.css +671 -0
  29. package/src/pico.css +1 -0
  30. package/src/standalone/_core.css +32 -0
  31. package/src/{blades.standalone.theme.css → standalone/_theme.css} +2 -2
  32. package/src/{_utilities.css → standalone/_utilities.css} +1 -1
  33. package/src/standalone/_variables.css +20 -0
  34. package/src/{link-icon.css → standalone/components/_icon-helper.css} +0 -2
  35. package/src/{components → standalone/components}/_timeline.css +1 -1
  36. package/src/{content → standalone/content}/_code.css +6 -5
  37. package/src/{content/_typography.css → standalone/content/_list.css} +4 -42
  38. package/src/standalone/content/_typography.css +38 -0
  39. package/src/{float-label.core.css → standalone/forms/_float-label.core.css} +12 -4
  40. package/src/standalone/forms/_float-label.css +2 -0
  41. package/src/{breakout.css → standalone/layout/_breakout.css} +3 -6
  42. package/src/{_layout.css → standalone/layout/_columns.css} +2 -12
  43. package/src/standalone/layout/_scroller.css +10 -0
  44. package/_config.yml +0 -5
  45. package/blades.gemspec +0 -16
  46. package/css/blades.standalone.core.css +0 -712
  47. package/css/blades.standalone.theme.css +0 -143
  48. package/css/breakout.css +0 -125
  49. package/css/float-label.core.css +0 -56
  50. package/css/float-label.css +0 -96
  51. package/css/float-label.theme.css +0 -39
  52. package/css/link-icon.css +0 -59
  53. package/css/responsive-table.css +0 -57
  54. package/src/blades.standalone.core.css +0 -23
  55. package/src/float-label.css +0 -3
  56. /package/src/{responsive-table.css → standalone/content/_table-responsive.css} +0 -0
  57. /package/src/{content → standalone/content}/_table.css +0 -0
  58. /package/src/{float-label.theme.css → standalone/forms/_float-label.theme.css} +0 -0
@@ -1,143 +0,0 @@
1
- /*\3c !--section:code-->```css */
2
- /* Default/fallback state */
3
- label:has(> span):has(input:not([type="checkbox"], [type="radio"], [type="range"]), textarea, select) > span,
4
- label:has(> span):has(input:not([type="checkbox"], [type="radio"], [type="range"]), textarea, select) label,
5
- .has-float-label > span,
6
- .has-float-label label {
7
- padding-inline-start: calc(1rem + 1px); /* match Pico's padding + border */
8
- padding-block-start: 0.25rem;
9
- opacity: 75%;
10
- transition: all 0.25s;
11
- }
12
- label:has(> span):has(input:not([type="checkbox"], [type="radio"], [type="range"]), textarea, select) input,
13
- label:has(> span):has(input:not([type="checkbox"], [type="radio"], [type="range"]), textarea, select) textarea,
14
- label:has(> span):has(input:not([type="checkbox"], [type="radio"], [type="range"]), textarea, select) select,
15
- .has-float-label input,
16
- .has-float-label textarea,
17
- .has-float-label select {
18
- margin-block-start: 0; /* reset Pico */
19
- padding-inline-start: 1rem; /* match Pico */
20
- padding-block: 1.125rem 0.375rem; /* match Pico's total: 2 x 0.75rem = 1.5rem */
21
- }
22
- 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) textarea::-moz-placeholder, label:has(> span):has(input:not([type="checkbox"], [type="radio"], [type="range"]), textarea, select) select::-moz-placeholder, .has-float-label input::-moz-placeholder, .has-float-label textarea::-moz-placeholder, .has-float-label select::-moz-placeholder {
23
- opacity: 100%;
24
- -moz-transition: all 0.25s;
25
- transition: all 0.25s;
26
- }
27
- 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) textarea::placeholder, label:has(> span):has(input:not([type="checkbox"], [type="radio"], [type="range"]), textarea, select) select::placeholder, .has-float-label input::placeholder, .has-float-label textarea::placeholder, .has-float-label select::placeholder {
28
- opacity: 100%;
29
- transition: all 0.25s;
30
- }
31
- /* Enlarged state */
32
- label:has(> span):has(input:not([type="checkbox"], [type="radio"], [type="range"]), textarea, select):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, .has-float-label:has(*:-moz-placeholder:not(:focus)) > span, .has-float-label:has(*:-moz-placeholder:not(:focus)) label {
33
- padding-block: 0.75rem; /* match Pico */
34
- }
35
- label:has(> span):has(input:not([type="checkbox"], [type="radio"], [type="range"]), textarea, select):has(*:placeholder-shown:not(:focus)) > span,
36
- label:has(> span):has(input:not([type="checkbox"], [type="radio"], [type="range"]), textarea, select):has(*:placeholder-shown:not(:focus)) label,
37
- .has-float-label:has(*:placeholder-shown:not(:focus)) > span,
38
- .has-float-label:has(*:placeholder-shown:not(:focus)) label {
39
- padding-block: 0.75rem; /* match Pico */
40
- }
41
- html {
42
- /* Prevent horizontal overflow and scrolling, modern way. */
43
- overflow-x: clip;
44
-
45
- /* Enable font smoothing */
46
- -webkit-font-smoothing: antialiased;
47
- -moz-osx-font-smoothing: grayscale;
48
- }
49
- body {
50
-
51
- /* 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. */
52
- display: flex;
53
- flex-direction: column;
54
- /* Ensure `body` takes at least the full height of the viewport (using dynamic viewport height for better mobile support). */
55
- min-height: 100dvh;
56
-
57
- /* Evaluates the last ~4 lines of text blocks to prevent a single word from sitting on the final line. */
58
-
59
- /* Enable global hyphenation */
60
- /* ... except for links and tables which are better (safer) without hyphenation */
61
- }
62
- body > main {
63
- flex-grow: 1;
64
- }
65
- body {
66
- hyphens: auto;
67
- text-wrap: pretty;
68
- }
69
- body a,
70
- body table {
71
- hyphens: none;
72
- }
73
- a:not([href^="#"]) {
74
- text-decoration-thickness: 1px;
75
- }
76
- a:not([href^="#"]):hover {
77
- text-decoration-thickness: 2px;
78
- }
79
- h1,
80
- h2,
81
- h3,
82
- h4,
83
- h5,
84
- h6 {
85
- text-wrap: balance;
86
- }
87
- h1 {
88
- margin-bottom: 1rem; /* for tw-typography */
89
- font-size: 2.5em; /* for pico.css & tw-typography */
90
- }
91
- hr {
92
- margin-block: 2em; /* for pico.css & tw-typography */
93
- }
94
- ul ul {
95
- font-size: 87.5%;
96
- }
97
- dl dt {
98
- margin-block: 0.25rem;
99
- font-weight: 500;
100
- }
101
- dl dd {
102
- margin-block-end: 1rem;
103
- }
104
- pre small {
105
- font-weight: lighter;
106
- opacity: 75%;
107
- }
108
- pre:has(code) {
109
- background: #181c25 !important;
110
- }
111
- table th {
112
- font-weight: bold;
113
- vertical-align: bottom;
114
- }
115
- table td {
116
- vertical-align: top;
117
- }
118
- table pre {
119
- margin-bottom: 0.25rem;
120
- }
121
- [data-jump-to="top"] {
122
- opacity: 25%;
123
- }
124
- [data-jump-to="top"]:hover {
125
- opacity: 75%;
126
- }
127
- [data-jump-to="top"] > i {
128
- display: inline-block;
129
- margin: 0.5rem;
130
- padding: 0.25rem 0.375rem;
131
- border-color: black;
132
- color: black;
133
- font-size: 0.75rem;
134
- }
135
- .breakout > img,
136
- .breakout > figure,
137
- .breakout-all > img,
138
- .breakout-all > figure {
139
- margin-bottom: 1rem;
140
- }
141
- .faded a {
142
- text-decoration-style: dotted;
143
- }
package/css/breakout.css DELETED
@@ -1,125 +0,0 @@
1
- /*
2
- \3c !--section:code-->
3
- ```css */
4
- .breakout,
5
- .breakout-all {
6
- max-width: calc(10% + 65ch + 10%);
7
- /* Prepare the container for breakout elements */
8
- padding-inline: 10%;
9
- }
10
- @media (width < 768px) {
11
- .breakout,
12
- .breakout-all {
13
- max-width: calc(1rem + 65ch + 1rem);
14
- padding-inline: 1rem
15
- }
16
- }
17
- /* Breakout direct children only */
18
- .breakout > *:is(
19
- table,
20
- pre,
21
- figure, video, iframe, canvas,
22
- img, picture,
23
-
24
- .breakout-item,
25
- .breakout-item-max
26
- ),
27
- .breakout-all > *:is(
28
- table,
29
- pre,
30
- figure, video, iframe, canvas,
31
- img, picture,
32
-
33
- .breakout-item,
34
- .breakout-item-max
35
- ) {
36
- width: -moz-fit-content;
37
- width: fit-content;
38
- min-width: 100%;
39
- max-width: min(125%, 100dvw);
40
- margin-left: 50%;
41
- transform: translateX(-50%);
42
- }
43
- /* Respect img/picture min-width */
44
- .breakout > *:is(img, picture):not(.does-not-exist), .breakout-all > *:is(img, picture):not(.does-not-exist) /* soft win specificity over .breakout-item above */ {
45
- min-width: auto;
46
- }
47
- /* Max out the width of the element */
48
- .breakout > *.breakout-item-max, .breakout-all > *.breakout-item-max {
49
- width: min(125%, 100dvw) !important; /* !important is for cases like figure.breakout-item-max @TODO */
50
- }
51
- .breakout-all > *:is(h2, h3, h4, h5, h6, hr):not([class]) {
52
- position: relative;
53
- }
54
- .breakout-all > *:is(h2, h3, h4, h5, h6, hr):not([class])::before {
55
- display: block;
56
- position: absolute;
57
- background: gray;
58
- content: "";
59
- opacity: 12.5%;
60
- }
61
- .breakout-all > *:is(h2, h3, h4, h5, h6):not([class])::before {
62
- top: 50%;
63
- right: 100%;
64
- width: 10em;
65
- height: 0.25em;
66
- margin-right: 0.8ch;
67
- transform: translateY(-50%);
68
- background: linear-gradient(to left, gray, transparent);
69
- }
70
- /* @TODO: add to tricks-wiki why `*` works here, but `&` fails */
71
- .breakout-all > *:is(h2, h3, h4, h5, h6):not([class]):where(hr + *)::before {
72
- display: none !important;
73
- }
74
- .breakout-all > *:is(hr) {
75
- height: 0.5rem;
76
- overflow: visible;
77
- border: none;
78
- }
79
- .breakout-all > *:is(hr)::before {
80
- left: 50%;
81
- width: 100dvw;
82
- height: 100%;
83
- transform: translateX(-50%);
84
- }
85
- /*```
86
- \3c !--section:summary-->
87
-
88
- The `.breakout` layout allows images, tables, and other figures to automatically extend or bleed beyond their parent container’s width.
89
-
90
- \3c !--section:docs-->
91
-
92
- ### Demo \3c !-- inside parent .breakout -->
93
-
94
- Break out a wide image from the text flow:
95
-
96
- <div>\3c !-- Dummy div to avoid p tag in Markdown --></div><img
97
- src="data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='3000' height='300'><rect width='100%' height='100%' fill='gray'/></svg>">
98
-
99
- Or table:
100
-
101
- | Imagine<hr> | a<hr> | really<hr> | wide<hr> | table<hr> | here<hr> |
102
- | ----------- | ----- | ---------- | -------- | --------- | -------- |
103
- | ... |
104
-
105
- Or code block:
106
-
107
- ```html
108
- <p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Quisquam, quod. Lorem ipsum dolor sit amet consectetur adipisicing elit. Quisquam, quod.</p>
109
- ```
110
-
111
- Or anything else:
112
-
113
- <article class="breakout-item-max" data-theme="dark">
114
-
115
- Using `.breakout-item` and `.breakout-item-max` helpers {style=margin:0}
116
- </article>
117
-
118
- <div><hr></div>
119
-
120
- `.breakout-all` also visually breaks out headings and horizontal rules:
121
-
122
- <h2>Heading 2</h2><h3>Heading 3</h3><h4>Heading 4</h4><h5>Heading 5</h5><h6>Heading 6</h6>
123
- <hr>
124
-
125
- \3c !--section--> */
@@ -1,56 +0,0 @@
1
- /* Sources moved here from https://github.com/anyblades/float-label-css for easier maintenance
2
- \3c !--section:docs-->
3
-
4
- First, we target either:
5
- 1. `<label>` which `:has` inner form inputs (classless approach)
6
- 2. or explicit `.has-float-label` class (explicit approach)
7
-
8
- ```css */
9
- label:has(> span):has(input:not([type="checkbox"], [type="radio"], [type="range"]), textarea, select),
10
- .has-float-label {
11
- display: block;
12
- position: relative;
13
- }
14
- /*```
15
- Then, we define the default/fallback state (when the float label should be minimized):
16
- ```css */
17
- label:has(> span):has(input:not([type="checkbox"], [type="radio"], [type="range"]), textarea, select) > span,
18
- label:has(> span):has(input:not([type="checkbox"], [type="radio"], [type="range"]), textarea, select) label,
19
- .has-float-label > span,
20
- .has-float-label label {
21
- position: absolute;
22
- top: 0;
23
- left: 0;
24
- font-size: 75%;
25
- cursor: text;
26
- }
27
- /*```
28
- Finally, we detect if placeholder is shown, but not in focus. That means we can safely hide it, and enlarge the float label instead:
29
- ```css */
30
- label:has(> span):has(input:not([type="checkbox"], [type="radio"], [type="range"]), textarea, select) *:placeholder-shown:not(:focus)::-moz-placeholder, .has-float-label *:placeholder-shown:not(:focus)::-moz-placeholder {
31
- opacity: 0;
32
- }
33
- label:has(> span):has(input:not([type="checkbox"], [type="radio"], [type="range"]), textarea, select) *:-moz-placeholder:not(:focus)::placeholder, .has-float-label *:-moz-placeholder:not(:focus)::placeholder {
34
- opacity: 0;
35
- }
36
- label:has(> span):has(input:not([type="checkbox"], [type="radio"], [type="range"]), textarea, select) *:placeholder-shown:not(:focus)::placeholder, .has-float-label *:placeholder-shown:not(:focus)::placeholder {
37
- opacity: 0;
38
- }
39
- label:has(> span):has(input:not([type="checkbox"], [type="radio"], [type="range"]), textarea, select):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, .has-float-label:has(*:-moz-placeholder:not(:focus)) > span, .has-float-label:has(*:-moz-placeholder:not(:focus)) label {
40
- font-size: inherit;
41
- opacity: 50%;
42
- }
43
- label:has(> span):has(input:not([type="checkbox"], [type="radio"], [type="range"]), textarea, select):has(*:placeholder-shown:not(:focus)) > span,
44
- label:has(> span):has(input:not([type="checkbox"], [type="radio"], [type="range"]), textarea, select):has(*:placeholder-shown:not(:focus)) label,
45
- .has-float-label:has(*:placeholder-shown:not(:focus)) > span,
46
- .has-float-label:has(*:placeholder-shown:not(:focus)) label {
47
- font-size: inherit;
48
- opacity: 50%;
49
- }
50
- /*```
51
-
52
- The `:has(*:placeholder-shown:not(:focus))` trick allows this input state information to *propagate* to the parent level. This enables modern CSS to target inner float label (`<span>` or `<label>`) regardless of its position relative to the input field.
53
-
54
- Historically, this was not possible: the float label had to be placed after the input field to be targeted using the `input:focus + label` selector.
55
-
56
- \3c !--section-->*/
@@ -1,96 +0,0 @@
1
- /* Float Label CSS v2.0.0-alpha */
2
- /* Sources moved here from https://github.com/anyblades/float-label-css for easier maintenance
3
- \3c !--section:docs-->
4
-
5
- First, we target either:
6
- 1. `<label>` which `:has` inner form inputs (classless approach)
7
- 2. or explicit `.has-float-label` class (explicit approach)
8
-
9
- ```css */
10
- label:has(> span):has(input:not([type="checkbox"], [type="radio"], [type="range"]), textarea, select),
11
- .has-float-label {
12
- display: block;
13
- position: relative;
14
- }
15
- /*```
16
- Then, we define the default/fallback state (when the float label should be minimized):
17
- ```css */
18
- label:has(> span):has(input:not([type="checkbox"], [type="radio"], [type="range"]), textarea, select) > span,
19
- label:has(> span):has(input:not([type="checkbox"], [type="radio"], [type="range"]), textarea, select) label,
20
- .has-float-label > span,
21
- .has-float-label label {
22
- position: absolute;
23
- top: 0;
24
- left: 0;
25
- font-size: 75%;
26
- cursor: text;
27
- }
28
- /*```
29
- Finally, we detect if placeholder is shown, but not in focus. That means we can safely hide it, and enlarge the float label instead:
30
- ```css */
31
- label:has(> span):has(input:not([type="checkbox"], [type="radio"], [type="range"]), textarea, select) *:placeholder-shown:not(:focus)::-moz-placeholder, .has-float-label *:placeholder-shown:not(:focus)::-moz-placeholder {
32
- opacity: 0;
33
- }
34
- label:has(> span):has(input:not([type="checkbox"], [type="radio"], [type="range"]), textarea, select) *:-moz-placeholder:not(:focus)::placeholder, .has-float-label *:-moz-placeholder:not(:focus)::placeholder {
35
- opacity: 0;
36
- }
37
- label:has(> span):has(input:not([type="checkbox"], [type="radio"], [type="range"]), textarea, select) *:placeholder-shown:not(:focus)::placeholder, .has-float-label *:placeholder-shown:not(:focus)::placeholder {
38
- opacity: 0;
39
- }
40
- label:has(> span):has(input:not([type="checkbox"], [type="radio"], [type="range"]), textarea, select):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, .has-float-label:has(*:-moz-placeholder:not(:focus)) > span, .has-float-label:has(*:-moz-placeholder:not(:focus)) label {
41
- font-size: inherit;
42
- opacity: 50%;
43
- }
44
- label:has(> span):has(input:not([type="checkbox"], [type="radio"], [type="range"]), textarea, select):has(*:placeholder-shown:not(:focus)) > span,
45
- label:has(> span):has(input:not([type="checkbox"], [type="radio"], [type="range"]), textarea, select):has(*:placeholder-shown:not(:focus)) label,
46
- .has-float-label:has(*:placeholder-shown:not(:focus)) > span,
47
- .has-float-label:has(*:placeholder-shown:not(:focus)) label {
48
- font-size: inherit;
49
- opacity: 50%;
50
- }
51
- /*```
52
-
53
- The `:has(*:placeholder-shown:not(:focus))` trick allows this input state information to *propagate* to the parent level. This enables modern CSS to target inner float label (`<span>` or `<label>`) regardless of its position relative to the input field.
54
-
55
- Historically, this was not possible: the float label had to be placed after the input field to be targeted using the `input:focus + label` selector.
56
-
57
- \3c !--section-->*/
58
- /* Default/fallback state */
59
- label:has(> span):has(input:not([type="checkbox"], [type="radio"], [type="range"]), textarea, select) > span,
60
- label:has(> span):has(input:not([type="checkbox"], [type="radio"], [type="range"]), textarea, select) label,
61
- .has-float-label > span,
62
- .has-float-label label {
63
- padding-inline-start: calc(1rem + 1px); /* match Pico's padding + border */
64
- padding-block-start: 0.25rem;
65
- opacity: 75%;
66
- transition: all 0.25s;
67
- }
68
- label:has(> span):has(input:not([type="checkbox"], [type="radio"], [type="range"]), textarea, select) input,
69
- label:has(> span):has(input:not([type="checkbox"], [type="radio"], [type="range"]), textarea, select) textarea,
70
- label:has(> span):has(input:not([type="checkbox"], [type="radio"], [type="range"]), textarea, select) select,
71
- .has-float-label input,
72
- .has-float-label textarea,
73
- .has-float-label select {
74
- margin-block-start: 0; /* reset Pico */
75
- padding-inline-start: 1rem; /* match Pico */
76
- padding-block: 1.125rem 0.375rem; /* match Pico's total: 2 x 0.75rem = 1.5rem */
77
- }
78
- 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) textarea::-moz-placeholder, label:has(> span):has(input:not([type="checkbox"], [type="radio"], [type="range"]), textarea, select) select::-moz-placeholder, .has-float-label input::-moz-placeholder, .has-float-label textarea::-moz-placeholder, .has-float-label select::-moz-placeholder {
79
- opacity: 100%;
80
- -moz-transition: all 0.25s;
81
- transition: all 0.25s;
82
- }
83
- 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) textarea::placeholder, label:has(> span):has(input:not([type="checkbox"], [type="radio"], [type="range"]), textarea, select) select::placeholder, .has-float-label input::placeholder, .has-float-label textarea::placeholder, .has-float-label select::placeholder {
84
- opacity: 100%;
85
- transition: all 0.25s;
86
- }
87
- /* Enlarged state */
88
- label:has(> span):has(input:not([type="checkbox"], [type="radio"], [type="range"]), textarea, select):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, .has-float-label:has(*:-moz-placeholder:not(:focus)) > span, .has-float-label:has(*:-moz-placeholder:not(:focus)) label {
89
- padding-block: 0.75rem; /* match Pico */
90
- }
91
- label:has(> span):has(input:not([type="checkbox"], [type="radio"], [type="range"]), textarea, select):has(*:placeholder-shown:not(:focus)) > span,
92
- label:has(> span):has(input:not([type="checkbox"], [type="radio"], [type="range"]), textarea, select):has(*:placeholder-shown:not(:focus)) label,
93
- .has-float-label:has(*:placeholder-shown:not(:focus)) > span,
94
- .has-float-label:has(*:placeholder-shown:not(:focus)) label {
95
- padding-block: 0.75rem; /* match Pico */
96
- }
@@ -1,39 +0,0 @@
1
- /* Default/fallback state */
2
- label:has(> span):has(input:not([type="checkbox"], [type="radio"], [type="range"]), textarea, select) > span,
3
- label:has(> span):has(input:not([type="checkbox"], [type="radio"], [type="range"]), textarea, select) label,
4
- .has-float-label > span,
5
- .has-float-label 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
- label:has(> span):has(input:not([type="checkbox"], [type="radio"], [type="range"]), textarea, select) input,
12
- label:has(> span):has(input:not([type="checkbox"], [type="radio"], [type="range"]), textarea, select) textarea,
13
- label:has(> span):has(input:not([type="checkbox"], [type="radio"], [type="range"]), textarea, select) select,
14
- .has-float-label input,
15
- .has-float-label textarea,
16
- .has-float-label select {
17
- margin-block-start: 0; /* reset Pico */
18
- padding-inline-start: 1rem; /* match Pico */
19
- padding-block: 1.125rem 0.375rem; /* match Pico's total: 2 x 0.75rem = 1.5rem */
20
- }
21
- 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) textarea::-moz-placeholder, label:has(> span):has(input:not([type="checkbox"], [type="radio"], [type="range"]), textarea, select) select::-moz-placeholder, .has-float-label input::-moz-placeholder, .has-float-label textarea::-moz-placeholder, .has-float-label select::-moz-placeholder {
22
- opacity: 100%;
23
- -moz-transition: all 0.25s;
24
- transition: all 0.25s;
25
- }
26
- 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) textarea::placeholder, label:has(> span):has(input:not([type="checkbox"], [type="radio"], [type="range"]), textarea, select) select::placeholder, .has-float-label input::placeholder, .has-float-label textarea::placeholder, .has-float-label select::placeholder {
27
- opacity: 100%;
28
- transition: all 0.25s;
29
- }
30
- /* Enlarged state */
31
- label:has(> span):has(input:not([type="checkbox"], [type="radio"], [type="range"]), textarea, select):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, .has-float-label:has(*:-moz-placeholder:not(:focus)) > span, .has-float-label:has(*:-moz-placeholder:not(:focus)) label {
32
- padding-block: 0.75rem; /* match Pico */
33
- }
34
- label:has(> span):has(input:not([type="checkbox"], [type="radio"], [type="range"]), textarea, select):has(*:placeholder-shown:not(:focus)) > span,
35
- label:has(> span):has(input:not([type="checkbox"], [type="radio"], [type="range"]), textarea, select):has(*:placeholder-shown:not(:focus)) label,
36
- .has-float-label:has(*:placeholder-shown:not(:focus)) > span,
37
- .has-float-label:has(*:placeholder-shown:not(:focus)) label {
38
- padding-block: 0.75rem; /* match Pico */
39
- }
package/css/link-icon.css DELETED
@@ -1,59 +0,0 @@
1
- /* Extends https://github.com/picocss/pico/blob/main/scss/content/_link.scss
2
- \3c !--section:code-->
3
- ```css */
4
- /* Use inline flex only if link contains an icon */
5
- a:not(.does-not-exist):has(> i) {
6
- display: inline-flex;
7
- overflow-y: clip; /* to work in pair with text-underline-offset in Safari */
8
- gap: 0.375ch; /* =3/8 */
9
- text-wrap: balance;
10
- }
11
- a:not(.does-not-exist) > i {
12
- float: left; /* ✅ Chrome ❌ Safari */
13
- font-style: normal;
14
- text-underline-offset: -2em; /* ❌ Chrome ✅ Safari - to clip it with overflow-y */
15
- }
16
- /* Favicons */
17
- a:not(.does-not-exist) > i > img {
18
- display: inline-block; /* for Tailwind CSS Typography */
19
- max-width: none; /* to keep ratio safe */
20
- height: 1.25em;
21
- margin-block-start: calc(-0.25em / 2);
22
- }
23
- a:not(.does-not-exist) > i[class^="fa-"],
24
- a:not(.does-not-exist) > i[class*=" fa-"] {
25
- line-height: inherit;
26
- --fa-width: auto;
27
- }
28
- /* Font Awesome */
29
- a:not(.does-not-exist) > i.fa-lg {
30
- line-height: normal;
31
- }
32
- /*```
33
- \3c !--section:summary-->
34
-
35
- Use *Bl*ades `<i>`-helper to wrap emojis, favicons, or simply drop Font Awesome icons inside links.
36
- It automatically handles sizing and alignment while preventing underline on icons.
37
-
38
- \3c !--section:docs-->
39
-
40
- <article class="breakout-item">
41
-
42
- | Use `<i>`-helper with | Clean HTML without `<span>ning` |
43
- | ------------------------------------------------------------------------------------- | ------------------------------------ |
44
- | [<i>🥷</i> Emojis](#) | `<a><i>🥷</i> Text</a>` |
45
- | [<i>![](https://www.google.com/s2/favicons?domain=any.digital&sz=64)</i> Favicons](#) | `<a><i><img src="..."></i> Text</a>` |
46
- | [<i class="fa-brands fa-github fa-lg"></i> Font Awesome icons](#) | `<a><i class="fa-..."></i> Text</a>` |
47
- </article>
48
-
49
- Or even for:
50
-
51
- <article>
52
- <a href="#" style="margin: 0 0 0 1rem"><i>🥷</i> very-very-very-very-very-<br>long-multiline-links</a>
53
- </article>
54
-
55
- How we made it: https://codepen.io/editor/anydigital/pen/019d2b94-5616-75dc-a23e-e111869d5237
56
-
57
- **PRO** example of automatic favicons for `11ty`: https://blades.ninja/build-awesome-11ty/processors/#auto-link-favicons
58
-
59
- \3c !--section--> */
@@ -1,57 +0,0 @@
1
- /*
2
- \3c !--section:code-->
3
- ```css */
4
- table.responsive,
5
- .breakout > table:not(.does-not-exist),
6
- .breakout-all > table:not(.does-not-exist) {
7
-
8
- /* Let them scroll */
9
- display: block;
10
-
11
- /* Let them full-bleed */
12
- width: -moz-max-content;
13
- width: max-content;
14
- min-width: auto;
15
- max-width: 100dvw;
16
- /* Center horizontally */
17
- margin-left: 50%;
18
- padding-inline: 7.5%;
19
- overflow-x: auto;
20
- transform: translateX(-50%);
21
- -webkit-overflow-scrolling: touch; /* Smooth scroll for iOS */
22
- }
23
- table.responsive th,
24
- table.responsive td,
25
- .breakout > table:not(.does-not-exist) th,
26
- .breakout > table:not(.does-not-exist) td,
27
- .breakout-all > table:not(.does-not-exist) th,
28
- .breakout-all > table:not(.does-not-exist) td {
29
- padding-inline-start: 0;
30
- }
31
- /*```
32
- `table:not(.does-not-exist)` trick (inspired by postcss) is used here to increase specificity against selectors like `&:is(table, .table)`
33
-
34
- \3c !--section:summary-->
35
-
36
- `.responsive` makes a table full-bleed and scroll on mobile, without a need for a redundant wrapper (finally).
37
- Tables inside https://blades.ninja/css/breakout/ are responsive by default.
38
-
39
- \3c !--section:docs-->
40
-
41
- ### Demo table
42
-
43
- | Term | Description <hr class="x2"> | Link |
44
- | ----------------- | -------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | --------------------------------------------------- |
45
- | 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 |
46
-
47
- {.responsive}
48
-
49
- ---
50
-
51
- Living examples: \3c !--A-Z-->
52
- - https://blades.ninja/ai/ide/
53
- - https://blades.ninja/build-awesome-11ty/starters/
54
- - https://blades.ninja/css/frameworks/
55
- - https://blades.ninja/ssg/
56
-
57
- \3c !--section--> */
@@ -1,23 +0,0 @@
1
- /*<!--section:code-->```css */
2
-
3
- /* Follows https://github.com/picocss/pico/blob/main/scss/_index.scss */
4
-
5
- /* Layout */
6
- @import "./_layout";
7
- @import "./breakout";
8
-
9
- /* Content */
10
- @import "./content/_typography";
11
- @import "./link-icon";
12
- @import "./content/_table";
13
- @import "./responsive-table";
14
- @import "./content/_code";
15
-
16
- /* Forms */
17
- @import "./float-label.core";
18
-
19
- /* Components */
20
- @import "./components/_timeline";
21
-
22
- /* Utilities */
23
- @import "./_utilities";
@@ -1,3 +0,0 @@
1
- /* Float Label CSS v2.0.0-alpha */
2
- @import "./float-label.core";
3
- @import "./float-label.theme";
File without changes