From a5d574e159abdb13040d76a5fbfc872079489ec6 Mon Sep 17 00:00:00 2001
From: Adam Bradley <adamdbradley@gmail.com>
Date: Tue, 15 Oct 2013 09:35:27 -0500
Subject: [PATCH] block as button default

---
 dist/css/ionic-ios7.css   | 51 ++++++++++++++---------
 dist/css/ionic-scoped.css | 51 ++++++++++++++---------
 dist/css/ionic.css        | 51 ++++++++++++++---------
 scss/ionic/_button.scss   | 56 +++++++++++++------------
 test/buttons.html         | 88 ++++++++++++++++++++++++++-------------
 5 files changed, 181 insertions(+), 116 deletions(-)

diff --git a/dist/css/ionic-ios7.css b/dist/css/ionic-ios7.css
index 60e67fdd68..2ddfc38a52 100644
--- a/dist/css/ionic-ios7.css
+++ b/dist/css/ionic-ios7.css
@@ -1551,8 +1551,8 @@ input[type="checkbox"][readonly] {
 
 .button {
   position: relative;
-  display: inline-block;
-  margin: 0;
+  display: block;
+  margin: 10px 0 10px 0;
   padding: 8px 12px;
   border-width: 1px;
   border-style: solid;
@@ -1563,22 +1563,24 @@ input[type="checkbox"][readonly] {
   font-size: 16px;
   cursor: pointer; }
   .button.button-icon {
-    border: none;
-    background: none;
-    padding: 4px 5px; }
-  .button.button-clear {
-    border: none;
-    background: none;
-    box-shadow: none;
+    display: inline-block;
+    margin: 0;
     padding: 4px 5px;
+    width: auto;
+    border: none;
+    background: none; }
+  .button.button-clear {
     -webkit-transition: opacity 0.1s;
-    transition: opacity 0.1s; }
+    transition: opacity 0.1s;
+    display: inline-block;
+    margin: 0;
+    padding: 4px 5px;
+    width: auto;
+    border: none;
+    background: none;
+    box-shadow: none; }
     .button.button-clear:active, .button.button-clear.active {
       opacity: 0.3; }
-  .button.button-block {
-    display: block;
-    margin: 10px 0 10px 0;
-    width: 100%; }
   .button.button-default {
     color: #333333;
     background-color: white;
@@ -1742,18 +1744,27 @@ input[type="checkbox"][readonly] {
         color: #fff;
         box-shadow: none; }
   .button.button-outline {
-    background: none;
-    box-shadow: none;
-    /* padding: $button-clear-padding; */
     -webkit-transition: opacity 0.1s;
-    transition: opacity 0.1s; }
+    transition: opacity 0.1s;
+    display: inline-block;
+    margin: 0;
+    width: auto;
+    background: none;
+    box-shadow: none; }
   .button.button-icon {
     border: none;
     background: none; }
     .button.button-icon:active, .button.button-icon.active {
-      text-shadow: 0px 0px 10px white;
+      background: none;
       box-shadow: none;
-      background: none; }
+      text-shadow: 0px 0px 10px white; }
+  .button.button-inline {
+    display: inline-block;
+    margin: 0;
+    width: auto; }
+  .button.button-block {
+    display: block;
+    margin: 10px 0 10px 0; }
 
 a.button {
   text-decoration: none; }
