Fix input and file variables

This commit is contained in:
Jeremy Thomas
2018-06-16 21:12:34 +01:00
parent 1ff1edcf53
commit e8f3fc0d66
6 changed files with 120 additions and 166 deletions

View File

@@ -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 %}

View File

@@ -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 %}