mirror of
https://github.com/ConvoyPanel/panel.git
synced 2026-06-12 08:22:27 +08:00
37 lines
815 B
TypeScript
37 lines
815 B
TypeScript
import styled from '@emotion/styled'
|
|
import {
|
|
Switch as MantineSwitch,
|
|
SwitchProps as MantineSwitchProps,
|
|
} from '@mantine/core'
|
|
import tw from 'twin.macro'
|
|
|
|
export interface SwitchProps extends MantineSwitchProps {}
|
|
|
|
const Switch = styled(MantineSwitch)`
|
|
& .mantine-Switch-track {
|
|
${tw`h-6 w-11 rounded-xl bg-accent-200 transition-colors border-none`}
|
|
}
|
|
|
|
& input:checked + .mantine-Switch-track {
|
|
${tw`bg-success`}
|
|
}
|
|
|
|
& .mantine-Switch-thumb {
|
|
${tw`h-5 w-5 border-none transition-all bg-background`}
|
|
}
|
|
|
|
& input:checked + * > .mantine-Switch-thumb {
|
|
left: calc(100% - 1.4rem);
|
|
}
|
|
|
|
& .mantine-Switch-label {
|
|
${tw`text-foreground`}
|
|
}
|
|
|
|
& .mantine-Switch-labelWrapper {
|
|
${tw`self-center`}
|
|
}
|
|
`
|
|
|
|
export default Switch
|