buttons have that extra table now

diff --git a/scss/ink/components/_button.scss b/scss/ink/components/_button.scss
index 27ca257aad844a09b17f366f3e79f11173a374e4..827caaadadaea451f34c8aff105120a80542a564 100755 (executable)
--- a/scss/ink/components/_button.scss
+++ b/scss/ink/components/_button.scss
@@ -60,33 +60,61 @@ $button-background-color: $primary-color !default;
 /// @type Color
 $button-border: 1px solid $button-background-color !default;
 
-table.expanded {
+.expand {
   width: 100%;
+
+  table {
+    width: 100%;
+
+    a {
+      width: calc(100% - 20px);
+      text-align: center;
+    }
+  }
 }
 
 table.button {
-  margin-bottom: 10px;
-
-  td {
-    width: auto !important;
-    text-align: left;
-    background: $button-background-color;
-    border: $button-border;
-    color: $button-font-color;
+  table {
+    margin-bottom: 10px;
 
-    a {
-      font-weight: $button-font-weight;
-      text-decoration: none;
-      font-family: $global-font-family;
-      color: $button-font-color;
-      display: inline-block;
-      padding: $button-padding;
-      font-size: $button-font-size;
+    td {
+      width: auto !important;
+      text-align: left;
+      background: $button-background-color;
       border: $button-border;
+      color: $button-font-color;
+
+      a {
+        font-weight: $button-font-weight;
+        text-decoration: none;
+        font-family: $global-font-family;
+        color: $button-font-color;
+        display: inline-block;
+        padding: $button-padding;
+        font-size: $button-font-size;
+        border: $button-border;
+      }
     }
   }
+}
 
-  &.tiny {
+table.button:hover table tr td a,
+table.button:active table tr td a,
+table.button table tr td a:visited,
+table.button.tiny:hover table tr td a,
+table.button.tiny:active table tr td a,
+table.button.tiny table tr td a:visited,
+table.button.small:hover table tr td a,
+table.button.small:active table tr td a,
+table.button.small table tr td a:visited,
+table.button.large:hover table tr td a,
+table.button.large:active table tr td a,
+table.button.large table tr td a:visited {
+  color: $button-font-color;
+}
+
+table.button.tiny {
+  table {
     td, a {
       padding: $button-padding-tiny;
     }
@@ -95,107 +123,145 @@ table.button {
       font-weight: normal;
     }
   }
+}
 
-  &.small {
+table.button.small {
+  table {
     td, a {
       padding: $button-padding-small;
       font-size: $button-font-size-small;
     }
   }
+}
 
-  &.large {
+table.button.large {
+  table {
     a {
       padding: $button-padding-large;
       font-size: $button-font-size-large;
     }
   }
+}
 
-  &:hover td,
-  &:visited td,
-  &:active td {
-    background: darken($button-background-color, 10%);
-    color: $button-font-color !important;
+table.button:hover,
+table.button:visited,
+table.button:active {
+  table {
+    td {
+      background: darken($button-background-color, 10%);
+      color: $button-font-color !important;
+    }
   }
+}
 
-  &:hover a,
-  &:visited a,
-  &:active a {
-    border: 1px solid darken($button-background-color, 10%);
+table.button:hover,
+table.button:visited,
+table.button:active {
+  table {
+    a {
+      border: 1px solid darken($button-background-color, 10%);
+    }
   }
+}
 
+table.button.secondary {
+  table {
+    td {
+      background: $secondary-color;
+      color: $button-font-color-alt !important;
+      border: 1px solid $secondary-color;
+    }
 
-  &:hover td a,
-  &:active td a,
-  & td a:visited,
-  &.tiny:hover td a,
-  &.tiny:active td a,
-  &.tiny td a:visited,
-  &.small:hover td a,
-  &.small:active td a,
-  &.small td a:visited,
-  &.large:hover td a,
-  &.large:active td a,
-  &.large td a:visited {
-    color: $button-font-color !important;
+    a {
+      color: $button-font-color-alt;
+      border: 1px solid $secondary-color;
+    }
   }
+}
 
-  &.secondary td {
-    background: $secondary-color;
-    color: $button-font-color-alt;
-    border: 1px solid $secondary-color;
+table.button.secondary:hover {
+  table {
+    td {
+      background: lighten($secondary-color, 10%);
+      color: $button-font-color-alt;
+    }
 
     a {
-      color: $button-font-color-alt;
-      border: 1px solid $secondary-color;
+      border: 1px solid lighten($secondary-color, 10%);
     }
   }
+}
 
-  &.secondary:hover td {
-    background: lighten($secondary-color, 10%) !important;
-    color: $button-font-color-alt;
+table.button.secondary:hover {
+  table {
+    td a {
+      color: $button-font-color-alt;
+    }
   }
+}
 
-  &.secondary:hover a {
-    border: 1px solid lighten($secondary-color, 10%) !important;
+table.button.secondary:active {
+  table {
+    td a {
+      color: $button-font-color-alt;
+    }
   }
+}
 
-  &.secondary:hover td a,
-  &.secondary td a:visited,
-  &.secondary:active td a {
-    color: $button-font-color-alt !important;
+table.button.secondary {
+  table {
+    td a:visited {
+      color: $button-font-color-alt;
+    }
   }
+}
 
-  &.success td {
-    background: $success-color;
-    border: 1px solid $success-color !important;
+table.button.success {
+  table {
+    td {
+      background: $success-color;
+      border: 1px solid $success-color;
+    }
 
     a {
-      border: 1px solid $success-color !important;
+      border: 1px solid $success-color;
     }
   }
+}
 
-  &.success:hover td {
-    background: darken($success-color, 10%) !important;
-  }
+table.button.successs:hover {
+  table {
+    td {
+      background: darken($success-color, 10%);
+    }
 
-  &.success:hover a {
-    border: 1px solid darken($success-color, 10%) !important;
+    a {
+      border: 1px solid darken($success-color, 10%);
+    }
   }
+}
 
-  &.alert td {
-    background: $alert-color;
-    border: 1px solid $alert-color !important;
+table.button.alert {
+  table {
+    td {
+      background: $alert-color;
+      border: 1px solid $alert-color;
+    }
 
     a {
-      border: 1px solid $alert-color !important;
+      border: 1px solid $alert-color;
     }
   }
+}
 
-  &.alert:hover td {
-    background: darken($alert-color, 10%) !important;
-  }
+table.button.alert:hover {
+  table {
+    td {
+      background: darken($alert-color, 10%);
+    }
 
-  &.alert:hover a {
-    border: 1px solid darken($alert-color, 10%) !important;
+    a {
+      border: 1px solid darken($alert-color, 10%);
+    }
   }
 }

diff --git a/testing/src/pages/index.html b/testing/src/pages/index.html
index a97e0bfa1da681152717e6035871e15b74494cd3..ec11fa7dda36ee9eca98f6c8612ac1f96216bc5a 100644 (file)
--- a/testing/src/pages/index.html
+++ b/testing/src/pages/index.html
@@ -7,10 +7,10 @@
         <th class="large-8 small-12 columns">
           <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Dolor ea eaque magni accusamus quisquam quod quia, molestiae, perferendis in debitis omnis, repellendus et fugiat rem obcaecati explicabo quasi deleniti ab.</p>
 
-        <table>
+        <table class="button large">
           <tr>
             <td>
-              <table class="button large">
+              <table>
                 <tr>
                   <td>
                     <a href="https://zurb.com">I am a button</a>
@@ -22,10 +22,10 @@
         </table>
 
 
-        <table>
+        <table  class="button">
           <tr>
             <td>
-              <table class="button">
+              <table>
                 <tr>
                   <td>
                     <a href="https://zurb.com">I am a button</a>
@@ -36,10 +36,10 @@
           </tr>
         </table>
 
-        <table>
+        <table class="button small">
           <tr>
             <td>
-              <table class="button small">
+              <table>
                 <tr>
                   <td>
                     <a href="https://zurb.com">I am a button</a>
@@ -50,10 +50,10 @@
           </tr>
         </table>
 
-        <table>
+        <table  class="button tiny">
           <tr>
             <td>
-              <table class="button tiny">
+              <table>
                 <tr>
                   <td>
                     <a href="https://zurb.com">I am a button</a>
@@ -64,10 +64,10 @@
           </tr>
         </table>
 
-        <table>
+        <table class="button secondary">
           <tr>
             <td>
-              <table class="button secondary">
+              <table>
                 <tr>
                   <td>
                     <a href="https://zurb.com">I am a button</a>
@@ -78,10 +78,10 @@
           </tr>
         </table>
 
-        <table>
+        <table class="button success">
           <tr>
             <td>
-              <table class="button success">
+              <table>
                 <tr>
                   <td>
                     <a href="https://zurb.com">I am a button</a>
@@ -92,10 +92,10 @@
           </tr>
         </table>
 
-        <table class="expanded">
+        <table class=" button alert expand">
           <tr>
             <td>
-              <table class="button alert expanded">
+              <table>
                 <tr>
                   <td>
                     <a href="https://zurb.com">I am a button</a>