Skip to content

Commit

Permalink
perf: outline btn border size style.
Browse files Browse the repository at this point in the history
  • Loading branch information
riccox committed Nov 7, 2023
1 parent 8f8a137 commit 3e12a34
Show file tree
Hide file tree
Showing 4 changed files with 53 additions and 13 deletions.
5 changes: 5 additions & 0 deletions apps/experiments/src/index.html
Original file line number Diff line number Diff line change
Expand Up @@ -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="">
Expand Down
21 changes: 15 additions & 6 deletions apps/website/pages/docs/components/button.en.mdx
Original file line number Diff line number Diff line change
Expand Up @@ -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>

Expand Down
21 changes: 15 additions & 6 deletions apps/website/pages/docs/components/button.zh.mdx
Original file line number Diff line number Diff line change
Expand Up @@ -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>

Expand Down
19 changes: 18 additions & 1 deletion packages/tailwind/src/style/components/button.css
Original file line number Diff line number Diff line change
Expand Up @@ -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));
Expand Down Expand Up @@ -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];
}

1 comment on commit 3e12a34

@vercel
Copy link

@vercel vercel bot commented on 3e12a34 Nov 7, 2023

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Please sign in to comment.