adds table-container to colors, functions, mixins, and variables tables

diff --git a/docs/documentation/customize/variables.html b/docs/documentation/customize/variables.html
index 6520108a7b49c364b9c794088f2bfeacf387d088..eb57aafef28d1c15d2ef9fec946edd2ddedffc1a 100644 (file)
--- a/docs/documentation/customize/variables.html
+++ b/docs/documentation/customize/variables.html
@@ -72,14 +72,16 @@ breadcrumb:
   </p>
 </div>
 
-<table class="table is-bordered">
-  <tbody>
-  {% for variable_name in initial_variables.list %}
-    {% assign variable = initial_vars[variable_name] %}
-    {% include elements/variable-row.html variable=variable hide_computed =true%}
-  {% endfor %}
-  <tbody>
-</table>
+<div class="table-container">
+  <table class="table is-bordered">
+    <tbody>
+    {% for variable_name in initial_variables.list %}
+      {% assign variable = initial_vars[variable_name] %}
+      {% include elements/variable-row.html variable=variable hide_computed =true%}
+    {% endfor %}
+    <tbody>
+  </table>
+</div>
 
 {% capture custom_message %}
   These are <a href="https://github.com/jgthms/bulma/blob/master/sass/{{ derived_variables.file_path }}" target="_blank" rel="nofollow">variables</a> with a value that <strong>references</strong> another variable.

diff --git a/docs/documentation/overview/colors.html b/docs/documentation/overview/colors.html
index 52d7edc146eb4df7763a10df56fb07cbf5e6a314..53f25672806038e7791e5e2be9039f540011898c 100644 (file)
--- a/docs/documentation/overview/colors.html
+++ b/docs/documentation/overview/colors.html
@@ -39,54 +39,56 @@ shades:
   </p>
 </div>
 
-<table class="table">
-  <thead>
-    <tr>
-      <th>Color</th>
-      <th>Variable</th>
-      <th>Value</th>
-      <th>Computed value</th>
-      <th>Invert value</th>
-      <th>Computed invert value</th>
-    </tr>
-  </thead>
-  <tbody>
-    {% for color in page.colors %}
-      {% assign derivedColor = site.data.colors.derived | where: "id", color | first %}
-      {% assign initialColor = site.data.colors.initial | where: "id", derivedColor.valueId | first %}
+<div class="table-container">
+  <table class="table">
+    <thead>
       <tr>
-        <td>
-          <strong>{{ derivedColor.id | capitalize }}</strong>
-        </td>
-        <td>
-          <code>${{ derivedColor.id }}</code>
-        </td>
-        <td>
-          <code>${{ initialColor.id }}</code>
-        </td>
-        <td>
-          {% include elements/color-square.html value=initialColor.value %}
-        </td>
-        {% if derivedColor.invertValue %}
+        <th>Color</th>
+        <th>Variable</th>
+        <th>Value</th>
+        <th>Computed value</th>
+        <th>Invert value</th>
+        <th>Computed invert value</th>
+      </tr>
+    </thead>
+    <tbody>
+      {% for color in page.colors %}
+        {% assign derivedColor = site.data.colors.derived | where: "id", color | first %}
+        {% assign initialColor = site.data.colors.initial | where: "id", derivedColor.valueId | first %}
+        <tr>
           <td>
-            <code>{{ derivedColor.invertValue }}</code>
+            <strong>{{ derivedColor.id | capitalize }}</strong>
           </td>
           <td>
-            {% include elements/color-square.html value=derivedColor.invertValue %}
+            <code>${{ derivedColor.id }}</code>
           </td>
-        {% elsif derivedColor.invertId %}
-          {% assign invertColor = site.data.colors.initial | where: "id", derivedColor.invertId | first %}
           <td>
-            <code>${{ derivedColor.invertId }}</code>
+            <code>${{ initialColor.id }}</code>
           </td>
           <td>
-            {% include elements/color-square.html value=invertColor.value %}
+            {% include elements/color-square.html value=initialColor.value %}
           </td>
