diff options
| author | Haishan <[email protected]> | 2019-04-14 22:56:14 +0800 |
|---|---|---|
| committer | Haishan <[email protected]> | 2019-04-14 22:56:14 +0800 |
| commit | 7dac1d44c7b13184e4a1cbdb4113df2bb8db9d7e (patch) | |
| tree | 44ca70a51497d5e0dddadaca384ee20541a157fe /src/components/Switch.module.scss | |
| parent | 4a4f58c88a857d222fbd21749bfd7019eaee8659 (diff) | |
refactor: replace sass with postcss
Diffstat (limited to 'src/components/Switch.module.scss')
| -rw-r--r-- | src/components/Switch.module.scss | 50 |
1 files changed, 0 insertions, 50 deletions
diff --git a/src/components/Switch.module.scss b/src/components/Switch.module.scss deleted file mode 100644 index 835de87..0000000 --- a/src/components/Switch.module.scss +++ /dev/null @@ -1,50 +0,0 @@ -// steal from https://codepen.io/joshnh/pen/hjbuH - -$white: #fff; -// $green: #53d76a; -$grey: #d3d3d3; -$color-theme: #047aff; - -input.switch[type='checkbox'] { - appearance: none; - outline: none; - background-color: darken($white, 2%); - border: 1px solid $grey; - border-radius: 26px; - box-shadow: inset 0 0 0 1px $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: $white; - border: 1px solid $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: $color-theme; - box-shadow: inset 0 0 0 13px $color-theme; - padding-left: 18px; - transition: border 0.25s, box-shadow 0.25s, padding 0.25s 0.15s; - - &:after { - border-color: $color-theme; - left: 16px; - right: 0; - transition: border 0.25s, left 0.15s 0.25s, right 0.25s 0.175s; - } - } -} |
