Add button groups

tobi-or-not-tobi · Oct 4, 2018 · 83af7c6 · 83af7c6
1 parent 976749c
commit 83af7c6
Show file tree

Hide file tree

Showing 5 changed files with 139 additions and 7 deletions.
diff --git a/scss/_foundation.scss b/scss/_foundation.scss
@@ -1,4 +1,4 @@
-@import '~foundation-sites/scss/foundation';
+@import '~foundation-sites/scss/foundation.scss';
 
 @mixin _foundation($button: false, $alert: false, $tabs: false, $typography: false) {
     @if $button == true {
@@ -17,6 +17,7 @@
 
 @mixin _f_button {
     @include foundation-button;
+
     button,
     a[role='button'],
     input[type='button'] {
@@ -30,6 +31,20 @@
         &.close {
             @extend .close-button !optional;
         }
+        i {
+            font-style: normal;
+        }
+    }
+    @include buttongroup();
+}
+
+@mixin buttongroup {
+    [role='group'] {
+        &:has(button),
+        &:has(a[role='button']),
+        &:has(input[type='button']) {
+            @extend .button-group !optional;
+        }
     }
 }
 

diff --git a/scss/bootstrap/_button.scss b/scss/bootstrap/_button.scss
@@ -2,8 +2,10 @@
 
 @mixin button() {
     button,
-    input[type='button'] {
-        @extend .btn, .btn-primary !optional;
+    input[type='button'],
+    a[role='button'] {
+        @extend .btn !optional;
+
         &.large {
             @extend .btn-lg !optional;
         }
@@ -19,8 +21,50 @@
         &.flat {
             @extend .btn-flat !optional;
         }
+        &[color='primary'] {
+            @extend .btn-primary !optional;
+        }
+        &[color='secondary'] {
+            @extend .btn-secondary !optional;
+        }
+    }
+
+    // colors
+    button,
+    input[type='button'] {
+        &:not([color]) {
+            @extend .btn-primary !optional;
+        }
     }
     a[role='button'] {
-        @extend .btn, .btn-link !optional;
+        @extend .btn-link !optional;
+    }
+
+    @include buttongroup();
+}
+
+@mixin buttongroup {
+    [role='group'] {
+        &:has(button),
+        &:has(a[role='button']),
+        &:has(input[type='button']) {
+            @extend .btn-group !optional;
+        }
+
+        // unfortunately we cannot extend from child classes
+        button,
+        a[role='button'],
+        input[type='button'] {
+            &:not(:last-child) {
+                border-bottom-right-radius: 0;
+                border-top-right-radius: 0;
+                // margin-right: -1px;
+            }
+            &:not(:first-child) {
+                border-bottom-left-radius: 0;
+                border-top-left-radius: 0;
+                // margin-right: -1px;
+            }
+        }
     }
 }
diff --git a/scss/bulma/_base.scss b/scss/bulma/_base.scss
diff --git a/scss/bulma/_button.scss b/scss/bulma/_button.scss
@@ -1,13 +1,12 @@
 @import '~bulma/sass/elements/button.sass';
+@import '~bulma/sass/elements/form.sass';
 
 @mixin button {
     button,
     a[role='button'],
     input[type='button'] {
         @extend .button !optional;
-        &:not([disabled]) {
-            @extend .is-primary !optional;
-        }
+
         &.large {
             @extend .is-large !optional;
         }
@@ -26,5 +25,48 @@
         &.active {
             @extend .is-active !optional;
         }
+        &:not([disabled]) {
+            &[color='primary'] {
+                @extend .is-primary !optional;
+            }
+            &[color='secondary'] {
+                @extend .is-info !optional;
+            }
+        }
+    }
+    // colors
+    button,
+    input[type='button'] {
+        &:not([color]) {
+            @extend .is-primary !optional;
+        }
+    }
+
+    @include buttongroup();
+}
+
+@mixin buttongroup {
+    [role='group'] {
+        &:has(button),
+        &:has(a[role='button']),
+        &:has(input[type='button']) {
+            @extend .has-addons !optional;
+        }
+
+        // unfortunately we cannot extend from child classes
+        button,
+        a[role='button'],
+        input[type='button'] {
+            &:not(:last-child) {
+                border-bottom-right-radius: 0;
+                border-top-right-radius: 0;
+                margin-right: -1px;
+            }
+            &:not(:first-child) {
+                border-bottom-left-radius: 0;
+                border-top-left-radius: 0;
+                margin-right: -1px;
+            }
+        }
     }
 }
diff --git a/scss/fundamental-ui/_button.scss b/scss/fundamental-ui/_button.scss
@@ -3,7 +3,9 @@
 @mixin button {
     button,
     input[type='button'] {
+        // &:not([color]) {
         @extend .fd-button !optional;
+        // }
         &:not(.outline) {
             @extend .fd-button--action-bar !optional;
         }
@@ -24,6 +26,10 @@
         &.active {
             @extend .is-selected !optional;
         }
+
+        &[color='secondary'] {
+            @extend .fd-button--secondary !optional;
+        }
     }
     &.outline {
         @extend .is-outlined !optional;
@@ -36,4 +42,29 @@
             @extend .is-disabled !optional;
         }
     }
+    @include buttongroup();
+}
+
+@mixin buttongroup {
+    [role='group'] {
+        &:has(button),
+        &:has(a[role='button']),
+        &:has(input[type='button']) {
+            @extend .fd-button-group !optional;
+        }
+        // unfortunately we cannot extend from child classes
+        button,
+        a[role='button'],
+        input[type='button'] {
+            &:not(:last-child) {
+                border-bottom-right-radius: 0;
+                border-top-right-radius: 0;
+            }
+            &:not(:first-child) {
+                border-bottom-left-radius: 0;
+                border-top-left-radius: 0;
+                margin-right: -1px;
+            }
+        }
+    }
 }