feat(button): circular icon button to appear round at minimum

Whenever a circular icon button was used to reduce the padding but use text instead of an icon, the button does not appear as a circle at least (that is taken care of for circular label) By adding a min width to a circular button this gets fixed. I intentionally added the minwidth directly to circular button (instead of circular icon button) as it saves an extra selector and the default min-width is already reached (because of the larger paddding) when a non icon button is used.
fomantic · Jun 4, 2024 · c7c2a5d · c7c2a5d
1 parent 10165a8
commit c7c2a5d
Show file tree

Hide file tree

Showing 2 changed files with 2 additions and 0 deletions.
diff --git a/src/definitions/elements/button.less b/src/definitions/elements/button.less
@@ -1098,6 +1098,7 @@
     .ui.ui.circular.buttons .button,
     .ui.ui.ui.ui.circular.button {
         border-radius: @circularBorderRadius;
+        min-width: @circularMinWidth;
     }
 
     .ui.circular.buttons .button > .icon,

diff --git a/src/themes/default/elements/button.variables b/src/themes/default/elements/button.variables
@@ -394,6 +394,7 @@
 /* Circular */
 @circularBorderRadius: 10em;
 @circularIconWidth: 1em;
+@circularMinWidth: 2.5em;
 @circularGroupMargin: 0.25em;
 @circularVerticalGroupMargin: @circularGroupMargin;