Skip to content
Snippets Groups Projects

Profil-oppretting fungerer

Merged Jakob Karevold Grønhaug requested to merge opprett-profil into main
3 files
+ 122
14
Compare changes
  • Side-by-side
  • Inline
Files
3
+ 88
0
<script>
export default {
data: () => {
return {
state: false,
}
},
emits: ['toggled'],
methods: {
emitUpdate() {
this.state = !this.state;
this.$emit('toggled');
}
}
}
</script>
<template>
<label class="toggle">
<input type="checkbox" @change="emitUpdate">
<span class="toggle_slider"></span>
</label>
</template>
<style scoped lang="scss">
$width: 40px;
$height: calc(2 * $width / 3);
$on-color: green;
$off-color: #cccccc;
.toggle {
position: relative;
display: inline-block;
border-radius: calc($height / 2);
width: $width;
height: $height;
background-color: $off-color;
input {
display: none;
}
}
.toggle_slider {
position: absolute;
cursor: pointer;
border-radius: calc($height / 2);
top: 0;
left: 0;
right: 0;
bottom: 0;
background-color: #ccc;
&:before {
position: absolute;
content: "";
border-radius: 50%;
height: calc(0.8 * $height);
width: calc(0.8 * $height);
left: calc(0.1 * $height);
top: calc(0.1 * $height);
background-color: white;
transition: 200ms;
}
}
input:checked+.toggle_slider {
background-color: $on-color;
}
input:focus+.toggle_slider {
box-shadow: 0 0 1px white;
}
input:checked+.toggle_slider:before {
transform: translateX(calc($width / 3));
}
</style>
\ No newline at end of file
Loading