Fix input and file variables

docs/_includes/components/form-variables.html

@@ -0,0 +1,35 @@
+{% include elements/anchor.html name="Variables" %}
+
+<div class="content">
+  <p>
+    You can use <a href="{{ site.data.meta.github | append: '/blob/master/sass/elements/form.sass#L1,L23' }}" target="_blank">these variables</a> to <strong>customize</strong> this element. Simply set one or multiple of these variables <em>before</em> importing Bulma. <a href="{{ site.url }}/documentation/overview/customize/">Learn how</a>.
+  </p>
+</div>
+
+<table class="table is-bordered">
+  <thead>
+    <tr>
+      <th>Name</th>
+      <th>Default value</th>
+    </tr>
+  </thead>
+  <tfoot>
+    <tr>
+      <th>Name</th>
+      <th>Default value</th>
+    </tr>
+  </tfoot>
+  <tbody>
+    {% for key in page.variables_keys %}
+      {% assign variable = site.data.variables.elements.form.vars[key] %}
+      <tr>
+        <td>
+          <code>{{ variable.name }}</code>
+        </td>
+        <td>
+          <code>{{ variable.value }}</code>
+        </td>
+      </tr>
+    {% endfor %}
+  </tbody>
+</table>

docs/_includes/elements/variable-row.html

@@ -0,0 +1,26 @@
+<tr>
+  <td >
+    <code style="white-space: nowrap;">{{ include.variable.name }}</code>
+  </td>
+  <td>
+    <small>
+      {% if include.variable.computed_type and include.variable.computed_type != include.variable.type %}
+        {{ include.variable.computed_type }}
+      {% else %}
+        {{ include.variable.type }}
+      {% endif %}
+    </small>
+  </td>
+  <td>
+    <code>{{ include.variable.value }}</code>
+  </td>
+  <td>
+    {% if include.variable.computed_value != '' %}
+      {% if include.variable.computed_type == 'color' %}
+        {% include elements/color-square.html value=variable.computed_value %}
+      {% elsif include.variable.computed_value and include.variable.computed_value != include.variable.value %}
+        <code>{{ include.variable.computed_value }}</code>
+      {% endif %}
+    {% endif %}
+  </td>
+</tr>

docs/_includes/elements/variables.html

@@ -53,36 +53,22 @@
       </tr>
     </tfoot>
     <tbody>
-      {% for variable_name in variables %}
-        {% assign variable = data.by_name[variable_name] %}
-
-        <tr>
-          <td >
-            <code style="white-space: nowrap;">{{ variable.name }}</code>
-          </td>
-          <td>
-            <small>
-              {% if variable.computed_type and variable.computed_type != variable.type %}
-                {{ variable.computed_type }}
-              {% else %}
-                {{ variable.type }}
-              {% endif %}
-            </small>
-          </td>
-          <td>
-            <code>{{ variable.value }}</code>
-          </td>
-          <td>
-            {% if variable.computed_value != '' %}
-              {% if variable.computed_type == 'color' %}
-                {% include elements/color-square.html value=variable.computed_value %}
-              {% elsif variable.computed_value and variable.computed_value != variable.value %}
-                <code>{{ variable.computed_value }}</code>
-              {% endif %}
-            {% endif %}
-          </td>
-        </tr>
-      {% endfor %}
+      {% if include.variables_keys %}
+        {% for key in include.variables_keys %}
+          {% if include.responsiveness_variables %}
+            {% assign variable = site.data.variables.utilities.initial-variables.by_name[key] %}
+            {% include elements/variable-row.html variable=variable %}
+          {% else %}
+            {% assign variable = site.data.variables.elements.form.by_name[key] %}
+            {% include elements/variable-row.html variable=variable %}
+          {% endif %}
+        {% endfor %}
+      {% else %}
+        {% for variable_name in variables %}
+          {% assign variable = data.by_name[variable_name] %}
+          {% include elements/variable-row.html variable=variable %}
+        {% endfor %}
+      {% endif %}
     </tbody>
   </table>
 </div>

docs/documentation/form/file.html

@@ -10,16 +10,16 @@ breadcrumb:
 - form-file
 file_name: "Screen Shot 2017-07-29 at 15.54.25.png"
 variables_keys:
-- file-border-color
-- file-radius
-- file-cta-background-color
-- file-cta-color
-- file-cta-hover-color
-- file-cta-active-color
-- file-name-border-color
-- file-name-border-style
-- file-name-border-width
-- file-name-max-width
+- $file-border-color
+- $file-radius
+- $file-cta-background-color
+- $file-cta-color
+- $file-cta-hover-color
+- $file-cta-active-color
+- $file-name-border-color
+- $file-name-border-style
+- $file-name-border-width
+- $file-name-max-width
 meta:
   experimental: true
   colors: true
@@ -730,38 +730,4 @@ meta:
   </p>
 </div>
 
