agaric/patternlibrary
10
1
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity

Minimize flash of different navbar color

Browse source 
by not having it transition in the first time, but really we need a full fix
not a meh mitigation.
This commit is contained in:
benjamin melançon 2018-12-17 09:47:11 -05:00
parent b64064604f
commit cb7f49c103
2 changed files with 10 additions and 5 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

4
agaric/js/script.js
View file

@ -20,7 +20,9 @@ $(document).ready(function(){
}) })
.offset(el.offset().top - headerEl.outerHeight()) .offset(el.offset().top - headerEl.outerHeight())
.on("enter",function(e){headerEl.addClass(elClass)}) .on("enter",function(e){headerEl.addClass(elClass)})
.on("leave",function(e){headerEl.removeClass(elClass)}) // Minimize flash of different navbar color by not having it transition in
// the first time, but really we need a full fix not a meh mitigation.
.on("leave",function(e){headerEl.removeClass(elClass); headerEl.addClass('navbar-transition')})
.addTo(controller); .addTo(controller);
}); });

11
agaric/sass/agaric/_component.navbar.scss
View file

@ -30,15 +30,18 @@
.navbar { .navbar {
color: $white; color: $white;
background-color: $dark; background-color: $dark;
@include desktop {
padding: 1.25em 0;
}
z-index: +9;
}
.navbar-transition {
@include tablet { @include tablet {
transition-property: color, background-color; transition-property: color, background-color;
transition-timing-function: ease-out; transition-timing-function: ease-out;
transition-duration: 500ms; transition-duration: 500ms;
} }
@include desktop {
padding: 1.25em 0;
}
z-index: +9;
} }
// Header colors // Header colors