Ark/bulma
1
0
Fork 0
mirror of https://github.com/jgthms/bulma synced 2026-03-19 11:54:30 -07:00
Code Issues Packages Projects Releases Wiki Activity

Add is-right and is-fullwidth for file

Browse Source
This commit is contained in:
Jeremy Thomas
2017-07-30 00:22:26 +01:00
parent 057c272f6f
commit 01835c071e
3 changed files with 109 additions and 7 deletions
Download Patch File Download Diff File Expand all files Collapse all files

70
docs/documentation/form/file.html
View File

@@ -62,6 +62,44 @@ variables:
</div>
{% endcapture %}
{% capture file_name_right %}
<div class="file has-name is-right">
<label class="file-label">
<input class="file-input" type="file" name="resume">
<span class="file-cta">
<span class="file-icon">
<i class="fa fa-upload"></i>
</span>
<span class="file-label">
Choose a file…
</span>
</span>
<span class="file-name">
{{ page.file_name }}
</span>
</label>
</div>
{% endcapture %}
{% capture file_name_fullwidth %}
<div class="file has-name is-fullwidth">
<label class="file-label">
<input class="file-input" type="file" name="resume">
<span class="file-cta">
<span class="file-icon">
<i class="fa fa-upload"></i>
</span>
<span class="file-label">
Choose a file…
</span>
</span>
<span class="file-name">
{{ page.file_name }}
</span>
</label>
</div>
{% endcapture %}
{% capture file_centered %}
<div class="file is-centered">
<label class="file-label">
@@ -540,6 +578,38 @@ variables:
</div>
</div>
<div class="columns">
<div class="column">
<div class="content">
<p>
You can move the CTA to the <strong>right side</strong> with the <code>.is-right</code> modifier.
</p>
</div>
<div class="example">
{{ file_name_right }}
</div>
</div>
<div class="column highlight-full">
{% highlight html %}{{ file_name_right }}{% endhighlight %}
</div>
</div>
<div class="columns">
<div class="column">
<div class="content">
<p>
You can also <strong>expand</strong> the name to fill up the space with the <code>.is-fullwidth</code> modifier.
</p>
</div>
<div class="example">
{{ file_name_fullwidth }}
</div>
</div>
<div class="column highlight-full">
{% highlight html %}{{ file_name_fullwidth }}{% endhighlight %}
</div>
</div>
<div class="columns">
<div class="column">
<div class="content">