library-mirrors/bulma
1
0
Fork 0
mirror of https://github.com/jgthms/bulma.git synced 2024-11-28 12:24:23 +00:00
Code Issues Actions 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
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

31
docs/css/bulma-docs.css
View File

@ -2888,6 +2888,25 @@ a.box:active {
border-width: 0 1px 1px;
}
.file.is-right .file-cta {
border-radius: 0 3px 3px 0;
}
.file.is-right .file-name {
border-radius: 3px 0 0 3px;
border-width: 1px 0 1px 1px;
order: -1;
}
.file.is-fullwidth .file-label {
width: 100%;
}
.file.is-fullwidth .file-name {
flex-grow: 1;
max-width: none;
}
.file-label {
align-items: stretch;
display: flex;
@ -2898,21 +2917,21 @@ a.box:active {
}
.file-label:hover .file-cta {
background-color: #eeeeee;
background-color: #ff2b56;
color: #363636;
}
.file-label:hover .file-name {
border-color: #eeeeee;
border-color: #ff2b56;
}
.file-label:active .file-cta {
background-color: #e8e8e8;
background-color: #ff1f4b;
color: #363636;
}
.file-label:active .file-name {
border-color: #e8e8e8;
border-color: #ff1f4b;
}
.file-input {
@ -2965,12 +2984,12 @@ a.box:active {
}
.file-cta {
background-color: whitesmoke;
background-color: #ff3860;
color: #4a4a4a;
}
.file-name {
border-color: whitesmoke;
border-color: #ff3860;
border-style: solid;
border-width: 1px 1px 1px 0;
display: block;

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">

15
sass/elements/form.sass
View File

@ -23,7 +23,7 @@ $input-radius: $radius !default
$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
@ -278,6 +278,19 @@ $help-size: $size-small !default
.file-name
border-radius: 0 0 $file-radius $file-radius
border-width: 0 1px 1px
&.is-right
.file-cta
border-radius: 0 $file-radius $file-radius 0
.file-name
border-radius: $file-radius 0 0 $file-radius
border-width: 1px 0 1px 1px
order: -1
&.is-fullwidth
.file-label
width: 100%
.file-name
flex-grow: 1
max-width: none
.file-label
align-items: stretch