fix: #1666 Button group responsive classes not working properly.

saadeghi · Mar 9, 2023 · c2c41e5 · c2c41e5
1 parent f65463c
commit c2c41e5
Showing 1 changed file with 37 additions and 17 deletions.
diff --git a/src/utilities/styled/button.css b/src/utilities/styled/button.css
@@ -1,14 +1,13 @@
 /* group */
-.btn-group,
-.btn-group.btn-group-horizontal {
+.btn-group {
   .btn:not(:first-child):not(:last-child) {
     border-top-left-radius: 0;
     border-top-right-radius: 0;
     border-bottom-left-radius: 0;
     border-bottom-right-radius: 0;
   }
   .btn:first-child:not(:last-child) {
-    @apply -ml-px -mt-0;
+    @apply -mt-0 -ml-px;
     border-top-left-radius: var(--rounded-btn, 0.5rem);
     border-top-right-radius: 0;
     border-bottom-left-radius: var(--rounded-btn, 0.5rem);
@@ -20,19 +19,40 @@
     border-bottom-left-radius: 0;
     border-bottom-right-radius: var(--rounded-btn, 0.5rem);
   }
-}
-.btn-group.btn-group-vertical {
-  .btn:first-child:not(:last-child) {
-    @apply -ml-0 -mt-px;
-    border-top-left-radius: var(--rounded-btn, 0.5rem);
-    border-top-right-radius: var(--rounded-btn, 0.5rem);
-    border-bottom-left-radius: 0;
-    border-bottom-right-radius: 0;
+  &-horizontal {
+    .btn:not(:first-child):not(:last-child) {
+      border-top-left-radius: 0;
+      border-top-right-radius: 0;
+      border-bottom-left-radius: 0;
+      border-bottom-right-radius: 0;
+    }
+    .btn:first-child:not(:last-child) {
+      @apply -mt-0 -ml-px;
+      border-top-left-radius: var(--rounded-btn, 0.5rem);
+      border-top-right-radius: 0;
+      border-bottom-left-radius: var(--rounded-btn, 0.5rem);
+      border-bottom-right-radius: 0;
+    }
+    .btn:last-child:not(:first-child) {
+      border-top-left-radius: 0;
+      border-top-right-radius: var(--rounded-btn, 0.5rem);
+      border-bottom-left-radius: 0;
+      border-bottom-right-radius: var(--rounded-btn, 0.5rem);
+    }
   }
-  .btn:last-child:not(:first-child) {
-    border-top-left-radius: 0;
-    border-top-right-radius: 0;
-    border-bottom-left-radius: var(--rounded-btn, 0.5rem);
-    border-bottom-right-radius: var(--rounded-btn, 0.5rem);
+  &-vertical {
+    .btn:first-child:not(:last-child) {
+      @apply -mt-px -ml-0;
+      border-top-left-radius: var(--rounded-btn, 0.5rem);
+      border-top-right-radius: var(--rounded-btn, 0.5rem);
+      border-bottom-left-radius: 0;
+      border-bottom-right-radius: 0;
+    }
+    .btn:last-child:not(:first-child) {
+      border-top-left-radius: 0;
+      border-top-right-radius: 0;
+      border-bottom-left-radius: var(--rounded-btn, 0.5rem);
+      border-bottom-right-radius: var(--rounded-btn, 0.5rem);
+    }
   }
-}
+}