UX: Make input sizing consistent across all browsers (#26159)
Previously we had an iOS-specific sizing rule which would increase inputs to `1.07em`, which would bring them over the 16px 'zoom on focus' threshold in some (but technically, not all) situations. This commit does two things: 1. Updates the sizing rule from `1.07em` to `max(1em, 16px)`. Essentially: use the cascaded font size, unless it is smaller than 16px 2. Applies that sizing rule on all platforms. This will make Discourse design/theming more consistent across different devices It also removes some associated CSS rules which no longer make sense.
This commit is contained in:
parent
6d137a41c2
commit
d0d4a363d4
|
@ -30,7 +30,7 @@
|
|||
|
||||
// inputs/textareas in iOS need to be at least 16px to avoid triggering zoom on focus
|
||||
// with base at 15px, the below gives 16.05px
|
||||
--font-size-ios-input: 1.07em;
|
||||
--font-size-input: max(1em, 16px);
|
||||
|
||||
// Common line-heights
|
||||
--line-height-small: 1;
|
||||
|
|
|
@ -114,11 +114,7 @@ $hpad: 0.65em;
|
|||
line-height: normal;
|
||||
box-sizing: border-box;
|
||||
padding: $vpad $hpad;
|
||||
.ios-device & {
|
||||
font-size: var(--font-size-ios-input);
|
||||
padding-top: $vpad * 0.8;
|
||||
padding-bottom: $vpad * 0.8;
|
||||
}
|
||||
font-size: var(--font-size-input);
|
||||
}
|
||||
|
||||
@mixin sticky {
|
||||
|
|
|
@ -9,16 +9,8 @@ body {
|
|||
background-color: var(--secondary);
|
||||
}
|
||||
|
||||
.ios-device {
|
||||
textarea {
|
||||
background-color: var(--secondary);
|
||||
font-size: var(--font-size-ios-input);
|
||||
-webkit-tap-highlight-color: transparent;
|
||||
}
|
||||
|
||||
input#reply-title {
|
||||
-webkit-tap-highlight-color: transparent;
|
||||
}
|
||||
textarea {
|
||||
font-size: var(--font-size-input);
|
||||
}
|
||||
|
||||
blockquote {
|
||||
|
|
Loading…
Reference in New Issue