diff options
Diffstat (limited to 'assets/_sass/partials/_burger-menu.scss')
| -rw-r--r-- | assets/_sass/partials/_burger-menu.scss | 136 |
1 files changed, 68 insertions, 68 deletions
diff --git a/assets/_sass/partials/_burger-menu.scss b/assets/_sass/partials/_burger-menu.scss index 73a5b4d..573e406 100644 --- a/assets/_sass/partials/_burger-menu.scss +++ b/assets/_sass/partials/_burger-menu.scss @@ -1,68 +1,68 @@ -.toggleBurger {
- display: none;
-
- &:checked {
- & ~ .site-navigation {
- transform: translate(0, 0);
- }
- & ~ .toggleBurgerWrapper {
- span {
- background: transparent;
- &:before {
- top: 0;
- transform: rotate(135deg);
- }
- &:after {
- top: 0;
- transform: rotate(-135deg);
- }
- }
- }
- }
-}
-
-.toggleBurgerWrapper {
- display: none;
- position: fixed;
- top: 20px;
- left: 20px;
- width: 25px;
- height: 30px;
- cursor: pointer;
- z-index: 100;
- user-select: none;
-
- span {
- position: absolute;
- top: 50%;
- height: 2px;
- width: 100%;
- background: var(--grey-222);
-
- transition: all .3s ease;
- transform: translate(0, -50%);
-
- &:before,
- &:after {
- position: absolute;
- height: 2px;
- width: 100%;
- background: var(--grey-222);
- content: "";
-
- transition: all .3s ease;
- }
- &:before {
- top: -6px;
- }
- &:after {
- top: 6px;
- }
- }
-}
-
-@media screen and (max-width: 800px) {
- .toggleBurgerWrapper {
- display: block;
- }
-}
+.toggleBurger { + display: none; + + &:checked { + & ~ .site-navigation { + transform: translate(0, 0); + } + & ~ .toggleBurgerWrapper { + span { + background: transparent; + &:before { + top: 0; + transform: rotate(135deg); + } + &:after { + top: 0; + transform: rotate(-135deg); + } + } + } + } +} + +.toggleBurgerWrapper { + display: none; + position: fixed; + top: 20px; + left: 20px; + width: 25px; + height: 30px; + cursor: pointer; + z-index: 100; + user-select: none; + + span { + position: absolute; + top: 50%; + height: 2px; + width: 100%; + background: var(--grey-222); + + transition: all .3s ease; + transform: translate(0, -50%); + + &:before, + &:after { + position: absolute; + height: 2px; + width: 100%; + background: var(--grey-222); + content: ""; + + transition: all .3s ease; + } + &:before { + top: -6px; + } + &:after { + top: 6px; + } + } +} + +@media screen and (max-width: 800px) { + .toggleBurgerWrapper { + display: block; + } +} |
