Skip to content

Instantly share code, notes, and snippets.

@chriscoyier
Created February 28, 2018 18:07
Show Gist options
  • Star 0 You must be signed in to star a gist
  • Fork 0 You must be signed in to fork a gist
  • Save chriscoyier/e108e9ca5833b9cd3461732919e00c6c to your computer and use it in GitHub Desktop.
Save chriscoyier/e108e9ca5833b9cd3461732919e00c6c to your computer and use it in GitHub Desktop.
.asdf,
.asdf2 {
opacity: 1;
animation: pi-fadein 0.5s ease 3s forwards; }
.my-module {
opacity: 1;
opacity: 1;
opacity: 1;
opacity: opacity: 1; }
.asdfasdf {
content: 'inactive';
color: black; }
$fade-inline-active: no; // yes or no
$fade-inline-delay: 3s; // time in seconds (3s)
$fade-inline-duration: 0.5s; // time in seconds
$fade-bottom-active: no;
$fade-bottom-delay: 3s;
$fade-bottom-duration: 0.5s;
$fade-docked-active: no;
$fade-docked-delay: 3s;
$fade-docked-duration: 0.5s;
$fade-topbar-active: no;
$fade-topbar-delay: 3s;
$fade-topbar-duration: 0.5s;
@function fade-function-inline($fade-inline-active) {
@if ($fade-inline-active == yes) {
@return 0;
} @else {
@return 1;
}
}
@function fade-function-bottom($fade-bottom-active) {
@if ($fade-bottom-active == yes) {
@return 0;
} @else {
@return 1;
}
}
@function fade-function-docked($fade-docked-active) {
@if ($fade-docked-active == yes) {
@return 0;
} @else {
@return 1;
}
}
@function fade-function-topbar($fade-topbar-active) {
@if ($fade-topbar-active == yes) {
@return 0;
} @else {
// @return 1;
opacity: 1;
animation: pi-fadein 0 ease 0 forwards;
}
}
.asdf,
.asdf2 {
opacity: fade-function-bottom($fade-bottom-active);
animation: pi-fadein $fade-bottom-duration ease $fade-bottom-delay forwards;
}
.my-module {
opacity: fade-function-inline($fade-inline-active);
opacity: fade-function-bottom($fade-bottom-active);
opacity: fade-function-docked($fade-docked-active);
opacity: fade-function-topbar($fade-topbar-active);
}
@mixin fade-topbar($fade-topbar-active) {
@if ($fade-topbar-active == yes) {
content: 'active';
} @else {
content: 'inactive';
}
}
.asdfasdf {
@include fade-topbar($fade-topbar-active);
color: black;
}
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment