101 lines
2.4 KiB
Vue
101 lines
2.4 KiB
Vue
<template>
|
|
<div class="vin-information">
|
|
<div class="vin-toggle mt-2" :class="[isActive ? 'active' : '']" @click="toggleClass()">
|
|
<textLink
|
|
linkType="text"
|
|
href="#!"
|
|
:text="WhereCanIFindMyVINHeadline"
|
|
/>
|
|
</div>
|
|
<div class="vin-info">
|
|
<div class="mt-2" v-html="WhereCanIFindMyVINBodyCopy"></div>
|
|
<img :src="WhereCanIFindMyVINImage" alt="" />
|
|
</div>
|
|
</div>
|
|
</template>
|
|
|
|
<script>
|
|
|
|
import textLink from "@/ux-components/text-link/text-link";
|
|
//Supporting files
|
|
import { settleAllPromises } from "@/helpers/layout-helper";
|
|
export default {
|
|
name: "vinInformation",
|
|
components: {
|
|
textLink,
|
|
},
|
|
data() {
|
|
return {
|
|
isActive: false,
|
|
};
|
|
},
|
|
methods: {
|
|
toggleClass: function(event){
|
|
this.isActive = !this.isActive;
|
|
}
|
|
},
|
|
computed: {
|
|
WhereCanIFindMyVINHeadline(){
|
|
return this.getCmsContent("WhereCanIFindMyVINToggle", "HeaderText");
|
|
},
|
|
WhereCanIFindMyVINBodyCopy(){
|
|
return this.getCmsContent("WhereCanIFindMyVINToggle", "BodyText");
|
|
},
|
|
WhereCanIFindMyVINImage(){
|
|
return this.getCmsContent("WhereCanIFindMyVINToggle", "Image");
|
|
},
|
|
}
|
|
}
|
|
|
|
</script>
|
|
|
|
<style lang="scss">
|
|
.vin-information {
|
|
p,li {
|
|
font-size: .875rem;
|
|
color: $gray-600;
|
|
}
|
|
li {
|
|
line-height: 26px;
|
|
}
|
|
a {
|
|
font-size: .875rem;
|
|
}
|
|
.vin-toggle {
|
|
&: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;
|
|
}
|
|
&.active:after {
|
|
transform: rotate(180deg);
|
|
}
|
|
&.active + .vin-info {
|
|
max-height: 500px;
|
|
transition: all 250ms ease-in;
|
|
opacity: 1;
|
|
visibility: visible;
|
|
}
|
|
}
|
|
.vin-info {
|
|
max-height: 0;
|
|
transition: all 250ms ease-out;
|
|
overflow: hidden;
|
|
opacity: 0;
|
|
visibility: hidden;
|
|
p {
|
|
margin-bottom: .5rem;
|
|
}
|
|
img {
|
|
max-width: 100%;
|
|
width: 117%;
|
|
height: auto;
|
|
}
|
|
}
|
|
}
|
|
</style>
|