IntenseWebs/discourse
3
0
Fork 0
mirror of https://github.com/discourse/discourse.git synced 2025-02-20 11:48:26 -06:00
Code Issues Packages Projects Releases Wiki Activity

UX: Make input sizing consistent across all browsers (#26159)

Browse Source 
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:
David Taylor 2024-03-20 16:23:44 +00:00 committed by GitHub
parent 6d137a41c2
commit d0d4a363d4
No known key found for this signature in database
GPG Key ID: B5690EEEBB952194
3 changed files with 4 additions and 16 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

2
app/assets/stylesheets/common/font-variables.scss
View File

@ -30,7 +30,7 @@
// inputs/textareas in iOS need to be at least 16px to avoid triggering zoom on focus // 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 // with base at 15px, the below gives 16.05px
--font-size-ios-input: 1.07em; --font-size-input: max(1em, 16px);
// Common line-heights // Common line-heights
--line-height-small: 1; --line-height-small: 1;

6
app/assets/stylesheets/common/foundation/mixins.scss
View File

@ -114,11 +114,7 @@ $hpad: 0.65em;
line-height: normal; line-height: normal;
box-sizing: border-box; box-sizing: border-box;
padding: $vpad $hpad; padding: $vpad $hpad;
.ios-device & { font-size: var(--font-size-input);
font-size: var(--font-size-ios-input);
padding-top: $vpad * 0.8;
padding-bottom: $vpad * 0.8;
}
} }
@mixin sticky { @mixin sticky {

12
app/assets/stylesheets/mobile/discourse.scss
View File

@ -9,16 +9,8 @@ body {
background-color: var(--secondary); background-color: var(--secondary);
} }
.ios-device { textarea {
textarea { font-size: var(--font-size-input);
background-color: var(--secondary);
font-size: var(--font-size-ios-input);
-webkit-tap-highlight-color: transparent;
}
input#reply-title {
-webkit-tap-highlight-color: transparent;
}
} }
blockquote { blockquote {