feat: add checkbox sizes (xs, sm, md, lg)

saadeghi · Jul 18, 2021 · 1502e46 · 1502e46
1 parent 95c1f8c
commit 1502e46
Show file tree

Hide file tree

Showing 2 changed files with 24 additions and 0 deletions.
diff --git a/src/docs/pages/components/form/checkbox.vue b/src/docs/pages/components/form/checkbox.vue
@@ -9,6 +9,10 @@
         { class: 'checkbox-primary', desc: 'Adds `primary` to checkbox' },
         { class: 'checkbox-secondary', desc: 'Adds `secondary` to checkbox' },
         { class: 'checkbox-accent', desc: 'Adds `accent` to checkbox' },
+        { class: 'checkbox-lg', desc: 'Large checkbox' },
+        { class: 'checkbox-md', desc: 'Medium checkbox (default)' },
+        { class: 'checkbox-sm', desc: 'Small checkbox' },
+        { class: 'checkbox-xs', desc: 'Extra small checkbox' },
       ]
     }"/>
     <Wrapper title="checkbox" classes="flex flex-col space-y-2 max-w-xs">
@@ -54,6 +58,12 @@
         </FormControl>
       </div>
     </Wrapper>
+    <Wrapper title="checkbox sizes" classes="flex flex-col space-y-2 max-w-xs">
+      <Checkbox classes="checkbox-xs" />
+      <Checkbox classes="checkbox-sm" />
+      <Checkbox classes="checkbox-md" />
+      <Checkbox classes="checkbox-lg" />
+    </Wrapper>
     <Wrapper title="checkbox disabled" classes="flex flex-col space-y-2 max-w-xs">
       <div class="p-6 card bordered">
         <FormControl>

diff --git a/src/utilities/unstyled/checkbox.css b/src/utilities/unstyled/checkbox.css
@@ -0,0 +1,14 @@
+.checkbox{
+  &-xs {
+    @apply w-4 h-4;
+  }
+  &-sm {
+    @apply w-5 h-5;
+  }
+  &-md {
+    @apply w-6 h-6;
+  }
+  &-lg {
+    @apply w-8 h-8;
+  }
+}