WIP
This commit is contained in:
Bryan Mauger
parent
66303864f0
commit
c55ee6a15d
1 changed files with 174 additions and 132 deletions
|
|
@ -1,160 +1,202 @@
|
|||
<template>
|
||||
<div class="package-wrapper">
|
||||
<input type="radio" name="test-radio" id="testradio">
|
||||
<label for="testradio">
|
||||
<div class="package-specs">
|
||||
<p class="m-0">Economy service <span>As little as $0.00</span></p>
|
||||
<ul>
|
||||
<li>New replacement windshield</li>
|
||||
<li>Expert installation</li>
|
||||
<li>Nationwide lifetime warranty</li>
|
||||
</ul>
|
||||
<div class="package-main">
|
||||
<a href="#!" class="justify-content-end w-100" :class="[isActive ? 'active' : '']" @click="toggleClass()">Compare packages</a>
|
||||
<div class="package-wrapper">
|
||||
<input type="radio" name="test-radio" id="testradio">
|
||||
<label for="testradio">
|
||||
<div class="package-specs">
|
||||
<p class="m-0">Economy service <span>As little as $0.00</span></p>
|
||||
<ul>
|
||||
<li>New replacement windshield</li>
|
||||
<li>Expert installation</li>
|
||||
<li>Nationwide lifetime warranty</li>
|
||||
</ul>
|
||||
</div>
|
||||
</label>
|
||||
</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 <span>As little as 59.97</span></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 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 <span>As little as 59.97</span></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>
|
||||
</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 <span>As little as $94.97</span></p>
|
||||
<ul>
|
||||
<li>New replacement windshield</li>
|
||||
<li>Expert installation</li>
|
||||
<li>Nationwide lifetime warranty</li>
|
||||
<li>New wiper blades</li>
|
||||
<li>Rain Defense™ treatment</li>
|
||||
</ul>
|
||||
<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 <span>As little as $94.97</span></p>
|
||||
<ul>
|
||||
<li>New replacement windshield</li>
|
||||
<li>Expert installation</li>
|
||||
<li>Nationwide lifetime warranty</li>
|
||||
<li>New wiper blades</li>
|
||||
<li>Rain Defense™ treatment</li>
|
||||
</ul>
|
||||
</div>
|
||||
</label>
|
||||
</div>
|
||||
</label>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
export default {
|
||||
name: "radioServicePackage",
|
||||
data() {
|
||||
return {
|
||||
isActive: false,
|
||||
};
|
||||
},
|
||||
methods: {
|
||||
toggleClass: function(event){
|
||||
this.isActive = !this.isActive;
|
||||
}
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
<style lang="scss">
|
||||
.package-wrapper {
|
||||
margin: 0.5rem 0;
|
||||
input[type="radio"] {
|
||||
opacity: 0;
|
||||
position: absolute;
|
||||
left: -9999px;
|
||||
|
||||
+ label {
|
||||
display: flex;
|
||||
align-items: flex-start;
|
||||
position: relative;
|
||||
cursor: pointer;
|
||||
width: 100%;
|
||||
padding: 1rem;
|
||||
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);
|
||||
border-radius: .5rem;
|
||||
overflow: hidden;
|
||||
min-height: 58px;
|
||||
max-height: 0;
|
||||
transition: all .75s ease;
|
||||
|
||||
&:before {
|
||||
content: "";
|
||||
position: relative;
|
||||
top: 5px;
|
||||
margin-right: 1rem;
|
||||
border-radius: 50%;
|
||||
border: 1px solid $gray-500;
|
||||
width: 16px;
|
||||
height: 16px;
|
||||
min-width: 16px;
|
||||
}
|
||||
|
||||
&:after {
|
||||
content: "";
|
||||
position: absolute;
|
||||
left: 19px;
|
||||
top: 24px;
|
||||
border-radius: 50%;
|
||||
width: 10px;
|
||||
height: 10px;
|
||||
min-width: 10px;
|
||||
}
|
||||
.package-main {
|
||||
a {
|
||||
&:after {
|
||||
content: "";
|
||||
transition: all .5s ease;
|
||||
background-image: url("data:image/svg+xml;charset=UTF-8,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 8.9' xml:space='preserve'%3e%3cpath d='M8 8.9c-.2 0-.5-.1-.6-.3L.3 1.5C.1 1.4 0 1.1 0 .9 0 .7.1.4.3.3.4.1.7 0 .9 0c.2 0 .5.1.6.3L8 6.7 14.5.2c.1-.1.4-.2.6-.2.2 0 .5.1.6.3s.3.4.3.6c0 .2-.1.5-.3.6L8.6 8.6c-.1.2-.4.3-.6.3z' fill='%231474a2'/%3e%3c/svg%3e");
|
||||
background-repeat: no-repeat;
|
||||
background-position: right center;
|
||||
margin-left: .5rem;
|
||||
width: 16px;
|
||||
height: auto;
|
||||
}
|
||||
|
||||
&:hover {
|
||||
+ label {
|
||||
&:before {
|
||||
border: 1px solid #8E9292;
|
||||
box-shadow: 0px 0px 0px 4px #9FCEE6, 0px 1px 4px rgba(0, 0, 0, 0.2);
|
||||
&.active {
|
||||
~ .package-wrapper {
|
||||
label {
|
||||
max-height: 500px !important;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
&:checked {
|
||||
+ label {
|
||||
background-color: $blue-100;
|
||||
border: 1px solid $blue;
|
||||
&.active:after {
|
||||
transform: rotate(180deg);
|
||||
}
|
||||
&.active + .vin-info {
|
||||
max-height: 500px;
|
||||
}
|
||||
+ label {
|
||||
&:before {
|
||||
box-shadow: 0px 0px 0px 1px $blue;
|
||||
}
|
||||
}
|
||||
+ label {
|
||||
&:after {
|
||||
background: $blue;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
&:focus {
|
||||
+ label {
|
||||
&:before {
|
||||
border: 2px solid $blue;
|
||||
}
|
||||
transition: all 250ms ease-in;
|
||||
opacity: 1;
|
||||
}
|
||||
}
|
||||
}
|
||||
.package-wrapper {
|
||||
margin: 0.5rem 0;
|
||||
input[type="radio"] {
|
||||
opacity: 0;
|
||||
position: absolute;
|
||||
left: -9999px;
|
||||
|
||||
.package-specs {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
width: 100%;
|
||||
+ label {
|
||||
display: flex;
|
||||
align-items: flex-start;
|
||||
position: relative;
|
||||
cursor: pointer;
|
||||
width: 100%;
|
||||
padding: 1rem;
|
||||
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);
|
||||
border-radius: .5rem;
|
||||
overflow: hidden;
|
||||
min-height: 58px;
|
||||
max-height: 0;
|
||||
transition: all .75s ease;
|
||||
|
||||
p {
|
||||
font-weight: 500;
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
span {
|
||||
color: $green;
|
||||
&:before {
|
||||
content: "";
|
||||
position: relative;
|
||||
top: 5px;
|
||||
margin-right: 1rem;
|
||||
border-radius: 50%;
|
||||
border: 1px solid $gray-500;
|
||||
width: 16px;
|
||||
height: 16px;
|
||||
min-width: 16px;
|
||||
}
|
||||
|
||||
&:after {
|
||||
content: "";
|
||||
position: absolute;
|
||||
left: 19px;
|
||||
top: 24px;
|
||||
border-radius: 50%;
|
||||
width: 10px;
|
||||
height: 10px;
|
||||
min-width: 10px;
|
||||
}
|
||||
}
|
||||
&.sub-label {
|
||||
color: $green;
|
||||
text-transform: uppercase;
|
||||
|
||||
&:hover {
|
||||
+ label {
|
||||
&:before {
|
||||
border: 1px solid #8E9292;
|
||||
box-shadow: 0px 0px 0px 4px #9FCEE6, 0px 1px 4px rgba(0, 0, 0, 0.2);
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
&:checked {
|
||||
+ label {
|
||||
background-color: $blue-100;
|
||||
border: 1px solid $blue;
|
||||
max-height: 500px;
|
||||
}
|
||||
+ label {
|
||||
&:before {
|
||||
box-shadow: 0px 0px 0px 1px $blue;
|
||||
}
|
||||
}
|
||||
+ label {
|
||||
&:after {
|
||||
background: $blue;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
&:focus {
|
||||
+ label {
|
||||
&:before {
|
||||
border: 2px solid $blue;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
ul {
|
||||
margin: 1rem 0 0 -15px;
|
||||
padding: 0;
|
||||
li {
|
||||
margin-bottom: .5rem;
|
||||
|
||||
.package-specs {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
width: 100%;
|
||||
|
||||
p {
|
||||
font-weight: 500;
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
span {
|
||||
color: $green;
|
||||
}
|
||||
&.sub-label {
|
||||
color: $green;
|
||||
text-transform: uppercase;
|
||||
}
|
||||
}
|
||||
ul {
|
||||
margin: 1rem 0 0 -15px;
|
||||
padding: 0;
|
||||
li {
|
||||
margin-bottom: .5rem;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
|
|
|||
Loading…
Reference in a new issue