#1 --- added btn-group class for ensuring proper gaps between buttons

zshall · Mar 7, 2024 · 4f7ecbb · 4f7ecbb
1 parent 44acf66
commit 4f7ecbb
Show file tree

Hide file tree

Showing 2 changed files with 14 additions and 2 deletions.
diff --git a/doc/index.html b/doc/index.html
@@ -455,8 +455,10 @@ <h1 class="text-F1d">Dithered Text</h1>
                                                     <div class="col-10">
                                                         <p class="font-system">This is but a taste of our fury! Do you
                                                             yield?</p>
-                                                        <button class="btn">Yes</button>
-                                                        <button class="btn btn-preferred">I do not</button>
+                                                        <div class="btn-group">
+                                                            <button class="btn">Yes</button>
+                                                            <button class="btn btn-preferred">I do not</button>
+                                                        </div>
                                                     </div>
                                                 </div>
                                             </div>

diff --git a/src/scss/_buttons.scss b/src/scss/_buttons.scss
@@ -84,4 +84,14 @@ $buttonFontSize: 16px;
     a:active::before {
         @include buttonShadowInverted;
     }
+}
+
+/**
+ * Button groups
+ * If you've got more than one button, this ensures that spacing between them will always leave a gap.
+ */
+.btn-group {
+    display: flex;
+    flex-wrap: wrap;
+    gap: 0.5rem;
 }