feat: add btn-group-vertical

saadeghi · Jun 22, 2022 · 41ce08c · 41ce08c
1 parent d24bf5b
commit 41ce08c
Show file tree

Hide file tree

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

diff --git a/src/docs/src/routes/components/button-group.svelte.md b/src/docs/src/routes/components/button-group.svelte.md
@@ -14,6 +14,7 @@ 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)' },
 ]}"
 />
 
@@ -32,6 +33,21 @@ data="{[
 }</pre>
 </Component>
 
+<Component title="Button group vertical">
+<div class="btn-group btn-group-vertical">
+  <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">
+  <button class="$$btn $$btn-active">Button</button>
+  <button class="$$btn">Button</button>
+  <button class="$$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" />