70 lines
1.4 KiB
Vue
70 lines
1.4 KiB
Vue
<template>
|
|
<FormBase :error="error" :off="off">
|
|
<input type="checkbox" :disabled="off" :model="model" :id="_uid">
|
|
<label :class="classes()" :for="_uid">{{ label }}</label>
|
|
</FormBase>
|
|
</template>
|
|
|
|
<script>
|
|
import FormBase from './FormBase';
|
|
|
|
export default {
|
|
extends: FormBase,
|
|
props: [
|
|
|
|
],
|
|
components: {
|
|
FormBase
|
|
},
|
|
methods: {
|
|
classes(){
|
|
let classes = '';
|
|
classes += this.error ? 'error ': '';
|
|
classes += this.off ? 'disabled ': '';
|
|
return classes;
|
|
},
|
|
}
|
|
}
|
|
</script>
|
|
|
|
<style scoped>
|
|
|
|
label {
|
|
display: inline;
|
|
cursor: pointer;
|
|
}
|
|
|
|
label::after {
|
|
width: 12px;
|
|
height: 12px;
|
|
background-color: var(--white-normal);
|
|
border: 1px solid var(--grey);
|
|
display: block;
|
|
content: "";
|
|
float: right;
|
|
margin-right: 5px;
|
|
}
|
|
|
|
label.error::after {
|
|
border: 2px solid var(--error);
|
|
}
|
|
|
|
label.disabled::after {
|
|
background-color: var(--grey-lightest);
|
|
color: var(--grey);
|
|
border-color: var(--grey-light);
|
|
cursor: not-allowed;
|
|
}
|
|
|
|
|
|
input[type="checkbox"]:checked + label::after {
|
|
background-color: var(--primary-blue-dark);
|
|
box-shadow: inset 0px 0px 0px 3px #fff;
|
|
}
|
|
|
|
|
|
input[type="checkbox"]{
|
|
visibility: hidden;
|
|
}
|
|
|
|
</style> |