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

CASH-1042 WIP modal updates.

Browse source
This commit is contained in:
Bryan Mauger 2025-07-10 09:22:30 -04:00
parent 4327efef6f
commit fe441d8ba0
1 changed files with 25 additions and 5 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

30
src/fmg-components/funnel-header/menu-modal/menu-modal.vue
View file

@ -22,7 +22,8 @@
tabindex="-1" tabindex="-1"
aria-labelledby="footerModalLabel" aria-labelledby="footerModalLabel"
aria-hidden="true" aria-hidden="true"
v-on="{ 'show.bs.modal': show, 'hide.bs.modal': hide }"> v-on="{ 'show.bs.modal': show, 'hide.bs.modal': hide }"
@click.self="closeModal">
<div class="modal-dialog modal-fullscreen"> <div class="modal-dialog modal-fullscreen">
<div class="modal-content"> <div class="modal-content">
<div class="modal-header visually-hidden"> <div class="modal-header visually-hidden">
@ -178,20 +179,39 @@ export default {
} }
.modal { .modal {
&.menu-modal { &.menu-modal {
left: auto; .modal-dialog {
position: fixed;
bottom: 0;
right: 0;
height: calc(100% - 68px);
width: 100vw; // or set a max-width if you want a drawer effect
max-width: 294px;
margin: 0;
transform: translateX(100%);
transition: transform 0.4s cubic-bezier(0.4, 0, 0.2, 1);
z-index: 1050;
@include media-breakpoint-up(md) {
height: calc(100% - 102px);
top: 102px;
}
}
&.show .modal-dialog {
transform: translateX(0);
}
background-color: rgba(0, 0, 0, 0.5);
height: calc(100% - 68px); height: calc(100% - 68px);
top: 68px; top: 68px;
border-top: 1px solid $gray-300; border-top: 1px solid $gray-300;
overflow-x: visible; overflow-x: visible;
overflow-y: visible; overflow-y: visible;
@include media-breakpoint-up(md) { @include media-breakpoint-up(md) {
height: calc(100% - 104px); height: calc(100% - 102px);
top: 104px; top: 102px;
} }
.modal-body { .modal-body {
padding: 2rem; padding: 2rem;
display: flex; display: flex;
align-items: flex-end; align-items: center;
.ccpa-icon { .ccpa-icon {
width: 2.0625rem; width: 2.0625rem;
height: 1rem; height: 1rem;