From: Dan Allen <dan@opendevise.com>
Date: Sat, 26 Dec 2020 11:09:51 +0000 (-0700)
Subject: redo navbar burger using flexbox and add transition on close
X-Git-Url: https://old-git.evergreen-ils.org/?a=commitdiff_plain;h=dea12e651b38e901934a81bff7b5b4bbe52a01fc;p=working%2Feg-antora.git

redo navbar burger using flexbox and add transition on close
---

diff --git a/src/css/header.css b/src/css/header.css
index 186bfe7..232aa46 100644
--- a/src/css/header.css
+++ b/src/css/header.css
@@ -68,35 +68,32 @@ body {
   width: 3rem;
   margin-left: auto;
   padding: 0;
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  justify-content: center;
 }
 
 .navbar-burger span {
-  background: var(--navbar-font-color);
-  display: block;
-  height: 1px;
-  left: 50%;
-  margin-left: -7px;
-  position: absolute;
-  top: 50%;
+  border-top: 1.5px solid var(--navbar-font-color);
+  height: 0;
   width: 1rem;
 }
 
-.navbar-burger span:nth-child(1) {
-  margin-top: -6px;
+.navbar-burger:not(.is-active) span {
+  transition: transform ease-out 0.25s, opacity 0s 0.25s, margin-top ease-out 0.25s 0.25s;
 }
 
-.navbar-burger span:nth-child(2) {
-  margin-top: -1px;
+.navbar-burger span + span {
+  margin-top: 0.25rem;
 }
 
-.navbar-burger span:nth-child(3) {
-  margin-top: 4px;
+.navbar-burger.is-active span + span {
+  margin-top: -1.5px;
 }
 
 .navbar-burger.is-active span:nth-child(1) {
-  margin-left: -5px;
   transform: rotate(45deg);
-  transform-origin: top left;
 }
 
 .navbar-burger.is-active span:nth-child(2) {
@@ -104,9 +101,7 @@ body {
 }
 
 .navbar-burger.is-active span:nth-child(3) {
-  margin-left: -5px;
   transform: rotate(-45deg);
-  transform-origin: bottom left;
 }
 
 .navbar-menu {