CASH-2838 UI Styling defect fixes
CASH-2838 UI Styling defect fixes
This commit is contained in:
Carl Nation
parent
f1e6d125fc
commit
74a7cbc4c9
8 changed files with 48 additions and 9 deletions
|
|
@ -290,4 +290,16 @@ export default {
|
|||
background-color: #ffc966 !important;
|
||||
color: $black;
|
||||
}
|
||||
|
||||
// Enlarge the calendar popup. The menu is teleported to <body>, so these must
|
||||
// be global rules. VueDatePicker sizes itself via CSS custom properties.
|
||||
.dp__menu {
|
||||
--dp-cell-size: 46px;
|
||||
--dp-cell-padding: 8px;
|
||||
--dp-font-size: 1.05rem;
|
||||
--dp-menu-min-width: 320px;
|
||||
--dp-button-height: 40px;
|
||||
--dp-month-year-row-height: 40px;
|
||||
--dp-row-margin: 6px 0;
|
||||
}
|
||||
</style>
|
||||
|
|
|
|||
|
|
@ -1,5 +1,8 @@
|
|||
<template>
|
||||
<div class="funnel-header" :class="{ scrolled: isScrolled }" v-if="imageSrc">
|
||||
<div
|
||||
class="funnel-header"
|
||||
:class="{ scrolled: isScrolled, 'has-override-logo': !!overrideImageSrc }"
|
||||
v-if="imageSrc">
|
||||
<div class="d-flex w-100">
|
||||
<progress-bar :page="$route.name" />
|
||||
</div>
|
||||
|
|
@ -183,6 +186,17 @@ export default {
|
|||
padding: 2rem 0.75rem;
|
||||
}
|
||||
}
|
||||
|
||||
// Insurance pages use a taller client logo; drop the header's vertical
|
||||
// padding so the overall header height matches the standard site header.
|
||||
&.has-override-logo .container {
|
||||
padding-top: 0;
|
||||
padding-bottom: 0;
|
||||
@include media-breakpoint-up(md) {
|
||||
padding-top: 0;
|
||||
padding-bottom: 13px;
|
||||
}
|
||||
}
|
||||
position: sticky;
|
||||
top: 0;
|
||||
z-index: 1000;
|
||||
|
|
|
|||
|
|
@ -1,6 +1,6 @@
|
|||
<template>
|
||||
<div class="row"></div>
|
||||
<div class="insurance-nav-bar nav-bar container-fluid g-5 my-5 px-0" id="infoBox">
|
||||
<div class="insurance-nav-bar nav-bar container-fluid g-5 my-6 px-0" id="infoBox">
|
||||
<div class="row d-flex justify-content-between align-items-center vw-100">
|
||||
<div v-if="!isCancelButtonHidden" class="col-auto cancel-col py-1 text-break">
|
||||
<textLink
|
||||
|
|
|
|||
|
|
@ -14,13 +14,13 @@
|
|||
cmsWidgetName="DupCheckPageTitleWidget"
|
||||
typeStyle="h1"
|
||||
:customText="pageTitleText"
|
||||
class="mb-5 text-left text-md-left cc-page-title" />
|
||||
class="text-left text-md-left cc-page-title" />
|
||||
|
||||
<textBlock
|
||||
cmsWidgetName="DupCheckPageInstructionsWidget"
|
||||
typeStyle="body"
|
||||
:customText="pageInstructionsText"
|
||||
class="mb-5 text-left text-md-left cc-page-instructions" />
|
||||
class="mb-4 text-left text-md-left cc-page-instructions" />
|
||||
|
||||
<buttonQuestion
|
||||
:questionText="existingClaimsQuestionText"
|
||||
|
|
|
|||
|
|
@ -14,13 +14,13 @@
|
|||
cmsWidgetName="EndorsementsPageAdditionalInfoWidget"
|
||||
typeStyle="h1"
|
||||
:customText="endorsementHeading"
|
||||
class="mb-5 text-left text-md-left page-title" />
|
||||
class="text-left text-md-left page-title" />
|
||||
|
||||
<textBlock
|
||||
cmsWidgetName="MoreDetailsWidget"
|
||||
typeStyle="body"
|
||||
:customText="moreDetailsText"
|
||||
class="mb-5 text-left text-md-left page-instructions" />
|
||||
class="mb-4 text-left text-md-left page-instructions" />
|
||||
|
||||
<buttonQuestion
|
||||
:questionText="schoolEndorsementQuestionText"
|
||||
|
|
|
|||
|
|
@ -14,13 +14,13 @@
|
|||
cmsWidgetName="PageTitleWidget"
|
||||
typeStyle="h1"
|
||||
:customText="pageTitleText"
|
||||
class="mb-5 text-left text-md-left cc-page-title" />
|
||||
class="text-left text-md-left cc-page-title" />
|
||||
|
||||
<textBlock
|
||||
cmsWidgetName="PageInstructionsWidget"
|
||||
typeStyle="body"
|
||||
:customText="pageInstructionsText"
|
||||
class="mb-5 text-left text-md-left" />
|
||||
class="mb-4 text-left text-md-left" />
|
||||
|
||||
<textboxQuestion
|
||||
isRequired
|
||||
|
|
|
|||
|
|
@ -8,7 +8,10 @@
|
|||
<div class="container">
|
||||
<div class="row">
|
||||
<div class="col-12 col-md-10 col-lg-8 col-xl-7">
|
||||
<funnelSubHeader class="pb-4" cmsWidgetName="FunnelSubHeaderWidget" alignLeft />
|
||||
<funnelSubHeader
|
||||
class="pb-4 policy-vehicle-subheader"
|
||||
cmsWidgetName="FunnelSubHeaderWidget"
|
||||
alignLeft />
|
||||
|
||||
<buttonMain
|
||||
id="btn-vehicle-not-listed"
|
||||
|
|
@ -140,4 +143,8 @@ export default {
|
|||
background-color: $blue;
|
||||
color: $white;
|
||||
}
|
||||
|
||||
.policy-vehicle-subheader {
|
||||
padding-top: 22px;
|
||||
}
|
||||
</style>
|
||||
|
|
|
|||
|
|
@ -106,4 +106,10 @@ option,
|
|||
.page-gradient {
|
||||
height: 12px;
|
||||
background: linear-gradient(to bottom, rgba(0, 0, 0, 0.08), rgba(0, 0, 0, 0));
|
||||
|
||||
// Pull the page content up under the header gradient on insurance pages
|
||||
// (every insurance page renders the container right after .page-gradient).
|
||||
& + .container {
|
||||
margin-top: -22px;
|
||||
}
|
||||
}
|
||||
|
|
|
|||
Loading…
Reference in a new issue