chore: make background fade in reusable
continuous-integration/drone/pr Build is failing
Details
continuous-integration/drone/pr Build is failing
Details
This commit is contained in:
parent
0e886ba76b
commit
33158167d5
|
@ -10,7 +10,7 @@
|
|||
>
|
||||
<div
|
||||
:class="{'is-visible': background}"
|
||||
class="app-container-background"
|
||||
class="app-container-background background-fade-in"
|
||||
:style="{'background-image': background && `url(${background})`}"></div>
|
||||
<navigation/>
|
||||
<div
|
||||
|
|
|
@ -12,9 +12,10 @@
|
|||
class="list-card"
|
||||
v-if="list !== null && (showArchived ? true : !list.isArchived)"
|
||||
>
|
||||
<div v-if="background !== null"
|
||||
class="list-background"
|
||||
:style="{'background-image': background !== null ? `url(${background})` : false}"></div>
|
||||
<div
|
||||
class="list-background background-fade-in"
|
||||
:class="{'is-visible': background}"
|
||||
:style="{'background-image': background !== null ? `url(${background})` : false}"></div>
|
||||
<div class="list-content">
|
||||
<div class="is-archived-container">
|
||||
<span class="is-archived" v-if="list.isArchived">
|
||||
|
|
|
@ -43,6 +43,9 @@
|
|||
height: 100vh;
|
||||
position: fixed;
|
||||
z-index: 0;
|
||||
}
|
||||
|
||||
.background-fade-in {
|
||||
opacity: 0;
|
||||
transition: opacity $transition;
|
||||
transition-delay: $transition-duration * 2; // To fake an appearing background
|
||||
|
|
Reference in New Issue