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-19 16:48:46 -04:00
parent 57bc0d5484
commit 66303864f0
1 changed files with 49 additions and 23 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

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

@ -3,7 +3,7 @@
<input type="radio" name="test-radio" id="testradio"> <input type="radio" name="test-radio" id="testradio">
<label for="testradio"> <label for="testradio">
<div class="package-specs"> <div class="package-specs">
<p class="m-0">Economy service</p> <p class="m-0">Economy service <span>As little as $0.00</span></p>
<ul> <ul>
<li>New replacement windshield</li> <li>New replacement windshield</li>
<li>Expert installation</li> <li>Expert installation</li>
@ -16,7 +16,7 @@
<input type="radio" name="test-radio" id="testradio-2"> <input type="radio" name="test-radio" id="testradio-2">
<label for="testradio-2"> <label for="testradio-2">
<div class="package-specs"> <div class="package-specs">
<p class="mb-2">Standard service</p> <p class="mb-2">Standard service <span>As little as 59.97</span></p>
<p class="sub-label m-0">most popular</p> <p class="sub-label m-0">most popular</p>
<ul> <ul>
<li>New replacement windshield</li> <li>New replacement windshield</li>
@ -31,7 +31,7 @@
<input type="radio" name="test-radio" id="testradio-3"> <input type="radio" name="test-radio" id="testradio-3">
<label for="testradio-3"> <label for="testradio-3">
<div class="package-specs"> <div class="package-specs">
<p class="mb-2">Premium service</p> <p class="mb-2">Premium service <span>As little as $94.97</span></p>
<ul> <ul>
<li>New replacement windshield</li> <li>New replacement windshield</li>
<li>Expert installation</li> <li>Expert installation</li>
@ -71,27 +71,38 @@ export default {
overflow: hidden; overflow: hidden;
min-height: 58px; min-height: 58px;
max-height: 0; max-height: 0;
transition: max-height .5s ease; transition: all .75s ease;
&::before { &:before {
content: ""; content: "";
position: relative; position: relative;
top: 3px; top: 5px;
margin-right: 1rem; margin-right: 1rem;
border-radius: 50%; border-radius: 50%;
border: 1px solid $blue; border: 1px solid $gray-500;
width: 18px; width: 16px;
height: 18px; height: 16px;
min-width: 16px;
} }
&::after { &:after {
content: ""; content: "";
position: absolute; position: absolute;
left: 20px; left: 19px;
top: 23px; top: 24px;
border-radius: 50%; border-radius: 50%;
width: 10px; width: 10px;
height: 10px; height: 10px;
min-width: 10px;
}
}
&:hover {
+ label {
&:before {
border: 1px solid #8E9292;
box-shadow: 0px 0px 0px 4px #9FCEE6, 0px 1px 4px rgba(0, 0, 0, 0.2);
}
} }
} }
@ -101,14 +112,23 @@ export default {
border: 1px solid $blue; border: 1px solid $blue;
max-height: 500px; max-height: 500px;
} }
+ label::after { + label {
background: $blue; &:before {
box-shadow: 0px 0px 0px 1px $blue;
}
}
+ label {
&:after {
background: $blue;
}
} }
} }
&:focus { &:focus {
+ label::before { + label {
border: 2px solid $blue; &:before {
border: 2px solid $blue;
}
} }
} }
} }
@ -116,20 +136,26 @@ export default {
.package-specs { .package-specs {
display: flex; display: flex;
flex-direction: column; flex-direction: column;
width: 100%;
p { p {
font-weight: 500;
display: flex;
justify-content: space-between;
span {
color: $green;
}
&.sub-label { &.sub-label {
color: $green; color: $green;
text-transform: uppercase; text-transform: uppercase;
} }
} }
} ul {
margin: 1rem 0 0 -15px;
ul { padding: 0;
margin: 1rem 0 0 -15px; li {
padding: 0; margin-bottom: .5rem;
li { }
margin-bottom: .5rem;
} }
} }
} }