84 lines
1.8 KiB
Vue
84 lines
1.8 KiB
Vue
<template>
|
|
<div class="inline-block cursor-pointer" @click="toggle()">
|
|
<label ref="toggle" class="toggle" :class="{ on: on }">
|
|
<span class="handle"></span>
|
|
</label>
|
|
<label class="pl-0 align-middle cursor-pointer">
|
|
<slot></slot>
|
|
</label>
|
|
</div>
|
|
</template>
|
|
|
|
<script>
|
|
export default {
|
|
props: {
|
|
on: {
|
|
type: Boolean,
|
|
default: false,
|
|
},
|
|
},
|
|
|
|
methods: {
|
|
toggle() {
|
|
const containsOnClass = this.$refs.toggle.classList.toggle("on")
|
|
this.$emit("change", containsOnClass)
|
|
},
|
|
},
|
|
}
|
|
</script>
|
|
|
|
<style scoped lang="scss">
|
|
$useBorder: false;
|
|
$borderColor: var(--secondary-light-color);
|
|
$activeColor: var(--accent-color);
|
|
$inactiveColor: var(--secondary-light-color);
|
|
$inactiveHandleColor: var(--primary-color);
|
|
$activeHandleColor: var(--primary-color);
|
|
$width: 32px;
|
|
$height: 16px;
|
|
$handleSpacing: 4px;
|
|
$transition: all 0.2s ease-in-out;
|
|
|
|
.toggle {
|
|
@apply relative;
|
|
@apply inline-block;
|
|
@apply align-middle;
|
|
@apply rounded-full;
|
|
@apply p-0;
|
|
@apply mr-4;
|
|
@apply cursor-pointer;
|
|
@apply flex-shrink-0;
|
|
|
|
width: $width;
|
|
height: $height;
|
|
border: if($useBorder, 2px solid $borderColor, none);
|
|
background-color: if($useBorder, transparent, $inactiveColor);
|
|
transition: $transition;
|
|
box-sizing: initial;
|
|
|
|
.handle {
|
|
@apply absolute;
|
|
@apply inline-block;
|
|
@apply inset-0;
|
|
@apply rounded-full;
|
|
@apply pointer-events-none;
|
|
|
|
transition: $transition;
|
|
margin: $handleSpacing;
|
|
background-color: $inactiveHandleColor;
|
|
width: #{$height - ($handleSpacing * 2)};
|
|
height: #{$height - ($handleSpacing * 2)};
|
|
}
|
|
|
|
&.on {
|
|
background-color: $activeColor;
|
|
border-color: $activeColor;
|
|
|
|
.handle {
|
|
background-color: $activeHandleColor;
|
|
left: #{$width - $height};
|
|
}
|
|
}
|
|
}
|
|
</style>
|