ResiLien/portails
3
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

Update mobile menu

Browse Source
This commit is contained in:
Henk Verlinde
2020-04-16 11:41:54 +02:00
parent 7aee74b851
commit a466f90a74
4 changed files with 97 additions and 6 deletions
Download Patch File Download Diff File Expand all files Collapse all files

9
assets/scss/common/_dark.scss
View File

@ -194,3 +194,12 @@ body.dark .card {
body.dark .card.bg-light {
background: $body-overlay-dark !important;
}
body.dark .navbar .menu-icon .navicon {
background: $navbar-dark-color;
}
body.dark .navbar .menu-icon .navicon:before,
body.dark .navbar .menu-icon .navicon:after {
background: $navbar-dark-color;
}

73
assets/scss/layouts/_header.scss
View File

@ -108,3 +108,76 @@
background-position: right calc(0.375em + 0.1875rem) center;
background-size: calc(0.75em + 0.375rem) calc(0.75em + 0.375rem);
}
/*
* Source: https://medium.com/creative-technology-concepts-code/responsive-mobile-dropdown-navigation-using-css-only-7218e4498a99
*/
/* Style the menu icon for the dropdown */
.navbar .menu-icon {
cursor: pointer;
/* display: inline-block; */
/* float: right; */
padding: 1.125rem 0.625rem;
margin: 0 0 0 -0.625rem;
/* position: relative; */
user-select: none;
}
.navbar .menu-icon .navicon {
background: $navbar-light-color;
display: block;
height: 2px;
position: relative;
transition: background .2s ease-out;
width: 18px;
}
.navbar .menu-icon .navicon:before,
.navbar .menu-icon .navicon:after {
background: $navbar-light-color;
content: '';
display: block;
height: 100%;
position: absolute;
transition: all .2s ease-out;
width: 100%;
}
.navbar .menu-icon .navicon:before {
top: 5px;
}
.navbar .menu-icon .navicon:after {
top: -5px;
}
/* Add the icon and menu animations when the checkbox is clicked */
.navbar .menu-btn {
display: none;
}
.navbar .menu-btn:checked ~ .navbar-collapse {
display: block;
max-height: 100vh;
}
.navbar .menu-btn:checked ~ .menu-icon .navicon {
background: transparent;
}
.navbar .menu-btn:checked ~ .menu-icon .navicon:before {
transform: rotate(-45deg);
}
.navbar .menu-btn:checked ~ .menu-icon .navicon:after {
transform: rotate(45deg);
}
.navbar .menu-btn:checked ~ .menu-icon:not(.steps) .navicon:before,
.navbar .menu-btn:checked ~ .menu-icon:not(.steps) .navicon:after {
top: 0;
}