Ark/bulma
1
0
Fork 0
mirror of https://github.com/jgthms/bulma synced 2026-03-17 10:54:29 -07:00
Code Issues 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 d355c923e5
commit bb396b069f
4 changed files with 56 additions and 9 deletions
Download Patch File Download Diff File Expand all files Collapse all files

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

@@ -2458,19 +2458,27 @@ input[type="submit"].button {
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;
}
.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;
}
.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;
}
.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;
}
@@ -2484,7 +2492,8 @@ input[type="submit"].button {
z-index: 4;
}
.control.has-icons-left .input {
.control.has-icons-left .input,
.control.has-icons-left .select select {
padding-left: 2.25em;
}
@@ -2492,7 +2501,8 @@ input[type="submit"].button {
left: 0;
}
.control.has-icons-right .input {
.control.has-icons-right .input,
.control.has-icons-right .select select {
padding-right: 2.25em;
}

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

@@ -476,11 +476,44 @@ doc-subtab: form
</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">
<p>
<span class="tag is-success">New!</span>
<span class="tag is-info">0.4.2</span>
</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>
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>