From 5f4b72f9be23e54905ea576649c7c3a334b54dde Mon Sep 17 00:00:00 2001 From: reverend Date: Sun, 16 Aug 2020 11:40:40 +0200 Subject: [PATCH] Sidebar animation is not triggered when loading page --- components/_preview.hbs | 12 ++++++++++++ components/main.scss | 14 +++++++++----- public/main.css | 6 ++++-- 3 files changed, 25 insertions(+), 7 deletions(-) diff --git a/components/_preview.hbs b/components/_preview.hbs index 2fd5ffd..61a5078 100644 --- a/components/_preview.hbs +++ b/components/_preview.hbs @@ -4,6 +4,18 @@ Preview + {{{ yield }}} diff --git a/components/main.scss b/components/main.scss index dda46b2..f094009 100644 --- a/components/main.scss +++ b/components/main.scss @@ -95,20 +95,20 @@ body{ } @media(max-width: $-viewport-toggle-sidebar){ - .LP-Wrapper__Site{ - grid-template-columns: 0 1fr; - } - @keyframes slide_out_siedebar{ from{left: -1 * $-sidebar-width;} to{left: 0;} } - + @keyframes slide_in_siedebar{ from{left: 0;} to{left: -1 * $-sidebar-width;} } + .LP-Wrapper__Site{ + grid-template-columns: 0 1fr; + } + .LP-Main__Sidebar{ grid-area:unset; width: $-sidebar-width; @@ -118,6 +118,10 @@ body{ height: 100vh; top: 60px; border-right: 1px solid $-light-brown; + + &--hidden{ + visibility: hidden; + } } #toggle_sidebar:checked ~ .LP-Main__Sidebar{ diff --git a/public/main.css b/public/main.css index 97efc59..e30148b 100644 --- a/public/main.css +++ b/public/main.css @@ -53,8 +53,6 @@ body { margin: 0; } } @media (max-width: 650px) { - .LP-Wrapper__Site { - grid-template-columns: 0 1fr; } @keyframes slide_out_siedebar { from { left: -250px; } @@ -65,6 +63,8 @@ body { left: 0; } to { left: -250px; } } + .LP-Wrapper__Site { + grid-template-columns: 0 1fr; } .LP-Main__Sidebar { grid-area: unset; width: 250px; @@ -74,6 +74,8 @@ body { height: 100vh; top: 60px; border-right: 1px solid #C09F80; } + .LP-Main__Sidebar--hidden { + visibility: hidden; } #toggle_sidebar:checked ~ .LP-Main__Sidebar { animation-name: slide_out_siedebar; animation-duration: .3s;