fix: saadeghi#27

button, badge, input and select component sizes are now responsive
Avensen · Jun 5, 2023 · c5f1e5d · c5f1e5d
1 parent 4dc9719
commit c5f1e5d
Show file tree

Hide file tree

Showing 8 changed files with 127 additions and 100 deletions.
diff --git a/src/components/base/badge.css b/src/components/base/badge.css
@@ -1,12 +1,4 @@
 .badge {
   @apply inline-flex transition duration-200 ease-in-out justify-center items-center;
-  &{
-    @apply text-sm leading-5 px-3;
-  }
-  &-lg{
-    @apply text-base leading-6 px-3;
-  }
-  &-sm{
-    @apply text-xs leading-4 px-2;
-  }
+  @apply text-sm leading-5 px-3;
 }
diff --git a/src/components/base/button.css b/src/components/base/button.css
@@ -1,5 +1,6 @@
 .btn {
   @apply inline-flex flex-wrap items-center justify-center text-center cursor-pointer select-none transition duration-200 ease-in-out rounded-btn flex-shrink-0;
+  @apply px-4 leading-loose h-12 text-sm min-h-12;
   &:focus {
     @apply outline-none;
   }
@@ -10,57 +11,12 @@
     @apply pointer-events-none;
   }
 
-  /* sizes */
-  & {
-    @apply px-4 leading-loose h-12 text-sm min-h-12;
-  }
-  &-lg {
-    @apply px-6 leading-loose h-16 text-lg min-h-16;
-  }
-  &-sm {
-    @apply px-3 leading-8 h-8 text-sm min-h-8;
-  }
-  &-xs {
-    @apply px-2 text-xs leading-relaxed h-6 min-h-6;
-  }
-  &-wide {
-    @apply w-64;
-  }
-
-  /* block */
-  &-block {
-    @apply w-full;
-  }
-
-
   /* shapes */
   &-square {
-    &.btn-xs {
-      @apply h-6 w-6 p-0;
-    }
-    &.btn-sm {
-      @apply h-8 w-8 p-0;
-    }
-    & {
-      @apply h-12 w-12 p-0;
-    }
-    &.btn-lg {
-      @apply h-16 w-16 p-0;
-    }
+    @apply h-12 w-12 p-0;
   }
   &-circle {
-    &.btn-xs {
-      @apply rounded-full h-6 w-6 p-0;
-    }
-    &.btn-sm {
-      @apply rounded-full h-8 w-8 p-0;
-    }
-    & {
-      @apply rounded-full h-12 w-12 p-0;
-    }
-    &.btn-lg {
-      @apply rounded-full h-16 w-16 p-0;
-    }
+    @apply rounded-full h-12 w-12 p-0;
   }
 
   /* loading */

diff --git a/src/components/base/input.css b/src/components/base/input.css
@@ -1,18 +1,7 @@
 
 .input{
   @apply transition duration-200 ease-in-out flex-shrink;
-  &{
-    @apply px-4 h-12 text-sm leading-loose;
-  }
-  &-lg{
-    @apply px-6 h-16 text-lg leading-loose;
-  }
-  &-sm{
-    @apply px-3 h-8 text-sm leading-8;
-  }
-  &-xs{
-    @apply px-2 h-6 text-xs leading-relaxed;
-  }
+  @apply px-4 h-12 text-sm leading-loose;
   &:focus {
     @apply outline-none;
   }

diff --git a/src/components/base/select.css b/src/components/base/select.css
@@ -1,5 +1,6 @@
 .select {
   @apply inline-flex cursor-pointer flex-shrink-0 appearance-none select-none;
+  @apply px-4 leading-loose h-12 text-sm min-h-12;
   &:focus {
     @apply outline-none;
   }
@@ -10,17 +11,4 @@
     @apply pointer-events-none;
   }
 
-  /* sizes */
-  & {
-    @apply px-4 leading-loose h-12 text-sm min-h-12;
-  }
-  &-lg {
-    @apply px-6 leading-loose h-16 text-lg min-h-16;
-  }
-  &-sm {
-    @apply px-3 leading-8 h-8 text-sm min-h-8;
-  }
-  &-xs {
-    @apply px-2 text-xs leading-relaxed h-6 min-h-6;
-  }
 }
diff --git a/src/components/base/tab.css b/src/components/base/tab.css
@@ -3,23 +3,6 @@
 }
 .tab{
   @apply inline-flex flex-wrap items-center justify-center text-center cursor-pointer relative select-none;
-
-  /* sizes */
-  & {
-    @apply leading-loose h-8 text-sm;
-    --tab-padding: 1rem;
-  }
-  &-lg {
-    @apply leading-loose h-12 text-lg;
-    --tab-padding: 1.25rem;
-  }
-  &-sm {
-    @apply leading-3 h-6 text-sm;
-    --tab-padding: .75rem;
-  }
-  &-xs {
-    @apply leading-3 h-5 text-xs;
-    --tab-padding: .5rem;
-  }
-
+  @apply leading-loose h-8 text-sm;
+  --tab-padding: 1rem;
 }
