feat(button): support circular (spaced) button (groups)

The circular variant was missing group support and did not work inside the spaced variation
fomantic · Dec 19, 2023 · e123cb8 · e123cb8
1 parent 4effaa3
commit e123cb8
Show file tree

Hide file tree

Showing 2 changed files with 27 additions and 3 deletions.
diff --git a/src/definitions/elements/button.less b/src/definitions/elements/button.less
@@ -885,7 +885,7 @@
                 border-top: @basicGroupBorder;
             }
 
-            .ui.basic.vertical.buttons:not(.spaced) .button:first-child {
+            .ui.basic.vertical.buttons:not(.spaced):not(.circular) .button:first-child {
                 border-top: none;
             }
         }
@@ -1095,15 +1095,37 @@
     /* --------------
         Circular
     --------------- */
-
-    .ui.circular.button {
+    .ui.ui.circular.buttons .button,
+    .ui.ui.ui.ui.circular.button {
         border-radius: @circularBorderRadius;
     }
 
     .ui.circular.button > .icon {
         width: @circularIconWidth;
         vertical-align: baseline;
     }
+
+    .ui.circular.buttons:not(.vertical) .button {
+        margin-right: @circularGroupMargin;
+    }
+
+    & when (@variationButtonVertical) {
+        .ui.vertical.circular.buttons .button {
+            margin-bottom: @circularVerticalGroupMargin;
+        }
+    }
+
+    & when (@variationButtonBasic) {
+        .ui.circular.basic.buttons {
+            border: none;
+            & .button {
+                border: @basicGroupBorder;
+                &.basic {
+                    border: none;
+                }
+            }
+        }
+    }
 }
 
 & when (@variationButtonOr) {

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