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.
@@ -112,20 +166,36 @@ Active Class
Add --active to the end of the button class.
@@ -133,20 +203,36 @@ Focus Class
Add --focus to the end of the button class.
@@ -154,20 +240,36 @@ Hover Class
Add --hover to the end of the button class.
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;