From af7a627fecae62f1487af53fa819766efcbda327 Mon Sep 17 00:00:00 2001
From: Yan Zhu <picturepan2@hotmail.com>
Date: Fri, 8 Apr 2016 16:20:20 +0800
Subject: add responsive to ban-group

---
 src/buttons.less | 77 ++++++++++++++++++++++++++++++++++++++------------------
 1 file changed, 52 insertions(+), 25 deletions(-)

(limited to 'src')

diff --git a/src/buttons.less b/src/buttons.less
index 9d129e2..bc138b3 100644
--- a/src/buttons.less
+++ b/src/buttons.less
@@ -168,35 +168,62 @@
   }
 }
 
-.btn-group {
-  display: inline-flex;
-
-  .btn {
-    flex: 1 0 auto;
-
-    &:first-child:not(:last-child) {
-      border-top-right-radius: 0;
-      border-bottom-right-radius: 0;
-    }
-    &:not(:first-child):not(:last-child) {
-      margin-left: -.1rem;
-      border-radius: 0;
-      z-index: 49;
-    }
-    &:last-child:not(:first-child) {
-      margin-left: -.1rem;
-      border-top-left-radius: 0;
-      border-bottom-left-radius: 0;
-      z-index: 99;
+// Button groups
+@media screen and (min-width: 481px) {
+  .btn-group {
+    display: inline-flex;
+    flex-wrap: wrap;
+
+    .btn {
+      flex: 1 0 auto;
+
+      &:first-child:not(:last-child) {
+        border-top-right-radius: 0;
+        border-bottom-right-radius: 0;
+      }
+      &:not(:first-child):not(:last-child) {
+        margin-left: -.1rem;
+        border-radius: 0;
+      }
+      &:last-child:not(:first-child) {
+        margin-left: -.1rem;
+        border-top-left-radius: 0;
+        border-bottom-left-radius: 0;
+      }
+      &:hover,
+      &:focus {
+        z-index: 99;
+      }
     }
-    &:hover,
-    &:focus {
-      z-index: 99;
+
+    &.btn-group-block {
+      display: flex;
     }
   }
-
-  &.btn-group-block {
+}
+// Responsive button groups
+@media screen and (max-width: 480px) {
+  .btn-group {
     display: flex;
+    flex-wrap: wrap;
+
+    .btn {
+      flex: 1 0 100%;
+
+      &:first-child:not(:last-child) {
+        border-bottom-left-radius: 0;
+        border-bottom-right-radius: 0;
+      }
+      &:not(:first-child):not(:last-child) {
+        margin-top: -.1rem;
+        border-radius: 0;
+      }
+      &:last-child:not(:first-child) {
+        margin-top: -.1rem;
+        border-top-left-radius: 0;
+        border-top-right-radius: 0;
+      }
+    }
   }
 }
 
-- 
cgit v1.3.1-23-gd82d