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

Better vertical centering, undo label->span change

Browse source
This commit is contained in:
Alex Humphries 2026-01-07 14:59:57 -05:00
parent 14b482c352
commit fcd7b5a0db
1 changed files with 10 additions and 10 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

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

@ -13,19 +13,19 @@
}"> }">
<div class="modal-dialog" <div class="modal-dialog"
:class="{ :class="{
'modal-edge': modalPosition === 'edge', 'modal-dialog-edge': modalPosition === 'edge',
'modal-center': modalPosition === 'center' 'modal-dialog-centered': modalPosition === 'center'
}"> }">
<div <div
class="modal-content" class="modal-content"
role="dialog" role="dialog"
aria-modal="true"> aria-modal="true">
<div class="modal-header mb-2 mt-2"> <div class="modal-header mb-2 mt-2">
<span <label
v-if="headerText" v-if="headerText"
class="modal-title d-flex justify-content-center pb-0 w-100" class="modal-title d-flex justify-content-center pb-0 w-100">
:innerHTML="headerText"> {{ headerText }}
</span> </label>
<button <button
ref="closeButton" ref="closeButton"
type="button" type="button"
@ -202,7 +202,6 @@ export default {
.modal-dialog { .modal-dialog {
display: flex; display: flex;
max-width: 47.9375rem; max-width: 47.9375rem;
align-items: flex-end;
.modal-content { .modal-content {
margin: 1.5rem auto 0 auto; margin: 1.5rem auto 0 auto;
.modal-body { .modal-body {
@ -230,9 +229,10 @@ export default {
} }
} }
} }
&.modal-edge { &.modal-dialog-edge {
min-height: 100%; min-height: 100%;
margin: 0 auto; margin: 0 auto;
align-items: flex-end;
@include media-breakpoint-up(md) { @include media-breakpoint-up(md) {
align-items: inherit; align-items: inherit;
width: 23.5rem; width: 23.5rem;
@ -251,7 +251,7 @@ export default {
} }
} }
} }
&.modal-center { &.modal-dialog-centered {
.modal-content { .modal-content {
box-shadow: 0px 1rem 3rem -1rem rgba(0, 0, 0, 0.25); box-shadow: 0px 1rem 3rem -1rem rgba(0, 0, 0, 0.25);
border-radius: 1.5rem; border-radius: 1.5rem;
@ -260,7 +260,7 @@ export default {
} }
} }
&.show .modal-dialog { &.show .modal-dialog {
&.modal-edge { &.modal-dialog-edge {
@include media-breakpoint-up(md) { @include media-breakpoint-up(md) {
transform: translateY(0); transform: translateY(0);
} }