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/demos/buttons.html b/demos/buttons.html
new file mode 100644
index 0000000..05fc11e
--- /dev/null
+++ b/demos/buttons.html
@@ -0,0 +1,279 @@
+
+
+
+
+
+ CSS Chassis - Buttons
+
+
+
+
+
+
+
+
+CSS Chassis
+
+Button Classes
+
+Use the button classes on an <a>, <button>, or <input> element.
+
+
+
+
+Options
+
+
+
+Sizes
+
+
+
+
+Disabled State
+
+Button Element
+
+Add the disabled attribute to <button> buttons.
+
+
+
+
+Setting Button Appearance Via Classes
+
+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.
+
+
+Active Class
+Add --active to the end of the button class.
+
+
+Focus Class
+Add --focus to the end of the button class.
+
+
+Hover Class
+Add --hover to the end of the button class.
+
+
+
+
+
+
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/_buttons.scss b/scss/atoms/buttons/_buttons.scss
new file mode 100644
index 0000000..90f5e35
--- /dev/null
+++ b/scss/atoms/buttons/_buttons.scss
@@ -0,0 +1,730 @@
+/*
+* ==========================================================================
+* Buttons
+* ==========================================================================
+*/
+@import
+ "dist/chassis",
+ "mixins";
+
+.ui-button {
+ &--default {
+ @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();
+ @include ui-button-sizes($ui-button-default);
+ @include ui-button-state-disabled($ui-button-default-color, $ui-button-default-background);
+ }
+
+ &--focus {
+ @include ui-button();
+ @include ui-button-sizes($ui-button-default);
+ @include ui-button-state-focus($ui-button-default-color, $ui-button-default-background);
+ }
+
+ &--active {
+ @include ui-button();
+ @include ui-button-sizes($ui-button-default);
+ @include ui-button-state-active($ui-button-default-color, $ui-button-default-background);
+ }
+
+ &--hover {
+ @include ui-button();
+ @include ui-button-sizes($ui-button-default);
+ @include ui-button-state-hover($ui-button-default-color, $ui-button-default-background);
+ }
+
+ &--large {
+ @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();
+ @include ui-button-sizes($ui-button-large);
+ @include ui-button-state-disabled($ui-button-default-color, $ui-button-default-background);
+ }
+
+ &--focus {
+ @include ui-button();
+ @include ui-button-sizes($ui-button-large);
+ @include ui-button-state-focus($ui-button-default-color, $ui-button-default-background);
+ }
+
+ &--active {
+ @include ui-button();
+ @include ui-button-sizes($ui-button-large);
+ @include ui-button-state-active($ui-button-default-color, $ui-button-default-background);
+ }
+
+ &--hover {
+ @include ui-button();
+ @include ui-button-sizes($ui-button-large);
+ @include ui-button-state-hover($ui-button-default-color, $ui-button-default-background);
+ }
+ }
+
+ &--small {
+ @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();
+ @include ui-button-sizes($ui-button-small);
+ @include ui-button-state-disabled($ui-button-default-color, $ui-button-default-background);
+ }
+
+ &--focus {
+ @include ui-button();
+ @include ui-button-sizes($ui-button-small);
+ @include ui-button-state-focus($ui-button-default-color, $ui-button-default-background);
+ }
+
+ &--active {
+ @include ui-button();
+ @include ui-button-sizes($ui-button-small);
+ @include ui-button-state-active($ui-button-default-color, $ui-button-default-background);
+ }
+
+ &--hover {
+ @include ui-button();
+ @include ui-button-sizes($ui-button-small);
+ @include ui-button-state-hover($ui-button-default-color, $ui-button-default-background);
+ }
+ }
+
+ &--extra-small {
+ @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();
+ @include ui-button-sizes($ui-button-extra-small);
+ @include ui-button-state-disabled($ui-button-default-color, $ui-button-default-background);
+ }
+
+ &--focus {
+ @include ui-button();
+ @include ui-button-sizes($ui-button-extra-small);
+ @include ui-button-state-hover($ui-button-default-color, $ui-button-default-background);
+ }
+
+ &--active {
+ @include ui-button();
+ @include ui-button-sizes($ui-button-extra-small);
+ @include ui-button-state-active($ui-button-default-color, $ui-button-default-background);
+ }
+
+ &--hover {
+ @include ui-button();
+ @include ui-button-sizes($ui-button-extra-small);
+ @include ui-button-state-hover($ui-button-default-color, $ui-button-default-background);
+ }
+ }
+ }
+
+ &--primary {
+ @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();
+ @include ui-button-sizes($ui-button-default);
+ @include ui-button-state-disabled($ui-button-primary-color, $ui-button-primary-background);
+ }
+
+ &--focus {
+ @include ui-button();
+ @include ui-button-sizes($ui-button-default);
+ @include ui-button-state-focus($ui-button-primary-color, $ui-button-primary-background);
+ }
+
+ &--active {
+ @include ui-button();
+ @include ui-button-sizes($ui-button-default);
+ @include ui-button-state-active($ui-button-primary-color, $ui-button-primary-background);
+ }
+
+ &--hover {
+ @include ui-button();
+ @include ui-button-sizes($ui-button-default);
+ @include ui-button-state-hover($ui-button-primary-color, $ui-button-primary-background);
+ }
+
+ &--large {
+ @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();
+ @include ui-button-sizes($ui-button-large);
+ @include ui-button-state-disabled($ui-button-primary-color, $ui-button-primary-background);
+ }
+
+ &--focus {
+ @include ui-button();
+ @include ui-button-sizes($ui-button-large);
+ @include ui-button-state-focus($ui-button-primary-color, $ui-button-primary-background);
+ }
+
+ &--active {
+ @include ui-button();
+ @include ui-button-sizes($ui-button-large);
+ @include ui-button-state-active($ui-button-primary-color, $ui-button-primary-background);
+ }
+
+ &--hover {
+ @include ui-button();
+ @include ui-button-sizes($ui-button-large);
+ @include ui-button-state-hover($ui-button-primary-color, $ui-button-primary-background);
+ }
+ }
+
+ &--small {
+ @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();
+ @include ui-button-sizes($ui-button-small);
+ @include ui-button-state-disabled($ui-button-primary-color, $ui-button-primary-background);
+ }
+
+ &--focus {
+ @include ui-button();
+ @include ui-button-sizes($ui-button-small);
+ @include ui-button-state-focus($ui-button-primary-color, $ui-button-primary-background);
+ }
+
+ &--active {
+ @include ui-button();
+ @include ui-button-sizes($ui-button-small);
+ @include ui-button-state-active($ui-button-primary-color, $ui-button-primary-background);
+ }
+
+ &--hover {
+ @include ui-button();
+ @include ui-button-sizes($ui-button-small);
+ @include ui-button-state-hover($ui-button-primary-color, $ui-button-primary-background);
+ }
+ }
+
+ &--extra-small {
+ @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();
+ @include ui-button-sizes($ui-button-extra-small);
+ @include ui-button-state-disabled($ui-button-primary-color, $ui-button-primary-background);
+ }
+
+ &--focus {
+ @include ui-button();
+ @include ui-button-sizes($ui-button-extra-small);
+ @include ui-button-state-focus($ui-button-primary-color, $ui-button-primary-background);
+ }
+
+ &--active {
+ @include ui-button();
+ @include ui-button-sizes($ui-button-extra-small);
+ @include ui-button-state-active($ui-button-primary-color, $ui-button-primary-background);
+ }
+
+ &--hover {
+ @include ui-button();
+ @include ui-button-sizes($ui-button-extra-small);
+ @include ui-button-state-hover($ui-button-primary-color, $ui-button-primary-background);
+ }
+ }
+ }
+
+ &--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
new file mode 100644
index 0000000..b53b30a
--- /dev/null
+++ b/scss/atoms/buttons/_mixins.scss
@@ -0,0 +1,85 @@
+/*
+* ==========================================================================
+* Buttons (Mixins)
+* ==========================================================================
+*/
+
+@mixin ui-button() {
+ cursor: pointer;
+ 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;
+ vertical-align: middle;
+ white-space: nowrap;
+}
+
+@mixin ui-button-sizes($size) {
+ 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);
+ }
+ &:focus {
+ @include ui-button-state-focus($color, $bgcolor);
+ }
+ &:hover {
+ @include ui-button-state-active($color, $bgcolor);
+ }
+ &:disabled {
+ @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) {
+ 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+")";
+ 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/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";
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";
diff --git a/scss/variables/buttons.js b/scss/variables/buttons.js
new file mode 100644
index 0000000..9104176
--- /dev/null
+++ b/scss/variables/buttons.js
@@ -0,0 +1,120 @@
+( 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-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
+ },
+ "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: "none"
+ },
+ "ui-button-border-width": {
+ name: "Button Border Width",
+ value: "1px"
+ },
+ "ui-button-large": {
+ name: "Large Button",
+ value: {
+ "border-radius": "2px",
+ "font-size": "16px",
+ "line-height": "16px",
+ "padding": ".75em 1.25em"
+ }
+ },
+ "ui-button-default": {
+ name: "Default Button",
+ value: {
+ "border-radius": "2px",
+ "font-size": "14px",
+ "line-height": "14px",
+ "padding": ".5em 1em"
+ }
+ },
+ "ui-button-small": {
+ name: "Small Button",
+ value: {
+ "border-radius": "2px",
+ "font-size": "12px",
+ "line-height": "12px",
+ "padding": ".35em .75em"
+ }
+ },
+ "ui-button-extra-small": {
+ name: "Extra Small Button",
+ value: {
+ "border-radius": "2px",
+ "font-size": "12px",
+ "line-height": "12px",
+ "padding": ".2em .35em"
+ }
+ },
+};
+
+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
+};