Removed JS, using transition instead of animation for sidebar menu sliding
This commit is contained in:
parent
15b4bc7880
commit
427ce11adb
@ -4,18 +4,6 @@
|
||||
<meta charset="UTF-8">
|
||||
<link rel="stylesheet" href="{{ path '/main.css' }}">
|
||||
<title>Preview</title>
|
||||
<script>
|
||||
document.addEventListener("DOMContentLoaded", function(){
|
||||
Array.from(document.getElementsByClassName('LP-Main__Sidebar')).forEach(function(element){
|
||||
element.classList.add('LP-Main__Sidebar--hidden')
|
||||
})
|
||||
setTimeout(function(){
|
||||
Array.from(document.getElementsByClassName('LP-Main__Sidebar')).forEach(function(element){
|
||||
element.classList.remove('LP-Main__Sidebar--hidden')
|
||||
})
|
||||
}, 500)
|
||||
})
|
||||
</script>
|
||||
</head>
|
||||
<body>
|
||||
{{{ yield }}}
|
||||
|
@ -100,16 +100,6 @@ body{
|
||||
}
|
||||
|
||||
@media(max-width: $-viewport-toggle-sidebar){
|
||||
@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;
|
||||
}
|
||||
@ -123,6 +113,7 @@ body{
|
||||
height: 100vh;
|
||||
top: 60px;
|
||||
border-right: 1px solid $-light-brown;
|
||||
transition: left 0.3s;
|
||||
|
||||
&--hidden{
|
||||
visibility: hidden;
|
||||
@ -130,14 +121,11 @@ body{
|
||||
}
|
||||
|
||||
#toggle_sidebar:checked ~ .LP-Main__Sidebar{
|
||||
animation-name: slide_out_siedebar;
|
||||
animation-duration: .3s;
|
||||
left: 0 ;
|
||||
}
|
||||
|
||||
#toggle_sidebar ~ .LP-Main__Sidebar{
|
||||
animation-name: slide_in_siedebar;
|
||||
animation-duration: .3s;
|
||||
left: -1 * $-sidebar-width;
|
||||
}
|
||||
|
||||
.LP-Menu__TriggerLabel{
|
||||
|
Loading…
Reference in New Issue
Block a user