From 979bba48105105e976c4b9ffe654bf1b06fb371c Mon Sep 17 00:00:00 2001
From: Adam Bradley <adamdbradley@gmail.com>
Date: Fri, 1 Nov 2013 11:26:43 -0500
Subject: [PATCH] button variables updates

---
 dist/css/ionic-ios7.css     | 86 +++++++++++++------------------------
 dist/css/ionic-scoped.css   | 85 +++++++++++++-----------------------
 dist/css/ionic.css          | 86 +++++++++++++------------------------
 scss/ionic/_bar.scss        | 21 +++++----
 scss/ionic/_button-bar.scss | 14 +-----
 scss/ionic/_button.scss     | 39 +++++++++--------
 scss/ionic/_variables.scss  | 27 +++++++-----
 7 files changed, 142 insertions(+), 216 deletions(-)

diff --git a/dist/css/ionic-ios7.css b/dist/css/ionic-ios7.css
index c23d5a3348..bc6ed1bccb 100644
--- a/dist/css/ionic-ios7.css
+++ b/dist/css/ionic-ios7.css
@@ -556,8 +556,8 @@ a.subdued‎ {
   border-style: solid;
   border-top: 1px solid transparent;
   border-bottom: 1px solid #dddddd;
-  background-size: 0;
-  background-color: white; }
+  background-color: white;
+  background-size: 0; }
   @media (min--moz-device-pixel-ratio: 1.5), (-webkit-min-device-pixel-ratio: 1.5), (min-device-pixel-ratio: 1.5), (min-resolution: 144dpi), (min-resolution: 1.5dppx) {
     .bar {
       border-top: none !important;
@@ -646,23 +646,17 @@ a.subdued‎ {
   .bar .title a {
     color: inherit; }
   .bar > .button {
-    -webkit-box-flex: 0;
-    -webkit-flex: 0;
-    -moz-box-flex: 0;
-    -moz-flex: 0;
-    -ms-flex: 0;
-    flex: 0;
     z-index: 1;
-    margin: 0;
-    padding: 2px 8px 0 8px;
-    min-height: 33px;
-    background-color: transparent;
+    padding: 0 8px;
+    min-height: 31px;
     font-size: 12px;
-    line-height: 28px; }
+    line-height: 30px; }
     .bar > .button i, .bar > .button .icon {
-      margin-top: 1px; }
-  .bar .button-bar {
-    line-height: 18px; }
+      font-size: 24px;
+      line-height: 29px; }
+  .bar .button-bar > .button {
+    min-height: 31px;
+    line-height: 31px; }
   .bar .button-bar + .button, .bar .button + .button-bar {
     margin-left: 5px; }
   .bar .title + .button:last-child,
@@ -1836,8 +1830,9 @@ input[type="range"] {
   position: relative;
   display: inline-block;
   margin: 0;
-  padding: 10px 12px 7px 12px;
-  min-height: 44px;
+  padding: 0 12px;
+  padding-top: 1px;
+  min-height: 42px;
   border-width: 1px;
   border-style: solid;
   border-radius: 2px;
@@ -1846,24 +1841,24 @@ input[type="range"] {
   text-align: center;
   text-overflow: ellipsis;
   font-size: 16px;
-  line-height: 23px;
+  line-height: 41px;
   cursor: pointer; }
   .button i, .button .icon {
     display: inline-block;
-    padding: 0;
+    padding: 0 0 1px 0;
     vertical-align: inherit;
     font-size: 24px;
-    line-height: 22px; }
+    line-height: 40px; }
   .button.button-icon {
-    padding: 12px 6px;
+    padding: 2px 4px;
     background: none; }
     .button.button-icon i, .button.button-icon .icon {
       font-size: 32px; }
   .button.button-clear {
     -webkit-transition: opacity 0.1s;
     transition: opacity 0.1s;
-    padding: 12px 6px;
-    max-height: 44px;
+    padding: 0 6px;
+    max-height: 42px;
     border: none;
     background: none;
     box-shadow: none; }
@@ -2062,20 +2057,22 @@ input[type="range"] {
     margin-bottom: 10px; }
 
 .button-small {
-  padding: 1px 8px 1px 8px;
-  min-height: 32px;
-  line-height: 29px;
-  font-size: 12px; }
+  padding: 0 4px;
+  min-height: 28px;
+  font-size: 12px;
+  line-height: 27px; }
   .button-small i, .button-small .icon {
-    font-size: 20px;
+    font-size: 16px;
     line-height: 26px; }
 
 .button-large {
-  padding: 12px 18px 12px 18px;
-  min-height: 52px;
-  font-size: 24px; }
+  padding: 0 12px;
+  min-height: 54px;
+  font-size: 18px;
+  line-height: 53px; }
   .button-large i, .button-large .icon {
-    font-size: 32px; }
+    font-size: 32px;
+    line-height: 52px; }
 
 .padding > .button.block:first-child {
   margin-top: 0; }
