Fix delete button

diff --git a/docs/css/bulma-docs.css b/docs/css/bulma-docs.css
index 39f9d0219d392c54f04ccede8626c91446c5efac..98b2eb72380d49c3053571159f90876557bfc044 100644 (file)
--- a/docs/css/bulma-docs.css
+++ b/docs/css/bulma-docs.css
@@ -2175,6 +2175,11 @@ a.box:active {
   justify-content: flex-start;
 }
 
+.control.is-grouped > .control {
+  flex-basis: 0;
+  flex-shrink: 0;
+}
+
 .control.is-grouped > .control:not(:last-child) {
   margin-bottom: 0;
   margin-right: 0.75rem;
@@ -2829,13 +2834,13 @@ a.box:active {
   cursor: pointer;
   display: inline-block;
   font-size: 1rem;
-  height: 1.5em;
+  height: 20px;
   outline: none;
   position: relative;
   transform: rotate(45deg);
   transform-origin: center center;
   vertical-align: top;
-  width: 1.5em;
+  width: 20px;
 }
 
 .delete:before, .delete:after {
@@ -2867,15 +2872,18 @@ a.box:active {
 }
 
 .delete.is-small {
-  font-size: 0.75rem;
+  height: 14px;
+  width: 14px;
 }
 
 .delete.is-medium {
-  font-size: 1.25rem;
+  height: 26px;
+  width: 26px;
 }
 
 .delete.is-large {
-  font-size: 1.5rem;
+  height: 30px;
+  width: 30px;
 }
 
 .fa {
@@ -3656,13 +3664,13 @@ a.box:active {
   cursor: pointer;
   display: inline-block;
   font-size: 1rem;
-  height: 1.5em;
+  height: 20px;
   outline: none;
   position: relative;
   transform: rotate(45deg);
   transform-origin: center center;
   vertical-align: top;
-  width: 1.5em;
+  width: 20px;
   background: none;
   height: 40px;
   position: fixed;
@@ -3700,15 +3708,18 @@ a.box:active {
 }
 
 .modal-close.is-small {
-  font-size: 0.75rem;
+  height: 14px;
+  width: 14px;
 }
 
 .modal-close.is-medium {
-  font-size: 1.25rem;
+  height: 26px;
+  width: 26px;
 }
 
 .modal-close.is-large {
-  font-size: 1.5rem;
+  height: 30px;
+  width: 30px;
 }
 
 .modal-card {

diff --git a/sass/elements/form.sass b/sass/elements/form.sass
index b6fcc1475cf954bb55dba7cfec6ddfec70f3d6dd..b17557c9e10127881b06b632a316c32a45096c68 100644 (file)
--- a/sass/elements/form.sass
+++ b/sass/elements/form.sass
@@ -272,6 +272,8 @@ $input-radius:              $radius !default
     display: flex
     justify-content: flex-start
     & > .control
+      flex-basis: 0
+      flex-shrink: 0
       &:not(:last-child)
         margin-bottom: 0
         margin-right: 0.75rem

diff --git a/sass/utilities/functions.sass b/sass/utilities/functions.sass
index e38d1727cd83a65eaa5624cb0cf1081442504afc..1b6e8243750895e1cda96be1e5291904ffd6b122 100644 (file)
--- a/sass/utilities/functions.sass
+++ b/sass/utilities/functions.sass
@@ -26,3 +26,11 @@
     @return rgba(#000, 0.7)
   @else
     @return #fff
+
+@function removeUnit($number)
+  @if type-of($number) == 'number' and not unitless($number)
+    @return $number / ($number * 0 + 1);
+  @return $number;
+
+@function roundToEvenNumber($number)
+  @return floor($number / 2) * 2

diff --git a/sass/utilities/mixins.sass b/sass/utilities/mixins.sass
index 88b80c4906f2741628f64d6045cbb2025e2d94f1..7169e661e2fa667a00d9908934916701de334907 100644 (file)
--- a/sass/utilities/mixins.sass
+++ b/sass/utilities/mixins.sass
@@ -28,6 +28,11 @@
   top: 50%
 
 =delete
+  // We need even pixel dimensions to ensure the delete cross can be perfectly centered
+  $dimension-small: roundToEvenNumber(1.5 * removeUnit($size-6) * removeUnit($size-small)) * 1px
+  $dimension-normal: roundToEvenNumber(1.5 * removeUnit($size-6) * removeUnit($size-normal)) * 1px
+  $dimension-medium: roundToEvenNumber(1.5 * removeUnit($size-6) * removeUnit($size-medium)) * 1px
+  $dimension-large: roundToEvenNumber(1.5 * removeUnit($size-6) * removeUnit($size-large)) * 1px
   +unselectable
   -moz-appearance: none
   -webkit-appearance: none
@@ -37,13 +42,13 @@
   cursor: pointer
   display: inline-block
   font-size: $size-normal
-  height: 1.5em
+  height: $dimension-normal
   outline: none
   position: relative
   transform: rotate(45deg)
   transform-origin: center center
   vertical-align: top
-  width: 1.5em
+  width: $dimension-normal
   &:before,
   &:after
     background-color: $white
@@ -66,11 +71,14 @@
     background-color: rgba($black, 0.4)
   // Sizes
   &.is-small
-    font-size: $size-small
+    height: $dimension-small
+    width: $dimension-small
   &.is-medium
-    font-size: $size-medium
+    height: $dimension-medium
+    width: $dimension-medium
   &.is-large
-    font-size: $size-large
+    height: $dimension-large
+    width: $dimension-large
 
 =fa($size, $dimensions)
   display: inline-block