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

Merge pull request #997 from Safelite/feature/humphries/centered-modal

Browse source 
Add prop to modal component to allow for centering
This commit is contained in:
AHumphriesSL 2026-01-07 15:56:50 -05:00 committed by GitHub
commit 8ece7b9095
No known key found for this signature in database
GPG key ID: B5690EEEBB952194
2 changed files with 42 additions and 21 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

62
src/digital-components/modal/modal.vue
View file

@ -11,7 +11,11 @@
'hidden.bs.modal': onModalClosed,
'shown.bs.modal': onModalOpened
}">
<div class="modal-dialog modal-dialog-centered">
<div class="modal-dialog"
:class="{
'modal-dialog-edge': modalPosition === 'edge',
'modal-dialog-centered': modalPosition === 'center'
}">
<div
class="modal-content"
role="dialog"
@ -77,6 +81,10 @@ export default {
buttonVariant: {
type: String,
default: 'success'
},
modalPosition: {
type: String,
default: 'edge'
}
},
emits: ['footer-button-event', 'isModalOpened'],
@ -192,24 +200,10 @@ export default {
}
&.modal-component {
.modal-dialog {
display: flex;
max-width: 47.9375rem;
margin: 0 auto;
@include media-breakpoint-up(md) {
width: 23.5rem;
position: absolute;
top: 0;
right: 0;
transform: translate(100%, 0);
}
.modal-content {
margin: 1.5rem auto 0 auto;
box-shadow: 0px 1rem 3rem -1rem rgba(0, 0, 0, 0.25);
border-radius: 1.5rem 1.5rem 0 0;
@include media-breakpoint-up(md) {
box-shadow: none;
border-radius: 0;
margin: 0 auto;
}
.modal-body {
.col {
max-width: 100%;
@ -235,11 +229,40 @@ export default {
}
}
}
&.modal-dialog-centered {
align-items: flex-end;
&.modal-dialog-edge {
min-height: 100%;
margin: 0 auto;
align-items: flex-end;
@include media-breakpoint-up(md) {
align-items: inherit;
width: 23.5rem;
position: absolute;
top: 0;
right: 0;
transform: translate(100%);
}
.modal-content {
box-shadow: 0px 1rem 3rem -1rem rgba(0, 0, 0, 0.25);
border-radius: 1.5rem 1.5rem 0 0;
@include media-breakpoint-up(md) {
box-shadow: none;
border-radius: 0;
margin: 0 auto;
}
}
}
&.modal-dialog-centered {
.modal-content {
box-shadow: 0px 1rem 3rem -1rem rgba(0, 0, 0, 0.25);
border-radius: 1.5rem;
overflow: auto;
}
}
}
&.show .modal-dialog {
&.modal-dialog-edge {
@include media-breakpoint-up(md) {
transform: translateY(0);
}
}
}
@ -251,9 +274,6 @@ export default {
}
}
}
&.show .modal-dialog {
transform: translateY(0);
}
@include media-breakpoint-up(md) {
&.fade {
transition: opacity 0.25s linear;

1
src/layouts/service-location/service-zip-modal-question/service-zip-modal-question.vue
View file

@ -15,6 +15,7 @@
:onModalOpenedCallback="onModalOpened"
:onModalClosedCallback="onModalClosed"
:footerButtonText="modalFooterText"
:modalPosition="'center'"
@footerButtonEvent="setZipCode">
<serviceZipQuestion
ref="serviceZipCodeQuestion"