Fix #3786

jgthms · May 20, 2024 · 0c3d845 · 0c3d845
1 parent bb05184
commit 0c3d845
Show file tree

Hide file tree

Showing 18 changed files with 32 additions and 24 deletions.
diff --git a/CHANGELOG.md b/CHANGELOG.md
@@ -9,6 +9,7 @@
 - Fix #3744: build non-minified versions
 - Fix #3747: ability to nest fixed grids
 - Fix #3759: remove unused `.skeleton` class
+- Fix #3786: fix horizontal padding of rounded buttons
 
 ### Documentation fixes
 

diff --git a/css/bulma.css b/css/bulma.css
@@ -3857,8 +3857,8 @@ a.box:active {
 }
 .button.is-rounded {
   border-radius: var(--bulma-radius-rounded);
-  padding-left: calc(var(--bulma-button-padding-horizontal) + 0.25em);
-  padding-right: calc(var(--bulma-button-padding-horizontal) + 0.25em);
+  padding-left: calc(var(--bulma-button-padding-horizontal) + 0.25em - var(--bulma-button-border-width));
+  padding-right: calc(var(--bulma-button-padding-horizontal) + 0.25em - var(--bulma-button-border-width));
 }
 
 .buttons {

diff --git a/css/bulma.css.map b/css/bulma.css.map
diff --git a/css/bulma.min.css b/css/bulma.min.css
diff --git a/css/versions/bulma-no-dark-mode.css b/css/versions/bulma-no-dark-mode.css
@@ -1054,8 +1054,8 @@ a.box:active {
 }
 .button.is-rounded {
   border-radius: var(--bulma-radius-rounded);
-  padding-left: calc(var(--bulma-button-padding-horizontal) + 0.25em);
-  padding-right: calc(var(--bulma-button-padding-horizontal) + 0.25em);
+  padding-left: calc(var(--bulma-button-padding-horizontal) + 0.25em - var(--bulma-button-border-width));
+  padding-right: calc(var(--bulma-button-padding-horizontal) + 0.25em - var(--bulma-button-border-width));
 }
 
 .buttons {

diff --git a/css/versions/bulma-no-dark-mode.css.map b/css/versions/bulma-no-dark-mode.css.map
diff --git a/css/versions/bulma-no-dark-mode.min.css b/css/versions/bulma-no-dark-mode.min.css
diff --git a/css/versions/bulma-no-helpers-prefixed.css b/css/versions/bulma-no-helpers-prefixed.css
diff --git a/css/versions/bulma-no-helpers-prefixed.css.map b/css/versions/bulma-no-helpers-prefixed.css.map
diff --git a/css/versions/bulma-no-helpers-prefixed.min.css b/css/versions/bulma-no-helpers-prefixed.min.css
diff --git a/css/versions/bulma-no-helpers.css b/css/versions/bulma-no-helpers.css
diff --git a/css/versions/bulma-no-helpers.css.map b/css/versions/bulma-no-helpers.css.map
diff --git a/css/versions/bulma-no-helpers.min.css b/css/versions/bulma-no-helpers.min.css
diff --git a/css/versions/bulma-prefixed.min.css b/css/versions/bulma-prefixed.min.css
@@ -3857,8 +3857,8 @@ a.bulma-box:active {
 }
 .bulma-button.bulma-is-rounded {
   border-radius: var(--bulma-radius-rounded);
-  padding-left: calc(var(--bulma-button-padding-horizontal) + 0.25em);
-  padding-right: calc(var(--bulma-button-padding-horizontal) + 0.25em);
+  padding-left: calc(var(--bulma-button-padding-horizontal) + 0.25em - var(--bulma-button-border-width));
+  padding-right: calc(var(--bulma-button-padding-horizontal) + 0.25em - var(--bulma-button-border-width));
 }
 
 .bulma-buttons {

diff --git a/css/versions/bulma-prefixed.min.css.map b/css/versions/bulma-prefixed.min.css.map
diff --git a/css/versions/bulma-prefixed.min.min.css b/css/versions/bulma-prefixed.min.min.css
diff --git a/docs/assets/css/website.css b/docs/assets/css/website.css
@@ -7296,8 +7296,8 @@ a.box:active {
 }
 .button.is-rounded {
   border-radius: var(--bulma-radius-rounded);
-  padding-left: calc(var(--bulma-button-padding-horizontal) + 0.25em);
-  padding-right: calc(var(--bulma-button-padding-horizontal) + 0.25em);
+  padding-left: calc(var(--bulma-button-padding-horizontal) + 0.25em - var(--bulma-button-border-width));
+  padding-right: calc(var(--bulma-button-padding-horizontal) + 0.25em - var(--bulma-button-border-width));
 }
 
 .buttons {

diff --git a/sass/elements/button.scss b/sass/elements/button.scss
@@ -33,6 +33,7 @@ $button-border-width: cv.getVar("control-border-width") !default;
 
 $button-padding-vertical: 0.5em !default;
 $button-padding-horizontal: 1em !default;
+$button-rounded-padding-horizontal-offset: 0.25em !default;
 
 $button-focus-border-color: cv.getVar("link-focus-border") !default;
 $button-focus-box-shadow-size: 0 0 0 0.125em !default;
@@ -533,8 +534,14 @@ $no-palette: ("white", "black", "light", "dark");
 
   &.#{iv.$class-prefix}is-rounded {
     border-radius: cv.getVar("radius-rounded");
-    padding-left: calc(#{cv.getVar("button-padding-horizontal")} + 0.25em);
-    padding-right: calc(#{cv.getVar("button-padding-horizontal")} + 0.25em);
+    padding-left: calc(
+      #{cv.getVar("button-padding-horizontal")} + #{$button-rounded-padding-horizontal-offset} -
+        #{cv.getVar("button-border-width")}
+    );
+    padding-right: calc(
+      #{cv.getVar("button-padding-horizontal")} + #{$button-rounded-padding-horizontal-offset} -
+        #{cv.getVar("button-border-width")}
+    );
   }
 }