CASH-313 chat styles and refactor funnel-header.
This commit is contained in:
Bryan Mauger
parent
d7e6f58eef
commit
5f5ca81c1f
3 changed files with 44 additions and 55 deletions
|
|
@ -1,5 +1,7 @@
|
||||||
<template>
|
<template>
|
||||||
<span class="salesforce-webchat"></span>
|
<span class="salesforce-webchat">
|
||||||
|
<button v-show="hideSalesforceWebchatLaunchButton" class="salesforce-chat-button"></button>
|
||||||
|
</span>
|
||||||
</template>
|
</template>
|
||||||
|
|
||||||
<script>
|
<script>
|
||||||
|
|
@ -50,11 +52,23 @@ export default {
|
||||||
</script>
|
</script>
|
||||||
|
|
||||||
<style type="text/css">
|
<style type="text/css">
|
||||||
.embeddedServiceHelpButton .helpButton .uiButton {
|
.salesforce-webchat {
|
||||||
background-color: #167cac;
|
.salesforce-chat-button {
|
||||||
font-family: "Arial", sans-serif;
|
width: 1.5rem;
|
||||||
|
height: 1.5rem;
|
||||||
|
background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' xml:space='preserve' id='Layer_2' x='0' y='0' style='enable-background:new 0 0 24 24' version='1.1' viewBox='0 0 24 24'%3E%3Cstyle%3E .st0%7Bfill:%232e6fb6%7D %3C/style%3E%3Ccircle cx='12' cy='12' r='12' class='st0'/%3E%3Cpath d='M18.3 12c0 3.5-2.8 6.3-6.3 6.3-1.2 0-2.4-.4-3.4-1l-2.3.7s-.5.1-.3-.4.5-1.7.7-2.2c-.6-1-1-2.1-1-3.3 0-3.5 2.8-6.3 6.3-6.3 3.5-.1 6.3 2.7 6.3 6.2z' style='fill:%23fff'/%3E%3Ccircle cx='10.2' cy='12' r='.6' class='st0'/%3E%3Ccircle cx='12' cy='12' r='.6' class='st0'/%3E%3Ccircle cx='13.8' cy='12' r='.6' class='st0'/%3E%3C/svg%3E");
|
||||||
|
background-repeat: no-repeat;
|
||||||
|
background-size: 1.5rem 1.5rem;
|
||||||
|
background-position: center;
|
||||||
|
border: none;
|
||||||
|
background-color: transparent;
|
||||||
|
}
|
||||||
|
.embeddedServiceHelpButton .helpButton .uiButton {
|
||||||
|
background-color: #167cac;
|
||||||
|
font-family: "Arial", sans-serif;
|
||||||
}
|
}
|
||||||
.embeddedServiceHelpButton .helpButton .uiButton:focus {
|
.embeddedServiceHelpButton .helpButton .uiButton:focus {
|
||||||
outline: 1px solid #167cac;
|
outline: 1px solid #167cac;
|
||||||
|
}
|
||||||
}
|
}
|
||||||
</style>
|
</style>
|
||||||
|
|
|
||||||
|
|
@ -1,23 +1,20 @@
|
||||||
<template>
|
<template>
|
||||||
<div class="funnel-header" v-if="imageSrc">
|
<div class="funnel-header" v-if="imageSrc">
|
||||||
<salesforceWebchat hideSalesforceWebchatLaunchButton />
|
<div class="d-flex justify-content-between align-items-center">
|
||||||
<div class="header-column-1 d-flex justify-content-between">
|
<div class="button-container">
|
||||||
<div class="d-flex justify-content-center align-items-center">
|
<salesforceWebchat hideSalesforceWebchatLaunchButton />
|
||||||
<button class="salesforce-chat-button"></button>
|
|
||||||
</div>
|
</div>
|
||||||
<div class="d-flex justify-content-center align-items-center">
|
<div class="site-logo">
|
||||||
<img class="logo-image img-fluid" :src="imageSrc" alt="Safelite logo" />
|
<img class="logo-image img-fluid" :src="imageSrc" alt="Safelite logo" />
|
||||||
</div>
|
</div>
|
||||||
<!-- // menu-modal temporarily not in use until the hamburger menu is re-implemented for use with the progress bar. See display: none below. -->
|
<div class="button-container">
|
||||||
<div class="d-flex justify-content-center align-items-center position-relative">
|
<!-- // menu-modal temporarily not in use until the hamburger menu is re-implemented for use with the progress bar. See display: none below. -->
|
||||||
<menuModal />
|
<menuModal />
|
||||||
|
<!-- // menu-modal temporarily not in use until the hamburger menu is re-implemented for use with the progress bar. See display: none below. -->
|
||||||
</div>
|
</div>
|
||||||
<!-- // menu-modal temporarily not in use until the hamburger menu is re-implemented for use with the progress bar. See display: none below. -->
|
|
||||||
</div>
|
</div>
|
||||||
<div class="header-column-2">
|
<div class="d-flex w-100">
|
||||||
<div class="d-flex w-100 flex-wrap">
|
<progressBar />
|
||||||
<progressBar />
|
|
||||||
</div>
|
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
<template v-for="globalAlert in globalAlertMessages" :key="globalAlert.id">
|
<template v-for="globalAlert in globalAlertMessages" :key="globalAlert.id">
|
||||||
|
|
@ -56,7 +53,7 @@ export default {
|
||||||
cmsWidgetName: String,
|
cmsWidgetName: String,
|
||||||
hideSalesforceWebchatLaunchButton: {
|
hideSalesforceWebchatLaunchButton: {
|
||||||
type: Boolean,
|
type: Boolean,
|
||||||
default: false,
|
default: true,
|
||||||
},
|
},
|
||||||
},
|
},
|
||||||
computed: {
|
computed: {
|
||||||
|
|
@ -111,27 +108,23 @@ export default {
|
||||||
</script>
|
</script>
|
||||||
|
|
||||||
<style lang="scss" scoped>
|
<style lang="scss" scoped>
|
||||||
:deep(.menu-modal-container) {
|
|
||||||
//display: none; // This is temporary until the hamburger menu is re-implemented for use with the progress bar
|
|
||||||
}
|
|
||||||
.funnel-header {
|
.funnel-header {
|
||||||
position: relative;
|
position: relative;
|
||||||
padding: 0.97rem 0;
|
padding: 1rem 0;
|
||||||
}
|
|
||||||
|
|
||||||
.logo-image {
|
.button-container {
|
||||||
width: auto;
|
width: 1.5rem;
|
||||||
height: 1.1875rem;
|
height: 1.625rem;
|
||||||
}
|
}
|
||||||
|
|
||||||
.salesforce-chat-button {
|
.logo-image {
|
||||||
width: 1.5rem;
|
width: auto;
|
||||||
height: 1.5rem;
|
height: 1.1875rem;
|
||||||
background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' xml:space='preserve' id='Layer_2' x='0' y='0' style='enable-background:new 0 0 24 24' version='1.1' viewBox='0 0 24 24'%3E%3Cstyle%3E .st0%7Bfill:%232e6fb6%7D %3C/style%3E%3Ccircle cx='12' cy='12' r='12' class='st0'/%3E%3Cpath d='M18.3 12c0 3.5-2.8 6.3-6.3 6.3-1.2 0-2.4-.4-3.4-1l-2.3.7s-.5.1-.3-.4.5-1.7.7-2.2c-.6-1-1-2.1-1-3.3 0-3.5 2.8-6.3 6.3-6.3 3.5-.1 6.3 2.7 6.3 6.2z' style='fill:%23fff'/%3E%3Ccircle cx='10.2' cy='12' r='.6' class='st0'/%3E%3Ccircle cx='12' cy='12' r='.6' class='st0'/%3E%3Ccircle cx='13.8' cy='12' r='.6' class='st0'/%3E%3C/svg%3E");
|
margin: 0 auto;
|
||||||
background-repeat: no-repeat;
|
}
|
||||||
background-size: 1.5rem 1.5rem;
|
|
||||||
background-position: center;
|
:deep(.menu-modal-container) {
|
||||||
border: none;
|
display: none; // This is temporary until the hamburger menu is re-implemented for use with the progress bar
|
||||||
background-color: transparent;
|
}
|
||||||
}
|
}
|
||||||
</style>
|
</style>
|
||||||
|
|
|
||||||
|
|
@ -11,21 +11,6 @@
|
||||||
<div class="bar3"></div>
|
<div class="bar3"></div>
|
||||||
</button>
|
</button>
|
||||||
</div>
|
</div>
|
||||||
<!-- <div class="menu-modal-container">
|
|
||||||
<button
|
|
||||||
aria-hidden="true"
|
|
||||||
tabindex="-1"
|
|
||||||
class="menu-button"
|
|
||||||
type="button"
|
|
||||||
:class="[isActive ? 'active' : '']"
|
|
||||||
@click="toggleModal"
|
|
||||||
aria-label="Hamburger Menu (modal window)">
|
|
||||||
<div class="bar1"></div>
|
|
||||||
<div class="bar2"></div>
|
|
||||||
<div class="bar3"></div>
|
|
||||||
</button>
|
|
||||||
</div> -->
|
|
||||||
<!-- Modal -->
|
|
||||||
<div
|
<div
|
||||||
class="modal menu-modal fade"
|
class="modal menu-modal fade"
|
||||||
data-bs-backdrop="false"
|
data-bs-backdrop="false"
|
||||||
|
|
@ -123,9 +108,6 @@ export default {
|
||||||
|
|
||||||
<style lang="scss" scoped>
|
<style lang="scss" scoped>
|
||||||
.menu-modal-container {
|
.menu-modal-container {
|
||||||
//position: absolute;
|
|
||||||
//padding: 1.47rem 0 1.47rem 1.47rem;
|
|
||||||
//right: 0;
|
|
||||||
button {
|
button {
|
||||||
border: none;
|
border: none;
|
||||||
&.menu-button {
|
&.menu-button {
|
||||||
|
|
|
||||||
Loading…
Reference in a new issue