From: Jeremy Thomas <bbxdesign@gmail.com>
Date: Thu, 22 Dec 2016 18:44:54 +0000 (+0000)
Subject: Fix delete button
X-Git-Tag: 0.3.0^2~16
X-Git-Url: http://git.ipfire.org/cgi-bin/gitweb.cgi?a=commitdiff_plain;h=bd6fccef049162f99c9c1ad29f766fb7170c463c;p=thirdparty%2Fbulma.git

Fix delete button
---

diff --git a/docs/css/bulma-docs.css b/docs/css/bulma-docs.css
index 39f9d0219..98b2eb723 100644
--- 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 b6fcc1475..b17557c9e 100644
--- 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 e38d1727c..1b6e82437 100644
--- 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 88b80c490..7169e661e 100644
--- 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