perf: outline btn border size style.

riazer-lab · Nov 7, 2023 · 3e12a34 · 3e12a34 · vercel · Nov 7, 2023
1 parent 8f8a137
commit 3e12a34
Show file tree

Hide file tree

Showing 4 changed files with 53 additions and 13 deletions.
diff --git a/apps/experiments/src/index.html b/apps/experiments/src/index.html
@@ -143,6 +143,11 @@ <h2 class="text-xl">Sizes</h2>
           <button class="btn solid success md">A MD Button</button>
           <button class="btn solid success lg">A LG Button</button>
           <button class="btn solid success xl">A XL Button</button>
+          <button class="btn outline danger xs">Outline xs</button>
+          <button class="btn outline danger sm">Outline sm</button>
+          <button class="btn outline danger md">Outline md</button>
+          <button class="btn outline danger lg">Outline lg</button>
+          <button class="btn outline danger xl">Outline xl</button>
         </div>
       </div>
       <div class="">

diff --git a/apps/website/pages/docs/components/button.en.mdx b/apps/website/pages/docs/components/button.en.mdx
@@ -188,12 +188,21 @@ Button colors.
 ## Sizes
 
 <CodeDemo>
-  <div className="flex gap-2 flex-wrap">
-    <button className="btn solid success xs">XS</button>
-    <button className="btn solid success sm">SM</button>
-    <button className="btn solid success md">MD</button>
-    <button className="btn solid success lg">LG</button>
-    <button className="btn solid success xl">XL</button>
+  <div className="grid gap-2">
+    <div className="flex gap-2 flex-wrap">
+      <button className="btn solid success xs">XS</button>
+      <button className="btn solid success sm">SM</button>
+      <button className="btn solid success md">MD</button>
+      <button className="btn solid success lg">LG</button>
+      <button className="btn solid success xl">XL</button>
+    </div>
+    <div className="flex gap-2 flex-wrap">
+      <button class="btn outline danger xs">Outline xs</button>
+      <button class="btn outline danger sm">Outline sm</button>
+      <button class="btn outline danger md">Outline md</button>
+      <button class="btn outline danger lg">Outline lg</button>
+      <button class="btn outline danger xl">Outline xl</button>
+    </div>
   </div>
 </CodeDemo>
 

diff --git a/apps/website/pages/docs/components/button.zh.mdx b/apps/website/pages/docs/components/button.zh.mdx
@@ -186,12 +186,21 @@ import { ClassNameTable } from '../../../components/ClassNameTable.tsx';
 ## 尺寸
 
 <CodeDemo>
-  <div className="flex gap-2 flex-wrap">
-    <button className="btn solid success xs">超小尺寸</button>
-    <button className="btn solid success sm">较小尺寸</button>
-    <button className="btn solid success md">中等尺寸</button>
-    <button className="btn solid success lg">较大尺寸</button>
-    <button className="btn solid success xl">超大尺寸</button>
+  <div className="grid gap-2">
+    <div className="flex gap-2 flex-wrap">
+      <button className="btn solid success xs">超小尺寸</button>
+      <button className="btn solid success sm">较小尺寸</button>
+      <button className="btn solid success md">中等尺寸</button>
+      <button className="btn solid success lg">较大尺寸</button>
+      <button className="btn solid success xl">超大尺寸</button>
+    </div>
+    <div className="flex gap-2 flex-wrap">
+      <button class="btn outline danger xs">超小尺寸</button>
+      <button class="btn outline danger sm">较小尺寸</button>
+      <button class="btn outline danger md">中等尺寸</button>
+      <button class="btn outline danger lg">较大尺寸</button>
+      <button class="btn outline danger xl">超大尺寸</button>
+    </div>
   </div>
 </CodeDemo>
 

diff --git a/packages/tailwind/src/style/components/button.css b/packages/tailwind/src/style/components/button.css
@@ -22,7 +22,7 @@
 
 /* Outline */
 .btn.outline {
-  @apply border-2 bg-transparent;
+  @apply bg-transparent;
   border-color: rgb(var(--sira-color-800));
   --tw-text-opacity: 1;
   color: rgba(var(--sira-color-800), var(--tw-text-opacity));
@@ -159,3 +159,20 @@
 .btn.compact.xl {
   @apply p-5;
 }
+
+.btn.outline.xs {
+  @apply border;
+}
+.btn.outline.sm {
+  @apply border;
+}
+.btn.outline,
+.btn.outline.md {
+  @apply border-2;
+}
+.btn.outline.lg {
+  @apply border-2;
+}
+.btn.outline.xl {
+  @apply border-[3px];
+}