-        {% endif %}
-      </tr>
-    {% endfor %}
-  </tbody>
-</table>
+          {% if derivedColor.invertValue %}
+            <td>
+              <code>{{ derivedColor.invertValue }}</code>
+            </td>
+            <td>
+              {% include elements/color-square.html value=derivedColor.invertValue %}
+            </td>
+          {% elsif derivedColor.invertId %}
+            {% assign invertColor = site.data.colors.initial | where: "id", derivedColor.invertId | first %}
+            <td>
+              <code>${{ derivedColor.invertId }}</code>
+            </td>
+            <td>
+              {% include elements/color-square.html value=invertColor.value %}
+            </td>
+          {% endif %}
+        </tr>
+      {% endfor %}
+    </tbody>
+  </table>
+</div>
 
 <div class="content">
   <p>
@@ -94,28 +96,30 @@ shades:
   </p>
 </div>
 
-<table class="table">
-  <thead>
-    <tr>
-      <th>Color</th>
-      <th>Variable</th>
-      <th>Value</th>
-    </tr>
-  </thead>
-  <tbody>
-    {% for shade in page.shades %}
-      {% assign initial_shade = site.data.colors.initial | where: "id", shade | first %}
+<div class="table-container">
+  <table class="table">
+    <thead>
       <tr>
-        <td>
-          <strong>{{ initial_shade.name | capitalize }}</strong>
-        </td>
-        <td>
-          <code>${{ initial_shade.id }}</code>
-        </td>
-        <td>
-          {% include elements/color-square.html value=initial_shade.value %}
-        </td>
+        <th>Color</th>
+        <th>Variable</th>
+        <th>Value</th>
       </tr>
-    {% endfor %}
-  </tbody>
-</table>
+    </thead>
+    <tbody>
+      {% for shade in page.shades %}
+        {% assign initial_shade = site.data.colors.initial | where: "id", shade | first %}
+        <tr>
+          <td>
+            <strong>{{ initial_shade.name | capitalize }}</strong>
+          </td>
+          <td>
+            <code>${{ initial_shade.id }}</code>
+          </td>
+          <td>
+            {% include elements/color-square.html value=initial_shade.value %}
+          </td>
+        </tr>
+      {% endfor %}
+    </tbody>
+  </table>
+</div>

diff --git a/docs/documentation/overview/functions.html b/docs/documentation/overview/functions.html
index 596bc1ce0a27495e47e596788ef22d4c879225d2..91766fca09ae2c8d6ff6221ac02d2856977fcdb7 100644 (file)
--- a/docs/documentation/overview/functions.html
+++ b/docs/documentation/overview/functions.html
@@ -28,203 +28,207 @@ breadcrumb:
     <li>otherwise, it outputs <code>#fff</code></li>
   </ul>
   <p>Its purpose is to guarantee a <strong>readable</strong> shade for the <em>text</em> when the input color is used as the <em>background</em>.</p>
