jason/DigitalConsumer.ISS
1
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity Actions

Commit

Browse source
This commit is contained in:
katie 2023-02-24 14:16:37 -05:00
commit f8204c9054
21 changed files with 158 additions and 112 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

1
src/App.vue
View file

@ -14,4 +14,5 @@
@import "@/styles/common-error-styles.scss";
@import "@/styles/common-animations.scss";
@import "@/styles/shared-input-button-styles.scss";
@import "@/styles/client-customizations.scss"
</style>

6
src/digital-components/button-question/button-question.vue
View file

@ -4,13 +4,13 @@
:class="
isOverflowScrollable ? 'button-question button-question-overflow' : 'button-question'
">
<div v-if="questionText && answers && answers.length > 0" class="question-text d-flex">
<div v-if="questionText && answers && answers.length > 0" class="question-text d-flex px-5">
<span class="fw-bold w-100">{{ questionText }}</span>
</div>
<div class="w-100 d-flex justify-content-center">
<fieldset
class="w-100"
class="w-100 px-5"
:aria-required="isRequired"
:class="getFieldSetClasses"
:role="isMultiSelect ? 'group' : 'radiogroup'"
@ -135,7 +135,7 @@ export default {
computed: {
getFieldSetClasses() {
if (this.isOverflowScrollable) {
return "container-fluid overflow-scroll position-absolute px-5 pt-1 py-0";
return "container-fluid overflow-scroll position-absolute pt-1 py-0";
} else if (this.buttonTypeString == "listCard") {
return "w-100";
} else {

2
src/digital-components/textbox-question/textbox-question.vue
View file

@ -210,7 +210,7 @@ input[type="date"]::-webkit-calendar-picker-indicator {
transform: translateY(-50%);
right: 1px;
background-image: url("data:image/svg+xml,%3Csvg width='16' height='16' viewBox='0 0 16 16' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M14.1762 1.52764H13.7656V1.50352C13.7656 1.10476 13.6076 0.722334 13.3263 0.44037C13.0451 0.158406 12.6636 0 12.2659 0C11.8681 0 11.4866 0.158406 11.2054 0.44037C10.9241 0.722334 10.7661 1.10476 10.7661 1.50352V1.52764H5.42476V1.50352C5.42476 1.10476 5.26675 0.722334 4.9855 0.44037C4.70424 0.158406 4.32277 0 3.92501 0C3.52725 0 3.14579 0.158406 2.86453 0.44037C2.58327 0.722334 2.42526 1.10476 2.42526 1.50352V1.52764H1.82376C1.34046 1.52891 0.877316 1.72195 0.53557 2.06455C0.193824 2.40716 0.00127018 2.87146 0 3.35598V14.1717C0.0016909 14.656 0.194379 15.1201 0.536035 15.4626C0.87769 15.8051 1.34059 15.9983 1.82376 16H14.1746C14.6581 15.9987 15.1214 15.8057 15.4634 15.4632C15.8054 15.1206 15.9983 14.6563 16 14.1717V3.35598C15.9987 2.87146 15.8062 2.40716 15.4644 2.06455C15.1227 1.72195 14.6595 1.52891 14.1762 1.52764ZM11.8889 1.50352C11.8889 1.4033 11.9286 1.30718 11.9993 1.23631C12.07 1.16544 12.1659 1.12563 12.2659 1.12563C12.3658 1.12563 12.4617 1.16544 12.5324 1.23631C12.6031 1.30718 12.6428 1.4033 12.6428 1.50352V2.99899C12.6428 3.09922 12.6031 3.19534 12.5324 3.2662C12.4617 3.33707 12.3658 3.37688 12.2659 3.37688C12.1659 3.37688 12.07 3.33707 11.9993 3.2662C11.9286 3.19534 11.8889 3.09922 11.8889 2.99899V1.50352ZM3.54807 1.50352C3.54807 1.4033 3.58778 1.30718 3.65847 1.23631C3.72916 1.16544 3.82504 1.12563 3.92501 1.12563C4.02498 1.12563 4.12086 1.16544 4.19155 1.23631C4.26224 1.30718 4.30195 1.4033 4.30195 1.50352V2.99899C4.30195 3.09922 4.26224 3.19534 4.19155 3.2662C4.12086 3.33707 4.02498 3.37688 3.92501 3.37688C3.82504 3.37688 3.72916 3.33707 3.65847 3.2662C3.58778 3.19534 3.54807 3.09922 3.54807 2.99899V1.50352ZM14.8772 14.1717C14.8747 14.3573 14.8001 14.5345 14.6691 14.6658C14.5382 14.797 14.3614 14.8719 14.1762 14.8744H1.82536C1.63995 14.8723 1.4627 14.7976 1.33144 14.6663C1.20018 14.5351 1.12531 14.3575 1.12281 14.1717V6.59296H14.8772V14.1717Z' fill='%23167CAC'/%3E%3Cpath d='M2.33063 11.282H3.93464V12.6006C3.93464 12.7499 3.99379 12.8931 4.09907 12.9986C4.20435 13.1041 4.34715 13.1634 4.49604 13.1634C4.64494 13.1634 4.78773 13.1041 4.89301 12.9986C4.9983 12.8931 5.05745 12.7499 5.05745 12.6006V11.282H7.46346V12.6006C7.46346 12.7499 7.52261 12.8931 7.62789 12.9986C7.73318 13.1041 7.87597 13.1634 8.02486 13.1634C8.17376 13.1634 8.31655 13.1041 8.42184 12.9986C8.52712 12.8931 8.58627 12.7499 8.58627 12.6006V11.282H10.9923V12.6006C10.9923 12.7499 11.0514 12.8931 11.1567 12.9986C11.262 13.1041 11.4048 13.1634 11.5537 13.1634C11.7026 13.1634 11.8454 13.1041 11.9507 12.9986C12.0559 12.8931 12.1151 12.7499 12.1151 12.6006V11.282H13.7191C13.868 11.282 14.0108 11.2227 14.1161 11.1172C14.2214 11.0116 14.2805 10.8685 14.2805 10.7192C14.2805 10.57 14.2214 10.4268 14.1161 10.3213C14.0108 10.2157 13.868 10.1564 13.7191 10.1564H12.1151V8.84425C12.1151 8.69498 12.0559 8.55183 11.9507 8.44628C11.8454 8.34073 11.7026 8.28143 11.5537 8.28143C11.4048 8.28143 11.262 8.34073 11.1567 8.44628C11.0514 8.55183 10.9923 8.69498 10.9923 8.84425V10.1628H8.58627V8.84425C8.58627 8.69498 8.52712 8.55183 8.42184 8.44628C8.31655 8.34073 8.17376 8.28143 8.02486 8.28143C7.87597 8.28143 7.73318 8.34073 7.62789 8.44628C7.52261 8.55183 7.46346 8.69498 7.46346 8.84425V10.1628H5.05745V8.84425C5.05745 8.69498 4.9983 8.55183 4.89301 8.44628C4.78773 8.34073 4.64494 8.28143 4.49604 8.28143C4.34715 8.28143 4.20435 8.34073 4.09907 8.44628C3.99379 8.55183 3.93464 8.69498 3.93464 8.84425V10.1628H2.33063C2.18174 10.1628 2.03894 10.2221 1.93366 10.3277C1.82837 10.4332 1.76923 10.5764 1.76923 10.7257C1.76923 10.8749 1.82837 11.0181 1.93366 11.1236C2.03894 11.2292 2.18174 11.2885 2.33063 11.2885V11.282Z' fill='%23167CAC'/%3E%3C/svg%3E");
background-repeat: no-repeat;
background-repeat: no-repeat;
background-position: center;
width: 16px; // check this
height: 16px;

2
src/iss-components/questions-page-layout/questions-page-layout.vue
View file

@ -8,7 +8,7 @@
<alert
ref="alertFewMoreQuestions"
cmsWidgetName="alertWidget"
class="my-5"
class="m-5"
alertClass="alert-warning"
:manualHeadline="alertFewMoreQuestionsHeader"
:manualCopy="alertFewMoreQuestionsCopy"

4
src/iss-components/site-footer/site-footer.vue
View file

@ -160,13 +160,13 @@ export default {
{
text-align: center;
position: sticky;
bottom: 72px;
bottom: 65px;
}
@media only screen and (max-width: 340px) {
.footerImage
{
bottom: 85px;
bottom: 78px;
}
}

4
src/iss-components/site-header/menu-modal/menu-modal.vue
View file

@ -152,8 +152,8 @@
.menu-modal-container {
position: absolute;
padding: 1.47rem 1rem 1.47rem 1.47rem;
right: 0;
top: -4.0rem;
right: .5rem;
top: -5.0rem;
button {
border: none;
&.menu-button {

4
src/iss-components/site-header/site-header.spec.js
View file

@ -1,12 +1,12 @@
import siteHeader from "@/iss-components/site-header/site-header";
import { shallowMount } from "@vue/test-utils";
import { getMountOptions } from "@/helpers/unit-test-helper.js";
import { useMainStore } from "@/store/";
describe("site-header", () => {
test("renders the logo image", () => {
const wrapper = setupMocks({mountOptionsMockData: {}});
const wrapper = setupMocks({mountOptionsMockData: {}});
expect(wrapper.find("img")).toBeTruthy();
wrapper.unmount();

51
src/iss-components/site-header/site-header.vue
View file

@ -1,6 +1,6 @@
<template>
<div>
<div class="site-header d-flex justify-content-center align-items-center flex-column" :style="logoBackgroundStyle">
<div class="site-header d-flex justify-content-center align-items-center flex-column py-2 mb-4" :style="logoBackgroundStyle">
<img id="siteHeaderImage" class="img-fluid" :src="imageSrc" :alt="altText" />
<menuModal/>
</div>
@ -32,7 +32,7 @@ import { globalEvents } from "@/constants/events";
messageHeadline: "",
type: "",
},
headerAnswers:Array
headerAnswers: null
};
},
props: {
@ -41,35 +41,24 @@ import { globalEvents } from "@/constants/events";
computed: {
imageSrc()
{
return this.headerAnswers[0] !== undefined ? this.headerAnswers[0].AnswerImageUrl : "";
return this.headerAnswers ? this.headerAnswers.AnswerImageUrl : "";
},
altText()
{
return this.headerAnswers[0] !== undefined ? this.headerAnswers[0].AltText : "";
},
hexCode()
{
return this.headerAnswers[0] !== undefined ? this.headerAnswers[0].HexCode : "";
return this.headerAnswers ? this.headerAnswers.AltText : "";
},
logoBackgroundStyle() {
return {
"background-color": this.headerAnswers[0] !== undefined ? this.headerAnswers[0].HexCode : "#FFFFFF"
"background-color": this.headerAnswers ? this.headerAnswers.HexCode : "#FFFFFF"
};
},
},
mounted() {
var cmsAnswers = this.getCmsContent(this.cmsWidgetName, "Answers");
const filteredAnswers = Array.isArray(cmsAnswers)
? cmsAnswers.filter((ans) => {
const accountNumber = Number(ans.AccountNumber);
return (
accountNumber === this.mainStore.order.accountNumber
);
})
: [];
this.headerAnswers = filteredAnswers;
const answers = this.getCmsContent(this.cmsWidgetName, "Answers");
this.headerAnswers = Array.isArray(answers)
? answers.filter(x => x.AccountNumber == this.mainStore.issConfig.accountNumber)[0]
: null;
// Check if alert event is on the bus
const alertEvent = eventBus.readAndPopEventFromBus(
globalEvents.Categories.GLOBAL_ALERT,
@ -80,6 +69,15 @@ import { globalEvents } from "@/constants/events";
this.displayGlobalAlert = true;
this.globalAlertMessage = alertEvent;
}
//load client customization overrides
const clientOverrideClass = this.mainStore.issConfig.styleSheet.trim();
if(clientOverrideClass
&& clientOverrideClass != ""
&& !document.getElementsByTagName("body")[0].className.split(" ").includes(clientOverrideClass))
{
document.getElementsByTagName("body")[0].className += " " + clientOverrideClass;
}
},
components: {
menuModal,
@ -89,15 +87,12 @@ import { globalEvents } from "@/constants/events";
</script>
<style lang="scss" scoped>
.site-header {
padding: 0.97rem 0;
}
.logo-image {
max-width: 78px;
}
.alert {
left: 0;
top: 72px;
}
#siteHeaderImage {
height: 2.5rem;
}
</style>

2
src/layouts/address-lookup/address-lookup.vue
View file

@ -13,7 +13,7 @@
ref="vehicleBanner"
:displayGenericVehicleImage="false" />
<siteSubHeader cmsWidgetName="SiteSubHeaderWidget" ref="siteSubHeader" />
<div class="fade-on-route-transition sub-container make-tall overflow-auto px-1">
<div class="fade-on-route-transition sub-container make-tall overflow-auto px-5">
<alert
ref="alertVinNotFound"
v-if="displayVinNotFoundAlert"

24
src/layouts/address-vehicles/address-vehicles-question/address-vehicles-question.vue
View file

@ -1,14 +1,17 @@
<template>
<alert
ref="differentVehicleAlert"
v-if="isCarIdDifferent"
class="my-4"
cmsWidgetName="FoundWindshield"
:manualHeadline="differentVehicleAlertHeader"
:manualCopy="differentVehicleAlertBody"
alertClass="alert-warning"
v-bind:isDismissible="false"
id="address-vehicles-question-alert" />
<div class="px-5">
<alert
ref="differentVehicleAlert"
v-if="isCarIdDifferent"
class="my-4"
cmsWidgetName="FoundWindshield"
:manualHeadline="differentVehicleAlertHeader"
:manualCopy="differentVehicleAlertBody"
alertClass="alert-warning"
v-bind:isDismissible="false"
id="address-vehicles-question-alert" />
</div>
<buttonQuestion
class="address-vehicles-question"
ref="addressVehiclesQuestion"
@ -19,6 +22,7 @@
v-model="selectedVehicleVin"
isRequired
:validation-rules="validationRules" />
</template>
<script>

41
src/layouts/address-vehicles/address-vehicles.vue
View file

@ -13,16 +13,20 @@
:displayGenericVehicleImage="false"
/>
<siteSubHeader cmsWidgetName="SiteSubHeaderWidget" />
<alert
cmsWidgetName="FoundMultipleVehicles"
ref="alertFoundMultipleVehicles"
class="my-5"
alertClass="alert-warning"
:manualHeadline="AlertFoundMultipleVehiclesHeader"
manualCopy=""
v-bind:isDismissible="false"
id="multiple-vehicles-alert"
/>
<div class="px-5">
<alert
cmsWidgetName="FoundMultipleVehicles"
ref="alertFoundMultipleVehicles"
class="my-5"
alertClass="alert-warning"
:manualHeadline="AlertFoundMultipleVehiclesHeader"
manualCopy=""
v-bind:isDismissible="false"
id="multiple-vehicles-alert"
/>
</div>
<addressVehiclesQuestion
ref="addressVehiclesQuestion"
cmsWidgetName="VehicleConfirmationQuestion"
@ -31,8 +35,9 @@
v-model="selectedVehicleVin"
:isCarIdDifferent="isCarIdDifferent"
/>
<div
class="alert-provide-vin my-3"
class="alert-provide-vin my-3 px-5"
v-if="splitAlertProvideVinBodyForLink.length"
>
<span v-for="copy in splitAlertProvideVinBodyForLink" :key="copy">
@ -48,14 +53,14 @@
<span v-else class="m-0 text-body" v-html="copy"></span>
</span>
</div>
<siteFooter
cmsWidgetName="SiteFooterWidget"
:isForwardActionDisabled="!meta.valid"
@backClicked="backButtonAction"
@forwardClicked="forwardButtonAction"
ref="siteFooter"
/>
</div>
<siteFooter
cmsWidgetName="SiteFooterWidget"
:isForwardActionDisabled="!meta.valid"
@backClicked="backButtonAction"
@forwardClicked="forwardButtonAction"
ref="siteFooter"
/>
</Form>
</template>

1
src/layouts/entry-page/entry-page.vue
View file

@ -34,7 +34,6 @@
},
async validateClientTagOnEntry() {
const mainStore = useMainStore();
const clientTag = this.$route.query.ClientTag;
const clientTagPresent = !!clientTag;
let authorized = false;

2
src/layouts/license-plate-lookup/license-plate-lookup.vue
View file

@ -10,7 +10,7 @@
cms-widget-name="VehicleBannerWidget"
:display-generic-vehicle-image="false" />
<siteSubHeader cms-widget-name="SiteSubHeaderWidget" />
<div class="fade-on-route-transition sub-container make-tall mt-5">
<div class="fade-on-route-transition sub-container make-tall mt-5 px-5">
<alert
ref="alertVinNotFound"
v-if="displayVinNotFoundAlert"

4
src/layouts/policy-holder-details/policy-holder-details.vue
View file

@ -1,8 +1,8 @@
<template>
<Form @submit="onSubmit" @invalid-submit="onInvalidSubmit" ref="theForm" v-slot="{ meta }" >
<div class="page-container-grouped-styles overflow-auto">
<div class="fade-on-route-transition">
<siteHeader cmsWidgetName="SiteHeaderWidget"/>
<siteHeader cmsWidgetName="SiteHeaderWidget"/>
<div class="fade-on-route-transition px-5">
<siteSubHeader cmsWidgetName="SiteSubHeaderWidget" id="sub-header"/>
<addressQuestions ref="addressQuestions" v-model="customerQuestions.addressQuestions" includeStreetAddress2="true" id="address-questions-wrapper"/>
<div class="row mt-4">

2
src/layouts/vehicle-parts/vehicle-parts.vue
View file

@ -8,7 +8,7 @@
cmsWidgetName="VehicleBannerWidget"
:displayGenericVehicleImage="false" />
<siteSubHeader ref="siteSubHeader" cmsWidgetName="SiteSubHeaderWidget" />
<div class="fade-on-route-transition sub-container make-tall overflow-auto">
<div class="fade-on-route-transition sub-container make-tall overflow-auto px-5">
<div class="prevent-squish my-5">
<div class="row">
<div class="col">

32
src/layouts/vin-lookup/vin-lookup.vue
View file

@ -16,24 +16,26 @@
<siteSubHeader
cmsWidgetName="SiteSubHeaderWidget"
/>
<div class="fade-on-route-transition sub-container make-tall mt-5">
<vinLookupAlerts
:activeAlertType="activeVehicleLookupAlertType"
/>
<div class="px-5">
<div class="fade-on-route-transition sub-container make-tall mt-5">
<vinLookupAlerts
:activeAlertType="activeVehicleLookupAlertType"
/>
<vinQuestion
v-model="vin"
/>
<vinQuestion
v-model="vin"
/>
<vinLocationInformation />
<vinLocationInformation />
<siteFooter
cmsWidgetName="SiteFooterWidget"
:isForwardActionDisabled="!meta.valid"
@backClicked="backButtonAction"
@forwardClicked="forwardButtonAction"
ref="siteFooter"
/>
<siteFooter
cmsWidgetName="SiteFooterWidget"
:isForwardActionDisabled="!meta.valid"
@backClicked="backButtonAction"
@forwardClicked="forwardButtonAction"
ref="siteFooter"
/>
</div>
</div>
</div>
</Form>

24
src/layouts/welcome-page/welcome-page.vue
View file

@ -1,10 +1,12 @@
<template>
<Form @submit="onSubmit" @invalid-submit="onInvalidSubmit" ref="theForm" v-slot="{ meta }" >
<div class="page-container-grouped-styles overflow-auto welcome">
<div class="fade-on-route-transition h-100">
<siteHeader cmsWidgetName="SiteHeaderWidget"/>
<div class="page-container-grouped-styles welcome">
<siteHeader cmsWidgetName="SiteHeaderWidget"/>
<div class="fade-on-route-transition h-100 overflow-auto ">
<siteSubHeader cmsWidgetName="SiteSubHeaderWidget"/>
<div class="row mt-4">
<div class="row mt-4 px-5">
<div class="col">
<textboxQuestion
inputId="policyNumberField"
@ -16,7 +18,7 @@
validationRules="policy-number-required" />
</div>
</div>
<div class="row mt-4">
<div class="row mt-4 px-5">
<div class="col">
<textboxQuestion
type="date"
@ -32,12 +34,12 @@
/>
</div>
</div>
<div class="row">
<div class="row px-5">
<div class="col">
<textBlock cmsWidgetName="DamageDateEstimateWidget" typeStyle="caption" class="mt-2" />
</div>
</div>
<div class="row mt-4">
<div class="row mt-4 px-5">
<div class="col">
<dropdownQuestion
cmsWidgetName="DamageCauseQuestion"
@ -51,7 +53,7 @@
/>
</div>
</div>
<div class="row mt-4">
<div class="row mt-4 px-5">
<div class="col">
<textboxQuestion
inputId="damageCityField"
@ -63,7 +65,7 @@
validationRules="loss-city-required" />
</div>
</div>
<div class="row mt-4">
<div class="row mt-4 px-5">
<div class="col">
<dropdownQuestion
cmsWidgetName="DamageStateQuestion"
@ -91,7 +93,7 @@
ref="glassOnlyDamage"
disableAutoFill/>
</div>
<div class="row mt-4">
<div class="row mt-4 px-5">
<div class="col">
<textboxQuestion
inputId="phoneNumberField"
@ -104,7 +106,7 @@
disableAutoFill />
</div>
</div>
<div class="row mt-4">
<div class="row mt-4 px-5">
<div class="col">
<textboxQuestion
inputId="emailField"

23
src/store/index.js
View file

@ -83,7 +83,6 @@ const getDefaultState = () => {
},
referralNumber: null,
referralDate: null,
accountNumber: 0,
},
applicationUser: {
lastPageVisited: null,
@ -100,8 +99,8 @@ const getDefaultState = () => {
},
issConfig: {
clientName: "",
accountNumber: 0,
styleSheet: "",
accountNumber: 0,
}
};
};
@ -395,6 +394,7 @@ export const useMainStore = defineStore({
endpoint: `${endpoints.GetCapabilityQuestions.url}/${carId}/${partNumber}`,
});
},
lookupVehicleByVin(vin) {
return globalMethods.callHttpClient({
method: endpoints.LookupVehicleByVin.method,
@ -480,13 +480,6 @@ export const useMainStore = defineStore({
this.order.vehicle.registration.lastName = null;
},
resetISSConfigState()
{
this.issConfig.clientName = "";
this.issConfig.accountNumber = 0;
this.issConfig.styleSheet = "";
},
updateSupportingItems(partsData) {
this.order.lineItems.supportingItems = partsData;
},
@ -570,7 +563,14 @@ export const useMainStore = defineStore({
this.updatePageData({ page: issPageValues.MOLDING_QUESTIONS, data: null});
this.updatePageData({ page: issPageValues.CAPABILITY_QUESTIONS, data: null});
}
},
},
resetISSConfigState()
{
this.issConfig.clientName = "";
this.issConfig.accountNumber = 0;
this.issConfig.styleSheet = "";
},
updateVehicleYear(year) {
if(this.order.vehicle.year != year)
@ -735,6 +735,7 @@ export const useMainStore = defineStore({
// Save new values
this.updateMoldingQuestionAnswers(moldingQuestionAnswersArray);
},
saveCapabilityQuestionAnswers(capabilityQuestionAnswersArray) {
const sortedPreviousResultsArray = sortArrayOfObjectsByPropertyValue(
this.order.damage.capabilityQuestionAnswers,
@ -758,7 +759,7 @@ export const useMainStore = defineStore({
// Save new values
this.updateCapabilityQuestionAnswers(capabilityQuestionAnswersArray);
},
addEventToBus (event) {
this.applicationUser.eventBus.push(event);
},

37
src/styles/client-customizations.scss Normal file
View file

@ -0,0 +1,37 @@
//Libery Mutual Overrides
$limu-header-color: #FFD100;
$limu-accent-fill: #E6F1F3;
$limu-svg-fill-color: '%2309748B';
$limu-accent-color: #09748B;
$limu-link: #09748B;
$limu-button-radius: 8px;
$limu-button-text-color: #181643;
$limu-button-color: #A9E3E9;
.LibertyMutual {
input[type="date"]::-webkit-calendar-picker-indicator {
background-color: $limu-accent-fill !important;
background-image: url("data:image/svg+xml,%3Csvg width='16' height='16' viewBox='0 0 16 16' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M14.1762 1.52764H13.7656V1.50352C13.7656 1.10476 13.6076 0.722334 13.3263 0.44037C13.0451 0.158406 12.6636 0 12.2659 0C11.8681 0 11.4866 0.158406 11.2054 0.44037C10.9241 0.722334 10.7661 1.10476 10.7661 1.50352V1.52764H5.42476V1.50352C5.42476 1.10476 5.26675 0.722334 4.9855 0.44037C4.70424 0.158406 4.32277 0 3.92501 0C3.52725 0 3.14579 0.158406 2.86453 0.44037C2.58327 0.722334 2.42526 1.10476 2.42526 1.50352V1.52764H1.82376C1.34046 1.52891 0.877316 1.72195 0.53557 2.06455C0.193824 2.40716 0.00127018 2.87146 0 3.35598V14.1717C0.0016909 14.656 0.194379 15.1201 0.536035 15.4626C0.87769 15.8051 1.34059 15.9983 1.82376 16H14.1746C14.6581 15.9987 15.1214 15.8057 15.4634 15.4632C15.8054 15.1206 15.9983 14.6563 16 14.1717V3.35598C15.9987 2.87146 15.8062 2.40716 15.4644 2.06455C15.1227 1.72195 14.6595 1.52891 14.1762 1.52764ZM11.8889 1.50352C11.8889 1.4033 11.9286 1.30718 11.9993 1.23631C12.07 1.16544 12.1659 1.12563 12.2659 1.12563C12.3658 1.12563 12.4617 1.16544 12.5324 1.23631C12.6031 1.30718 12.6428 1.4033 12.6428 1.50352V2.99899C12.6428 3.09922 12.6031 3.19534 12.5324 3.2662C12.4617 3.33707 12.3658 3.37688 12.2659 3.37688C12.1659 3.37688 12.07 3.33707 11.9993 3.2662C11.9286 3.19534 11.8889 3.09922 11.8889 2.99899V1.50352ZM3.54807 1.50352C3.54807 1.4033 3.58778 1.30718 3.65847 1.23631C3.72916 1.16544 3.82504 1.12563 3.92501 1.12563C4.02498 1.12563 4.12086 1.16544 4.19155 1.23631C4.26224 1.30718 4.30195 1.4033 4.30195 1.50352V2.99899C4.30195 3.09922 4.26224 3.19534 4.19155 3.2662C4.12086 3.33707 4.02498 3.37688 3.92501 3.37688C3.82504 3.37688 3.72916 3.33707 3.65847 3.2662C3.58778 3.19534 3.54807 3.09922 3.54807 2.99899V1.50352ZM14.8772 14.1717C14.8747 14.3573 14.8001 14.5345 14.6691 14.6658C14.5382 14.797 14.3614 14.8719 14.1762 14.8744H1.82536C1.63995 14.8723 1.4627 14.7976 1.33144 14.6663C1.20018 14.5351 1.12531 14.3575 1.12281 14.1717V6.59296H14.8772V14.1717Z' fill='" + $limu-svg-fill-color + "'/%3E%3Cpath d='M2.33063 11.282H3.93464V12.6006C3.93464 12.7499 3.99379 12.8931 4.09907 12.9986C4.20435 13.1041 4.34715 13.1634 4.49604 13.1634C4.64494 13.1634 4.78773 13.1041 4.89301 12.9986C4.9983 12.8931 5.05745 12.7499 5.05745 12.6006V11.282H7.46346V12.6006C7.46346 12.7499 7.52261 12.8931 7.62789 12.9986C7.73318 13.1041 7.87597 13.1634 8.02486 13.1634C8.17376 13.1634 8.31655 13.1041 8.42184 12.9986C8.52712 12.8931 8.58627 12.7499 8.58627 12.6006V11.282H10.9923V12.6006C10.9923 12.7499 11.0514 12.8931 11.1567 12.9986C11.262 13.1041 11.4048 13.1634 11.5537 13.1634C11.7026 13.1634 11.8454 13.1041 11.9507 12.9986C12.0559 12.8931 12.1151 12.7499 12.1151 12.6006V11.282H13.7191C13.868 11.282 14.0108 11.2227 14.1161 11.1172C14.2214 11.0116 14.2805 10.8685 14.2805 10.7192C14.2805 10.57 14.2214 10.4268 14.1161 10.3213C14.0108 10.2157 13.868 10.1564 13.7191 10.1564H12.1151V8.84425C12.1151 8.69498 12.0559 8.55183 11.9507 8.44628C11.8454 8.34073 11.7026 8.28143 11.5537 8.28143C11.4048 8.28143 11.262 8.34073 11.1567 8.44628C11.0514 8.55183 10.9923 8.69498 10.9923 8.84425V10.1628H8.58627V8.84425C8.58627 8.69498 8.52712 8.55183 8.42184 8.44628C8.31655 8.34073 8.17376 8.28143 8.02486 8.28143C7.87597 8.28143 7.73318 8.34073 7.62789 8.44628C7.52261 8.55183 7.46346 8.69498 7.46346 8.84425V10.1628H5.05745V8.84425C5.05745 8.69498 4.9983 8.55183 4.89301 8.44628C4.78773 8.34073 4.64494 8.28143 4.49604 8.28143C4.34715 8.28143 4.20435 8.34073 4.09907 8.44628C3.99379 8.55183 3.93464 8.69498 3.93464 8.84425V10.1628H2.33063C2.18174 10.1628 2.03894 10.2221 1.93366 10.3277C1.82837 10.4332 1.76923 10.5764 1.76923 10.7257C1.76923 10.8749 1.82837 11.0181 1.93366 11.1236C2.03894 11.2292 2.18174 11.2885 2.33063 11.2885V11.282Z' fill='" + $limu-svg-fill-color + "'/%3E%3C/svg%3E") !important;
}
svg {
fill: $limu-accent-color !important;
}
a {
color: $limu-link !important;
}
.btn {
&.btn-override[aria-disabled="false"]{
&.btn-primary {
background: $limu-button-color !important;
color: $limu-button-text-color !important;
}
&:focus-visible {
background: $limu-button-color !important;
color: $limu-button-text-color !important;
}
}
}
}

2
src/styles/common-styles.scss
View file

@ -45,7 +45,7 @@ body {
}
.page-container-grouped-styles {
@extend .container-fluid, .shadow, .rounded-3, .p-2, .position-relative, .make-tall, .px-5;
@extend .container-fluid, .shadow, .rounded-3, .p-0, .position-relative, .make-tall;
}
//Footer modal backdrop adjustments for positioning

2
src/ux-components/button-main/button-main.vue
View file

@ -1,7 +1,7 @@
<template>
<button
:aria-disabled="isDisabled"
class="btn d-flex align-items-center justify-content-center py-3 px-4 delay"
class="btn d-flex btn-override align-items-center justify-content-center py-3 px-4 delay"
:class="[
isPrimary ? 'btn-primary' : 'btn-secondary',
isFloat ? 'float-end' : '',