<template>
<div class="wrap">
<p>Label</p>
<div class="switch-button-control">
<div class="switch-button" :class="{ enabled: isEnabled }" @click="toggle">
<div class="button"></div>
</div>
<div class="switch-button-label">
<slot></slot>
</div>
</div>
</div>
</template>
<script>
export default {
name: "SwitchFilter",
data() {
return {
isEnabled: true
};
},
methods: {
toggle: function() {
this.isEnabled = !this.isEnabled;
}
}
};
</script>
<style lang="scss" scoped>
$height: 25px;
$width: 47px;
$color-before: #e9e9e9;
$color-active: #ff3a4a;
$transition: all 0.3s ease-in-out;
$side-length: calc(#{$height} - 6px);
.switch-button-control {
display: flex;
flex-direction: row;
align-items: center;
.switch-button {
height: $height;
width: $width;
background-color: $color-before;
border-radius: $height;
transition: $transition;
cursor: pointer;
padding: 3px;
.button {
height: $side-length;
width: $side-length;
border-radius: $height;
background: #fff;
transition: $transition;
}
&.enabled {
background-color: $color-active;
.button {
background: white;
transform: translateX(calc(#{$side-length} + 3px));
}
}
}
}
.wrap {
display: flex;
p {
font-weight: 400;
font-size: 12px;
line-height: 18px;
letter-spacing: -0.02em;
color: $color-active;
margin-top: 3px;
margin-right: 5px;
}
}
</style>