Spythere/stacjownik
1
0
Fork 0
mirror of https://github.com/Spythere/stacjownik.git synced 2026-05-04 05:48:11 +00:00
Code Issues Packages Projects Releases Wiki Activity

chore: improved card positioning

Browse Source
This commit is contained in:
Spythere
2024-05-25 17:55:18 +02:00
parent 834b14da69
commit 813b557455
1 changed files with 14 additions and 15 deletions
Download Patch File Download Diff File Expand all files Collapse all files
src/components/Global/Card.vue
+14 -15
View File
@@ -2,10 +2,9 @@
<transition name="modal-anim" tag="div"> <transition name="modal-anim" tag="div">
<div class="card" v-if="isOpen"> <div class="card" v-if="isOpen">
<div class="card-background" @click="toggleCard(false)"></div> <div class="card-background" @click="toggleCard(false)"></div>
<div class="card-body" ref="wrapper" tabindex="0"> <div class="card-body" tabindex="0">
<slot></slot> <slot></slot>
</div> </div>
<div class="tab-exit" ref="exit" tabindex="0" @focus="toggleCard(false)"></div>
</div> </div>
</transition> </transition>
</template> </template>
@@ -52,8 +51,12 @@ export default defineComponent({
left: 0; left: 0;
width: 100%; width: 100%;
height: 100vh; height: 100%;
z-index: 200; z-index: 200;
display: flex;
justify-content: center;
align-items: center;
} }
.card-background { .card-background {
@@ -69,20 +72,16 @@ export default defineComponent({
} }
.card-body { .card-body {
position: absolute; position: relative;
top: 50%;
left: 50%; margin: 1em;
transform: translate(-50%, -50%);
z-index: 210; background-color: #1a1a1a;
overflow: auto; box-shadow: 0 0 15px 10px #0e0e0e;
max-height: 95vh; max-height: 95vh;
max-height: 95dvh; max-height: 95dvh;
box-shadow: 0 0 15px 10px #0e0e0e; overflow: auto;
& > :slotted(div) {
background-color: #1a1a1a;
width: 95vw;
}
} }
</style> </style>