css: ability to inflate spacing of .m-table by putting .m-big on it.

diff --git a/css/m-components.css b/css/m-components.css
index d0b7b80f088117be01169de9bdeebf44697c22be..8d6b18f994833dbf3c97c17b7f2a8c60d19b2a37 100644 (file)
--- a/css/m-components.css
+++ b/css/m-components.css
@@ -764,6 +764,9 @@ table.m-table {
   margin-left: auto;
   margin-right: auto;
 }
+table.m-table.m-big {
+  margin-top: 1.75rem;
+}
 div.m-scroll > table.m-table:last-child {
   margin-bottom: 0.0625rem;
 }
@@ -795,6 +798,9 @@ table.m-table tfoot th, table.m-table tfoot td {
 table.m-table th, table.m-table td {
   padding: 0.5rem;
 }
+table.m-table.m-big th, table.m-table.m-big td {
+  padding: 0.75rem 1rem;
+}
 table.m-table th {
   text-align: left;
 }
@@ -813,6 +819,18 @@ table.m-table td.m-dim, table.m-table th.m-dim {
   border-left-width: 0.0625rem;
 /*   border-right-width: 0.0625rem; causes horizontal scrollbar */
 }
+table.m-table.m-big td.m-default, table.m-table.m-big th.m-default,
+table.m-table.m-big td.m-primary, table.m-table.m-big th.m-primary,
+table.m-table.m-big td.m-success, table.m-table.m-big th.m-success,
+table.m-table.m-big td.m-warning, table.m-table.m-big th.m-warning,
+table.m-table.m-big td.m-danger, table.m-table.m-big th.m-danger,
+table.m-table.m-big td.m-info, table.m-table.m-big th.m-info,
+table.m-table.m-big td.m-dim, table.m-table.m-big th.m-dim {
+  padding-left: 0.9375rem;
+  padding-right: 0.9375rem;
+  border-left-width: 0.0625rem;
+/*   border-right-width: 0.0625rem; causes horizontal scrollbar */
+}
 
 table.m-table tr.m-default td, table.m-table td.m-default,
 table.m-table tr.m-default th, table.m-table th.m-default,

diff --git a/doc/css/components-test.rst b/doc/css/components-test.rst
index dbfd6edbdfade62389faeb63d6e800a731f0f73c..870f2059c68355ab67e6c2d2d6cec49c880e1229 100644 (file)
--- a/doc/css/components-test.rst
+++ b/doc/css/components-test.rst
@@ -781,6 +781,50 @@ Table with paragraphs
       </tr>
     </table>
 
+`"Big" tables`_
+---------------
+
+.. raw:: html
+
+   <table class="m-table m-flat m-big">
+      <thead>
+        <tr>
+          <th></th>
+          <th class="m-text-center m-text m-big m-thin">Community<br />edition</th>
+          <th class="m-text-center m-text m-big"><div class="m-text m-success">Premium<br />support</div></th>
+        </tr>
+      </thead>
+      <tbody>
+        <tr>
+          <td class="m-text-right"><span class="m-text m-dim">Support</span></td>
+          <td class="m-text-center">Community-based</td>
+          <td class="m-text-center"><strong class="m-text m-success">Guaranteed<br />response time</strong></td>
+        </tr>
+        <tr>
+          <td class="m-text-right"><span class="m-text m-dim">Commercial use</span></td>
+          <td class="m-text-center"><strong>Yes</strong><br /><span class="m-text m-small m-dim">MIT license</span></td>
+          <td class="m-text-center"><div class="m-text m-success"><strong>Yes</strong><br /><span class="m-text m-small m-dim">MIT license</span></div></td>
+        </tr>
+      </tbody>
+      <tfoot>
+        <tr>
+          <td class="m-text-right m-text-middle"><span class="m-text m-dim">Price</span></td>
+          <td><div class="m-button m-flat m-fullwidth">
+            <a href="#">
+              <div class="m-big">Free</div>
+              <div class="m-small">Get started</div>
+            </a>
+          </div></td>
+          <td><div class="m-button m-success m-fullwidth">
+            <a href="#">
+              <div class="m-big">Contact us</div>
+              <div class="m-small">big.boss@the.brand</div>
+            </a>
+          </div></td>
+        </tr>
+      </tfoot>
+    </table>
+
 Images
 ======
 

diff --git a/doc/css/components.rst b/doc/css/components.rst
index 81f74f1af3d43c03dfdbe44f568148f2cfc3f9c6..25f8637a7bf6e3689bfa7fd8a5e3252601715da2 100644 (file)
--- a/doc/css/components.rst
+++ b/doc/css/components.rst
@@ -595,6 +595,9 @@ using the color classes from above:
       </tbody>
     </table></div>
 
+Mark the table with :html:`.m-big` to inflate it with more spacing, for example
+when designing a high-level product category overview.
+
 Similarly to `lists <{filename}/css/typography.rst#lists-diaries>`_, if using
 :html:`<p>` elements inside :html:`<td>`, they are neither indented nor
 justified.