143 lines
4 KiB
Vue
143 lines
4 KiB
Vue
<template>
|
|
<div class="footer-menu-container">
|
|
<div class="footer-menu-wrapper">
|
|
<div class="footer-menu-image-container">
|
|
<div class="footer-menu-image">
|
|
<img
|
|
:src="require('@/assets/img/powered-by-safelite-solutions.svg')"
|
|
alt="Powered by Safelite Solutions" />
|
|
</div>
|
|
</div>
|
|
<div class="footer-menu-items-container">
|
|
<!-- Footer menu items go here -->
|
|
<div class="footer-menu-item">
|
|
© {{ new Date().getFullYear() }} Safelite Group
|
|
</div>
|
|
<div class="footer-menu-item">
|
|
<textLink
|
|
linkType="newWindowLink"
|
|
text="Terms of service"
|
|
href="//www.safelite.com/terms-of-use"
|
|
target="_blank" />
|
|
</div>
|
|
<div class="footer-menu-item">
|
|
<textLink
|
|
linkType="newWindowLink"
|
|
text="Your privacy choices"
|
|
href="//www.safelite.com/privacy-center"
|
|
target="_blank">
|
|
<template #after-text>
|
|
<img
|
|
class="ccpa-icon"
|
|
src="~@/assets/img/icons/ccpa-icon.svg"
|
|
alt="Your privacy choices" />
|
|
</template>
|
|
</textLink>
|
|
</div>
|
|
<div class="footer-menu-item">
|
|
Cookie Preferences
|
|
</div>
|
|
<div class="footer-menu-item">
|
|
<textLink
|
|
linkType="newWindowLink"
|
|
text="Notice at collection"
|
|
href="https://www.safelite.com/ccpa-privacy-policy"
|
|
target="_blank" />
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</template>
|
|
|
|
<script>
|
|
import textLink from '@/ux-components/text-link/text-link.vue';
|
|
|
|
export default {
|
|
name: 'footer-menu',
|
|
components: {
|
|
textLink
|
|
}
|
|
};
|
|
</script>
|
|
<style lang="scss" scoped>
|
|
.footer-menu-container {
|
|
display: flex;
|
|
border-top: solid 0.125rem #d3d3d3;
|
|
|
|
@include media-breakpoint-up(xs) {
|
|
padding: 1rem 0 1.25rem 0; // Heritage 1.250rem 0
|
|
flex-direction: column;
|
|
justify-content: center;
|
|
align-items: center;
|
|
}
|
|
|
|
@include media-breakpoint-up(xl) {
|
|
padding: 3rem 0;
|
|
.footer-menu-wrapper {
|
|
display: flex;
|
|
flex-direction: row-reverse;
|
|
justify-content: space-between;
|
|
align-items: center;
|
|
}
|
|
}
|
|
|
|
.footer-menu-items-container {
|
|
@include media-breakpoint-up(xs) {
|
|
display: flex;
|
|
width: 100%;
|
|
flex-direction: column;
|
|
justify-content: center;
|
|
align-items: center;
|
|
margin-top: 1.25rem;
|
|
|
|
.footer-menu-item:not(:first-child) {
|
|
margin-top: 0.75rem;
|
|
}
|
|
}
|
|
|
|
@include media-breakpoint-up(xl) {
|
|
display: flex;
|
|
flex-direction: row;
|
|
justify-content: space-between;
|
|
align-items: center;
|
|
margin-top: 0;
|
|
|
|
.footer-menu-item {
|
|
margin-top: 0;
|
|
margin-right: 1.75rem;
|
|
|
|
&:not(:first-child) {
|
|
margin-top: 0;
|
|
}
|
|
&:last-child {
|
|
margin-right: 5rem;
|
|
}
|
|
}
|
|
}
|
|
|
|
.footer-menu-item {
|
|
display: flex;
|
|
text-align: center;
|
|
font-size: 0.875rem;
|
|
|
|
.ccpa-icon {
|
|
width: 2.0625rem;
|
|
height: 1rem;
|
|
margin-left: 0.5rem;
|
|
}
|
|
|
|
a {
|
|
color: #525656;
|
|
text-decoration: none;
|
|
line-height: 1.56;
|
|
font-weight: 400;
|
|
padding: 0;
|
|
|
|
&:hover {
|
|
text-decoration: underline;
|
|
}
|
|
}
|
|
}
|
|
}
|
|
}
|
|
</style>
|