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
|
<div
|
||||||
:class="{'is-visible': background}"
|
:class="{'is-visible': background}"
|
||||||
class="app-container-background"
|
class="app-container-background background-fade-in"
|
||||||
:style="{'background-image': background && `url(${background})`}"></div>
|
:style="{'background-image': background && `url(${background})`}"></div>
|
||||||
<navigation/>
|
<navigation/>
|
||||||
<div
|
<div
|
||||||
|
|
|
@ -12,9 +12,10 @@
|
||||||
class="list-card"
|
class="list-card"
|
||||||
v-if="list !== null && (showArchived ? true : !list.isArchived)"
|
v-if="list !== null && (showArchived ? true : !list.isArchived)"
|
||||||
>
|
>
|
||||||
<div v-if="background !== null"
|
<div
|
||||||
class="list-background"
|
class="list-background background-fade-in"
|
||||||
:style="{'background-image': background !== null ? `url(${background})` : false}"></div>
|
:class="{'is-visible': background}"
|
||||||
|
:style="{'background-image': background !== null ? `url(${background})` : false}"></div>
|
||||||
<div class="list-content">
|
<div class="list-content">
|
||||||
<div class="is-archived-container">
|
<div class="is-archived-container">
|
||||||
<span class="is-archived" v-if="list.isArchived">
|
<span class="is-archived" v-if="list.isArchived">
|
||||||
|
|
|
@ -43,6 +43,9 @@
|
||||||
height: 100vh;
|
height: 100vh;
|
||||||
position: fixed;
|
position: fixed;
|
||||||
z-index: 0;
|
z-index: 0;
|
||||||
|
}
|
||||||
|
|
||||||
|
.background-fade-in {
|
||||||
opacity: 0;
|
opacity: 0;
|
||||||
transition: opacity $transition;
|
transition: opacity $transition;
|
||||||
transition-delay: $transition-duration * 2; // To fake an appearing background
|
transition-delay: $transition-duration * 2; // To fake an appearing background
|
||||||
|
|
Reference in New Issue