74 lines
2.1 KiB
Vue
74 lines
2.1 KiB
Vue
<template>
|
|
<baseInputButton
|
|
v-bind="$props"
|
|
buttonWrapperClasses="form-check base-input-button checkbox"
|
|
inputClasses="form-check-input"
|
|
v-model="selectedValue">
|
|
<div class="d-flex align-items-start form-check-label">
|
|
<p v-if="buttonLabel" class="m-0">{{ buttonLabel }}</p>
|
|
<span v-if="screenReaderOnlyText" class="sr-only">{{ screenReaderOnlyText }}</span>
|
|
</div>
|
|
<div
|
|
v-if="additionalButtonData"
|
|
v-html="additionalButtonData"
|
|
class="additional-button-data"></div>
|
|
</baseInputButton>
|
|
</template>
|
|
|
|
<script>
|
|
import baseInputButton from "@/digital-components/base-input-button/base-input-button";
|
|
import inputButtonWrapperMixin from "@/mixins/input-button-wrapper-mixin";
|
|
|
|
export default {
|
|
name: "checkbox",
|
|
mixins: [inputButtonWrapperMixin],
|
|
components: {
|
|
baseInputButton,
|
|
},
|
|
};
|
|
</script>
|
|
|
|
<style lang="scss">
|
|
.form-check {
|
|
position: relative;
|
|
|
|
.form-check-input {
|
|
border: 1px solid $gray-500; //
|
|
border-radius: 2px; //
|
|
margin-right: 0.5rem;
|
|
opacity: 1;
|
|
height: 1em;
|
|
width: 1em;
|
|
|
|
&:checked {
|
|
background-color: $blue; //
|
|
background-size: contain;
|
|
background-position: center;
|
|
border: 1px solid $blue;
|
|
background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20'%3e%3cpath fill='none' stroke='%23ffffff' stroke-linecap='round' stroke-linejoin='round' stroke-width='3' d='M6 10l3 3l6-6'/%3e%3c/svg%3e");
|
|
|
|
+ .form-check-label {
|
|
p {
|
|
font-weight: 400;
|
|
font-size: 0.875rem;
|
|
color: $gray-600;
|
|
}
|
|
}
|
|
}
|
|
&:focus {
|
|
box-shadow: 0 0 0 2.5px $blue;
|
|
}
|
|
}
|
|
|
|
&:hover {
|
|
.form-check-input:not(:checked) {
|
|
box-shadow: 0 0 0 4px $blue-300;
|
|
}
|
|
}
|
|
p {
|
|
font-weight: 400;
|
|
font-size: 0.875rem;
|
|
color: $gray-600;
|
|
}
|
|
}
|
|
</style>
|