From 0f6179706deb9c0a235013bddebc33596eaf08e3 Mon Sep 17 00:00:00 2001
From: Jules Laplace <julescarbon@gmail.com>
Date: Thu, 23 Jul 2020 22:53:38 +0200
Subject: opening and closing the nav

---
 .../frontend/app/views/viewer/nav/nav.css          | 25 ++++++++++++++++++----
 1 file changed, 21 insertions(+), 4 deletions(-)

(limited to 'animism-align/frontend/app/views/viewer/nav/nav.css')

diff --git a/animism-align/frontend/app/views/viewer/nav/nav.css b/animism-align/frontend/app/views/viewer/nav/nav.css
index 3689593..5c62b03 100644
--- a/animism-align/frontend/app/views/viewer/nav/nav.css
+++ b/animism-align/frontend/app/views/viewer/nav/nav.css
@@ -5,6 +5,15 @@
   width: 100%;
   font-size: 18px;
 }
+.main-nav {
+  transition: all 0.2s;
+  transform: translateZ(0) translateY(0);
+}
+.sections-open .main-nav {
+  transform: translateZ(0) translateY(-22rem);
+  background: black;
+  color: white;
+}
 
 /* The main nav row */
 
@@ -65,6 +74,14 @@
   width: 100%;
   height: 100%;
 }
+.viewer-nav .arrow path,
+.viewer-nav .arrow polygon {
+  fill: #000;
+}
+.sections-open .viewer-nav .arrow path,
+.sections-open .viewer-nav .arrow polygon {
+  fill: #fff;
+}
 
 /* Volume button */
 
@@ -81,10 +98,10 @@
   stroke: #000;
   stroke-width: 0.5;
 }
-.nav-open .volume path {
+.sections-open .volume path {
   fill: #fff;
 }
-.nav-open .volume.muted path {
+.sections-open .volume.muted path {
   fill: #000;
   stroke: #fff;
 }
@@ -100,8 +117,8 @@
 .playToggle polygon {
   fill: #000;
 }
-.nav-open .playToggle path,
-.nav-open .playToggle polygon {
+.sections-open .playToggle path,
+.sections-open .playToggle polygon {
   fill: #fff;
 }
 
-- 
cgit v1.2.3-70-g09d2