fixes expanded buttons and updates docs with correct classes

diff --git a/docs/pages/button.md b/docs/pages/button.md
index fde107bfd864a76612de831067573162b02fcecd..1f9135802aea22c0731d4fe894cdbe39f900c3ac 100644 (file)
--- a/docs/pages/button.md
+++ b/docs/pages/button.md
@@ -35,12 +35,16 @@ Don't forget the `href=""` ;)
 
 ## Expanded
 
-To create an expanded button (full width of it's container), add the class `.expand` to the outer `<table>` of the button, and wrap a `<center>` tag around the `<a>`.
+To create an expanded button (full width of it's container), add the class `.expanded` to the outer `<table>` of the button, and wrap a `<center>` tag around the `<a>`.
 
-In Inky HTML, add the `.expand` class to the `<button>` tag.
+In Inky HTML, add the `.expanded` class to the `<button>` tag.
 
 ```inky_example
-<button href="zurb.com" class="expand">Expanded Button</button>
+<row>
+  <column>
+    <button href="zurb.com" class="expand">Expanded Button</button>
+  </column>
+</row>
 ```
 
 ---

diff --git a/scss/components/_button.scss b/scss/components/_button.scss
index 14f8585bd3dba35038d5123cf86d49da2e810807..4a304c8c0807bd6a3487c3e15bc524e53a5780e4 100755 (executable)
--- a/scss/components/_button.scss
+++ b/scss/components/_button.scss
@@ -142,8 +142,8 @@ table.button.large {
   }
 }
 
-table.expand,
-table.expanded {
+table.button.expand,
+table.button.expanded {
   width: 100% !important;
 
   table {
@@ -151,6 +151,9 @@ table.expanded {
 
     a {
       text-align: center;
+      width: 100%;
+      padding-left: 0;
+      padding-right: 0;
     }
   }
 
@@ -159,19 +162,6 @@ table.expanded {
   }
 }
 
-
-// expanded buttons anchor width
-// @for $i from 1 through $grid-column-count {
-//   td.large-#{$i} table.expand table a,
-//   th.large-#{$i} table.expand table a,
-//   td.large-#{$i} table.expanded table a,
-//   th.large-#{$i} table.expanded table a {
-//     width: -zf-grid-calc-px($i, $grid-column-count, $global-width) !important;
-//   }
-// }
-
-
-
 table.button:hover,
 table.button:visited,
 table.button:active {

diff --git a/scss/components/_media-query.scss b/scss/components/_media-query.scss
index 8f682791d2f17a01d12d5d545fc3a05524d55ff4..ff466f1e18dfc46a12fa96235c947ebceadb9b4f 100755 (executable)
--- a/scss/components/_media-query.scss
+++ b/scss/components/_media-query.scss
@@ -113,29 +113,5 @@
   table.menu[align="center"] {
     width: auto !important;
   }
-
-// Rules for the Center Tag    
- // @for $i from 1 through ($grid-column-count - 1 ) {   
- //   .body .columns td.small-#{$i},    
- //   .body .column td.small-#{$i},   
- //   td.small-#{$i} center,    
-   
- //   .body .columns th.small-#{$i},    
- //   .body .column th.small-#{$i},   
- //   th.small-#{$i} center {   
- //     display: inline-block !important;   
- //     width: -zf-grid-calc-pct($i, $grid-column-count) !important;    
- //   }   
- // }
-
-  // expanded buttons anchor width
-  @for $i from 1 through $grid-column-count {
-    td.small-#{$i} table.expand table a,
-    th.small-#{$i} table.expand table a,
-    td.small-#{$i} table.expanded table a,
-    th.small-#{$i} table.expanded table a {
-      width: -zf-grid-calc-pct($i, $grid-column-count) !important;
-    }
-  }
 }
 

diff --git a/test/visual/pages/button-expanded-inky.html b/test/visual/pages/button-expanded-inky.html
index cbb0cd109aab1f365eff06a461cb2e745ef5e8e5..eeb7bced118eee00ca228358b331a70e8cb72508 100644 (file)
--- a/test/visual/pages/button-expanded-inky.html
+++ b/test/visual/pages/button-expanded-inky.html
@@ -4,46 +4,46 @@
   <p>on small, should work the same</p>
   <row>
     <columns small="12" large="6">
-      <button href="#" class="expand">button</button>
+      <button href="#" class="expanded">button</button>
     </columns>
     <columns small="12" large="6">
-      <button href="#" class="expand">example text 2</button>
+      <button href="#" class="expanded">example text 2</button>
     </columns>
   </row>
 
   <row>
     <columns small="6" large="6">
-      <button href="#" class="expand">button</button>
+      <button href="#" class="expanded">button</button>
     </columns>
     <columns small="6" large="6">
-      <button href="#" class="expand">example text 2</button>
+      <button href="#" class="expanded">example text 2</button>
     </columns>
   </row>
 
   <row>
     <columns small="12" large="3">
-      <button href="#" class="expand">button</button>
+      <button href="#" class="expanded">button</button>
     </columns>
     <columns small="12" large="9">
-      <button href="#" class="expand">example text 2</button>
+      <button href="#" class="expanded">example text 2</button>
     </columns>
   </row>
 
   <row>
     <columns small="12" large="4">
-      <button href="#" class="expand">button</button>
+      <button href="#" class="expanded">button</button>
     </columns>
     <columns small="12" large="8">
-      <button href="#" class="expand">example text 2</button>
+      <button href="#" class="expanded">example text 2</button>
     </columns>
   </row>
 
   <row>
     <columns small="4" large="4">
-      <button href="#" class="small expand">button</button>
+      <button href="#" class="small expanded">button</button>
     </columns>
     <columns small="6" large="8">
-      <button href="#" class="small expand">example text 2</button>
+      <button href="#" class="small expanded">example text 2</button>
     </columns>
   </row>
 
@@ -51,9 +51,9 @@
     <row>
       <columns large="6">
         <h5>Connect With Us:</h5>
-        <button class="facebook expand" href="http://zurb.com">Facebook</button>
-        <button class="twitter expand" href="http://zurb.com">Twitter</button>
-        <button class="google expand" href="http://zurb.com">Google+</button>
+        <button class="facebook expanded" href="http://zurb.com">Facebook</button>
+        <button class="twitter expanded" href="http://zurb.com">Twitter</button>
+        <button class="google expanded" href="http://zurb.com">Google+</button>
       </columns>
       <columns large="6">
         <h5>Contact Info:</h5>