From: Jeremy Thomas Date: Sat, 16 Jun 2018 20:12:34 +0000 (+0100) Subject: Fix input and file variables X-Git-Tag: 0.7.2~98 X-Git-Url: http://git.ipfire.org/cgi-bin/gitweb.cgi?a=commitdiff_plain;h=e8f3fc0d662de60bedbadca34264109d8e4e40a9;p=thirdparty%2Fbulma.git Fix input and file variables --- diff --git a/docs/_includes/components/form-variables.html b/docs/_includes/components/form-variables.html new file mode 100644 index 000000000..6953521bf --- /dev/null +++ b/docs/_includes/components/form-variables.html @@ -0,0 +1,35 @@ +{% include elements/anchor.html name="Variables" %} + +
+

+ You can use these variables to customize this element. Simply set one or multiple of these variables before importing Bulma. Learn how. +

+
+ + + + + + + + + + + + + + + + {% for key in page.variables_keys %} + {% assign variable = site.data.variables.elements.form.vars[key] %} + + + + + {% endfor %} + +
NameDefault value
NameDefault value
+ {{ variable.name }} + + {{ variable.value }} +
diff --git a/docs/_includes/elements/variable-row.html b/docs/_includes/elements/variable-row.html new file mode 100644 index 000000000..c03b21cda --- /dev/null +++ b/docs/_includes/elements/variable-row.html @@ -0,0 +1,26 @@ + + + {{ include.variable.name }} + + + + {% if include.variable.computed_type and include.variable.computed_type != include.variable.type %} + {{ include.variable.computed_type }} + {% else %} + {{ include.variable.type }} + {% endif %} + + + + {{ include.variable.value }} + + + {% 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 %} + {{ include.variable.computed_value }} + {% endif %} + {% endif %} + + diff --git a/docs/_includes/elements/variables.html b/docs/_includes/elements/variables.html index a1268dd56..c098c31d8 100644 --- a/docs/_includes/elements/variables.html +++ b/docs/_includes/elements/variables.html @@ -53,36 +53,22 @@ - {% for variable_name in variables %} - {% assign variable = data.by_name[variable_name] %} - - - - {{ variable.name }} - - - - {% if variable.computed_type and variable.computed_type != variable.type %} - {{ variable.computed_type }} - {% else %} - {{ variable.type }} - {% endif %} - - - - {{ variable.value }} - - - {% 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 %} - {{ variable.computed_value }} - {% endif %} - {% endif %} - - - {% 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 %} diff --git a/docs/documentation/form/file.html b/docs/documentation/form/file.html index ad028553d..7d1fdd08a 100644 --- a/docs/documentation/form/file.html +++ b/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:

-{% include elements/anchor.html name="Variables" %} - -
-

- You can use these variables to customize this element. Simply set one or multiple of these variables before importing Bulma. Learn how. -

-
- - - - - - - - - - - - - - - - {% for key in page.variables_keys %} - {% assign variable = site.data.variables.elements.form.vars[key] %} - - - - - {% endfor %} - -
NameDefault value
NameDefault value
- {{ variable.name }} - - {{ variable.value }} -
+{% include elements/variables.html type='element' variables_keys=page.variables_keys %} diff --git a/docs/documentation/form/input.html b/docs/documentation/form/input.html index d32fcc95e..ccfe35f85 100644 --- a/docs/documentation/form/input.html +++ b/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: -{% include elements/anchor.html name="Variables" %} - -
-

- You can use these variables to customize this element. Simply set one or multiple of these variables before importing Bulma. Learn how. -

-
- - - - - - - - - - - - - - - - {% for key in page.variables_keys %} - {% assign variable = site.data.variables.elements.form.vars[key] %} - - - - - {% endfor %} - -
NameDefault value
NameDefault value
- {{ variable.name }} - - {{ variable.value }} -
+{% include elements/variables.html type='element' variables_keys=page.variables_keys %} diff --git a/docs/documentation/overview/responsiveness.html b/docs/documentation/overview/responsiveness.html index da4b39f2d..be8c6ac1a 100644 --- a/docs/documentation/overview/responsiveness.html +++ b/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" %} - -
-

- You can use these variables to customize the responsive breakpoints. Simply set one or multiple of these variables before importing Bulma. Learn how. -

-
+{% capture custom_message %} + These are variables with a value that references another variable. +{% endcapture %} - - - - - - - - - - - - - - - {% for key in page.variables_keys %} - {% assign variable = site.data.variables.utilities.initial-variables.vars[key] %} - - - - - {% endfor %} - -
NameDefault value
NameDefault value
- {{ variable.name }} - - {{ variable.value }} -
+{% include elements/variables.html + type='element' + variables_keys=page.variables_keys + custom_message=custom_message + responsiveness_variables=true +%}