-
Notifications
You must be signed in to change notification settings - Fork 2
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.
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
Wrong margin-top unit #2
Comments
I created a Sass mixin that replicates the functionality of your CSS generator while providing a fix for the @mixin range-input(
$track-color,
$track-width,
$track-height,
$track-border-radius,
$thumb-color,
$thumb-width,
$thumb-height,
$thumb-border-radius
) {
input[type="range"] {
/*********** Baseline, reset styles ***********/
-webkit-appearance: none;
appearance: none;
background: transparent;
cursor: pointer;
width: $track-width;
/* Removes default focus */
&:focus {
outline: none;
}
/******** Chrome, Safari, Opera and Edge Chromium styles ********/
/* slider track */
&::-webkit-slider-runnable-track {
background-color: $track-color;
border-radius: $track-border-radius;
height: $track-height;
}
/* slider thumb */
&::-webkit-slider-thumb {
-webkit-appearance: none; /* Override default look */
appearance: none;
margin-top: calc(
($track-height - $thumb-height) / 2
); /* Centers thumb on the track */
background-color: $thumb-color;
border-radius: $thumb-border-radius;
height: $thumb-height;
width: $thumb-width;
}
&:focus::-webkit-slider-thumb {
outline: 3px solid $thumb-color;
outline-offset: 0.125rem;
}
/*********** Firefox styles ***********/
/* slider track */
&::-moz-range-track {
background-color: $track-color;
border-radius: $track-border-radius;
height: $track-height;
}
/* slider thumb */
&::-moz-range-thumb {
background-color: $thumb-color;
border: none; /*Removes extra border that FF applies*/
border-radius: $thumb-border-radius;
height: $thumb-height;
width: $thumb-width;
}
&:focus::-moz-range-thumb {
outline: 3px solid $thumb-color;
outline-offset: 0.125rem;
}
}
} |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
The
margin-top
property should not usepx
units.When visiting your CSS generator at https://range-input-css.netlify.app/, we see this CSS declaration:
When using
rem
units for the track or thumb heights, this margin will remain the same when a user selects a non-default font-size. The thumb won't be vertically centered.So it seems that
calc
should be used formargin-top
:The text was updated successfully, but these errors were encountered: