Chill-project/chill-bundles
6
0
Fork 0
mirror of https://gitlab.com/Chill-Projet/chill-bundles.git synced 2025-08-21 15:13:50 +00:00
Code Issues Actions Projects Releases Wiki Activity

arrange collapsed header menu

Browse Source
This commit is contained in:
Mathieu Jaumotte
2021-07-03 20:37:03 +02:00
parent e77c886e3f
commit c36aa22ab2
5 changed files with 67 additions and 25 deletions
Download Patch File Download Diff File Expand all files Collapse all files

80
src/Bundle/ChillMainBundle/Resources/public/modules/bootstrap/_custom.scss
View File

@@ -109,9 +109,6 @@ body {
}
header {
a {
text-decoration: none;
}
nav.navbar {
padding: 0;
a.navbar-brand img {
@@ -121,22 +118,6 @@ header {
div.navbar-collapse {
float: right;
}
@media (max-width: 767px) {
& {
position: relative;
}
button.navbar-toggler {
float: right;
}
div.navbar-collapse {
float: none;
position: absolute;
top: 4em;
right: 0;
z-index: 2;
padding: 1em;
}
}
ul.navbar-nav {
display: flex;
align-items: stretch;
@@ -165,6 +146,7 @@ header {
border-radius: 0;
a.dropdown-item {
width: 120%;
border: 0;
border-bottom: 1px solid $gray-200;
font-size: smaller;
i {
@@ -173,6 +155,66 @@ header {
color: $gray-500 !important; }
}
}
// fullwidth menu when navbar is collapsed
@media (max-width: 767px) {
& {
position: relative;
}
button.navbar-toggler {
float: right;
}
div.navbar-collapse {
float: none;
position: absolute;
top: 4em;
left: 0;
right: 0;
z-index: 2;
padding: 1em;
border-top: 1px solid shade-color($primary, 25%);
ul.navbar-nav {
display: grid;
grid-template-areas:
"sear sear sear"
"sect user lang";
li.nav-item {
flex-direction: column;
border: 0;
a.nav-link {}
&.navigation-search {
grid-area: sear;
margin-bottom: 1em;
form {
width: 100%;
input.form-control {}
button.btn {}
}
}
&.nav-section { grid-area: sect; }
&.nav-user { grid-area: user; }
&.nav-language { grid-area: lang; }
}
li.dropdown {
&, & > * {
background-color: transparent !important;
}
a.dropdown-toggle {}
div.dropdown-menu {
display: block;
border: 0;
a.dropdown-item {
width: 100%;
border: 0;
border-top: 1px dotted $gray-200;
background-color: transparent !important;
}
}
}
}
}
}
}
}