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

WIP - css cleanup.

Browse source
This commit is contained in:
Bryan 2021-10-25 19:02:46 -04:00
parent ffd9a42738
commit 715fe43f33
2 changed files with 26 additions and 34 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

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

@ -1,36 +1,28 @@
.radio-card {
input[type=radio] {
position: absolute;
opacity: 0;
&:focus + label {
background-color: $white;
box-shadow: 0px 0px 0px 4px $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;
}
&.invalid + label {
background-color: $white;
border: 1px solid $red-500;
}
}
label {
display: flex;
align-items: center;
flex-direction: column;
background: $white;
border: 1px solid $gray-400;
border-radius: 8px;
padding: 8px;
width: 100%;
&:hover {
cursor: pointer;
box-shadow: 0px 0px 0px 6px $blue-100;
}
&:focus + label {
background-color: $white;
box-shadow: 0px 0px 0px 4px $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;
}
&.invalid + label {
background-color: $white;
border: 1px solid $red-500;
}
}
label {
background: $white;
border: 1px solid $gray-400;
&:hover {
cursor: pointer;
box-shadow: 0px 0px 0px 6px $blue-100;
}
}
}

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

@ -1,7 +1,7 @@
<template>
<div class="col-4 mb-3 d-flex radio-card">
<input type="radio" v-bind:class="className" v-bind:id="radioID" v-bind:name="groupName" :value="radioLabel" v-model="picked" v-bind:tabindex="tabIndex"/>
<label v-bind:for="radioID">
<input type="radio" class="position-absolute opacity-0" v-bind:class="className" v-bind:id="radioID" v-bind:name="groupName" :value="radioLabel" v-model="picked" v-bind:tabindex="tabIndex"/>
<label v-bind:for="radioID" class="p-3 rounded-3 d-flex flex-column align-items-center w-100">
<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>