From 21653c415602ddb0ebb59f800bf14b9f1310578d Mon Sep 17 00:00:00 2001 From: Haishan Date: Sun, 1 Mar 2020 17:34:05 +0800 Subject: chore: use react-switch for better a11y --- src/components/Switch.module.css | 49 ---------------------------------------- 1 file changed, 49 deletions(-) delete mode 100644 src/components/Switch.module.css (limited to 'src/components/Switch.module.css') 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; - } - } -} -- cgit v1.3.1