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