Remove icon spacing logic

docs/css/bulma-docs.css

@@ -580,11 +580,13 @@ a.box:active {
   box-shadow: none;
   display: inline-flex;
   font-size: 1rem;
-  height: 2.285em;
+  height: 2.25em;
   justify-content: flex-start;
   line-height: 1.5;
-  padding-left: 0.75em;
-  padding-right: 0.75em;
+  padding-bottom: 0.375em;
+  padding-left: 0.625em;
+  padding-right: 0.625em;
+  padding-top: 0.375em;
   position: relative;
   vertical-align: top;
   -webkit-touch-callout: none;
@@ -615,58 +617,24 @@ a.box:active {
   color: inherit;
 }
 
+.button .icon, .button .icon.is-small, .button .icon.is-medium, .button .icon.is-large {
+  height: 1.5em;
+  width: 1.5em;
+}
+
 .button .icon:first-child:not(:last-child) {
-  margin-left: -0.25rem;
-  margin-right: 0.5rem;
+  margin-left: calc(-0.375em - 1px);
+  margin-right: 0.375em;
 }
 
 .button .icon:last-child:not(:first-child) {
-  margin-left: 0.5rem;
-  margin-right: -0.25rem;
+  margin-left: 0.375em;
+  margin-right: calc(-0.375em - 1px);
 }
 
 .button .icon:first-child:last-child {
-  margin-left: calc(-1px + -0.25rem);
-  margin-right: calc(-1px + -0.25rem);
-}
-
-.button .icon.is-small:first-child:not(:last-child) {
-  margin-left: 0rem;
-}
-
-.button .icon.is-small:last-child:not(:first-child) {
-  margin-right: 0rem;
-}
-
-.button .icon.is-small:first-child:last-child {
-  margin-left: calc(-1px + 0rem);
-  margin-right: calc(-1px + 0rem);
-}
-
-.button .icon.is-medium:first-child:not(:last-child) {
-  margin-left: -0.5rem;
-}
-
-.button .icon.is-medium:last-child:not(:first-child) {
-  margin-right: -0.5rem;
-}
-
-.button .icon.is-medium:first-child:last-child {
-  margin-left: calc(-1px + -0.5rem);
-  margin-right: calc(-1px + -0.5rem);
-}
-
-.button .icon.is-large:first-child:not(:last-child) {
-  margin-left: -1rem;
-}
-
-.button .icon.is-large:last-child:not(:first-child) {
-  margin-right: -1rem;
-}
-
-.button .icon.is-large:first-child:last-child {
-  margin-left: calc(-1px + -1rem);
-  margin-right: calc(-1px + -1rem);
+  margin-left: calc(-0.375em - 1px);
+  margin-right: calc(-0.375em - 1px);
 }
 
 .button:hover, .button.is-hovered {
@@ -1288,176 +1256,14 @@ a.box:active {
   font-size: 0.75rem;
 }
 
-.button.is-small .icon:first-child:not(:last-child) {
-  margin-left: -0.375rem;
-  margin-right: 0.375rem;
-}
-
-.button.is-small .icon:last-child:not(:first-child) {
-  margin-left: 0.375rem;
-  margin-right: -0.375rem;
-}
-
-.button.is-small .icon:first-child:last-child {
-  margin-left: calc(-1px + -0.375rem);
-  margin-right: calc(-1px + -0.375rem);
-}
-
-.button.is-small .icon.is-small:first-child:not(:last-child) {
-  margin-left: -0.125rem;
-}
-
-.button.is-small .icon.is-small:last-child:not(:first-child) {
-  margin-right: -0.125rem;
-}
-
-.button.is-small .icon.is-small:first-child:last-child {
-  margin-left: calc(-1px + -0.125rem);
-  margin-right: calc(-1px + -0.125rem);
-}
-
-.button.is-small .icon.is-medium:first-child:not(:last-child) {
-  margin-left: -0.625rem;
-}
-
-.button.is-small .icon.is-medium:last-child:not(:first-child) {
-  margin-right: -0.625rem;
-}
-
-.button.is-small .icon.is-medium:first-child:last-child {
-  margin-left: calc(-1px + -0.625rem);
-  margin-right: calc(-1px + -0.625rem);
-}
-
-.button.is-small .icon.is-large:first-child:not(:last-child) {
-  margin-left: -1.125rem;
-}
-
-.button.is-small .icon.is-large:last-child:not(:first-child) {
-  margin-right: -1.125rem;
-}
-
-.button.is-small .icon.is-large:first-child:last-child {
-  margin-left: calc(-1px + -1.125rem);
-  margin-right: calc(-1px + -1.125rem);
-}
-
 .button.is-medium {
   font-size: 1.25rem;
 }
 
-.button.is-medium .icon:first-child:not(:last-child) {
-  margin-left: -0.125rem;
-  margin-right: 0.625rem;
-}
-
-.button.is-medium .icon:last-child:not(:first-child) {
-  margin-left: 0.625rem;
-  margin-right: -0.125rem;
-}
-
-.button.is-medium .icon:first-child:last-child {
-  margin-left: calc(-1px + -0.125rem);
-  margin-right: calc(-1px + -0.125rem);
-}
-
-.button.is-medium .icon.is-small:first-child:not(:last-child) {
-  margin-left: 0.125rem;
-}
-
-.button.is-medium .icon.is-small:last-child:not(:first-child) {
-  margin-right: 0.125rem;
-}
-
-.button.is-medium .icon.is-small:first-child:last-child {
-  margin-left: calc(-1px + 0.125rem);
-  margin-right: calc(-1px + 0.125rem);
-}
-
-.button.is-medium .icon.is-medium:first-child:not(:last-child) {
-  margin-left: -0.375rem;
-}
-
-.button.is-medium .icon.is-medium:last-child:not(:first-child) {
-  margin-right: -0.375rem;
-}
-
-.button.is-medium .icon.is-medium:first-child:last-child {
-  margin-left: calc(-1px + -0.375rem);
-  margin-right: calc(-1px + -0.375rem);
-}
-
-.button.is-medium .icon.is-large:first-child:not(:last-child) {
-  margin-left: -0.875rem;
-}
-
-.button.is-medium .icon.is-large:last-child:not(:first-child) {
-  margin-right: -0.875rem;
-}
-
-.button.is-medium .icon.is-large:first-child:last-child {
-  margin-left: calc(-1px + -0.875rem);
-  margin-right: calc(-1px + -0.875rem);
-}
-
 .button.is-large {
   font-size: 1.5rem;
 }
 
-.button.is-large .icon:first-child:not(:last-child) {
-  margin-left: 0rem;
-  margin-right: 0.75rem;
-}
-
-.button.is-large .icon:last-child:not(:first-child) {
-  margin-left: 0.75rem;
-  margin-right: 0rem;
-}
-
-.button.is-large .icon:first-child:last-child {
-  margin-left: calc(-1px + 0rem);
-  margin-right: calc(-1px + 0rem);
-}
-
-.button.is-large .icon.is-small:first-child:not(:last-child) {
-  margin-left: 0.25rem;
-}
-
-.button.is-large .icon.is-small:last-child:not(:first-child) {
-  margin-right: 0.25rem;
-}
-
-.button.is-large .icon.is-small:first-child:last-child {
-  margin-left: calc(-1px + 0.25rem);
-  margin-right: calc(-1px + 0.25rem);
-}
-
-.button.is-large .icon.is-medium:first-child:not(:last-child) {
-  margin-left: -0.25rem;
-}
-
-.button.is-large .icon.is-medium:last-child:not(:first-child) {
-  margin-right: -0.25rem;
-}
-
-.button.is-large .icon.is-medium:first-child:last-child {
-  margin-left: calc(-1px + -0.25rem);
-  margin-right: calc(-1px + -0.25rem);
-}
-
-.button.is-large .icon.is-large:first-child:not(:last-child) {
-  margin-left: -0.75rem;
-}
-
-.button.is-large .icon.is-large:last-child:not(:first-child) {
-  margin-right: -0.75rem;
-}
-
-.button.is-large .icon.is-large:first-child:last-child {
-  margin-left: calc(-1px + -0.75rem);
-  margin-right: calc(-1px + -0.75rem);
-}
-
 .button[disabled], .button.is-disabled {
   opacity: 0.5;
 }
@@ -1653,11 +1459,13 @@ a.box:active {
   box-shadow: none;
   display: inline-flex;
   font-size: 1rem;
-  height: 2.285em;
+  height: 2.25em;
   justify-content: flex-start;
   line-height: 1.5;
-  padding-left: 0.75em;
-  padding-right: 0.75em;
+  padding-bottom: 0.375em;
+  padding-left: 0.625em;
+  padding-right: 0.625em;
+  padding-top: 0.375em;
   position: relative;
   vertical-align: top;
   background-color: white;
@@ -1814,7 +1622,7 @@ a.box:active {
   max-width: 100%;
   min-height: 120px;
   min-width: 100%;
-  padding: 10px;
+  padding: 0.625em;
   resize: vertical;
 }
 
@@ -1857,7 +1665,7 @@ a.box:active {
 
 .select {
   display: inline-block;
-  height: 2.5em;
+  height: 2.25em;
   position: relative;
   vertical-align: top;
 }
@@ -1888,11 +1696,13 @@ a.box:active {
   box-shadow: none;
   display: inline-flex;
   font-size: 1rem;
-  height: 2.285em;
+  height: 2.25em;
   justify-content: flex-start;
   line-height: 1.5;
-  padding-left: 0.75em;
-  padding-right: 0.75em;
+  padding-bottom: 0.375em;
+  padding-left: 0.625em;
+  padding-right: 0.625em;
+  padding-top: 0.375em;
   position: relative;
   vertical-align: top;
   background-color: white;
@@ -2138,9 +1948,11 @@ a.box:active {
 
 .control.has-icon .icon {
   color: #dbdbdb;
+  height: 2.25em;
   pointer-events: none;
   position: absolute;
-  top: 1.25rem;
+  top: 0;
+  width: 2.25em;
   z-index: 4;
 }
 
@@ -2149,57 +1961,31 @@ a.box:active {
 }
 
 .control.has-icon .input.is-small + .icon {
-  top: 0.9375rem;
+  font-size: 0.75rem;
 }
 
 .control.has-icon .input.is-medium + .icon {
-  top: 1.5625rem;
+  font-size: 1.25rem;
 }
 
 .control.has-icon .input.is-large + .icon {
-  top: 1.875rem;
+  font-size: 1.5rem;
 }
 
 .control.has-icon:not(.has-icon-right) .icon {
-  left: 1.25rem;
-  transform: translateX(-50%) translateY(-50%);
+  left: 0;
 }
 
 .control.has-icon:not(.has-icon-right) .input {
-  padding-left: 2.5em;
-}
-
-.control.has-icon:not(.has-icon-right) .input.is-small + .icon {
-  left: 0.9375rem;
-}
-
-.control.has-icon:not(.has-icon-right) .input.is-medium + .icon {
-  left: 1.5625rem;
-}
-
-.control.has-icon:not(.has-icon-right) .input.is-large + .icon {
-  left: 1.875rem;
+  padding-left: 2.25em;
 }
 
 .control.has-icon.has-icon-right .icon {
-  right: 1.25rem;
-  transform: translateX(50%) translateY(-50%);
+  right: 0;
 }
 
 .control.has-icon.has-icon-right .input {
-  padding-right: 2.5em;
-}
-
-.control.has-icon.has-icon-right .input.is-small + .icon {
-  right: 0.9375rem;
-}
-
-.control.has-icon.has-icon-right .input.is-medium + .icon {
-  right: 1.5625rem;
-}
-
-.control.has-icon.has-icon-right .input.is-large + .icon {
-  right: 1.875rem;
+  padding-right: 2.25em;
 }
 
 .control.is-grouped {
@@ -2259,50 +2045,46 @@ a.box:active {
 }
 
 .icon {
-  display: inline-block;
-  font-size: 21px;
+  align-items: center;
+  background-color: coral;
+  display: inline-flex;
+  justify-content: center;
   height: 1.5rem;
-  line-height: 1.5rem;
-  text-align: center;
   vertical-align: top;
   width: 1.5rem;
 }
 
 .icon .fa {
-  font-size: inherit;
-  line-height: inherit;
+  font-size: 21px;
 }
 
 .icon.is-small {
-  display: inline-block;
-  font-size: 14px;
   height: 1rem;
-  line-height: 1rem;
-  text-align: center;
-  vertical-align: top;
   width: 1rem;
 }
 
+.icon.is-small .fa {
+  font-size: 14px;
+}
+
 .icon.is-medium {
-  display: inline-block;
-  font-size: 28px;
   height: 2rem;
-  line-height: 2rem;
-  text-align: center;
-  vertical-align: top;
   width: 2rem;
 }
 
+.icon.is-medium .fa {
+  font-size: 28px;
+}
+
 .icon.is-large {
-  display: inline-block;
-  font-size: 42px;
   height: 3rem;
-  line-height: 3rem;
-  text-align: center;
-  vertical-align: top;
   width: 3rem;
 }
 
+.icon.is-large .fa {
+  font-size: 42px;
+}
+
 .image {
   display: block;
   position: relative;
@@ -2779,7 +2561,7 @@ a.box:active {
 }
 
 .title.is-6 {
-  font-size: 14px;
+  font-size: 1rem;
 }
 
 .subtitle {
@@ -2818,7 +2600,7 @@ a.box:active {
 }
 
 .subtitle.is-6 {
-  font-size: 14px;
+  font-size: 1rem;
 }
 
 .block:not(:last-child) {
@@ -2860,13 +2642,13 @@ a.box:active {
   cursor: pointer;
   display: inline-block;
   font-size: 1rem;
-  height: 20px;
+  height: 0px;
   outline: none;
   position: relative;
   transform: rotate(45deg);
   transform-origin: center center;
   vertical-align: top;
-  width: 20px;
+  width: 0px;
 }
 
 .delete:before, .delete:after {
@@ -2898,18 +2680,18 @@ a.box:active {
 }
 
 .delete.is-small {
-  height: 14px;
-  width: 14px;
+  height: 0px;
+  width: 0px;
 }
 
 .delete.is-medium {
-  height: 26px;
-  width: 26px;
+  height: 0px;
+  width: 0px;
 }
 
 .delete.is-large {
-  height: 30px;
-  width: 30px;
+  height: 2px;
+  width: 2px;
 }
 
 .fa {
@@ -3485,13 +3267,13 @@ a.box:active {
   cursor: pointer;
   display: inline-block;
   font-size: 1rem;
-  height: 20px;
+  height: 0px;
   outline: none;
   position: relative;
   transform: rotate(45deg);
   transform-origin: center center;
   vertical-align: top;
-  width: 20px;
+  width: 0px;
   background: none;
   height: 40px;
   position: fixed;
@@ -3529,18 +3311,18 @@ a.box:active {
 }
 
 .modal-close.is-small {
-  height: 14px;
-  width: 14px;
+  height: 0px;
+  width: 0px;
 }
 
 .modal-close.is-medium {
-  height: 26px;
-  width: 26px;
+  height: 0px;
+  width: 0px;
 }
 
 .modal-close.is-large {
-  height: 30px;
-  width: 30px;
+  height: 2px;
+  width: 2px;
 }
 
 .modal-card {
@@ -3859,11 +3641,13 @@ a.nav-item.is-tab.is-active {
   box-shadow: none;
   display: inline-flex;
   font-size: 1rem;
-  height: 2.285em;
+  height: 2.25em;
   justify-content: flex-start;
   line-height: 1.5;
-  padding-left: 0.75em;
-  padding-right: 0.75em;
+  padding-bottom: 0.375em;
+  padding-left: 0.625em;
+  padding-right: 0.625em;
+  padding-top: 0.375em;
   position: relative;
   vertical-align: top;
   -webkit-touch-callout: none;

sass/base/generic.sass

@@ -1,6 +1,3 @@
-$body-background: $white !default
-$body-size: $size-6 !default
-
 html
   background-color: $body-background
   font-size: $body-size

sass/elements/button.sass

@@ -13,72 +13,14 @@ $button-active-border: $link-active-border !default
 
 $button-shadow-inset: inset 0 1px 2px rgba($black, 0.2) !default
 
-@function buttonIconSpacing($button-font-size, $icon-width)
-  // The button font-size value with no unit
-  $button-value: removeUnit($button-font-size)
-  // The rem height of the button
-  // based on a height of 2.5em
-  $button-height: 2.5rem * $button-value // rem
-  // The rem total horizontal padding of the button
-  $button-horizontal-padding: 2 * 0.75rem * $button-value // rem
-  // For the icon center to align with the button center
-  // the horizontal padding + the icon width must equal the button height
-  // $button-height = $button-horizontal-padding + $icon-width + $difference
-  $difference: $button-height - $button-horizontal-padding - $icon-width
-  @return $difference / 2
-
-=button-icon($button-font-size)
-  $small-offset: buttonIconSpacing($button-font-size, 1rem)
-  $normal-offset: buttonIconSpacing($button-font-size, 1.5rem)
-  $medium-offset: buttonIconSpacing($button-font-size, 2rem)
-  $large-offset: buttonIconSpacing($button-font-size, 3rem)
-  .icon
-    &:first-child:not(:last-child)
-      margin-left: $normal-offset
-      margin-right: $button-font-size / 2
-    &:last-child:not(:first-child)
-      margin-left: $button-font-size / 2
-      margin-right: $normal-offset
-    &:first-child:last-child
-      // The -1px is to account for the button 1px border
-      margin-left: calc(-1px + #{$normal-offset})
-      margin-right: calc(-1px + #{$normal-offset})
-    &.is-small
-      &:first-child:not(:last-child)
-        margin-left: $small-offset
-      &:last-child:not(:first-child)
-        margin-right: $small-offset
-      &:first-child:last-child
-        margin-left: calc(-1px + #{$small-offset})
-        margin-right: calc(-1px + #{$small-offset})
-    &.is-medium
-      &:first-child:not(:last-child)
-        margin-left: $medium-offset
-      &:last-child:not(:first-child)
-        margin-right: $medium-offset
-      &:first-child:last-child
-        margin-left: calc(-1px + #{$medium-offset})
-        margin-right: calc(-1px + #{$medium-offset})
-    &.is-large
-      &:first-child:not(:last-child)
-        margin-left: $large-offset
-      &:last-child:not(:first-child)
-        margin-right: $large-offset
-      &:first-child:last-child
-        margin-left: calc(-1px + #{$large-offset})
-        margin-right: calc(-1px + #{$large-offset})
-
 // The button sizes use mixins so they can be used at different breakpoints
 =button-small
   border-radius: $radius-small
   font-size: $size-small
-  +button-icon($size-small)
 =button-medium
   font-size: $size-medium
-  +button-icon($size-medium)
 =button-large
   font-size: $size-large
-  +button-icon($size-large)
 
 .button
   +control
@@ -94,7 +36,22 @@ $button-shadow-inset: inset 0 1px 2px rgba($black, 0.2) !default
   white-space: nowrap
   strong
     color: inherit
-  +button-icon($size-normal)
+  .icon
+    &,
+    &.is-small,
+    &.is-medium,
+    &.is-large
+      height: 1.5em
+      width: 1.5em
+    &:first-child:not(:last-child)
+      margin-left: calc(-0.375em - 1px)
+      margin-right: 0.375em
+    &:last-child:not(:first-child)
+      margin-left: 0.375em
+      margin-right: calc(-0.375em - 1px)
+    &:first-child:last-child
+      margin-left: calc(-0.375em - 1px)
+      margin-right: calc(-0.375em - 1px)
   // States
   &:hover,
   &.is-hovered

sass/elements/form.sass

@@ -76,7 +76,7 @@ $input-radius:              $radius !default
   max-width: 100%
   min-height: 120px
   min-width: 100%
-  padding: 10px
+  padding: 0.625em
   resize: vertical
 
 .checkbox,
@@ -105,7 +105,7 @@ $input-radius:              $radius !default
 
 .select
   display: inline-block
-  height: 2.5em
+  height: 2.25em
   position: relative
   vertical-align: top
   &:after
@@ -221,9 +221,11 @@ $input-radius:              $radius !default
   &.has-icon
     .icon
       color: $input-icon
+      height: 2.25em
       pointer-events: none
       position: absolute
-      top: ($size-normal * 2.5) / 2
+      top: 0
+      width: 2.25em
       z-index: 4
     .input
       &:focus
@@ -231,43 +233,43 @@ $input-radius:              $radius !default
           color: $input-icon-active
       &.is-small
         & + .icon
-          top: ($size-small * 2.5) / 2
+          font-size: $size-small
       &.is-medium
         & + .icon
-          top: ($size-medium * 2.5) / 2
+          font-size: $size-medium
       &.is-large
         & + .icon
-          top: ($size-large * 2.5) / 2
+          font-size: $size-large
     &:not(.has-icon-right)
       .icon
-        left: ($size-normal * 2.5) / 2
-        transform: translateX(-50%) translateY(-50%)
+        left: 0
+        // transform: translateX(-50%) translateY(-50%)
       .input
-        padding-left: 2.5em
-        &.is-small
-          & + .icon
-            left: ($size-small * 2.5) / 2
-        &.is-medium
-          & + .icon
-            left: ($size-medium * 2.5) / 2
-        &.is-large
-          & + .icon
-            left: ($size-large * 2.5) / 2
+        padding-left: 2.25em
+        // &.is-small
+        //   & + .icon
+        //     left: ($size-small * 2.5) / 2
+        // &.is-medium
+        //   & + .icon
+        //     left: ($size-medium * 2.5) / 2
+        // &.is-large
+        //   & + .icon
+        //     left: ($size-large * 2.5) / 2
     &.has-icon-right
       .icon
-        right: ($size-normal * 2.5) / 2
-        transform: translateX(50%) translateY(-50%)
+        right: 0
+        // transform: translateX(50%) translateY(-50%)
       .input
-        padding-right: 2.5em
-        &.is-small
-          & + .icon
-            right: ($size-small * 2.5) / 2
-        &.is-medium
-          & + .icon
-            right: ($size-medium * 2.5) / 2
-        &.is-large
-          & + .icon
-            right: ($size-large * 2.5) / 2
+        padding-right: 2.25em
+        // &.is-small
+        //   & + .icon
+        //     right: ($size-small * 2.5) / 2
+        // &.is-medium
+        //   & + .icon
+        //     right: ($size-medium * 2.5) / 2
+        // &.is-large
+        //   & + .icon
+        //     right: ($size-large * 2.5) / 2
   &.is-grouped
     display: flex
     justify-content: flex-start

sass/elements/icon.sass

@@ -1,12 +1,26 @@
 .icon
-  +fa(21px, 1.5rem)
+  align-items: center
+  background-color: coral
+  display: inline-flex
+  justify-content: center
+  height: 1.5rem
+  vertical-align: top
+  width: 1.5rem
   .fa
-    font-size: inherit
-    line-height: inherit
+    font-size: 21px
   // Sizes
   &.is-small
-    +fa(14px, 1rem)
+    height: 1rem
+    width: 1rem
+    .fa
+      font-size: 14px
   &.is-medium
-    +fa(28px, 2rem)
+    height: 2rem
+    width: 2rem
+    .fa
+      font-size: 28px
   &.is-large
-    +fa(42px, 3rem)
+    height: 3rem
+    width: 3rem
+    .fa
+      font-size: 42px

sass/utilities/controls.sass

@@ -10,11 +10,13 @@ $control-radius-small: $radius-small !default
   box-shadow: none
   display: inline-flex
   font-size: $size-normal
-  height: 2.285em
+  height: 2.25em
   justify-content: flex-start
   line-height: 1.5
-  padding-left: 0.75em
-  padding-right: 0.75em
+  padding-bottom: 0.375em
+  padding-left: 0.625em
+  padding-right: 0.625em
+  padding-top: 0.375em
   position: relative
   vertical-align: top
   // States

sass/utilities/variables.sass

@@ -34,7 +34,7 @@ $size-2: 2.75rem !default
 $size-3: 2rem !default
 $size-4: 1.5rem !default
 $size-5: 1.25rem !default
-$size-6: 14px !default
+$size-6: 1rem !default
 $size-7: 0.75rem !default
 
 $weight-light: 300 !default
@@ -42,6 +42,10 @@ $weight-normal: 400 !default
 $weight-semibold: 500 !default
 $weight-bold: 700 !default
 
+// Body
+$body-background: $white !default
+$body-size: 14px !default
+
 // Miscellaneous
 $easing: ease-out !default
 $radius-small: 2px !default
@@ -122,7 +126,7 @@ $family-primary: $family-sans-serif !default
 $family-code: $family-monospace !default
 
 $size-small: $size-7 !default
-$size-normal: 1rem !default
+$size-normal: $size-6 !default
 $size-medium: $size-5 !default
 $size-large: $size-4 !default