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

… responsive
Avensen · Jun 5, 2023 · 5dcd893 · 5dcd893
1 parent 7a24b79
commit 5dcd893
Show file tree

Hide file tree

Showing 2 changed files with 24 additions and 59 deletions.
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