mirror of
https://github.com/jgthms/bulma.git
synced 2024-11-14 11:14:24 +00:00
Add file
This commit is contained in:
Jeremy Thomas
parent
c25d82a06b
commit
a14b67aa50
@ -8,6 +8,14 @@
|
||||
</div>
|
||||
{% endif %}
|
||||
|
||||
{% if include.experimental %}
|
||||
<div class="control">
|
||||
<div class="tags">
|
||||
<span class="tag is-warning">Experimental</span>
|
||||
</div>
|
||||
</div>
|
||||
{% endif %}
|
||||
|
||||
{% if include.since %}
|
||||
<div class="control">
|
||||
<div class="tags has-addons">
|
||||
|
||||
@ -19,6 +19,12 @@
|
||||
<a class="navbar-item is-tab {% if page.doc-subtab == 'radio' %}is-active{% endif %}" href="{{ site.url }}/documentation/form/radio/">
|
||||
Radio
|
||||
</a>
|
||||
<a class="navbar-item is-tab {% if page.doc-subtab == 'file' %}is-active{% endif %}" href="{{ site.url }}/documentation/form/file/">
|
||||
File
|
||||
<span class="tag is-success" style="margin-left: 1em;">
|
||||
New!
|
||||
</span>
|
||||
</a>
|
||||
</div>
|
||||
</div>
|
||||
</nav>
|
||||
|
||||
@ -37,10 +37,15 @@
|
||||
.anchor-title
|
||||
padding-top: 1.5rem
|
||||
position: relative
|
||||
+mobile
|
||||
padding-left: 2rem
|
||||
|
||||
.anchor-link
|
||||
position: absolute
|
||||
right: calc(100% + 1rem)
|
||||
+mobile
|
||||
left: 0
|
||||
right: auto
|
||||
|
||||
.article-image
|
||||
background-color: $primary
|
||||
|
||||
File diff suppressed because one or more lines are too long
487
docs/documentation/form/file.html
Normal file
487
docs/documentation/form/file.html
Normal file
@ -0,0 +1,487 @@
|
||||
---
|
||||
title: File upload
|
||||
layout: documentation
|
||||
doc-tab: form
|
||||
doc-subtab: upload
|
||||
file_name: "Screen Shot 2017-07-29 at 15.54.25.png"
|
||||
---
|
||||
|
||||
{% capture file %}
|
||||
<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="fa fa-upload"></i>
|
||||
</span>
|
||||
<span class="file-label">
|
||||
Choose a file…
|
||||
</span>
|
||||
</span>
|
||||
</label>
|
||||
</div>
|
||||
{% endcapture %}
|
||||
|
||||
{% capture file_path %}
|
||||
<div class="file has-path">
|
||||
<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-path">
|
||||
{{ page.file_name }}
|
||||
</span>
|
||||
</label>
|
||||
</div>
|
||||
{% endcapture %}
|
||||
|
||||
{% capture file_centered %}
|
||||
<div class="file 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-upload"></i>
|
||||
</span>
|
||||
<span class="file-label">
|
||||
Choose a file…
|
||||
</span>
|
||||
</span>
|
||||
</label>
|
||||
</div>
|
||||
{% endcapture %}
|
||||
|
||||
{% capture file_centered_path %}
|
||||
<div class="file is-centered has-path">
|
||||
<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-path">
|
||||
{{ page.file_name }}
|
||||
</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="fa fa-upload"></i>
|
||||
</span>
|
||||
<span class="file-label">
|
||||
Small file…
|
||||
</span>
|
||||
</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="fa fa-upload"></i>
|
||||
</span>
|
||||
<span class="file-label">
|
||||
Normal file…
|
||||
</span>
|
||||
</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="fa 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="fa fa-upload"></i>
|
||||
</span>
|
||||
<span class="file-label">
|
||||
Large file…
|
||||
</span>
|
||||
</span>
|
||||
</label>
|
||||
</div>
|
||||
</div>
|
||||
{% endcapture %}
|
||||
|
||||
{% capture file_sizes_path %}
|
||||
<div class="field">
|
||||
<div class="file is-small has-path">
|
||||
<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">
|
||||
Small file…
|
||||
</span>
|
||||
</span>
|
||||
<span class="file-path">
|
||||
{{ page.file_name }}
|
||||
</span>
|
||||
</label>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="field">
|
||||
<div class="file has-path">
|
||||
<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">
|
||||
Normal file…
|
||||
</span>
|
||||
</span>
|
||||
<span class="file-path">
|
||||
{{ page.file_name }}
|
||||
</span>
|
||||
</label>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="field">
|
||||
<div class="file is-medium has-path">
|
||||
<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">
|
||||
Medium file…
|
||||
</span>
|
||||
</span>
|
||||
<span class="file-path">
|
||||
{{ page.file_name }}
|
||||
</span>
|
||||
</label>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="field">
|
||||
<div class="file is-large has-path">
|
||||
<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">
|
||||
Large file…
|
||||
</span>
|
||||
</span>
|
||||
<span class="file-path">
|
||||
{{ page.file_name }}
|
||||
</span>
|
||||
</label>
|
||||
</div>
|
||||
</div>
|
||||
{% endcapture %}
|
||||
|
||||
{% capture file_sizes_centered %}
|
||||
<div class="field">
|
||||
<div class="file is-small 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-upload"></i>
|
||||
</span>
|
||||
<span class="file-label">
|
||||
Small file…
|
||||
</span>
|
||||
</span>
|
||||
</label>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="field">
|
||||
<div class="file 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-upload"></i>
|
||||
</span>
|
||||
<span class="file-label">
|
||||
Normal file…
|
||||
</span>
|
||||
</span>
|
||||
</label>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="field">
|
||||
<div class="file is-medium 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-upload"></i>
|
||||
</span>
|
||||
<span class="file-label">
|
||||
Medium file…
|
||||
</span>
|
||||
</span>
|
||||
</label>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="field">
|
||||
<div class="file is-large 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-upload"></i>
|
||||
</span>
|
||||
<span class="file-label">
|
||||
Large file…
|
||||
</span>
|
||||
</span>
|
||||
</label>
|
||||
</div>
|
||||
</div>
|
||||
{% endcapture %}
|
||||
|
||||
{% capture file_sizes_centered_path %}
|
||||
<div class="field">
|
||||
<div class="file is-small is-centered has-path">
|
||||
<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">
|
||||
Small file…
|
||||
</span>
|
||||
</span>
|
||||
<span class="file-path">
|
||||
{{ page.file_name }}
|
||||
</span>
|
||||
</label>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="field">
|
||||
<div class="file is-centered has-path">
|
||||
<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">
|
||||
Normal file…
|
||||
</span>
|
||||
</span>
|
||||
<span class="file-path">
|
||||
{{ page.file_name }}
|
||||
</span>
|
||||
</label>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="field">
|
||||
<div class="file is-medium is-centered has-path">
|
||||
<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">
|
||||
Medium file…
|
||||
</span>
|
||||
</span>
|
||||
<span class="file-path">
|
||||
{{ page.file_name }}
|
||||
</span>
|
||||
</label>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="field">
|
||||
<div class="file is-large is-centered has-path">
|
||||
<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">
|
||||
Large file…
|
||||
</span>
|
||||
</span>
|
||||
<span class="file-path">
|
||||
{{ page.file_name }}
|
||||
</span>
|
||||
</label>
|
||||
</div>
|
||||
</div>
|
||||
{% endcapture %}
|
||||
|
||||
{% include subnav-form.html %}
|
||||
|
||||
<section class="section">
|
||||
<div class="container">
|
||||
<h1 class="title">File upload</h1>
|
||||
<h2 class="subtitle">
|
||||
A custom <strong>file upload</strong> input, without JavaScript
|
||||
</h2>
|
||||
{%
|
||||
include meta.html
|
||||
experimental=true
|
||||
since="0.5.1"
|
||||
colors=false
|
||||
sizes=true
|
||||
variables=true
|
||||
%}
|
||||
|
||||
<hr>
|
||||
|
||||
<div class="content">
|
||||
<p>
|
||||
The <code>.file</code> class is a simple wrapper around the <code><input type="radio"></code> HTML elements. It is intentionally not styled, to preserve cross-browser compatibility and the user experience.
|
||||
</p>
|
||||
<p>
|
||||
Make sure the linked radio buttons have the <strong>same value</strong> for their <code>name</code> HTML attribute.
|
||||
</p>
|
||||
</div>
|
||||
|
||||
<div class="columns">
|
||||
<div class="column">
|
||||
<div class="example">
|
||||
{{ file }}
|
||||
</div>
|
||||
</div>
|
||||
<div class="column highlight-full">
|
||||
{% highlight html %}{{ file }}{% endhighlight %}
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{% include heading.html name="Modifiers" %}
|
||||
|
||||
<div class="columns">
|
||||
<div class="column">
|
||||
<div class="example">
|
||||
{{ file_path }}
|
||||
</div>
|
||||
</div>
|
||||
<div class="column highlight-full">
|
||||
{% highlight html %}{{ file_path }}{% endhighlight %}
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="columns">
|
||||
<div class="column">
|
||||
<div class="example">
|
||||
{{ file_centered }}
|
||||
</div>
|
||||
</div>
|
||||
<div class="column highlight-full">
|
||||
{% highlight html %}{{ file_centered }}{% endhighlight %}
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="columns">
|
||||
<div class="column">
|
||||
<div class="example">
|
||||
{{ file_centered_path }}
|
||||
</div>
|
||||
</div>
|
||||
<div class="column highlight-full">
|
||||
{% highlight html %}{{ file_centered_path }}{% endhighlight %}
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{% include heading.html name="Sizes" %}
|
||||
|
||||
<div class="columns">
|
||||
<div class="column">
|
||||
<div class="example">
|
||||
{{ file_sizes }}
|
||||
</div>
|
||||
</div>
|
||||
<div class="column">
|
||||
{% highlight html %}{{ file_sizes }}{% endhighlight %}
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="columns">
|
||||
<div class="column">
|
||||
<div class="example">
|
||||
{{ file_sizes_path }}
|
||||
</div>
|
||||
</div>
|
||||
<div class="column">
|
||||
{% highlight html %}{{ file_sizes_path }}{% endhighlight %}
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="columns">
|
||||
<div class="column">
|
||||
<div class="example">
|
||||
{{ file_sizes_centered }}
|
||||
</div>
|
||||
</div>
|
||||
<div class="column">
|
||||
{% highlight html %}{{ file_sizes_centered }}{% endhighlight %}
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="columns">
|
||||
<div class="column">
|
||||
<div class="example">
|
||||
{{ file_sizes_centered_path }}
|
||||
</div>
|
||||
</div>
|
||||
<div class="column">
|
||||
{% highlight html %}{{ file_sizes_centered_path }}{% endhighlight %}
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
@ -181,6 +181,137 @@ $help-size: $size-small !default
|
||||
&.is-large:after
|
||||
font-size: $size-large
|
||||
|
||||
$file-border-color: transparent !default
|
||||
$file-radius: $radius !default
|
||||
|
||||
// $file-cta-background-color: $white-ter !default
|
||||
$file-cta-background-color: $red !default
|
||||
$file-cta-color: $grey-dark !default
|
||||
$file-cta-hover-color: $grey-darker !default
|
||||
$file-cta-active-color: $grey-darker !default
|
||||
|
||||
$file-path-border-color: $file-cta-background-color !default
|
||||
$file-path-border-style: solid !default
|
||||
$file-path-border-width: 1px 1px 1px 0 !default
|
||||
$file-path-max-width: 16em !default
|
||||
|
||||
.file
|
||||
align-items: stretch
|
||||
display: flex
|
||||
justify-content: flex-start
|
||||
position: relative
|
||||
&.is-small
|
||||
font-size: $size-small
|
||||
&.is-medium
|
||||
font-size: $size-medium
|
||||
.file-icon
|
||||
.fa
|
||||
font-size: 21px
|
||||
&.is-large
|
||||
font-size: $size-large
|
||||
.file-icon
|
||||
.fa
|
||||
font-size: 28px
|
||||
&.has-path
|
||||
.file-cta
|
||||
border-bottom-right-radius: 0
|
||||
border-top-right-radius: 0
|
||||
.file-path
|
||||
border-bottom-left-radius: 0
|
||||
border-top-left-radius: 0
|
||||
&.is-centered
|
||||
justify-content: center
|
||||
.file-label
|
||||
flex-direction: column
|
||||
.file-cta
|
||||
flex-direction: column
|
||||
height: auto
|
||||
padding: 1em 3em
|
||||
.file-path
|
||||
border-width: 0 1px 1px
|
||||
.file-icon
|
||||
height: 1.5em
|
||||
width: 1.5em
|
||||
.fa
|
||||
font-size: 21px
|
||||
&.is-small
|
||||
.file-icon .fa
|
||||
font-size: 14px
|
||||
&.is-medium
|
||||
.file-icon .fa
|
||||
font-size: 28px
|
||||
&.is-large
|
||||
.file-icon .fa
|
||||
font-size: 35px
|
||||
&.has-path
|
||||
.file-cta
|
||||
border-radius: $file-radius $file-radius 0 0
|
||||
.file-path
|
||||
border-radius: 0 0 $file-radius $file-radius
|
||||
border-width: 0 1px 1px
|
||||
|
||||
.file-label
|
||||
align-items: stretch
|
||||
display: flex
|
||||
cursor: pointer
|
||||
justify-content: flex-start
|
||||
overflow: hidden
|
||||
position: relative
|
||||
&:hover
|
||||
.file-cta
|
||||
background-color: darken($file-cta-background-color, 2.5%)
|
||||
color: $file-cta-hover-color
|
||||
.file-path
|
||||
border-color: darken($file-path-border-color, 2.5%)
|
||||
&:active
|
||||
.file-cta
|
||||
background-color: darken($file-cta-background-color, 5%)
|
||||
color: $file-cta-active-color
|
||||
.file-path
|
||||
border-color: darken($file-path-border-color, 5%)
|
||||
|
||||
.file-input
|
||||
height: 0.01em
|
||||
left: 0
|
||||
outline: none
|
||||
position: absolute
|
||||
top: 0
|
||||
width: 0.01em
|
||||
|
||||
.file-cta,
|
||||
.file-path
|
||||
+control
|
||||
border-color: $file-border-color
|
||||
border-radius: $file-radius
|
||||
font-size: 1em
|
||||
padding-left: 1em
|
||||
padding-right: 1em
|
||||
white-space: nowrap
|
||||
|
||||
.file-cta
|
||||
background-color: $file-cta-background-color
|
||||
color: $file-cta-color
|
||||
|
||||
.file-path
|
||||
border-color: $file-path-border-color
|
||||
border-style: $file-path-border-style
|
||||
border-width: $file-path-border-width
|
||||
display: block
|
||||
max-width: $file-path-max-width
|
||||
overflow: hidden
|
||||
text-align: left
|
||||
text-overflow: ellipsis
|
||||
|
||||
.file-icon
|
||||
align-items: center
|
||||
display: flex
|
||||
height: 1em
|
||||
justify-content: center
|
||||
margin-right: 0.5em
|
||||
width: 1em
|
||||
.fa
|
||||
font-size: 14px
|
||||
|
||||
.label
|
||||
color: $label-color
|
||||
display: block
|
||||
|
||||
Loading…
Reference in New Issue
Block a user