diff options
Diffstat (limited to 'src/client/app/common/views/components/ui/switch.vue')
| -rw-r--r-- | src/client/app/common/views/components/ui/switch.vue | 80 |
1 files changed, 21 insertions, 59 deletions
diff --git a/src/client/app/common/views/components/ui/switch.vue b/src/client/app/common/views/components/ui/switch.vue index 2cac6262f1..e78951a352 100644 --- a/src/client/app/common/views/components/ui/switch.vue +++ b/src/client/app/common/views/components/ui/switch.vue @@ -16,7 +16,7 @@ @keydown.enter="switchValue" > <span class="button"> - <span :style="{ transform }"></span> + <span></span> </span> <span class="label"> <span :aria-hidden="!checked"><slot></slot></span> @@ -48,9 +48,6 @@ export default Vue.extend({ computed: { checked(): boolean { return this.value; - }, - transform(): string { - return this.checked ? 'translate3d(14px, 0, 0)' : ''; } }, watch: { @@ -88,7 +85,7 @@ export default Vue.extend({ root(isDark) display flex - margin 16px 0 + margin 32px 0 cursor pointer transition all 0.3s @@ -101,31 +98,12 @@ root(isDark) &.checked > .button - background-color $theme-color - border-color $theme-color - - > .label - > span - color $theme-color - - &:hover - > .label - > span - color darken($theme-color, 10%) + background-color rgba($theme-color, 0.4) + border-color rgba($theme-color, 0.4) - > .button - background darken($theme-color, 10%) - border-color darken($theme-color, 10%) - - &:hover - > .label - > span - color isDark ? #fff : #2e3338 - - > .button - $color = isDark ? #15181d : #ced2da - background $color - border-color $color + > * + background-color $theme-color + transform translateX(14px) > input position absolute @@ -134,42 +112,26 @@ root(isDark) opacity 0 margin 0 - &:focus + .button - &:after - content "" - pointer-events none - position absolute - top -5px - right -5px - bottom -5px - left -5px - border 2px solid rgba($theme-color, 0.3) - border-radius 14px - > .button - $color = isDark ? #1c1f25 : #dcdfe6 - display inline-block - margin 0 - width 46px - min-width 46px - height 32px - min-height 32px - background $color - border 1px solid $color + margin 3px 0 0 0 + width 34px + height 14px + background isDark ? rgba(#fff, 0.1) : rgba(#000, 0.05) outline none - border-radius 6px + border-radius 14px transition inherit > * position absolute - top 1px - left 1px - border-radius 6px - transition transform 0.3s - width 28px - height 28px + top -3px + left 0 + border-radius 100% + transition background-color 0.3s, transform 0.3s + width 20px + height 20px background-color #fff + box-shadow 0 2px 1px -1px rgba(#000, 0.2), 0 1px 1px 0 rgba(#000, 0.14), 0 1px 3px 0 rgba(#000, 0.12) > .label margin-left 8px @@ -180,9 +142,9 @@ root(isDark) > span display block - line-height 32px + line-height 20px font-weight bold - color isDark ? #c4ccd2 : #4a535a + color isDark ? #c4ccd2 : rgba(#000, 0.75) transition inherit > p |