From 5b4baee3b5cc10a523d9ae9c49e69292cf6529c3 Mon Sep 17 00:00:00 2001 From: Peter Dimou Date: Wed, 2 Aug 2017 12:27:01 -0400 Subject: [PATCH] Refactor intro animations into a separate SASS variable (#1147) --- _sass/minimal-mistakes/_footer.scss | 4 ++-- _sass/minimal-mistakes/_masthead.scss | 4 ++-- _sass/minimal-mistakes/_navigation.scss | 4 ++-- _sass/minimal-mistakes/_page.scss | 12 ++++++------ _sass/minimal-mistakes/_variables.scss | 1 + docs/_sass/minimal-mistakes/_footer.scss | 4 ++-- docs/_sass/minimal-mistakes/_masthead.scss | 4 ++-- docs/_sass/minimal-mistakes/_navigation.scss | 4 ++-- docs/_sass/minimal-mistakes/_page.scss | 12 ++++++------ 9 files changed, 25 insertions(+), 24 deletions(-) diff --git a/_sass/minimal-mistakes/_footer.scss b/_sass/minimal-mistakes/_footer.scss index 598bd400aed5..1eb8dab85783 100644 --- a/_sass/minimal-mistakes/_footer.scss +++ b/_sass/minimal-mistakes/_footer.scss @@ -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; diff --git a/_sass/minimal-mistakes/_masthead.scss b/_sass/minimal-mistakes/_masthead.scss index 39ebd2c7db03..8436e877d15c 100644 --- a/_sass/minimal-mistakes/_masthead.scss +++ b/_sass/minimal-mistakes/_masthead.scss @@ -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; diff --git a/_sass/minimal-mistakes/_navigation.scss b/_sass/minimal-mistakes/_navigation.scss index 4c1748f978f5..3bd2b932c475 100644 --- a/_sass/minimal-mistakes/_navigation.scss +++ b/_sass/minimal-mistakes/_navigation.scss @@ -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; diff --git a/_sass/minimal-mistakes/_page.scss b/_sass/minimal-mistakes/_page.scss index 6b77b32625f8..47751f942cdb 100644 --- a/_sass/minimal-mistakes/_page.scss +++ b/_sass/minimal-mistakes/_page.scss @@ -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; diff --git a/_sass/minimal-mistakes/_variables.scss b/_sass/minimal-mistakes/_variables.scss index 2b59066c29e7..cf8bfd414810 100644 --- a/_sass/minimal-mistakes/_variables.scss +++ b/_sass/minimal-mistakes/_variables.scss @@ -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; diff --git a/docs/_sass/minimal-mistakes/_footer.scss b/docs/_sass/minimal-mistakes/_footer.scss index 598bd400aed5..1eb8dab85783 100644 --- a/docs/_sass/minimal-mistakes/_footer.scss +++ b/docs/_sass/minimal-mistakes/_footer.scss @@ -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; diff --git a/docs/_sass/minimal-mistakes/_masthead.scss b/docs/_sass/minimal-mistakes/_masthead.scss index 39ebd2c7db03..8436e877d15c 100644 --- a/docs/_sass/minimal-mistakes/_masthead.scss +++ b/docs/_sass/minimal-mistakes/_masthead.scss @@ -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; diff --git a/docs/_sass/minimal-mistakes/_navigation.scss b/docs/_sass/minimal-mistakes/_navigation.scss index 4c1748f978f5..3bd2b932c475 100644 --- a/docs/_sass/minimal-mistakes/_navigation.scss +++ b/docs/_sass/minimal-mistakes/_navigation.scss @@ -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; diff --git a/docs/_sass/minimal-mistakes/_page.scss b/docs/_sass/minimal-mistakes/_page.scss index 6b77b32625f8..47751f942cdb 100644 --- a/docs/_sass/minimal-mistakes/_page.scss +++ b/docs/_sass/minimal-mistakes/_page.scss @@ -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;