fix(tailwind): remove max & min width(or height) of some components.

riazer-lab · Feb 7, 2023 · f0c1bd6 · f0c1bd6 · vercel · Feb 7, 2023
1 parent 610ac9b
commit f0c1bd6
Show file tree

Hide file tree

Showing 5 changed files with 16 additions and 15 deletions.
diff --git a/apps/website/pages/docs/components/input.mdx b/apps/website/pages/docs/components/input.mdx
@@ -24,13 +24,13 @@ import { CodeDemo } from '../../../components/demo/code';
 
 ## Size
 
-<CodeDemo overrideClasses="input xs sm md lg xl">
+<CodeDemo overrideClasses="input">
   <div className="grid gap-4">
-    <input className="!input success !xs" placeholder="xs" />
-    <input className="!input success !sm" placeholder="sm" />
-    <input className="!input success !md" placeholder="md" />
-    <input className="!input success !lg" placeholder="lg" />
-    <input className="!input success !xl" placeholder="xl" />
+    <input className="!input success xs" placeholder="xs" />
+    <input className="!input success sm" placeholder="sm" />
+    <input className="!input success md" placeholder="md" />
+    <input className="!input success lg" placeholder="lg" />
+    <input className="!input success xl" placeholder="xl" />
   </div>
 </CodeDemo>
 

diff --git a/packages/tailwind/src/style/components/avatar.css b/packages/tailwind/src/style/components/avatar.css
@@ -1,5 +1,5 @@
 .avatar {
-  @apply relative inline-flex max-w-xs justify-center items-center ring-offset-2 text-xs overflow-hidden;
+  @apply relative inline-flex justify-center items-center ring-offset-2 text-xs overflow-hidden;
   background-color: rgb(var(--sira-color-300));
   color: rgb(var(--sira-color-1000));
   --tw-ring-offset-color: rgb(var(--sira-colors-bw-100));

diff --git a/packages/tailwind/src/style/components/button.css b/packages/tailwind/src/style/components/button.css
@@ -1,9 +1,8 @@
 /* Base Button */
 .btn {
-  @apply h-10 min-h-[2.5rem] px-5 text-sm;
   @apply rounded-xl cursor-pointer select-none transition-transform outline-none active:scale-[0.97];
   @apply inline-flex items-center justify-center;
-  @apply text-center text-sm font-semibold;
+  @apply text-center font-semibold;
 }
 
 /* Solid */
@@ -73,19 +72,20 @@
 }
 
 .btn.sm {
-  @apply h-[2rem] min-h-[2rem] rounded-lg  px-3 text-sm;
+  @apply h-[2rem] min-h-[2rem] rounded-lg px-3 text-sm;
 }
 
+.btn,
 .btn.md {
-  @apply h-10 min-h-[2.5rem]  px-5 text-sm;
+  @apply h-10 min-h-[2.5rem] px-5 text-sm;
 }
 
 .btn.lg {
-  @apply h-[3rem] min-h-[3rem]  px-6 text-lg;
+  @apply h-[3rem] min-h-[3rem] px-6 text-lg;
 }
 
 .btn.xl {
-  @apply h-[4rem] min-h-[4rem]  rounded-2xl px-8 text-xl;
+  @apply h-[4rem] min-h-[4rem] rounded-2xl px-8 text-xl;
 }
 
 .btn:disabled {

diff --git a/packages/tailwind/src/style/components/input.css b/packages/tailwind/src/style/components/input.css
@@ -9,7 +9,7 @@
   --tw-border-opacity: 0.9;
   border-color: rgba(var(--sira-colors-bw-300), var(--tw-border-opacity));
 
-  @apply h-fit w-full max-w-xs rounded-xl py-2.5 px-3 text-base outline-none;
+  @apply w-full rounded-xl py-2.5 px-3 outline-none;
   @apply border hover:ring focus:ring;
   @apply bg-transparent transition-all;
 }
@@ -50,6 +50,7 @@
   @apply h-10 text-sm;
 }
 
+.input,
 .input.md {
   @apply h-12 text-base;
 }

diff --git a/packages/tailwind/src/style/components/select.css b/packages/tailwind/src/style/components/select.css
@@ -13,7 +13,7 @@
   color: rgba(var(--sira-color-1000), var(--tw-text-opacity));
   accent-color: rgb(var(--sira-color-500));
 
-  @apply transition-colors outline-none h-fit w-full max-w-xs py-2 px-3 rounded-xl bg-no-repeat border-2;
+  @apply transition-colors outline-none h-fit w-full py-2 px-3 rounded-xl bg-no-repeat border-2;
 }
 
 /* Ghost */