improve demo error styling

This commit is contained in:
Philipp Kühn
2021-02-11 09:35:46 +01:00
parent c879dc3a18
commit d75027a121
2 changed files with 10 additions and 17 deletions

View File

@@ -29,12 +29,9 @@
</a> </a>
</div> </div>
</template> </template>
<template v-else> <div v-else class="demo__error">
<div v-if="mainFile === false" class="demo__error">
Could not find a demo called {{ name }}. Could not find a demo called {{ name }}.
</div> </div>
<div v-else class="demo__skeleton" />
</template>
</div> </div>
</template> </template>

View File

@@ -89,16 +89,12 @@
} }
&__error { &__error {
padding: 1rem 1.5rem; padding: 1rem 1.25rem;
color: $colorRed; border-radius: 0.75rem;
background-color: rgba($colorRed, 0.1); border: 3px solid $colorBlack;
} background-color: $colorRed;
font-size: 1.1rem;
&__skeleton { font-weight: 700;
border-top-left-radius: inherit; margin-bottom: 0.25rem;
border-top-right-radius: inherit;
background-color: $colorWhite;
min-height: 20rem;
opacity: 0.1;
} }
} }