|
|
@@ -35,15 +35,17 @@ export default {
|
|
|
<style lang="scss" scoped>
|
|
|
.tab-side-component {
|
|
|
box-sizing: border-box;
|
|
|
+ z-index: 3;
|
|
|
+
|
|
|
}
|
|
|
|
|
|
.content {
|
|
|
+ z-index: 4;
|
|
|
max-height: 90vh;
|
|
|
overflow: auto;
|
|
|
}
|
|
|
|
|
|
.small {
|
|
|
- z-index: 3;
|
|
|
position: fixed;
|
|
|
top: 0;
|
|
|
bottom: 0;
|
|
|
@@ -57,14 +59,26 @@ export default {
|
|
|
background: rgba(255, 255, 255, 0.7);
|
|
|
}
|
|
|
|
|
|
+.large {
|
|
|
+ width: 340px;
|
|
|
+ min-height: 350px;
|
|
|
+ &::after {
|
|
|
+ z-index: -1;
|
|
|
+ content: '';
|
|
|
+ position: fixed;
|
|
|
+ width: 100vw;
|
|
|
+ height: 100vh;
|
|
|
+ top: 0;
|
|
|
+ left: 0;
|
|
|
+ backdrop-filter: saturate(120%);
|
|
|
+ background-color: rgba(255, 255, 255, 0.4);
|
|
|
+ pointer-events: none;
|
|
|
+ }
|
|
|
+}
|
|
|
+
|
|
|
@media (min-width: 600px) {
|
|
|
.small {
|
|
|
padding: 64px 10vw;
|
|
|
}
|
|
|
}
|
|
|
-
|
|
|
-.large {
|
|
|
- width: 340px;
|
|
|
- min-height: 350px;
|
|
|
-}
|
|
|
</style>
|