library-mirrors/bulma
1
0
Fork 0
mirror of https://github.com/jgthms/bulma.git synced 2025-01-09 15:44:25 +00:00
Code Issues Actions Packages Projects Releases Wiki Activity

Fix the proportions of icon only is-rounded buttons to be perfect circles

Browse Source 
Currently, creating a button with only a single icon inside it results in
a perfect square icon button, but doing the same with the is-rounded modifer
doesn't result in a perfect circle because extra padding is added for rounded
buttons. This adds an extra selector to move that extra padding case to happen
only in the cases where a single icon isn't the sole child of the button.

This means that circular icon buttons can now  be created, but adding any other
content to the button still results in the exact same proportions as before.

Since this makes use of the :has() selector which has only recently gained
good browser support, the whole rule is behind an @supports for :has() so that
older browsers will fall back to the same logic as before.
This commit is contained in:
Matt Fannin 2024-06-12 22:41:40 +12:00
parent 45d70e7e65
commit a91d861415
1 changed files with 22 additions and 8 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

30
sass/elements/button.scss
View File

@ -534,14 +534,28 @@ $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")} + #{$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")}
);
&:not(:has(.icon:only-child)) {
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")}
);
}
@supports not selector(:has(a, b)) {
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")}
);
}
}
}