@@ -2123,7 +2120,6 @@ a.button {
   -moz-flex: 1;
   -ms-flex: 1;
   flex: 1;
-  display: block;
   overflow: hidden;
   padding: 0 16px;
   width: 0;
@@ -2131,33 +2127,13 @@ a.button {
   border-radius: 0;
   text-align: center;
   text-overflow: ellipsis;
-  white-space: nowrap;
-  line-height: 13px; }
+  white-space: nowrap; }
   .button-bar > .button:first-child {
     border-radius: 2px 0px 0px 2px; }
   .button-bar > .button:last-child {
     border-right-width: 1px;
     border-radius: 0px 2px 2px 0px; }
 
-.buttons {
-  display: -webkit-box;
-  display: -webkit-flex;
-  display: -moz-flex;
-  display: -ms-flexbox;
-  display: flex;
-  -webkit-box-flex: 1;
-  -webkit-flex: 1;
-  -moz-box-flex: 1;
-  -moz-flex: 1;
-  -ms-flex: 1;
-  flex: 1;
-  -webkit-box-direction: normal;
-  -webkit-box-orient: horizontal;
-  -webkit-flex-direction: horizontal;
-  -moz-flex-direction: horizontal;
-  -ms-flex-direction: horizontal;
-  flex-direction: horizontal; }
-
 .badge {
   display: inline-block;
   min-width: 10px;
diff --git a/dist/css/ionic-scoped.css b/dist/css/ionic-scoped.css
index 2859d4ba24..9c51b545ac 100644
--- a/dist/css/ionic-scoped.css
+++ b/dist/css/ionic-scoped.css
@@ -1489,8 +1489,8 @@
     border-style: solid;
     border-top: 1px solid transparent;
     border-bottom: 1px solid #dddddd;
-    background-size: 0;
-    background-color: white; }
+    background-color: white;
+    background-size: 0; }
     @media (min--moz-device-pixel-ratio: 1.5), (-webkit-min-device-pixel-ratio: 1.5), (min-device-pixel-ratio: 1.5), (min-resolution: 144dpi), (min-resolution: 1.5dppx) {
       .ionic .bar {
         border-top: none !important;
@@ -1579,23 +1579,17 @@
     .ionic .bar .title a {
       color: inherit; }
     .ionic .bar > .button {
-      -webkit-box-flex: 0;
-      -webkit-flex: 0;
-      -moz-box-flex: 0;
-      -moz-flex: 0;
-      -ms-flex: 0;
-      flex: 0;
       z-index: 1;
-      margin: 0;
-      padding: 2px 8px 0 8px;
-      min-height: 33px;
-      background-color: transparent;
+      padding: 0 8px;
+      min-height: 31px;
       font-size: 12px;
-      line-height: 28px; }
+      line-height: 30px; }
       .ionic .bar > .button i, .ionic .bar > .button .icon {
-        margin-top: 1px; }
-    .ionic .bar .button-bar {
-      line-height: 18px; }
+        font-size: 24px;
+        line-height: 29px; }
+    .ionic .bar .button-bar > .button {
+      min-height: 31px;
+      line-height: 31px; }
     .ionic .bar .button-bar + .button, .ionic .bar .button + .button-bar {
       margin-left: 5px; }
     .ionic .bar .title + .button:last-child,