-{% include elements/anchor.html name="Variables" %}
-
-<div class="content">
-  <p>
-    You can use <a href="{{ site.data.meta.github | append: '/blob/master/sass/elements/form.sass#L25,L36' }}" target="_blank">these variables</a> to <strong>customize</strong> this element. Simply set one or multiple of these variables <em>before</em> importing Bulma. <a href="{{ site.url }}/documentation/overview/customize/">Learn how</a>.
-  </p>
-</div>
-
-<table class="table is-bordered">
-  <thead>
-    <tr>
-      <th>Name</th>
-      <th>Default value</th>
-    </tr>
-  </thead>
-  <tfoot>
-    <tr>
-      <th>Name</th>
-      <th>Default value</th>
-    </tr>
-  </tfoot>
-  <tbody>
-    {% for key in page.variables_keys %}
-      {% assign variable = site.data.variables.elements.form.vars[key] %}
-      <tr>
-        <td>
-          <code>{{ variable.name }}</code>
-        </td>
-        <td>
-          <code>{{ variable.value }}</code>
-        </td>
-      </tr>
-    {% endfor %}
-  </tbody>
-</table>
+{% include elements/variables.html type='element' variables_keys=page.variables_keys %}

docs/documentation/form/input.html

@@ -9,23 +9,23 @@ breadcrumb:
 - form
 - form-input
 variables_keys:
-- input-color
-- input-background-color
-- input-border-color
-- input-shadow
-- input-hover-color
-- input-hover-border-color
-- input-focus-color
-- input-focus-border-color
-- input-focus-box-shadow-size
-- input-focus-box-shadow-color
-- input-disabled-color
-- input-disabled-background-color
-- input-disabled-border-color
-- input-arrow
-- input-icon-color
-- input-icon-active-color
-- input-radius
+- $input-color
+- $input-background-color
+- $input-border-color
+- $input-shadow
+- $input-hover-color
+- $input-hover-border-color
+- $input-focus-color
+- $input-focus-border-color
+- $input-focus-box-shadow-size
+- $input-focus-box-shadow-color
+- $input-disabled-color
+- $input-disabled-background-color
+- $input-disabled-border-color
+- $input-arrow
+- $input-icon-color
+- $input-icon-active-color
+- $input-radius
 meta:
   colors: true
   sizes: true
@@ -478,38 +478,4 @@ meta:
   </div>
 </div>
 
-{% include elements/anchor.html name="Variables" %}
-
-<div class="content">
-  <p>
-    You can use <a href="{{ site.data.meta.github | append: '/blob/master/sass/elements/form.sass#L1,L23' }}" target="_blank">these variables</a> to <strong>customize</strong> this element. Simply set one or multiple of these variables <em>before</em> importing Bulma. <a href="{{ site.url }}/documentation/overview/customize/">Learn how</a>.
-  </p>
-</div>
-
-<table class="table is-bordered">
-  <thead>
-    <tr>
-      <th>Name</th>
-      <th>Default value</th>
-    </tr>
-  </thead>
-  <tfoot>
-    <tr>
-      <th>Name</th>
-      <th>Default value</th>
-    </tr>
-  </tfoot>
-  <tbody>
-    {% for key in page.variables_keys %}
-      {% assign variable = site.data.variables.elements.form.vars[key] %}
-      <tr>
-        <td>
-          <code>{{ variable.name }}</code>
-        </td>
-        <td>
-          <code>{{ variable.value }}</code>
-        </td>
-      </tr>
-    {% endfor %}
-  </tbody>
-</table>
+{% include elements/variables.html type='element' variables_keys=page.variables_keys %}

docs/documentation/overview/responsiveness.html

@@ -9,11 +9,11 @@ breadcrumb:
 - overview
 - overview-responsiveness
 variables_keys:
-- gap
-- tablet
-- desktop
-- widescreen
-- fullhd
+- $gap
+- $tablet
+- $desktop
+- $widescreen
+- $fullhd
 ---
 
 {% capture scss_code %}
@@ -226,38 +226,13 @@ $fullhd-enabled: false
 
 {% endif %}
 
-{% include elements/anchor.html name="Variables" %}
-
-<div class="content">
-  <p>
-    You can use <a href="{{ variables_file_url }}" target="_blank">these variables</a> to <strong>customize</strong> the responsive breakpoints. Simply set one or multiple of these variables <em>before</em> importing Bulma. <a href="{{ site.url }}/documentation/overview/customize/">Learn how</a>.
-  </p>
-</div>
+{% capture custom_message %}
+  These are <a href="{{ derived_variables.file_url }}" target="_blank">variables</a> with a value that <strong>references</strong> another variable.
+{% endcapture %}
 
-<table class="table is-bordered">
-  <thead>
-    <tr>
-      <th>Name</th>
-      <th>Default value</th>
-    </tr>
-  </thead>
-  <tfoot>
-    <tr>
-      <th>Name</th>
-      <th>Default value</th>
-    </tr>
-  </tfoot>
-  <tbody>
-    {% for key in page.variables_keys %}
-      {% assign variable = site.data.variables.utilities.initial-variables.vars[key] %}
-      <tr>
-        <td>
-          <code>{{ variable.name }}</code>
-        </td>
-        <td>
-          <code>{{ variable.value }}</code>
-        </td>
-      </tr>
-    {% endfor %}
-  </tbody>
-</table>
+{% include elements/variables.html
+  type='element'
+  variables_keys=page.variables_keys
+  custom_message=custom_message
+  responsiveness_variables=true
+%}