diff options
| author | Haishan <[email protected]> | 2020-03-01 17:34:05 +0800 |
|---|---|---|
| committer | Haishan <[email protected]> | 2020-03-01 17:34:05 +0800 |
| commit | 21653c415602ddb0ebb59f800bf14b9f1310578d (patch) | |
| tree | d86204088d35b4955ab23521734e88304f65a9f6 /src/components/Switch.module.css | |
| parent | 5b86e7bf0ff1b232c66e056f36a5c07263677bfc (diff) | |
chore: use react-switch for better a11y
Diffstat (limited to 'src/components/Switch.module.css')
| -rw-r--r-- | src/components/Switch.module.css | 49 |
1 files changed, 0 insertions, 49 deletions
diff --git a/src/components/Switch.module.css b/src/components/Switch.module.css deleted file mode 100644 index 2199c74..0000000 --- a/src/components/Switch.module.css +++ /dev/null @@ -1,49 +0,0 @@ -/* steal from https://codepen.io/joshnh/pen/hjbuH */ - -input.switch[type='checkbox'] { - --white: #fff; - --grey: #d3d3d3; - --color-theme: #047aff; - - appearance: none; - outline: none; - background-color: darken(var(--white), 2%); - border: 1px solid var(--grey); - border-radius: 26px; - box-shadow: inset 0 0 0 1px var(--grey); - cursor: pointer; - height: 28px; - position: relative; - transition: border 0.25s 0.15s, box-shadow 0.25s 0.3s, padding 0.25s; - width: 44px; - vertical-align: top; - - &:after { - background-color: var(--white); - border: 1px solid var(--grey); - border-radius: 24px; - box-shadow: inset 0 -3px 3px hsla(0, 0%, 0%, 0.025), - 0 1px 4px hsla(0, 0%, 0%, 0.15), 0 4px 4px hsla(0, 0%, 0%, 0.1); - content: ''; - display: block; - height: 26px; - left: 0; - position: absolute; - right: 16px; - top: 0; - transition: border 0.25s 0.15s, left 0.25s 0.1s, right 0.15s 0.175s; - } - &:checked { - border-color: var(--color-theme); - box-shadow: inset 0 0 0 13px var(--color-theme); - padding-left: 18px; - transition: border 0.25s, box-shadow 0.25s, padding 0.25s 0.15s; - - &:after { - border-color: var(--color-theme); - left: 16px; - right: 0; - transition: border 0.25s, left 0.15s 0.25s, right 0.25s 0.175s; - } - } -} |
