Add has-icons modifier

diff --git a/docs/css/bulma-docs.css b/docs/css/bulma-docs.css
index 588adb904266100f66a96e0d770e93eee267c572..ff8dc59df92bb8504f45d2c6d308695bbad03101 100644 (file)
--- a/docs/css/bulma-docs.css
+++ b/docs/css/bulma-docs.css
@@ -2185,6 +2185,18 @@ input[type="submit"].button {
   margin-bottom: 0.5em;
 }
 
+.label.is-small {
+  font-size: 0.75rem;
+}
+
+.label.is-medium {
+  font-size: 1.25rem;
+}
+
+.label.is-large {
+  font-size: 1.5rem;
+}
+
 .help {
   display: block;
   font-size: 0.75rem;
@@ -2445,6 +2457,48 @@ input[type="submit"].button {
   padding-right: 2.25em;
 }
 
+.control.has-icons-left .input:focus ~ .icon, .control.has-icons-right .input:focus ~ .icon {
+  color: #7a7a7a;
+}
+
+.control.has-icons-left .input.is-small ~ .icon, .control.has-icons-right .input.is-small ~ .icon {
+  font-size: 0.75rem;
+}
+
+.control.has-icons-left .input.is-medium ~ .icon, .control.has-icons-right .input.is-medium ~ .icon {
+  font-size: 1.25rem;
+}
+
+.control.has-icons-left .input.is-large ~ .icon, .control.has-icons-right .input.is-large ~ .icon {
+  font-size: 1.5rem;
+}
+
+.control.has-icons-left .icon, .control.has-icons-right .icon {
+  color: #dbdbdb;
+  height: 2.25em;
+  pointer-events: none;
+  position: absolute;
+  top: 0;
+  width: 2.25em;
+  z-index: 4;
+}
+
+.control.has-icons-left .input {
+  padding-left: 2.25em;
+}
+
+.control.has-icons-left .icon.is-left {
+  left: 0;
+}
+
+.control.has-icons-right .input {
+  padding-right: 2.25em;
+}
+
+.control.has-icons-right .icon.is-right {
+  right: 0;
+}
+
 .control.is-loading:after {
   animation: spinAround 500ms infinite linear;
   border: 2px solid #dbdbdb;
@@ -2852,7 +2906,6 @@ input[type="submit"].button {
   line-height: 1.5;
   padding-left: 0.875em;
   padding-right: 0.875em;
-  vertical-align: top;
   white-space: nowrap;
 }
 

diff --git a/docs/documentation/elements/form.html b/docs/documentation/elements/form.html
index 2352e8032ff6e83e4c6933f3cbf4c2cf9da19114..f22b662430a03cdea02cfbd6bf2b46455942a761 100644 (file)
--- a/docs/documentation/elements/form.html
+++ b/docs/documentation/elements/form.html
@@ -409,20 +409,44 @@ doc-subtab: form
       </div>
     </div>
 
-    <h4 class="subtitle">With Font Awesome icons</h4>
+    <!-- Font Awesome Icons -->
+    <hr>
+
+    <h3 class="title">With icons</h3>
+    <div class="content">
+      <p>You can append one of 2 <strong>modifiers</strong> on a control:</p>
+      <ul>
+        <li>
+          <code>has-icons-left</code>
+        </li>
+        <li>
+          and/or <code>has-icons-right</code>
+        </li>
+      </ul>
+      <p>You also need to add a modifier on the <strong>icon</strong>:</p>
+      <ul>
+        <li>
+          <code>icon is-left</code> if <code>has-icons-left</code> is used
+        </li>
+        <li>
+          <code>icon is-right</code> if <code>has-icons-right</code> is used
+        </li>
+      </ul>
+      <p>The size of the <strong>input</strong> will define the size of the icon container.</p>
+    </div>
 {% capture icons_example %}
 <div class="field">
-  <p class="control has-icon">
+  <p class="control has-icons-left">
     <input class="input" type="email" placeholder="Email">
-    <span class="icon is-small">
+    <span class="icon is-small is-left">
       <i class="fa fa-envelope"></i>
     </span>
   </p>
 </div>
 <div class="field">
-  <p class="control has-icon">
+  <p class="control has-icons-left">
     <input class="input" type="password" placeholder="Password">
-    <span class="icon is-small">
+    <span class="icon is-small is-left">
       <i class="fa fa-lock"></i>
     </span>
   </p>
@@ -446,148 +470,190 @@ doc-subtab: form
       </div>
     </div>
 
-{% capture icons_sizes_example %}
+    <div class="content">
+      <p>
+        <span class="tag is-success">New!</span>
+        <span class="tag is-info">0.4.2</span>
+      </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.
+      </p>
+    </div>
+
+{% capture has_icons_small_example %}
 <div class="field">
-  <p class="control has-icon">
+  <label class="label is-small">Small input</label>
+  <p class="control has-icons-left has-icons-right">
     <input class="input is-small" type="email" placeholder="Email">
-    <span class="icon is-small">
+    <span class="icon is-small is-left">
       <i class="fa fa-envelope"></i>
     </span>
+    <span class="icon is-small is-right">
+      <i class="fa fa-check"></i>
+    </span>
   </p>
 </div>
+{% endcapture %}
+
+{% capture has_icons_normal_example %}
 <div class="field">
-  <p class="control has-icon">
+  <label class="label">Normal input</label>
+  <p class="control has-icons-left has-icons-right">
     <input class="input" type="email" placeholder="Email">
-    <span class="icon is-small">
+    <span class="icon is-small is-left">
       <i class="fa fa-envelope"></i>
     </span>
+    <span class="icon is-small is-right">
+      <i class="fa fa-check"></i>
+    </span>
   </p>
 </div>
+
 <div class="field">
-  <p class="control has-icon">
+  <p class="control has-icons-left has-icons-right">
     <input class="input" type="email" placeholder="Email">
-    <span class="icon">
+    <span class="icon is-left">
       <i class="fa fa-envelope"></i>
     </span>
+    <span class="icon is-right">
+      <i class="fa fa-check"></i>
+    </span>
   </p>
 </div>
+{% endcapture %}
+
+{% capture has_icons_medium_example %}
 <div class="field">
-  <p class="control has-icon">
+  <label class="label is-medium">Medium input</label>
+  <p class="control has-icons-left has-icons-right">
     <input class="input is-medium" type="email" placeholder="Email">
-    <span class="icon is-small">
+    <span class="icon is-small is-left">
       <i class="fa fa-envelope"></i>
     </span>
+    <span class="icon is-small is-right">
+      <i class="fa fa-check"></i>
+    </span>
   </p>
 </div>
+
 <div class="field">
-  <p class="control has-icon">
+  <p class="control has-icons-left has-icons-right">
     <input class="input is-medium" type="email" placeholder="Email">
-    <span class="icon">
+    <span class="icon is-left">
       <i class="fa fa-envelope"></i>
     </span>
+    <span class="icon is-right">
+      <i class="fa fa-check"></i>
+    </span>
   </p>
 </div>
+
 <div class="field">
-  <p class="control has-icon">
+  <p class="control has-icons-left has-icons-right">
     <input class="input is-medium" type="email" placeholder="Email">
-    <span class="icon is-medium">
+    <span class="icon is-medium is-left">
       <i class="fa fa-envelope"></i>
     </span>
-  </p>
-</div>
-<div class="field">
-  <p class="control has-icon">
-    <input class="input is-large" type="email" placeholder="Email">
-    <span class="icon is-small">
-      <i class="fa fa-envelope"></i>
+    <span class="icon is-medium is-right">
+      <i class="fa fa-check"></i>
     </span>
   </p>
 </div>
+{% endcapture %}
+
+{% capture has_icons_large_example %}
 <div class="field">
-  <p class="control has-icon">
+  <label class="label is-large">Large input</label>
+  <p class="control has-icons-left has-icons-right">
     <input class="input is-large" type="email" placeholder="Email">
-    <span class="icon">
+    <span class="icon is-small is-left">
       <i class="fa fa-envelope"></i>
     </span>
+    <span class="icon is-small is-right">
+      <i class="fa fa-check"></i>
+    </span>
   </p>
 </div>
+
 <div class="field">
-  <p class="control has-icon">
+  <p class="control has-icons-left has-icons-right">
     <input class="input is-large" type="email" placeholder="Email">
-    <span class="icon is-medium">
+    <span class="icon is-left">
       <i class="fa fa-envelope"></i>
     </span>
-  </p>
-</div>
-{% endcapture %}
-<div class="columns">
-  <div class="column is-half">
-    <div class="content">
-      <p>
-        <span class="tag is-success">New!</span>
-      </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.
-      </p>
-    </div>
-    {{icons_sizes_example}}
-  </div>
-  <div class="column is-half">
-{% highlight html %}
-{{icons_sizes_example}}
-{% endhighlight %}
-  </div>
-</div>
-
-{% capture icons_sizes_right_example %}
-<div class="field">
-  <p class="control has-icon has-icon-right">
-    <input class="input is-small" type="email" placeholder="Email">
-    <span class="icon is-small">
+    <span class="icon is-right">
       <i class="fa fa-check"></i>
     </span>
   </p>
 </div>
+
 <div class="field">
-  <p class="control has-icon has-icon-right">
-    <input class="input" type="email" placeholder="Email">
-    <span class="icon">
-      <i class="fa fa-check"></i>
+  <p class="control has-icons-left has-icons-right">
+    <input class="input is-large" type="email" placeholder="Email">
+    <span class="icon is-medium is-left">
+      <i class="fa fa-envelope"></i>
     </span>
-  </p>
-</div>
-<div class="field">
-  <p class="control has-icon has-icon-right">
-    <input class="input is-medium" type="email" placeholder="Email">
-    <span class="icon is-medium">
+    <span class="icon is-medium is-right">
       <i class="fa fa-check"></i>
     </span>
   </p>
 </div>
+
 <div class="field">
-  <p class="control has-icon has-icon-right">
+  <p class="control has-icons-left has-icons-right">
     <input class="input is-large" type="email" placeholder="Email">
-    <span class="icon is-large">
+    <span class="icon is-large is-left">
+      <i class="fa fa-envelope"></i>
+    </span>
+    <span class="icon is-large is-right">
       <i class="fa fa-check"></i>
     </span>
   </p>
 </div>
 {% endcapture %}
-<div class="columns">
-  <div class="column is-half">
-    <div class="content">
-      <p>
-        By appending the <code>has-icon-right</code>, the icon will be placed on the right side instead.
-      </p>
+    <div class="columns">
+      <div class="column is-half">
+{{has_icons_small_example}}
+      </div>
+      <div class="column is-half">
+{% highlight html %}
+{{has_icons_small_example}}
+{% endhighlight %}
+      </div>
     </div>
-    {{icons_sizes_right_example}}
-  </div>
-  <div class="column is-half">
+
+    <div class="columns">
+      <div class="column is-half">
+{{has_icons_normal_example}}
+      </div>
+      <div class="column is-half">
 {% highlight html %}
-{{icons_sizes_right_example}}
+{{has_icons_normal_example}}
 {% endhighlight %}
-  </div>
-</div>
+      </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>
 
     <hr>
 

diff --git a/sass/elements/form.sass b/sass/elements/form.sass
index 63ed41b2d2779b06dfa53c09a2d9fdd507435872..21494fdb845a3b9f3d8ef5d219ed1598e9fdab19 100644 (file)
--- a/sass/elements/form.sass
+++ b/sass/elements/form.sass
@@ -159,6 +159,13 @@ $input-radius:              $radius !default
   font-weight: $weight-bold
   &:not(:last-child)
     margin-bottom: 0.5em
+  // Sizes
+  &.is-small
+    font-size: $size-small
+  &.is-medium
+    font-size: $size-medium
+  &.is-large
+    font-size: $size-large
 
 .help
   display: block
@@ -278,6 +285,7 @@ $input-radius:              $radius !default
   position: relative
   text-align: left
   // Modifiers
+  // DEPRECATED
   &.has-icon
     .icon
       color: $input-icon
@@ -310,6 +318,36 @@ $input-radius:              $radius !default
         right: 0
       .input
         padding-right: 2.25em
+  &.has-icons-left,
+  &.has-icons-right
+    .input
+      &:focus
+        & ~ .icon
+          color: $input-icon-active
+      &.is-small ~ .icon
+        font-size: $size-small
+      &.is-medium ~ .icon
+        font-size: $size-medium
+      &.is-large ~ .icon
+        font-size: $size-large
+    .icon
+      color: $input-icon
+      height: 2.25em
+      pointer-events: none
+      position: absolute
+      top: 0
+      width: 2.25em
+      z-index: 4
+  &.has-icons-left
+    .input
+      padding-left: 2.25em
+    .icon.is-left
+      left: 0
+  &.has-icons-right
+    .input
+        padding-right: 2.25em
+    .icon.is-right
+      right: 0
   &.is-loading
     &:after
       +loader

diff --git a/sass/elements/icon.sass b/sass/elements/icon.sass
index e1c3735aea2cd0196bcca3225423533edcf66edd..b23c27e0185f87248eba95814fd29006576b1622 100644 (file)
--- a/sass/elements/icon.sass
+++ b/sass/elements/icon.sass
@@ -1,5 +1,6 @@
 .icon
   align-items: center
+  // background-color: coral
   display: inline-flex
   justify-content: center
   height: 1.5rem

diff --git a/sass/elements/tag.sass b/sass/elements/tag.sass
index db940904a8102d3b39ba7cdb20eb96798077be4d..477c6622f9763a8db03590354573e5d62fee40ea 100644 (file)
--- a/sass/elements/tag.sass
+++ b/sass/elements/tag.sass
@@ -10,7 +10,6 @@
   line-height: 1.5
   padding-left: 0.875em
   padding-right: 0.875em
-  vertical-align: top
   white-space: nowrap
   .delete
     margin-left: 0.25em