@@ -2701,8 +2695,9 @@
     position: relative;
     display: inline-block;
     margin: 0;
-    padding: 10px 12px 7px 12px;
-    min-height: 44px;
+    padding: 0 12px;
+    padding-top: 1px;
+    min-height: 42px;
     border-width: 1px;
     border-style: solid;
     border-radius: 2px;
@@ -2711,24 +2706,24 @@
     text-align: center;
     text-overflow: ellipsis;
     font-size: 16px;
-    line-height: 23px;
+    line-height: 41px;
     cursor: pointer; }
     .ionic .button i, .ionic .button .icon {
       display: inline-block;
-      padding: 0;
+      padding: 0 0 1px 0;
       vertical-align: inherit;
       font-size: 24px;
-      line-height: 22px; }
+      line-height: 40px; }
     .ionic .button.button-icon {
-      padding: 12px 6px;
+      padding: 2px 4px;
       background: none; }
       .ionic .button.button-icon i, .ionic .button.button-icon .icon {
         font-size: 32px; }
     .ionic .button.button-clear {
       -webkit-transition: opacity 0.1s;
       transition: opacity 0.1s;
-      padding: 12px 6px;
-      max-height: 44px;
+      padding: 0 6px;
+      max-height: 42px;
       border: none;
       background: none;
       box-shadow: none; }
@@ -2926,19 +2921,21 @@
       margin-top: 10px;
       margin-bottom: 10px; }
   .ionic .button-small {
-    padding: 1px 8px 1px 8px;
-    min-height: 32px;
-    line-height: 29px;
-    font-size: 12px; }
+    padding: 0 4px;
+    min-height: 28px;
+    font-size: 12px;
+    line-height: 27px; }
     .ionic .button-small i, .ionic .button-small .icon {
-      font-size: 20px;
+      font-size: 16px;
       line-height: 26px; }
   .ionic .button-large {
-    padding: 12px 18px 12px 18px;
-    min-height: 52px;
-    font-size: 24px; }
+    padding: 0 12px;
+    min-height: 54px;
+    font-size: 18px;
+    line-height: 53px; }
     .ionic .button-large i, .ionic .button-large .icon {
-      font-size: 32px; }
+      font-size: 32px;
+      line-height: 52px; }
   .ionic .padding > .button.block:first-child {
     margin-top: 0; }
   .ionic .button-full,
@@ -2980,7 +2977,6 @@
     -moz-flex: 1;
     -ms-flex: 1;
     flex: 1;
-    display: block;
     overflow: hidden;
     padding: 0 16px;
     width: 0;
@@ -2988,31 +2984,12 @@
     border-radius: 0;
     text-align: center;
     text-overflow: ellipsis;
-    white-space: nowrap;
-    line-height: 13px; }
+    white-space: nowrap; }
     .ionic .button-bar > .button:first-child {
       border-radius: 2px 0px 0px 2px; }
     .ionic .button-bar > .button:last-child {
       border-right-width: 1px;
       border-radius: 0px 2px 2px 0px; }
