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.

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

V4.1: Custom range control #23380

Closed
wants to merge 7 commits into from
Closed

Conversation

gijsbotje
Copy link
Contributor

@gijsbotje gijsbotje commented Aug 13, 2017

This pr adds styling to the range input type conform the BS custom control styling
i would like for people on windows to check this codepen: https://codepen.io/gijsbotje/pen/zddJXL
i've tried my best to get it uniform across browsers but i can't really test windows that good

hope you like it :)

schermafbeelding 2017-08-13 om 03 39 23

@wolfy1339
Copy link
Contributor

Please see my PR #19468, I'm sure you can take the styles for Firefox and Chrome for the equivalent of ::-ms-fill-lower

@gijsbotje
Copy link
Contributor Author

@wolfy1339 i tried to make the element look the same accros browsers, that's why in didn't add styling for the progress like you did
only firefox and ie have a way of showing progress

}
}

&::-moz-focus-inner, &:-moz-focusring {
Copy link
Member

Choose a reason for hiding this comment

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

I think we have one rule per line so try updating your patch.

&:active {

&::-webkit-slider-thumb,
&::-moz-range-thumb,

Choose a reason for hiding this comment

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

Line contains trailing whitespace


&:active {

&::-webkit-slider-thumb,

Choose a reason for hiding this comment

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

Line contains trailing whitespace

}
}

&::-moz-focus-inner,

Choose a reason for hiding this comment

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

Line contains trailing whitespace

outline: none;

&::-webkit-slider-thumb,
&::-moz-range-thumb,

Choose a reason for hiding this comment

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

Line contains trailing whitespace

&:focus {
outline: none;

&::-webkit-slider-thumb,

Choose a reason for hiding this comment

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

Line contains trailing whitespace

background-color: $custom-control-indicator-checked-bg;
border: 0;
border-radius: $custom-control-indicator-size;
-webkit-appearance: none;
Copy link
Member

Choose a reason for hiding this comment

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

I believe this should be unprefixed and let autoprefixer do its thing. The same goes for other prefixes.

@gijsbotje
Copy link
Contributor Author

@XhmikosR fixed it all :)

@mdo mdo added the feature label Oct 3, 2017
@gijsbotje gijsbotje changed the title Custom range control V4.1 Custom range control Oct 19, 2017
@gijsbotje gijsbotje changed the title V4.1 Custom range control V4.1: Custom range control Oct 19, 2017
This was referenced Feb 12, 2018
@mdo
Copy link
Member

mdo commented Feb 12, 2018

Conflicts resolved and a few more issues being tackled in #25600. Thanks for this, picking it up there.

@mdo mdo closed this Feb 12, 2018
@gijsbotje gijsbotje deleted the custom-range-input branch April 9, 2018 09:24
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Projects
None yet
Development

Successfully merging this pull request may close these issues.

6 participants