Skip to content

Commit c7c2a5d

Browse files
authored
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.
1 parent 10165a8 commit c7c2a5d

File tree

2 files changed

+2
-0
lines changed

2 files changed

+2
-0
lines changed

src/definitions/elements/button.less

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -1098,6 +1098,7 @@
10981098
.ui.ui.circular.buttons .button,
10991099
.ui.ui.ui.ui.circular.button {
11001100
border-radius: @circularBorderRadius;
1101+
min-width: @circularMinWidth;
11011102
}
11021103

11031104
.ui.circular.buttons .button > .icon,

src/themes/default/elements/button.variables

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -394,6 +394,7 @@
394394
/* Circular */
395395
@circularBorderRadius: 10em;
396396
@circularIconWidth: 1em;
397+
@circularMinWidth: 2.5em;
397398
@circularGroupMargin: 0.25em;
398399
@circularVerticalGroupMargin: @circularGroupMargin;
399400

0 commit comments

Comments
 (0)