WIP responsive style updates.

This commit is contained in:
Bryan Mauger 2024-07-08 10:19:37 -04:00
parent ed9f85c18a
commit b886723e2f
2 changed files with 22 additions and 6 deletions

View file

@ -20,7 +20,7 @@
cmsWidgetName="CashOrInsuranceQuestionWidget"
v-model="isInsuranceSelected"
groupName="CashOrInsuranceQuestion" />
</div>
</div>
</div>
<div class="row justify-content-center">
<div class="col-md-6 col-lg-4">
@ -37,7 +37,7 @@
v-on="{ 'buttonEvent.openModal': openModalAction }"
validationRules="option-required"
isRequired />
</div>
</div>
</div>
<div class="row justify-content-center">
<div class="col-md-6 col-xl-4">
@ -49,7 +49,6 @@
:lineItems="lineItems" />
<recalDisclaimer
class="my-5"
cmsWidgetName="RecalDisclaimerWidget"
v-if="isRecalibrationOnOrder"
v-on="{ textLinkClicked: openModalAction }"

View file

@ -147,16 +147,24 @@ export default {
padding: 5px;
width: 100%;
color: white;
@include media-breakpoint-up(md) {
position: absolute;
}
}
.package-main {
.package-wrapper {
margin: 0.5rem 0;
margin: 1rem 0;
@include media-breakpoint-up(md) {
margin: .5rem;
margin: 0.5rem 0;
}
position: relative;
@include media-breakpoint-up(md) {
margin: 1rem 0.5rem;
}
label {
display: block;
height: 100%;
}
input[type="radio"] {
@ -176,16 +184,24 @@ export default {
0px 4px 24px -8px rgba(0, 0, 0, 0.2);
border-radius: 0.5rem;
overflow: hidden;
min-height: 60px;
@include media-breakpoint-up(md) {
max-height: 500px;
height: 100%;
}
&.has-subheader {
min-height: 80px;
@include media-breakpoint-up(md) {
padding-top: 46px;
}
}
&.has-text {
border-radius: 0 0 0.5rem 0.5rem;
border: 1px solid #469d2a !important;
@include media-breakpoint-up(md) {
border-radius: 0.5rem;
}
border: 1px solid #469d2a;
}
&:before {
@ -347,6 +363,7 @@ export default {
display: none;
@include media-breakpoint-up(md) {
display: flex;
flex-direction: column;
}
}
}