|
|
|
@ -5,12 +5,16 @@
|
|
|
|
|
>
|
|
|
|
|
<input
|
|
|
|
|
type="checkbox"
|
|
|
|
|
class="visible-for-screenreader-only"
|
|
|
|
|
:disabled="disabled"
|
|
|
|
|
:checked="modelValue"
|
|
|
|
|
:indeterminate="indeterminate"
|
|
|
|
|
@change="$emit('update:modelValue', $event.target.checked)"
|
|
|
|
|
>
|
|
|
|
|
<i class="checkbox-indicator" />
|
|
|
|
|
<i
|
|
|
|
|
class="checkbox-indicator"
|
|
|
|
|
:aria-hidden="true"
|
|
|
|
|
/>
|
|
|
|
|
<span
|
|
|
|
|
v-if="!!$slots.default"
|
|
|
|
|
class="label"
|
|
|
|
@ -33,6 +37,7 @@ export default {
|
|
|
|
|
|
|
|
|
|
<style lang="scss">
|
|
|
|
|
@import "../../variables";
|
|
|
|
|
@import "../../mixins";
|
|
|
|
|
|
|
|
|
|
.checkbox {
|
|
|
|
|
position: relative;
|
|
|
|
@ -81,8 +86,6 @@ export default {
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
input[type="checkbox"] {
|
|
|
|
|
display: none;
|
|
|
|
|
|
|
|
|
|
&:checked + .checkbox-indicator::before {
|
|
|
|
|
color: $fallback--text;
|
|
|
|
|
color: var(--inputText, $fallback--text);
|
|
|
|
|