This repository was archived by the owner on Dec 11, 2021. It is now read-only.
-
Notifications
You must be signed in to change notification settings - Fork 67
Variables: Initial pass on button variables #138
Closed
Closed
Changes from all commits
Commits
Show all changes
19 commits
Select commit
Hold shift + click to select a range
dbfc7b9
Variables: Initial pass on button variables
sfrisk e5caf9e
Buttons: Fixing spacing issue
sfrisk f6f2b11
Buttons: Base Pass on button sizes and button colors.
sfrisk 55fbd8c
Buttons: Fix typo on h2
sfrisk d13b067
Linting: Fixed linting and linting errors
sfrisk c319292
Merge branch '96-buttons-take-two' of https://github.com/sfrisk/css-c…
sfrisk 210edcb
Buttons: Playing around with some spacing and variables
sfrisk 37a638c
Linting: fixed error with js linting
sfrisk 81e6191
Colors: Initial pass on updated palette.
sfrisk 39c0b5b
Merge branch 'palette' into 96-buttons-take-two
sfrisk 4b2f1e9
Buttons: Adding Palette for example
sfrisk b6e7feb
Buttons: colors updated, styling updated, added disabled styles
sfrisk f84475b
Buttons: Playing around with shadows
sfrisk b58b5f2
Buttons: Demos for buttons as links & input
sfrisk c7acbce
Buttons: Adding Button Bar, Block Buttons
sfrisk 63024ce
Buttons: Making all buttons not rely on cascading styling
sfrisk edad94c
Buttons: Fixing spacing
sfrisk dc506a9
Buttons: Color and shadow update
sfrisk 2bfa912
Buttons: disabled cursor is not-allowed
sfrisk File filter
Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
There are no files selected for viewing
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,259 @@ | ||
| <!doctype html> | ||
| <html> | ||
| <head> | ||
| <meta charset="utf-8"> | ||
| <title>CSS Chassis - Typography</title> | ||
| <meta name="description" content="Button skeleton for styling"> | ||
| <meta name="viewport" content="width=device-width, initial-scale=1"> | ||
| <link rel="stylesheet" href="../dist/css/chassis.css"> | ||
| <link rel="stylesheet" href="demos.css"> | ||
| <link href="http://fonts.googleapis.com/css?family=Source+Sans+Pro:400,600,700,400italic,700italic" rel="stylesheet"> | ||
| </head> | ||
| <body> | ||
|
|
||
| <h1>CSS Chassis</h1> | ||
|
|
||
| <h2>Extra Small Buttons</h2> | ||
| <p> | ||
| <button class="btn btn-default btn-xs">Default</button> | ||
| <button class="btn btn-primary btn-xs">Primary</button> | ||
| <button class="btn btn-success btn-xs">Success</button> | ||
| <button class="btn btn-info btn-xs">Info</button> | ||
| <button class="btn btn-warning btn-xs">Warning</button> | ||
| <button class="btn btn-danger btn-xs">Danger</button> | ||
| </p> | ||
|
|
||
| <h3>Extra Small Disabled</h3> | ||
| <p> | ||
| <button disabled="disabled" class="btn btn-default btn-xs">Default</button> | ||
| <button disabled="disabled" class="btn btn-primary btn-xs">Primary</button> | ||
| <button disabled="disabled" class="btn btn-success btn-xs">Success</button> | ||
| <button disabled="disabled" class="btn btn-info btn-xs">Info</button> | ||
| <button disabled="disabled" class="btn btn-warning btn-xs">Warning</button> | ||
| <button disabled="disabled" class="btn btn-danger btn-xs">Danger</button> | ||
| </p> | ||
|
|
||
| <h3>Extra Small Active</h3> | ||
| <p> | ||
| <button class="btn btn-default btn-xs active">Default</button> | ||
| <button class="btn btn-primary btn-xs active">Primary</button> | ||
| <button class="btn btn-success btn-xs active">Success</button> | ||
| <button class="btn btn-info btn-xs active">Info</button> | ||
| <button class="btn btn-warning btn-xs active">Warning</button> | ||
| <button class="btn btn-danger btn-xs active">Danger</button> | ||
| </p> | ||
|
|
||
| <h3>Extra Small Focus</h3> | ||
| <p> | ||
| <button class="btn btn-default btn-xs focus">Default</button> | ||
| <button class="btn btn-primary btn-xs focus">Primary</button> | ||
| <button class="btn btn-success btn-xs focus">Success</button> | ||
| <button class="btn btn-info btn-xs focus">Info</button> | ||
| <button class="btn btn-warning btn-xs focus">Warning</button> | ||
| <button class="btn btn-danger btn-xs focus">Danger</button> | ||
| </p> | ||
|
|
||
| <h3>Extra Small Hover</h3> | ||
| <p> | ||
| <button class="btn btn-default btn-xs hover">Default</button> | ||
| <button class="btn btn-primary btn-xs hover">Primary</button> | ||
| <button class="btn btn-success btn-xs hover">Success</button> | ||
| <button class="btn btn-info btn-xs hover">Info</button> | ||
| <button class="btn btn-warning btn-xs hover">Warning</button> | ||
| <button class="btn btn-danger btn-xs hover">Danger</button> | ||
| </p> | ||
|
|
||
|
|
||
| <h2>Small Buttons</h2> | ||
| <p> | ||
| <button class="btn btn-default btn-sm">Default</button> | ||
| <button class="btn btn-primary btn-sm">Primary</button> | ||
| <button class="btn btn-success btn-sm">Success</button> | ||
| <button class="btn btn-info btn-sm">Info</button> | ||
| <button class="btn btn-warning btn-sm">Warning</button> | ||
| <button class="btn btn-danger btn-sm">Danger</button> | ||
| </p> | ||
|
|
||
| <h3>Small Disabled</h3> | ||
| <p> | ||
| <button disabled="disabled" class="btn btn-default btn-sm">Default</button> | ||
| <button disabled="disabled" class="btn btn-primary btn-sm">Primary</button> | ||
| <button disabled="disabled" class="btn btn-success btn-sm">Success</button> | ||
| <button disabled="disabled" class="btn btn-info btn-sm">Info</button> | ||
| <button disabled="disabled" class="btn btn-warning btn-sm">Warning</button> | ||
| <button disabled="disabled" class="btn btn-danger btn-sm">Danger</button> | ||
| </p> | ||
|
|
||
| <h3>Small Active</h3> | ||
| <p> | ||
| <button class="btn btn-default btn-sm active">Default</button> | ||
| <button class="btn btn-primary btn-sm active">Primary</button> | ||
| <button class="btn btn-success btn-sm active">Success</button> | ||
| <button class="btn btn-info btn-sm active">Info</button> | ||
| <button class="btn btn-warning btn-sm active">Warning</button> | ||
| <button class="btn btn-danger btn-sm active">Danger</button> | ||
| </p> | ||
|
|
||
| <h3>Small Focus</h3> | ||
| <p> | ||
| <button class="btn btn-default btn-sm focus">Default</button> | ||
| <button class="btn btn-primary btn-sm focus">Primary</button> | ||
| <button class="btn btn-success btn-sm focus">Success</button> | ||
| <button class="btn btn-info btn-sm focus">Info</button> | ||
| <button class="btn btn-warning btn-sm focus">Warning</button> | ||
| <button class="btn btn-danger btn-sm focus">Danger</button> | ||
| </p> | ||
|
|
||
| <h3>Small Hover</h3> | ||
| <p> | ||
| <button class="btn btn-default btn-sm hover">Default</button> | ||
| <button class="btn btn-primary btn-sm hover">Primary</button> | ||
| <button class="btn btn-success btn-sm hover">Success</button> | ||
| <button class="btn btn-info btn-sm hover">Info</button> | ||
| <button class="btn btn-warning btn-sm hover">Warning</button> | ||
| <button class="btn btn-danger btn-sm hover">Danger</button> | ||
| </p> | ||
|
|
||
| <h2>Medium Buttons</h2> | ||
| <p> | ||
| <button class="btn btn-default btn-md">Default</button> | ||
| <button class="btn btn-primary btn-md">Primary</button> | ||
| <button class="btn btn-success btn-md">Success</button> | ||
| <button class="btn btn-info btn-md">Info</button> | ||
| <button class="btn btn-warning btn-md">Warning</button> | ||
| <button class="btn btn-danger btn-md">Danger</button> | ||
| </p> | ||
|
|
||
| <h3>Medium Disabled</h3> | ||
| <p> | ||
| <button disabled="disabled" class="btn btn-default btn-md">Default</button> | ||
| <button disabled="disabled" class="btn btn-primary btn-md">Primary</button> | ||
| <button disabled="disabled" class="btn btn-success btn-md">Success</button> | ||
| <button disabled="disabled" class="btn btn-info btn-md">Info</button> | ||
| <button disabled="disabled" class="btn btn-warning btn-md">Warning</button> | ||
| <button disabled="disabled" class="btn btn-danger btn-md">Danger</button> | ||
| </p> | ||
|
|
||
| <h3>Medium Active</h3> | ||
| <p> | ||
| <button class="btn btn-default btn-md active">Default</button> | ||
| <button class="btn btn-primary btn-md active">Primary</button> | ||
| <button class="btn btn-success btn-md active">Success</button> | ||
| <button class="btn btn-info btn-md active">Info</button> | ||
| <button class="btn btn-warning btn-md active">Warning</button> | ||
| <button class="btn btn-danger btn-md active">Danger</button> | ||
| </p> | ||
|
|
||
| <h3>Medium Focus</h3> | ||
| <p> | ||
| <button class="btn btn-default btn-md focus">Default</button> | ||
| <button class="btn btn-primary btn-md focus">Primary</button> | ||
| <button class="btn btn-success btn-md focus">Success</button> | ||
| <button class="btn btn-info btn-md focus">Info</button> | ||
| <button class="btn btn-warning btn-md focus">Warning</button> | ||
| <button class="btn btn-danger btn-md focus">Danger</button> | ||
| </p> | ||
|
|
||
| <h3>Medium Hover</h3> | ||
| <p> | ||
| <button class="btn btn-default btn-md hover">Default</button> | ||
| <button class="btn btn-primary btn-md hover">Primary</button> | ||
| <button class="btn btn-success btn-md hover">Success</button> | ||
| <button class="btn btn-info btn-md hover">Info</button> | ||
| <button class="btn btn-warning btn-md hover">Warning</button> | ||
| <button class="btn btn-danger btn-md hover">Danger</button> | ||
| </p> | ||
|
|
||
| <h2>Large Buttons</h2> | ||
| <p> | ||
| <button class="btn btn-default btn-lg">Default</button> | ||
| <button class="btn btn-primary btn-lg">Primary</button> | ||
| <button class="btn btn-success btn-lg">Success</button> | ||
| <button class="btn btn-info btn-lg">Info</button> | ||
| <button class="btn btn-warning btn-lg">Warning</button> | ||
| <button class="btn btn-danger btn-lg">Danger</button> | ||
| </p> | ||
|
|
||
| <h3>Large Disabled</h3> | ||
| <p> | ||
| <button disabled="disabled" class="btn btn-default btn-lg">Default</button> | ||
| <button disabled="disabled" class="btn btn-primary btn-lg">Primary</button> | ||
| <button disabled="disabled" class="btn btn-success btn-lg">Success</button> | ||
| <button disabled="disabled" class="btn btn-info btn-lg">Info</button> | ||
| <button disabled="disabled" class="btn btn-warning btn-lg">Warning</button> | ||
| <button disabled="disabled" class="btn btn-danger btn-lg">Danger</button> | ||
| </p> | ||
|
|
||
| <h3>Large Active</h3> | ||
| <p> | ||
| <button class="btn btn-default btn-lg active">Default</button> | ||
| <button class="btn btn-primary btn-lg active">Primary</button> | ||
| <button class="btn btn-success btn-lg active">Success</button> | ||
| <button class="btn btn-info btn-lg active">Info</button> | ||
| <button class="btn btn-warning btn-lg active">Warning</button> | ||
| <button class="btn btn-danger btn-lg active">Danger</button> | ||
| </p> | ||
|
|
||
| <h3>Large Focus</h3> | ||
| <p> | ||
| <button class="btn btn-default btn-lg focus">Default</button> | ||
| <button class="btn btn-primary btn-lg focus">Primary</button> | ||
| <button class="btn btn-success btn-lg focus">Success</button> | ||
| <button class="btn btn-info btn-lg focus">Info</button> | ||
| <button class="btn btn-warning btn-lg focus">Warning</button> | ||
| <button class="btn btn-danger btn-lg focus">Danger</button> | ||
| </p> | ||
|
|
||
| <h3>Large Hover</h3> | ||
| <p> | ||
| <button class="btn btn-default btn-lg hover">Default</button> | ||
| <button class="btn btn-primary btn-lg hover">Primary</button> | ||
| <button class="btn btn-success btn-lg hover">Success</button> | ||
| <button class="btn btn-info btn-lg hover">Info</button> | ||
| <button class="btn btn-warning btn-lg hover">Warning</button> | ||
| <button class="btn btn-danger btn-lg hover">Danger</button> | ||
| </p> | ||
|
|
||
| <h3>Anchor Links as Buttons</h3> | ||
| <p> | ||
| <a href="#" class="btn btn-default btn-md" role="button">Default</a> | ||
| <a href="#" class="btn btn-primary btn-md" role="button">Primary</a> | ||
| <a href="#" class="btn btn-success btn-md" role="button">Success</a> | ||
| <a href="#" class="btn btn-info btn-md" role="button">Info</a> | ||
| <a href="#" class="btn btn-warning btn-md" role="button">Warning</a> | ||
| <a href="#" class="btn btn-danger btn-md" role="button">Danger</a> | ||
| </p> | ||
|
|
||
| <h3>Input[type=submit]</h3> | ||
| <p> | ||
| <input type="submit" class="btn btn-default btn-md" value="Default"> | ||
| <input type="submit" class="btn btn-primary btn-md" value="Primary"> | ||
| <input type="submit" class="btn btn-success btn-md" value="Success"> | ||
| <input type="submit" class="btn btn-info btn-md" value="Info"> | ||
| <input type="submit" class="btn btn-warning btn-md" value="Warning"> | ||
| <input type="submit" class="btn btn-danger btn-md" value="Danger"> | ||
| </p> | ||
|
|
||
| <h2>Block Buttons</h2> | ||
| <p> | ||
| <button class="btn btn-default btn-lg btn-block">Default</button> | ||
| <button class="btn btn-primary btn-lg btn-block">Primary</button> | ||
| <button class="btn btn-success btn-lg btn-block">Success</button> | ||
| <button class="btn btn-info btn-lg btn-block">Info</button> | ||
| <button class="btn btn-warning btn-lg btn-block">Warning</button> | ||
| <button class="btn btn-danger btn-lg btn-block">Danger</button> | ||
| </p> | ||
|
|
||
| <h2>Button Bar</h2> | ||
| <p class="btn-group"> | ||
| <button class="btn-group--btn btn-default btn-lg">Default</button> | ||
| <button class="btn-group--btn btn-primary btn-lg">Primary</button> | ||
| <button class="btn-group--btn btn-success btn-lg">Success</button> | ||
| <button class="btn-group--btn btn-info btn-lg">Info</button> | ||
| <button class="btn-group--btn btn-warning btn-lg">Warning</button> | ||
| <button class="btn-group--btn btn-danger btn-lg">Danger</button> | ||
| </p> | ||
|
|
||
|
|
||
| </body> | ||
| </html> |
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -1,5 +1,5 @@ | ||
| body { | ||
| max-width: 700px; | ||
| max-width: 900px; | ||
| margin: 3em auto; | ||
| padding: 0 1em; | ||
| } |
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,13 @@ | ||
| /* | ||
| * ========================================================================== | ||
| * Misc. Sass Functions to ease calculations | ||
| * ========================================================================== | ||
| */ | ||
|
|
||
| @function map-deep-get($map, $keys...) { | ||
| $value: $map; | ||
| @each $key in $keys { | ||
| $value: map-get($value, $key); | ||
| } | ||
| @return $value; | ||
| } |
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,87 @@ | ||
| /* | ||
| * ========================================================================== | ||
| * Buttons | ||
| * ========================================================================== | ||
| */ | ||
|
|
||
| @import | ||
| "dist/chassis", | ||
| "mixins"; | ||
|
|
||
| .btn-group { | ||
| position: relative; | ||
| display: inline-block; | ||
| vertical-align: middle; | ||
|
|
||
| &--btn { | ||
| float: left; | ||
| @include btn(0); | ||
| } | ||
|
|
||
| &--btn:first-child { | ||
| border-top-right-radius: 0; | ||
| border-bottom-right-radius: 0; | ||
| } | ||
|
|
||
| &--btn:last-child { | ||
| border-top-left-radius: 0; | ||
| border-bottom-left-radius: 0; | ||
| } | ||
|
|
||
| &--btn:not(:first-child):not(:last-child) { | ||
| border-radius: 0; | ||
| } | ||
| } | ||
|
|
||
| .btn-block { | ||
| display: block; | ||
| width: 100%; | ||
| } | ||
|
|
||
| .btn { | ||
| @include btn( map-get($ui-btn, margin)); | ||
| } | ||
|
|
||
| /* Button Colors */ | ||
|
|
||
| .btn-default { | ||
| @include btn-colors($ui-btn-default); | ||
| } | ||
|
|
||
| .btn-primary { | ||
| @include btn-colors($ui-btn-primary); | ||
| } | ||
|
|
||
| .btn-success { | ||
| @include btn-colors($ui-btn-success); | ||
| } | ||
|
|
||
| .btn-info { | ||
| @include btn-colors($ui-btn-info); | ||
| } | ||
|
|
||
| .btn-warning { | ||
| @include btn-colors($ui-btn-warning); | ||
| } | ||
|
|
||
| .btn-danger { | ||
| @include btn-colors($ui-btn-danger ); | ||
| } | ||
|
|
||
| /* Button Sizes */ | ||
|
|
||
| .btn-lg { | ||
| @include btn-size($ui-btn-lg); | ||
| } | ||
|
|
||
| .btn-md { | ||
| @include btn-size($ui-btn-md); | ||
| } | ||
|
|
||
| .btn-sm { | ||
| @include btn-size($ui-btn-sm); | ||
| } | ||
|
|
||
| .btn-xs { | ||
| @include btn-size($ui-btn-xs); | ||
| } | ||
Oops, something went wrong.
Add this suggestion to a batch that can be applied as a single commit.
This suggestion is invalid because no changes were made to the code.
Suggestions cannot be applied while the pull request is closed.
Suggestions cannot be applied while viewing a subset of changes.
Only one suggestion per line can be applied in a batch.
Add this suggestion to a batch that can be applied as a single commit.
Applying suggestions on deleted lines is not supported.
You must change the existing code in this line in order to create a valid suggestion.
Outdated suggestions cannot be applied.
This suggestion has been applied or marked resolved.
Suggestions cannot be applied from pending reviews.
Suggestions cannot be applied on multi-line comments.
Suggestions cannot be applied while the pull request is queued to merge.
Suggestion cannot be applied right now. Please check back later.
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
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.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
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.