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>
|
<template>
|
||||||
<div class="package-wrapper">
|
<div class="package-main">
|
||||||
<input type="radio" name="test-radio" id="testradio">
|
<a href="#!" class="justify-content-end w-100" :class="[isActive ? 'active' : '']" @click="toggleClass()">Compare packages</a>
|
||||||
<label for="testradio">
|
<div class="package-wrapper">
|
||||||
<div class="package-specs">
|
<input type="radio" name="test-radio" id="testradio">
|
||||||
<p class="m-0">Economy service <span>As little as $0.00</span></p>
|
<label for="testradio">
|
||||||
<ul>
|
<div class="package-specs">
|
||||||
<li>New replacement windshield</li>
|
<p class="m-0">Economy service <span>As little as $0.00</span></p>
|
||||||
<li>Expert installation</li>
|
<ul>
|
||||||
<li>Nationwide lifetime warranty</li>
|
<li>New replacement windshield</li>
|
||||||
</ul>
|
<li>Expert installation</li>
|
||||||
|
<li>Nationwide lifetime warranty</li>
|
||||||
|
</ul>
|
||||||
|
</div>
|
||||||
|
</label>
|
||||||
</div>
|
</div>
|
||||||
</label>
|
<div class="package-wrapper">
|
||||||
</div>
|
<input type="radio" name="test-radio" id="testradio-2">
|
||||||
<div class="package-wrapper">
|
<label for="testradio-2">
|
||||||
<input type="radio" name="test-radio" id="testradio-2">
|
<div class="package-specs">
|
||||||
<label for="testradio-2">
|
<p class="mb-2">Standard service <span>As little as 59.97</span></p>
|
||||||
<div class="package-specs">
|
<p class="sub-label m-0">most popular</p>
|
||||||
<p class="mb-2">Standard service <span>As little as 59.97</span></p>
|
<ul>
|
||||||
<p class="sub-label m-0">most popular</p>
|
<li>New replacement windshield</li>
|
||||||
<ul>
|
<li>Expert installation</li>
|
||||||
<li>New replacement windshield</li>
|
<li>Nationwide lifetime warranty</li>
|
||||||
<li>Expert installation</li>
|
<li>New wiper blades</li>
|
||||||
<li>Nationwide lifetime warranty</li>
|
</ul>
|
||||||
<li>New wiper blades</li>
|
</div>
|
||||||
</ul>
|
</label>
|
||||||
</div>
|
</div>
|
||||||
</label>
|
<div class="package-wrapper">
|
||||||
</div>
|
<input type="radio" name="test-radio" id="testradio-3">
|
||||||
<div class="package-wrapper">
|
<label for="testradio-3">
|
||||||
<input type="radio" name="test-radio" id="testradio-3">
|
<div class="package-specs">
|
||||||
<label for="testradio-3">
|
<p class="mb-2">Premium service <span>As little as $94.97</span></p>
|
||||||
<div class="package-specs">
|
<ul>
|
||||||
<p class="mb-2">Premium service <span>As little as $94.97</span></p>
|
<li>New replacement windshield</li>
|
||||||
<ul>
|
<li>Expert installation</li>
|
||||||
<li>New replacement windshield</li>
|
<li>Nationwide lifetime warranty</li>
|
||||||
<li>Expert installation</li>
|
<li>New wiper blades</li>
|
||||||
<li>Nationwide lifetime warranty</li>
|
<li>Rain Defense™ treatment</li>
|
||||||
<li>New wiper blades</li>
|
</ul>
|
||||||
<li>Rain Defense™ treatment</li>
|
</div>
|
||||||
</ul>
|
</label>
|
||||||
</div>
|
</div>
|
||||||
</label>
|
</div>
|
||||||
</div>
|
|
||||||
</template>
|
</template>
|
||||||
|
|
||||||
<script>
|
<script>
|
||||||
export default {
|
export default {
|
||||||
name: "radioServicePackage",
|
name: "radioServicePackage",
|
||||||
|
data() {
|
||||||
|
return {
|
||||||
|
isActive: false,
|
||||||
|
};
|
||||||
|
},
|
||||||
|
methods: {
|
||||||
|
toggleClass: function(event){
|
||||||
|
this.isActive = !this.isActive;
|
||||||
|
}
|
||||||
|
}
|
||||||
}
|
}
|
||||||
</script>
|
</script>
|
||||||
|
|
||||||
<style lang="scss">
|
<style lang="scss">
|
||||||
.package-wrapper {
|
.package-main {
|
||||||
margin: 0.5rem 0;
|
a {
|
||||||
input[type="radio"] {
|
&:after {
|
||||||
opacity: 0;
|
content: "";
|
||||||
position: absolute;
|
transition: all .5s ease;
|
||||||
left: -9999px;
|
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;
|
||||||
+ label {
|
background-position: right center;
|
||||||
display: flex;
|
margin-left: .5rem;
|
||||||
align-items: flex-start;
|
width: 16px;
|
||||||
position: relative;
|
height: auto;
|
||||||
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;
|
|
||||||
}
|
|
||||||
}
|
}
|
||||||
|
&.active {
|
||||||
&:hover {
|
~ .package-wrapper {
|
||||||
+ label {
|
label {
|
||||||
&:before {
|
max-height: 500px !important;
|
||||||
border: 1px solid #8E9292;
|
|
||||||
box-shadow: 0px 0px 0px 4px #9FCEE6, 0px 1px 4px rgba(0, 0, 0, 0.2);
|
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
}
|
&.active:after {
|
||||||
|
transform: rotate(180deg);
|
||||||
&:checked {
|
}
|
||||||
+ label {
|
&.active + .vin-info {
|
||||||
background-color: $blue-100;
|
|
||||||
border: 1px solid $blue;
|
|
||||||
max-height: 500px;
|
max-height: 500px;
|
||||||
}
|
transition: all 250ms ease-in;
|
||||||
+ label {
|
opacity: 1;
|
||||||
&:before {
|
|
||||||
box-shadow: 0px 0px 0px 1px $blue;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
+ label {
|
|
||||||
&:after {
|
|
||||||
background: $blue;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
&:focus {
|
|
||||||
+ label {
|
|
||||||
&:before {
|
|
||||||
border: 2px solid $blue;
|
|
||||||
}
|
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
.package-wrapper {
|
||||||
|
margin: 0.5rem 0;
|
||||||
|
input[type="radio"] {
|
||||||
|
opacity: 0;
|
||||||
|
position: absolute;
|
||||||
|
left: -9999px;
|
||||||
|
|
||||||
.package-specs {
|
+ label {
|
||||||
display: flex;
|
display: flex;
|
||||||
flex-direction: column;
|
align-items: flex-start;
|
||||||
width: 100%;
|
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 {
|
&:before {
|
||||||
font-weight: 500;
|
content: "";
|
||||||
display: flex;
|
position: relative;
|
||||||
justify-content: space-between;
|
top: 5px;
|
||||||
span {
|
margin-right: 1rem;
|
||||||
color: $green;
|
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;
|
&:hover {
|
||||||
text-transform: uppercase;
|
+ 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;
|
.package-specs {
|
||||||
padding: 0;
|
display: flex;
|
||||||
li {
|
flex-direction: column;
|
||||||
margin-bottom: .5rem;
|
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