From 2418a617e0c631fb01cf35657235a7e6d2b5ac45 Mon Sep 17 00:00:00 2001
From: Kazhnuz <kazhnuz@kobold.cafe>
Date: Tue, 10 Sep 2024 23:23:10 +0200
Subject: [PATCH] feat: add button groups

---
 index.html                   | 10 ++++++++--
 src/components/_buttons.scss | 16 ++++++++++++++++
 2 files changed, 24 insertions(+), 2 deletions(-)

diff --git a/index.html b/index.html
index 683ac4e..99c859d 100644
--- a/index.html
+++ b/index.html
@@ -20,8 +20,7 @@
         </ul>
         <ul class="menu">
             <li><a href="#">Home</a></li>
-            <li><a href="#">Mouette</a></li>
-            <li><span class="active">Exemple</span></li>
+            <li><a href="#" class="button">Mouette</a></li>
         </ul>
     </nav>
 
@@ -53,6 +52,13 @@
         <span class="badge">Badge span</span>
         <br />
         <a href="#" class="button link">Bouton lien .link</a>
+        <br />
+        <div class="button-group">
+            <button>Bouton (groupé)</button>
+            <a href="#" class="button">Bouton lien</a>
+            <a href="#" class="button">Bouton lien</a>
+            <button>Bouton</button>
+        </div>
     </p>
     
     <main>
diff --git a/src/components/_buttons.scss b/src/components/_buttons.scss
index f242878..0275db7 100644
--- a/src/components/_buttons.scss
+++ b/src/components/_buttons.scss
@@ -46,4 +46,20 @@ a[href].button:not(.link), a[href].button:visited:not(.link), button, input[type
 :disabled, .disabled {
     filter: #{"grayscale(1)"};
     opacity: 0.5;
+}
+
+.button-group {
+    display:flex;
+    .button, button {
+        margin:0;
+        &:not(:first-child) {
+            border-top-left-radius: 0;
+            border-bottom-left-radius: 0;
+        }
+        &:not(:last-child) {
+            border-top-right-radius: 0;
+            border-bottom-right-radius: 0;
+            border-right: 1px solid var(--color-accent-text);
+        }
+    }
 }
\ No newline at end of file