Edit dividers

This commit is contained in:
Paul Nicoué 2023-03-06 11:50:54 +01:00
parent 7aba18b56e
commit e2b1064b1e
3 changed files with 21 additions and 10 deletions

View file

@ -6,7 +6,7 @@
<h1 class="error__title" v-show="isVisible">{{ errorMessage }}</h1>
</Transition>
<Transition name="expand-width">
<div class="error__separator" aria-hidden="true" v-show="isVisible"></div>
<div class="error__divider" aria-hidden="true" v-show="isVisible"></div>
</Transition>
<Transition name="fade-in-from-top">
<div class="error__emoticon" aria-hidden="true" v-show="isVisible">¯\(°_o)/¯</div>
@ -70,7 +70,7 @@
display: grid;
grid:
'title' minmax(var(--h1-font-height), auto)
'separator' 1px
'divider' 1px
'emoticon' minmax(var(--h1-font-height), auto)
'.' 5rem
'button' auto
@ -85,11 +85,11 @@
margin: 0 2rem;
}
&__separator {
grid-area: separator;
&__divider {
grid-area: divider;
width: 100%;
height: 1px;
background-color: var(--primary-accent-color);
background: linear-gradient(90deg, var(--primary-color), var(--primary-accent-color-light), var(--primary-color));
}
&__emoticon {