Adjust spacing on multiple pages.

Writing scss to make pages comply with Figma mocks.
This commit is contained in:
Bryan Mauger 2024-04-30 17:45:45 -04:00
parent 2d2437890a
commit a1b457fdff
4 changed files with 36 additions and 12 deletions

View file

@ -338,10 +338,6 @@ export default {
margin-bottom: 1rem; margin-bottom: 1rem;
font-size: 1rem; font-size: 1rem;
line-height: 1.625rem; line-height: 1.625rem;
& > span {
text-align: left;
}
} }
.small-question-text { .small-question-text {

View file

@ -178,7 +178,7 @@ export default {
padding: 0.125rem 0.5rem; padding: 0.125rem 0.5rem;
.availability-badge { .availability-badge {
display: inline; display: inline-flex;
width: 13px; width: 13px;
height: 12px; height: 12px;
background-position: center; background-position: center;

View file

@ -54,7 +54,7 @@
</div> </div>
</div> </div>
<div class="row justify-content-center appointment-type"> <div class="row justify-content-center appointment-type">
<div class="col-md-6 col-xl-4"> <div class="col-md-6">
<appointmentTypeQuestion <appointmentTypeQuestion
v-show="isAppointmentTypeDisplayed" v-show="isAppointmentTypeDisplayed"
ref="appointmentTypeQuestion" ref="appointmentTypeQuestion"
@ -516,7 +516,7 @@ export default {
}; };
</script> </script>
<style lang="scss" scoped> <style lang="scss">
$page-side-padding: 1.5rem; $page-side-padding: 1.5rem;
.fade-on-route-transition { .fade-on-route-transition {
@ -528,8 +528,9 @@ $page-side-padding: 1.5rem;
} }
.question-text { .question-text {
& > span { span {
line-height: 1.5rem; line-height: 1.5rem;
text-align: center;
} }
} }
.list-card-content p { .list-card-content p {

View file

@ -43,8 +43,7 @@
v-model="selectedWindshieldOptions" v-model="selectedWindshieldOptions"
:hasRepairReplaceConflict="hasRepairReplaceConflict" :hasRepairReplaceConflict="hasRepairReplaceConflict"
:hasSplitSingleConflict="hasSplitSingleConflict" :hasSplitSingleConflict="hasSplitSingleConflict"
:selectedDamageLocations="selectedDamageLocations" :selectedDamageLocations="selectedDamageLocations" />
class="mb-3" />
</div> </div>
</div> </div>
<div class="row justify-content-center"> <div class="row justify-content-center">
@ -65,8 +64,7 @@
v-model="sideDoorOptionsData" v-model="sideDoorOptionsData"
cmsWidgetName="SideDoorSideQuestion" cmsWidgetName="SideDoorSideQuestion"
groupName="SideDoorSideQuestion" groupName="SideDoorSideQuestion"
:selectedDamageLocations="selectedDamageLocations" :selectedDamageLocations="selectedDamageLocations" />
class="mb-1" />
</div> </div>
</div> </div>
<div class="row justify-content-center"> <div class="row justify-content-center">
@ -503,9 +501,38 @@ export default {
<style lang="scss"> <style lang="scss">
.replace-options-question { .replace-options-question {
.row {
margin-top: 0;
.col-12 {
margin: 0 0 .5rem 0;
&:last-child {
margin-bottom: 0;
}
}
}
.question-text {
margin: 0;
span {
padding: 1rem 0;
text-align: center;
}
}
.two-list-card-width { .two-list-card-width {
width: 100%; width: 100%;
flex: 0 auto; flex: 0 auto;
} }
} }
.damage-location-question {
span {
font-size: 1.25rem;
font-weight: 400;
}
}
.button-question,
.windshield-damage-type-question,
.damage-location-question {
.col {
margin-top: 0;
}
}
</style> </style>