mirror of
https://github.com/jgthms/bulma
synced 2026-03-18 03:14:30 -07:00
Bulma v9 website (#3249)
* Add Bulma v9 * Add vendor dependencies * Fix native * Fix sponsors * Add style attribute
This commit is contained in:
Jeremy Thomas
@@ -45,7 +45,7 @@ meta:
|
||||
<div class="column is-half">
|
||||
{{checkbox_example}}
|
||||
</div>
|
||||
<div class="column is-half highlight-full">
|
||||
<div class="column is-half bd-highlight-full">
|
||||
{% highlight html %}{{checkbox_example}}{% endhighlight %}
|
||||
</div>
|
||||
</div>
|
||||
@@ -60,7 +60,7 @@ meta:
|
||||
<div class="column is-half">
|
||||
{{checkbox_link_example}}
|
||||
</div>
|
||||
<div class="column is-half highlight-full">
|
||||
<div class="column is-half bd-highlight-full">
|
||||
{% highlight html %}{{checkbox_link_example}}{% endhighlight %}
|
||||
</div>
|
||||
</div>
|
||||
@@ -69,7 +69,7 @@ meta:
|
||||
<div class="column is-half">
|
||||
{{checkbox_disabled_example}}
|
||||
</div>
|
||||
<div class="column is-half highlight-full">
|
||||
<div class="column is-half bd-highlight-full">
|
||||
{% highlight html %}{{checkbox_disabled_example}}{% endhighlight %}
|
||||
</div>
|
||||
</div>
|
||||
|
||||
@@ -135,327 +135,111 @@ meta:
|
||||
</div>
|
||||
{% endcapture %}
|
||||
|
||||
{% capture file_colors %}
|
||||
<div class="field">
|
||||
<div class="file is-primary">
|
||||
<label class="file-label">
|
||||
<input class="file-input" type="file" name="resume">
|
||||
<span class="file-cta">
|
||||
<span class="file-icon">
|
||||
<i class="fas fa-upload"></i>
|
||||
</span>
|
||||
<span class="file-label">
|
||||
Primary file…
|
||||
</span>
|
||||
{% capture file_colors_a %}
|
||||
<div class="file is-primary">
|
||||
<label class="file-label">
|
||||
<input class="file-input" type="file" name="resume">
|
||||
<span class="file-cta">
|
||||
<span class="file-icon">
|
||||
<i class="fas fa-upload"></i>
|
||||
</span>
|
||||
</label>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="field">
|
||||
<div class="file is-info has-name">
|
||||
<label class="file-label">
|
||||
<input class="file-input" type="file" name="resume">
|
||||
<span class="file-cta">
|
||||
<span class="file-icon">
|
||||
<i class="fas fa-upload"></i>
|
||||
</span>
|
||||
<span class="file-label">
|
||||
Info file…
|
||||
</span>
|
||||
<span class="file-label">
|
||||
Primary file…
|
||||
</span>
|
||||
<span class="file-name">
|
||||
{{ page.file_name }}
|
||||
</span>
|
||||
</label>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="field">
|
||||
<div class="file is-warning is-boxed">
|
||||
<label class="file-label">
|
||||
<input class="file-input" type="file" name="resume">
|
||||
<span class="file-cta">
|
||||
<span class="file-icon">
|
||||
<i class="fas fa-cloud-upload-alt"></i>
|
||||
</span>
|
||||
<span class="file-label">
|
||||
Warning file…
|
||||
</span>
|
||||
</span>
|
||||
</label>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="field">
|
||||
<div class="file is-danger has-name is-boxed">
|
||||
<label class="file-label">
|
||||
<input class="file-input" type="file" name="resume">
|
||||
<span class="file-cta">
|
||||
<span class="file-icon">
|
||||
<i class="fas fa-cloud-upload-alt"></i>
|
||||
</span>
|
||||
<span class="file-label">
|
||||
Danger file…
|
||||
</span>
|
||||
</span>
|
||||
<span class="file-name">
|
||||
{{ page.file_name }}
|
||||
</span>
|
||||
</label>
|
||||
</div>
|
||||
</span>
|
||||
</label>
|
||||
</div>
|
||||
{% endcapture %}
|
||||
|
||||
{% capture file_sizes %}
|
||||
<div class="field">
|
||||
<div class="file is-small">
|
||||
<label class="file-label">
|
||||
<input class="file-input" type="file" name="resume">
|
||||
<span class="file-cta">
|
||||
<span class="file-icon">
|
||||
<i class="fas fa-upload"></i>
|
||||
</span>
|
||||
<span class="file-label">
|
||||
Small file…
|
||||
</span>
|
||||
{% capture file_colors_b %}
|
||||
<div class="file is-info has-name">
|
||||
<label class="file-label">
|
||||
<input class="file-input" type="file" name="resume">
|
||||
<span class="file-cta">
|
||||
<span class="file-icon">
|
||||
<i class="fas fa-upload"></i>
|
||||
</span>
|
||||
</label>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="field">
|
||||
<div class="file">
|
||||
<label class="file-label">
|
||||
<input class="file-input" type="file" name="resume">
|
||||
<span class="file-cta">
|
||||
<span class="file-icon">
|
||||
<i class="fas fa-upload"></i>
|
||||
</span>
|
||||
<span class="file-label">
|
||||
Normal file…
|
||||
</span>
|
||||
<span class="file-label">
|
||||
Info file…
|
||||
</span>
|
||||
</label>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="field">
|
||||
<div class="file is-medium">
|
||||
<label class="file-label">
|
||||
<input class="file-input" type="file" name="resume">
|
||||
<span class="file-cta">
|
||||
<span class="file-icon">
|
||||
<i class="fas fa-upload"></i>
|
||||
</span>
|
||||
<span class="file-label">
|
||||
Medium file…
|
||||
</span>
|
||||
</span>
|
||||
</label>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="field">
|
||||
<div class="file is-large">
|
||||
<label class="file-label">
|
||||
<input class="file-input" type="file" name="resume">
|
||||
<span class="file-cta">
|
||||
<span class="file-icon">
|
||||
<i class="fas fa-upload"></i>
|
||||
</span>
|
||||
<span class="file-label">
|
||||
Large file…
|
||||
</span>
|
||||
</span>
|
||||
</label>
|
||||
</div>
|
||||
</span>
|
||||
<span class="file-name">
|
||||
{{ page.file_name }}
|
||||
</span>
|
||||
</label>
|
||||
</div>
|
||||
{% endcapture %}
|
||||
|
||||
{% capture file_sizes_name %}
|
||||
<div class="field">
|
||||
<div class="file is-small has-name">
|
||||
<label class="file-label">
|
||||
<input class="file-input" type="file" name="resume">
|
||||
<span class="file-cta">
|
||||
<span class="file-icon">
|
||||
<i class="fas fa-upload"></i>
|
||||
</span>
|
||||
<span class="file-label">
|
||||
Small file…
|
||||
</span>
|
||||
{% capture file_colors_c %}
|
||||
<div class="file is-warning is-boxed">
|
||||
<label class="file-label">
|
||||
<input class="file-input" type="file" name="resume">
|
||||
<span class="file-cta">
|
||||
<span class="file-icon">
|
||||
<i class="fas fa-cloud-upload-alt"></i>
|
||||
</span>
|
||||
<span class="file-name">
|
||||
{{ page.file_name }}
|
||||
<span class="file-label">
|
||||
Warning file…
|
||||
</span>
|
||||
</label>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="field">
|
||||
<div class="file has-name">
|
||||
<label class="file-label">
|
||||
<input class="file-input" type="file" name="resume">
|
||||
<span class="file-cta">
|
||||
<span class="file-icon">
|
||||
<i class="fas fa-upload"></i>
|
||||
</span>
|
||||
<span class="file-label">
|
||||
Normal file…
|
||||
</span>
|
||||
</span>
|
||||
<span class="file-name">
|
||||
{{ page.file_name }}
|
||||
</span>
|
||||
</label>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="field">
|
||||
<div class="file is-medium has-name">
|
||||
<label class="file-label">
|
||||
<input class="file-input" type="file" name="resume">
|
||||
<span class="file-cta">
|
||||
<span class="file-icon">
|
||||
<i class="fas fa-upload"></i>
|
||||
</span>
|
||||
<span class="file-label">
|
||||
Medium file…
|
||||
</span>
|
||||
</span>
|
||||
<span class="file-name">
|
||||
{{ page.file_name }}
|
||||
</span>
|
||||
</label>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="field">
|
||||
<div class="file is-large has-name">
|
||||
<label class="file-label">
|
||||
<input class="file-input" type="file" name="resume">
|
||||
<span class="file-cta">
|
||||
<span class="file-icon">
|
||||
<i class="fas fa-upload"></i>
|
||||
</span>
|
||||
<span class="file-label">
|
||||
Large file…
|
||||
</span>
|
||||
</span>
|
||||
<span class="file-name">
|
||||
{{ page.file_name }}
|
||||
</span>
|
||||
</label>
|
||||
</div>
|
||||
</span>
|
||||
</label>
|
||||
</div>
|
||||
{% endcapture %}
|
||||
|
||||
{% capture file_sizes_boxed %}
|
||||
<div class="field">
|
||||
<div class="file is-small is-boxed">
|
||||
<label class="file-label">
|
||||
<input class="file-input" type="file" name="resume">
|
||||
<span class="file-cta">
|
||||
<span class="file-icon">
|
||||
<i class="fas fa-upload"></i>
|
||||
</span>
|
||||
<span class="file-label">
|
||||
Small file…
|
||||
</span>
|
||||
{% capture file_colors_d %}
|
||||
<div class="file is-danger has-name is-boxed">
|
||||
<label class="file-label">
|
||||
<input class="file-input" type="file" name="resume">
|
||||
<span class="file-cta">
|
||||
<span class="file-icon">
|
||||
<i class="fas fa-cloud-upload-alt"></i>
|
||||
</span>
|
||||
</label>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="field">
|
||||
<div class="file is-boxed">
|
||||
<label class="file-label">
|
||||
<input class="file-input" type="file" name="resume">
|
||||
<span class="file-cta">
|
||||
<span class="file-icon">
|
||||
<i class="fas fa-upload"></i>
|
||||
</span>
|
||||
<span class="file-label">
|
||||
Normal file…
|
||||
</span>
|
||||
<span class="file-label">
|
||||
Danger file…
|
||||
</span>
|
||||
</label>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="field">
|
||||
<div class="file is-medium is-boxed">
|
||||
<label class="file-label">
|
||||
<input class="file-input" type="file" name="resume">
|
||||
<span class="file-cta">
|
||||
<span class="file-icon">
|
||||
<i class="fas fa-upload"></i>
|
||||
</span>
|
||||
<span class="file-label">
|
||||
Medium file…
|
||||
</span>
|
||||
</span>
|
||||
</label>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="field">
|
||||
<div class="file is-large is-boxed">
|
||||
<label class="file-label">
|
||||
<input class="file-input" type="file" name="resume">
|
||||
<span class="file-cta">
|
||||
<span class="file-icon">
|
||||
<i class="fas fa-upload"></i>
|
||||
</span>
|
||||
<span class="file-label">
|
||||
Large file…
|
||||
</span>
|
||||
</span>
|
||||
</label>
|
||||
</div>
|
||||
</span>
|
||||
<span class="file-name">
|
||||
{{ page.file_name }}
|
||||
</span>
|
||||
</label>
|
||||
</div>
|
||||
{% endcapture %}
|
||||
|
||||
{% capture file_centered %}
|
||||
<div class="field">
|
||||
<div class="file is-centered is-boxed is-success has-name">
|
||||
<label class="file-label">
|
||||
<input class="file-input" type="file" name="resume">
|
||||
<span class="file-cta">
|
||||
<span class="file-icon">
|
||||
<i class="fas fa-upload"></i>
|
||||
</span>
|
||||
<span class="file-label">
|
||||
Centered file…
|
||||
</span>
|
||||
<div class="file is-centered is-boxed is-success has-name">
|
||||
<label class="file-label">
|
||||
<input class="file-input" type="file" name="resume">
|
||||
<span class="file-cta">
|
||||
<span class="file-icon">
|
||||
<i class="fas fa-upload"></i>
|
||||
</span>
|
||||
<span class="file-name">
|
||||
{{ page.file_name }}
|
||||
<span class="file-label">
|
||||
Centered file…
|
||||
</span>
|
||||
</label>
|
||||
</div>
|
||||
</span>
|
||||
<span class="file-name">
|
||||
{{ page.file_name }}
|
||||
</span>
|
||||
</label>
|
||||
</div>
|
||||
{% endcapture %}
|
||||
|
||||
{% capture file_right %}
|
||||
<div class="field">
|
||||
<div class="file is-right is-info">
|
||||
<label class="file-label">
|
||||
<input class="file-input" type="file" name="resume">
|
||||
<span class="file-cta">
|
||||
<span class="file-icon">
|
||||
<i class="fas fa-upload"></i>
|
||||
</span>
|
||||
<span class="file-label">
|
||||
Right file…
|
||||
</span>
|
||||
<div class="file is-right is-info">
|
||||
<label class="file-label">
|
||||
<input class="file-input" type="file" name="resume">
|
||||
<span class="file-cta">
|
||||
<span class="file-icon">
|
||||
<i class="fas fa-upload"></i>
|
||||
</span>
|
||||
<span class="file-name">
|
||||
{{ page.file_name }}
|
||||
<span class="file-label">
|
||||
Right file…
|
||||
</span>
|
||||
</label>
|
||||
</div>
|
||||
</span>
|
||||
<span class="file-name">
|
||||
{{ page.file_name }}
|
||||
</span>
|
||||
</label>
|
||||
</div>
|
||||
{% endcapture %}
|
||||
|
||||
@@ -488,83 +272,7 @@ meta:
|
||||
</script>
|
||||
{% endcapture %}
|
||||
|
||||
{% capture file_sizes_boxed_name %}
|
||||
<div class="field">
|
||||
<div class="file is-small is-boxed has-name">
|
||||
<label class="file-label">
|
||||
<input class="file-input" type="file" name="resume">
|
||||
<span class="file-cta">
|
||||
<span class="file-icon">
|
||||
<i class="fas fa-upload"></i>
|
||||
</span>
|
||||
<span class="file-label">
|
||||
Small file…
|
||||
</span>
|
||||
</span>
|
||||
<span class="file-name">
|
||||
{{ page.file_name }}
|
||||
</span>
|
||||
</label>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="field">
|
||||
<div class="file is-boxed has-name">
|
||||
<label class="file-label">
|
||||
<input class="file-input" type="file" name="resume">
|
||||
<span class="file-cta">
|
||||
<span class="file-icon">
|
||||
<i class="fas fa-upload"></i>
|
||||
</span>
|
||||
<span class="file-label">
|
||||
Normal file…
|
||||
</span>
|
||||
</span>
|
||||
<span class="file-name">
|
||||
{{ page.file_name }}
|
||||
</span>
|
||||
</label>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="field">
|
||||
<div class="file is-medium is-boxed has-name">
|
||||
<label class="file-label">
|
||||
<input class="file-input" type="file" name="resume">
|
||||
<span class="file-cta">
|
||||
<span class="file-icon">
|
||||
<i class="fas fa-upload"></i>
|
||||
</span>
|
||||
<span class="file-label">
|
||||
Medium file…
|
||||
</span>
|
||||
</span>
|
||||
<span class="file-name">
|
||||
{{ page.file_name }}
|
||||
</span>
|
||||
</label>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="field">
|
||||
<div class="file is-large is-boxed has-name">
|
||||
<label class="file-label">
|
||||
<input class="file-input" type="file" name="resume">
|
||||
<span class="file-cta">
|
||||
<span class="file-icon">
|
||||
<i class="fas fa-upload"></i>
|
||||
</span>
|
||||
<span class="file-label">
|
||||
Large file…
|
||||
</span>
|
||||
</span>
|
||||
<span class="file-name">
|
||||
{{ page.file_name }}
|
||||
</span>
|
||||
</label>
|
||||
</div>
|
||||
</div>
|
||||
{% endcapture %}
|
||||
<!-- -->
|
||||
|
||||
<div class="content">
|
||||
<p>
|
||||
@@ -606,7 +314,7 @@ meta:
|
||||
{% include elements/anchor.html name="Modifiers" %}
|
||||
|
||||
<div class="columns">
|
||||
<div class="column">
|
||||
<div class="column is-6">
|
||||
<div class="content">
|
||||
<p>
|
||||
With the <code>has-name</code> modifier combined with the <code>file-name</code> element, you can add a <strong>placeholder</strong> for the selected file name.
|
||||
@@ -616,13 +324,13 @@ meta:
|
||||
{{ file_name }}
|
||||
</div>
|
||||
</div>
|
||||
<div class="column highlight-full">
|
||||
<div class="column is-6 bd-highlight-full">
|
||||
{% highlight html %}{{ file_name }}{% endhighlight %}
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="columns">
|
||||
<div class="column">
|
||||
<div class="column is-6">
|
||||
<div class="content">
|
||||
<p>
|
||||
You can move the CTA to the <strong>right side</strong> with the <code>is-right</code> modifier.
|
||||
@@ -632,13 +340,13 @@ meta:
|
||||
{{ file_name_right }}
|
||||
</div>
|
||||
</div>
|
||||
<div class="column highlight-full">
|
||||
<div class="column is-6 bd-highlight-full">
|
||||
{% highlight html %}{{ file_name_right }}{% endhighlight %}
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="columns">
|
||||
<div class="column">
|
||||
<div class="column is-6">
|
||||
<div class="content">
|
||||
<p>
|
||||
You can also <strong>expand</strong> the name to fill up the space with the <code>is-fullwidth</code> modifier.
|
||||
@@ -648,13 +356,13 @@ meta:
|
||||
{{ file_name_fullwidth }}
|
||||
</div>
|
||||
</div>
|
||||
<div class="column highlight-full">
|
||||
<div class="column is-6 bd-highlight-full">
|
||||
{% highlight html %}{{ file_name_fullwidth }}{% endhighlight %}
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="columns">
|
||||
<div class="column">
|
||||
<div class="column is-6">
|
||||
<div class="content">
|
||||
<p>
|
||||
You can have a <strong>boxed block</strong> with the <code>is-boxed</code> modifier.
|
||||
@@ -664,13 +372,13 @@ meta:
|
||||
{{ file_boxed }}
|
||||
</div>
|
||||
</div>
|
||||
<div class="column highlight-full">
|
||||
<div class="column is-6 bd-highlight-full">
|
||||
{% highlight html %}{{ file_boxed }}{% endhighlight %}
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="columns">
|
||||
<div class="column">
|
||||
<div class="column is-6">
|
||||
<div class="content">
|
||||
<p>
|
||||
You can <strong>combine</strong> <code>has-name</code> and <code>is-boxed</code>.
|
||||
@@ -680,7 +388,7 @@ meta:
|
||||
{{ file_boxed_name }}
|
||||
</div>
|
||||
</div>
|
||||
<div class="column highlight-full">
|
||||
<div class="column is-6 bd-highlight-full">
|
||||
{% highlight html %}{{ file_boxed_name }}{% endhighlight %}
|
||||
</div>
|
||||
</div>
|
||||
@@ -700,18 +408,24 @@ meta:
|
||||
</ul>
|
||||
</div>
|
||||
|
||||
{% include elements/snippet.html content=file_colors clipped=true %}
|
||||
{% include elements/snippet.html content=file_colors_a %}
|
||||
{% include elements/snippet.html content=file_colors_b %}
|
||||
{% include elements/snippet.html content=file_colors_c %}
|
||||
{% include elements/snippet.html content=file_colors_d %}
|
||||
|
||||
{% include elements/anchor.html name="Sizes" %}
|
||||
|
||||
<div class="content">
|
||||
<p>
|
||||
You can append one of <strong>3 additional sizes</strong>:
|
||||
You can append one of the <strong>4 available sizes</strong>:
|
||||
</p>
|
||||
<ul>
|
||||
<li>
|
||||
<code>is-small</code>
|
||||
</li>
|
||||
<li>
|
||||
<code>is-normal</code> (default)
|
||||
</li>
|
||||
<li>
|
||||
<code>is-medium</code>
|
||||
</li>
|
||||
@@ -721,13 +435,87 @@ meta:
|
||||
</ul>
|
||||
</div>
|
||||
|
||||
{% include elements/snippet.html content=file_sizes clipped=true %}
|
||||
{% for size in site.data.sizes %}
|
||||
{% capture foobar %}
|
||||
<div class="file is-{{ size }}">
|
||||
<label class="file-label">
|
||||
<input class="file-input" type="file" name="resume">
|
||||
<span class="file-cta">
|
||||
<span class="file-icon">
|
||||
<i class="fas fa-upload"></i>
|
||||
</span>
|
||||
<span class="file-label">
|
||||
{{ size | capitalize }} file…
|
||||
</span>
|
||||
</span>
|
||||
</label>
|
||||
</div>
|
||||
{% endcapture %}
|
||||
{% include elements/snippet.html content=foobar %}
|
||||
{% endfor %}
|
||||
|
||||
{% include elements/snippet.html content=file_sizes_name clipped=true %}
|
||||
{% for size in site.data.sizes %}
|
||||
{% capture foobar %}
|
||||
<div class="file is-{{ size }} has-name">
|
||||
<label class="file-label">
|
||||
<input class="file-input" type="file" name="resume">
|
||||
<span class="file-cta">
|
||||
<span class="file-icon">
|
||||
<i class="fas fa-upload"></i>
|
||||
</span>
|
||||
<span class="file-label">
|
||||
{{ size | capitalize }} file…
|
||||
</span>
|
||||
</span>
|
||||
<span class="file-name">
|
||||
{{ page.file_name }}
|
||||
</span>
|
||||
</label>
|
||||
</div>
|
||||
{% endcapture %}
|
||||
{% include elements/snippet.html content=foobar %}
|
||||
{% endfor %}
|
||||
|
||||
{% include elements/snippet.html content=file_sizes_boxed clipped=true %}
|
||||
{% for size in site.data.sizes %}
|
||||
{% capture foobar %}
|
||||
<div class="file is-{{ size }} is-boxed">
|
||||
<label class="file-label">
|
||||
<input class="file-input" type="file" name="resume">
|
||||
<span class="file-cta">
|
||||
<span class="file-icon">
|
||||
<i class="fas fa-upload"></i>
|
||||
</span>
|
||||
<span class="file-label">
|
||||
{{ size | capitalize }} file…
|
||||
</span>
|
||||
</span>
|
||||
</label>
|
||||
</div>
|
||||
{% endcapture %}
|
||||
{% include elements/snippet.html content=foobar %}
|
||||
{% endfor %}
|
||||
|
||||
{% include elements/snippet.html content=file_sizes_boxed_name clipped=true %}
|
||||
{% for size in site.data.sizes %}
|
||||
{% capture foobar %}
|
||||
<div class="file is-{{ size }} is-boxed has-name">
|
||||
<label class="file-label">
|
||||
<input class="file-input" type="file" name="resume">
|
||||
<span class="file-cta">
|
||||
<span class="file-icon">
|
||||
<i class="fas fa-upload"></i>
|
||||
</span>
|
||||
<span class="file-label">
|
||||
{{ size | capitalize }} file…
|
||||
</span>
|
||||
</span>
|
||||
<span class="file-name">
|
||||
{{ page.file_name }}
|
||||
</span>
|
||||
</label>
|
||||
</div>
|
||||
{% endcapture %}
|
||||
{% include elements/snippet.html content=foobar %}
|
||||
{% endfor %}
|
||||
|
||||
{% include elements/anchor.html name="Alignment" %}
|
||||
|
||||
@@ -756,10 +544,11 @@ meta:
|
||||
A file upload input requires JavaScript to <strong>retrieve</strong> the <strong>selected file name</strong>.
|
||||
Here is an example of how this could be done:
|
||||
</p>
|
||||
{% include elements/snippet.html content=file_javascript %}
|
||||
</div>
|
||||
|
||||
{% include elements/variables.html
|
||||
{% include elements/snippet.html horizontal=true content=file_javascript %}
|
||||
|
||||
{% include components/variables.html
|
||||
type='element'
|
||||
variables_keys=page.variables_keys
|
||||
folder='elements'
|
||||
|
||||
@@ -1094,7 +1094,7 @@ variables_keys:
|
||||
|
||||
{% include elements/snippet.html content=disabled_fields_example %}
|
||||
|
||||
{% include elements/variables.html
|
||||
{% include components/variables.html
|
||||
type='element'
|
||||
variables_keys=page.variables_control_keys
|
||||
custom_message=custom_message
|
||||
@@ -1102,7 +1102,7 @@ variables_keys:
|
||||
file='controls'
|
||||
%}
|
||||
|
||||
{% include elements/variables.html
|
||||
{% include components/variables.html
|
||||
type='element'
|
||||
variables_keys=page.variables_keys
|
||||
folder='elements'
|
||||
|
||||
@@ -36,57 +36,6 @@ meta:
|
||||
<input class="input" type="text" placeholder="Text input">
|
||||
{% endcapture %}
|
||||
|
||||
{% capture colors_example %}
|
||||
<div class="field">
|
||||
<div class="control">
|
||||
<input class="input is-primary" type="text" placeholder="Primary input">
|
||||
</div>
|
||||
</div>
|
||||
<div class="field">
|
||||
<div class="control">
|
||||
<input class="input is-info" type="text" placeholder="Info input">
|
||||
</div>
|
||||
</div>
|
||||
<div class="field">
|
||||
<div class="control">
|
||||
<input class="input is-success" type="text" placeholder="Success input">
|
||||
</div>
|
||||
</div>
|
||||
<div class="field">
|
||||
<div class="control">
|
||||
<input class="input is-warning" type="text" placeholder="Warning input">
|
||||
</div>
|
||||
</div>
|
||||
<div class="field">
|
||||
<div class="control">
|
||||
<input class="input is-danger" type="text" placeholder="Danger input">
|
||||
</div>
|
||||
</div>
|
||||
{% endcapture %}
|
||||
|
||||
{% capture sizes_example %}
|
||||
<div class="field">
|
||||
<div class="control">
|
||||
<input class="input is-small" type="text" placeholder="Small input">
|
||||
</div>
|
||||
</div>
|
||||
<div class="field">
|
||||
<div class="control">
|
||||
<input class="input" type="text" placeholder="Normal input">
|
||||
</div>
|
||||
</div>
|
||||
<div class="field">
|
||||
<div class="control">
|
||||
<input class="input is-medium" type="text" placeholder="Medium input">
|
||||
</div>
|
||||
</div>
|
||||
<div class="field">
|
||||
<div class="control">
|
||||
<input class="input is-large" type="text" placeholder="Large input">
|
||||
</div>
|
||||
</div>
|
||||
{% endcapture %}
|
||||
|
||||
{% capture rounded_example %}
|
||||
<input class="input is-rounded" type="text" placeholder="Rounded input">
|
||||
{% endcapture %}
|
||||
@@ -272,32 +221,28 @@ meta:
|
||||
<div class="column is-half">
|
||||
{{input_example}}
|
||||
</div>
|
||||
<div class="column is-half highlight-full">
|
||||
<div class="column is-half bd-highlight-full">
|
||||
{% highlight html %}{{input_example}}{% endhighlight %}
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{% include elements/anchor.html name="Colors" %}
|
||||
|
||||
<div class="columns">
|
||||
<div class="column is-half">
|
||||
{{colors_example}}
|
||||
</div>
|
||||
<div class="column is-half highlight-full">
|
||||
{% highlight html %}{{colors_example}}{% endhighlight %}
|
||||
</div>
|
||||
</div>
|
||||
{% for color in site.data.colors.justColors %}
|
||||
{% capture foobar %}
|
||||
<input class="input is-{{ color }}" type="text" placeholder="{{ color | capitalize }} input">
|
||||
{% endcapture %}
|
||||
{% include elements/snippet.html content=foobar %}
|
||||
{% endfor %}
|
||||
|
||||
{% include elements/anchor.html name="Sizes" %}
|
||||
|
||||
<div class="columns">
|
||||
<div class="column is-half">
|
||||
{{sizes_example}}
|
||||
</div>
|
||||
<div class="column is-half">
|
||||
{% highlight html %}{{sizes_example}}{% endhighlight %}
|
||||
</div>
|
||||
</div>
|
||||
{% for size in site.data.sizes %}
|
||||
{% capture foobar %}
|
||||
<input class="input is-{{ size }}" type="text" placeholder="{{ size | capitalize }} input">
|
||||
{% endcapture %}
|
||||
{% include elements/snippet.html content=foobar %}
|
||||
{% endfor %}
|
||||
|
||||
{% include elements/anchor.html name="Styles" %}
|
||||
|
||||
@@ -312,7 +257,8 @@ meta:
|
||||
|
||||
{% include elements/anchor.html name="States" %}
|
||||
|
||||
<h4 class="subtitle">Normal</h4>
|
||||
<h4 class="title is-5">Normal</h4>
|
||||
|
||||
<div class="columns">
|
||||
<div class="column is-half">
|
||||
{{normal_example}}
|
||||
@@ -322,7 +268,8 @@ meta:
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<h4 class="subtitle">Hover</h4>
|
||||
<h4 class="title is-5">Hover</h4>
|
||||
|
||||
<div class="columns">
|
||||
<div class="column is-half">
|
||||
{{hover_example}}
|
||||
@@ -332,7 +279,8 @@ meta:
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<h4 class="subtitle">Focus</h4>
|
||||
<h4 class="title is-5">Focus</h4>
|
||||
|
||||
<div class="columns">
|
||||
<div class="column is-half">
|
||||
{{focus_example}}
|
||||
@@ -342,7 +290,8 @@ meta:
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<h4 class="subtitle">Loading</h4>
|
||||
<h4 class="title is-5">Loading</h4>
|
||||
|
||||
<div class="columns">
|
||||
<div class="column is-half">
|
||||
{{loading_example}}
|
||||
@@ -366,7 +315,9 @@ meta:
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<h4 class="subtitle">Disabled</h4>
|
||||
<h4 class="title is-5">Disabled</h4>
|
||||
|
||||
|
||||
<div class="columns">
|
||||
<div class="column is-half">
|
||||
{{disabled_example}}
|
||||
@@ -376,7 +327,8 @@ meta:
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<h4 class="subtitle">Readonly and static inputs</h4>
|
||||
<h4 class="title is-5">Readonly and static inputs</h4>
|
||||
|
||||
|
||||
<div class="content">
|
||||
<p>
|
||||
@@ -477,7 +429,7 @@ meta:
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{% include elements/variables.html type='element'
|
||||
{% include components/variables.html type='element'
|
||||
variables_keys=page.variables_keys
|
||||
folder='elements'
|
||||
file='form'
|
||||
|
||||
@@ -70,7 +70,7 @@ meta:
|
||||
<div class="column is-half">
|
||||
{{radio_example}}
|
||||
</div>
|
||||
<div class="column is-half highlight-full">
|
||||
<div class="column is-half bd-highlight-full">
|
||||
{% highlight html %}{{radio_example}}{% endhighlight %}
|
||||
</div>
|
||||
</div>
|
||||
@@ -85,7 +85,7 @@ meta:
|
||||
<div class="column is-half">
|
||||
{{radio_default_example}}
|
||||
</div>
|
||||
<div class="column is-half highlight-full">
|
||||
<div class="column is-half bd-highlight-full">
|
||||
{% highlight html %}{{radio_default_example}}{% endhighlight %}
|
||||
</div>
|
||||
</div>
|
||||
@@ -100,7 +100,7 @@ meta:
|
||||
<div class="column is-half">
|
||||
{{radio_disabled_example}}
|
||||
</div>
|
||||
<div class="column is-half highlight-full">
|
||||
<div class="column is-half bd-highlight-full">
|
||||
{% highlight html %}{{radio_disabled_example}}{% endhighlight %}
|
||||
</div>
|
||||
</div>
|
||||
|
||||
@@ -42,59 +42,6 @@ meta:
|
||||
</div>
|
||||
{% endcapture %}
|
||||
|
||||
{% capture colors_example %}
|
||||
<div class="field">
|
||||
<div class="control">
|
||||
<div class="select is-primary">
|
||||
<select>
|
||||
<option>Select dropdown</option>
|
||||
<option>With options</option>
|
||||
</select>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="field">
|
||||
<div class="control">
|
||||
<div class="select is-info">
|
||||
<select>
|
||||
<option>Select dropdown</option>
|
||||
<option>With options</option>
|
||||
</select>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="field">
|
||||
<div class="control">
|
||||
<div class="select is-success">
|
||||
<select>
|
||||
<option>Select dropdown</option>
|
||||
<option>With options</option>
|
||||
</select>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="field">
|
||||
<div class="control">
|
||||
<div class="select is-warning">
|
||||
<select>
|
||||
<option>Select dropdown</option>
|
||||
<option>With options</option>
|
||||
</select>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="field">
|
||||
<div class="control">
|
||||
<div class="select is-danger">
|
||||
<select>
|
||||
<option>Select dropdown</option>
|
||||
<option>With options</option>
|
||||
</select>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
{% endcapture %}
|
||||
|
||||
{% capture rounded_example %}
|
||||
<div class="select is-rounded">
|
||||
<select>
|
||||
@@ -104,117 +51,62 @@ meta:
|
||||
</div>
|
||||
{% endcapture %}
|
||||
|
||||
{% capture sizes_example %}
|
||||
<div class="field">
|
||||
<div class="control">
|
||||
<div class="select is-small">
|
||||
<select>
|
||||
<option>Select dropdown</option>
|
||||
<option>With options</option>
|
||||
</select>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="field">
|
||||
<div class="control">
|
||||
<div class="select">
|
||||
<select>
|
||||
<option>Select dropdown</option>
|
||||
<option>With options</option>
|
||||
</select>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="field">
|
||||
<div class="control">
|
||||
<div class="select is-medium">
|
||||
<select>
|
||||
<option>Select dropdown</option>
|
||||
<option>With options</option>
|
||||
</select>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="field">
|
||||
<div class="control">
|
||||
<div class="select is-large">
|
||||
<select>
|
||||
<option>Select dropdown</option>
|
||||
<option>With options</option>
|
||||
</select>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
{% endcapture %}
|
||||
|
||||
{% capture normal_example %}
|
||||
<div class="control">
|
||||
<div class="select">
|
||||
<select>
|
||||
<option>Select dropdown</option>
|
||||
<option>With options</option>
|
||||
</select>
|
||||
</div>
|
||||
<div class="select">
|
||||
<select>
|
||||
<option>Select dropdown</option>
|
||||
<option>With options</option>
|
||||
</select>
|
||||
</div>
|
||||
{% endcapture %}
|
||||
|
||||
{% capture hover_example %}
|
||||
<div class="control">
|
||||
<div class="select">
|
||||
<select class="is-hovered">
|
||||
<option>Select dropdown</option>
|
||||
<option>With options</option>
|
||||
</select>
|
||||
</div>
|
||||
<div class="select">
|
||||
<select class="is-hovered">
|
||||
<option>Select dropdown</option>
|
||||
<option>With options</option>
|
||||
</select>
|
||||
</div>
|
||||
{% endcapture %}
|
||||
|
||||
{% capture focus_example %}
|
||||
<div class="control">
|
||||
<div class="select">
|
||||
<select class="is-focused">
|
||||
<option>Select dropdown</option>
|
||||
<option>With options</option>
|
||||
</select>
|
||||
</div>
|
||||
<div class="select">
|
||||
<select class="is-focused">
|
||||
<option>Select dropdown</option>
|
||||
<option>With options</option>
|
||||
</select>
|
||||
</div>
|
||||
{% endcapture %}
|
||||
|
||||
{% capture loading_example %}
|
||||
<div class="control">
|
||||
<div class="select is-loading">
|
||||
<select>
|
||||
<option>Select dropdown</option>
|
||||
<option>With options</option>
|
||||
</select>
|
||||
</div>
|
||||
<div class="select is-loading">
|
||||
<select>
|
||||
<option>Select dropdown</option>
|
||||
<option>With options</option>
|
||||
</select>
|
||||
</div>
|
||||
{% endcapture %}
|
||||
|
||||
{% capture disabled_example %}
|
||||
<div class="control">
|
||||
<div class="select is-disabled">
|
||||
<select disabled>
|
||||
<option>Select dropdown</option>
|
||||
<option>With options</option>
|
||||
</select>
|
||||
</div>
|
||||
<div class="select is-disabled">
|
||||
<select disabled>
|
||||
<option>Select dropdown</option>
|
||||
<option>With options</option>
|
||||
</select>
|
||||
</div>
|
||||
{% endcapture %}
|
||||
|
||||
{% capture icons_example %}
|
||||
<div class="field">
|
||||
<div class="control has-icons-left">
|
||||
<div class="select">
|
||||
<select>
|
||||
<option selected>Country</option>
|
||||
<option>Select dropdown</option>
|
||||
<option>With options</option>
|
||||
</select>
|
||||
</div>
|
||||
<div class="icon is-small is-left">
|
||||
<i class="fas fa-globe"></i>
|
||||
</div>
|
||||
<div class="control has-icons-left">
|
||||
<div class="select">
|
||||
<select>
|
||||
<option selected>Country</option>
|
||||
<option>Select dropdown</option>
|
||||
<option>With options</option>
|
||||
</select>
|
||||
</div>
|
||||
<div class="icon is-small is-left">
|
||||
<i class="fas fa-globe"></i>
|
||||
</div>
|
||||
</div>
|
||||
{% endcapture %}
|
||||
@@ -289,7 +181,7 @@ meta:
|
||||
<div class="column is-half">
|
||||
{{ select_example }}
|
||||
</div>
|
||||
<div class="column is-half highlight-full">
|
||||
<div class="column is-half bd-highlight-full">
|
||||
{% highlight html %}{{ select_example }}{% endhighlight %}
|
||||
</div>
|
||||
</div>
|
||||
@@ -314,21 +206,24 @@ meta:
|
||||
</div>
|
||||
{{ select_multiple_example }}
|
||||
</div>
|
||||
<div class="column is-half highlight-full">
|
||||
<div class="column is-half bd-highlight-full">
|
||||
{% highlight html %}{{ select_multiple_example }}{% endhighlight %}
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{% include elements/anchor.html name="Colors" %}
|
||||
|
||||
<div class="columns">
|
||||
<div class="column is-half">
|
||||
{{ colors_example }}
|
||||
</div>
|
||||
<div class="column is-half highlight-full">
|
||||
{% highlight html %}{{ colors_example }}{% endhighlight %}
|
||||
</div>
|
||||
{% for color in site.data.colors.justColors %}
|
||||
{% capture foobar %}
|
||||
<div class="select is-{{ color }}">
|
||||
<select>
|
||||
<option>Select dropdown</option>
|
||||
<option>With options</option>
|
||||
</select>
|
||||
</div>
|
||||
{% endcapture %}
|
||||
{% include elements/snippet.html content=foobar %}
|
||||
{% endfor %}
|
||||
|
||||
{% include elements/anchor.html name="Styles" %}
|
||||
|
||||
@@ -355,14 +250,17 @@ meta:
|
||||
</p>
|
||||
</div>
|
||||
|
||||
<div class="columns">
|
||||
<div class="column is-half">
|
||||
{{ sizes_example }}
|
||||
</div>
|
||||
<div class="column is-half">
|
||||
{% highlight html %}{{ sizes_example }}{% endhighlight %}
|
||||
</div>
|
||||
{% for size in site.data.sizes %}
|
||||
{% capture foobar %}
|
||||
<div class="select is-{{ size }}">
|
||||
<select>
|
||||
<option>Select dropdown</option>
|
||||
<option>With options</option>
|
||||
</select>
|
||||
</div>
|
||||
{% endcapture %}
|
||||
{% include elements/snippet.html content=foobar %}
|
||||
{% endfor %}
|
||||
|
||||
{% include elements/anchor.html name="States" %}
|
||||
|
||||
|
||||
@@ -162,7 +162,12 @@ meta:
|
||||
</p>
|
||||
</div>
|
||||
|
||||
{% include elements/snippet.html content=colors_example %}
|
||||
{% for color in site.data.colors.justColors %}
|
||||
{% capture foobar %}
|
||||
<textarea class="textarea is-{{ color }}" placeholder="{{ color | capitalize }} textarea"></textarea>
|
||||
{% endcapture %}
|
||||
{% include elements/snippet.html content=foobar %}
|
||||
{% endfor %}
|
||||
|
||||
{% include elements/anchor.html name="Sizes" %}
|
||||
|
||||
@@ -221,7 +226,7 @@ meta:
|
||||
</div>
|
||||
{{loading_sizes_example}}
|
||||
</div>
|
||||
<div class="column is-half highlight-full">
|
||||
<div class="column is-half bd-highlight-full">
|
||||
{% highlight html %}{{loading_sizes_example}}{% endhighlight %}
|
||||
</div>
|
||||
</div>
|
||||
|
||||
Reference in New Issue
Block a user