Add select

diff --git a/docs/_includes/navbar.html b/docs/_includes/navbar.html
index 11c6608a5468229f949ef198677ccafe992fffa3..2e6a55a9213651e7581b0c987e7b1005b93c81ca 100644 (file)
--- a/docs/_includes/navbar.html
+++ b/docs/_includes/navbar.html
@@ -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>

diff --git a/docs/css/bulma-docs.css b/docs/css/bulma-docs.css
index 1b65a8e82ec7a58d4936fd06ec4ba0368268dec8..f5622b0dcfb3a36a20dd563d8947d273ba657ec1 100644 (file)
--- a/docs/css/bulma-docs.css
+++ b/docs/css/bulma-docs.css
@@ -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;

diff --git a/docs/documentation/elements/form.html b/docs/documentation/elements/form.html
index 1048d6d09d7f7b90710f6b5cb95de30c36498bf2..ca5f36eeb00bdbe197dd3115ce6b3d814bc67e87 100644 (file)
--- a/docs/documentation/elements/form.html
+++ b/docs/documentation/elements/form.html
@@ -1029,16 +1029,15 @@ doc-subtab: form
 
     <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>
+        <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">

diff --git a/docs/documentation/form/general.html b/docs/documentation/form/general.html
index a99f81ec428221c4896963b161e6d0f3a20ecc20..a42326f49e12ca61ebf8f1157a7949347c4566d6 100644 (file)
--- a/docs/documentation/form/general.html
+++ b/docs/documentation/form/general.html
@@ -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>
 

diff --git a/docs/documentation/form/select.html b/docs/documentation/form/select.html
new file mode 100644 (file)
index 0000000..21edefa
--- /dev/null
+++ b/docs/documentation/form/select.html
@@ -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>

diff --git a/sass/elements/form.sass b/sass/elements/form.sass
index 4f07443531a7103230755851331ec0716861d20e..aa2dcb68e08e940e9cab17b608792df3b91a8175 100644 (file)
--- a/sass/elements/form.sass
+++ b/sass/elements/form.sass
@@ -97,16 +97,17 @@ $input-radius:              $radius !default
 
 .select
   display: inline-block
-  height: 2.25em
   max-width: 100%
   position: relative
   vertical-align: top
-  &:after
-    +arrow($input-arrow)
-    margin-top: -0.375em
-    right: 1.125em
-    top: 50%
-    z-index: 4
+  &:not(.is-multiple)
+    height: 2.25em
+    &::after
+      +arrow($input-arrow)
+      margin-top: -0.375em
+      right: 1.125em
+      top: 50%
+      z-index: 4
   select
     +input
     cursor: pointer
@@ -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