@marianmeres/stuic 3.154.0 → 3.155.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.
|
@@ -291,6 +291,27 @@ Each size (sm, md, lg) has corresponding tokens:
|
|
|
291
291
|
| `--stuic-input-font-size-{size}` | `--text-sm` | `--text-base` | `--text-lg` |
|
|
292
292
|
| `--stuic-input-min-height-{size}` | `2.5rem` | `2.75rem` | `3rem` |
|
|
293
293
|
|
|
294
|
+
#### iOS zoom guard
|
|
295
|
+
|
|
296
|
+
iOS/iPadOS Safari zooms the whole page when a text control with a computed
|
|
297
|
+
font-size below 16px receives focus — which the `sm` size (14px) triggers. On
|
|
298
|
+
touch-capable Apple devices only, inputs, textareas and selects are therefore
|
|
299
|
+
raised to at least:
|
|
300
|
+
|
|
301
|
+
| Variable | Default | Description |
|
|
302
|
+
| ----------------------------------- | ------- | -------------------------------------------------- |
|
|
303
|
+
| `--stuic-input-font-size-touch-min` | `16px` | Minimum font-size on touch WebKit (iOS zoom guard) |
|
|
304
|
+
|
|
305
|
+
Desktop (including macOS Safari) and Android keep the original, smaller size —
|
|
306
|
+
neither zooms on focus. The guard never shrinks a control, so `md`/`lg` are
|
|
307
|
+
unaffected at their default sizes. Opt out with:
|
|
308
|
+
|
|
309
|
+
```css
|
|
310
|
+
:root {
|
|
311
|
+
--stuic-input-font-size-touch-min: 0px;
|
|
312
|
+
}
|
|
313
|
+
```
|
|
314
|
+
|
|
294
315
|
### Checkbox/Radio Tokens
|
|
295
316
|
|
|
296
317
|
| Variable | Default | Description |
|
|
@@ -42,6 +42,10 @@
|
|
|
42
42
|
--stuic-input-font-size-lg: var(--text-lg);
|
|
43
43
|
--stuic-input-min-height-lg: 3rem;
|
|
44
44
|
|
|
45
|
+
/* Smallest font-size a text control may compute to on touch WebKit.
|
|
46
|
+
See the "IOS ZOOM GUARD" section at the bottom of this file. */
|
|
47
|
+
--stuic-input-font-size-touch-min: 16px;
|
|
48
|
+
|
|
45
49
|
/* Range input */
|
|
46
50
|
--stuic-input-range-thumb-size: 18px;
|
|
47
51
|
--stuic-input-range-track-height: 4px;
|
|
@@ -674,3 +678,77 @@
|
|
|
674
678
|
padding-bottom: 0;
|
|
675
679
|
}
|
|
676
680
|
}
|
|
681
|
+
|
|
682
|
+
/* ============================================================================
|
|
683
|
+
IOS ZOOM GUARD
|
|
684
|
+
|
|
685
|
+
Mobile WebKit (iOS/iPadOS) auto-zooms the viewport when a text control whose
|
|
686
|
+
computed font-size is below 16px receives focus. The `sm` size (14px) trips
|
|
687
|
+
it, so tapping into e.g. a FieldsBuilder input jumps the whole page.
|
|
688
|
+
|
|
689
|
+
Raise the font-size to at least `--stuic-input-font-size-touch-min`, but only
|
|
690
|
+
where the zoom actually happens. Two conditions, both required:
|
|
691
|
+
- `@supports (font: -apple-system-body) or (-webkit-touch-callout: none)`
|
|
692
|
+
→ an Apple/WebKit engine (verified: true in WebKit, false in Blink and
|
|
693
|
+
Gecko). Two signals OR-ed because `-webkit-touch-callout` is iOS-only
|
|
694
|
+
while `-apple-system-body` covers Apple platforms generally.
|
|
695
|
+
- `@media (any-pointer: coarse)` → ...on a touch-capable device, which on
|
|
696
|
+
Apple means iOS/iPadOS. This is what excludes desktop Safari.
|
|
697
|
+
|
|
698
|
+
Desktop (incl. Safari) and Android/Blink — neither of which zooms on focus —
|
|
699
|
+
keep the original, smaller size.
|
|
700
|
+
|
|
701
|
+
`max()` respects consumer overrides of the size tokens and never shrinks a
|
|
702
|
+
control. Opt out with `--stuic-input-font-size-touch-min: 0px`.
|
|
703
|
+
|
|
704
|
+
Deliberately NOT in `@layer components`: unlayered rules beat layered ones,
|
|
705
|
+
so this also wins over the Tailwind `text-sm` utilities some components put
|
|
706
|
+
on their own raw inputs (FieldsBuilder's mono key/value inputs, ...), which
|
|
707
|
+
would otherwise stay at 14px regardless of the size tokens.
|
|
708
|
+
============================================================================ */
|
|
709
|
+
|
|
710
|
+
@supports (font: -apple-system-body) or (-webkit-touch-callout: none) {
|
|
711
|
+
@media (any-pointer: coarse) {
|
|
712
|
+
.stuic-input[data-size="sm"]
|
|
713
|
+
input:not([type="checkbox"]):not([type="radio"]):not([type="range"]):not(
|
|
714
|
+
[type="file"]
|
|
715
|
+
),
|
|
716
|
+
.stuic-input[data-size="sm"] textarea,
|
|
717
|
+
.stuic-input[data-size="sm"] select {
|
|
718
|
+
font-size: max(
|
|
719
|
+
var(--stuic-input-font-size-touch-min),
|
|
720
|
+
var(--stuic-input-font-size-sm)
|
|
721
|
+
);
|
|
722
|
+
}
|
|
723
|
+
|
|
724
|
+
.stuic-input[data-size="md"]
|
|
725
|
+
input:not([type="checkbox"]):not([type="radio"]):not([type="range"]):not(
|
|
726
|
+
[type="file"]
|
|
727
|
+
),
|
|
728
|
+
.stuic-input[data-size="md"] textarea,
|
|
729
|
+
.stuic-input[data-size="md"] select,
|
|
730
|
+
.stuic-input:not([data-size])
|
|
731
|
+
input:not([type="checkbox"]):not([type="radio"]):not([type="range"]):not(
|
|
732
|
+
[type="file"]
|
|
733
|
+
),
|
|
734
|
+
.stuic-input:not([data-size]) textarea,
|
|
735
|
+
.stuic-input:not([data-size]) select {
|
|
736
|
+
font-size: max(
|
|
737
|
+
var(--stuic-input-font-size-touch-min),
|
|
738
|
+
var(--stuic-input-font-size-md)
|
|
739
|
+
);
|
|
740
|
+
}
|
|
741
|
+
|
|
742
|
+
.stuic-input[data-size="lg"]
|
|
743
|
+
input:not([type="checkbox"]):not([type="radio"]):not([type="range"]):not(
|
|
744
|
+
[type="file"]
|
|
745
|
+
),
|
|
746
|
+
.stuic-input[data-size="lg"] textarea,
|
|
747
|
+
.stuic-input[data-size="lg"] select {
|
|
748
|
+
font-size: max(
|
|
749
|
+
var(--stuic-input-font-size-touch-min),
|
|
750
|
+
var(--stuic-input-font-size-lg)
|
|
751
|
+
);
|
|
752
|
+
}
|
|
753
|
+
}
|
|
754
|
+
}
|