-  <table class="table is-bordered">
-    <thead>
-      <tr>
-        <th>color</th>
-        <th>color luminance</th>
-        <th>findColorInvert()</th>
-        <th>result</th>
-      </tr>
-    </thead>
-    <tbody>
-      <tr>
-        <td>
-          <span class="bd-color" style="background: #00d1b2;"></span>
-          <code>#00d1b2</code>
-        </td>
-        <td>
-          <code>0.52831</code>
-        </td>
-        <td>
-          <span class="bd-color" style="background: #fff;"></span>
-          <code>#fff</code>
-        </td>
-        <td>
-          <a class="button" style="background: #00d1b2; border-color: #00d1b2; color: #fff;">
-            Button
-          </a>
-        </td>
-      </tr>
-      <tr>
-        <td>
-          <span class="bd-color" style="background: #3273dc;"></span>
-          <code>#3273dc</code>
-        </td>
-        <td>
-          <code>0.23119</code>
-        </td>
-        <td>
-          <span class="bd-color" style="background: #fff;"></span>
-          <code>#fff</code>
-        </td>
-        <td>
-          <a class="button" style="background: #3273dc; border-color: #3273dc; color: #fff;">
-            Button
-          </a>
-        </td>
-      </tr>
-      <tr>
-        <td>
-          <span class="bd-color" style="background: #23d160;"></span>
-          <code>#23d160</code>
-        </td>
-        <td>
-          <code>0.51067</code>
-        </td>
-        <td>
-          <span class="bd-color" style="background: #fff;"></span>
-          <code>#fff</code>
-        </td>
-        <td>
-          <a class="button" style="background: #23d160; border-color: #23d160; color: #fff;">
-            Button
-          </a>
-        </td>
-      </tr>
-      <tr>
-        <td>
-          <span class="bd-color" style="background: #ffdd57;"></span>
-          <code>#ffdd57</code>
-        </td>
-        <td>
-          <code>0.76863</code>
-        </td>
-        <td>
-          <span class="bd-color" style="background: rgba(0, 0, 0, 0.7);"></span>
-          <code>rgba(0, 0, 0, 0.7)</code>
-        </td>
-        <td>
-          <a class="button" style="background: #ffdd57; border-color: #ffdd57; color: rgba(0, 0, 0, 0.7);">
-            Button
-          </a>
-        </td>
-      </tr>
-      <tr>
-        <td>
-          <span class="bd-color" style="background: #ff3860;"></span>
-          <code>#ff3860</code>
-        </td>
-        <td>
-          <code>0.27313</code>
-        </td>
-        <td>
-          <span class="bd-color" style="background: #fff;"></span>
-          <code>#fff</code>
-        </td>
-        <td>
-          <a class="button" style="background: #ff3860; border-color: #ff3860; color: #fff;">
-            Button
-          </a>
-        </td>
-      </tr>
-      <tr>
-        <td>
-          <span class="bd-color" style="background: #ffb3b3;"></span>
-          <code>#ffb3b3</code>
-        </td>
-        <td>
-          <code>0.61796</code>
-        </td>
-        <td>
-          <span class="bd-color" style="background: rgba(0,0,0,0.7);"></span>
-          <code>rgba(0,0,0,0.7)</code>
-        </td>
-        <td>
-          <a class="button" style="background: #ffb3b3; border-color: #ffb3b3; color: rgba(0,0,0,0.7);">
-            Button
-          </a>
-        </td>
-      </tr>
-      <tr>
-        <td>
-          <span class="bd-color" style="background: #ffbc6b;"></span>
-          <code>#ffbc6b</code>
-        </td>
-        <td>
-          <code>0.63053</code>
-        </td>
-        <td>
-          <span class="bd-color" style="background: rgba(0,0,0,0.7);"></span>
-          <code>rgba(0,0,0,0.7)</code>
-        </td>
-        <td>
-          <a class="button" style="background: #ffbc6b; border-color: #ffbc6b; color: rgba(0,0,0,0.7);">
-            Button
-          </a>
-        </td>
-      </tr>
-      <tr>
-        <td>
-          <span class="bd-color" style="background: hsl(294, 71%, 79%);"></span>
-          <code>hsl(294, 71%, 79%)</code>
-        </td>
-        <td>
-          <code>0.5529</code>
-        </td>
-        <td>
-          <span class="bd-color" style="background: rgba(0,0,0,0.7);"></span>
-          <code>rgba(0,0,0,0.7)</code>
-        </td>
-        <td>
-          <a class="button" style="background: hsl(294, 71%, 79%); border-color: hsl(294, 71%, 79%); color: rgba(0,0,0,0.7);">
-            Button
-          </a>
-        </td>
-      </tr>
-    </tbody>
-  </table>
+  <div class="table-container">
+    <table class="table is-bordered">
+      <thead>
+        <tr>
+          <th>color</th>
+          <th>color luminance</th>
+          <th>findColorInvert()</th>
+          <th>result</th>
+        </tr>
+      </thead>
+      <tbody>
+        <tr>
+          <td>
+            <span class="bd-color" style="background: #00d1b2;"></span>
+            <code>#00d1b2</code>
+          </td>
+          <td>
+            <code>0.52831</code>
+          </td>
+          <td>
+            <span class="bd-color" style="background: #fff;"></span>
+            <code>#fff</code>
+          </td>
+          <td>
+            <a class="button" style="background: #00d1b2; border-color: #00d1b2; color: #fff;">
+              Button
+            </a>
+          </td>
+        </tr>
+        <tr>
+          <td>
+            <span class="bd-color" style="background: #3273dc;"></span>
+            <code>#3273dc</code>
+          </td>
+          <td>
+            <code>0.23119</code>
+          </td>
+          <td>
+            <span class="bd-color" style="background: #fff;"></span>
+            <code>#fff</code>
+          </td>
+          <td>
+            <a class="button" style="background: #3273dc; border-color: #3273dc; color: #fff;">
+              Button
+            </a>
+          </td>
+        </tr>
+        <tr>
+          <td>
+            <span class="bd-color" style="background: #23d160;"></span>
+            <code>#23d160</code>
+          </td>
+          <td>
+            <code>0.51067</code>
+          </td>
+          <td>
+            <span class="bd-color" style="background: #fff;"></span>
+            <code>#fff</code>
+          </td>
+          <td>
+            <a class="button" style="background: #23d160; border-color: #23d160; color: #fff;">
+              Button
+            </a>
+          </td>
+        </tr>
+        <tr>
+          <td>
+            <span class="bd-color" style="background: #ffdd57;"></span>
+            <code>#ffdd57</code>
+          </td>
+          <td>
+            <code>0.76863</code>
+          </td>
+          <td>
+            <span class="bd-color" style="background: rgba(0, 0, 0, 0.7);"></span>
+            <code>rgba(0, 0, 0, 0.7)</code>
+          </td>
+          <td>
+            <a class="button" style="background: #ffdd57; border-color: #ffdd57; color: rgba(0, 0, 0, 0.7);">
+              Button
+            </a>
+          </td>
+        </tr>
+        <tr>
+          <td>
+            <span class="bd-color" style="background: #ff3860;"></span>
+            <code>#ff3860</code>
+          </td>
+          <td>
+            <code>0.27313</code>
+          </td>
+          <td>
+            <span class="bd-color" style="background: #fff;"></span>
+            <code>#fff</code>
+          </td>
+          <td>
+            <a class="button" style="background: #ff3860; border-color: #ff3860; color: #fff;">
+              Button
+            </a>
+          </td>
+        </tr>
+        <tr>
+          <td>
+            <span class="bd-color" style="background: #ffb3b3;"></span>
+            <code>#ffb3b3</code>
+          </td>
+          <td>
+            <code>0.61796</code>
+          </td>
+          <td>
+            <span class="bd-color" style="background: rgba(0,0,0,0.7);"></span>
+            <code>rgba(0,0,0,0.7)</code>
+          </td>
+          <td>
+            <a class="button" style="background: #ffb3b3; border-color: #ffb3b3; color: rgba(0,0,0,0.7);">
+              Button
+            </a>
+          </td>
+        </tr>
+        <tr>
+          <td>
+            <span class="bd-color" style="background: #ffbc6b;"></span>
+            <code>#ffbc6b</code>
+          </td>
+          <td>
+            <code>0.63053</code>
+          </td>
+          <td>
+            <span class="bd-color" style="background: rgba(0,0,0,0.7);"></span>
+            <code>rgba(0,0,0,0.7)</code>
+          </td>
+          <td>
+            <a class="button" style="background: #ffbc6b; border-color: #ffbc6b; color: rgba(0,0,0,0.7);">
+              Button
+            </a>
+          </td>
+        </tr>
+        <tr>
+          <td>
+            <span class="bd-color" style="background: hsl(294, 71%, 79%);"></span>
+            <code>hsl(294, 71%, 79%)</code>
+          </td>
+          <td>
+            <code>0.5529</code>
+          </td>
+          <td>
+            <span class="bd-color" style="background: rgba(0,0,0,0.7);"></span>
+            <code>rgba(0,0,0,0.7)</code>
+          </td>
+          <td>
+            <a class="button" style="background: hsl(294, 71%, 79%); border-color: hsl(294, 71%, 79%); color: rgba(0,0,0,0.7);">
+              Button
+            </a>
+          </td>
+        </tr>
+      </tbody>
+    </table>
+  </div>
   <p>
     For colors that have a luminance close to the <code>0.55</code> threshold, it can be useful to <strong>override</strong> the <code>findColorInvert()</code> function, and rather set the invert color <strong>manually.</strong>
     <br>
     For example, this shade of <span class="bd-color" style="background: hsl(294, 71%, 79%); float: none; height: 16px; width: 16px; margin-right: 0; vertical-align: middle;"></span> purple has a color luminance of <code>0.5529</code>. It can be preferable to set a color invert of white instead of transparent black:
   </p>