diff --git a/dist/css/ionic-scoped.css b/dist/css/ionic-scoped.css
index 834497be02..a6a9dbc027 100644
--- a/dist/css/ionic-scoped.css
+++ b/dist/css/ionic-scoped.css
@@ -2186,8 +2186,8 @@
         display: inline; }
   .ionic .button {
     position: relative;
-    display: inline-block;
-    margin: 0;
+    display: block;
+    margin: 10px 0 10px 0;
     padding: 8px 12px;
     border-width: 1px;
     border-style: solid;
@@ -2198,22 +2198,24 @@
     font-size: 16px;
     cursor: pointer; }
     .ionic .button.button-icon {
-      border: none;
-      background: none;
-      padding: 4px 5px; }
-    .ionic .button.button-clear {
-      border: none;
-      background: none;
-      box-shadow: none;
+      display: inline-block;
+      margin: 0;
       padding: 4px 5px;
+      width: auto;
+      border: none;
+      background: none; }
+    .ionic .button.button-clear {
       -webkit-transition: opacity 0.1s;
-      transition: opacity 0.1s; }
+      transition: opacity 0.1s;
+      display: inline-block;
+      margin: 0;
+      padding: 4px 5px;
+      width: auto;
+      border: none;
+      background: none;
+      box-shadow: none; }
       .ionic .button.button-clear:active, .ionic .button.button-clear.active {
         opacity: 0.3; }
