Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Jump to bottom

Baseline border fix #5074

Open
wants to merge 16 commits into
base: main
Choose a base branch
from
+16 −4
Open

Baseline border fix #5074

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
16 commits
Select commit Hold shift + click to select a range
bc732f0
adjust p-nudge
dgtlntv Jan 24, 2024
e5bd94f
Merge branch 'canonical:main' into main
dgtlntv Jan 24, 2024
b69c496
Update _base_forms.scss
dgtlntv Jan 24, 2024
62ae512
Merge branch 'main' of https://github.com/dgtlntv/vanilla-framework
dgtlntv Jan 24, 2024
381888f
moved accounting of border to padding
dgtlntv Jan 24, 2024
2acf13a
fix hardcoded value
dgtlntv Jan 24, 2024
df3853c
fixed property ordering
dgtlntv Jan 24, 2024
97922d6
Update _base_forms.scss
dgtlntv Jan 24, 2024
fb6ff2c
actually it has nothing to do with subpixel rendering
dgtlntv Jan 25, 2024
a62c167
Merge branch 'canonical:main' into main
dgtlntv Apr 29, 2024
65846d2
use CSS variable
dgtlntv May 2, 2024
a4862d0
revert details change
dgtlntv May 2, 2024
80d86c4
Merge branch 'canonical:main' into baseline-border-fix
dgtlntv May 2, 2024
544ba7b
removed the label fix from this branch
dgtlntv May 2, 2024
fcfded5
removed unnecessary comment
dgtlntv May 2, 2024
5b33e97
revert CSS var to SCSS var
dgtlntv May 8, 2024
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Jump to
Jump to file
Failed to load files.
Diff view
Diff view
2 changes: 1 addition & 1 deletion scss/_base_button.scss
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -26,7 +26,7 @@
justify-content: center;
line-height: map-get($line-heights, default-text);
margin: 0 $sph--large $input-margin-bottom 0;
padding: $input-vertical-padding $sph--large;
padding: calc($input-vertical-padding - $input-border-thickness) $sph--large;
text-align: center;
text-decoration: none;

Expand Down
2 changes: 1 addition & 1 deletion scss/_base_forms.scss
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -6,7 +6,7 @@
@include vf-b-range;
// Used in buttons, inputs
%bordered-text-vertical-padding {
padding-bottom: $input-vertical-padding;
padding-bottom: calc($input-vertical-padding - $input-border-thickness);
padding-top: $input-vertical-padding;
}

Expand Down
14 changes: 13 additions & 1 deletion scss/_settings_placeholders.scss
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -2,7 +2,19 @@
@import 'settings_colors';

// Global placeholder settings
$input-border-thickness: 1.5px;
Copy link
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Thanks for going extra mile and implementing it as a CSS variable.

But for simplicity and consistency with color variables, I think we can keep the $input-border-thickness SCSS variable, just make it use the value of CSS variable.

So in places where we use it it won't need to change.

To do that I think you just need to define its value as CSS variable:

$input-border-thickness: var(--input-border-thickness);

And this should be it. All places that currently use $input-border-thickness variable will use it as CSS var automatically without need to change their code to explicitly do that.

Copy link
Member Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

That makes sense! I'll look into changing that this week. :)

:root {
// On low pixel density devices a 1.5px border would computed as 1px.
// If we use $input-border-thickness = 1.5px in the calculation and the user is on a low pixel density screen
// then the border is rendered as 1px, but we still eg. subtract 1.5px from the padding which will throw off the baseline grid alignment.
// So we have to check if the users screen is capable of displaying 0.5px steps at runtime. This is only possible with CSS variables.
--vf-input-border-thickness: 1.5px;

@media only screen and (max-resolution: 1.99dppx) {
--vf-input-border-thickness: 1px;
}
}

$input-border-thickness: var(--vf-input-border-thickness);
$bar-thickness: 0.1875rem !default; // 3px at 16px fontsize, expressed in rems so it scales with text if the root font-size changes at a breakpoint
$border-radius: 0; // deprecated, will be removed in future version of Vanilla
$border: $input-border-thickness solid $color-mid-light !default;
Expand Down
2 changes: 1 addition & 1 deletion scss/_settings_spacing.scss
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -117,7 +117,7 @@ $sp-after: (
$spv-nudge: map-get($nudges, p) !default; // top: nudge; bottom: unit - nudge; result: height = exact multiple of base unit
$spv-nudge-compensation: $sp-unit - $spv-nudge !default;
$input-margin-bottom: $sp-unit * 4 - $spv-nudge * 2;
$input-vertical-padding: calc($spv-nudge - 1px);
$input-vertical-padding: $spv-nudge;

// tick element variables
$form-tick-box-size: 1rem;
Expand Down