diff options
Diffstat (limited to 'src/components/Form/Toggle')
| -rw-r--r-- | src/components/Form/Toggle/Toggle.module.scss | 75 | ||||
| -rw-r--r-- | src/components/Form/Toggle/Toggle.tsx | 46 | 
2 files changed, 0 insertions, 121 deletions
| diff --git a/src/components/Form/Toggle/Toggle.module.scss b/src/components/Form/Toggle/Toggle.module.scss deleted file mode 100644 index 48c88f6..0000000 --- a/src/components/Form/Toggle/Toggle.module.scss +++ /dev/null @@ -1,75 +0,0 @@ -@use "@styles/abstracts/functions" as fun; - -.label { -  --icon-size: #{fun.convert-px(25)}; -  --toggle-width: #{fun.convert-px(45)}; -  --toggle-height: calc(var(--toggle-width) / 2); - -  display: inline-flex; -  align-items: center; -} - -.title { -  margin-right: var(--spacing-xs); -} - -.toggle { -  display: inline-flex; -  align-items: center; -  width: var(--toggle-width); -  height: var(--toggle-height); -  background: var(--color-shadow-light); -  border: fun.convert-px(1) solid var(--color-primary); -  border-radius: fun.convert-px(32); -  box-shadow: inset 0 0 fun.convert-px(3) 0 var(--color-shadow-dark); -  margin: 0 var(--spacing-2xs); -  position: relative; - -  &::after { -    content: ""; -    display: block; -    width: calc(var(--toggle-width) / 2); -    height: calc(var(--toggle-width) / 2); -    background: var(--color-primary-light); -    border: fun.convert-px(1) solid var(--color-primary); -    border-radius: 50%; -    box-shadow: inset 0 0 fun.convert-px(1) fun.convert-px(1) -        var(--color-shadow), -      0 0 fun.convert-px(2) fun.convert-px(1) var(--color-shadow-light); -    position: absolute; -    left: fun.convert-px(-2); -    transition: all 0.3s ease-in-out 0s; -  } -} - -.checkbox { -  position: absolute; -  opacity: 0; -  cursor: pointer; - -  &:checked ~ .label { -    .toggle::after { -      position: absolute; -      left: calc(100% - (var(--toggle-width) / 2) + #{fun.convert-px(2)}); -    } -  } - -  &:hover, -  &:focus { -    ~ .label { -      .toggle::after { -        background: var(--color-primary-lighter); -      } -    } -  } - -  &:focus ~ .label { -    .title { -      text-decoration: underline solid var(--color-primary) fun.convert-px(2); -    } - -    .toggle { -      outline: var(--color-border) solid fun.convert-px(5); -    } -  } -} diff --git a/src/components/Form/Toggle/Toggle.tsx b/src/components/Form/Toggle/Toggle.tsx deleted file mode 100644 index 36636e4..0000000 --- a/src/components/Form/Toggle/Toggle.tsx +++ /dev/null @@ -1,46 +0,0 @@ -import { FormEvent, ReactElement } from 'react'; -import { Form } from '..'; -import styles from './Toggle.module.scss'; - -const Toggle = ({ -  id, -  label, -  value, -  changeHandler, -  leftChoice, -  rightChoice, -  name, -}: { -  id: string; -  label: string; -  value: boolean; -  changeHandler: (value: boolean) => void; -  leftChoice: ReactElement | string; -  rightChoice: ReactElement | string; -  name?: string; -}) => { -  const onSubmit = (e: FormEvent) => { -    e.preventDefault(); -  }; - -  return ( -    <Form modifier="toggle" submitHandler={onSubmit}> -      <input -        className={styles.checkbox} -        type="checkbox" -        id={id} -        name={name ? name : id} -        checked={value} -        onChange={() => changeHandler(!value)} -      /> -      <label htmlFor={id} className={styles.label}> -        <span className={styles.title}>{label}</span> -        {leftChoice} -        <span className={styles.toggle}></span> -        {rightChoice} -      </label> -    </Form> -  ); -}; - -export default Toggle; | 
