Skip to content
This repository was archived by the owner on Dec 11, 2021. It is now read-only.

Buttons: Initial pass at buttons, covering sizes, options, disabled, active, focus, and hover states #97

Closed
wants to merge 17 commits into from
Closed

Buttons: Initial pass at buttons, covering sizes, options, disabled, active, focus, and hover states #97

Show file tree
Hide file tree
Changes from 1 commit
Commits
Show all changes
17 commits
Select commit Hold shift + click to select a range
88a4de6
Buttons: Initial pass at buttons, covering sizes, options, and states
sfrisk Jul 17, 2015
b672e22
Buttons: Spaces to Tabs fix for buttons.html
sfrisk Jul 17, 2015
889e914
Buttons: Switched to Mixins
sfrisk Jul 17, 2015
10efba1
Buttons: Removing box-sizing
sfrisk Jul 17, 2015
12be9ed
Buttons: Adding reset demo
sfrisk Jul 17, 2015
f425e31
Buttons: IE=edge and adding a type=button example
sfrisk Jul 17, 2015
ff413db
Buttons: Added classes for each state, demos, cleaned up variable names
sfrisk Jul 17, 2015
765b19b
Buttons: bug fix
sfrisk Jul 17, 2015
5fa9d3c
Buttons: Fixed Typos
sfrisk Jul 20, 2015
b88bbbd
Buttons: Removing # of background declarations per selector
sfrisk Jul 20, 2015
5c0a7ec
Buttons: Fixing typos in demo file
sfrisk Jul 20, 2015
ccc4bf9
Buttons: Fixing css linting breaking the build
sfrisk Jul 23, 2015
e23fde7
Buttons: Pull in jsass-vars into button variables
sfrisk Aug 16, 2015
3cb1565
Buttons: Adding Success/Info/Warning/Danger buttons
sfrisk Aug 18, 2015
e74e4db
Buttons: Adjusting rounded corner variable
sfrisk Aug 18, 2015
005be5e
Buttons: linking to min file
sfrisk Aug 18, 2015
435dd5e
Buttons: Add pointer cursor to buttons
sfrisk Aug 18, 2015
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
Prev Previous commit
Next Next commit
Buttons: Switched to Mixins
  • Loading branch information
@sfrisk
sfrisk committed Aug 15, 2015
commit 889e914f6deda3f8a41f6a4f4f54b6e846136d16
133 changes: 45 additions & 88 deletions scss/atoms/buttons/_buttons.scss
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -3,142 +3,99 @@
* Buttons
* ==========================================================================
*/
@import "mixins";

@import "extends";
/* These colors won't remain here, will be removed with jsass */
$background: #fff;
$chassis-blue: #4fc0c8;
$chassis-gray-light: #f2f2f2;
$chassis-gray-dark: #383838;

Copy link
Contributor

Choose a reason for hiding this comment

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

I'm wondering if we should name the variables based on their purpose rather than color? This way when they get changed in the theme roller a person wouldn't create a purple button that is called "blue".

Copy link
Contributor Author

Choose a reason for hiding this comment

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

Yeah, I should switch these to stuff like $button-primary-background, and $button-primary-color. That was something to put in their temporarily, but you're right, I should have better variable names.

.ui-button {
&--default {
@extend %ui-button;
@extend %ui-button--default;
@extend %ui-button--default--hover;
@extend %ui-button--default--focus;
@extend %ui-button--default--active;
@extend %ui-button--default--disabled;
@extend %ui-button--default-size;
@include ui-button($chassis-gray-dark, $background);
@include ui-button-sizes(default);
@include ui-button-states($chassis-gray-dark, $background);

&--disabled {
@extend %ui-button;
@extend %ui-button--default;
@extend %ui-button--disabled;
@extend %ui-button--default-size;
@include ui-button-sizes(default);
@include ui-button($chassis-gray-dark, $background, true);
}

&--large {
@extend %ui-button;
@extend %ui-button--default;
@extend %ui-button--default--hover;
@extend %ui-button--default--focus;
@extend %ui-button--default--active;
@extend %ui-button--default--disabled;
@extend %ui-button--large;
@include ui-button($chassis-gray-dark, $background);
@include ui-button-sizes(large);
@include ui-button-states($chassis-gray-dark, $background);

&--disabled {
@extend %ui-button;
@extend %ui-button--default;
@extend %ui-button--disabled;
@extend %ui-button--large;
@include ui-button($chassis-gray-dark, $background, true);
@include ui-button-sizes(large);
}
}

&--small {
@extend %ui-button;
@extend %ui-button--default;
@extend %ui-button--default--hover;
@extend %ui-button--default--focus;
@extend %ui-button--default--active;
@extend %ui-button--default--disabled;
@extend %ui-button--small;
@include ui-button($chassis-gray-dark, $background);
@include ui-button-sizes(small);
@include ui-button-states($chassis-gray-dark, $background);

&--disabled {
@extend %ui-button;
@extend %ui-button--default;
@extend %ui-button--disabled;
@extend %ui-button--small;
@include ui-button($chassis-gray-dark, $background, true);
@include ui-button-sizes(small);
}
}

&--extra-small {
@extend %ui-button;
@extend %ui-button--default;
@extend %ui-button--default--hover;
@extend %ui-button--default--focus;
@extend %ui-button--default--active;
@extend %ui-button--default--disabled;
@extend %ui-button--extra-small;
@include ui-button($chassis-gray-dark, $background);
@include ui-button-states($chassis-gray-dark, $background);

&--disabled {
@extend %ui-button;
@extend %ui-button--default;
@extend %ui-button--disabled;
@extend %ui-button--extra-small;
@include ui-button($chassis-gray-dark, $background, true);
@include ui-button-sizes(extra-small);
}
}
}

&--primary {
@extend %ui-button;
@extend %ui-button--primary;
@extend %ui-button--primary--hover;
@extend %ui-button--primary--focus;
@extend %ui-button--primary--active;
@extend %ui-button--primary--disabled;
@extend %ui-button--default-size;
@include ui-button($chassis-gray-light, $chassis-blue);
@include ui-button-sizes(default);
@include ui-button-states($chassis-gray-light, $chassis-blue);

&--disabled {
@extend %ui-button;
@extend %ui-button--primary;
@extend %ui-button--disabled;
@extend %ui-button--default-size;
@include ui-button($chassis-gray-light, $chassis-blue, true);
@include ui-button-sizes(default);
}

&--large {
@extend %ui-button;
@extend %ui-button--primary;
@extend %ui-button--primary--hover;
@extend %ui-button--primary--focus;
@extend %ui-button--primary--active;
@extend %ui-button--primary--disabled;
@extend %ui-button--large;
@include ui-button($chassis-gray-light, $chassis-blue);
@include ui-button-sizes(large);
@include ui-button-states($chassis-gray-light, $chassis-blue);

&--disabled {
@extend %ui-button;
@extend %ui-button--primary;
@extend %ui-button--disabled;
@extend %ui-button--large;
@include ui-button($chassis-gray-light, $chassis-blue, true);
@include ui-button-sizes(large);
}
}

&--small {
@extend %ui-button;
@extend %ui-button--primary;
@extend %ui-button--primary--hover;
@extend %ui-button--primary--focus;
@extend %ui-button--primary--active;
@extend %ui-button--primary--disabled;
@extend %ui-button--small;
@include ui-button($chassis-gray-light, $chassis-blue);
@include ui-button-sizes(small);
@include ui-button-states($chassis-gray-light, $chassis-blue);

&--disabled {
@extend %ui-button;
@extend %ui-button--primary;
@extend %ui-button--disabled;
@extend %ui-button--small;
@include ui-button($chassis-gray-light, $chassis-blue, true);
@include ui-button-sizes(small);
}
}

&--extra-small {
@extend %ui-button;
@extend %ui-button--primary;
@extend %ui-button--primary--hover;
@extend %ui-button--primary--focus;
@extend %ui-button--primary--active;
@extend %ui-button--primary--disabled;
@extend %ui-button--extra-small;
@include ui-button($chassis-gray-light, $chassis-blue);
@include ui-button-sizes(extra-small);
@include ui-button-states($chassis-gray-light, $chassis-blue);

&--disabled {
@extend %ui-button;
@extend %ui-button--primary;
@extend %ui-button--disabled;
@extend %ui-button--extra-small;
@include ui-button($chassis-gray-light, $chassis-blue, true);
@include ui-button-sizes(extra-small);
}
}
}
Expand Down
115 changes: 0 additions & 115 deletions scss/atoms/buttons/_extends.scss
View file
Open in desktop

This file was deleted.

65 changes: 65 additions & 0 deletions scss/atoms/buttons/_mixins.scss
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,65 @@
/*
* ==========================================================================
* Buttons (Mixins)
* ==========================================================================
*/

@mixin ui-button($color, $bgcolor, $disabled: false) {
Copy link
Contributor

Choose a reason for hiding this comment

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

Consider:

vertical-align: middle;
touch-action: manipulation;
-VENDORS-user-select: none;

background: $bgcolor;
border: 0;
box-sizing: border-box;
color: $color;
display: inline-block;
font-weight: 500;
margin: .25em;
text-align: center;
text-decoration: none;
text-transform: uppercase;
Copy link
Contributor

Choose a reason for hiding this comment

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

Too opinionated, imho

Copy link
Contributor Author

Choose a reason for hiding this comment

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

Once the jsass PR lands I will probably make that line into one of the configurable variables that the theme roller can set, for those who prefer not to have uppercase buttons.

Sent from my iPhone

On Jul 17, 2015, at 1:48 AM, Chris Rebert notifications@github.com wrote:

In scss/atoms/buttons/_mixins.scss:

+/*
+* ==========================================================================
+* Buttons (Mixins)
+* ==========================================================================
+*/
+
+@mixin ui-button($color, $bgcolor, $disabled: false) {

  • background: $bgcolor;
  • border: 0;
  • color: $color;
  • display: inline-block;
  • font-weight: 500;
  • margin: .25em;
  • text-align: center;
  • text-decoration: none;
  • text-transform: uppercase;
    Too opinionated, imho

—
Reply to this email directly or view it on GitHub.


@if($disabled) {
cursor: default;
Copy link
Contributor

Choose a reason for hiding this comment

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

Not cursor: disabled ?

Copy link
Contributor Author

Choose a reason for hiding this comment

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

That was being covered in normalize.css

Sent from my iPhone

On Jul 17, 2015, at 1:54 AM, Chris Rebert notifications@github.com wrote:

In scss/atoms/buttons/_mixins.scss:

+* ==========================================================================
+*/
+
+@mixin ui-button($color, $bgcolor, $disabled: false) {

  • background: $bgcolor;
  • border: 0;
  • color: $color;
  • display: inline-block;
  • font-weight: 500;
  • margin: .25em;
  • text-align: center;
  • text-decoration: none;
  • text-transform: uppercase;
  • @if($disabled) {
  •   cursor: default;
    Not cursor: disabled ?

—
Reply to this email directly or view it on GitHub.

Copy link
Contributor

Choose a reason for hiding this comment

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

Huh?

Copy link
Contributor Author

Choose a reason for hiding this comment

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

Oh wait, nevermind via email I thought you were commenting somewhere else, I shall adjust.

opacity: .6;
}
}

@mixin ui-button-sizes($size: default) {
@if($size == large) {
Copy link
Contributor

Choose a reason for hiding this comment

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

Perhaps use a Sass map lookup instead? E.g.

font-size: map-get($button-heights, $size);
line-height: map-get($button-heights, $size);

Copy link
Contributor Author

Choose a reason for hiding this comment

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

Good idea.

font-size: 20px;
line-height: 20px;
padding: .75em;
}

@if($size == default) {
font-size: 16px;
line-height: 16px;
padding: .5em;
}

@if($size == small) {
font-size: 14px;
line-height: 14px;
padding: .2em .5em;
}

@if($size == extra-small) {
font-size: 12px;
line-height: 12px;
padding: .2em .5em;
}
}

@mixin ui-button-states($color, $bgcolor) {
&:active {
background: darken($bgcolor, 20%);
}
&:focus {
background: darken($bgcolor, 15%);
}
&:hover {
background: darken($bgcolor, 10%);
}
&:disabled {
Copy link
Contributor

Choose a reason for hiding this comment

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

Chassis' browser compatibility doesn't seem to be documented, but FYI :disabled is not IE8 compatible.

Copy link
Contributor

Choose a reason for hiding this comment

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

Also, consider adding &[aria-disabled="true"], which makes toggling the disabledness of an <a> button much simpler (since it's context-insensitive and uniform), and also communicates the disabledness to accessibility tools.

On a tangentially related note, perhaps you jQuery folks would consider voicing support for https://www.w3.org/Bugs/Public/show_bug.cgi?id=28673 ?

background: $bgcolor;
opacity: .6;
Copy link
Contributor

Choose a reason for hiding this comment

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

Note: Not IE8 compatible

Copy link
Contributor

Choose a reason for hiding this comment

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

Value is repeated on line 20. Perhaps use a variable to DRY things up?

}
}