-    .ionic .button.button-block {
-      display: block;
-      margin: 10px 0 10px 0;
-      width: 100%; }
     .ionic .button.button-default {
       color: #333333;
       background-color: white;
@@ -2377,18 +2379,27 @@
           color: #fff;
           box-shadow: none; }
     .ionic .button.button-outline {
-      background: none;
-      box-shadow: none;
-      /* padding: $button-clear-padding; */
       -webkit-transition: opacity 0.1s;
-      transition: opacity 0.1s; }
+      transition: opacity 0.1s;
+      display: inline-block;
+      margin: 0;
+      width: auto;
+      background: none;
+      box-shadow: none; }
     .ionic .button.button-icon {
       border: none;
       background: none; }
       .ionic .button.button-icon:active, .ionic .button.button-icon.active {
-        text-shadow: 0px 0px 10px white;
+        background: none;
         box-shadow: none;
-        background: none; }
+        text-shadow: 0px 0px 10px white; }
+    .ionic .button.button-inline {
+      display: inline-block;
+      margin: 0;
+      width: auto; }
+    .ionic .button.button-block {
+      display: block;
+      margin: 10px 0 10px 0; }
   .ionic a.button {
     text-decoration: none; }
   .ionic .button-group {
diff --git a/dist/css/ionic.css b/dist/css/ionic.css
index be5b595bd7..919e5d97ee 100644
--- a/dist/css/ionic.css
+++ b/dist/css/ionic.css
@@ -2669,8 +2669,8 @@ input[type="checkbox"][readonly] {
 
 .button {
   position: relative;
-  display: inline-block;
-  margin: 0;
+  display: block;
+  margin: 10px 0 10px 0;
   padding: 8px 12px;
   border-width: 1px;
   border-style: solid;
@@ -2681,22 +2681,24 @@ input[type="checkbox"][readonly] {
   font-size: 16px;
   cursor: pointer; }
   .button.button-icon {
-    border: none;
-    background: none;
-    padding: 4px 5px; }
-  .button.button-clear {
-    border: none;
-    background: none;
-    box-shadow: none;
+    display: inline-block;
+    margin: 0;
     padding: 4px 5px;
+    width: auto;
+    border: none;
+    background: none; }
+  .button.button-clear {
     -webkit-transition: opacity 0.1s;
-    transition: opacity 0.1s; }
+    transition: opacity 0.1s;
+    display: inline-block;
+    margin: 0;
+    padding: 4px 5px;
+    width: auto;
+    border: none;
+    background: none;
+    box-shadow: none; }
     .button.button-clear:active, .button.button-clear.active {
       opacity: 0.3; }
-  .button.button-block {
-    display: block;
-    margin: 10px 0 10px 0;
-    width: 100%; }
   .button.button-default {
     color: #333333;
     background-color: white;
@@ -2860,18 +2862,27 @@ input[type="checkbox"][readonly] {
         color: #fff;
         box-shadow: none; }
   .button.button-outline {
-    background: none;
-    box-shadow: none;
-    /* padding: $button-clear-padding; */
     -webkit-transition: opacity 0.1s;
-    transition: opacity 0.1s; }
+    transition: opacity 0.1s;
+    display: inline-block;
+    margin: 0;
+    width: auto;
+    background: none;
+    box-shadow: none; }
   .button.button-icon {
     border: none;
     background: none; }
     .button.button-icon:active, .button.button-icon.active {
-      text-shadow: 0px 0px 10px white;
+      background: none;
       box-shadow: none;
-      background: none; }
+      text-shadow: 0px 0px 10px white; }
+  .button.button-inline {
+    display: inline-block;
+    margin: 0;
+    width: auto; }
+  .button.button-block {
+    display: block;
+    margin: 10px 0 10px 0; }
 
 a.button {
   text-decoration: none; }
diff --git a/scss/ionic/_button.scss b/scss/ionic/_button.scss
index d0586b6956..278694f069 100644
--- a/scss/ionic/_button.scss
+++ b/scss/ionic/_button.scss
@@ -1,9 +1,8 @@
 .button {
   position: relative;
+  display: block;
+  margin: $button-block-margin;
 
-  display: inline-block;
-
-  margin: 0;
   padding: $button-padding;
 
   border-width: $button-border-width;
@@ -20,31 +19,29 @@
   cursor: pointer;
 
   &.button-icon {
+    display: inline-block;
+    margin: 0;
+    padding: $button-clear-padding;
+    width: auto;
     border: none;
     background: none;
-    padding: $button-clear-padding;
   }
 
   &.button-clear {
+    @include transition(opacity .1s);
+    display: inline-block;
+    margin: 0;
+    padding: $button-clear-padding;
+    width: auto;
     border: none;
     background: none;
     box-shadow: none;
-    padding: $button-clear-padding;
-
-    // A nice iOS 7 style fade click
-    @include transition(opacity .1s);
 
     &:active, &.active {
       opacity: 0.3;
     }
   }
 
-  &.button-block {
-    display: block;
-    margin: $button-block-margin;
-    width: 100%;
-  }
-
   &.button-default {
     @include button-style($button-default-bg, $button-default-border, $button-default-active-bg, $button-default-active-border, $gray-dark);
     @include button-clear($gray-dark);
@@ -85,28 +82,35 @@
   }
 
   &.button-outline {
-    background: none;
-    box-shadow: none;
-
-   /* padding: $button-clear-padding; */
-
-    // A nice iOS 7 style fade click
     @include transition(opacity .1s);
-
-    &:active, &.active {
-    } 
+    display: inline-block;
+    margin: 0;
+    width: auto;
+    background: none;
+    box-shadow: none; 
   }
 
-
   &.button-icon {
     border: none;
     background: none;
     &:active, &.active {
-      text-shadow: 0px 0px 10px #fff;
-      box-shadow: none;
       background: none;
+      box-shadow: none;
+      text-shadow: 0px 0px 10px #fff;
     }
   }
+
+  &.button-inline {
+    display: inline-block;
+    margin: 0;
+    width: auto;
+  }
+
+  &.button-block {
+    display: block;
+    margin: $button-block-margin; 
+  }
+
 }
 
 a.button {
diff --git a/test/buttons.html b/test/buttons.html
index 588d895a62..2e34134615 100644
--- a/test/buttons.html
+++ b/test/buttons.html
@@ -5,18 +5,18 @@
 
     <!-- Sets initial viewport load and disables zooming  -->
     <meta name="viewport" content="initial-scale=1, maximum-scale=1, user-scalable=no">
-    <link href="../dist/ionicons.css" rel="stylesheet">
-    <link href="../dist/ionic.css" rel="stylesheet">
+    <link href="../dist/css/ionic.css" rel="stylesheet">
   </head>
   <body>
 
-    <section>
-
-      <header class="bar bar-header bar-dark">
-        <h1 class="title">Buttons</h1>
-      </header>
+    <header class="bar bar-header bar-dark">
+      <h1 class="title">Buttons</h1>
+    </header>
 
+    <div class="content-wrapper">
       <main class="content padded has-header">
+
+        <h3>Default (Block)</h3>
         <p>
           <a class="button button-default">Default</a>
           <a class="button button-secondary">Secondary</a>
@@ -27,9 +27,30 @@
           <a class="button button-danger">Danger</a>
           <a class="button button-dark">Dark</a>
         </p>
+
+        <h3>Inline (.button-inline override)</h3>
+        <p>
+          <a class="button button-default button-inline">Default</a>
+          <a class="button button-secondary button-inline">Secondary</a>
+          <a class="button button-primary button-inline">Primary</a>
+          <a class="button button-info button-inline">Info</a>
+          <a class="button button-success button-inline">Success</a>
+          <a class="button button-warning button-inline">Warning</a>
+          <a class="button button-danger button-inline">Danger</a>
+          <a class="button button-dark button-inline">Dark</a>
+        </p>
+
+        <h3>Icon (Inline Default)</h3>
         <p>
           <a class="button button-icon"><i class="icon-home"></i></a>
         </p>
+
+        <h3>Icon (.button-block override)</h3>
+        <p>
+          <a class="button button-icon button-block"><i class="icon-home"></i></a>
+        </p>
+
+        <h3>Outline (Inline Default)</h3>
         <p>
           <a class="button button-default button-outline">Default</a>
           <a class="button button-secondary button-outline">Secondary</a>
@@ -40,9 +61,20 @@
           <a class="button button-danger button-outline">Danger</a>
           <a class="button button-dark button-outline">Dark</a>
         </p>
+
+        <h3>Outline (.button-block override)</h3>
         <p>
-          <a class="button button-icon"><i class="icon-home"></i></a>
+          <a class="button button-default button-outline button-block">Default</a>
+          <a class="button button-secondary button-outline button-block">Secondary</a>
+          <a class="button button-primary button-outline button-block">Primary</a>
+          <a class="button button-info button-outline button-block">Info</a>
+          <a class="button button-success button-outline button-block">Success</a>
+          <a class="button button-warning button-outline button-block">Warning</a>
+          <a class="button button-danger button-outline button-block">Danger</a>
+          <a class="button button-dark button-outline button-block">Dark</a>
         </p>
+
+        <h3>Clear (Inline Default)</h3>
         <p>
           <a class="button button-default button-clear">Default</a>
           <a class="button button-secondary button-clear">Secondary</a>
@@ -53,29 +85,25 @@
           <a class="button button-danger button-clear">Danger</a>
           <a class="button button-dark button-clear">Dark</a>
         </p>
-        <p><a class="button button-secondary" href="index.html">Homepage</a></p>
+
+        <h3>Clear (.button-block override)</h3>
+        <p>
+          <a class="button button-default button-clear button-block">Default</a>
+          <a class="button button-secondary button-clear button-block">Secondary</a>
+          <a class="button button-primary button-clear button-block">Primary</a>
+          <a class="button button-info button-clear button-block">Info</a>
+          <a class="button button-success button-clear button-block">Success</a>
+          <a class="button button-warning button-clear button-block">Warning</a>
+          <a class="button button-danger button-clear button-block">Danger</a>
+          <a class="button button-dark button-clear button-block">Dark</a>
+        </p>
+
+        <p>
+          <a class="button button-secondary" href="index.html">Homepage</a>
+        </p>
+
       </main>
+    </div>
 
-    </section>
-    
-    <script src="../dist/ionic.js"></script>
-    <script src="../dist/ionic-simple.js"></script>
-
-    <script>
-      var buttons = document.querySelectorAll('.button');
-      var a;
-      for(var i = 0; i < buttons.length; i++) {
-        a = buttons[i];
-        a.addEventListener('touchstart', function() {
-          this.classList.add('active');
-        });
-        a.addEventListener('touchend', function() {
-          this.classList.remove('active');
-        });
-        a.addEventListener('touchcancel', function() {
-          this.classList.remove('active');
-        });
-      }
-    </script>
   </body>
 </html>