diff --git a/src/digital-components/modal/modal.vue b/src/digital-components/modal/modal.vue index 899a63b8f..1abfc3d42 100644 --- a/src/digital-components/modal/modal.vue +++ b/src/digital-components/modal/modal.vue @@ -148,12 +148,25 @@ export default { } &.modal-component { .modal-dialog { - max-width: 576px; + max-width: 767px; margin: 0 auto; + @include media-breakpoint-up(md) { + width: 376px; + position: absolute; + top: 0; + right: 0; + transform: translate(100%, 0); + } .modal-content { - margin: 0 auto; + margin: 1.5rem auto 0 auto; box-shadow: 0px 16px 48px -16px 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; + height: 100vh; + margin: 0 auto; + } .modal-body { .modal-sub-body { color: $gray-600; @@ -166,6 +179,9 @@ export default { margin-bottom: 0; } } + @include media-breakpoint-up(md) { + overflow: scroll; + } } } &.modal-dialog-centered { @@ -184,6 +200,11 @@ export default { &.show .modal-dialog { transform: translateY(0); } + @include media-breakpoint-up(md) { + &.fade { + transition: opacity 0.25s linear; + } + } } body { .modal-backdrop { diff --git a/src/fmg-components/nav-bar/nav-bar.vue b/src/fmg-components/nav-bar/nav-bar.vue index 759e74c86..9cf918785 100644 --- a/src/fmg-components/nav-bar/nav-bar.vue +++ b/src/fmg-components/nav-bar/nav-bar.vue @@ -1,7 +1,7 @@