From 68751e8ff3f0afec46b9ee227892565dd3bce5bd Mon Sep 17 00:00:00 2001 From: Adam Bradley Date: Wed, 16 Oct 2013 11:45:59 -0500 Subject: [PATCH] button margins/testing --- scss/ionic/_button.scss | 33 ++-- scss/ionic/_variables.scss | 18 +-- test/buttons.html | 312 +++++++++++++++++++++++++------------ 3 files changed, 245 insertions(+), 118 deletions(-) diff --git a/scss/ionic/_button.scss b/scss/ionic/_button.scss index 7f39195206..5d763a6d38 100644 --- a/scss/ionic/_button.scss +++ b/scss/ionic/_button.scss @@ -6,10 +6,9 @@ padding: $button-padding; - border-width: 0; + border-width: $button-border-width; border-style: solid; - border-top-width: $button-border-width; - border-bottom-width: $button-border-width; + border-radius: $button-border-radius; color: $button-color; @@ -17,12 +16,12 @@ text-align: center; font-size: $button-font-size; + line-height: $line-height-computed; cursor: pointer; &.button-icon { padding: $button-clear-padding; - width: auto; border: none; background: none; } @@ -96,17 +95,27 @@ } } + &.block { + margin-top: $button-block-margin; + margin-bottom: $button-block-margin; + } + +} + +.button-full, +.button-full > .button { + margin-right: 0; + margin-left: 0; + border-right-width: 0; + border-left-width: 0; + border-radius: 0; +} + +button.block { + width: 100%; } a.button { text-decoration: none; } -.margin.button, -.margin .button, -.padding .button { - border-right-width: $button-border-width; - border-left-width: $button-border-width; - border-radius: $button-border-radius; -} - diff --git a/scss/ionic/_variables.scss b/scss/ionic/_variables.scss index f16af59774..b7d8aca01e 100644 --- a/scss/ionic/_variables.scss +++ b/scss/ionic/_variables.scss @@ -61,7 +61,7 @@ $mono-font-family: Monaco, Menlo, Consolas, "Courier New", monospace !de $base-font-family: $sans-font-family; $base-background-color: $white; $base-color: #000; -$content-padding: 10px; +$content-padding: 10px !default; $inset-margin: 10px; $border-radius-base: 4px !default; $border-radius-large: 6px !default; @@ -216,15 +216,13 @@ $info-border: darken(adjust-hue($info-bg, -10), 7%); $button-bar-button-line-height: 15px !default; -$button-color: #222; -$button-padding: 8px 12px; -$button-clear-padding: 4px 5px; -$button-border-radius: 2px; -$button-border-width: 1px; -$button-font-size: 16px; - -// Button block that has spacing -$button-block-margin: 10px 0 10px 0; +$button-color: #222; +$button-padding: 8px 12px; +$button-block-margin: 10px !default; +$button-clear-padding: 4px 5px; +$button-border-radius: 2px; +$button-border-width: 1px; +$button-font-size: 16px; $button-default-bg: $brand-default; $button-default-border: #ddd; diff --git a/test/buttons.html b/test/buttons.html index fba400fcb3..42d701e221 100644 --- a/test/buttons.html +++ b/test/buttons.html @@ -6,6 +6,17 @@ + @@ -18,136 +29,245 @@
-

Default (Inline)

+

<a> default

- Default - Secondary - Primary - Info - Success - Warning - Danger - Dark + .button-default + .button-secondary + .button-primary + .button-info + .button-success + .button-warning + .button-danger + .button-dark

-

Block (.block w/ parent .padding)

+
+ +

<button> default

- Default - Secondary - Primary - Info - Success - Warning - Danger - Dark + + + + + + + +

-

Icon (Inline Default)

+
+ +

a.block (parent w/ padding)

+

+ .button-default + .button-secondary + .button-primary + .button-info + .button-success + .button-warning + .button-danger + .button-dark +

+ +
+ +

button.block (parent w/ padding)

+

+ + + + + + + + +

+ +
+ +

a.button-icon

-

Icon (.block override)

+
+ +

button.button-icon

- +

-

Outline (Inline Default)

+
+ +

a.block.button-icon

- Default - Secondary - Primary - Info - Success - Warning - Danger - Dark +

-

Outline (.block override)

+
+ +

button.block.button-icon

- Default - Secondary - Primary - Info - Success - Warning - Danger - Dark +

-

Clear (Inline Default)

+
+ +

a.button-outline

- Default - Secondary - Primary - Info - Success - Warning - Danger - Dark + .button-default + .button-secondary + .button-primary + .button-info + .button-success + .button-warning + .button-danger + .button-dark

-

Clear (.block override)

+
+ +

button.button-outline

- Default - Secondary - Primary - Info - Success - Warning - Danger - Dark + + + + + + + +

+ +
+ +

a.block.button-outline (parent w/ padding)

+

+ .button-default + .button-secondary + .button-primary + .button-info + .button-success + .button-warning + .button-danger + .button-dark +

+ +
+ +

button.block.button-outline (parent w/ padding)

+

+ + + + + + + + +

+ +
+ +

a.button-clear

+

+ .button-default + .button-secondary + .button-primary + .button-info + .button-success + .button-warning + .button-danger + .button-dark +

+ +
+ +

button.button-clear

+

+ + + + + + + + +

+ +
+ +

a.block.button-clear (parent w/ padding)

+

+ .button-default + .button-secondary + .button-primary + .button-info + .button-success + .button-warning + .button-danger + .button-dark +

+ +
+ +

button.block.button-clear (parent w/ padding)

+

+ + + + + + + + +

+
-

Block w/out padding

+
+ +

a.block (parent w/out padding)

- Default - Secondary - Primary - Info - Success - Warning - Danger - Dark + .button-default + .button-secondary + .button-primary + .button-info + .button-success + .button-warning + .button-danger + .button-dark

-

Block w/out parent padding but parent .margin

-

- Default - Secondary - Primary - Info - Success - Warning - Danger - Dark +

+ +

a.block (.button-full on the parent)

+

+ .button-default + .button-secondary + .button-primary + .button-info + .button-success + .button-warning + .button-danger + .button-dark

-

<a> .block .margin set on each button and nothing on the parent

+
+ +

button.block.button-full on each button and nothing on the parent

- Default - Secondary - Primary - Info - Success - Warning - Danger - Dark + + + + + + + +

-

<button> .block .margin set on each button and nothing on the parent

-

- - - - - - - - -

+

Homepage