mirror of
https://github.com/TryGhost/Ghost.git
synced 2025-02-10 23:36:14 -05:00
d8f858e264
Closes #3940 - Pushing left/right changes the "focus" of the posts screen to the list / content, respectively - Once one of these has been focused, up/down keyboards work on that section in particular - By default, the post list is selected - Using the keyboard to focus one of the two makes it go "poof" to let you know you changed stuff
73 lines
No EOL
1.1 KiB
SCSS
Executable file
73 lines
No EOL
1.1 KiB
SCSS
Executable file
//
|
|
// Fade in
|
|
// --------------------------------------------------
|
|
|
|
@keyframes fade-in {
|
|
from {
|
|
opacity: 0;
|
|
}
|
|
to {
|
|
opacity: 1;
|
|
}
|
|
}
|
|
.fade-in {
|
|
animation: fade-in 0.2s;
|
|
animation-fill-mode: forwards;
|
|
}
|
|
|
|
@keyframes fade-in-snap {
|
|
to {
|
|
opacity: 1;
|
|
}
|
|
}
|
|
|
|
|
|
//
|
|
// Fade in scale up
|
|
// --------------------------------------------------
|
|
@keyframes fade-in-scale {
|
|
from {
|
|
transform: scale(0.8);
|
|
opacity: 0;
|
|
}
|
|
to {
|
|
transform: scale(1);
|
|
opacity: 1;
|
|
}
|
|
}
|
|
.fade-in-scale {
|
|
animation: fade-in-scale 0.2s;
|
|
animation-fill-mode: forwards;
|
|
}
|
|
|
|
|
|
//
|
|
// Fade out
|
|
// --------------------------------------------------
|
|
|
|
@keyframes fade-out {
|
|
from {
|
|
opacity: 1;
|
|
}
|
|
to {
|
|
opacity: 0;
|
|
}
|
|
}
|
|
.fade-out {
|
|
animation: fade-out 0.5s;
|
|
animation-fill-mode: forwards;
|
|
}
|
|
|
|
|
|
//
|
|
// Fade out inset box shadow for content page keyboard focus
|
|
// --------------------------------------------------
|
|
|
|
@keyframes keyboard-focus-style-fade-out {
|
|
from {
|
|
box-shadow: inset 0 0 30px 1px lighten($midgrey, 20%);
|
|
}
|
|
to {
|
|
box-shadow: none;
|
|
}
|
|
} |