library-mirrors/bulma
1
0
Fork 0
mirror of https://github.com/jgthms/bulma.git synced 2025-01-09 15:44:25 +00:00
Code Issues Actions Packages Projects Releases Wiki Activity

Fix #702

Browse Source
This commit is contained in:
Jeremy Thomas 2017-05-27 21:02:31 +01:00
parent 34dd736075
commit 73df49af54
4 changed files with 56 additions and 9 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

1
CHANGELOG.md
View File

@ -4,6 +4,7 @@
* Fix #728 selected row on striped table * Fix #728 selected row on striped table
* Fix #747 remove flex-shrink for is-expanded * Fix #747 remove flex-shrink for is-expanded
* Fix #702 add icons support for select dropdown
## 0.4.1 ## 0.4.1

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

@ -2458,19 +2458,27 @@ input[type="submit"].button {
padding-right: 2.25em; padding-right: 2.25em;
} }
.control.has-icons-left .input:focus ~ .icon, .control.has-icons-right .input:focus ~ .icon { .control.has-icons-left .input:focus ~ .icon,
.control.has-icons-left .select select:focus ~ .icon, .control.has-icons-right .input:focus ~ .icon,
.control.has-icons-right .select select:focus ~ .icon {
color: #7a7a7a; color: #7a7a7a;
} }
.control.has-icons-left .input.is-small ~ .icon, .control.has-icons-right .input.is-small ~ .icon { .control.has-icons-left .input.is-small ~ .icon,
.control.has-icons-left .select select.is-small ~ .icon, .control.has-icons-right .input.is-small ~ .icon,
.control.has-icons-right .select select.is-small ~ .icon {
font-size: 0.75rem; font-size: 0.75rem;
} }
.control.has-icons-left .input.is-medium ~ .icon, .control.has-icons-right .input.is-medium ~ .icon { .control.has-icons-left .input.is-medium ~ .icon,
.control.has-icons-left .select select.is-medium ~ .icon, .control.has-icons-right .input.is-medium ~ .icon,
.control.has-icons-right .select select.is-medium ~ .icon {
font-size: 1.25rem; font-size: 1.25rem;
} }
.control.has-icons-left .input.is-large ~ .icon, .control.has-icons-right .input.is-large ~ .icon { .control.has-icons-left .input.is-large ~ .icon,
.control.has-icons-left .select select.is-large ~ .icon, .control.has-icons-right .input.is-large ~ .icon,
.control.has-icons-right .select select.is-large ~ .icon {
font-size: 1.5rem; font-size: 1.5rem;
} }
@ -2484,7 +2492,8 @@ input[type="submit"].button {
z-index: 4; z-index: 4;
} }
.control.has-icons-left .input { .control.has-icons-left .input,
.control.has-icons-left .select select {
padding-left: 2.25em; padding-left: 2.25em;
} }
@ -2492,7 +2501,8 @@ input[type="submit"].button {
left: 0; left: 0;
} }
.control.has-icons-right .input { .control.has-icons-right .input,
.control.has-icons-right .select select {
padding-right: 2.25em; padding-right: 2.25em;
} }

33
docs/documentation/elements/form.html
View File

@ -476,11 +476,44 @@ doc-subtab: form
</div> </div>
</div> </div>
{% capture select_icons_example %}
<div class="field">
<p class="control has-icons-left">
<span class="select">
<select>
<option selected>Country</option>
<option>Select dropdown</option>
<option>With options</option>
</select>
</span>
<span class="icon is-small is-left">
<i class="fa fa-globe"></i>
</span>
</p>
</div>
{% endcapture %}
<div class="columns">
<div class="column is-half">
<div class="content"> <div class="content">
<p> <p>
<span class="tag is-success">New!</span> <span class="tag is-success">New!</span>
<span class="tag is-info">0.4.2</span> <span class="tag is-info">0.4.2</span>
</p> </p>
<p>
You can now append icons to <strong>select dropdowns</strong> as well.
</p>
</div>
{{select_icons_example}}
</div>
<div class="column is-half">
{% highlight html %}
{{select_icons_example}}
{% endhighlight %}
</div>
</div>
<div class="content">
<p> <p>
If the control contains an icon, Bulma will make sure the icon remains <strong>centered</strong>, no matter the size of the input <em>or</em> of the icon. If the control contains an icon, Bulma will make sure the icon remains <strong>centered</strong>, no matter the size of the input <em>or</em> of the icon.
</p> </p>

9
sass/elements/form.sass
View File

@ -321,7 +321,8 @@ $input-radius: $radius !default
padding-right: 2.25em padding-right: 2.25em
&.has-icons-left, &.has-icons-left,
&.has-icons-right &.has-icons-right
.input .input,
.select select
&:focus &:focus
& ~ .icon & ~ .icon
color: $input-icon-active color: $input-icon-active
@ -340,12 +341,14 @@ $input-radius: $radius !default
width: 2.25em width: 2.25em
z-index: 4 z-index: 4
&.has-icons-left &.has-icons-left
.input .input,
.select select
padding-left: 2.25em padding-left: 2.25em
.icon.is-left .icon.is-left
left: 0 left: 0
&.has-icons-right &.has-icons-right
.input .input,
.select select
padding-right: 2.25em padding-right: 2.25em
.icon.is-right .icon.is-right
right: 0 right: 0