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

Horizontal and vertical gradient mixins variable order forces percentages #9049

Closed
ahecht opened this Issue Aug 3, 2013 · 3 comments

Comments

Projects
None yet
2 participants
@ahecht

ahecht commented Aug 3, 2013

See mixins.less lines 238 and 252 in RC1.

The order of the variables and defaults in the horizontal and vertical gradient mixins cause the CSS to be invalid if percentages aren't included. Changing the variable order to @start-color, @end-color, @start-percent, @end-percent enables passing only 2 colors and still getting a valid gradient using default percentages.

Details:
Horizontal gradient mixin is currently:
.horizontal(@start-color: #555; @start-percent: 0%; @end-color: #333; @end-percent: 100%)

So using #gradient > .horizontal(#fff, #000); breaks the CSS when the second value is used as @start-percent instead of @end-color.

Changing the variable order fixes the problem:
.horizontal(@start-color: #555; @end-color: #333; @start-percent: 0%; @end-percent: 100%)

Gradient percentages can still be passed optionally after the start and end color.

Same for .vertical.

@mdo

This comment has been minimized.

Show comment
Hide comment
@mdo

mdo Aug 3, 2013

Member

Yeah ran into this myself as well. Will likely change it to what you've suggested.

Member

mdo commented Aug 3, 2013

Yeah ran into this myself as well. Will likely change it to what you've suggested.

@mdo

This comment has been minimized.

Show comment
Hide comment
@mdo

mdo Aug 3, 2013

Member

Oh, almost forgot—you can avoid this actually by specifying which variable you want to hit, like so:

#gradient > .horizontal(@start-color: #fff; @end-color: #000);
Member

mdo commented Aug 3, 2013

Oh, almost forgot—you can avoid this actually by specifying which variable you want to hit, like so:

#gradient > .horizontal(@start-color: #fff; @end-color: #000);
@ahecht

This comment has been minimized.

Show comment
Hide comment
@ahecht

ahecht Aug 3, 2013

Oh right! Thanks, that's definitely useful.

ahecht commented Aug 3, 2013

Oh right! Thanks, that's definitely useful.

@mdo mdo closed this in e85b8f3 Aug 5, 2013

stempler pushed a commit to stempler/bootstrap that referenced this issue Apr 11, 2014

stempler pushed a commit to stempler/bootstrap that referenced this issue Nov 4, 2014

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment