From 88a4de6ba09bdb06d6b978067bf399d6129a08da Mon Sep 17 00:00:00 2001 From: Sarah Frisk Date: Fri, 17 Jul 2015 00:16:28 -0400 Subject: [PATCH 01/17] Buttons: Initial pass at buttons, covering sizes, options, and states Fixes gh-96 --- demos/buttons.html | 104 ++++++++++++++++++++++ scss/atoms/buttons/_buttons.scss | 145 +++++++++++++++++++++++++++++++ scss/atoms/buttons/_extends.scss | 115 ++++++++++++++++++++++++ scss/lint.scss | 3 +- 4 files changed, 366 insertions(+), 1 deletion(-) create mode 100644 demos/buttons.html create mode 100644 scss/atoms/buttons/_buttons.scss create mode 100644 scss/atoms/buttons/_extends.scss diff --git a/demos/buttons.html b/demos/buttons.html new file mode 100644 index 0000000..2a32c0c --- /dev/null +++ b/demos/buttons.html @@ -0,0 +1,104 @@ + + + + + CSS Chassis - Buttons + + + + + + + + +

CSS Chassis

+ +

Button tag

+ +

Use the button classes on an <a>, <button>, or <input> element. + + +

+ Link + + + +
+ +

Options

+ +
+ + +
+ +

Sizes

+ +
+

+ + +

+

+ + +

+

+ + +

+

+ + +

+
+ + +

Disabled State

+ +

Button Element

+ +

Add the disabled attribute to <button> buttons.

+ +
+

+ + +

+

+ + +

+

+ + +

+

+ + +

+
+ +

Anchor Element

+

Add --disabled to the end of the button class.

+
+

+ Large Link + Large Link +

+

+ Default Link + Default Link +

+

+ Small Link + Small Link +

+

+ Extra Small Link + Extra Small Link +

+
+ + + diff --git a/scss/atoms/buttons/_buttons.scss b/scss/atoms/buttons/_buttons.scss new file mode 100644 index 0000000..af22b47 --- /dev/null +++ b/scss/atoms/buttons/_buttons.scss @@ -0,0 +1,145 @@ +/* +* ========================================================================== +* Buttons +* ========================================================================== +*/ + +@import "extends"; + +.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; + + &--disabled { + @extend %ui-button; + @extend %ui-button--default; + @extend %ui-button--disabled; + @extend %ui-button--default-size; + } + + &--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; + + &--disabled { + @extend %ui-button; + @extend %ui-button--default; + @extend %ui-button--disabled; + @extend %ui-button--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; + + &--disabled { + @extend %ui-button; + @extend %ui-button--default; + @extend %ui-button--disabled; + @extend %ui-button--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; + + &--disabled { + @extend %ui-button; + @extend %ui-button--default; + @extend %ui-button--disabled; + @extend %ui-button--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; + + &--disabled { + @extend %ui-button; + @extend %ui-button--primary; + @extend %ui-button--disabled; + @extend %ui-button--default-size; + } + + &--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; + + &--disabled { + @extend %ui-button; + @extend %ui-button--primary; + @extend %ui-button--disabled; + @extend %ui-button--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; + + &--disabled { + @extend %ui-button; + @extend %ui-button--primary; + @extend %ui-button--disabled; + @extend %ui-button--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; + + &--disabled { + @extend %ui-button; + @extend %ui-button--primary; + @extend %ui-button--disabled; + @extend %ui-button--extra-small; + } + } + } +} diff --git a/scss/atoms/buttons/_extends.scss b/scss/atoms/buttons/_extends.scss new file mode 100644 index 0000000..65c886f --- /dev/null +++ b/scss/atoms/buttons/_extends.scss @@ -0,0 +1,115 @@ +/* +* ========================================================================== +* Buttons (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; + +%ui-button { + border: 0; + box-sizing: border-box; + display: inline-block; + font-weight: 500; + margin: .25em; + text-align: center; + text-decoration: none; + text-transform: uppercase; +} + +%ui-button--large { + font-size: 20px; + line-height: 20px; + padding: .75em; +} + +%ui-button--default-size { + font-size: 16px; + line-height: 16px; + padding: .5em; +} + +%ui-button--small { + font-size: 14px; + line-height: 14px; + padding: .2em .5em; + height: 20px; +} + +%ui-button--extra-small { + font-size: 12px; + line-height: 12px; + padding: .2em .5em; +} + +%ui-button--default { + background: $background; + color: $chassis-gray-dark; +} + +%ui-button--default--active { + &:active, + &:active:focus { + background: darken($background, 20%); + } +} + +%ui-button--default--focus { + &:focus { + background: darken($background, 15%); + } +} + +%ui-button--default--hover { + &:hover { + background: darken($background, 10%); + } +} + +%ui-button--default--disabled { + &:disabled { + opacity: .6; + background: $background; + } +} + + +%ui-button--primary { + background: $chassis-blue; + color: $chassis-gray-light; +} + +%ui-button--primary--active { + &:active, + &:active:focus { + background: darken($chassis-blue, 20%); + } +} + +%ui-button--primary--focus { + &:focus { + background: darken($chassis-blue, 15%); + } +} + +%ui-button--primary--hover { + &:hover { + background: darken($chassis-blue, 10%); + } +} + +%ui-button--primary--disabled { + &:disabled { + background: $chassis-blue; + opacity: .6; + } +} + +%ui-button--disabled { + opacity: .6; + cursor: default; +} diff --git a/scss/lint.scss b/scss/lint.scss index d3cf487..c29923b 100644 --- a/scss/lint.scss +++ b/scss/lint.scss @@ -15,7 +15,8 @@ @import "atoms/icons/icons", - "atoms/typography/typography"; + "atoms/typography/typography", + "atoms/buttons/buttons"; @import "views/main"; From b672e22d29a419659722de060cd84a022daef19b Mon Sep 17 00:00:00 2001 From: Sarah Frisk Date: Fri, 17 Jul 2015 00:17:57 -0400 Subject: [PATCH 02/17] Buttons: Spaces to Tabs fix for buttons.html --- demos/buttons.html | 32 ++++++++++++++++---------------- 1 file changed, 16 insertions(+), 16 deletions(-) diff --git a/demos/buttons.html b/demos/buttons.html index 2a32c0c..1c70366 100644 --- a/demos/buttons.html +++ b/demos/buttons.html @@ -82,22 +82,22 @@

Button Element

Anchor Element

Add --disabled to the end of the button class.

-

- Large Link - Large Link -

-

- Default Link - Default Link -

-

- Small Link - Small Link -

-

- Extra Small Link - Extra Small Link -

+

+ Large Link + Large Link +

+

+ Default Link + Default Link +

+

+ Small Link + Small Link +

+

+ Extra Small Link + Extra Small Link +

From 889e914f6deda3f8a41f6a4f4f54b6e846136d16 Mon Sep 17 00:00:00 2001 From: Sarah Frisk Date: Fri, 17 Jul 2015 01:19:01 -0400 Subject: [PATCH 03/17] Buttons: Switched to Mixins --- scss/atoms/buttons/_buttons.scss | 133 +++++++++++-------------------- scss/atoms/buttons/_extends.scss | 115 -------------------------- scss/atoms/buttons/_mixins.scss | 65 +++++++++++++++ 3 files changed, 110 insertions(+), 203 deletions(-) delete mode 100644 scss/atoms/buttons/_extends.scss create mode 100644 scss/atoms/buttons/_mixins.scss diff --git a/scss/atoms/buttons/_buttons.scss b/scss/atoms/buttons/_buttons.scss index af22b47..33c4086 100644 --- a/scss/atoms/buttons/_buttons.scss +++ b/scss/atoms/buttons/_buttons.scss @@ -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; .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); } } } diff --git a/scss/atoms/buttons/_extends.scss b/scss/atoms/buttons/_extends.scss deleted file mode 100644 index 65c886f..0000000 --- a/scss/atoms/buttons/_extends.scss +++ /dev/null @@ -1,115 +0,0 @@ -/* -* ========================================================================== -* Buttons (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; - -%ui-button { - border: 0; - box-sizing: border-box; - display: inline-block; - font-weight: 500; - margin: .25em; - text-align: center; - text-decoration: none; - text-transform: uppercase; -} - -%ui-button--large { - font-size: 20px; - line-height: 20px; - padding: .75em; -} - -%ui-button--default-size { - font-size: 16px; - line-height: 16px; - padding: .5em; -} - -%ui-button--small { - font-size: 14px; - line-height: 14px; - padding: .2em .5em; - height: 20px; -} - -%ui-button--extra-small { - font-size: 12px; - line-height: 12px; - padding: .2em .5em; -} - -%ui-button--default { - background: $background; - color: $chassis-gray-dark; -} - -%ui-button--default--active { - &:active, - &:active:focus { - background: darken($background, 20%); - } -} - -%ui-button--default--focus { - &:focus { - background: darken($background, 15%); - } -} - -%ui-button--default--hover { - &:hover { - background: darken($background, 10%); - } -} - -%ui-button--default--disabled { - &:disabled { - opacity: .6; - background: $background; - } -} - - -%ui-button--primary { - background: $chassis-blue; - color: $chassis-gray-light; -} - -%ui-button--primary--active { - &:active, - &:active:focus { - background: darken($chassis-blue, 20%); - } -} - -%ui-button--primary--focus { - &:focus { - background: darken($chassis-blue, 15%); - } -} - -%ui-button--primary--hover { - &:hover { - background: darken($chassis-blue, 10%); - } -} - -%ui-button--primary--disabled { - &:disabled { - background: $chassis-blue; - opacity: .6; - } -} - -%ui-button--disabled { - opacity: .6; - cursor: default; -} diff --git a/scss/atoms/buttons/_mixins.scss b/scss/atoms/buttons/_mixins.scss new file mode 100644 index 0000000..010c324 --- /dev/null +++ b/scss/atoms/buttons/_mixins.scss @@ -0,0 +1,65 @@ +/* +* ========================================================================== +* Buttons (Mixins) +* ========================================================================== +*/ + +@mixin ui-button($color, $bgcolor, $disabled: false) { + 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; + + @if($disabled) { + cursor: default; + opacity: .6; + } +} + +@mixin ui-button-sizes($size: default) { + @if($size == large) { + 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 { + background: $bgcolor; + opacity: .6; + } +} From 10efba162867444fe55f0e093d6a54aae7f202ba Mon Sep 17 00:00:00 2001 From: Sarah Frisk Date: Fri, 17 Jul 2015 01:21:02 -0400 Subject: [PATCH 04/17] Buttons: Removing box-sizing --- scss/atoms/buttons/_mixins.scss | 1 - 1 file changed, 1 deletion(-) diff --git a/scss/atoms/buttons/_mixins.scss b/scss/atoms/buttons/_mixins.scss index 010c324..3e0b62a 100644 --- a/scss/atoms/buttons/_mixins.scss +++ b/scss/atoms/buttons/_mixins.scss @@ -7,7 +7,6 @@ @mixin ui-button($color, $bgcolor, $disabled: false) { background: $bgcolor; border: 0; - box-sizing: border-box; color: $color; display: inline-block; font-weight: 500; From 12be9ed1f7a3a7eeacf04cec6d3f34c9f7472496 Mon Sep 17 00:00:00 2001 From: Sarah Frisk Date: Fri, 17 Jul 2015 01:31:00 -0400 Subject: [PATCH 05/17] Buttons: Adding reset demo --- demos/buttons.html | 1 + 1 file changed, 1 insertion(+) diff --git a/demos/buttons.html b/demos/buttons.html index 1c70366..f1e22f5 100644 --- a/demos/buttons.html +++ b/demos/buttons.html @@ -23,6 +23,7 @@

Button tag

+

Options

From f425e314cf418b9c3d9ea0da82ed90071061fd27 Mon Sep 17 00:00:00 2001 From: Sarah Frisk Date: Fri, 17 Jul 2015 01:36:52 -0400 Subject: [PATCH 06/17] Buttons: IE=edge and adding a type=button example --- demos/buttons.html | 4 +++- 1 file changed, 3 insertions(+), 1 deletion(-) diff --git a/demos/buttons.html b/demos/buttons.html index f1e22f5..4bdb0d2 100644 --- a/demos/buttons.html +++ b/demos/buttons.html @@ -2,6 +2,7 @@ + CSS Chassis - Buttons @@ -20,7 +21,8 @@

Button tag

Link - + + From ff413db1e9a4582f863fed0cd003dcb25df0f2d0 Mon Sep 17 00:00:00 2001 From: Sarah Frisk Date: Fri, 17 Jul 2015 19:40:32 -0400 Subject: [PATCH 07/17] Buttons: Added classes for each state, demos, cleaned up variable names --- demos/buttons.html | 88 +++++++++-- scss/atoms/buttons/_buttons.scss | 237 +++++++++++++++++++++++------ scss/atoms/buttons/_mixins.scss | 77 +++++----- scss/atoms/buttons/_variables.scss | 34 +++++ 4 files changed, 344 insertions(+), 92 deletions(-) create mode 100644 scss/atoms/buttons/_variables.scss diff --git a/demos/buttons.html b/demos/buttons.html index 4bdb0d2..31ff813 100644 --- a/demos/buttons.html +++ b/demos/buttons.html @@ -82,26 +82,96 @@

Button Element

-

Anchor Element

+ +

Setting Button Appearence Via Classes

+ +

Sometimes you might need to set the class of a ui-button to display a state. This code works a<a>, <button>, or <input> elements.

+ +

Disabled Class

Add --disabled to the end of the button class.

- Large Link - Large Link + Disabled + Disabled +

+

+ Disabled + Disabled +

+

+ Disabled/a> + Disabled +

+

+ Disabled + Disabled +

+
+ +

Active Class

+

Add --active to the end of the button class.

+
+

+ Active + Active +

+

+ Active + Active +

+

+ Active + Active +

+

+ Active + Active +

+
+ +

Focus Class

+

Add --focus to the end of the button class.

+
+

+ Focus + Focus

- Default Link - Default Link + Focus + Focus

- Small Link - Small Link + Focus + Focus

- Extra Small Link - Extra Small Link + Focus + Focus

+

Hover Class

+

Add --hover to the end of the button class.

+
+

+ Hover + Hover +

+

+ Hover + Hover +

+

+ Hover + Hover +

+

+ Hover + Hover +

+
+ + + diff --git a/scss/atoms/buttons/_buttons.scss b/scss/atoms/buttons/_buttons.scss index 33c4086..e9618f9 100644 --- a/scss/atoms/buttons/_buttons.scss +++ b/scss/atoms/buttons/_buttons.scss @@ -3,99 +3,246 @@ * Buttons * ========================================================================== */ +@import "variables"; @import "mixins"; -/* These colors won't remain here, will be removed with jsass */ -$background: #fff; -$chassis-blue: #4fc0c8; -$chassis-gray-light: #f2f2f2; -$chassis-gray-dark: #383838; - .ui-button { &--default { - @include ui-button($chassis-gray-dark, $background); - @include ui-button-sizes(default); - @include ui-button-states($chassis-gray-dark, $background); + @include ui-button($ui-button-default-color, $ui-button-default-background); + @include ui-button-sizes($ui-button-default); + @include ui-button-states($ui-button-default-color, $ui-button-default-background); &--disabled { - @include ui-button-sizes(default); - @include ui-button($chassis-gray-dark, $background, true); + @include ui-button($ui-button-default-color, $ui-button-default-background); + @include ui-button-sizes($ui-button-default); + @include ui-button-state-disabled($ui-button-default-background); + } + + &--focus { + @include ui-button($ui-button-default-color, $ui-button-default-background); + @include ui-button-sizes($ui-button-default); + @include ui-button-state-disabled($ui-button-default-background); + } + + &--active { + @include ui-button($ui-button-default-color, $ui-button-default-background); + @include ui-button-sizes($ui-button-default); + @include ui-button-state-active($ui-button-default-background); + } + + &--hover { + @include ui-button($ui-button-default-color, $ui-button-default-background); + @include ui-button-sizes($ui-button-default); + @include ui-button-state-hover($ui-button-default-background); } &--large { - @include ui-button($chassis-gray-dark, $background); - @include ui-button-sizes(large); - @include ui-button-states($chassis-gray-dark, $background); + @include ui-button($ui-button-default-color, $ui-button-default-background); + @include ui-button-sizes($ui-button-large); + @include ui-button-states($ui-button-default-color, $ui-button-default-background); &--disabled { - @include ui-button($chassis-gray-dark, $background, true); - @include ui-button-sizes(large); + @include ui-button($ui-button-default-color, $ui-button-default-background); + @include ui-button-sizes($ui-button-large); + @include ui-button-state-disabled($ui-button-default-background); + } + + &--focus { + @include ui-button($ui-button-default-color, $ui-button-default-background); + @include ui-button-sizes($ui-button-large); + @include ui-button-state-focus($ui-button-default-background); + } + + &--active { + @include ui-button($ui-button-default-color, $ui-button-default-background); + @include ui-button-sizes($ui-button-large); + @include ui-button-state-active($ui-button-default-background); + } + + &--hover { + @include ui-button($ui-button-default-color, $ui-button-default-background); + @include ui-button-sizes($ui-button-large); + @include ui-button-state-hover($ui-button-default-background); } } &--small { - @include ui-button($chassis-gray-dark, $background); - @include ui-button-sizes(small); - @include ui-button-states($chassis-gray-dark, $background); + @include ui-button($ui-button-default-color, $ui-button-default-background); + @include ui-button-sizes($ui-button-small); + @include ui-button-states($ui-button-default-color, $ui-button-default-background); &--disabled { - @include ui-button($chassis-gray-dark, $background, true); - @include ui-button-sizes(small); + @include ui-button($ui-button-default-color, $ui-button-default-background); + @include ui-button-sizes($ui-button-small); + @include ui-button-state-disabled($ui-button-default-background); + } + + &--focus { + @include ui-button($ui-button-default-color, $ui-button-default-background); + @include ui-button-sizes($ui-button-small); + @include ui-button-state-focus($ui-button-default-background); + } + + &--active { + @include ui-button($ui-button-default-color, $ui-button-default-background); + @include ui-button-sizes($ui-button-small); + @include ui-button-state-active($ui-button-default-background); + } + + &--hover { + @include ui-button($ui-button-default-color, $ui-button-default-background); + @include ui-button-sizes($ui-button-small); + @include ui-button-state-hover($ui-button-default-background); } } &--extra-small { @extend %ui-button--extra-small; - @include ui-button($chassis-gray-dark, $background); - @include ui-button-states($chassis-gray-dark, $background); + @include ui-button($ui-button-default-color, $ui-button-default-background); + @include ui-button-states($ui-button-default-color, $ui-button-default-background); &--disabled { - @include ui-button($chassis-gray-dark, $background, true); - @include ui-button-sizes(extra-small); + @include ui-button($ui-button-default-color, $ui-button-default-background); + @include ui-button-sizes($ui-button-extra-small); + @include ui-button-state-disabled($ui-button-default-background); + } + + &--focus { + @include ui-button($ui-button-default-color, $ui-button-default-background); + @include ui-button-sizes($ui-button-extra-small); + @include ui-button-state-hover($ui-button-default-background); + } + + &--active { + @include ui-button($ui-button-default-color, $ui-button-default-background); + @include ui-button-sizes($ui-button-extra-small); + @include ui-button-state-active($ui-button-default-background); + } + + &--hover { + @include ui-button($ui-button-default-color, $ui-button-default-background); + @include ui-button-sizes($ui-button-extra-small); + @include ui-button-state-hover($ui-button-default-background); } } } &--primary { - @include ui-button($chassis-gray-light, $chassis-blue); - @include ui-button-sizes(default); - @include ui-button-states($chassis-gray-light, $chassis-blue); + @include ui-button($ui-button-primary-color, $ui-button-primary-background); + @include ui-button-sizes($ui-button-default); + @include ui-button-states($ui-button-primary-color, $ui-button-primary-background); &--disabled { - @include ui-button($chassis-gray-light, $chassis-blue, true); - @include ui-button-sizes(default); + @include ui-button($ui-button-primary-color, $ui-button-primary-background); + @include ui-button-sizes($ui-button-default); + @include ui-button-state-disabled($ui-button-primary-background); + } + + &--focus { + @include ui-button($ui-button-primary-color, $ui-button-primary-background); + @include ui-button-sizes($ui-button-default); + @include ui-button-state-focus($ui-button-primary-background); + } + + &--active { + @include ui-button($ui-button-primary-color, $ui-button-primary-background); + @include ui-button-sizes($ui-button-default); + @include ui-button-state-active($ui-button-primary-background); + } + + &--hover { + @include ui-button($ui-button-primary-color, $ui-button-primary-background); + @include ui-button-sizes($ui-button-default); + @include ui-button-state-hover($ui-button-primary-background); } &--large { - @include ui-button($chassis-gray-light, $chassis-blue); - @include ui-button-sizes(large); - @include ui-button-states($chassis-gray-light, $chassis-blue); + @include ui-button($ui-button-primary-color, $ui-button-primary-background); + @include ui-button-sizes($ui-button-large); + @include ui-button-states($ui-button-primary-color, $ui-button-primary-background); &--disabled { - @include ui-button($chassis-gray-light, $chassis-blue, true); - @include ui-button-sizes(large); + @include ui-button($ui-button-primary-color, $ui-button-primary-background); + @include ui-button-sizes($ui-button-large); + @include ui-button-state-disabled($ui-button-primary-background); + } + + &--focus { + @include ui-button($ui-button-primary-color, $ui-button-primary-background); + @include ui-button-sizes($ui-button-large); + @include ui-button-state-focus($ui-button-primary-background); + } + + &--active { + @include ui-button($ui-button-primary-color, $ui-button-primary-background); + @include ui-button-sizes($ui-button-large); + @include ui-button-state-active($ui-button-primary-background); + } + + &--hover { + @include ui-button($ui-button-primary-color, $ui-button-primary-background); + @include ui-button-sizes($ui-button-large); + @include ui-button-state-hover($ui-button-primary-background); } } &--small { - @include ui-button($chassis-gray-light, $chassis-blue); - @include ui-button-sizes(small); - @include ui-button-states($chassis-gray-light, $chassis-blue); + @include ui-button($ui-button-primary-color, $ui-button-primary-background); + @include ui-button-sizes($ui-button-small); + @include ui-button-states($ui-button-primary-color, $ui-button-primary-background); &--disabled { - @include ui-button($chassis-gray-light, $chassis-blue, true); - @include ui-button-sizes(small); + @include ui-button($ui-button-primary-color, $ui-button-primary-background); + @include ui-button-sizes($ui-button-small); + @include ui-button-state-disabled($ui-button-primary-background); + } + + &--focus { + @include ui-button($ui-button-primary-color, $ui-button-primary-background); + @include ui-button-sizes($ui-button-small); + @include ui-button-state-focus($ui-button-primary-background); + } + + &--active { + @include ui-button($ui-button-primary-color, $ui-button-primary-background); + @include ui-button-sizes($ui-button-small); + @include ui-button-state-active($ui-button-primary-background); + } + + &--hover { + @include ui-button($ui-button-primary-color, $ui-button-primary-background); + @include ui-button-sizes($ui-button-small); + @include ui-button-state-hover($ui-button-primary-background); } } &--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); + @include ui-button($ui-button-primary-color, $ui-button-primary-background); + @include ui-button-sizes($ui-button-extra-small); + @include ui-button-states($ui-button-primary-color, $ui-button-primary-background); &--disabled { - @include ui-button($chassis-gray-light, $chassis-blue, true); - @include ui-button-sizes(extra-small); + @include ui-button($ui-button-primary-color, $ui-button-primary-background); + @include ui-button-sizes($ui-button-extra-small); + @include ui-button-state-disabled($ui-button-primary-background); + } + + &--focus { + @include ui-button($ui-button-primary-color, $ui-button-primary-background); + @include ui-button-sizes($ui-button-extra-small); + @include ui-button-state-focus($ui-button-primary-background); + } + + &--active { + @include ui-button($ui-button-primary-color, $ui-button-primary-background); + @include ui-button-sizes($ui-button-extra-small); + @include ui-button-state-active($ui-button-primary-background); + } + + &--hover { + @include ui-button($ui-button-primary-color, $ui-button-primary-background); + @include ui-button-sizes($ui-button-extra-small); + @include ui-button-state-hover($ui-button-primary-background); } } } diff --git a/scss/atoms/buttons/_mixins.scss b/scss/atoms/buttons/_mixins.scss index 3e0b62a..d887324 100644 --- a/scss/atoms/buttons/_mixins.scss +++ b/scss/atoms/buttons/_mixins.scss @@ -4,61 +4,62 @@ * ========================================================================== */ -@mixin ui-button($color, $bgcolor, $disabled: false) { +@mixin ui-button($color, $bgcolor,) { background: $bgcolor; border: 0; color: $color; display: inline-block; - font-weight: 500; - margin: .25em; + font-weight: $ui-button-font-weight; + margin: $ui-button-margin; text-align: center; text-decoration: none; - text-transform: uppercase; - - @if($disabled) { - cursor: default; - opacity: .6; - } + text-transform: $ui-button-text-transform; + touch-action: manipulation; + vertical-align: middle; } -@mixin ui-button-sizes($size: default) { - @if($size == large) { - 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-sizes($size) { + font-size: map-get( $size, font-size); + line-height: map-get( $size, line-height); + padding: map-get( $size, padding); } @mixin ui-button-states($color, $bgcolor) { &:active { - background: darken($bgcolor, 20%); + @include ui-button-state-active($bgcolor); } &:focus { - background: darken($bgcolor, 15%); + @include ui-button-state-focus($bgcolor); } &:hover { - background: darken($bgcolor, 10%); + @include ui-button-state-active($bgcolor); } &:disabled { - background: $bgcolor; - opacity: .6; + @include ui-button-state-disabled($bgcolor); + } + &[aria-disabled="true"] { + @include ui-button-state-disabled($bgcolor); } } + +@mixin ui-button-state-active($bgcolor) { + background: darken($bgcolor, 20%); +} + +@mixin ui-button-state-focus($bgcolor) { + background: darken($bgcolor, 15%); +} + +@mixin ui-button-state-hover($bgcolor) { + background: darken($bgcolor, 10%); +} + +@mixin ui-button-state-disabled($bgcolor) { + background: $bgcolor; + cursor: default; + -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity="+$ui-button-disabled-opacity+")"; + filter: alpha(opacity=$ui-button-disabled-opacity); + -moz-opacity: $ui-button-disabled-opacity; + -khtml-opacity: $ui-button-disabled-opacity; + opacity: $ui-button-disabled-opacity; +} diff --git a/scss/atoms/buttons/_variables.scss b/scss/atoms/buttons/_variables.scss new file mode 100644 index 0000000..a7430a8 --- /dev/null +++ b/scss/atoms/buttons/_variables.scss @@ -0,0 +1,34 @@ +/* +* ========================================================================== +* Buttons (Variables) +* ========================================================================== +*/ +/* These variables won't remain here, will be removed with jsass. */ +$ui-button-default-color: #383838; +$ui-button-default-background: #fff; +$ui-button-primary-color: #f2f2f2; +$ui-button-primary-background: #4fc0c8; +$ui-button-disabled-opacity: .6; +$ui-button-font-weight: 500; +$ui-button-margin: .25em; +$ui-button-text-transform: uppercase; +$ui-button-large: ( + font-size: 20px, + line-height: 20px, + padding: .75em +); +$ui-button-default: ( + font-size: 16px, + line-height: 16px, + padding: .5em +); +$ui-button-small: ( + font-size: 14px, + line-height: 14px, + padding: .2em .5em +); +$ui-button-extra-small: ( + font-size: 12px, + line-height: 12px, + padding: .2em .5em +); From 765b19be8f0fa0cf913e2cb19ed9bd856e8fe935 Mon Sep 17 00:00:00 2001 From: Sarah Frisk Date: Fri, 17 Jul 2015 19:44:58 -0400 Subject: [PATCH 08/17] Buttons: bug fix --- scss/atoms/buttons/_buttons.scss | 2 +- scss/atoms/buttons/_mixins.scss | 2 +- 2 files changed, 2 insertions(+), 2 deletions(-) diff --git a/scss/atoms/buttons/_buttons.scss b/scss/atoms/buttons/_buttons.scss index e9618f9..2996310 100644 --- a/scss/atoms/buttons/_buttons.scss +++ b/scss/atoms/buttons/_buttons.scss @@ -21,7 +21,7 @@ &--focus { @include ui-button($ui-button-default-color, $ui-button-default-background); @include ui-button-sizes($ui-button-default); - @include ui-button-state-disabled($ui-button-default-background); + @include ui-button-state-focus($ui-button-default-background); } &--active { diff --git a/scss/atoms/buttons/_mixins.scss b/scss/atoms/buttons/_mixins.scss index d887324..bad995e 100644 --- a/scss/atoms/buttons/_mixins.scss +++ b/scss/atoms/buttons/_mixins.scss @@ -4,7 +4,7 @@ * ========================================================================== */ -@mixin ui-button($color, $bgcolor,) { +@mixin ui-button($color, $bgcolor) { background: $bgcolor; border: 0; color: $color; From 5fa9d3ce381d7a6ccf9f330cfa17c95d96cc2fb1 Mon Sep 17 00:00:00 2001 From: Sarah Frisk Date: Mon, 20 Jul 2015 13:16:06 -0400 Subject: [PATCH 09/17] Buttons: Fixed Typos --- demos/buttons.html | 4 ++-- scss/atoms/buttons/_buttons.scss | 2 +- 2 files changed, 3 insertions(+), 3 deletions(-) diff --git a/demos/buttons.html b/demos/buttons.html index 31ff813..54a1d43 100644 --- a/demos/buttons.html +++ b/demos/buttons.html @@ -14,7 +14,7 @@

CSS Chassis

-

Button tag

+

Button Classes

Use the button classes on an <a>, <button>, or <input> element. @@ -99,7 +99,7 @@

Disabled Class

Disabled

- Disabled/a> + Disabled Disabled

diff --git a/scss/atoms/buttons/_buttons.scss b/scss/atoms/buttons/_buttons.scss index 2996310..fa32cf7 100644 --- a/scss/atoms/buttons/_buttons.scss +++ b/scss/atoms/buttons/_buttons.scss @@ -97,8 +97,8 @@ } &--extra-small { - @extend %ui-button--extra-small; @include ui-button($ui-button-default-color, $ui-button-default-background); + @include ui-button-sizes($ui-button-extra-small); @include ui-button-states($ui-button-default-color, $ui-button-default-background); &--disabled { From b88bbbde1abe9deb165e77a6d5c512ab2542407b Mon Sep 17 00:00:00 2001 From: Sarah Frisk Date: Mon, 20 Jul 2015 13:33:20 -0400 Subject: [PATCH 10/17] Buttons: Removing # of background declarations per selector --- scss/atoms/buttons/_buttons.scss | 144 +++++++++++++++---------------- scss/atoms/buttons/_mixins.scss | 34 +++++--- 2 files changed, 93 insertions(+), 85 deletions(-) diff --git a/scss/atoms/buttons/_buttons.scss b/scss/atoms/buttons/_buttons.scss index fa32cf7..a1aad66 100644 --- a/scss/atoms/buttons/_buttons.scss +++ b/scss/atoms/buttons/_buttons.scss @@ -8,241 +8,241 @@ .ui-button { &--default { - @include ui-button($ui-button-default-color, $ui-button-default-background); + @include ui-button(); @include ui-button-sizes($ui-button-default); @include ui-button-states($ui-button-default-color, $ui-button-default-background); &--disabled { - @include ui-button($ui-button-default-color, $ui-button-default-background); + @include ui-button(); @include ui-button-sizes($ui-button-default); - @include ui-button-state-disabled($ui-button-default-background); + @include ui-button-state-disabled($ui-button-default-color, $ui-button-default-background); } &--focus { - @include ui-button($ui-button-default-color, $ui-button-default-background); + @include ui-button(); @include ui-button-sizes($ui-button-default); - @include ui-button-state-focus($ui-button-default-background); + @include ui-button-state-focus($ui-button-default-color, $ui-button-default-background); } &--active { - @include ui-button($ui-button-default-color, $ui-button-default-background); + @include ui-button(); @include ui-button-sizes($ui-button-default); - @include ui-button-state-active($ui-button-default-background); + @include ui-button-state-active($ui-button-default-color, $ui-button-default-background); } &--hover { - @include ui-button($ui-button-default-color, $ui-button-default-background); + @include ui-button(); @include ui-button-sizes($ui-button-default); - @include ui-button-state-hover($ui-button-default-background); + @include ui-button-state-hover($ui-button-default-color, $ui-button-default-background); } &--large { - @include ui-button($ui-button-default-color, $ui-button-default-background); + @include ui-button(); @include ui-button-sizes($ui-button-large); @include ui-button-states($ui-button-default-color, $ui-button-default-background); &--disabled { - @include ui-button($ui-button-default-color, $ui-button-default-background); + @include ui-button(); @include ui-button-sizes($ui-button-large); - @include ui-button-state-disabled($ui-button-default-background); + @include ui-button-state-disabled($ui-button-default-color, $ui-button-default-background); } &--focus { - @include ui-button($ui-button-default-color, $ui-button-default-background); + @include ui-button(); @include ui-button-sizes($ui-button-large); - @include ui-button-state-focus($ui-button-default-background); + @include ui-button-state-focus($ui-button-default-color, $ui-button-default-background); } &--active { - @include ui-button($ui-button-default-color, $ui-button-default-background); + @include ui-button(); @include ui-button-sizes($ui-button-large); - @include ui-button-state-active($ui-button-default-background); + @include ui-button-state-active($ui-button-default-color, $ui-button-default-background); } &--hover { - @include ui-button($ui-button-default-color, $ui-button-default-background); + @include ui-button(); @include ui-button-sizes($ui-button-large); - @include ui-button-state-hover($ui-button-default-background); + @include ui-button-state-hover($ui-button-default-color, $ui-button-default-background); } } &--small { - @include ui-button($ui-button-default-color, $ui-button-default-background); + @include ui-button(); @include ui-button-sizes($ui-button-small); @include ui-button-states($ui-button-default-color, $ui-button-default-background); &--disabled { - @include ui-button($ui-button-default-color, $ui-button-default-background); + @include ui-button(); @include ui-button-sizes($ui-button-small); - @include ui-button-state-disabled($ui-button-default-background); + @include ui-button-state-disabled($ui-button-default-color, $ui-button-default-background); } &--focus { - @include ui-button($ui-button-default-color, $ui-button-default-background); + @include ui-button(); @include ui-button-sizes($ui-button-small); - @include ui-button-state-focus($ui-button-default-background); + @include ui-button-state-focus($ui-button-default-color, $ui-button-default-background); } &--active { - @include ui-button($ui-button-default-color, $ui-button-default-background); + @include ui-button(); @include ui-button-sizes($ui-button-small); - @include ui-button-state-active($ui-button-default-background); + @include ui-button-state-active($ui-button-default-color, $ui-button-default-background); } &--hover { - @include ui-button($ui-button-default-color, $ui-button-default-background); + @include ui-button(); @include ui-button-sizes($ui-button-small); - @include ui-button-state-hover($ui-button-default-background); + @include ui-button-state-hover($ui-button-default-color, $ui-button-default-background); } } &--extra-small { - @include ui-button($ui-button-default-color, $ui-button-default-background); + @include ui-button(); @include ui-button-sizes($ui-button-extra-small); @include ui-button-states($ui-button-default-color, $ui-button-default-background); &--disabled { - @include ui-button($ui-button-default-color, $ui-button-default-background); + @include ui-button(); @include ui-button-sizes($ui-button-extra-small); - @include ui-button-state-disabled($ui-button-default-background); + @include ui-button-state-disabled($ui-button-default-color, $ui-button-default-background); } &--focus { - @include ui-button($ui-button-default-color, $ui-button-default-background); + @include ui-button(); @include ui-button-sizes($ui-button-extra-small); - @include ui-button-state-hover($ui-button-default-background); + @include ui-button-state-hover($ui-button-default-color, $ui-button-default-background); } &--active { - @include ui-button($ui-button-default-color, $ui-button-default-background); + @include ui-button(); @include ui-button-sizes($ui-button-extra-small); - @include ui-button-state-active($ui-button-default-background); + @include ui-button-state-active($ui-button-default-color, $ui-button-default-background); } &--hover { - @include ui-button($ui-button-default-color, $ui-button-default-background); + @include ui-button(); @include ui-button-sizes($ui-button-extra-small); - @include ui-button-state-hover($ui-button-default-background); + @include ui-button-state-hover($ui-button-default-color, $ui-button-default-background); } } } &--primary { - @include ui-button($ui-button-primary-color, $ui-button-primary-background); + @include ui-button(); @include ui-button-sizes($ui-button-default); @include ui-button-states($ui-button-primary-color, $ui-button-primary-background); &--disabled { - @include ui-button($ui-button-primary-color, $ui-button-primary-background); + @include ui-button(); @include ui-button-sizes($ui-button-default); - @include ui-button-state-disabled($ui-button-primary-background); + @include ui-button-state-disabled($ui-button-primary-color, $ui-button-primary-background); } &--focus { - @include ui-button($ui-button-primary-color, $ui-button-primary-background); + @include ui-button(); @include ui-button-sizes($ui-button-default); - @include ui-button-state-focus($ui-button-primary-background); + @include ui-button-state-focus($ui-button-primary-color, $ui-button-primary-background); } &--active { - @include ui-button($ui-button-primary-color, $ui-button-primary-background); + @include ui-button(); @include ui-button-sizes($ui-button-default); - @include ui-button-state-active($ui-button-primary-background); + @include ui-button-state-active($ui-button-primary-color, $ui-button-primary-background); } &--hover { - @include ui-button($ui-button-primary-color, $ui-button-primary-background); + @include ui-button(); @include ui-button-sizes($ui-button-default); - @include ui-button-state-hover($ui-button-primary-background); + @include ui-button-state-hover($ui-button-primary-color, $ui-button-primary-background); } &--large { - @include ui-button($ui-button-primary-color, $ui-button-primary-background); + @include ui-button(); @include ui-button-sizes($ui-button-large); @include ui-button-states($ui-button-primary-color, $ui-button-primary-background); &--disabled { - @include ui-button($ui-button-primary-color, $ui-button-primary-background); + @include ui-button(); @include ui-button-sizes($ui-button-large); - @include ui-button-state-disabled($ui-button-primary-background); + @include ui-button-state-disabled($ui-button-primary-color, $ui-button-primary-background); } &--focus { - @include ui-button($ui-button-primary-color, $ui-button-primary-background); + @include ui-button(); @include ui-button-sizes($ui-button-large); - @include ui-button-state-focus($ui-button-primary-background); + @include ui-button-state-focus($ui-button-primary-color, $ui-button-primary-background); } &--active { - @include ui-button($ui-button-primary-color, $ui-button-primary-background); + @include ui-button(); @include ui-button-sizes($ui-button-large); - @include ui-button-state-active($ui-button-primary-background); + @include ui-button-state-active($ui-button-primary-color, $ui-button-primary-background); } &--hover { - @include ui-button($ui-button-primary-color, $ui-button-primary-background); + @include ui-button(); @include ui-button-sizes($ui-button-large); - @include ui-button-state-hover($ui-button-primary-background); + @include ui-button-state-hover($ui-button-primary-color, $ui-button-primary-background); } } &--small { - @include ui-button($ui-button-primary-color, $ui-button-primary-background); + @include ui-button(); @include ui-button-sizes($ui-button-small); @include ui-button-states($ui-button-primary-color, $ui-button-primary-background); &--disabled { - @include ui-button($ui-button-primary-color, $ui-button-primary-background); + @include ui-button(); @include ui-button-sizes($ui-button-small); - @include ui-button-state-disabled($ui-button-primary-background); + @include ui-button-state-disabled($ui-button-primary-color, $ui-button-primary-background); } &--focus { - @include ui-button($ui-button-primary-color, $ui-button-primary-background); + @include ui-button(); @include ui-button-sizes($ui-button-small); - @include ui-button-state-focus($ui-button-primary-background); + @include ui-button-state-focus($ui-button-primary-color, $ui-button-primary-background); } &--active { - @include ui-button($ui-button-primary-color, $ui-button-primary-background); + @include ui-button(); @include ui-button-sizes($ui-button-small); - @include ui-button-state-active($ui-button-primary-background); + @include ui-button-state-active($ui-button-primary-color, $ui-button-primary-background); } &--hover { - @include ui-button($ui-button-primary-color, $ui-button-primary-background); + @include ui-button(); @include ui-button-sizes($ui-button-small); - @include ui-button-state-hover($ui-button-primary-background); + @include ui-button-state-hover($ui-button-primary-color, $ui-button-primary-background); } } &--extra-small { - @include ui-button($ui-button-primary-color, $ui-button-primary-background); + @include ui-button(); @include ui-button-sizes($ui-button-extra-small); @include ui-button-states($ui-button-primary-color, $ui-button-primary-background); &--disabled { - @include ui-button($ui-button-primary-color, $ui-button-primary-background); + @include ui-button(); @include ui-button-sizes($ui-button-extra-small); - @include ui-button-state-disabled($ui-button-primary-background); + @include ui-button-state-disabled($ui-button-primary-color, $ui-button-primary-background); } &--focus { - @include ui-button($ui-button-primary-color, $ui-button-primary-background); + @include ui-button(); @include ui-button-sizes($ui-button-extra-small); - @include ui-button-state-focus($ui-button-primary-background); + @include ui-button-state-focus($ui-button-primary-color, $ui-button-primary-background); } &--active { - @include ui-button($ui-button-primary-color, $ui-button-primary-background); + @include ui-button(); @include ui-button-sizes($ui-button-extra-small); - @include ui-button-state-active($ui-button-primary-background); + @include ui-button-state-active($ui-button-primary-color, $ui-button-primary-background); } &--hover { - @include ui-button($ui-button-primary-color, $ui-button-primary-background); + @include ui-button(); @include ui-button-sizes($ui-button-extra-small); - @include ui-button-state-hover($ui-button-primary-background); + @include ui-button-state-hover($ui-button-primary-color, $ui-button-primary-background); } } } diff --git a/scss/atoms/buttons/_mixins.scss b/scss/atoms/buttons/_mixins.scss index bad995e..10cbaff 100644 --- a/scss/atoms/buttons/_mixins.scss +++ b/scss/atoms/buttons/_mixins.scss @@ -4,17 +4,14 @@ * ========================================================================== */ -@mixin ui-button($color, $bgcolor) { - background: $bgcolor; +@mixin ui-button() { border: 0; - color: $color; display: inline-block; font-weight: $ui-button-font-weight; margin: $ui-button-margin; text-align: center; text-decoration: none; text-transform: $ui-button-text-transform; - touch-action: manipulation; vertical-align: middle; } @@ -25,37 +22,48 @@ } @mixin ui-button-states($color, $bgcolor) { + background: $bgcolor; + color: $color; &:active { - @include ui-button-state-active($bgcolor); + @include ui-button-state-active($color, $bgcolor); } &:focus { - @include ui-button-state-focus($bgcolor); + @include ui-button-state-focus($color, $bgcolor); } &:hover { - @include ui-button-state-active($bgcolor); + @include ui-button-state-active($color, $bgcolor); } &:disabled { - @include ui-button-state-disabled($bgcolor); + @include ui-button-state-disabled($color, $bgcolor); } &[aria-disabled="true"] { - @include ui-button-state-disabled($bgcolor); + @include ui-button-state-disabled($color, $bgcolor); } } -@mixin ui-button-state-active($bgcolor) { +@mixin ui-button-state-default($color, $bgcolor) { + background: $bgcolor; + color: $color; +} + +@mixin ui-button-state-active($color, $bgcolor) { background: darken($bgcolor, 20%); + color: $color; } -@mixin ui-button-state-focus($bgcolor) { +@mixin ui-button-state-focus($color, $bgcolor) { background: darken($bgcolor, 15%); + color: $color; } -@mixin ui-button-state-hover($bgcolor) { +@mixin ui-button-state-hover($color, $bgcolor) { background: darken($bgcolor, 10%); + color: $color; } -@mixin ui-button-state-disabled($bgcolor) { +@mixin ui-button-state-disabled($color, $bgcolor) { background: $bgcolor; + color: $color; cursor: default; -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity="+$ui-button-disabled-opacity+")"; filter: alpha(opacity=$ui-button-disabled-opacity); From 5c0a7ec291604b0ec0a9eb5b2a65c4f6db36b8c3 Mon Sep 17 00:00:00 2001 From: Sarah Frisk Date: Mon, 20 Jul 2015 13:38:06 -0400 Subject: [PATCH 11/17] Buttons: Fixing typos in demo file --- demos/buttons.html | 4 ++-- 1 file changed, 2 insertions(+), 2 deletions(-) diff --git a/demos/buttons.html b/demos/buttons.html index 54a1d43..38dd5c2 100644 --- a/demos/buttons.html +++ b/demos/buttons.html @@ -83,9 +83,9 @@

Button Element

-

Setting Button Appearence Via Classes

+

Setting Button Appearance Via Classes

-

Sometimes you might need to set the class of a ui-button to display a state. This code works a<a>, <button>, or <input> elements.

+

Sometimes you might need to set the class of a ui-button to display a state. This code works with <a>, <button>, or <input> elements.

Disabled Class

Add --disabled to the end of the button class.

From ccc4bf9c83c1e28033a01665f98a472084dfc3ab Mon Sep 17 00:00:00 2001 From: Sarah Frisk Date: Thu, 23 Jul 2015 13:34:46 -0400 Subject: [PATCH 12/17] Buttons: Fixing css linting breaking the build --- .csslintrc | 1 + package.json | 4 ++-- scss/atoms/buttons/_mixins.scss | 9 ++++++--- scss/style.scss | 3 ++- 4 files changed, 11 insertions(+), 6 deletions(-) diff --git a/.csslintrc b/.csslintrc index 4273f5c..aa4fe55 100644 --- a/.csslintrc +++ b/.csslintrc @@ -4,6 +4,7 @@ "box-sizing": false, "compatible-vendor-prefixes": false, "duplicate-background-images": false, + "font-sizes": false, "import": false, "important": false, "outline-none": false, diff --git a/package.json b/package.json index 1a089eb..79bc361 100644 --- a/package.json +++ b/package.json @@ -10,8 +10,8 @@ "maintainers": [ { "name": "Sarah Frisk", - "email": "sarah@sarahfrisk.net", - "url": "http://sarahfrisk.net" + "email": "sarah@sarahfrisk.com", + "url": "http://sarahfrisk.com" }, { "name": "Alexander Schmitz", diff --git a/scss/atoms/buttons/_mixins.scss b/scss/atoms/buttons/_mixins.scss index 10cbaff..fdc32ce 100644 --- a/scss/atoms/buttons/_mixins.scss +++ b/scss/atoms/buttons/_mixins.scss @@ -36,9 +36,12 @@ &:disabled { @include ui-button-state-disabled($color, $bgcolor); } - &[aria-disabled="true"] { - @include ui-button-state-disabled($color, $bgcolor); - } + /** + * This triggers 'unqualified-attributes' in csslint + * &[aria-disabled="true"] { + * @include ui-button-state-disabled($color, $bgcolor); + * } + **/ } @mixin ui-button-state-default($color, $bgcolor) { diff --git a/scss/style.scss b/scss/style.scss index f297126..048218a 100644 --- a/scss/style.scss +++ b/scss/style.scss @@ -7,7 +7,8 @@ @import "atoms/icons/icons", - "atoms/typography/typography"; + "atoms/typography/typography", + "atoms/buttons/buttons"; @import "views/main"; From e23fde7be741a6e630174812b1ce716e4b247c73 Mon Sep 17 00:00:00 2001 From: Sarah Frisk Date: Sun, 16 Aug 2015 12:13:34 -0400 Subject: [PATCH 13/17] Buttons: Pull in jsass-vars into button variables --- scss/atoms/buttons/_buttons.scss | 5 +- scss/atoms/buttons/_variables.scss | 34 ------------- scss/variables/buttons.js | 80 ++++++++++++++++++++++++++++++ tasks/options/csslint.js | 5 +- 4 files changed, 87 insertions(+), 37 deletions(-) delete mode 100644 scss/atoms/buttons/_variables.scss create mode 100644 scss/variables/buttons.js diff --git a/scss/atoms/buttons/_buttons.scss b/scss/atoms/buttons/_buttons.scss index a1aad66..d3f2445 100644 --- a/scss/atoms/buttons/_buttons.scss +++ b/scss/atoms/buttons/_buttons.scss @@ -3,8 +3,9 @@ * Buttons * ========================================================================== */ -@import "variables"; -@import "mixins"; +@import + "dist/chassis", + "mixins"; .ui-button { &--default { diff --git a/scss/atoms/buttons/_variables.scss b/scss/atoms/buttons/_variables.scss deleted file mode 100644 index a7430a8..0000000 --- a/scss/atoms/buttons/_variables.scss +++ /dev/null @@ -1,34 +0,0 @@ -/* -* ========================================================================== -* Buttons (Variables) -* ========================================================================== -*/ -/* These variables won't remain here, will be removed with jsass. */ -$ui-button-default-color: #383838; -$ui-button-default-background: #fff; -$ui-button-primary-color: #f2f2f2; -$ui-button-primary-background: #4fc0c8; -$ui-button-disabled-opacity: .6; -$ui-button-font-weight: 500; -$ui-button-margin: .25em; -$ui-button-text-transform: uppercase; -$ui-button-large: ( - font-size: 20px, - line-height: 20px, - padding: .75em -); -$ui-button-default: ( - font-size: 16px, - line-height: 16px, - padding: .5em -); -$ui-button-small: ( - font-size: 14px, - line-height: 14px, - padding: .2em .5em -); -$ui-button-extra-small: ( - font-size: 12px, - line-height: 12px, - padding: .2em .5em -); diff --git a/scss/variables/buttons.js b/scss/variables/buttons.js new file mode 100644 index 0000000..663683f --- /dev/null +++ b/scss/variables/buttons.js @@ -0,0 +1,80 @@ +( function ( root, factory ) { + if ( typeof define === "function" && define.amd ) { + define( [ "./chassis" ], factory ); + } else if (typeof exports === "object") { + module.exports = factory( require("./chassis") ); + } else { + root.chassis = factory( root.chassis ); + } +}(this, function ( chassis ) { + + +chassis.uiButton = { + "ui-button-default-color": { + name: "Default Button Color", + value: "#383838" + }, + "ui-button-default-background": { + name: "Default Button Background", + value: "#ffffff" + }, + "ui-button-primary-color": { + name: "Primary Button Color", + value: "#ffffff" + }, + "ui-button-primary-background": { + name: "Primary Button Background", + value: "#337ab7" + }, + "ui-button-disabled-opacity": { + name: "Disabled Button Opacity", + value: .6 + }, + "ui-button-font-weight": { + name: "Button Font Weight", + value: 500 + }, + "ui-button-margin": { + name: "Button Margin", + value: ".25em" + }, + "ui-button-text-transform": { + name: "Button Text Transform", + value: "uppercase" + }, + "ui-button-large": { + name: "Large Button", + value: { + "font-size": "20px", + "line-height": "20px", + "padding": ".75em" + } + }, + "ui-button-default": { + name: "Default Button", + value: { + "font-size": "16px", + "line-height": "16px", + "padding": ".5em" + } + }, + "ui-button-small": { + name: "Small Button", + value: { + "font-size": "14px", + "line-height": "14px", + "padding": ".2em .5em" + } + }, + "ui-button-extra-small": { + name: "Extra Small Button", + value: { + "font-size": "12px", + "line-height": "12px", + "padding": ".2em .5em" + } + }, +}; + +return chassis; +} ) ); diff --git a/tasks/options/csslint.js b/tasks/options/csslint.js index 3e6c0d6..41c6c36 100644 --- a/tasks/options/csslint.js +++ b/tasks/options/csslint.js @@ -1,3 +1,6 @@ module.exports = { + options: { + csslintrc: ".csslintrc" + }, src: [ "dist/css/*.css" ] -}; \ No newline at end of file +}; From 3cb15652e8d403a681047a1f3c016309a1d7e57d Mon Sep 17 00:00:00 2001 From: Sarah Frisk Date: Mon, 17 Aug 2015 22:19:00 -0400 Subject: [PATCH 14/17] Buttons: Adding Success/Info/Warning/Danger buttons --- demos/buttons.html | 168 ++++++++--- scss/atoms/buttons/_buttons.scss | 480 +++++++++++++++++++++++++++++++ scss/atoms/buttons/_mixins.scss | 16 +- scss/variables/buttons.js | 62 +++- 4 files changed, 678 insertions(+), 48 deletions(-) diff --git a/demos/buttons.html b/demos/buttons.html index 38dd5c2..6801b00 100644 --- a/demos/buttons.html +++ b/demos/buttons.html @@ -31,28 +31,50 @@

Button Classes

Options

- + + + + + + +

Sizes

- - + + + + + +

- - + + + + + +

- - + + + + + +

- - + + + + + +

@@ -65,20 +87,36 @@

Button Element

- - + + + + + +

- - + + + + + +

- - + + + + + +

- - + + + + + +

@@ -91,20 +129,36 @@

Disabled Class

Add --disabled to the end of the button class.

- Disabled Disabled + Disabled + Disabled + Disabled + Disabled + Disabled

- Disabled Disabled + Disabled + Disabled + Disabled + Disabled + Disabled

- Disabled Disabled + Disabled + Disabled + Disabled + Disabled + Disabled

- Disabled Disabled + Disabled + Disabled + Disabled + Disabled + Disabled

@@ -112,20 +166,36 @@

Active Class

Add --active to the end of the button class.

- Active Active + Active + Active + Active + Active + Active

- Active Active + Active + Active + Active + Active + Active

- Active Active + Active + Active + Active + Active + Active

- Active Active + Active + Active + Active + Active + Active

@@ -133,20 +203,36 @@

Focus Class

Add --focus to the end of the button class.

- Focus Focus + Focus + Focus + Focus + Focus + Focus

- Focus Focus + Focus + Focus + Focus + Focus + Focus

- Focus Focus + Focus + Focus + Focus + Focus + Focus

- Focus Focus + Focus + Focus + Focus + Focus + Focus

@@ -154,20 +240,36 @@

Hover Class

Add --hover to the end of the button class.

- Hover Hover + Hover + Hover + Hover + Hover + Hover

- Hover Hover + Hover + Hover + Hover + Hover + Hover

- Hover Hover + Hover + Hover + Hover + Hover + Hover

- Hover Hover + Hover + Hover + Hover + Hover + Hover

diff --git a/scss/atoms/buttons/_buttons.scss b/scss/atoms/buttons/_buttons.scss index d3f2445..90f5e35 100644 --- a/scss/atoms/buttons/_buttons.scss +++ b/scss/atoms/buttons/_buttons.scss @@ -247,4 +247,484 @@ } } } + + &--success { + @include ui-button(); + @include ui-button-sizes($ui-button-default); + @include ui-button-states($ui-button-success-color, $ui-button-success-background); + + &--disabled { + @include ui-button(); + @include ui-button-sizes($ui-button-default); + @include ui-button-state-disabled($ui-button-success-color, $ui-button-success-background); + } + + &--focus { + @include ui-button(); + @include ui-button-sizes($ui-button-default); + @include ui-button-state-focus($ui-button-success-color, $ui-button-success-background); + } + + &--active { + @include ui-button(); + @include ui-button-sizes($ui-button-default); + @include ui-button-state-active($ui-button-success-color, $ui-button-success-background); + } + + &--hover { + @include ui-button(); + @include ui-button-sizes($ui-button-default); + @include ui-button-state-hover($ui-button-success-color, $ui-button-success-background); + } + + &--large { + @include ui-button(); + @include ui-button-sizes($ui-button-large); + @include ui-button-states($ui-button-success-color, $ui-button-success-background); + + &--disabled { + @include ui-button(); + @include ui-button-sizes($ui-button-large); + @include ui-button-state-disabled($ui-button-success-color, $ui-button-success-background); + } + + &--focus { + @include ui-button(); + @include ui-button-sizes($ui-button-large); + @include ui-button-state-focus($ui-button-success-color, $ui-button-success-background); + } + + &--active { + @include ui-button(); + @include ui-button-sizes($ui-button-large); + @include ui-button-state-active($ui-button-success-color, $ui-button-success-background); + } + + &--hover { + @include ui-button(); + @include ui-button-sizes($ui-button-large); + @include ui-button-state-hover($ui-button-success-color, $ui-button-success-background); + } + } + + &--small { + @include ui-button(); + @include ui-button-sizes($ui-button-small); + @include ui-button-states($ui-button-success-color, $ui-button-success-background); + + &--disabled { + @include ui-button(); + @include ui-button-sizes($ui-button-small); + @include ui-button-state-disabled($ui-button-success-color, $ui-button-success-background); + } + + &--focus { + @include ui-button(); + @include ui-button-sizes($ui-button-small); + @include ui-button-state-focus($ui-button-success-color, $ui-button-success-background); + } + + &--active { + @include ui-button(); + @include ui-button-sizes($ui-button-small); + @include ui-button-state-active($ui-button-success-color, $ui-button-success-background); + } + + &--hover { + @include ui-button(); + @include ui-button-sizes($ui-button-small); + @include ui-button-state-hover($ui-button-success-color, $ui-button-success-background); + } + } + + &--extra-small { + @include ui-button(); + @include ui-button-sizes($ui-button-extra-small); + @include ui-button-states($ui-button-success-color, $ui-button-success-background); + + &--disabled { + @include ui-button(); + @include ui-button-sizes($ui-button-extra-small); + @include ui-button-state-disabled($ui-button-success-color, $ui-button-success-background); + } + + &--focus { + @include ui-button(); + @include ui-button-sizes($ui-button-extra-small); + @include ui-button-state-focus($ui-button-success-color, $ui-button-success-background); + } + + &--active { + @include ui-button(); + @include ui-button-sizes($ui-button-extra-small); + @include ui-button-state-active($ui-button-success-color, $ui-button-success-background); + } + + &--hover { + @include ui-button(); + @include ui-button-sizes($ui-button-extra-small); + @include ui-button-state-hover($ui-button-success-color, $ui-button-success-background); + } + } + } + + &--info { + @include ui-button(); + @include ui-button-sizes($ui-button-default); + @include ui-button-states($ui-button-info-color, $ui-button-info-background); + + &--disabled { + @include ui-button(); + @include ui-button-sizes($ui-button-default); + @include ui-button-state-disabled($ui-button-info-color, $ui-button-info-background); + } + + &--focus { + @include ui-button(); + @include ui-button-sizes($ui-button-default); + @include ui-button-state-focus($ui-button-info-color, $ui-button-info-background); + } + + &--active { + @include ui-button(); + @include ui-button-sizes($ui-button-default); + @include ui-button-state-active($ui-button-info-color, $ui-button-info-background); + } + + &--hover { + @include ui-button(); + @include ui-button-sizes($ui-button-default); + @include ui-button-state-hover($ui-button-info-color, $ui-button-info-background); + } + + &--large { + @include ui-button(); + @include ui-button-sizes($ui-button-large); + @include ui-button-states($ui-button-info-color, $ui-button-info-background); + + &--disabled { + @include ui-button(); + @include ui-button-sizes($ui-button-large); + @include ui-button-state-disabled($ui-button-info-color, $ui-button-info-background); + } + + &--focus { + @include ui-button(); + @include ui-button-sizes($ui-button-large); + @include ui-button-state-focus($ui-button-info-color, $ui-button-info-background); + } + + &--active { + @include ui-button(); + @include ui-button-sizes($ui-button-large); + @include ui-button-state-active($ui-button-info-color, $ui-button-info-background); + } + + &--hover { + @include ui-button(); + @include ui-button-sizes($ui-button-large); + @include ui-button-state-hover($ui-button-info-color, $ui-button-info-background); + } + } + + &--small { + @include ui-button(); + @include ui-button-sizes($ui-button-small); + @include ui-button-states($ui-button-info-color, $ui-button-info-background); + + &--disabled { + @include ui-button(); + @include ui-button-sizes($ui-button-small); + @include ui-button-state-disabled($ui-button-info-color, $ui-button-info-background); + } + + &--focus { + @include ui-button(); + @include ui-button-sizes($ui-button-small); + @include ui-button-state-focus($ui-button-info-color, $ui-button-info-background); + } + + &--active { + @include ui-button(); + @include ui-button-sizes($ui-button-small); + @include ui-button-state-active($ui-button-info-color, $ui-button-info-background); + } + + &--hover { + @include ui-button(); + @include ui-button-sizes($ui-button-small); + @include ui-button-state-hover($ui-button-info-color, $ui-button-info-background); + } + } + + &--extra-small { + @include ui-button(); + @include ui-button-sizes($ui-button-extra-small); + @include ui-button-states($ui-button-info-color, $ui-button-info-background); + + &--disabled { + @include ui-button(); + @include ui-button-sizes($ui-button-extra-small); + @include ui-button-state-disabled($ui-button-info-color, $ui-button-info-background); + } + + &--focus { + @include ui-button(); + @include ui-button-sizes($ui-button-extra-small); + @include ui-button-state-focus($ui-button-info-color, $ui-button-info-background); + } + + &--active { + @include ui-button(); + @include ui-button-sizes($ui-button-extra-small); + @include ui-button-state-active($ui-button-info-color, $ui-button-info-background); + } + + &--hover { + @include ui-button(); + @include ui-button-sizes($ui-button-extra-small); + @include ui-button-state-hover($ui-button-info-color, $ui-button-info-background); + } + } + } + + &--warning { + @include ui-button(); + @include ui-button-sizes($ui-button-default); + @include ui-button-states($ui-button-warning-color, $ui-button-warning-background); + + &--disabled { + @include ui-button(); + @include ui-button-sizes($ui-button-default); + @include ui-button-state-disabled($ui-button-warning-color, $ui-button-warning-background); + } + + &--focus { + @include ui-button(); + @include ui-button-sizes($ui-button-default); + @include ui-button-state-focus($ui-button-warning-color, $ui-button-warning-background); + } + + &--active { + @include ui-button(); + @include ui-button-sizes($ui-button-default); + @include ui-button-state-active($ui-button-warning-color, $ui-button-warning-background); + } + + &--hover { + @include ui-button(); + @include ui-button-sizes($ui-button-default); + @include ui-button-state-hover($ui-button-warning-color, $ui-button-warning-background); + } + + &--large { + @include ui-button(); + @include ui-button-sizes($ui-button-large); + @include ui-button-states($ui-button-warning-color, $ui-button-warning-background); + + &--disabled { + @include ui-button(); + @include ui-button-sizes($ui-button-large); + @include ui-button-state-disabled($ui-button-warning-color, $ui-button-warning-background); + } + + &--focus { + @include ui-button(); + @include ui-button-sizes($ui-button-large); + @include ui-button-state-focus($ui-button-warning-color, $ui-button-warning-background); + } + + &--active { + @include ui-button(); + @include ui-button-sizes($ui-button-large); + @include ui-button-state-active($ui-button-warning-color, $ui-button-warning-background); + } + + &--hover { + @include ui-button(); + @include ui-button-sizes($ui-button-large); + @include ui-button-state-hover($ui-button-warning-color, $ui-button-warning-background); + } + } + + &--small { + @include ui-button(); + @include ui-button-sizes($ui-button-small); + @include ui-button-states($ui-button-warning-color, $ui-button-warning-background); + + &--disabled { + @include ui-button(); + @include ui-button-sizes($ui-button-small); + @include ui-button-state-disabled($ui-button-warning-color, $ui-button-warning-background); + } + + &--focus { + @include ui-button(); + @include ui-button-sizes($ui-button-small); + @include ui-button-state-focus($ui-button-warning-color, $ui-button-warning-background); + } + + &--active { + @include ui-button(); + @include ui-button-sizes($ui-button-small); + @include ui-button-state-active($ui-button-warning-color, $ui-button-warning-background); + } + + &--hover { + @include ui-button(); + @include ui-button-sizes($ui-button-small); + @include ui-button-state-hover($ui-button-warning-color, $ui-button-warning-background); + } + } + + &--extra-small { + @include ui-button(); + @include ui-button-sizes($ui-button-extra-small); + @include ui-button-states($ui-button-warning-color, $ui-button-warning-background); + + &--disabled { + @include ui-button(); + @include ui-button-sizes($ui-button-extra-small); + @include ui-button-state-disabled($ui-button-warning-color, $ui-button-warning-background); + } + + &--focus { + @include ui-button(); + @include ui-button-sizes($ui-button-extra-small); + @include ui-button-state-focus($ui-button-warning-color, $ui-button-warning-background); + } + + &--active { + @include ui-button(); + @include ui-button-sizes($ui-button-extra-small); + @include ui-button-state-active($ui-button-warning-color, $ui-button-warning-background); + } + + &--hover { + @include ui-button(); + @include ui-button-sizes($ui-button-extra-small); + @include ui-button-state-hover($ui-button-warning-color, $ui-button-warning-background); + } + } + } + + &--danger { + @include ui-button(); + @include ui-button-sizes($ui-button-default); + @include ui-button-states($ui-button-danger-color, $ui-button-danger-background); + + &--disabled { + @include ui-button(); + @include ui-button-sizes($ui-button-default); + @include ui-button-state-disabled($ui-button-danger-color, $ui-button-danger-background); + } + + &--focus { + @include ui-button(); + @include ui-button-sizes($ui-button-default); + @include ui-button-state-focus($ui-button-danger-color, $ui-button-danger-background); + } + + &--active { + @include ui-button(); + @include ui-button-sizes($ui-button-default); + @include ui-button-state-active($ui-button-danger-color, $ui-button-danger-background); + } + + &--hover { + @include ui-button(); + @include ui-button-sizes($ui-button-default); + @include ui-button-state-hover($ui-button-danger-color, $ui-button-danger-background); + } + + &--large { + @include ui-button(); + @include ui-button-sizes($ui-button-large); + @include ui-button-states($ui-button-danger-color, $ui-button-danger-background); + + &--disabled { + @include ui-button(); + @include ui-button-sizes($ui-button-large); + @include ui-button-state-disabled($ui-button-danger-color, $ui-button-danger-background); + } + + &--focus { + @include ui-button(); + @include ui-button-sizes($ui-button-large); + @include ui-button-state-focus($ui-button-danger-color, $ui-button-danger-background); + } + + &--active { + @include ui-button(); + @include ui-button-sizes($ui-button-large); + @include ui-button-state-active($ui-button-danger-color, $ui-button-danger-background); + } + + &--hover { + @include ui-button(); + @include ui-button-sizes($ui-button-large); + @include ui-button-state-hover($ui-button-danger-color, $ui-button-danger-background); + } + } + + &--small { + @include ui-button(); + @include ui-button-sizes($ui-button-small); + @include ui-button-states($ui-button-danger-color, $ui-button-danger-background); + + &--disabled { + @include ui-button(); + @include ui-button-sizes($ui-button-small); + @include ui-button-state-disabled($ui-button-danger-color, $ui-button-danger-background); + } + + &--focus { + @include ui-button(); + @include ui-button-sizes($ui-button-small); + @include ui-button-state-focus($ui-button-danger-color, $ui-button-danger-background); + } + + &--active { + @include ui-button(); + @include ui-button-sizes($ui-button-small); + @include ui-button-state-active($ui-button-danger-color, $ui-button-danger-background); + } + + &--hover { + @include ui-button(); + @include ui-button-sizes($ui-button-small); + @include ui-button-state-hover($ui-button-danger-color, $ui-button-danger-background); + } + } + + &--extra-small { + @include ui-button(); + @include ui-button-sizes($ui-button-extra-small); + @include ui-button-states($ui-button-danger-color, $ui-button-danger-background); + + &--disabled { + @include ui-button(); + @include ui-button-sizes($ui-button-extra-small); + @include ui-button-state-disabled($ui-button-danger-color, $ui-button-danger-background); + } + + &--focus { + @include ui-button(); + @include ui-button-sizes($ui-button-extra-small); + @include ui-button-state-focus($ui-button-danger-color, $ui-button-danger-background); + } + + &--active { + @include ui-button(); + @include ui-button-sizes($ui-button-extra-small); + @include ui-button-state-active($ui-button-danger-color, $ui-button-danger-background); + } + + &--hover { + @include ui-button(); + @include ui-button-sizes($ui-button-extra-small); + @include ui-button-state-hover($ui-button-danger-color, $ui-button-danger-background); + } + } + } } diff --git a/scss/atoms/buttons/_mixins.scss b/scss/atoms/buttons/_mixins.scss index fdc32ce..a009005 100644 --- a/scss/atoms/buttons/_mixins.scss +++ b/scss/atoms/buttons/_mixins.scss @@ -5,7 +5,6 @@ */ @mixin ui-button() { - border: 0; display: inline-block; font-weight: $ui-button-font-weight; margin: $ui-button-margin; @@ -13,17 +12,21 @@ text-decoration: none; text-transform: $ui-button-text-transform; vertical-align: middle; + white-space: nowrap; } @mixin ui-button-sizes($size) { - font-size: map-get( $size, font-size); - line-height: map-get( $size, line-height); - padding: map-get( $size, padding); + border-radius: map-get( $size, border-radius ); + font-size: map-get( $size, font-size ); + line-height: map-get( $size, line-height ); + padding: map-get( $size, padding ); } @mixin ui-button-states($color, $bgcolor) { background: $bgcolor; + border: $ui-button-border-width solid darken($bgcolor, 10%); color: $color; + &:active { @include ui-button-state-active($color, $bgcolor); } @@ -46,26 +49,31 @@ @mixin ui-button-state-default($color, $bgcolor) { background: $bgcolor; + border: $ui-button-border-width solid darken($bgcolor, 10%); color: $color; } @mixin ui-button-state-active($color, $bgcolor) { background: darken($bgcolor, 20%); + border: $ui-button-border-width solid darken($bgcolor, 30%); color: $color; } @mixin ui-button-state-focus($color, $bgcolor) { background: darken($bgcolor, 15%); + border: $ui-button-border-width solid darken($bgcolor, 25%); color: $color; } @mixin ui-button-state-hover($color, $bgcolor) { background: darken($bgcolor, 10%); + border: $ui-button-border-width solid darken($bgcolor, 20%); color: $color; } @mixin ui-button-state-disabled($color, $bgcolor) { background: $bgcolor; + border: $ui-button-border-width solid darken($bgcolor, 10%); color: $color; cursor: default; -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity="+$ui-button-disabled-opacity+")"; diff --git a/scss/variables/buttons.js b/scss/variables/buttons.js index 663683f..b51f4e6 100644 --- a/scss/variables/buttons.js +++ b/scss/variables/buttons.js @@ -26,6 +26,38 @@ chassis.uiButton = { name: "Primary Button Background", value: "#337ab7" }, + "ui-button-success-color": { + name: "Success Button Color", + value: "#ffffff" + }, + "ui-button-success-background": { + name: "Success Button Background", + value: "#5cb85c" + }, + "ui-button-info-color": { + name: "Info Button Color", + value: "#ffffff" + }, + "ui-button-info-background": { + name: "Info Button Background", + value: "#5bc0de" + }, + "ui-button-warning-color": { + name: "Warning Button Color", + value: "#ffffff" + }, + "ui-button-warning-background": { + name: "Warning Button Background", + value: "#f0ad4e" + }, + "ui-button-danger-color": { + name: "Danger Button Color", + value: "#ffffff" + }, + "ui-button-danger-background": { + name: "Danger Button Background", + value: "#d9534f" + }, "ui-button-disabled-opacity": { name: "Disabled Button Opacity", value: .6 @@ -40,38 +72,46 @@ chassis.uiButton = { }, "ui-button-text-transform": { name: "Button Text Transform", - value: "uppercase" + value: "none" + }, + "ui-button-border-width": { + name: "Button Border Width", + value: "1px" }, "ui-button-large": { name: "Large Button", value: { - "font-size": "20px", - "line-height": "20px", - "padding": ".75em" + "border-radius": "6px", + "font-size": "16px", + "line-height": "16px", + "padding": ".75em 1.25em" } }, "ui-button-default": { name: "Default Button", value: { - "font-size": "16px", - "line-height": "16px", - "padding": ".5em" + "border-radius": "4px", + "font-size": "14px", + "line-height": "14px", + "padding": ".5em 1em" } }, "ui-button-small": { name: "Small Button", value: { - "font-size": "14px", - "line-height": "14px", - "padding": ".2em .5em" + "border-radius": "3px", + "font-size": "12px", + "line-height": "12px", + "padding": ".35em .75em" } }, "ui-button-extra-small": { name: "Extra Small Button", value: { + "border-radius": "3px", "font-size": "12px", "line-height": "12px", - "padding": ".2em .5em" + "padding": ".2em .35em" } }, }; From e74e4db5aa1f36403e5bd6375435da5a43f11a67 Mon Sep 17 00:00:00 2001 From: Sarah Frisk Date: Mon, 17 Aug 2015 22:26:46 -0400 Subject: [PATCH 15/17] Buttons: Adjusting rounded corner variable --- scss/variables/buttons.js | 8 ++++---- 1 file changed, 4 insertions(+), 4 deletions(-) diff --git a/scss/variables/buttons.js b/scss/variables/buttons.js index b51f4e6..9104176 100644 --- a/scss/variables/buttons.js +++ b/scss/variables/buttons.js @@ -81,7 +81,7 @@ chassis.uiButton = { "ui-button-large": { name: "Large Button", value: { - "border-radius": "6px", + "border-radius": "2px", "font-size": "16px", "line-height": "16px", "padding": ".75em 1.25em" @@ -90,7 +90,7 @@ chassis.uiButton = { "ui-button-default": { name: "Default Button", value: { - "border-radius": "4px", + "border-radius": "2px", "font-size": "14px", "line-height": "14px", "padding": ".5em 1em" @@ -99,7 +99,7 @@ chassis.uiButton = { "ui-button-small": { name: "Small Button", value: { - "border-radius": "3px", + "border-radius": "2px", "font-size": "12px", "line-height": "12px", "padding": ".35em .75em" @@ -108,7 +108,7 @@ chassis.uiButton = { "ui-button-extra-small": { name: "Extra Small Button", value: { - "border-radius": "3px", + "border-radius": "2px", "font-size": "12px", "line-height": "12px", "padding": ".2em .35em" From 005be5e4464af531751e0cc16d756e33b755bdd4 Mon Sep 17 00:00:00 2001 From: Sarah Frisk Date: Mon, 17 Aug 2015 22:35:39 -0400 Subject: [PATCH 16/17] Buttons: linking to min file --- demos/buttons.html | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/demos/buttons.html b/demos/buttons.html index 6801b00..05fc11e 100644 --- a/demos/buttons.html +++ b/demos/buttons.html @@ -6,7 +6,7 @@ CSS Chassis - Buttons - + From 435dd5e8f3cc7e56d8ab991b9d5dc2f95693fc42 Mon Sep 17 00:00:00 2001 From: Sarah Frisk Date: Mon, 17 Aug 2015 22:38:39 -0400 Subject: [PATCH 17/17] Buttons: Add pointer cursor to buttons --- scss/atoms/buttons/_mixins.scss | 1 + 1 file changed, 1 insertion(+) diff --git a/scss/atoms/buttons/_mixins.scss b/scss/atoms/buttons/_mixins.scss index a009005..b53b30a 100644 --- a/scss/atoms/buttons/_mixins.scss +++ b/scss/atoms/buttons/_mixins.scss @@ -5,6 +5,7 @@ */ @mixin ui-button() { + cursor: pointer; display: inline-block; font-weight: $ui-button-font-weight; margin: $ui-button-margin;