From d349c100fb5933a6b7bb0a4de00dd03640c4e9bd Mon Sep 17 00:00:00 2001
From: Max Lynch <max@codiqa.com>
Date: Fri, 15 Nov 2013 21:23:25 -0600
Subject: [PATCH] Fixed #141 - button-block

---
 dist/css/ionic.css |  16 ++++-
 scss/_button.scss  |  18 ++++-
 test/buttons.html  | 164 ++++++++++++++++++++++-----------------------
 3 files changed, 110 insertions(+), 88 deletions(-)

diff --git a/dist/css/ionic.css b/dist/css/ionic.css
index 907c16d235..bd6c70d1be 100644
--- a/dist/css/ionic.css
+++ b/dist/css/ionic.css
@@ -4381,7 +4381,7 @@ input[type="range"] {
     vertical-align: inherit;
     font-size: 24px;
     line-height: 40px; }
-  .button.block, .button.button-full {
+  .button.button-block, .button.button-full {
     margin-top: 10px;
     margin-bottom: 10px; }
   .button.button-light {
@@ -4656,9 +4656,19 @@ input[type="range"] {
     box-shadow: none;
     text-shadow: 0px 0px 10px #fff; }
 
-.padding > .button.block:first-child {
+.padding > .button.button-block:first-child {
   margin-top: 0; }
 
+.button-block {
+  display: block;
+  clear: both; }
+  .button-block:after {
+    display: block;
+    visibility: hidden;
+    clear: both;
+    height: 0;
+    content: "."; }
+
 .button-full,
 .button-full > .button {
   display: block;
@@ -4668,7 +4678,7 @@ input[type="range"] {
   border-left-width: 0;
   border-radius: 0; }
 
-button.block,
+button.button-block,
 button.button-full,
 .button-full > button.button {
   width: 100%; }
diff --git a/scss/_button.scss b/scss/_button.scss
index fd68861a8e..a5c769e5e9 100644
--- a/scss/_button.scss
+++ b/scss/_button.scss
@@ -38,7 +38,7 @@
     line-height: $button-height - $button-border-width - 1;
   }
 
-  &.block, &.button-full {
+  &.button-block, &.button-full {
     margin-top: $button-block-margin;
     margin-bottom: $button-block-margin;
   }
@@ -166,10 +166,22 @@
   }
 }
 
-.padding > .button.block:first-child {
+.padding > .button.button-block:first-child {
   margin-top: 0;
 }
 
+.button-block {
+  display: block;
+  clear: both;
+  &:after { 
+    display: block; 
+    visibility: hidden; 
+    clear: both; 
+    height: 0;
+    content: ".";
+  }
+}
+
 .button-full,
 .button-full > .button {
   display: block;
@@ -180,7 +192,7 @@
   border-radius: 0;
 }
 
-button.block,
+button.button-block,
 button.button-full,
 .button-full > button.button  {
   width: 100%;
diff --git a/test/buttons.html b/test/buttons.html
index ff845ae0e3..e135c7caa8 100644
--- a/test/buttons.html
+++ b/test/buttons.html
@@ -156,34 +156,34 @@
 
         <hr>
 
-        <h3>a.block (parent w/ padding)</h3>
+        <h3>a.button-block (parent w/ padding)</h3>
         <p>
-          <a class="button block"><i class="icon ion-home"></i> Default</a>
-          <a class="button block button-light">.button-light</a>
-          <a class="button block button-stable">.button-stable</a>
-          <a class="button block button-positive">.button-positive</a>
-          <a class="button block button-calm">.button-calm</a>
-          <a class="button block button-balanced">.button-balanced</a>
-          <a class="button block button-assertive">.button-assertive</a>
-          <a class="button block button-energized">.button-energized</a>
-          <a class="button block button-royal">.button-royal</a>
-          <a class="button block button-dark">.button-dark</a>
+          <a class="button button-block"><i class="icon ion-home"></i> Default</a>
+          <a class="button button-block button-light">.button-light</a>
+          <a class="button button-block button-stable">.button-stable</a>
+          <a class="button button-block button-positive">.button-positive</a>
+          <a class="button button-block button-calm">.button-calm</a>
+          <a class="button button-block button-balanced">.button-balanced</a>
+          <a class="button button-block button-assertive">.button-assertive</a>
+          <a class="button button-block button-energized">.button-energized</a>
+          <a class="button button-block button-royal">.button-royal</a>
+          <a class="button button-block button-dark">.button-dark</a>
         </p>
 
         <hr>
 
-        <h3>button.block (parent w/ padding)</h3>
+        <h3>button.button-block (parent w/ padding)</h3>
         <p>
-          <button class="button block"><i class="icon ion-home"></i> Default</button>
-          <button class="button block button-light">.button-light</button>
-          <button class="button block button-stable">.button-stable</button>
-          <button class="button block button-positive">.button-positive</button>
-          <button class="button block button-calm">.button-calm</button>
-          <button class="button block button-balanced">.button-balanced</button>
-          <button class="button block button-assertive">.button-assertive</button>
-          <button class="button block button-energized">.button-energized</button>
-          <button class="button block button-royal">.button-royal</button>
-          <button class="button block button-dark">.button-dark</button>
+          <button class="button button-block"><i class="icon ion-home"></i> Default</button>
+          <button class="button button-block button-light">.button-light</button>
+          <button class="button button-block button-stable">.button-stable</button>
+          <button class="button button-block button-positive">.button-positive</button>
+          <button class="button button-block button-calm">.button-calm</button>
+          <button class="button button-block button-balanced">.button-balanced</button>
+          <button class="button button-block button-assertive">.button-assertive</button>
+          <button class="button button-block button-energized">.button-energized</button>
+          <button class="button button-block button-royal">.button-royal</button>
+          <button class="button button-block button-dark">.button-dark</button>
         </p>
 
         <hr>
@@ -202,16 +202,16 @@
 
         <hr>
 
-        <h3>a.block.button-icon (Borderless, 32px)</h3>
+        <h3>a.button-block.button-icon (Borderless, 32px)</h3>
         <p>
-          <a class="button block button-icon"><i class="icon ion-home"></i></a>
+          <a class="button button-block button-icon"><i class="icon ion-home"></i></a>
         </p>
 
         <hr>
 
-        <h3>button.block.button-icon (Borderless, 32px)</h3>
+        <h3>button.button-block.button-icon (Borderless, 32px)</h3>
         <p>
-          <button class="button block button-icon"><i class="icon ion-home"></i></button>
+          <button class="button button-block button-icon"><i class="icon ion-home"></i></button>
         </p>
 
         <hr>
@@ -248,34 +248,34 @@
 
         <hr>
 
-        <h3>a.block.button-outline (parent w/ padding)</h3>
+        <h3>a.button-block.button-outline (parent w/ padding)</h3>
         <p>
-          <a class="button button-outline block"><i class="icon ion-home"></i> Default</a>
-          <a class="button button-light button-outline block">.button-light</a>
-          <a class="button button-stable button-outline block">.button-stable</a>
-          <a class="button button-positive button-outline block">.button-positive</a>
-          <a class="button button-calm button-outline block">.button-calm</a>
-          <a class="button button-balanced button-outline block">.button-balanced</a>
-          <a class="button button-assertive button-outline block">.button-assertive</a>
-          <a class="button button-energized button-outline block">.button-energized</a>
-          <a class="button button-royal button-outline block">.button-royal</a>
-          <a class="button button-dark button-outline block">.button-dark</a>
+          <a class="button button-outline button-block"><i class="icon ion-home"></i> Default</a>
+          <a class="button button-light button-outline button-block">.button-light</a>
+          <a class="button button-stable button-outline button-block">.button-stable</a>
+          <a class="button button-positive button-outline button-block">.button-positive</a>
+          <a class="button button-calm button-outline button-block">.button-calm</a>
+          <a class="button button-balanced button-outline button-block">.button-balanced</a>
+          <a class="button button-assertive button-outline button-block">.button-assertive</a>
+          <a class="button button-energized button-outline button-block">.button-energized</a>
+          <a class="button button-royal button-outline button-block">.button-royal</a>
+          <a class="button button-dark button-outline button-block">.button-dark</a>
         </p>
 
         <hr>
 
-        <h3>button.block.button-outline (parent w/ padding)</h3>
+        <h3>button.button-block.button-outline (parent w/ padding)</h3>
         <p>
-          <button class="button button-outline block"><i class="icon ion-home"></i> Default</button>
-          <button class="button button-light button-outline block">.button-light</button>
-          <button class="button button-stable button-outline block">.button-stable</button>
-          <button class="button button-positive button-outline block">.button-positive</button>
-          <button class="button button-calm button-outline block">.button-calm</button>
-          <button class="button button-balanced button-outline block">.button-balanced</button>
-          <button class="button button-assertive button-outline block">.button-assertive</button>
-          <button class="button button-energized button-outline block">.button-energized</button>
-          <button class="button button-royal button-outline block">.button-royal</button>
-          <button class="button button-dark button-outline block">.button-dark</button>
+          <button class="button button-outline button-block"><i class="icon ion-home"></i> Default</button>
+          <button class="button button-light button-outline button-block">.button-light</button>
+          <button class="button button-stable button-outline button-block">.button-stable</button>
+          <button class="button button-positive button-outline button-block">.button-positive</button>
+          <button class="button button-calm button-outline button-block">.button-calm</button>
+          <button class="button button-balanced button-outline button-block">.button-balanced</button>
+          <button class="button button-assertive button-outline button-block">.button-assertive</button>
+          <button class="button button-energized button-outline button-block">.button-energized</button>
+          <button class="button button-royal button-outline button-block">.button-royal</button>
+          <button class="button button-dark button-outline button-block">.button-dark</button>
         </p>
 
         <hr>
@@ -312,57 +312,57 @@
 
         <hr>
 
-        <h3>a.block.button-clear (parent w/ padding)</h3>
+        <h3>a.button-block.button-clear (parent w/ padding)</h3>
         <p>
-          <a class="button button-clear block"><i class="icon ion-home"></i> Default</a>
-          <a class="button button-light button-clear block">.button-light</a>
-          <a class="button button-stable button-clear block">.button-stable</a>
-          <a class="button button-positive button-clear block">.button-positive</a>
-          <a class="button button-calm button-clear block">.button-calm</a>
-          <a class="button button-balanced button-clear block">.button-balanced</a>
-          <a class="button button-assertive button-clear block">.button-assertive</a>
-          <a class="button button-energized button-clear block">.button-energized</a>
-          <a class="button button-royal button-clear block">.button-royal</a>
-          <a class="button button-dark button-clear block">.button-dark</a>
+          <a class="button button-clear button-block"><i class="icon ion-home"></i> Default</a>
+          <a class="button button-light button-clear button-block">.button-light</a>
+          <a class="button button-stable button-clear button-block">.button-stable</a>
+          <a class="button button-positive button-clear button-block">.button-positive</a>
+          <a class="button button-calm button-clear button-block">.button-calm</a>
+          <a class="button button-balanced button-clear button-block">.button-balanced</a>
+          <a class="button button-assertive button-clear button-block">.button-assertive</a>
+          <a class="button button-energized button-clear button-block">.button-energized</a>
+          <a class="button button-royal button-clear button-block">.button-royal</a>
+          <a class="button button-dark button-clear button-block">.button-dark</a>
         </p>
 
         <hr>
 
-        <h3>button.block.button-clear (parent w/ padding)</h3>
+        <h3>button.button-block.button-clear (parent w/ padding)</h3>
         <p>
-          <button class="button button-clear block"><i class="icon ion-home"></i> Default</button>
+          <button class="button button-clear button-block"><i class="icon ion-home"></i> Default</button>
           <button class="button button-light button-clear block">.button-light</button>
-          <button class="button button-stable button-clear block">.button-stable</button>
-          <button class="button button-positive button-clear block">.button-positive</button>
-          <button class="button button-calm button-clear block">.button-calm</button>
-          <button class="button button-balanced button-clear block">.button-balanced</button>
-          <button class="button button-assertive button-clear block">.button-assertive</button>
-          <button class="button button-energized button-clear block">.button-energized</button>
-          <button class="button button-royal button-clear block">.button-royal</button>
-          <button class="button button-dark button-clear block">.button-dark</button>
+          <button class="button button-stable button-clear button-block">.button-stable</button>
+          <button class="button button-positive button-clear button-block">.button-positive</button>
+          <button class="button button-calm button-clear button-block">.button-calm</button>
+          <button class="button button-balanced button-clear button-block">.button-balanced</button>
+          <button class="button button-assertive button-clear button-block">.button-assertive</button>
+          <button class="button button-energized button-clear button-block">.button-energized</button>
+          <button class="button button-royal button-clear button-block">.button-royal</button>
+          <button class="button button-dark button-clear button-block">.button-dark</button>
         </p>
 
       </div>
 
       <hr>
 
-      <h3>a.block (parent w/out padding)</h3>
+      <h3>a.button-block (parent w/out padding)</h3>
       <p>
-        <a class="button block"><i class="icon ion-home"></i> Default</a>
-        <a class="button block button-light">.button-light</a>
-        <a class="button block button-stable">.button-stable</a>
-        <a class="button block button-positive">.button-positive</a>
-        <a class="button block button-calm">.button-calm</a>
-        <a class="button block button-balanced">.button-balanced</a>
-        <a class="button block button-assertive">.button-assertive</a>
-        <a class="button block button-energized">.button-energized</a>
-        <a class="button block button-royal">.button-royal</a>
-        <a class="button block button-dark">.button-dark</a>
+        <a class="button button-block"><i class="icon ion-home"></i> Default</a>
+        <a class="button button-block button-light">.button-light</a>
+        <a class="button button-block button-stable">.button-stable</a>
+        <a class="button button-block button-positive">.button-positive</a>
+        <a class="button button-block button-calm">.button-calm</a>
+        <a class="button button-block button-balanced">.button-balanced</a>
+        <a class="button button-block button-assertive">.button-assertive</a>
+        <a class="button button-block button-energized">.button-energized</a>
+        <a class="button button-block button-royal">.button-royal</a>
+        <a class="button button-block button-dark">.button-dark</a>
       </p>
 
       <hr>
 
-      <h3>a.block (.button-full on the parent)</h3>
+      <h3>a.button-block (.button-full on the parent)</h3>
       <p class="button-full">
         <a class="button"><i class="icon ion-home"></i> Default</a>
         <a class="button button-light">.button-light</a>
@@ -378,7 +378,7 @@
 
       <hr>
 
-      <h3>button.block.button-full on each button and nothing on the parent</h3>
+      <h3>button.button-block.button-full on each button and nothing on the parent</h3>
       <p>
         <button class="button button-full"><i class="icon ion-home"></i> Default</button>
         <button class="button button-full button-light">.button-light</button>