diff --git a/src/docs/pages/components/button.vue b/src/docs/pages/components/button.vue
@@ -40,6 +40,16 @@
       <Button classes="btn-error">error</Button>
     </Wrapper>
 
+    <Wrapper classes="flex flex-wrap items-start space-x-2 flex-row" title="responsive buttons">
+      <Button classes="btn-xs md:btn-sm lg:btn-md xl:btn-lg">resize your browser</Button>
+      <Button classes="btn-square btn-xs md:btn-sm lg:btn-md xl:btn-lg">
+        <Icon glyph="close" class="inline-block w-4 h-4 stroke-current md:w-6 md:h-6" />
+      </Button>
+      <Button classes="btn-circle btn-xs md:btn-sm lg:btn-md xl:btn-lg">
+        <Icon glyph="close" class="inline-block w-4 h-4 stroke-current md:w-6 md:h-6" />
+      </Button>
+    </Wrapper>
+
     <Wrapper classes="flex flex-wrap items-start md:space-x-2 space-y-2 md:space-y-0 flex-col md:flex-row" title="glass">
       <div class="p-20 bg-cover card bg-base-200" style="background-image: url(https://picsum.photos/id/314/400/300)">
         <Button classes="glass">Glass button</Button>

diff --git a/src/utilities/postcss.config.js b/src/utilities/postcss.config.js
@@ -1,5 +1,12 @@
 module.exports = {
   plugins: [
+    require('postcss-import'),
+    require('tailwindcss')('src/tailwind.config.js'),
+    require('postcss-nested')({
+      "bubble": [
+        "screen"
+      ]
+    }),
     require('autoprefixer'),
     require('cssnano')({
       "preset": [

diff --git a/src/utilities/responsiveComponent.css b/src/utilities/responsiveComponent.css
@@ -10,4 +10,106 @@
       max-width: none;
     }
   }
+}
+.badge{
+  &-sm{
+    @apply text-xs leading-4 px-2;
+  }
+  &-lg{
+    @apply text-base leading-6 px-3;
+  }
+}
+.btn{
+  &-xs {
+    @apply px-2 text-xs leading-relaxed h-6 min-h-6;
+  }
+  &-sm {
+    @apply px-3 leading-8 h-8 text-sm min-h-8;
+  }
+  &-md {
+    @apply px-4 leading-loose h-12 text-sm min-h-12;
+  }
+  &-lg {
+    @apply px-6 leading-loose h-16 text-lg min-h-16;
+  }
+  &-wide {
+    @apply w-64;
+  }
+  &-block {
+    @apply w-full;
+  }
+  &-square{
+    &.btn-xs {
+      @apply h-6 w-6 p-0;
+    }
+    &.btn-sm {
+      @apply h-8 w-8 p-0;
+    }
+    &.btn-md {
+      @apply h-12 w-12 p-0;
+    }
+    &.btn-lg {
+      @apply h-16 w-16 p-0;
+    }
+  }
+  &-circle{
+    &.btn-xs {
+      @apply rounded-full h-6 w-6 p-0;
+    }
+    &.btn-sm {
+      @apply rounded-full h-8 w-8 p-0;
+    }
+    &.btn-md {
+      @apply rounded-full h-12 w-12 p-0;
+    }
+    &.btn-lg {
+      @apply rounded-full h-16 w-16 p-0;
+    }
+  }
+}
+.input{
+  &-md{
+    @apply px-4 h-12 text-sm leading-loose;
+  }
+  &-lg{
+    @apply px-6 h-16 text-lg leading-loose;
+  }
+  &-sm{
+    @apply px-3 h-8 text-sm leading-8;
+  }
+  &-xs{
+    @apply px-2 h-6 text-xs leading-relaxed;
+  }
+}
+.select {
+  &-md {
+    @apply px-4 leading-loose h-12 text-sm min-h-12;
+  }
+  &-lg {
+    @apply px-6 leading-loose h-16 text-lg min-h-16;
+  }
+  &-sm {
+    @apply px-3 leading-8 h-8 text-sm min-h-8;
+  }
+  &-xs {
+    @apply px-2 text-xs leading-relaxed h-6 min-h-6;
+  }
+}
+.tab{
+  &-md {
+    @apply leading-loose h-8 text-sm;
+    --tab-padding: 1rem;
+  }
+  &-lg {
+    @apply leading-loose h-12 text-lg;
+    --tab-padding: 1.25rem;
+  }
+  &-sm {
+    @apply leading-3 h-6 text-sm;
+    --tab-padding: .75rem;
+  }
+  &-xs {
+    @apply leading-3 h-5 text-xs;
+    --tab-padding: .5rem;
+  }
 }