Add has-icon sizes

CHANGELOG.md

@@ -1,5 +1,11 @@
 # Bulma Changelog
 
+## 0.0.20
+
+### Added
+
+* `.has-icon` support for different `.input` sizes
+
 ## 0.0.19
 
 ### NEW!!!

bulma/elements/controls.sass

@@ -207,25 +207,58 @@
       justify-content: flex-end
   &.has-icon
     & > .fa
-      +fa(14px, 16px)
+      +fa(14px, 24px)
       color: $text-light
       pointer-events: none
       position: absolute
-      top: 8px
+      top: 4px
       z-index: 4
     .input
       &:focus + .fa
         color: $text-strong
+      &.is-small + .fa
+        font-size: 10.5px
+        top: 0
+      &.is-medium + .fa
+        font-size: 21px
+        top: 8px
+      &.is-large + .fa
+        font-size: 21px
+        top: 12px
     &:not(.has-icon-right)
       & > .fa
-        left: 8px
+        left: 4px
       .input
         padding-left: 32px
+        &.is-small
+          padding-left: 24px
+          & + .fa
+            left: 0
+        &.is-medium
+          padding-left: 40px
+          & + .fa
+            left: 8px
+        &.is-large
+          padding-left: 48px
+          & + .fa
+            left: 12px
     &.has-icon-right
       & > .fa
-        right: 8px
+        right: 4px
       .input
         padding-right: 32px
+        &.is-small
+          padding-right: 24px
+          & + .fa
+            right: 0
+        &.is-medium
+          padding-right: 40px
+          & + .fa
+            right: 8px
+        &.is-large
+          padding-right: 48px
+          & + .fa
+            right: 12px
   &.is-grouped
     display: flex
     justify-content: flex-start

css/bulma.css

@@ -1190,15 +1190,15 @@ table th {
 .control.has-icon > .fa {
   display: inline-block;
   font-size: 14px;
-  height: 16px;
-  line-height: 16px;
+  height: 24px;
+  line-height: 24px;
   text-align: center;
   vertical-align: top;
-  width: 16px;
+  width: 24px;
   color: #aeb1b5;
   pointer-events: none;
   position: absolute;
-  top: 8px;
+  top: 4px;
   z-index: 4;
 }
 
@@ -1206,22 +1206,85 @@ table th {
   color: #222324;
 }
 
+.control.has-icon .input.is-small + .fa, .control.has-icon .is-small.textarea + .fa {
+  font-size: 10.5px;
+  top: 0;
+}
+
+.control.has-icon .input.is-medium + .fa, .control.has-icon .is-medium.textarea + .fa {
+  font-size: 21px;
+  top: 8px;
+}
+
+.control.has-icon .input.is-large + .fa, .control.has-icon .is-large.textarea + .fa {
+  font-size: 21px;
+  top: 12px;
+}
+
 .control.has-icon:not(.has-icon-right) > .fa {
-  left: 8px;
+  left: 4px;
 }
 
 .control.has-icon:not(.has-icon-right) .input, .control.has-icon:not(.has-icon-right) .textarea {
   padding-left: 32px;
 }
 
+.control.has-icon:not(.has-icon-right) .input.is-small, .control.has-icon:not(.has-icon-right) .is-small.textarea {
+  padding-left: 24px;
+}
+
+.control.has-icon:not(.has-icon-right) .input.is-small + .fa, .control.has-icon:not(.has-icon-right) .is-small.textarea + .fa {
+  left: 0;
+}
+
+.control.has-icon:not(.has-icon-right) .input.is-medium, .control.has-icon:not(.has-icon-right) .is-medium.textarea {
+  padding-left: 40px;
+}
+
+.control.has-icon:not(.has-icon-right) .input.is-medium + .fa, .control.has-icon:not(.has-icon-right) .is-medium.textarea + .fa {
+  left: 8px;
+}
+
+.control.has-icon:not(.has-icon-right) .input.is-large, .control.has-icon:not(.has-icon-right) .is-large.textarea {
+  padding-left: 48px;
+}
+
+.control.has-icon:not(.has-icon-right) .input.is-large + .fa, .control.has-icon:not(.has-icon-right) .is-large.textarea + .fa {
+  left: 12px;
+}
+
 .control.has-icon.has-icon-right > .fa {
-  right: 8px;
+  right: 4px;
 }
 
 .control.has-icon.has-icon-right .input, .control.has-icon.has-icon-right .textarea {
   padding-right: 32px;
 }
 
+.control.has-icon.has-icon-right .input.is-small, .control.has-icon.has-icon-right .is-small.textarea {
+  padding-right: 24px;
+}
+
+.control.has-icon.has-icon-right .input.is-small + .fa, .control.has-icon.has-icon-right .is-small.textarea + .fa {
+  right: 0;
+}
+
+.control.has-icon.has-icon-right .input.is-medium, .control.has-icon.has-icon-right .is-medium.textarea {
+  padding-right: 40px;
+}
+
+.control.has-icon.has-icon-right .input.is-medium + .fa, .control.has-icon.has-icon-right .is-medium.textarea + .fa {
+  right: 8px;
+}
+
+.control.has-icon.has-icon-right .input.is-large, .control.has-icon.has-icon-right .is-large.textarea {
+  padding-right: 48px;
+}
+
+.control.has-icon.has-icon-right .input.is-large + .fa, .control.has-icon.has-icon-right .is-large.textarea + .fa {
+  right: 12px;
+}
+
 .control.is-grouped {
   display: -webkit-box;
   display: -webkit-flex;