slight navbar code cleanup

This commit is contained in:
Felix Hamann 2018-06-23 13:45:01 +02:00
parent b1ffef00a0
commit 8a0b0c9788
3 changed files with 9 additions and 24 deletions

View File

@ -4,14 +4,13 @@ $newline never
<div .navbar__logo>
<ul .navbar-left__list.list--inline>
$forall menuType <- menuTypes
$case menuType
$of NavbarAside (MenuItem label mIcon route _)
<li .navbar-left__list-item :highlight route:.navbar-left__list-item--active>
<a .navbar-left__link-wrapper href=@{route}>
<i .fas.fa-#{fromMaybe "none" mIcon}.fa-2x>
<i .fas.fa-#{fromMaybe "none" mIcon}>
<div .navbar-left__link-label>#{label}
$of _

View File

@ -8,9 +8,6 @@
init();
function init() {
window.setTimeout(function () {
nav.classList.add('navbar--animated');
}, 200);
window.addEventListener('scroll', function (e) {
if (!ticking) {
window.requestAnimationFrame(update);

View File

@ -17,8 +17,8 @@
top: 0;
left: 0;
overflow: hidden;
transition: height 0.2s cubic-bezier(0.03, 0.43, 0.58, 1);
box-shadow: 0 0 4px rgba(0, 0, 0, 0.2);
transition: all .2s cubic-bezier(0.03, 0.43, 0.58, 1);
}
@media (max-width: 768px) {
@ -82,9 +82,6 @@
height: 20px;
}
}
.navbar :last-child {
margin-left: auto;
}
.navbar-right__link-wrapper {
display: flex;
@ -99,7 +96,6 @@
.navbar-right__link-label {
transition: opacity .2s ease;
padding: 0 13px;
color: var(--color-lightwhite);
text-transform: uppercase;
}
@ -122,25 +118,22 @@
}
.navbar-right__list-item--active .navbar-right__link-wrapper {
pointer-events: none;
}
.navbar-right__list-item--active .navbar-right__link-label {
color: var(--color-dark);
}
.navbar .navbar-right__list-item:not(.navbar-right__list-item--active):hover {
background-color: var(--color-darker);
}
.navbar .navbar-right__list-item:not(.navbar-right__list-item--active):hover .navbar-right__link-wrapper {
background-color: var(--color-darker);
color: var(--color-lightwhite);
}
.navbar .navbar-right__list-item:not(.navbar-right__list-item--active):hover .navbar-right__link-label {
color: var(--color-lightwhite);
}
.navbar-right__list-item--secondary .navbar-right__link-wrapper,
.navbar-right__list-item--secondary .navbar-right__link-label {
.navbar-right__list-item--secondary .navbar-right__link-wrapper {
color: var(--color-grey);
}
/* left navbar list */
.navbar-left__list {
color: white;
}
.navbar--sticky {
height: var(--header-height-collapsed);
z-index: 100;
@ -150,10 +143,6 @@
}
}
.navbar--animated {
transition: all .2s cubic-bezier(0.03, 0.43, 0.58, 1);
}
.navbar__pushdown {
height: var(--header-height);
transition: height .2s cubic-bezier(0.03, 0.43, 0.58, 1);