mirror/mCaptcha
1
0
Fork 1
mirror of https://github.com/mCaptcha/mCaptcha.git synced 2026-02-11 10:05:41 +00:00
Code Issues Packages Projects Releases Wiki Activity

navbar animation

Browse Source
This commit is contained in:
realaravinth
2021-08-23 18:55:57 +05:30
parent a8c3eaa617
commit b1fd56e9b6
1 changed files with 37 additions and 10 deletions
Download Patch File Download Diff File Expand all files Collapse all files

47
templates/panel/navbar/mobile.scss
View File

@@ -16,16 +16,12 @@
*/ */
@import '../../vars'; @import '../../vars';
$hamburger-menu-animation: 0.3s ease-in;
.secondary-menu { .secondary-menu {
display: block; display: block;
} }
.secondary-menu__list {
// position: sticky;
height: 0px;
overflow: hidden;
}
.nav__hamburger-menu { .nav__hamburger-menu {
display: inline-block; display: inline-block;
width: 50px; width: 50px;
@@ -63,17 +59,48 @@
} }
.nav-toggle:not(:checked) ~ .secondary-menu__list { .nav-toggle:not(:checked) ~ .secondary-menu__list {
height: 0px; overflow-y: hidden;
// overflow-y: hidden; max-height: 0;
// max-height: 100%; transition: max-height $hamburger-menu-animation;
} }
.nav-toggle:checked ~ .secondary-menu__list { .nav-toggle:checked ~ .secondary-menu__list {
height: 100%; max-height: 500px;
overflow-y: auto; overflow-y: auto;
transition: max-height $hamburger-menu-animation;
} }
.secondary-menu__brand-name:hover { .secondary-menu__brand-name:hover {
color: $light-text; color: $light-text;
cursor: pointer; cursor: pointer;
} }
.nav-toggle:checked ~ .secondary-menu__heading {
.nav__hamburger-menu {
span:nth-child(2) {
border: none;
}
span:nth-child(3) {
transform: rotate(-45deg) translate(55%, -15%);
transition: $hamburger-menu-animation;
}
span:first-child {
transform: rotate(45deg) translate(35%, 40%);
transition: $hamburger-menu-animation;
}
}
}
.nav-toggle:not(checked) ~ .secondary-menu__heading {
.nav__hamburger-menu {
span:nth-child(3) {
transition: $hamburger-menu-animation;
}
span:first-child {
transition: $hamburger-menu-animation;
}
}
}