@anyblades/blades 0.28.0-alpha.7 → 0.28.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 (16) hide show
  1. package/README.md +1 -1
  2. package/assets/blades.core.css +153 -117
  3. package/assets/blades.css +216 -168
  4. package/assets/blades.theme.css +52 -55
  5. package/assets/breakout.css +27 -32
  6. package/assets/float-label.core.css +22 -10
  7. package/assets/float-label.css +48 -28
  8. package/assets/float-label.theme.css +25 -17
  9. package/assets/link-icon.css +14 -18
  10. package/assets/pico.blades.css +1211 -0
  11. package/assets/responsive-table.css +8 -4
  12. package/blades.gemspec +1 -1
  13. package/package.json +6 -2
  14. package/src/link-icon.css +4 -4
  15. package/src/pico.blades.css +6 -0
  16. package/postcss.config.js +0 -5
package/assets/blades.theme.css CHANGED
@@ -1,37 +1,45 @@
1
1
  /*
2
2
  <!--section:code-->
3
3
  ```css */
4
- label:has(input:not([type="checkbox"], [type="radio"], [type="range"]), textarea, select),
5
- .has-float-label {
6
- /* Default/fallback state */
7
- > span,
8
- label {
4
+ /* Default/fallback state */
5
+ label:has(input:not([type="checkbox"], [type="radio"], [type="range"]), textarea, select) > span,
6
+ label:has(input:not([type="checkbox"], [type="radio"], [type="range"]), textarea, select) label,
7
+ .has-float-label > span,
8
+ .has-float-label label {
9
9
  padding-inline-start: calc(1rem + 1px); /* match Pico's padding + border */
10
10
  padding-block-start: 0.25rem;
11
11
  opacity: 75%;
12
12
  transition: all 0.25s;
13
13
  }
14
- input,
15
- textarea,
16
- select {
14
+ label:has(input:not([type="checkbox"], [type="radio"], [type="range"]), textarea, select) input,
15
+ label:has(input:not([type="checkbox"], [type="radio"], [type="range"]), textarea, select) textarea,
16
+ label:has(input:not([type="checkbox"], [type="radio"], [type="range"]), textarea, select) select,
17
+ .has-float-label input,
18
+ .has-float-label textarea,
19
+ .has-float-label select {
17
20
  margin-block-start: 0; /* reset Pico */
18
21
  padding-inline-start: 1rem; /* match Pico */
19
22
  padding-block: 1.125rem 0.375rem; /* match Pico's total: 2 x 0.75rem = 1.5rem */
20
-
21
- &::placeholder {
23
+ }
24
+ label:has(input:not([type="checkbox"], [type="radio"], [type="range"]), textarea, select) input::-moz-placeholder, label:has(input:not([type="checkbox"], [type="radio"], [type="range"]), textarea, select) textarea::-moz-placeholder, label: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
25
  opacity: 100%;
26
+ -moz-transition: all 0.25s;
23
27
  transition: all 0.25s;
24
28
  }
25
- }
26
-
27
- /* Enlarged state */
28
- &:has(*:placeholder-shown:not(:focus)) {
29
- > span,
30
- label {
29
+ label:has(input:not([type="checkbox"], [type="radio"], [type="range"]), textarea, select) input::placeholder, label:has(input:not([type="checkbox"], [type="radio"], [type="range"]), textarea, select) textarea::placeholder, label: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 {
30
+ opacity: 100%;
31
+ transition: all 0.25s;
32
+ }
33
+ /* Enlarged state */
34
+ label:has(input:not([type="checkbox"], [type="radio"], [type="range"]), textarea, select):has(*:-moz-placeholder:not(:focus)) > span, label: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 {
35
+ padding-block: 0.75rem; /* match Pico */
36
+ }
37
+ label:has(input:not([type="checkbox"], [type="radio"], [type="range"]), textarea, select):has(*:placeholder-shown:not(:focus)) > span,
38
+ label:has(input:not([type="checkbox"], [type="radio"], [type="range"]), textarea, select):has(*:placeholder-shown:not(:focus)) label,
39
+ .has-float-label:has(*:placeholder-shown:not(:focus)) > span,
40
+ .has-float-label:has(*:placeholder-shown:not(:focus)) label {
31
41
  padding-block: 0.75rem; /* match Pico */
32
42
  }
33
- }
34
- }
35
43
  html {
36
44
  /* Prevent horizontal overflow and scrolling, modern way. */
37
45
  overflow-x: clip;
@@ -47,30 +55,29 @@ body {
47
55
  /* 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. */
48
56
  display: flex;
49
57
  flex-direction: column;
50
- > main {
51
- flex-grow: 1;
52
- }
53
58
 
54
59
  /* Evaluates the last ~4 lines of text blocks to prevent a single word from sitting on the final line. */
55
- text-wrap: pretty;
56
60
 
57
61
  /* Enable global hyphenation */
58
- hyphens: auto;
59
62
  /* ... except for links and tables which are better (safer) without hyphenation */
60
- a,
61
- table {
62
- hyphens: none;
63
+ }
64
+ body > main {
65
+ flex-grow: 1;
63
66
  }
67
+ body {
68
+ text-wrap: pretty;
69
+ hyphens: auto;
64
70
  }
65
- a {
66
- &:not([href^="#"]) {
71
+ body a,
72
+ body table {
73
+ hyphens: none;
74
+ }
75
+ a:not([href^="#"]) {
67
76
  text-decoration-thickness: 1px;
68
-
69
- &:hover {
77
+ }
78
+ a:not([href^="#"]):hover {
70
79
  text-decoration-thickness: 2px;
71
80
  }
72
- }
73
- }
74
81
  h1 {
75
82
  font-size: 2.5em; /* for pico.css & tw-typography */
76
83
  margin-bottom: 1rem; /* for tw-typography */
@@ -78,36 +85,30 @@ h1 {
78
85
  hr {
79
86
  margin-block: 2em; /* for pico.css & tw-typography */
80
87
  }
81
- ul {
82
- ul {
88
+ ul ul {
83
89
  font-size: 87.5%;
84
90
  }
85
- }
86
- pre {
87
- small {
91
+ pre small {
88
92
  opacity: 75%;
89
93
  font-weight: lighter;
90
94
  }
91
- }
92
- table {
93
- th {
95
+ table th {
94
96
  vertical-align: bottom;
95
97
  font-weight: bold;
96
98
  }
97
- td {
99
+ table td {
98
100
  vertical-align: top;
99
101
  }
100
- pre {
102
+ table pre {
101
103
  margin-bottom: 0.25rem;
102
104
  }
103
- }
104
105
  [data-jump-to="top"] {
105
106
  opacity: 25%;
106
- &:hover {
107
+ }
108
+ [data-jump-to="top"]:hover {
107
109
  opacity: 75%;
108
110
  }
109
-
110
- > i {
111
+ [data-jump-to="top"] > i {
111
112
  display: inline-block;
112
113
  padding: 0.25rem 0.375rem;
113
114
  margin: 0.5rem;
@@ -115,18 +116,14 @@ table {
115
116
  color: black;
116
117
  border-color: black;
117
118
  }
118
- }
119
- .breakout,
120
- .breakout-all {
121
- > img,
122
- > figure {
119
+ .breakout > img,
120
+ .breakout > figure,
121
+ .breakout-all > img,
122
+ .breakout-all > figure {
123
123
  margin-bottom: 1rem;
124
124
  }
125
- }
126
- .faded {
127
- a {
125
+ .faded a {
128
126
  text-decoration-style: dotted;
129
127
  }
130
- }
131
128
  /*```
132
129
  <!--section--> */
package/assets/breakout.css CHANGED
@@ -6,51 +6,52 @@
6
6
  /* Prepare the container for breakout elements */
7
7
  padding-inline: 10%;
8
8
  max-width: calc(10% + 65ch + 10%);
9
-
10
- /* Breakout direct children only */
11
- & > * {
12
- &:is(
9
+ }
10
+ /* Breakout direct children only */
11
+ .breakout > *:is(
12
+ table,
13
+ pre,
14
+ figure, video, iframe, canvas,
15
+ img, picture,
16
+
17
+ .breakout-item,
18
+ .breakout-item-max
19
+ ),
20
+ .breakout-all > *:is(
13
21
  table,
14
22
  pre,
15
23
  figure, video, iframe, canvas,
16
24
  img, picture,
17
- /* Custom utility classes for other tags that need to be broken out */
25
+
18
26
  .breakout-item,
19
27
  .breakout-item-max
20
28
  ) {
29
+ width: -moz-fit-content;
21
30
  width: fit-content;
22
31
  min-width: 100%;
23
32
  max-width: 125%;
24
33
  margin-left: 50%;
25
34
  transform: translateX(-50%);
26
35
  }
27
-
28
- /* Respect img/picture min-width */
29
- &:is(img, picture) {
36
+ /* Respect img/picture min-width */
37
+ .breakout > *:is(img, picture), .breakout-all > *:is(img, picture) {
30
38
  min-width: auto;
31
39
  }
32
-
33
- /* Max out the width of the element */
34
- &.breakout-item-max {
40
+ /* Max out the width of the element */
41
+ .breakout > *.breakout-item-max, .breakout-all > *.breakout-item-max {
35
42
  width: 125% !important; /* !important is for cases like figure.breakout-item-max @TODO */
36
43
  }
37
- }
38
- }
39
- .breakout-all > * {
40
- &:is(h2, h3, h4, h5, h6, hr):not([class]) {
44
+ .breakout-all > *:is(h2, h3, h4, h5, h6, hr):not([class]) {
41
45
  position: relative;
42
-
43
- &::before {
46
+ }
47
+ .breakout-all > *:is(h2, h3, h4, h5, h6, hr):not([class])::before {
44
48
  content: "";
45
49
  display: block;
46
50
  position: absolute;
47
51
  background: gray;
48
52
  opacity: 12.5%;
49
53
  }
50
- }
51
-
52
- &:is(h2, h3, h4, h5, h6):not([class]) {
53
- &::before {
54
+ .breakout-all > *:is(h2, h3, h4, h5, h6):not([class])::before {
54
55
  width: 10em;
55
56
  right: 100%;
56
57
  margin-right: 0.8ch;
@@ -59,27 +60,21 @@
59
60
  transform: translateY(-50%);
60
61
  background: linear-gradient(to left, gray, transparent);
61
62
  }
62
-
63
- /* @TODO: add to tricks-wiki why `*` works here, but `&` fails */
64
- &:where(hr + *) {
65
- &::before {
63
+ /* @TODO: add to tricks-wiki why `*` works here, but `&` fails */
64
+ .breakout-all > *:is(h2, h3, h4, h5, h6):not([class]):where(hr + *)::before {
66
65
  display: none !important;
67
66
  }
68
- }
69
- }
70
- &:is(hr) {
67
+ .breakout-all > *:is(hr) {
71
68
  height: 0.5rem;
72
69
  border: none;
73
70
  overflow: visible;
74
-
75
- &::before {
71
+ }
72
+ .breakout-all > *:is(hr)::before {
76
73
  width: 100vw;
77
74
  left: 50%;
78
75
  height: 100%;
79
76
  transform: translateX(-50%);
80
77
  }
81
- }
82
- }
83
78
  /*```
84
79
  <!--section:summary-->
85
80
 
package/assets/float-label.core.css CHANGED
@@ -9,33 +9,45 @@ label:has(input:not([type="checkbox"], [type="radio"], [type="range"]), textarea
9
9
  .has-float-label {
10
10
  display: block;
11
11
  position: relative;
12
- /*
12
+ }
13
+ /*
13
14
  ```
14
15
  Then, we define the default/fallback state (when the float label should be minimized):
15
16
  ```css */
16
- > span,
17
- label {
17
+ label:has(input:not([type="checkbox"], [type="radio"], [type="range"]), textarea, select) > span,
18
+ label:has(input:not([type="checkbox"], [type="radio"], [type="range"]), textarea, select) label,
19
+ .has-float-label > span,
20
+ .has-float-label label {
18
21
  position: absolute;
19
22
  left: 0;
20
23
  top: 0;
21
24
  cursor: text;
22
25
  font-size: 75%;
23
26
  }
24
- /*
27
+ /*
25
28
  ```
26
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:
27
30
  ```css */
28
- *:placeholder-shown:not(:focus)::placeholder {
31
+ label: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(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(input:not([type="checkbox"], [type="radio"], [type="range"]), textarea, select) *:placeholder-shown:not(:focus)::placeholder, .has-float-label *:placeholder-shown:not(:focus)::placeholder {
29
38
  opacity: 0;
30
39
  }
31
- &:has(*:placeholder-shown:not(:focus)) {
32
- > span,
33
- label {
40
+ label:has(input:not([type="checkbox"], [type="radio"], [type="range"]), textarea, select):has(*:-moz-placeholder:not(:focus)) > span, label: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(input:not([type="checkbox"], [type="radio"], [type="range"]), textarea, select):has(*:placeholder-shown:not(:focus)) > span,
45
+ label: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 {
34
48
  font-size: inherit;
35
49
  opacity: 50%;
36
50
  }
37
- }
38
- }
39
51
  /*
40
52
  ```
41
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.
package/assets/float-label.css CHANGED
@@ -10,67 +10,87 @@ label:has(input:not([type="checkbox"], [type="radio"], [type="range"]), textarea
10
10
  .has-float-label {
11
11
  display: block;
12
12
  position: relative;
13
- /*
13
+ }
14
+ /*
14
15
  ```
15
16
  Then, we define the default/fallback state (when the float label should be minimized):
16
17
  ```css */
17
- > span,
18
- label {
18
+ label:has(input:not([type="checkbox"], [type="radio"], [type="range"]), textarea, select) > span,
19
+ label:has(input:not([type="checkbox"], [type="radio"], [type="range"]), textarea, select) label,
20
+ .has-float-label > span,
21
+ .has-float-label label {
19
22
  position: absolute;
20
23
  left: 0;
21
24
  top: 0;
22
25
  cursor: text;
23
26
  font-size: 75%;
24
27
  }
25
- /*
28
+ /*
26
29
  ```
27
30
  Finally, we detect if placeholder is shown, but not in focus. That means we can safely hide it, and enlarge the float label instead:
28
31
  ```css */
29
- *:placeholder-shown:not(:focus)::placeholder {
32
+ label: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 {
33
+ opacity: 0;
34
+ }
35
+ label:has(input:not([type="checkbox"], [type="radio"], [type="range"]), textarea, select) *:-moz-placeholder:not(:focus)::placeholder, .has-float-label *:-moz-placeholder:not(:focus)::placeholder {
36
+ opacity: 0;
37
+ }
38
+ label:has(input:not([type="checkbox"], [type="radio"], [type="range"]), textarea, select) *:placeholder-shown:not(:focus)::placeholder, .has-float-label *:placeholder-shown:not(:focus)::placeholder {
30
39
  opacity: 0;
31
40
  }
32
- &:has(*:placeholder-shown:not(:focus)) {
33
- > span,
34
- label {
41
+ label:has(input:not([type="checkbox"], [type="radio"], [type="range"]), textarea, select):has(*:-moz-placeholder:not(:focus)) > span, label: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 {
42
+ font-size: inherit;
43
+ opacity: 50%;
44
+ }
45
+ label:has(input:not([type="checkbox"], [type="radio"], [type="range"]), textarea, select):has(*:placeholder-shown:not(:focus)) > span,
46
+ label:has(input:not([type="checkbox"], [type="radio"], [type="range"]), textarea, select):has(*:placeholder-shown:not(:focus)) label,
47
+ .has-float-label:has(*:placeholder-shown:not(:focus)) > span,
48
+ .has-float-label:has(*:placeholder-shown:not(:focus)) label {
35
49
  font-size: inherit;
36
50
  opacity: 50%;
37
51
  }
38
- }
39
- }
40
52
  /*
41
53
  ```
42
54
  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.
43
55
 
44
56
  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.
45
57
  <!--section--> */
46
- label:has(input:not([type="checkbox"], [type="radio"], [type="range"]), textarea, select),
47
- .has-float-label {
48
- /* Default/fallback state */
49
- > span,
50
- label {
58
+ /* Default/fallback state */
59
+ label:has(input:not([type="checkbox"], [type="radio"], [type="range"]), textarea, select) > span,
60
+ label:has(input:not([type="checkbox"], [type="radio"], [type="range"]), textarea, select) label,
61
+ .has-float-label > span,
62
+ .has-float-label label {
51
63
  padding-inline-start: calc(1rem + 1px); /* match Pico's padding + border */
52
64
  padding-block-start: 0.25rem;
53
65
  opacity: 75%;
54
66
  transition: all 0.25s;
55
67
  }
56
- input,
57
- textarea,
58
- select {
68
+ label:has(input:not([type="checkbox"], [type="radio"], [type="range"]), textarea, select) input,
69
+ label:has(input:not([type="checkbox"], [type="radio"], [type="range"]), textarea, select) textarea,
70
+ label: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 {
59
74
  margin-block-start: 0; /* reset Pico */
60
75
  padding-inline-start: 1rem; /* match Pico */
61
76
  padding-block: 1.125rem 0.375rem; /* match Pico's total: 2 x 0.75rem = 1.5rem */
62
-
63
- &::placeholder {
77
+ }
78
+ label:has(input:not([type="checkbox"], [type="radio"], [type="range"]), textarea, select) input::-moz-placeholder, label:has(input:not([type="checkbox"], [type="radio"], [type="range"]), textarea, select) textarea::-moz-placeholder, label: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 {
64
79
  opacity: 100%;
80
+ -moz-transition: all 0.25s;
65
81
  transition: all 0.25s;
66
82
  }
67
- }
68
-
69
- /* Enlarged state */
70
- &:has(*:placeholder-shown:not(:focus)) {
71
- > span,
72
- label {
83
+ label:has(input:not([type="checkbox"], [type="radio"], [type="range"]), textarea, select) input::placeholder, label:has(input:not([type="checkbox"], [type="radio"], [type="range"]), textarea, select) textarea::placeholder, label: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(input:not([type="checkbox"], [type="radio"], [type="range"]), textarea, select):has(*:-moz-placeholder:not(:focus)) > span, label: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(input:not([type="checkbox"], [type="radio"], [type="range"]), textarea, select):has(*:placeholder-shown:not(:focus)) > span,
92
+ label: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 {
73
95
  padding-block: 0.75rem; /* match Pico */
74
96
  }
75
- }
76
- }
package/assets/float-label.theme.css CHANGED
@@ -1,31 +1,39 @@
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 {
1
+ /* Default/fallback state */
2
+ label:has(input:not([type="checkbox"], [type="radio"], [type="range"]), textarea, select) > span,
3
+ label:has(input:not([type="checkbox"], [type="radio"], [type="range"]), textarea, select) label,
4
+ .has-float-label > span,
5
+ .has-float-label label {
6
6
  padding-inline-start: calc(1rem + 1px); /* match Pico's padding + border */
7
7
  padding-block-start: 0.25rem;
8
8
  opacity: 75%;
9
9
  transition: all 0.25s;
10
10
  }
11
- input,
12
- textarea,
13
- select {
11
+ label:has(input:not([type="checkbox"], [type="radio"], [type="range"]), textarea, select) input,
12
+ label:has(input:not([type="checkbox"], [type="radio"], [type="range"]), textarea, select) textarea,
13
+ label: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 {
14
17
  margin-block-start: 0; /* reset Pico */
15
18
  padding-inline-start: 1rem; /* match Pico */
16
19
  padding-block: 1.125rem 0.375rem; /* match Pico's total: 2 x 0.75rem = 1.5rem */
17
-
18
- &::placeholder {
20
+ }
21
+ label:has(input:not([type="checkbox"], [type="radio"], [type="range"]), textarea, select) input::-moz-placeholder, label:has(input:not([type="checkbox"], [type="radio"], [type="range"]), textarea, select) textarea::-moz-placeholder, label: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(input:not([type="checkbox"], [type="radio"], [type="range"]), textarea, select) input::placeholder, label:has(input:not([type="checkbox"], [type="radio"], [type="range"]), textarea, select) textarea::placeholder, label: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 {
19
27
  opacity: 100%;
20
28
  transition: all 0.25s;
21
29
  }
22
- }
23
-
24
30
  /* Enlarged state */
25
- &:has(*:placeholder-shown:not(:focus)) {
26
- > span,
27
- label {
31
+ label:has(input:not([type="checkbox"], [type="radio"], [type="range"]), textarea, select):has(*:-moz-placeholder:not(:focus)) > span, label: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(input:not([type="checkbox"], [type="radio"], [type="range"]), textarea, select):has(*:placeholder-shown:not(:focus)) > span,
35
+ label: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 {
28
38
  padding-block: 0.75rem; /* match Pico */
29
39
  }
30
- }
31
- }
package/assets/link-icon.css CHANGED
@@ -1,42 +1,34 @@
1
1
  /* Extends https://github.com/picocss/pico/blob/main/scss/content/_link.scss
2
2
  <!--section:code-->
3
3
  ```css */
4
- a {
5
- /* Use inline flex only if link contains an icon */
6
- &:has(> i) {
4
+ /* Use inline flex only if link contains an icon */
5
+ a:has(> i) {
7
6
  display: inline-flex;
8
7
  gap: 0.375ch; /* =3/8 */
9
8
  overflow-y: clip; /* to work in pair with text-underline-offset in Safari */
10
9
  }
11
- > i {
10
+ a > i {
12
11
  font-style: normal;
13
12
  float: left; /* ✅ Chrome ❌ Safari */
14
13
  text-underline-offset: -2em; /* ❌ Chrome ✅ Safari - to clip it with overflow-y */
15
-
16
- /* Favicons */
17
- > img {
14
+ }
15
+ /* Favicons */
16
+ a > i > img {
18
17
  height: 1.25em;
19
18
  margin-block-start: calc(-0.25em / 2);
20
19
  max-width: none; /* to keep ratio safe */
21
20
  display: inline-block; /* for Tailwind CSS Typography */
22
21
  }
23
-
24
- /* Font Awesome */
25
- &[class^="fa-"],
26
- &[class*=" fa-"] {
22
+ a > i[class^="fa-"],
23
+ a > i[class*=" fa-"] {
27
24
  line-height: inherit;
28
25
  --fa-width: auto;
29
26
  }
30
- &.fa-lg {
27
+ /* Font Awesome */
28
+ a > i.fa-lg {
31
29
  line-height: normal;
32
30
  }
33
- }
34
- }
35
31
  /*```
36
- How we made it: https://codepen.io/editor/anydigital/pen/019d2b94-5616-75dc-a23e-e111869d5237
37
-
38
- **PRO** example of automatic favicons for `11ty`: https://blades.ninja/build-awesome-11ty/processors/#auto-link-favicons
39
-
40
32
  <!--section:summary-->
41
33
 
42
34
  Use *Bl*ades `<i>`-helper to wrap emojis, favicons, or simply drop Font Awesome icons inside links.
@@ -59,4 +51,8 @@ Or even for:
59
51
  <a href="#" style="margin: 0 0 0 1rem"><i>🥷</i> very-very-very-very-very-<br>long-multiline-links</a>
60
52
  </article>
61
53
 
54
+ How we made it: https://codepen.io/editor/anydigital/pen/019d2b94-5616-75dc-a23e-e111869d5237
55
+
56
+ **PRO** example of automatic favicons for `11ty`: https://blades.ninja/build-awesome-11ty/processors/#auto-link-favicons
57
+
62
58
  <!--section--> */