diff --git a/src/components/Modal.vue b/src/components/Modal.vue index 1fb03d60..8a2021e1 100644 --- a/src/components/Modal.vue +++ b/src/components/Modal.vue @@ -4,9 +4,9 @@ -
-
-
+
+
+

{{ title }}

-
- {{ message }} +
+ {{ message }} + +
+ +
- - -
@@ -47,13 +43,8 @@ export default { type: String, default: 'primary', }, - actionDisabled: { - type: Boolean, - default: false, - }, + actionDisabled: Boolean, large: Boolean, - confirm: Boolean, - padded: Boolean, }, data() { @@ -115,59 +106,50 @@ export default { transition: all 100ms linear; opacity: 1; } - - &.confirm { - display: flex; - align-items: flex-start; - justify-content: center; - - @media($small) { - align-items: flex-end; - } - } } .modal-content { background: var(--modal-background); color: var(--modal-text-color); - height: auto; width: 500px; - max-height: calc(85vh); - max-width: 100%; - overflow: auto; + height: auto; + max-height: calc(100% - #{$gp * 4}); + overflow-y: auto; margin: $gp * 2 auto $gp; padding: 0; border-radius: $border-radius; cursor: default; - display: flex; - flex-direction: column; @media($small) { border-radius: 0; margin: 0; + width: 100%; height: 100%; - max-height: 100vh; - height: 100vh; - width: 100vw; + max-height: 100%; } &.large { width: 780px; - max-width: 100% !important; - - @media($small) { - max-width: 90vw; - max-height: 100vh; - } + max-width: 100%; } - &.confirm { - height: auto; - max-width: calc(100vw - #{$gp * 4}); - border-radius: $border-radius; - + &.fixed { @media($small) { - margin-bottom: $gp * 2; + display: flex; + height: 100vh; + } + + header { + position: fixed; + right: $gp; + + button { + display: none; + + @media($small) { + display: block; + } + } } } } @@ -179,31 +161,17 @@ export default { align-items: center; justify-content: space-between; - @media($small) { - right: 0; - } - &.fixed { position: fixed; - padding: $gp; - background-color: transparent !important; - margin: 0; - z-index: 99999999; } } main { - &.padded { - padding: 0 $gp; - } - - flex-grow: 1; - max-height: calc(100% - 144px); - overflow: auto; + padding: 0 $gp $gp; + overflow-y: auto; } footer { - padding: $gp; - margin-top: auto; + margin-top: $gp; }