77 lines
1.6 KiB
Vue
77 lines
1.6 KiB
Vue
<template>
|
|
<div class="col mb-3 d-flex radio-card">
|
|
<input
|
|
type="radio"
|
|
class="position-absolute opacity-0"
|
|
:class="className"
|
|
:id="radioID"
|
|
:name="groupName"
|
|
:value="radioLabel"
|
|
v-model="picked"
|
|
:tabindex="tabIndex"
|
|
/>
|
|
<label
|
|
v-bind:for="radioID"
|
|
class="rounded-3 d-flex flex-column align-items-center w-100"
|
|
>
|
|
<img
|
|
class="px-3 pt-3 pb-2 mt-auto"
|
|
v-bind:src="require(`@/assets/img/icons/${radioImage}`)"
|
|
v-bind:alt="altText"
|
|
/>
|
|
<span class="mt-auto mb-2 text-center lh-1">{{ radioLabel }}</span>
|
|
</label>
|
|
</div>
|
|
</template>
|
|
|
|
<!-- tabIndex="x" is available on this component if needed -->
|
|
|
|
<script>
|
|
export default {
|
|
name: "radioCard",
|
|
props: [
|
|
"groupName",
|
|
"radioLabel",
|
|
"radioImage",
|
|
"altText",
|
|
"radioID",
|
|
"tabIndex",
|
|
"className",
|
|
],
|
|
data() {
|
|
return {
|
|
picked: "picked",
|
|
};
|
|
},
|
|
};
|
|
</script>
|
|
<style lang="scss">
|
|
.radio-card {
|
|
input[type="radio"] {
|
|
&:focus + label {
|
|
background-color: $white;
|
|
box-shadow: 0px 0px 0px 4px $blue;
|
|
}
|
|
&:focus-visible + label {
|
|
background-color: $white;
|
|
box-shadow: 0px 0px 0px 4px $blue;
|
|
}
|
|
&:checked + label {
|
|
background-color: $blue-100;
|
|
border: 1px solid $blue;
|
|
}
|
|
&.invalid + label {
|
|
background-color: $white;
|
|
border: 1px solid $red;
|
|
}
|
|
}
|
|
label {
|
|
background: $white;
|
|
border: 1px solid $gray;
|
|
&:hover {
|
|
cursor: pointer;
|
|
box-shadow: 0px 0px 0px 6px $blue-100;
|
|
}
|
|
}
|
|
}
|
|
</style>
|