-  .ionic .buttons {
-    display: -webkit-box;
-    display: -webkit-flex;
-    display: -moz-flex;
-    display: -ms-flexbox;
-    display: flex;
-    -webkit-box-flex: 1;
-    -webkit-flex: 1;
-    -moz-box-flex: 1;
-    -moz-flex: 1;
-    -ms-flex: 1;
-    flex: 1;
-    -webkit-box-direction: normal;
-    -webkit-box-orient: horizontal;
-    -webkit-flex-direction: horizontal;
-    -moz-flex-direction: horizontal;
-    -ms-flex-direction: horizontal;
-    flex-direction: horizontal; }
   .ionic .badge {
     display: inline-block;
     min-width: 10px;
diff --git a/dist/css/ionic.css b/dist/css/ionic.css
index 277fa062c7..da2206b7a2 100644
--- a/dist/css/ionic.css
+++ b/dist/css/ionic.css
@@ -1925,8 +1925,8 @@ a.subdued‎ {
   border-style: solid;
   border-top: 1px solid transparent;
   border-bottom: 1px solid #dddddd;
-  background-size: 0;
-  background-color: white; }
+  background-color: white;
+  background-size: 0; }
   @media (min--moz-device-pixel-ratio: 1.5), (-webkit-min-device-pixel-ratio: 1.5), (min-device-pixel-ratio: 1.5), (min-resolution: 144dpi), (min-resolution: 1.5dppx) {
     .bar {
       border-top: none !important;
@@ -2015,23 +2015,17 @@ a.subdued‎ {
   .bar .title a {
     color: inherit; }
   .bar > .button {
-    -webkit-box-flex: 0;
-    -webkit-flex: 0;
-    -moz-box-flex: 0;
-    -moz-flex: 0;
-    -ms-flex: 0;
-    flex: 0;
     z-index: 1;
-    margin: 0;
-    padding: 2px 8px 0 8px;
-    min-height: 33px;
-    background-color: transparent;
+    padding: 0 8px;
+    min-height: 31px;
     font-size: 12px;
-    line-height: 28px; }
+    line-height: 30px; }
     .bar > .button i, .bar > .button .icon {
-      margin-top: 1px; }
-  .bar .button-bar {
-    line-height: 18px; }
+      font-size: 24px;
+      line-height: 29px; }
+  .bar .button-bar > .button {
+    min-height: 31px;
+    line-height: 31px; }
   .bar .button-bar + .button, .bar .button + .button-bar {
     margin-left: 5px; }
   .bar .title + .button:last-child,
@@ -3317,8 +3311,9 @@ input[type="range"] {
   position: relative;
   display: inline-block;
   margin: 0;
-  padding: 10px 12px 7px 12px;
-  min-height: 44px;
+  padding: 0 12px;
+  padding-top: 1px;
+  min-height: 42px;
   border-width: 1px;
   border-style: solid;
   border-radius: 2px;
@@ -3327,24 +3322,24 @@ input[type="range"] {
   text-align: center;
   text-overflow: ellipsis;
   font-size: 16px;
-  line-height: 23px;
+  line-height: 41px;
   cursor: pointer; }
   .button i, .button .icon {
     display: inline-block;
-    padding: 0;
+    padding: 0 0 1px 0;
     vertical-align: inherit;
     font-size: 24px;
-    line-height: 22px; }
+    line-height: 40px; }
   .button.button-icon {
-    padding: 12px 6px;
+    padding: 2px 4px;
     background: none; }
     .button.button-icon i, .button.button-icon .icon {
       font-size: 32px; }
   .button.button-clear {
     -webkit-transition: opacity 0.1s;
     transition: opacity 0.1s;
-    padding: 12px 6px;
-    max-height: 44px;
+    padding: 0 6px;
+    max-height: 42px;
     border: none;
     background: none;
     box-shadow: none; }
@@ -3543,20 +3538,22 @@ input[type="range"] {
     margin-bottom: 10px; }
 
 .button-small {
-  padding: 1px 8px 1px 8px;
-  min-height: 32px;
-  line-height: 29px;
-  font-size: 12px; }
+  padding: 0 4px;
+  min-height: 28px;
+  font-size: 12px;
+  line-height: 27px; }
   .button-small i, .button-small .icon {
-    font-size: 20px;
+    font-size: 16px;
     line-height: 26px; }
 
 .button-large {
-  padding: 12px 18px 12px 18px;
-  min-height: 52px;
-  font-size: 24px; }
+  padding: 0 12px;
+  min-height: 54px;
+  font-size: 18px;
+  line-height: 53px; }
   .button-large i, .button-large .icon {
-    font-size: 32px; }
+    font-size: 32px;
+    line-height: 52px; }
 
 .padding > .button.block:first-child {
   margin-top: 0; }
