mirror of
https://github.com/jgthms/bulma
synced 2026-03-20 20:24:30 -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>
|
</tr>
|
||||||
</tfoot>
|
</tfoot>
|
||||||
<tbody>
|
<tbody>
|
||||||
{% for variable_name in variables %}
|
{% if include.variables_keys %}
|
||||||
{% assign variable = data.by_name[variable_name] %}
|
{% for key in include.variables_keys %}
|
||||||
|
{% if include.responsiveness_variables %}
|
||||||
<tr>
|
{% assign variable = site.data.variables.utilities.initial-variables.by_name[key] %}
|
||||||
<td >
|
{% include elements/variable-row.html variable=variable %}
|
||||||
<code style="white-space: nowrap;">{{ variable.name }}</code>
|
{% else %}
|
||||||
</td>
|
{% assign variable = site.data.variables.elements.form.by_name[key] %}
|
||||||
<td>
|
{% include elements/variable-row.html variable=variable %}
|
||||||
<small>
|
{% endif %}
|
||||||
{% if variable.computed_type and variable.computed_type != variable.type %}
|
{% endfor %}
|
||||||
{{ variable.computed_type }}
|
{% else %}
|
||||||
{% else %}
|
{% for variable_name in variables %}
|
||||||
{{ variable.type }}
|
{% assign variable = data.by_name[variable_name] %}
|
||||||
{% endif %}
|
{% include elements/variable-row.html variable=variable %}
|
||||||
</small>
|
{% endfor %}
|
||||||
</td>
|
{% endif %}
|
||||||
<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 %}
|
|
||||||
</tbody>
|
</tbody>
|
||||||
</table>
|
</table>
|
||||||
</div>
|
</div>
|
||||||
|
|||||||
@@ -10,16 +10,16 @@ breadcrumb:
|
|||||||
- form-file
|
- form-file
|
||||||
file_name: "Screen Shot 2017-07-29 at 15.54.25.png"
|
file_name: "Screen Shot 2017-07-29 at 15.54.25.png"
|
||||||
variables_keys:
|
variables_keys:
|
||||||
- file-border-color
|
- $file-border-color
|
||||||
- file-radius
|
- $file-radius
|
||||||
- file-cta-background-color
|
- $file-cta-background-color
|
||||||
- file-cta-color
|
- $file-cta-color
|
||||||
- file-cta-hover-color
|
- $file-cta-hover-color
|
||||||
- file-cta-active-color
|
- $file-cta-active-color
|
||||||
- file-name-border-color
|
- $file-name-border-color
|
||||||
- file-name-border-style
|
- $file-name-border-style
|
||||||
- file-name-border-width
|
- $file-name-border-width
|
||||||
- file-name-max-width
|
- $file-name-max-width
|
||||||
meta:
|
meta:
|
||||||
experimental: true
|
experimental: true
|
||||||
colors: true
|
colors: true
|
||||||
@@ -730,38 +730,4 @@ meta:
|
|||||||
</p>
|
</p>
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
{% include elements/anchor.html name="Variables" %}
|
{% include elements/variables.html type='element' variables_keys=page.variables_keys %}
|
||||||
|
|
||||||
<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>
|
|
||||||
|
|||||||
@@ -9,23 +9,23 @@ breadcrumb:
|
|||||||
- form
|
- form
|
||||||
- form-input
|
- form-input
|
||||||
variables_keys:
|
variables_keys:
|
||||||
- input-color
|
- $input-color
|
||||||
- input-background-color
|
- $input-background-color
|
||||||
- input-border-color
|
- $input-border-color
|
||||||
- input-shadow
|
- $input-shadow
|
||||||
- input-hover-color
|
- $input-hover-color
|
||||||
- input-hover-border-color
|
- $input-hover-border-color
|
||||||
- input-focus-color
|
- $input-focus-color
|
||||||
- input-focus-border-color
|
- $input-focus-border-color
|
||||||
- input-focus-box-shadow-size
|
- $input-focus-box-shadow-size
|
||||||
- input-focus-box-shadow-color
|
- $input-focus-box-shadow-color
|
||||||
- input-disabled-color
|
- $input-disabled-color
|
||||||
- input-disabled-background-color
|
- $input-disabled-background-color
|
||||||
- input-disabled-border-color
|
- $input-disabled-border-color
|
||||||
- input-arrow
|
- $input-arrow
|
||||||
- input-icon-color
|
- $input-icon-color
|
||||||
- input-icon-active-color
|
- $input-icon-active-color
|
||||||
- input-radius
|
- $input-radius
|
||||||
meta:
|
meta:
|
||||||
colors: true
|
colors: true
|
||||||
sizes: true
|
sizes: true
|
||||||
@@ -478,38 +478,4 @@ meta:
|
|||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
{% include elements/anchor.html name="Variables" %}
|
{% include elements/variables.html type='element' variables_keys=page.variables_keys %}
|
||||||
|
|
||||||
<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>
|
|
||||||
|
|||||||
@@ -9,11 +9,11 @@ breadcrumb:
|
|||||||
- overview
|
- overview
|
||||||
- overview-responsiveness
|
- overview-responsiveness
|
||||||
variables_keys:
|
variables_keys:
|
||||||
- gap
|
- $gap
|
||||||
- tablet
|
- $tablet
|
||||||
- desktop
|
- $desktop
|
||||||
- widescreen
|
- $widescreen
|
||||||
- fullhd
|
- $fullhd
|
||||||
---
|
---
|
||||||
|
|
||||||
{% capture scss_code %}
|
{% capture scss_code %}
|
||||||
@@ -226,38 +226,13 @@ $fullhd-enabled: false
|
|||||||
|
|
||||||
{% endif %}
|
{% 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">
|
{% include elements/variables.html
|
||||||
<p>
|
type='element'
|
||||||
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>.
|
variables_keys=page.variables_keys
|
||||||
</p>
|
custom_message=custom_message
|
||||||
</div>
|
responsiveness_variables=true
|
||||||
|
%}
|
||||||
<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>
|
|
||||||
|
|||||||
Reference in New Issue
Block a user