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

lubber-de · Dec 1, 2023 · 64edfe2 · 64edfe2
1 parent 83ab0e7
commit 64edfe2
Show file tree

Hide file tree

Showing 2 changed files with 14 additions and 1 deletion.
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;
             }
         }
@@ -1104,6 +1104,17 @@
         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;

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;