settel/knowyt
1
0
Fork 0
Code Issues Pull Requests Packages Releases Activity

feat: animate source cards on show (WIP)

Browse Source
This commit is contained in:
Settel 2022-09-13 09:40:50 +02:00
parent 453a29afbd
commit 1361d98570
2 changed files with 21 additions and 6 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

3
client/src/assets/css/colors.scss
View File

@ -87,9 +87,6 @@ $sourcecard-selected-background-color: #ffffff;
$sourcecard-selected-text-color: $background-primary-color;
$sourcecard-selected-border: 3px solid #ffffff;
$sourcecard-selected-box-shadow: 0 0 10px #ffffff;
$sourcecard-disabled-background-color: $sourcecard-background-color;
$sourcecard-disabled-text-color: darken($text-primary-color, 60%);
$sourcecard-disabled-border: 3px solid #606060;
// Source Card Badge
$sourcecardbadge-background-color: #ffff88;

24
client/src/components/SourceCard.vue
View File

@ -48,6 +48,8 @@ const containerClasses = computed(() => {
background-color: $sourcecard-background-color;
color: $sourcecard-text-color;
cursor: not-allowed;
animation: source-show 1s ease-out;
animation-fill-mode: forwards;
&__selectable {
cursor: pointer;
@ -68,9 +70,8 @@ const containerClasses = computed(() => {
}
&__disabled {
background-color: $sourcecard-disabled-background-color;
color: $sourcecard-disabled-text-color;
border: $sourcecard-disabled-border;
animation: source-fade-out 0.7s linear;
animation-fill-mode: forwards;
}
}
@ -96,4 +97,21 @@ const containerClasses = computed(() => {
user-select: none;
}
}
@keyframes source-fade-out {
to { opacity: 10%; }
}
@keyframes source-show {
from {
position: relative;
left: -40px;
opacity: 0%;
}
to {
position: relative;
left: 0;
opacity: 100%;
}
}
</style>