Niklas/shadcn-vue
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

switch

Browse Source
This commit is contained in:
khairulhaaziq 2023-07-18 07:00:55 +08:00
parent 9f2ff37189
commit 7857d6246a
1 changed files with 20 additions and 9 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

29
packages/shadcn-vue/src/components/uiv2/cva.ts
View File

@ -48,24 +48,35 @@ export const SwitchClass = cva("", {
variant: { variant: {
default: "", default: "",
}, },
size: { size: {
1: "", 1: "",
2: "", 2: "",
}, },
component: { component: {
root: "unset box-border select-none [&::before]:box-border [&::after]:box-border inline-flex items-center justify-center leading-none m-0 outline-none bg-[#e6e8eb] rounded-full relative focus-within:shadow-[0_0_0_2px_#c1c8cd] data-[state=checked]:bg-[#0091ff] data-[state=checked]:focus-within:shadow-[0_0_0_2px_#5eb0ef]", root: "unset box-border select-none [&::before]:box-border [&::after]:box-border inline-flex items-center justify-center leading-none m-0 outline-none bg-[#e6e8eb] rounded-full relative focus-within:shadow-[0_0_0_2px_#c1c8cd] data-[state=checked]:bg-[#0091ff] data-[state=checked]:focus-within:shadow-[0_0_0_2px_#5eb0ef]",
thumb: "absolute left-0 bg-white rounded-full shadow-switch transition-transform duration-100 ease-[cubic-bezier(0.22,_1,_0.36,_1)]", thumb:
"absolute left-0 bg-white rounded-full shadow-switch transition-transform duration-100 ease-[cubic-bezier(0.22,_1,_0.36,_1)]",
}, },
}, },
compoundVariants: [ compoundVariants: [
{ size: 1, component: "root", class: "w-[25px] h-[15px]" }, { size: 1, component: "root", class: "w-[25px] h-[15px]" },
{ size: 2, component: "root", class: "w-[45px] h-[25px]" }, { size: 2, component: "root", class: "w-[45px] h-[25px]" },
{ size: 1, component: "thumb", class: "w-[13px] h-[13px] translate-x-[1px] data-[state=checked]:translate-x-[11px]" }, {
{ size: 2, component: "thumb", class: "w-[21px] h-[21px] translate-x-0.5 data-[state=checked]:translate-x-[22px]" }, size: 1,
component: "thumb",
class:
"w-[13px] h-[13px] translate-x-[1px] data-[state=checked]:translate-x-[11px]",
},
{
size: 2,
component: "thumb",
class:
"w-[21px] h-[21px] translate-x-0.5 data-[state=checked]:translate-x-[22px]",
},
], ],
defaultVariants: { defaultVariants: {
variant: "default", variant: "default",
size: 1, size: 1,
}, },
}); });
export type SwitchClassProps = VariantProps<typeof SwitchClass>; export type SwitchClassProps = VariantProps<typeof SwitchClass>;