69 lines
1.9 KiB
Vue
69 lines
1.9 KiB
Vue
<template>
|
|
<baseInputButton
|
|
v-bind="$props"
|
|
buttonWrapperClasses="ui-radio form-check base-input-button"
|
|
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>
|
|
</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: "radio",
|
|
mixins: [inputButtonWrapperMixin],
|
|
components: {
|
|
baseInputButton,
|
|
},
|
|
};
|
|
</script>
|
|
|
|
<style lang="scss">
|
|
.form-check {
|
|
position: relative;
|
|
|
|
.form-check-input {
|
|
border: 1px solid $gray-500;
|
|
border-radius: 50%;
|
|
margin-right: 0.5rem;
|
|
opacity: 1;
|
|
height: 1em;
|
|
width: 1em;
|
|
|
|
&:checked {
|
|
background-color: $white;
|
|
background-size: 71%;
|
|
background-position: center;
|
|
border: 1px solid $blue;
|
|
background-image: url("data:image/svg+xml;charset=UTF-8,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 50 50' xml:space='preserve'%3e%3ccircle cx='25' cy='25' r='25' fill='%231574A1'/%3e%3c/svg%3e");
|
|
+ .form-check-label {
|
|
p {
|
|
font-weight: 500;
|
|
font-size: 0.875rem;
|
|
color: $black;
|
|
}
|
|
}
|
|
}
|
|
&: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>
|