-  <table class="table is-bordered">
-    <tbody>
-      <tr>
-        <th>
-          with <code>findColorInvert()</code>
-        </th>
-        <td>
-          <code>$purple-invert: findColorInvert($purple)</code>
-        </td>
-        <td>
-          <span class="bd-color" style="background: rgba(0,0,0,0.7);"></span>
-          <code>rgba(0,0,0,0.7)</code>
-        </td>
-        <td>
-          <a class="button" style="background: hsl(294, 71%, 79%); border-color: hsl(294, 71%, 79%); color: rgba(0,0,0,0.7);">
-            Button
-          </a>
-        </td>
-      </tr>
-      <tr>
-        <th>
-          with manual setting
-        </th>
-        <td>
-          <code>$purple-invert: #fff</code>
-        </td>
-        <td>
-          <span class="bd-color" style="background: #fff;"></span>
-          <code>#fff</code>
-        </td>
-        <td>
-          <a class="button" style="background: hsl(294, 71%, 79%); border-color: hsl(294, 71%, 79%); color: #fff;">
-            Button
-          </a>
-        </td>
-      </tr>
-    </tbody>
-  </table>
+  <div class="table-container">
+    <table class="table is-bordered">
+      <tbody>
+        <tr>
+          <th>
+            with <code>findColorInvert()</code>
+          </th>
+          <td>
+            <code>$purple-invert: findColorInvert($purple)</code>
+          </td>
+          <td>
+            <span class="bd-color" style="background: rgba(0,0,0,0.7);"></span>
+            <code>rgba(0,0,0,0.7)</code>
+          </td>
+          <td>
+            <a class="button" style="background: hsl(294, 71%, 79%); border-color: hsl(294, 71%, 79%); color: rgba(0,0,0,0.7);">
+              Button
+            </a>
+          </td>
+        </tr>
+        <tr>
+          <th>
+            with manual setting
+          </th>
+          <td>
+            <code>$purple-invert: #fff</code>
+          </td>
+          <td>
+            <span class="bd-color" style="background: #fff;"></span>
+            <code>#fff</code>
+          </td>
+          <td>
+            <a class="button" style="background: hsl(294, 71%, 79%); border-color: hsl(294, 71%, 79%); color: #fff;">
+              Button
+            </a>
+          </td>
+        </tr>
+      </tbody>
+    </table>
+  </div>
 </div>

