jason/DigitalConsumer.FixMyGlass
1
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity Actions

WIP - radioCard updates.

Browse source
This commit is contained in:
Bryan 2021-10-25 18:07:36 -04:00
parent 3106273ff2
commit 16c0437b9e
2 changed files with 11 additions and 8 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

18
src/assets/scss/components/_radio-card.scss
View file

@ -3,15 +3,17 @@
position: absolute;
opacity: 0;
&:focus + label {
background-color: $white;
box-shadow: 0px 0px 0px 4px $blue-600;
}
}
input[type="radio"]:checked + label {
background-color: $blue-100;
border: 1px solid $blue-600;
// &:focus {
// border: 2px solid $blue-600;
// }
&:focus-visible + label {
background-color: $white;
box-shadow: 0px 0px 0px 4px $blue-600;
}
&:checked + label {
background-color: $blue-100;
border: 1px solid $blue-600;
}
}
label {
display: flex;
@ -24,7 +26,7 @@
width: 100%;
&:hover {
cursor: pointer;
box-shadow: 0px 0px 0px 10px $blue-100;
box-shadow: 0px 0px 0px 6px $blue-100;
}
}
}

1
src/components/forms/radioCard.vue
View file

@ -4,6 +4,7 @@
<label v-bind:for="radioID">
<img class="px-1 pt-3 pb-1 mt-auto" v-bind:src="require(`@/assets/img/icons/${radioImage}`)" v-bind:alt="altText"/>
<span class="mt-auto">{{radioLabel}}</span>
<span>Selected: {{ picked }}</span>
</label>
</div>
</template>