mirror of
https://github.com/jgthms/bulma.git
synced 2024-11-14 11:14:24 +00:00
Add select
This commit is contained in:
Jeremy Thomas
parent
cbff2d4f60
commit
fcca456bac
@ -42,6 +42,9 @@
|
||||
<a class="navbar-item {% if page.doc-tab == 'grid' %}is-active{% endif %}" href="{{ site.url }}/documentation/grid/columns/">
|
||||
Grid
|
||||
</a>
|
||||
<a class="navbar-item {% if page.doc-tab == 'form' %}is-active{% endif %}" href="{{ site.url }}/documentation/form/general/">
|
||||
Form
|
||||
</a>
|
||||
<a class="navbar-item {% if page.doc-tab == 'elements' %}is-active{% endif %}" href="{{ site.url }}/documentation/elements/box/">
|
||||
Elements
|
||||
</a>
|
||||
|
||||
@ -2010,13 +2010,16 @@ input[type="submit"].button {
|
||||
|
||||
.select {
|
||||
display: inline-block;
|
||||
height: 2.25em;
|
||||
max-width: 100%;
|
||||
position: relative;
|
||||
vertical-align: top;
|
||||
}
|
||||
|
||||
.select:after {
|
||||
.select:not(.is-multiple) {
|
||||
height: 2.25em;
|
||||
}
|
||||
|
||||
.select:not(.is-multiple)::after {
|
||||
border: 1px solid #00d1b2;
|
||||
border-right: 0;
|
||||
border-top: 0;
|
||||
@ -2059,7 +2062,6 @@ input[type="submit"].button {
|
||||
font-size: 1em;
|
||||
max-width: 100%;
|
||||
outline: none;
|
||||
padding-right: 2.5em;
|
||||
}
|
||||
|
||||
.select select:focus, .select select.is-focused, .select select:active, .select select.is-active {
|
||||
@ -2105,6 +2107,10 @@ input[type="submit"].button {
|
||||
border-color: #b5b5b5;
|
||||
}
|
||||
|
||||
.select select:focus, .select select.is-focused, .select select:active, .select select.is-active {
|
||||
border-color: #00d1b2;
|
||||
}
|
||||
|
||||
.select select::-ms-expand {
|
||||
display: none;
|
||||
}
|
||||
@ -2113,7 +2119,20 @@ input[type="submit"].button {
|
||||
border-color: whitesmoke;
|
||||
}
|
||||
|
||||
.select:hover:after {
|
||||
.select select:not([multiple]) {
|
||||
padding-right: 2.5em;
|
||||
}
|
||||
|
||||
.select select[multiple] {
|
||||
height: unset;
|
||||
padding: 0;
|
||||
}
|
||||
|
||||
.select select[multiple] option {
|
||||
padding: 0.5em 1em;
|
||||
}
|
||||
|
||||
.select:hover::after {
|
||||
border-color: #363636;
|
||||
}
|
||||
|
||||
@ -2166,7 +2185,7 @@ input[type="submit"].button {
|
||||
font-size: 1.5rem;
|
||||
}
|
||||
|
||||
.select.is-disabled:after {
|
||||
.select.is-disabled::after {
|
||||
border-color: #7a7a7a;
|
||||
}
|
||||
|
||||
@ -2178,7 +2197,7 @@ input[type="submit"].button {
|
||||
width: 100%;
|
||||
}
|
||||
|
||||
.select.is-loading:after {
|
||||
.select.is-loading::after {
|
||||
animation: spinAround 500ms infinite linear;
|
||||
border: 2px solid #dbdbdb;
|
||||
border-radius: 290486px;
|
||||
@ -2497,26 +2516,26 @@ input[type="submit"].button {
|
||||
}
|
||||
|
||||
.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 {
|
||||
.control.has-icons-left .select:focus ~ .icon, .control.has-icons-right .input:focus ~ .icon,
|
||||
.control.has-icons-right .select:focus ~ .icon {
|
||||
color: #7a7a7a;
|
||||
}
|
||||
|
||||
.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 {
|
||||
.control.has-icons-left .select.is-small ~ .icon, .control.has-icons-right .input.is-small ~ .icon,
|
||||
.control.has-icons-right .select.is-small ~ .icon {
|
||||
font-size: 0.75rem;
|
||||
}
|
||||
|
||||
.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 {
|
||||
.control.has-icons-left .select.is-medium ~ .icon, .control.has-icons-right .input.is-medium ~ .icon,
|
||||
.control.has-icons-right .select.is-medium ~ .icon {
|
||||
font-size: 1.25rem;
|
||||
}
|
||||
|
||||
.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 {
|
||||
.control.has-icons-left .select.is-large ~ .icon, .control.has-icons-right .input.is-large ~ .icon,
|
||||
.control.has-icons-right .select.is-large ~ .icon {
|
||||
font-size: 1.5rem;
|
||||
}
|
||||
|
||||
@ -2548,7 +2567,7 @@ input[type="submit"].button {
|
||||
right: 0;
|
||||
}
|
||||
|
||||
.control.is-loading:after {
|
||||
.control.is-loading::after {
|
||||
animation: spinAround 500ms infinite linear;
|
||||
border: 2px solid #dbdbdb;
|
||||
border-radius: 290486px;
|
||||
|
||||
@ -1029,7 +1029,6 @@ doc-subtab: form
|
||||
|
||||
<div class="columns">
|
||||
<div class="column is-half">
|
||||
|
||||
<div class="content">
|
||||
<p>
|
||||
<span class="tag is-success">New!</span>
|
||||
|
||||
@ -43,12 +43,12 @@ doc-subtab: general
|
||||
<div class="field">
|
||||
<label class="label">Subject</label>
|
||||
<div class="control">
|
||||
<span class="select">
|
||||
<div class="select">
|
||||
<select>
|
||||
<option>Select dropdown</option>
|
||||
<option>With options</option>
|
||||
</select>
|
||||
</span>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
|
||||
453
docs/documentation/form/select.html
Normal file
453
docs/documentation/form/select.html
Normal file
@ -0,0 +1,453 @@
|
||||
---
|
||||
layout: documentation
|
||||
doc-tab: form
|
||||
doc-subtab: select
|
||||
---
|
||||
|
||||
{% capture select_example %}
|
||||
<div class="select">
|
||||
<select>
|
||||
<option>Select dropdown</option>
|
||||
<option>With options</option>
|
||||
</select>
|
||||
</div>
|
||||
{% endcapture %}
|
||||
|
||||
{% capture select_multiple_example %}
|
||||
<div class="select is-multiple">
|
||||
<select multiple size="8">
|
||||
<option value="Argentina">Argentina</option>
|
||||
<option value="Bolivia">Bolivia</option>
|
||||
<option value="Brazil">Brazil</option>
|
||||
<option value="Chile">Chile</option>
|
||||
<option value="Colombia">Colombia</option>
|
||||
<option value="Ecuador">Ecuador</option>
|
||||
<option value="Guyana">Guyana</option>
|
||||
<option value="Paraguay">Paraguay</option>
|
||||
<option value="Peru">Peru</option>
|
||||
<option value="Suriname">Suriname</option>
|
||||
<option value="Uruguay">Uruguay</option>
|
||||
<option value="Venezuela">Venezuela</option>
|
||||
</select>
|
||||
</div>
|
||||
{% endcapture %}
|
||||
|
||||
{% capture colors_example %}
|
||||
<div class="field">
|
||||
<div class="control">
|
||||
<div class="select is-primary">
|
||||
<select>
|
||||
<option>Select dropdown</option>
|
||||
<option>With options</option>
|
||||
</select>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="field">
|
||||
<div class="control">
|
||||
<div class="select is-info">
|
||||
<select>
|
||||
<option>Select dropdown</option>
|
||||
<option>With options</option>
|
||||
</select>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="field">
|
||||
<div class="control">
|
||||
<div class="select is-success">
|
||||
<select>
|
||||
<option>Select dropdown</option>
|
||||
<option>With options</option>
|
||||
</select>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="field">
|
||||
<div class="control">
|
||||
<div class="select is-warning">
|
||||
<select>
|
||||
<option>Select dropdown</option>
|
||||
<option>With options</option>
|
||||
</select>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="field">
|
||||
<div class="control">
|
||||
<div class="select is-danger">
|
||||
<select>
|
||||
<option>Select dropdown</option>
|
||||
<option>With options</option>
|
||||
</select>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
{% endcapture %}
|
||||
|
||||
{% capture sizes_example %}
|
||||
<div class="field">
|
||||
<div class="control">
|
||||
<div class="select is-small">
|
||||
<select>
|
||||
<option>Select dropdown</option>
|
||||
<option>With options</option>
|
||||
</select>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="field">
|
||||
<div class="control">
|
||||
<div class="select">
|
||||
<select>
|
||||
<option>Select dropdown</option>
|
||||
<option>With options</option>
|
||||
</select>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="field">
|
||||
<div class="control">
|
||||
<div class="select is-medium">
|
||||
<select>
|
||||
<option>Select dropdown</option>
|
||||
<option>With options</option>
|
||||
</select>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="field">
|
||||
<div class="control">
|
||||
<div class="select is-large">
|
||||
<select>
|
||||
<option>Select dropdown</option>
|
||||
<option>With options</option>
|
||||
</select>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
{% endcapture %}
|
||||
|
||||
{% capture normal_example %}
|
||||
<div class="control">
|
||||
<div class="select">
|
||||
<select>
|
||||
<option>Select dropdown</option>
|
||||
<option>With options</option>
|
||||
</select>
|
||||
</div>
|
||||
</div>
|
||||
{% endcapture %}
|
||||
|
||||
{% capture hover_example %}
|
||||
<div class="control">
|
||||
<div class="select">
|
||||
<select class="is-hovered">
|
||||
<option>Select dropdown</option>
|
||||
<option>With options</option>
|
||||
</select>
|
||||
</div>
|
||||
</div>
|
||||
{% endcapture %}
|
||||
|
||||
{% capture focus_example %}
|
||||
<div class="control">
|
||||
<div class="select">
|
||||
<select class="is-focused">
|
||||
<option>Select dropdown</option>
|
||||
<option>With options</option>
|
||||
</select>
|
||||
</div>
|
||||
</div>
|
||||
{% endcapture %}
|
||||
|
||||
{% capture loading_example %}
|
||||
<div class="control">
|
||||
<div class="select is-loading">
|
||||
<select>
|
||||
<option>Select dropdown</option>
|
||||
<option>With options</option>
|
||||
</select>
|
||||
</div>
|
||||
</div>
|
||||
{% endcapture %}
|
||||
|
||||
{% capture disabled_example %}
|
||||
<div class="control">
|
||||
<div class="select is-disabled">
|
||||
<select disabled>
|
||||
<option>Select dropdown</option>
|
||||
<option>With options</option>
|
||||
</select>
|
||||
</div>
|
||||
</div>
|
||||
{% endcapture %}
|
||||
|
||||
{% capture icons_example %}
|
||||
<div class="field">
|
||||
<div class="control has-icons-left">
|
||||
<div class="select">
|
||||
<select>
|
||||
<option selected>Country</option>
|
||||
<option>Select dropdown</option>
|
||||
<option>With options</option>
|
||||
</select>
|
||||
</div>
|
||||
<div class="icon is-small is-left">
|
||||
<i class="fa fa-globe"></i>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
{% endcapture %}
|
||||
|
||||
{% capture has_icons_small_example %}
|
||||
<div class="control has-icons-left">
|
||||
<div class="select is-small">
|
||||
<select>
|
||||
<option selected>Country</option>
|
||||
<option>Select dropdown</option>
|
||||
<option>With options</option>
|
||||
</select>
|
||||
</div>
|
||||
<span class="icon is-small is-left">
|
||||
<i class="fa fa-envelope"></i>
|
||||
</span>
|
||||
</div>
|
||||
{% endcapture %}
|
||||
|
||||
{% capture has_icons_normal_example %}
|
||||
<div class="control has-icons-left">
|
||||
<div class="select">
|
||||
<select>
|
||||
<option selected>Country</option>
|
||||
<option>Select dropdown</option>
|
||||
<option>With options</option>
|
||||
</select>
|
||||
</div>
|
||||
<span class="icon is-left">
|
||||
<i class="fa fa-envelope"></i>
|
||||
</span>
|
||||
</div>
|
||||
{% endcapture %}
|
||||
|
||||
{% capture has_icons_medium_example %}
|
||||
<div class="control has-icons-left">
|
||||
<div class="select is-medium">
|
||||
<select>
|
||||
<option selected>Country</option>
|
||||
<option>Select dropdown</option>
|
||||
<option>With options</option>
|
||||
</select>
|
||||
</div>
|
||||
<span class="icon is-medium is-left">
|
||||
<i class="fa fa-envelope"></i>
|
||||
</span>
|
||||
</div>
|
||||
{% endcapture %}
|
||||
|
||||
{% capture has_icons_large_example %}
|
||||
<div class="control has-icons-left">
|
||||
<div class="select is-large">
|
||||
<select>
|
||||
<option selected>Country</option>
|
||||
<option>Select dropdown</option>
|
||||
<option>With options</option>
|
||||
</select>
|
||||
</div>
|
||||
<span class="icon is-large is-left">
|
||||
<i class="fa fa-envelope"></i>
|
||||
</span>
|
||||
</div>
|
||||
{% endcapture %}
|
||||
|
||||
{% include subnav-form.html %}
|
||||
|
||||
<section class="section">
|
||||
<div class="container">
|
||||
<h1 class="title">Select</h1>
|
||||
<h2 class="subtitle">
|
||||
The browser built-in <strong>select dropdown</strong>, styled accordingly
|
||||
</h2>
|
||||
|
||||
<hr>
|
||||
|
||||
<div class="content">
|
||||
<p>The following <strong>modifiers</strong> are supported:</p>
|
||||
<ul>
|
||||
<li>the <strong><a href="#select-color">color</a></strong></li>
|
||||
<li>the <strong><a href="#select-size">size</a></strong></li>
|
||||
<li>the <strong><a href="#select-state">state</a></strong></li>
|
||||
</ul>
|
||||
</div>
|
||||
|
||||
<div class="columns">
|
||||
<div class="column is-half">
|
||||
{{select_example}}
|
||||
</div>
|
||||
<div class="column is-half highlight-full">
|
||||
{% highlight html %}{{select_example}}{% endhighlight %}
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{% if site.vernum >= 42 %}
|
||||
<hr>
|
||||
|
||||
<h3 class="title">Multiple select</h3>
|
||||
|
||||
<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.4</span>
|
||||
</p>
|
||||
<p>
|
||||
You can style a <strong>multiple select</strong> dropdown, by using the <code>is-multiple</code> modifier, and by using the <code>multiple</code> HTML attribute.
|
||||
</p>
|
||||
</div>
|
||||
{{select_multiple_example}}
|
||||
</div>
|
||||
<div class="column is-half highlight-full">
|
||||
{% highlight html %}{{select_multiple_example}}{% endhighlight %}
|
||||
</div>
|
||||
</div>
|
||||
{% endif %}
|
||||
|
||||
<hr>
|
||||
|
||||
<h3 id="select-color" class="title">Colors</h3>
|
||||
|
||||
<div class="columns">
|
||||
<div class="column is-half">
|
||||
{{colors_example}}
|
||||
</div>
|
||||
<div class="column is-half highlight-full">
|
||||
{% highlight html %}{{colors_example}}{% endhighlight %}
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<hr>
|
||||
<h3 id="select-size" class="title">Sizes</h3>
|
||||
<div class="columns">
|
||||
<div class="column is-half">
|
||||
{{sizes_example}}
|
||||
</div>
|
||||
<div class="column is-half">
|
||||
{% highlight html %}{{sizes_example}}{% endhighlight %}
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<hr>
|
||||
|
||||
<h3 id="select-state" class="title">States</h3>
|
||||
<h4 class="subtitle">Normal</h4>
|
||||
<div class="columns">
|
||||
<div class="column is-half">
|
||||
{{normal_example}}
|
||||
</div>
|
||||
<div class="column is-half">
|
||||
{% highlight html %}{{normal_example}}{% endhighlight %}
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<h4 class="subtitle">Hover</h4>
|
||||
<div class="columns">
|
||||
<div class="column is-half">
|
||||
{{hover_example}}
|
||||
</div>
|
||||
<div class="column is-half">
|
||||
{% highlight html %}{{hover_example}}{% endhighlight %}
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<h4 class="subtitle">Focus</h4>
|
||||
<div class="columns">
|
||||
<div class="column is-half">
|
||||
{{focus_example}}
|
||||
</div>
|
||||
<div class="column is-half">
|
||||
{% highlight html %}{{focus_example}}{% endhighlight %}
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<h4 class="subtitle">Loading</h4>
|
||||
<div class="columns">
|
||||
<div class="column is-half">
|
||||
{{loading_example}}
|
||||
</div>
|
||||
<div class="column is-half">
|
||||
{% highlight html %}{{loading_example}}{% endhighlight %}
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- Font Awesome Icons -->
|
||||
<hr>
|
||||
|
||||
<h3 id="input-with-icons" class="title">With icons</h3>
|
||||
<div class="content">
|
||||
<p>You can append the <strong>modifier</strong> on a control:</p>
|
||||
<ul>
|
||||
<li>
|
||||
<code>has-icons-left</code>
|
||||
</li>
|
||||
</ul>
|
||||
<p>You also need to add a modifier on the <strong>icon</strong>:</p>
|
||||
<ul>
|
||||
<li>
|
||||
<code>icon is-left</code> since <code>has-icons-left</code> is used
|
||||
</li>
|
||||
</ul>
|
||||
<p>The size of the <strong>select</strong> will define the size of the icon container.</p>
|
||||
</div>
|
||||
<div class="columns">
|
||||
<div class="column is-half">
|
||||
{{icons_example}}
|
||||
</div>
|
||||
<div class="column is-half">
|
||||
{% highlight html %}{{icons_example}}{% endhighlight %}
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="columns">
|
||||
<div class="column is-half">
|
||||
<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>
|
||||
</div>
|
||||
{{has_icons_small_example}}
|
||||
</div>
|
||||
<div class="column is-half">
|
||||
{% highlight html %}{{has_icons_small_example}}{% endhighlight %}
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="columns">
|
||||
<div class="column is-half">
|
||||
{{has_icons_normal_example}}
|
||||
</div>
|
||||
<div class="column is-half">
|
||||
{% highlight html %}{{has_icons_normal_example}}{% endhighlight %}
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="columns">
|
||||
<div class="column is-half">
|
||||
{{has_icons_medium_example}}
|
||||
</div>
|
||||
<div class="column is-half">
|
||||
{% highlight html %}{{has_icons_medium_example}}{% endhighlight %}
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="columns">
|
||||
<div class="column is-half">
|
||||
{{has_icons_large_example}}
|
||||
</div>
|
||||
<div class="column is-half">
|
||||
{% highlight html %}{{has_icons_large_example}}{% endhighlight %}
|
||||
</div>
|
||||
</div>
|
||||
|
||||
</div>
|
||||
</section>
|
||||
@ -97,11 +97,12 @@ $input-radius: $radius !default
|
||||
|
||||
.select
|
||||
display: inline-block
|
||||
height: 2.25em
|
||||
max-width: 100%
|
||||
position: relative
|
||||
vertical-align: top
|
||||
&:after
|
||||
&:not(.is-multiple)
|
||||
height: 2.25em
|
||||
&::after
|
||||
+arrow($input-arrow)
|
||||
margin-top: -0.375em
|
||||
right: 1.125em
|
||||
@ -114,16 +115,27 @@ $input-radius: $radius !default
|
||||
font-size: 1em
|
||||
max-width: 100%
|
||||
outline: none
|
||||
padding-right: 2.5em
|
||||
&:hover
|
||||
border-color: $input-hover-border
|
||||
&:focus,
|
||||
&.is-focused,
|
||||
&:active,
|
||||
&.is-active
|
||||
border-color: $input-focus-border
|
||||
&::-ms-expand
|
||||
display: none
|
||||
&[disabled]:hover
|
||||
border-color: $input-disabled-border
|
||||
&:not([multiple])
|
||||
padding-right: 2.5em
|
||||
&[multiple]
|
||||
height: unset
|
||||
padding: 0
|
||||
option
|
||||
padding: 0.5em 1em
|
||||
// States
|
||||
&:hover
|
||||
&:after
|
||||
&::after
|
||||
border-color: $input-hover
|
||||
// Colors
|
||||
@each $name, $pair in $colors
|
||||
@ -139,14 +151,14 @@ $input-radius: $radius !default
|
||||
+control-large
|
||||
// Modifiers
|
||||
&.is-disabled
|
||||
&:after
|
||||
&::after
|
||||
border-color: $input-disabled
|
||||
&.is-fullwidth
|
||||
width: 100%
|
||||
select
|
||||
width: 100%
|
||||
&.is-loading
|
||||
&:after
|
||||
&::after
|
||||
+loader
|
||||
margin-top: 0
|
||||
position: absolute
|
||||
@ -332,7 +344,7 @@ $input-radius: $radius !default
|
||||
&.has-icons-left,
|
||||
&.has-icons-right
|
||||
.input,
|
||||
.select select
|
||||
.select
|
||||
&:focus
|
||||
& ~ .icon
|
||||
color: $input-icon-active
|
||||
@ -363,7 +375,7 @@ $input-radius: $radius !default
|
||||
.icon.is-right
|
||||
right: 0
|
||||
&.is-loading
|
||||
&:after
|
||||
&::after
|
||||
+loader
|
||||
position: absolute !important
|
||||
right: 0.625em
|
||||
|
||||
Loading…
Reference in New Issue
Block a user