Refactor intro animations into a separate SASS variable (#1147)

This commit is contained in:
Peter Dimou 2017-08-02 12:27:01 -04:00 committed by Michael Rose
parent 822fa4d1f8
commit 5b4baee3b5
9 changed files with 25 additions and 24 deletions

View file

@ -14,8 +14,8 @@
/* sticky footer fix end */
margin-top: 3em;
color: mix(#fff, $gray, 25%);
-webkit-animation: intro 0.3s both;
animation: intro 0.3s both;
-webkit-animation: $intro-transition;
animation: $intro-transition;
-webkit-animation-delay: 0.45s;
animation-delay: 0.45s;
background-color: $lighter-gray;

View file

@ -5,8 +5,8 @@
.masthead {
position: relative;
border-bottom: 1px solid $border-color;
-webkit-animation: intro 0.3s both;
animation: intro 0.3s both;
-webkit-animation: $intro-transition;
animation: $intro-transition;
-webkit-animation-delay: 0.15s;
animation-delay: 0.15s;
z-index: 20;

View file

@ -14,8 +14,8 @@
padding-left: 2em;
padding-right: 2em;
font-family: $sans-serif;
-webkit-animation: intro 0.3s both;
animation: intro 0.3s both;
-webkit-animation: $intro-transition;
animation: $intro-transition;
-webkit-animation-delay: 0.30s;
animation-delay: 0.30s;

View file

@ -8,8 +8,8 @@
margin-top: 2em;
padding-left: 1em;
padding-right: 1em;
-webkit-animation: intro 0.3s both;
animation: intro 0.3s both;
-webkit-animation: $intro-transition;
animation: $intro-transition;
-webkit-animation-delay: 0.35s;
animation-delay: 0.35s;
@ -113,8 +113,8 @@
position: relative;
margin-bottom: 2em;
@include clearfix;
-webkit-animation: intro 0.3s both;
animation: intro 0.3s both;
-webkit-animation: $intro-transition;
animation: $intro-transition;
-webkit-animation-delay: 0.25s;
animation-delay: 0.25s;
@ -126,8 +126,8 @@
background-size: cover;
background-repeat: no-repeat;
background-position: center;
-webkit-animation: intro 0.3s both;
animation: intro 0.3s both;
-webkit-animation: $intro-transition;
animation: $intro-transition;
-webkit-animation-delay: 0.25s;
animation-delay: 0.25s;

View file

@ -127,3 +127,4 @@ $box-shadow : 0 1px 1px rgba(0, 0, 0, 0.125) !default;
$navicon-width : 1.5rem !default;
$navicon-height : 0.25rem !default;
$global-transition : all 0.2s ease-in-out !default;
$intro-transition : intro 0.3s both !default;

View file

@ -14,8 +14,8 @@
/* sticky footer fix end */
margin-top: 3em;
color: mix(#fff, $gray, 25%);
-webkit-animation: intro 0.3s both;
animation: intro 0.3s both;
-webkit-animation: $intro-transition;
animation: $intro-transition;
-webkit-animation-delay: 0.45s;
animation-delay: 0.45s;
background-color: $lighter-gray;

View file

@ -5,8 +5,8 @@
.masthead {
position: relative;
border-bottom: 1px solid $border-color;
-webkit-animation: intro 0.3s both;
animation: intro 0.3s both;
-webkit-animation: $intro-transition;
animation: $intro-transition;
-webkit-animation-delay: 0.15s;
animation-delay: 0.15s;
z-index: 20;

View file

@ -14,8 +14,8 @@
padding-left: 2em;
padding-right: 2em;
font-family: $sans-serif;
-webkit-animation: intro 0.3s both;
animation: intro 0.3s both;
-webkit-animation: $intro-transition;
animation: $intro-transition;
-webkit-animation-delay: 0.30s;
animation-delay: 0.30s;

View file

@ -8,8 +8,8 @@
margin-top: 2em;
padding-left: 1em;
padding-right: 1em;
-webkit-animation: intro 0.3s both;
animation: intro 0.3s both;
-webkit-animation: $intro-transition;
animation: $intro-transition;
-webkit-animation-delay: 0.35s;
animation-delay: 0.35s;
@ -113,8 +113,8 @@
position: relative;
margin-bottom: 2em;
@include clearfix;
-webkit-animation: intro 0.3s both;
animation: intro 0.3s both;
-webkit-animation: $intro-transition;
animation: $intro-transition;
-webkit-animation-delay: 0.25s;
animation-delay: 0.25s;
@ -126,8 +126,8 @@
background-size: cover;
background-repeat: no-repeat;
background-position: center;
-webkit-animation: intro 0.3s both;
animation: intro 0.3s both;
-webkit-animation: $intro-transition;
animation: $intro-transition;
-webkit-animation-delay: 0.25s;
animation-delay: 0.25s;