diff options
Diffstat (limited to 'packages/frontend/src/components/MkSwitch.vue')
| -rw-r--r-- | packages/frontend/src/components/MkSwitch.vue | 149 |
1 files changed, 72 insertions, 77 deletions
diff --git a/packages/frontend/src/components/MkSwitch.vue b/packages/frontend/src/components/MkSwitch.vue index d9f6716f92..63738b6a44 100644 --- a/packages/frontend/src/components/MkSwitch.vue +++ b/packages/frontend/src/components/MkSwitch.vue @@ -1,21 +1,19 @@ <template> -<div - class="ziffeomt" - :class="{ disabled, checked }" -> +<div :class="[$style.root, { [$style.disabled]: disabled, [$style.checked]: checked }]"> <input ref="input" type="checkbox" :disabled="disabled" + :class="$style.input" @keydown.enter="toggle" > - <span ref="button" v-tooltip="checked ? i18n.ts.itsOn : i18n.ts.itsOff" class="button" data-cy-switch-toggle @click.prevent="toggle"> - <div class="knob"></div> + <span ref="button" v-tooltip="checked ? i18n.ts.itsOn : i18n.ts.itsOff" :class="$style.button" data-cy-switch-toggle @click.prevent="toggle"> + <div :class="$style.knob"></div> </span> - <span class="label"> + <span :class="$style.body"> <!-- TODO: 無名slotの方は廃止 --> - <span @click="toggle"><slot name="label"></slot><slot></slot></span> - <p class="caption"><slot name="caption"></slot></p> + <span :class="$style.label" @click="toggle"><slot name="label"></slot><slot></slot></span> + <p :class="$style.caption"><slot name="caption"></slot></p> </span> </div> </template> @@ -45,52 +43,12 @@ const toggle = () => { }; </script> -<style lang="scss" scoped> -.ziffeomt { +<style lang="scss" module> +.root { position: relative; display: flex; transition: all 0.2s ease; - - > * { - user-select: none; - } - - > input { - position: absolute; - width: 0; - height: 0; - opacity: 0; - margin: 0; - } - - > .button { - position: relative; - display: inline-flex; - flex-shrink: 0; - margin: 0; - box-sizing: border-box; - width: 32px; - height: 23px; - outline: none; - background: var(--switchOffBg); - background-clip: content-box; - border: solid 1px var(--switchOffBg); - border-radius: 999px; - cursor: pointer; - transition: inherit; - user-select: none; - - > .knob { - position: absolute; - top: 3px; - left: 3px; - width: 15px; - height: 15px; - background: var(--switchOffFg); - border-radius: 999px; - transition: all 0.2s ease; - } - } + user-select: none; &:hover { > .button { @@ -98,31 +56,6 @@ const toggle = () => { } } - > .label { - margin-left: 12px; - margin-top: 2px; - display: block; - transition: inherit; - color: var(--fg); - - > span { - display: block; - line-height: 20px; - cursor: pointer; - transition: inherit; - } - - > .caption { - margin: 8px 0 0 0; - color: var(--fgTransparentWeak); - font-size: 0.85em; - - &:empty { - display: none; - } - } - } - &.disabled { opacity: 0.6; cursor: not-allowed; @@ -140,4 +73,66 @@ const toggle = () => { } } } + +.input { + position: absolute; + width: 0; + height: 0; + opacity: 0; + margin: 0; +} + +.button { + position: relative; + display: inline-flex; + flex-shrink: 0; + margin: 0; + box-sizing: border-box; + width: 32px; + height: 23px; + outline: none; + background: var(--switchOffBg); + background-clip: content-box; + border: solid 1px var(--switchOffBg); + border-radius: 999px; + cursor: pointer; + transition: inherit; + user-select: none; +} + +.knob { + position: absolute; + top: 3px; + left: 3px; + width: 15px; + height: 15px; + background: var(--switchOffFg); + border-radius: 999px; + transition: all 0.2s ease; +} + +.body { + margin-left: 12px; + margin-top: 2px; + display: block; + transition: inherit; + color: var(--fg); +} + +.label { + display: block; + line-height: 20px; + cursor: pointer; + transition: inherit; +} + +.caption { + margin: 8px 0 0 0; + color: var(--fgTransparentWeak); + font-size: 0.85em; + + &:empty { + display: none; + } +} </style> |