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

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

@ -1,7 +1,7 @@
<template> <template>
<div class="col-4 mb-3 d-flex radio-card"> <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"/> <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"> <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"/> <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 class="mt-auto">{{radioLabel}}</span>
<span>Selected: {{ picked }}</span> <span>Selected: {{ picked }}</span>