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

WIP

Browse source
This commit is contained in:
Bryan Mauger 2022-07-18 17:03:54 -04:00
parent 5e36b01f31
commit 57bc0d5484
1 changed files with 71 additions and 2 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

73
src/ux-components/radio-service-package/radio-service-package.vue
View file

@ -1,7 +1,46 @@
<template> <template>
<div class="package-wrapper"> <div class="package-wrapper">
<input type="radio" name="test-radio" id="testradio"> <input type="radio" name="test-radio" id="testradio">
<label for="testradio">Economy service</label> <label for="testradio">
<div class="package-specs">
<p class="m-0">Economy service</p>
<ul>
<li>New replacement windshield</li>
<li>Expert installation</li>
<li>Nationwide lifetime warranty</li>
</ul>
</div>
</label>
</div>
<div class="package-wrapper">
<input type="radio" name="test-radio" id="testradio-2">
<label for="testradio-2">
<div class="package-specs">
<p class="mb-2">Standard service</p>
<p class="sub-label m-0">most popular</p>
<ul>
<li>New replacement windshield</li>
<li>Expert installation</li>
<li>Nationwide lifetime warranty</li>
<li>New wiper blades</li>
</ul>
</div>
</label>
</div>
<div class="package-wrapper">
<input type="radio" name="test-radio" id="testradio-3">
<label for="testradio-3">
<div class="package-specs">
<p class="mb-2">Premium service</p>
<ul>
<li>New replacement windshield</li>
<li>Expert installation</li>
<li>Nationwide lifetime warranty</li>
<li>New wiper blades</li>
<li>Rain Defense&trade; treatment</li>
</ul>
</div>
</label>
</div> </div>
</template> </template>
@ -16,10 +55,12 @@ export default {
margin: 0.5rem 0; margin: 0.5rem 0;
input[type="radio"] { input[type="radio"] {
opacity: 0; opacity: 0;
position: absolute;
left: -9999px;
+ label { + label {
display: flex; display: flex;
align-items: center; align-items: flex-start;
position: relative; position: relative;
cursor: pointer; cursor: pointer;
width: 100%; width: 100%;
@ -27,9 +68,15 @@ export default {
border: 1px solid $gray-300; border: 1px solid $gray-300;
box-shadow: 0px 4px 8px -4px rgba(0, 0, 0, 0.15), 0px 4px 24px -8px rgba(0, 0, 0, 0.2); box-shadow: 0px 4px 8px -4px rgba(0, 0, 0, 0.15), 0px 4px 24px -8px rgba(0, 0, 0, 0.2);
border-radius: .5rem; border-radius: .5rem;
overflow: hidden;
min-height: 58px;
max-height: 0;
transition: max-height .5s ease;
&::before { &::before {
content: ""; content: "";
position: relative;
top: 3px;
margin-right: 1rem; margin-right: 1rem;
border-radius: 50%; border-radius: 50%;
border: 1px solid $blue; border: 1px solid $blue;
@ -41,6 +88,7 @@ export default {
content: ""; content: "";
position: absolute; position: absolute;
left: 20px; left: 20px;
top: 23px;
border-radius: 50%; border-radius: 50%;
width: 10px; width: 10px;
height: 10px; height: 10px;
@ -51,6 +99,7 @@ export default {
+ label { + label {
background-color: $blue-100; background-color: $blue-100;
border: 1px solid $blue; border: 1px solid $blue;
max-height: 500px;
} }
+ label::after { + label::after {
background: $blue; background: $blue;
@ -63,5 +112,25 @@ export default {
} }
} }
} }
.package-specs {
display: flex;
flex-direction: column;
p {
&.sub-label {
color: $green;
text-transform: uppercase;
}
}
}
ul {
margin: 1rem 0 0 -15px;
padding: 0;
li {
margin-bottom: .5rem;
}
}
} }
</style> </style>