From 3bde426325e0aff5b1fdb3f662335ae2d8ff04a8 Mon Sep 17 00:00:00 2001 From: Avior Date: Sun, 4 Apr 2021 18:47:49 +0200 Subject: [PATCH] Fixed Checkbox Signed-off-by: Avior --- src/dzeio/Checkbox/Checkbox.module.styl | 129 +++++++----------------- src/dzeio/Checkbox/index.tsx | 24 ++--- 2 files changed, 43 insertions(+), 110 deletions(-) diff --git a/src/dzeio/Checkbox/Checkbox.module.styl b/src/dzeio/Checkbox/Checkbox.module.styl index 07bdcd5..dba7763 100644 --- a/src/dzeio/Checkbox/Checkbox.module.styl +++ b/src/dzeio/Checkbox/Checkbox.module.styl @@ -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) diff --git a/src/dzeio/Checkbox/index.tsx b/src/dzeio/Checkbox/index.tsx index 78466b2..eeed104 100644 --- a/src/dzeio/Checkbox/index.tsx +++ b/src/dzeio/Checkbox/index.tsx @@ -7,38 +7,32 @@ import css from './Checkbox.module.styl' import Text from '../Text' interface Props extends React.DetailedHTMLProps, 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 { public render() { - const props: Props = Object.assign({}, this.props) + const props: Partial = 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 ( -