mirror of
https://github.com/dzeiocom/components.git
synced 2025-04-22 10:52:16 +00:00
Fixed Checkbox
Signed-off-by: Avior <florian.bouillon@delta-wings.net>
This commit is contained in:
parent
b13a40ef18
commit
3bde426325
GPG Key ID:
50BD648F12C86AB6
@ -5,28 +5,33 @@ $backColor = #757575
|
||||
.label
|
||||
position relative
|
||||
display flex
|
||||
padding-left 8px
|
||||
margin 8px
|
||||
user-select none
|
||||
align-items center
|
||||
|
||||
+ .label
|
||||
margin-top 8px
|
||||
|
||||
p
|
||||
margin-left 18px
|
||||
margin-left 8px
|
||||
|
||||
span
|
||||
top 0
|
||||
left 0
|
||||
width 20px
|
||||
height @width
|
||||
position absolute
|
||||
box-shadow inset 0 0 0 2px $backColor
|
||||
position relative
|
||||
box-shadow inset 0 0 0 2px $grayDark
|
||||
border-radius 2px
|
||||
transition all $transition
|
||||
|
||||
@media (prefers-color-scheme dark)
|
||||
box-shadow inset 0 0 0 2px $grayLight
|
||||
|
||||
&::after
|
||||
border-radius 20px
|
||||
position absolute
|
||||
transition all $transition
|
||||
background $default
|
||||
background $main
|
||||
|
||||
svg
|
||||
transition $transition
|
||||
@ -41,19 +46,9 @@ $backColor = #757575
|
||||
left 0
|
||||
opacity 0
|
||||
|
||||
&:focus + span
|
||||
box-shadow inset 0 0 0 2px black, 0 0 0 2px rgba(black,.3)
|
||||
@media (prefers-color-scheme dark)
|
||||
box-shadow inset 0 0 0 2px white, 0 0 0 2px rgba(white,.3)
|
||||
|
||||
&:focus:checked + span
|
||||
box-shadow inset 0 0 0 2px $default, 0 0 0 2px rgba($default,.3)
|
||||
@media (prefers-color-scheme dark)
|
||||
box-shadow inset 0 0 0 2px $default, 0 0 0 2px rgba($default,.3)
|
||||
|
||||
&:checked + span
|
||||
background rgba($default, .5)
|
||||
box-shadow inset 0 0 0 2px $default
|
||||
background rgba($main, .5)
|
||||
box-shadow inset 0 0 0 2px $main
|
||||
|
||||
svg
|
||||
color white
|
||||
@ -67,7 +62,6 @@ $backColor = #757575
|
||||
box-shadow inset 0 0 0 2px white
|
||||
|
||||
.radio
|
||||
margin-left 18px // Margin + margin for Circle
|
||||
span
|
||||
border-radius 20px
|
||||
|
||||
@ -86,20 +80,19 @@ $backColor = #757575
|
||||
.switch
|
||||
padding 2px 0 2px 10px // 2px base padding 10px circle padding
|
||||
|
||||
&:hover span
|
||||
box-shadow none
|
||||
|
||||
&::after
|
||||
&:hover span::after
|
||||
background black
|
||||
@media (prefers-color-scheme dark)
|
||||
background white
|
||||
|
||||
span
|
||||
width 28px
|
||||
height 14px
|
||||
border-radius 20px
|
||||
top 50%
|
||||
margin-right 10px
|
||||
box-shadow none
|
||||
background rgba($backColor, .5)
|
||||
transform translateY(-50%)
|
||||
|
||||
&::after
|
||||
content " "
|
||||
@ -115,93 +108,39 @@ $backColor = #757575
|
||||
width 20px
|
||||
|
||||
&:checked + span
|
||||
box-shadow none
|
||||
|
||||
&::after
|
||||
left 100%
|
||||
transform translate(-50%, -50%)
|
||||
background $default
|
||||
|
||||
.primary
|
||||
$color = $primary
|
||||
background $main
|
||||
|
||||
checkBox($color)
|
||||
input:checked + span
|
||||
background rgba($color, .5)
|
||||
box-shadow inset 0 0 0 2px $color
|
||||
|
||||
&::after
|
||||
background $color
|
||||
|
||||
input:focus:checked + span
|
||||
box-shadow inset 0 0 0 2px $color, 0 0 0 2px rgba($color,.3)
|
||||
&.switch
|
||||
input:checked + span
|
||||
box-shadow none
|
||||
|
||||
.secondary
|
||||
$color = $secondary
|
||||
|
||||
input:checked + span
|
||||
background rgba($color, .5)
|
||||
box-shadow inset 0 0 0 2px $color
|
||||
|
||||
&::after
|
||||
background $color
|
||||
|
||||
&.switch
|
||||
input:checked + span
|
||||
box-shadow none
|
||||
|
||||
.info
|
||||
$color = $info
|
||||
|
||||
input:checked + span
|
||||
background rgba($color, .5)
|
||||
box-shadow inset 0 0 0 2px $color
|
||||
|
||||
&::after
|
||||
background $color
|
||||
|
||||
&.switch
|
||||
input:checked + span
|
||||
box-shadow none
|
||||
checkBox($infoLight)
|
||||
@media (prefers-color-scheme dark)
|
||||
checkBox($infoDark)
|
||||
|
||||
.success
|
||||
$color = $success
|
||||
checkBox($successLight)
|
||||
@media (prefers-color-scheme dark)
|
||||
checkBox($successDark)
|
||||
|
||||
input:checked + span
|
||||
background rgba($color, .5)
|
||||
box-shadow inset 0 0 0 2px $color
|
||||
|
||||
&::after
|
||||
background $color
|
||||
|
||||
&.switch
|
||||
input:checked + span
|
||||
box-shadow none
|
||||
|
||||
.danger
|
||||
$color = $danger
|
||||
|
||||
input:checked + span
|
||||
background rgba($color, .5)
|
||||
box-shadow inset 0 0 0 2px $color
|
||||
|
||||
&::after
|
||||
background $color
|
||||
|
||||
&.switch
|
||||
input:checked + span
|
||||
box-shadow none
|
||||
.error
|
||||
checkBox($errorLight)
|
||||
@media (prefers-color-scheme dark)
|
||||
checkBox($errorDark)
|
||||
|
||||
.warning
|
||||
$color = $warning
|
||||
|
||||
input:checked + span
|
||||
background rgba($color, .5)
|
||||
box-shadow inset 0 0 0 2px $color
|
||||
|
||||
&::after
|
||||
background $color
|
||||
|
||||
&.switch
|
||||
input:checked + span
|
||||
box-shadow none
|
||||
checkBox($warningLight)
|
||||
@media (prefers-color-scheme dark)
|
||||
checkBox($warningDark)
|
||||
|
||||
@ -7,38 +7,32 @@ import css from './Checkbox.module.styl'
|
||||
import Text from '../Text'
|
||||
|
||||
interface Props extends React.DetailedHTMLProps<React.InputHTMLAttributes<HTMLInputElement>, HTMLInputElement> {
|
||||
label?: string
|
||||
id: string
|
||||
type?: undefined
|
||||
radio?: boolean
|
||||
switch?: boolean
|
||||
color?: ColorType
|
||||
label: string
|
||||
type?: 'checkbox' | 'radio' | 'switch'
|
||||
}
|
||||
|
||||
export default class Checkbox extends React.Component<Props> {
|
||||
|
||||
public render() {
|
||||
const props: Props = Object.assign({}, this.props)
|
||||
const props: Partial<Props> = Object.assign({}, this.props)
|
||||
delete props.label
|
||||
delete props.type
|
||||
delete props.color
|
||||
delete props.switch
|
||||
delete props.radio
|
||||
|
||||
const realType = this.props.radio ? 'radio' : 'checkbox'
|
||||
const realType = this.props.type ?? 'checkbox'
|
||||
|
||||
return (
|
||||
<label htmlFor={this.props.id} className={buildClassName(
|
||||
<label htmlFor={this.props.id ?? this.props.label} className={buildClassName(
|
||||
[css.label],
|
||||
[css.radio, realType === 'radio'],
|
||||
[css.switch, this.props.switch],
|
||||
[css.switch, realType === 'switch'],
|
||||
[css[this.props.color as string], this.props.color]
|
||||
)}>
|
||||
<input {...props}
|
||||
type={realType}
|
||||
id={this.props.id ?? this.props.label}
|
||||
type={realType === 'switch' ? 'checkbox' : realType}
|
||||
/>
|
||||
<span>
|
||||
{realType === 'checkbox' && ! this.props.switch && (
|
||||
{realType === 'checkbox' && (
|
||||
<Check strokeWidth={4} size={16}/>
|
||||
)}
|
||||
</span>
|
||||
|
||||
Loading…
x
Reference in New Issue
Block a user