Press n or j to go to the next uncovered block, b, p or k for the previous block.
| 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 77 78 79 80 81 82 83 84 85 86 87 88 89 90 91 92 93 94 95 96 97 98 99 100 101 102 103 104 | 1x 1x 1x 1x 1x 1x 1x 1x 1x 1x 1x 1x 1x 1x 1x 1x 1x 1x 1x 1x 1x 1x | <script setup lang="ts">
import { MucCard } from "@muenchen/muc-patternlab-vue";
</script>
<template>
<muc-card title="">
<template #headerPrefix>
<div class="skeleton-wrapper">
<div class="skeleton-col skeleton-details">
<div class="skeleton-row skeleton-name">
<span class="skeleton-name-text skeleton-loader" />
</div>
</div>
</div>
</template>
<template #content>
<div class="skeleton-wrapper">
<div class="skeleton-col skeleton-details">
<div class="skeleton-row skeleton-description">
<span class="skeleton-description-text skeleton-loader" />
</div>
<div class="skeleton-row skeleton-description">
<span class="skeleton-description-text skeleton-loader" />
</div>
</div>
</div>
</template>
</muc-card>
</template>
<style scoped>
.skeleton-wrapper {
display: flex;
width: 95%;
}
.skeleton-wrapper .skeleton-row {
display: flex;
flex-direction: row;
}
.skeleton-wrapper .skeleton-col {
display: flex;
flex-direction: column;
}
.skeleton-wrapper .skeleton-details {
width: 90%;
margin-left: 17px;
}
.skeleton-wrapper .skeleton-details .skeleton-name {
margin-bottom: 3px;
width: 85%;
display: block;
max-width: 100%;
}
.skeleton-wrapper .skeleton-details .skeleton-name .skeleton-name-text {
font-weight: bold;
font-size: 16px;
line-height: 23px;
color: #002877;
height: 40px;
}
.skeleton-wrapper .skeleton-details .skeleton-description {
margin-bottom: 13px;
}
.skeleton-wrapper
.skeleton-details
.skeleton-description
.skeleton-description-text {
font-size: 13px;
line-height: 18px;
color: #666666;
}
.skeleton-loader:empty {
width: 100%;
height: 15px;
display: block;
background:
linear-gradient(
to right,
rgba(255, 255, 255, 0),
rgba(255, 255, 255, 0.5) 50%,
rgba(255, 255, 255, 0) 80%
),
lightgray;
background-repeat: repeat-y;
background-size: 50px 500px;
background-position: 0 0;
animation: shine 1s infinite alternate;
}
@keyframes shine {
to {
background-position: 100% 0;
}
}
</style>
|