@@ -3604,7 +3601,6 @@ a.button {
   -moz-flex: 1;
   -ms-flex: 1;
   flex: 1;
-  display: block;
   overflow: hidden;
   padding: 0 16px;
   width: 0;
@@ -3612,33 +3608,13 @@ a.button {
   border-radius: 0;
   text-align: center;
   text-overflow: ellipsis;
-  white-space: nowrap;
-  line-height: 13px; }
+  white-space: nowrap; }
   .button-bar > .button:first-child {
     border-radius: 2px 0px 0px 2px; }
   .button-bar > .button:last-child {
     border-right-width: 1px;
     border-radius: 0px 2px 2px 0px; }
 
-.buttons {
-  display: -webkit-box;
-  display: -webkit-flex;
-  display: -moz-flex;
-  display: -ms-flexbox;
-  display: flex;
-  -webkit-box-flex: 1;
-  -webkit-flex: 1;
-  -moz-box-flex: 1;
-  -moz-flex: 1;
-  -ms-flex: 1;
-  flex: 1;
-  -webkit-box-direction: normal;
-  -webkit-box-orient: horizontal;
-  -webkit-flex-direction: horizontal;
-  -moz-flex-direction: horizontal;
-  -ms-flex-direction: horizontal;
-  flex-direction: horizontal; }
-
 .badge {
   display: inline-block;
   min-width: 10px;
diff --git a/scss/ionic/_bar.scss b/scss/ionic/_bar.scss
index 06e4a7f912..20393c1bfe 100644
--- a/scss/ionic/_bar.scss
+++ b/scss/ionic/_bar.scss
@@ -20,9 +20,9 @@
   border-style: solid;
   border-top: 1px solid transparent;
   border-bottom: 1px solid $bar-default-border-color;
-  background-size: 0;
 
   background-color: $bar-bg;
+  background-size: 0;
   @media (min--moz-device-pixel-ratio: 1.5),
          (-webkit-min-device-pixel-ratio: 1.5),
          (min-device-pixel-ratio: 1.5),
@@ -102,22 +102,21 @@
   }
 
   > .button {
-    @include flex(0);
     z-index: 1;
-    margin: 0;
-    padding: 2px 8px 0 8px;
-    min-height: $button-bar-button-min-height;
-    background-color: transparent;
-    font-size: 12px;
-    line-height: 28px;
+    padding: $button-bar-button-padding;
+    min-height: $button-bar-button-height;
+    font-size: $button-bar-button-font-size;
+    line-height: $button-bar-button-height - $button-border-width;
 
     i, .icon {
-      margin-top: 1px;
+      font-size: $button-bar-button-icon-size;
+      line-height: $button-bar-button-height - $button-border-width - 1;
     }
   }
 
