Merge pull request #516 from Safelite/CSR-544-modal-footer
CSR-544 footer modal hamburger button.
This commit is contained in:
bmauger
GitHub
commit
573f1e94ca
5 changed files with 176 additions and 194 deletions
|
|
@ -103,135 +103,134 @@ export default {
|
|||
}
|
||||
|
||||
.text-container {
|
||||
display: flex;
|
||||
width: 350px;
|
||||
overflow: hidden;
|
||||
white-space: nowrap;
|
||||
margin: 0 auto;
|
||||
position: relative;
|
||||
&:after {
|
||||
content: '';
|
||||
background: rgb(245,245,245);
|
||||
background: linear-gradient(270deg, rgba(245,245,245,1) 0%, rgba(245,245,245,0) 5%, rgba(245,245,245,0) 95%, rgba(245,245,245,1) 100%);
|
||||
position: absolute;
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
z-index: 2;
|
||||
top: 0;
|
||||
left: 0;
|
||||
right: 0;
|
||||
bottom: 0;
|
||||
}
|
||||
display: flex;
|
||||
width: 350px;
|
||||
overflow: hidden;
|
||||
white-space: nowrap;
|
||||
margin: 0 auto;
|
||||
position: relative;
|
||||
&:after {
|
||||
content: '';
|
||||
background: rgb(245,245,245);
|
||||
background: linear-gradient(270deg, rgba(245,245,245,1) 0%, rgba(245,245,245,0) 5%, rgba(245,245,245,0) 95%, rgba(245,245,245,1) 100%);
|
||||
position: absolute;
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
z-index: 2;
|
||||
top: 0;
|
||||
left: 0;
|
||||
right: 0;
|
||||
bottom: 0;
|
||||
}
|
||||
|
||||
&.slide p {
|
||||
animation: slide-in 20s ease-in-out 1s forwards 1;
|
||||
}
|
||||
&.slide p {
|
||||
animation: slide-in 20s ease-in-out 1s forwards 1;
|
||||
}
|
||||
|
||||
|
||||
p {
|
||||
margin: 0 175px;
|
||||
transform: translateX(-2346px);
|
||||
}
|
||||
p {
|
||||
margin: 0 175px;
|
||||
transform: translateX(-2346px);
|
||||
}
|
||||
|
||||
@keyframes slide-in {
|
||||
0% {
|
||||
transform: translateX(-2346px)
|
||||
}
|
||||
11% {
|
||||
transform: translateX(-2010px)
|
||||
}
|
||||
22% {
|
||||
transform: translateX(-2010px)
|
||||
}
|
||||
33% {
|
||||
transform: translateX(-1490px)
|
||||
}
|
||||
44% {
|
||||
transform: translateX(-1490px)
|
||||
}
|
||||
55% {
|
||||
transform: translateX(-985px)
|
||||
}
|
||||
66% {
|
||||
transform: translateX(-985px)
|
||||
}
|
||||
77% {
|
||||
transform: translateX(-490px)
|
||||
}
|
||||
88% {
|
||||
transform: translateX(-490px)
|
||||
}
|
||||
100% {
|
||||
transform: translateX(-40px)
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
.dot-1 {
|
||||
animation: blinking-elipsis .75s linear infinite;
|
||||
@keyframes blinking-elipsis {
|
||||
@keyframes slide-in {
|
||||
0% {
|
||||
opacity: 1;
|
||||
transform: translateX(-2346px)
|
||||
}
|
||||
65% {
|
||||
opacity: 1;
|
||||
}
|
||||
66% {
|
||||
opacity: 0;
|
||||
}
|
||||
100% {
|
||||
opacity: 0;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.dot-2 {
|
||||
animation: blinking-elipsis-2 .75s linear infinite;
|
||||
@keyframes blinking-elipsis-2 {
|
||||
0% {
|
||||
opacity: 0;
|
||||
}
|
||||
21% {
|
||||
opacity: 0;
|
||||
11% {
|
||||
transform: translateX(-2010px)
|
||||
}
|
||||
22% {
|
||||
opacity: 1;
|
||||
transform: translateX(-2010px)
|
||||
}
|
||||
65% {
|
||||
opacity: 1;
|
||||
}
|
||||
66% {
|
||||
opacity: 0;
|
||||
}
|
||||
100% {
|
||||
opacity: 0;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.dot-3 {
|
||||
animation: blinking-elipsis-3 .75s linear infinite;
|
||||
@keyframes blinking-elipsis-3 {
|
||||
0% {
|
||||
opacity: 0;
|
||||
}
|
||||
43% {
|
||||
opacity: 0;
|
||||
33% {
|
||||
transform: translateX(-1490px)
|
||||
}
|
||||
44% {
|
||||
opacity: 1;
|
||||
transform: translateX(-1490px)
|
||||
}
|
||||
65% {
|
||||
opacity: 1;
|
||||
55% {
|
||||
transform: translateX(-985px)
|
||||
}
|
||||
66% {
|
||||
opacity: 0;
|
||||
transform: translateX(-985px)
|
||||
}
|
||||
77% {
|
||||
transform: translateX(-490px)
|
||||
}
|
||||
88% {
|
||||
transform: translateX(-490px)
|
||||
}
|
||||
100% {
|
||||
opacity: 0;
|
||||
transform: translateX(-40px)
|
||||
}
|
||||
}
|
||||
|
||||
.dot-1 {
|
||||
animation: blinking-elipsis .75s linear infinite;
|
||||
@keyframes blinking-elipsis {
|
||||
0% {
|
||||
opacity: 1;
|
||||
}
|
||||
65% {
|
||||
opacity: 1;
|
||||
}
|
||||
66% {
|
||||
opacity: 0;
|
||||
}
|
||||
100% {
|
||||
opacity: 0;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.dot-2 {
|
||||
animation: blinking-elipsis-2 .75s linear infinite;
|
||||
@keyframes blinking-elipsis-2 {
|
||||
0% {
|
||||
opacity: 0;
|
||||
}
|
||||
21% {
|
||||
opacity: 0;
|
||||
}
|
||||
22% {
|
||||
opacity: 1;
|
||||
}
|
||||
65% {
|
||||
opacity: 1;
|
||||
}
|
||||
66% {
|
||||
opacity: 0;
|
||||
}
|
||||
100% {
|
||||
opacity: 0;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.dot-3 {
|
||||
animation: blinking-elipsis-3 .75s linear infinite;
|
||||
@keyframes blinking-elipsis-3 {
|
||||
0% {
|
||||
opacity: 0;
|
||||
}
|
||||
43% {
|
||||
opacity: 0;
|
||||
}
|
||||
44% {
|
||||
opacity: 1;
|
||||
}
|
||||
65% {
|
||||
opacity: 1;
|
||||
}
|
||||
66% {
|
||||
opacity: 0;
|
||||
}
|
||||
100% {
|
||||
opacity: 0;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
</style>
|
||||
|
|
|
|||
1
src/common-components/menu-button/menu-button.spec.js
Normal file
1
src/common-components/menu-button/menu-button.spec.js
Normal file
|
|
@ -0,0 +1 @@
|
|||
test.todo("some test to be written in the future");
|
||||
53
src/common-components/menu-button/menu-button.vue
Normal file
53
src/common-components/menu-button/menu-button.vue
Normal file
|
|
@ -0,0 +1,53 @@
|
|||
<template>
|
||||
<div class="menu-button" :class="[isActive ? 'active' : '']" @click="toggleClass()">
|
||||
<div class="bar1"></div>
|
||||
<div class="bar2"></div>
|
||||
<div class="bar3"></div>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
export default {
|
||||
name: 'menuButton',
|
||||
data() {
|
||||
return {
|
||||
isActive: false,
|
||||
};
|
||||
},
|
||||
methods: {
|
||||
toggleClass: function(event){
|
||||
this.isActive = !this.isActive;
|
||||
}
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
<style lang="scss">
|
||||
.menu-button {
|
||||
width: 1.5rem;
|
||||
height: 1.5rem;
|
||||
border-radius: 50%;
|
||||
box-shadow: 0px 0px 8px 2px rgba(0,0,0,0.2);
|
||||
position: relative;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
.bar1,
|
||||
.bar2,
|
||||
.bar3 {
|
||||
width: 14px;
|
||||
height: 2px;
|
||||
background-color: $blue-400;
|
||||
margin: 1px 0;
|
||||
transition: 0.25s;
|
||||
}
|
||||
&.active .bar1 {
|
||||
transform: rotate(-45deg) translate(-3px, 3px);
|
||||
}
|
||||
&.active .bar2 {opacity: 0;}
|
||||
&.active .bar3 {
|
||||
transform: rotate(45deg) translate(-3px, -3px);
|
||||
}
|
||||
}
|
||||
</style>
|
||||
|
|
@ -1,5 +1,15 @@
|
|||
<template>
|
||||
<div class="container-fluid container-shadow p-2 rounded-3">
|
||||
<div class="row my-4">
|
||||
<div class="col">
|
||||
<h4 class="m-0 p-2 bg-light rounded">Hamburger Menu Button</h4>
|
||||
</div>
|
||||
</div>
|
||||
<div class="row my-2">
|
||||
<div class="col">
|
||||
<menuButton/>
|
||||
</div>
|
||||
</div>
|
||||
<div class="row my-4">
|
||||
<div class="col">
|
||||
<h4 class="m-0 p-2 bg-light rounded">VIN Information</h4>
|
||||
|
|
@ -1064,81 +1074,6 @@
|
|||
<h6>h6 Heading</h6>
|
||||
</div>
|
||||
</div>
|
||||
<div class="row my-4">
|
||||
<div class="col">
|
||||
<h4 class="m-0 p-2 bg-light rounded">Alerts</h4>
|
||||
</div>
|
||||
</div>
|
||||
<div class="row my-2">
|
||||
<div class="col">
|
||||
<alert
|
||||
alertClass="alert-success"
|
||||
alertHeadline="Dismissible Alert"
|
||||
alertCopy="This is an example of a DISMISSIBLE alert. It will fade away and content around it will shift when dismissed."
|
||||
v-bind:isDismissible="true"
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
<div class="row my-2">
|
||||
<div class="col">
|
||||
<alert
|
||||
alertClass="alert-danger"
|
||||
alertHeadline="NON-Dismissible Alert"
|
||||
alertCopy="This is an example of a NON-DISMISSIBLE alert."
|
||||
v-bind:isDismissible="false"
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
<div class="row my-2">
|
||||
<div class="col">
|
||||
<alert
|
||||
alertClass="alert-warning"
|
||||
alertHeadline="Warning Alert"
|
||||
alertCopy="This is an example of a WARNING alert."
|
||||
v-bind:isDismissible="false"
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
<div class="row my-2">
|
||||
<div class="col">
|
||||
<alert
|
||||
alertClass="alert-info"
|
||||
alertHeadline="Info Alert"
|
||||
alertCopy="This is an example of a INFO alert."
|
||||
v-bind:isDismissible="false"
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
<div class="row my-2">
|
||||
<div class="col">
|
||||
<alert
|
||||
alertClass="alert-danger"
|
||||
alertHeadline="Danger Alert"
|
||||
alertCopy="This is an example of a DANGER alert."
|
||||
v-bind:isDismissible="false"
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
<div class="row my-2">
|
||||
<div class="col">
|
||||
<alert
|
||||
alertClass="alert-success"
|
||||
alertHeadline="No Body Copy Alert"
|
||||
alertCopy=""
|
||||
v-bind:isDismissible="false"
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
<div class="row my-2">
|
||||
<div class="col">
|
||||
<alert
|
||||
alertClass="alert-success"
|
||||
alertHeadline="Multi-Paragraph Alert"
|
||||
:alertCopy="['This is an example of a MULTI-PARAGRAPH alert, which takes an array of strings instead of a single string value for alertCopy.', 'This is the second item in the array of strings.']"
|
||||
v-bind:isDismissible="false"
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
|
|
@ -1147,7 +1082,6 @@
|
|||
import buttonBack from "@/common-components/funnel-sub-header/button-back/button-back";
|
||||
import listCard from "@/ux-components/list-card/list-card";
|
||||
import listButton from "@/ux-components/list-button/list-button";
|
||||
import alert from "@/ux-components/alert/alert";
|
||||
import listButtonHorizontal from "@/ux-components/list-button-horizontal/list-button-horizontal";
|
||||
import checkbox from "@/ux-components/checkbox/checkbox";
|
||||
import radio from "@/ux-components/radio/radio";
|
||||
|
|
@ -1155,6 +1089,7 @@
|
|||
import textboxQuestion from "@/common-components/textbox-question/textbox-question";
|
||||
import dropdownQuestion from "@/common-components/dropdown-question/dropdown-question";
|
||||
import vinInformation from "@/layouts/vin-lookup/vin-information/vin-information";
|
||||
import menuButton from "@/common-components/menu-button/menu-button";
|
||||
export default {
|
||||
name: "App",
|
||||
components: {
|
||||
|
|
@ -1162,7 +1097,6 @@
|
|||
buttonBack,
|
||||
listCard,
|
||||
listButton,
|
||||
alert,
|
||||
listButtonHorizontal,
|
||||
checkbox,
|
||||
radio,
|
||||
|
|
@ -1170,6 +1104,7 @@
|
|||
textboxQuestion,
|
||||
dropdownQuestion,
|
||||
vinInformation,
|
||||
menuButton,
|
||||
},
|
||||
data() {
|
||||
return {
|
||||
|
|
|
|||
|
|
@ -21,7 +21,6 @@ import analyticsMixin from "@/mixins/analytics-mixin";
|
|||
// Components
|
||||
import ComponentTest from "@/layouts/component-test/component-test.vue";
|
||||
import FormTest from "@/layouts/form-test/form-test.vue";
|
||||
import Modal from "@/common-components/loading-modal/loading-modal.vue";
|
||||
|
||||
|
||||
const routes = [
|
||||
|
|
@ -35,11 +34,6 @@ const routes = [
|
|||
name: "FormTest",
|
||||
component: FormTest,
|
||||
},
|
||||
{
|
||||
path: "/loading-modal", // This is a temporary route for testing.
|
||||
name: "Modal",
|
||||
component: Modal,
|
||||
},
|
||||
{
|
||||
path: "/",
|
||||
name: "root",
|
||||
|
|
|
|||
Loading…
Reference in a new issue