mirror of
https://github.com/mCaptcha/mCaptcha.git
synced 2025-03-14 13:08:27 +03:00
navbar animation
This commit is contained in:
parent
a8c3eaa617
commit
b1fd56e9b6
1 changed files with 37 additions and 10 deletions
|
@ -16,16 +16,12 @@
|
|||
*/
|
||||
@import '../../vars';
|
||||
|
||||
$hamburger-menu-animation: 0.3s ease-in;
|
||||
|
||||
.secondary-menu {
|
||||
display: block;
|
||||
}
|
||||
|
||||
.secondary-menu__list {
|
||||
// position: sticky;
|
||||
height: 0px;
|
||||
overflow: hidden;
|
||||
}
|
||||
|
||||
.nav__hamburger-menu {
|
||||
display: inline-block;
|
||||
width: 50px;
|
||||
|
@ -63,17 +59,48 @@
|
|||
}
|
||||
|
||||
.nav-toggle:not(:checked) ~ .secondary-menu__list {
|
||||
height: 0px;
|
||||
// overflow-y: hidden;
|
||||
// max-height: 100%;
|
||||
overflow-y: hidden;
|
||||
max-height: 0;
|
||||
transition: max-height $hamburger-menu-animation;
|
||||
}
|
||||
|
||||
.nav-toggle:checked ~ .secondary-menu__list {
|
||||
height: 100%;
|
||||
max-height: 500px;
|
||||
overflow-y: auto;
|
||||
transition: max-height $hamburger-menu-animation;
|
||||
}
|
||||
|
||||
.secondary-menu__brand-name:hover {
|
||||
color: $light-text;
|
||||
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;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
|
Loading…
Add table
Reference in a new issue