mirror of
https://github.com/jgthms/bulma
synced 2026-03-15 02:04:29 -07:00
Fix input and file variables
This commit is contained in:
Jeremy Thomas
35
docs/_includes/components/form-variables.html
Normal file
35
docs/_includes/components/form-variables.html
Normal file
@@ -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>
|
||||
26
docs/_includes/elements/variable-row.html
Normal file
26
docs/_includes/elements/variable-row.html
Normal file
@@ -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>
|
||||
@@ -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>
|
||||
|
||||
@@ -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 %}
|
||||
|
||||
@@ -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 %}
|
||||
|
||||
@@ -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" %}
|
||||
{% 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 %}
|
||||
|
||||
<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>
|
||||
|
||||
<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
|
||||
%}
|
||||
|
||||
Reference in New Issue
Block a user