feat: btn-group-horizontal and btn-group-vertical classes are now…

… responsive
saadeghi · Sep 10, 2022 · f27340b · f27340b
1 parent 1f6d105
commit f27340b
Show file tree

Hide file tree

Showing 5 changed files with 71 additions and 19 deletions.
diff --git a/src/components/styled/button.css b/src/components/styled/button.css
@@ -215,20 +215,6 @@
       outline: 2px solid hsl(var(--p));
     }
   }
-  &:not(.btn-group-vertical) > .btn:not(:first-of-type) {
-    @apply -ml-px rounded-l-none;
-  }
-  &:not(.btn-group-vertical) > .btn:not(:last-of-type) {
-    @apply rounded-r-none;
-  }
-  &-vertical {
-    & > .btn:not(:first-of-type) {
-      @apply -mt-px rounded-t-none;
-    }
-    & > .btn:not(:last-of-type) {
-      @apply rounded-b-none;
-    }
-}
 }
 
 @keyframes button-pop {

diff --git a/src/components/unstyled/button.css b/src/components/unstyled/button.css
@@ -57,7 +57,4 @@
   & > input[type="radio"].btn:before {
     content: attr(data-title);
   }
-  &-vertical {
-    @apply flex-col flex-nowrap;
-  }
-}
+}
diff --git a/src/docs/src/routes/components/button-group.svelte.md b/src/docs/src/routes/components/button-group.svelte.md
@@ -14,7 +14,8 @@ published: true
 <ClassTable
 data="{[
   { type:'component', class: 'btn-group', desc: 'Container for grouping multiple buttons' },
-  { type:'component', class: 'btn-group-vertical', desc: 'Container for grouping multiple buttons (vertical)' },
+  { type:'responsive', class: 'btn-group-horizontal', desc: 'Show buttons horizontally (default)' },
+  { type:'responsive', class: 'btn-group-vertical', desc: 'Show buttons vertically' },
 ]}"
 />
 
@@ -62,6 +63,28 @@ data="{[
 }</pre>
 </Component>
 
+<Component title="Responsive - Vertical for small screen, Horizontal on large screen">
+<div class="btn-group btn-group-vertical lg:btn-group-horizontal">
+  <button class="btn btn-active">Button</button>
+  <button class="btn">Button</button>
+  <button class="btn">Button</button>
+</div>
+<pre slot="html" use:replace={{ to: $prefix }}>{
+`<div class="$$btn-group btn-group-vertical lg:btn-group-horizontal">
+  <button class="$$btn $$btn-active">Button</button>
+  <button class="$$btn">Button</button>
+  <button class="$$btn">Button</button>
+</div>`
+}</pre>
+<pre slot="react" use:replace={{ to: $prefix }}>{
+`<div className="$$btn-group $$btn-group-vertical lg:$$btn-group-horizontal">
+  <button className="$$btn $$btn-active">Button</button>
+  <button className="$$btn">Button</button>
+  <button className="$$btn">Button</button>
+</div>`
+}</pre>
+</Component>
+
 <Component title="Button group with radio buttons">
 <div class="btn-group">
   <input type="radio" name="options" data-title="1" class="btn" />

diff --git a/src/utilities/styled/button.css b/src/utilities/styled/button.css
@@ -0,0 +1,38 @@
+/* group */
+.btn-group,
+.btn-group.btn-group-horizontal {
+  .btn:not(:first-of-type):not(:last-of-type) {
+    border-top-left-radius: 0;
+    border-top-right-radius: 0;
+    border-bottom-left-radius: 0;
+    border-bottom-right-radius: 0;
+  }
+  .btn:first-of-type {
+    @apply -ml-px -mt-0;
+    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-of-type {
+    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-group.btn-group-vertical {
+  .btn:first-of-type {
+    @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;
+  }
+  .btn:last-of-type {
+    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);
+  }
+}
diff --git a/src/utilities/unstyled/button.css b/src/utilities/unstyled/button.css
@@ -50,3 +50,11 @@
     }
   }
 }
+
+/* group */
+.btn-group-horizontal {
+  @apply flex-row flex-wrap;
+}
+.btn-group-vertical {
+  @apply flex-col flex-nowrap;
+}