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 @@
-
-
@@ -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;
}