endorsements page styling WIP

This commit is contained in:
Katie Kroell 2023-09-11 16:36:44 -04:00
parent 3af5a3a204
commit e1cf8e9d63

View file

@ -7,11 +7,11 @@
<div class="page-container-grouped-styles"> <div class="page-container-grouped-styles">
<div class="fade-on-route-transition position-relative"> <div class="fade-on-route-transition position-relative">
<siteHeader cmsWidgetName="SiteHeaderWidget" /> <siteHeader cmsWidgetName="SiteHeaderWidget" />
<siteSubHeader cmsWidgetName="SiteSubHeaderWidget" class="mt-5 mb-5 endorsements" /> <siteSubHeader cmsWidgetName="SiteSubHeaderWidget" class="mt-5" />
<div class="container-fluid pb-2"> <div class="container-fluid px-5 mt-0">
<buttonQuestion <buttonQuestion
v-model="schoolPropertyAnswer" v-model="schoolPropertyAnswer"
class="radioQuestion" class="radioQuestion windshield-chip-count-question mb-4"
cmsWidgetName="SchoolPropertyQuestion" cmsWidgetName="SchoolPropertyQuestion"
:questionText="schoolPropertyQuestionText" :questionText="schoolPropertyQuestionText"
:answers="schoolPropertyAnswersFromCms" :answers="schoolPropertyAnswersFromCms"
@ -23,7 +23,7 @@
</buttonQuestion> </buttonQuestion>
<buttonQuestion <buttonQuestion
v-model="parkingLotAnswer" v-model="parkingLotAnswer"
class="radioQuestion" class="radioQuestion windshield-chip-count-question"
cmsWidgetName="ParkingLotQuestion" cmsWidgetName="ParkingLotQuestion"
:questionText="parkingLotQuestionText" :questionText="parkingLotQuestionText"
:answers="parkingLotAnswersFromCms" :answers="parkingLotAnswersFromCms"
@ -33,12 +33,13 @@
isRequired isRequired
:validationRules="rules.selectionRequired"> :validationRules="rules.selectionRequired">
</buttonQuestion> </buttonQuestion>
<siteFooter <siteFooter
ref="siteFooter" ref="siteFooter"
cmsWidgetName="SiteFooterWidget" cmsWidgetName="SiteFooterWidget"
:isForwardActionDisabled="!meta.valid" :isForwardActionDisabled="!meta.valid"
@ForwardClicked="forwardButtonAction" @ForwardClicked="forwardButtonAction"
@backClicked="backButtonAction" /> @backClicked="backButtonAction"
class="pt-5" />
</div> </div>
</div> </div>
</div> </div>
@ -149,22 +150,29 @@ export default {
</script> </script>
<style lang="scss" scoped> <style lang="scss" scoped>
:deep .endorsements {
.subheader-primary { :deep .subheader-primary {
span { margin-bottom: 0.5rem;
font-size: 20px; }
line-height: 32px;
} :deep .subheader-secondary {
} p {
.subheader-secondary { font-size: 0.875rem;
p { line-height: 1.5rem;
margin-top: 0.5rem;
font-size: 14px;
line-height: 24px;
}
span {
text-align: left;
}
} }
} }
:deep .question-text {
& > span {
text-align: left;
line-height: 1.5rem;
}
margin-bottom: 0.5rem;
}
:deep div.question-text.d-flex {
margin-top: 1rem;
}
</style> </style>