diff --git a/docs/documentation/overview/mixins.html b/docs/documentation/overview/mixins.html
index b8aa7866348badbe85aa52e8fbc9828d0a039f28..7dcf0a7ba2cb475528c682e975491d4c423bb9fd 100644 (file)
--- a/docs/documentation/overview/mixins.html
+++ b/docs/documentation/overview/mixins.html
@@ -10,56 +10,58 @@ breadcrumb:
 - overview-mixins
 ---
 
-<table class="table is-bordered">
-  <tr>
-    <td><code>=arrow($color)</code></td>
-    <td>Creates a CSS-only down arrow. Used for the dropdown select.</td>
-  </tr>
-  <tr>
-    <td><code>=block</code></td>
-    <td>Defines a margin-bottom of 1.5rem, except when the element is the last child. Used for almost all block elements.</td>
-  </tr>
-  <tr>
-    <td><code>=clearfix</code></td>
-    <td>Adds a clearfix at the end of the element. Used for the "is-clearfix" helper.</td>
-  </tr>
-  <tr>
-    <td><code>=center($size)</code></td>
-    <td>Positions an element in the exact center of its parent. Used for the spinner in a loading button.</td>
-  </tr>
-  <tr>
-    <td><code>=delete</code></td>
-    <td>Creates a CSS-only cross. Used for the delete element in modals, messages, tags...</td>
-  </tr>
-  <tr>
-    <td><code>=fa($size, $dimensions)</code></td>
-    <td>Sets the style of a Font Awesome icon container.</td>
-  </tr>
-  <tr>
-    <td><code>=hamburger($dimensions)</code></td>
-    <td>Creates a CSS-only hamburger menu with 3 bars. Used for the "nav-toggle".</td>
-  </tr>
-  <tr>
-    <td><code>=loader</code></td>
-    <td>Creates a CSS-only loading spinner. Used for the ".loader" element, and for input and button spinners.</td>
-  </tr>
-  <tr>
-    <td><code>=overflow-touch</code></td>
-    <td>Sets the style of a container so that it keeps momentum when scrolling on iOS devices.</td>
-  </tr>
-  <tr>
-    <td><code>=overlay($offset: 0)</code></td>
-    <td>Makes the element overlay its parent container, like the transparent modal background.</td>
-  </tr>
-  <tr>
-    <td><code>=placeholder</code></td>
-    <td>Sets the styles of an input placeholder.</td>
-  </tr>
-  <tr>
-    <td><code>=unselectable</code></td>
-    <td>Turns the element unselectable. Used for buttons to prevent selection when clicking.</td>
-  </tr>
-</table>
+<div class="table-container">
+  <table class="table is-bordered">
+    <tr>
+      <td><code>=arrow($color)</code></td>
+      <td>Creates a CSS-only down arrow. Used for the dropdown select.</td>
+    </tr>
+    <tr>
+      <td><code>=block</code></td>
+      <td>Defines a margin-bottom of 1.5rem, except when the element is the last child. Used for almost all block elements.</td>
+    </tr>
+    <tr>
+      <td><code>=clearfix</code></td>
+      <td>Adds a clearfix at the end of the element. Used for the "is-clearfix" helper.</td>
+    </tr>
+    <tr>
+      <td><code>=center($size)</code></td>
+      <td>Positions an element in the exact center of its parent. Used for the spinner in a loading button.</td>
+    </tr>
+    <tr>
+      <td><code>=delete</code></td>
+      <td>Creates a CSS-only cross. Used for the delete element in modals, messages, tags...</td>
+    </tr>
+    <tr>
+      <td><code>=fa($size, $dimensions)</code></td>
+      <td>Sets the style of a Font Awesome icon container.</td>
+    </tr>
+    <tr>
+      <td><code>=hamburger($dimensions)</code></td>
+      <td>Creates a CSS-only hamburger menu with 3 bars. Used for the "nav-toggle".</td>
+    </tr>
+    <tr>
+      <td><code>=loader</code></td>
+      <td>Creates a CSS-only loading spinner. Used for the ".loader" element, and for input and button spinners.</td>
+    </tr>
+    <tr>
+      <td><code>=overflow-touch</code></td>
+      <td>Sets the style of a container so that it keeps momentum when scrolling on iOS devices.</td>
+    </tr>
+    <tr>
+      <td><code>=overlay($offset: 0)</code></td>
+      <td>Makes the element overlay its parent container, like the transparent modal background.</td>
+    </tr>
+    <tr>
+      <td><code>=placeholder</code></td>
+      <td>Sets the styles of an input placeholder.</td>
+    </tr>
+    <tr>
+      <td><code>=unselectable</code></td>
+      <td>Turns the element unselectable. Used for buttons to prevent selection when clicking.</td>
+    </tr>
+  </table>
+</div>
 
 <div class="content">
   <p>These mixins are already used throughout Bulma, but you can use them as well to extend your own styles.</p>