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-text-color: $background-primary-color;
$sourcecard-selected-border: 3px solid #ffffff; $sourcecard-selected-border: 3px solid #ffffff;
$sourcecard-selected-box-shadow: 0 0 10px #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 // Source Card Badge
$sourcecardbadge-background-color: #ffff88; $sourcecardbadge-background-color: #ffff88;

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

@ -48,6 +48,8 @@ const containerClasses = computed(() => {
background-color: $sourcecard-background-color; background-color: $sourcecard-background-color;
color: $sourcecard-text-color; color: $sourcecard-text-color;
cursor: not-allowed; cursor: not-allowed;
animation: source-show 1s ease-out;
animation-fill-mode: forwards;
&__selectable { &__selectable {
cursor: pointer; cursor: pointer;
@ -68,9 +70,8 @@ const containerClasses = computed(() => {
} }
&__disabled { &__disabled {
background-color: $sourcecard-disabled-background-color; animation: source-fade-out 0.7s linear;
color: $sourcecard-disabled-text-color; animation-fill-mode: forwards;
border: $sourcecard-disabled-border;
} }
} }
@ -96,4 +97,21 @@ const containerClasses = computed(() => {
user-select: none; 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> </style>