mirror of
https://github.com/bigchaindb/site.git
synced 2024-12-25 02:46:10 +01:00
Matthias Kretschmann
6ede38abfc
- start linting scss based on Airbnb style guide - add includePaths to css & js tasks
75 lines
1.1 KiB
SCSS
75 lines
1.1 KiB
SCSS
|
|
$timing-default: ease-out;
|
|
$timing-bounce: cubic-bezier(0, 1.02, .32, 1.34); // easeOutBack, modified: http://cubic-bezier.com/#0,1.02,.32,1.34
|
|
|
|
//
|
|
// Transitions
|
|
//
|
|
@mixin transition {
|
|
transition: all .2s ease-out;
|
|
}
|
|
|
|
.transition {
|
|
@include transition;
|
|
}
|
|
|
|
.fade {
|
|
@include transition;
|
|
opacity: 0;
|
|
|
|
&.in {
|
|
opacity: 1;
|
|
}
|
|
}
|
|
|
|
|
|
//
|
|
// Custom animations
|
|
//
|
|
@mixin animation-fade-in {
|
|
animation: fade-in .2s $timing-default;
|
|
}
|
|
|
|
.animation-fade-in {
|
|
@include animation-fade-in;
|
|
|
|
&.paused {
|
|
animation-play-state: paused;
|
|
}
|
|
}
|
|
|
|
@keyframes fade-in {
|
|
0% {
|
|
opacity: 0;
|
|
}
|
|
|
|
100% {
|
|
opacity: 1;
|
|
}
|
|
}
|
|
|
|
// smooooothly slide in from bottom
|
|
@mixin animation-slide-in-from-bottom {
|
|
animation: slide-in-from-bottom .7s $timing-bounce;
|
|
}
|
|
|
|
.animation-slide-in-from-bottom {
|
|
@include animation-slide-in-from-bottom;
|
|
|
|
&.paused {
|
|
animation-play-state: paused;
|
|
}
|
|
}
|
|
|
|
@keyframes slide-in-from-bottom {
|
|
0% {
|
|
opacity: 0;
|
|
transform: translateY(50px);
|
|
}
|
|
|
|
100% {
|
|
opacity: 1;
|
|
transform: translateY(0);
|
|
}
|
|
}
|