Variables: Initial pass on button variables #138
Conversation
| "padding": ".35em .75em" | ||
| } | ||
| }, | ||
| "ui-btn-xs": { |
There was a problem hiding this comment.
This line seems to have incorrect indentation
|
One of the questions brought up in today's meeting is do we want to use maps as much as I have in this example, or is it better to split things up more than what I did and have more variables and/or more specific maps. |
|
Perhaps there should be |
|
@cvrebert +1 we have a goal of avoiding cascading and specificity |
|
yeah, good point. Part of me didn't want to have additional classes, but overwriting is also icky. |
|
http://view.css-chassis.com/96-buttons-take-two/demos/buttons.html |
|
I'm not entirely thrilled with the design, playing around with it more, just figured I would post what I had so far. |
|
I kind of like the mixins and variables you made. I guess colors/design can wait until we have a few more basic things merged |
| value: { | ||
| "font-weight": 500, | ||
| "margin": ".25em", | ||
| "text-transform": "uppercase" |
There was a problem hiding this comment.
@geekman-rohit --- this is what I was talking about in #139
|
This branch is now using the palette shown in #140 |
|
Ship It. Looks Really Good.! |
|
Button PR has been updated: http://view.css-chassis.com/96-buttons-take-two/demos/buttons.html Added block buttons, button bar, some hover/active/etc colors for the default button, anchor button demo, and input[type=submit] button demo. |
| @include btn-size($ui-btn-md); | ||
| } | ||
|
|
||
| .btn-group { |
There was a problem hiding this comment.
Should probably do this differently so it doesn't rely on cascading markup
Maybe .btn-group--btn on the interior buttons? My only concern there had been there could easily be too many .btn classes on the button elements
There was a problem hiding this comment.
I agree we probably shouldn't rely on cascading markup. Normally in a scenario like this I wouldn't think twice about writing it that way but sense we are writing this with a focus on being easy to override we may want to stick to the one class approach.
To avoid the too many classes problem maybe we could write a mixin for the main button styles and then include it on the .btn and the .btn-group--btn classes? Not sure if that's overkill but it's just a thought.
|
Pinging @geekman-rohit @arschmitz @kristyjy for reviewal. Does this approach look good for buttons and what we wanted for naming conventions? |
|
This looks great to me other than maybe giving the cascading button groups a little more thought. If we do decide to keep the cascading we may want to add notes to the style guide to make sure we have guidelines for deciding when we should and shouldn't cascade. |
|
Update made, removed the need for cascading. |
| } | ||
|
|
||
| @mixin btn-disabled($btn-colors) { | ||
| cursor: default; |
There was a problem hiding this comment.
the cursor property for a disabled button can be a not-allowed, will this be better ?
| }, | ||
| "chassis-gray": { |
There was a problem hiding this comment.
Bring back gray colors to palette!!!
Based on discussions from last week's meeting, here is an initial pass at buttons' variables to help facilitate the discussion on the best practices for organizing and naming variables for jsass.