Ark/bulma
1
0
Fork 0
mirror of https://github.com/jgthms/bulma synced 2026-03-15 02:04:29 -07:00
Code Issues Packages Projects Releases Wiki Activity

Add file colors

Browse Source
This commit is contained in:
Jeremy Thomas
2017-07-30 00:06:32 +01:00
parent e1a82944d3
commit 057c272f6f
3 changed files with 343 additions and 1 deletions
Download Patch File Download Diff File Expand all files Collapse all files

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

@@ -97,6 +97,78 @@ variables:
</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="fa fa-upload"></i>
</span>
<span class="file-label">
Primary file…
</span>
</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="fa fa-upload"></i>
</span>
<span class="file-label">
Info file…
</span>
</span>
<span class="file-name">
{{ page.file_name }}
</span>
</label>
</div>
</div>
<div class="field">
<div class="file is-warning is-centered">
<label class="file-label">
<input class="file-input" type="file" name="resume">
<span class="file-cta">
<span class="file-icon">
<i class="fa fa-cloud-upload"></i>
</span>
<span class="file-label">
Warning file…
</span>
</span>
</label>
</div>
</div>
<div class="field">
<div class="file is-danger has-name is-centered">
<label class="file-label">
<input class="file-input" type="file" name="resume">
<span class="file-cta">
<span class="file-icon">
<i class="fa fa-cloud-upload"></i>
</span>
<span class="file-label">
Danger file…
</span>
</span>
<span class="file-name">
{{ page.file_name }}
</span>
</label>
</div>
</div>
{% endcapture %}
{% capture file_sizes %}
<div class="field">
<div class="file is-small">
@@ -397,7 +469,7 @@ variables:
include meta.html
experimental=true
since="0.5.1"
colors=false
colors=true
sizes=true
variables=true
%}
@@ -500,6 +572,31 @@ variables:
</div>
</div>
{% include heading.html name="Colors" %}
<div class="columns">
<div class="column">
<div class="content">
<p>
You can style the file element by appending one of the <strong>9 color modifiers</strong>:
</p>
<ul>
{% for color in site.colors %}
<li>
<code>is-{{ color }}</code>
</li>
{% endfor %}
</ul>
</div>
<div class="example">
{{ file_colors }}
</div>
</div>
<div class="column">
{% highlight html %}{{ file_colors }}{% endhighlight %}
</div>
</div>
{% include heading.html name="Sizes" %}
<div class="content">