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

WIP responsive style updates.

Browse source
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
Show stats Download patch file Download diff file Expand all files Collapse all files

5
src/layouts/quote/quote.vue
View file

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

23
src/layouts/quote/service-package-question/service-package-radio/service-package-radio.vue
View file

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