Sha256: 8a44e862cd8f46c07b91a283618ab0c30fafc711ed52d856692332cbabd99f65
Contents?: true
Size: 1.71 KB
Versions: 9
Compression:
Stored size: 1.71 KB
Contents
/* fading background, vertical scrolling content */
section.page {
background-color: transparent;
}
section.fade {
background-color: transparent;
&.invert {
background-color: transparent;
}
.blackLayer {
display: none;
}
.backgroundArea {
background-color: black;
-webkit-backface-visibility: hidden;
}
&.invert .backgroundArea {
background-color: white;
}
&.animate-in-forwards .backgroundArea,
&.animate-in-backwards .backgroundArea {
opacity: 0;
}
&.animate-out-forwards .backgroundArea,
&.animate-out-backwards .backgroundArea,
&.active .backgroundArea {
opacity: 1;
}
.content {
-webkit-backface-visibility: hidden;
}
&.animate-in-forwards,
&.animate-in-backwards {
z-index: 2;
}
@mixin define($translate, $duration) {
&.active .backgroundArea,
&.animate-out-forwards .backgroundArea,
&.animate-out-backwards .backgroundArea {
@include transition(opacity $duration ease);
}
&.active .content,
&.animate-out-forwards .content,
&.animate-out-backwards .content {
@include transition($duration ease);
}
&.animate-in-forwards .content,
&.animate-out-backwards .content {
@include transform(call($translate, 100%));
}
&.animate-out-forwards .content,
&.animate-in-backwards .content {
@include transform(call($translate, -100%));
}
}
@function translateV($value) {
@return translate3d(0, $value, 0);
}
@function translateH($value) {
@return translate3d($value, 0, 0);
}
&-v {
@include define("translateV", 1s);
}
&-h {
@include define("translateH", 0.5s);
}
&.active div.content {
@include transform(translate3d(0, 0, 0));
}
}
Version data entries
9 entries across 9 versions & 1 rubygems