-  .button-bar {
-    line-height: $bar-button-bar-line-height;
+  .button-bar > .button {
+    min-height: $button-bar-button-height;
+    line-height: $button-bar-button-height;
   }
 
   .button-bar + .button, .button + .button-bar {
diff --git a/scss/ionic/_button-bar.scss b/scss/ionic/_button-bar.scss
index 1b4be3691d..779dd2eb7f 100644
--- a/scss/ionic/_button-bar.scss
+++ b/scss/ionic/_button-bar.scss
@@ -1,3 +1,4 @@
+
 .button-bar {
   @include display-flex();
   @include flex(1);
@@ -6,7 +7,6 @@
 
 .button-bar > .button {
   @include flex(1);
-  display: block;
   
   overflow: hidden;
 
@@ -20,9 +20,6 @@
   text-align: center;
   text-overflow: ellipsis;
   white-space: nowrap;
-  // Fix for box-flex width issue
-
-  line-height: $button-bar-button-line-height - 2;
 
   &:first-child {
     border-radius: 2px 0px 0px 2px;
@@ -32,12 +29,3 @@
     border-radius: 0px 2px 2px 0px;
   }
 }
-
-// Buttons are used to group a set of buttons, useful
-// to pull a set of buttons to the right side of a header
-// bar, for example.
-.buttons {
-  @include display-flex();
-  @include flex(1);
-  @include flex-direction(horizontal);
-}
diff --git a/scss/ionic/_button.scss b/scss/ionic/_button.scss
index bfab67aac3..73cbaf1b24 100644
--- a/scss/ionic/_button.scss
+++ b/scss/ionic/_button.scss
@@ -4,7 +4,8 @@
   margin: 0;
 
   padding: $button-padding;
-  min-height: $button-min-height;
+  padding-top: 1px;
+  min-height: $button-height;
 
   border-width: $button-border-width;
   border-style: solid;
@@ -17,31 +18,31 @@
 
   text-overflow: ellipsis;
   font-size: $button-font-size;
-  line-height: $button-line-height;
+  line-height: $button-height - $button-border-width;
 
   cursor: pointer;
 
   i, .icon {
     display: inline-block;
-    padding: 0;
+    padding: 0 0 $button-border-width 0;
     vertical-align: inherit;
-    font-size: $button-icon-font-size;
-    line-height: $button-line-height - 1;
+    font-size: $button-icon-size;
+    line-height: $button-height - $button-border-width - 1;
   }
 
   &.button-icon {
-    padding: $button-clear-padding;
+    padding: 2px 4px;
     background: none;
 
     i, .icon {
-      font-size: $button-icon-large-font-size;
+      font-size: $button-large-icon-size;
     }
   }
 
   &.button-clear {
     @include transition(opacity .1s);
     padding: $button-clear-padding;
-    max-height: 44px;
+    max-height: $button-height;
     border: none;
     background: none;
     box-shadow: none;
@@ -116,24 +117,26 @@
 }
 
 .button-small {
-  padding: 1px 8px 1px 8px;
-  min-height: $button-small-min-height;
-  line-height: $button-small-line-height;
-  font-size: $button-font-size - 4;
+  padding: $button-small-padding;
+  min-height: $button-small-height;
+  font-size: $button-small-font-size;
+  line-height: $button-small-height - $button-border-width;
 
   i, .icon {
-    font-size: $button-icon-font-size - 4;
-    line-height: $button-small-line-height - 3;
+    font-size: $button-small-icon-size;
+    line-height: $button-small-height - $button-border-width - 1;
   }
 }
 
 .button-large {
-  padding: 12px 18px 12px 18px;
-  min-height: $button-min-height + 8;
-  font-size: $button-font-size + 8;
+  padding: $button-large-padding;
+  min-height: $button-large-height;
+  font-size: $button-large-font-size;
+  line-height: $button-large-height - $button-border-width;
 
   i, .icon {
-    font-size: $button-icon-font-size + 8;
+    font-size: $button-large-icon-size;
+    line-height: $button-large-height - $button-border-width - 1;
   }
 }
 
diff --git a/scss/ionic/_variables.scss b/scss/ionic/_variables.scss
index be282691d2..e2e53e583f 100644
--- a/scss/ionic/_variables.scss
+++ b/scss/ionic/_variables.scss
@@ -210,23 +210,30 @@ $info-border:        darken(adjust-hue($info-bg, -10), 7%);
 // -------------------------------
 
 $button-color:                    #222;
-$button-padding:                  10px 12px 7px 12px;
 $button-block-margin:             10px !default;
-$button-clear-padding:            12px 6px;
+$button-clear-padding:            0 6px;
 $button-border-radius:            2px;
 $button-border-width:             1px;
+
 $button-font-size:                16px;
-$button-line-height:              23px;
-$button-min-height:               44px;
+$button-height:                   42px;
+$button-padding:                  0 12px;
+$button-icon-size:                24px;
 
-$button-small-line-height:        29px !default;
-$button-small-min-height:         32px !default;
+$button-large-font-size:          18px;
+$button-large-height:             54px;
+$button-large-padding:            0 12px;
+$button-large-icon-size:          32px;
 
-$button-icon-font-size:           24px;
-$button-icon-large-font-size:     32px;
+$button-small-font-size:          12px;
+$button-small-height:             28px;
+$button-small-padding:            0 4px;
+$button-small-icon-size:          16px;
 
-$button-bar-button-line-height:   15px !default;
-$button-bar-button-min-height:    33px !default;
+$button-bar-button-font-size:     12px;
+$button-bar-button-height:        31px !default;
+$button-bar-button-padding:       0 8px;
+$button-bar-button-icon-size:     24px;
 
 $button-default-bg:               $brand-default;
 $button-default-border:           #ddd;