Commit 275bf25b authored by Aria Givi's avatar Aria Givi
Browse files

Auf- und Zuklappen funktioniert, allerdings komischer Delay vorhanden

parent 9ef56543
......@@ -9,16 +9,15 @@
position: fixed;
display: block;
top: 0px;
right: -260px;
width: 260px;
right: -270px;
width: 270px;
height: 100%;
padding-top: 70px;
overflow: hidden;
overflow-y: auto;
transition: 0.5s;
z-index: 999;
background-color: white;
transition: 0.5s;
&>label#closeSidebar {
position: absolute;
font-size: 36px;
......@@ -46,15 +45,6 @@
&:hover {
background-color: @metager-navbar-toggle-hover-background-color;
/*
&>.metager-dropdown-menu {
animation-name: dropdown-animation;
animation-duration: 0.7s;
animation-timing-function: ease-out;
animation-fill-mode: forwards;
animation-delay: 0.1s;
}
*/
}
&>label {
......@@ -80,6 +70,10 @@
text-align: left;
max-height: 0px;
overflow: hidden;
animation-name: reverse-dropdown-animation;
animation-duration: 0.3s;
animation-timing-function: linear;
animation-fill-mode: forwards;
&>li>a {
display: block;
font-size: 12px;
......@@ -132,18 +126,26 @@
left: 90%;
margin-top: 8px;
}
}
input.sideBarCheckbox {
display: none;
}
& input.sideBarCheckbox {
display: none;
&:checked {
& ~.metager-dropdown-menu {
animation-name: dropdown-animation;
animation-duration: 0.7s;
animation-timing-function: ease-out;
animation-fill-mode: forwards;
animation-delay: 0.1s;
}
& ~ label > .caret {
border-top:0 solid;
border-bottom:4px solid;
transition:border-top .1s, border-bottom .1s .1s;
}
}
}
input.sideBarCheckbox:checked ~ .metager-dropdown-menu {
animation-name: dropdown-animation;
animation-duration: 0.7s;
animation-timing-function: ease-out;
animation-fill-mode: forwards;
animation-delay: 0.1s;
}
label#openSidebar {
......@@ -161,20 +163,6 @@ label#openSidebar {
}
}
@keyframes dropdown-animation {
0% {
max-height: 0px;
padding: 0px 0;
}
1% {
padding: 5px 0;
}
100% {
max-height: 1000px;
padding: 5px 0;
}
}
@media (max-width: 979px) {
.sideBar {
right: -90%;
......@@ -195,4 +183,34 @@ input#nav0:checked {
& ~.sideBar {
right: 0px;
}
}
\ No newline at end of file
}
@keyframes dropdown-animation {
0% {
max-height: 0px;
padding: 0px 0;
}
1% {
padding: 5px 0;
}
100% {
max-height: 1000px;
padding: 5px 0;
}
}
@keyframes reverse-dropdown-animation {
0% {
max-height: 1000px;
padding: 5px 0;
}
1% {
padding: 5px 0;
}
100% {
max-height: 0px;
padding: 0px 0;
}
}
Markdown is supported
0% or .
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment