bachir/materio-d9
1
0
Fork 0
Code Issues Pull Requests Projects Releases Wiki Activity

started full header-right responsive hamburger menu

Browse Source
This commit is contained in:
Bachir Soussi Chiadmi
2021-03-26 16:48:47 +01:00
parent f6130faa7c
commit 1733ad128a
5 changed files with 160 additions and 131 deletions
Download Patch File Download Diff File Expand all files Collapse all files

104
web/themes/custom/materiotheme/assets/styles/main.scss
View File

@@ -63,9 +63,9 @@ header[role="banner"]{
font-size: 0.882em;
display: block;
white-space: nowrap;
@include col-mediaquery-max(2){
display:none;
}
// @include col-mediaquery-max(2){
// display:none;
// }
}
}
@@ -76,9 +76,9 @@ header[role="banner"]{
li{
padding:0;
}
@include col-mediaquery-max(4){
display:none;
}
// @include col-mediaquery-max(4){
// display:none;
// }
}
#block-userlogin{
@@ -95,27 +95,30 @@ header[role="banner"]{
background-color: #fff;
overflow: hidden;
width:11em;
max-height:0px;
padding:0.01em 1em;
// margin:0 0 0 -1em;
box-sizing:content-box;
transition: all 0.4s ease-in-out;
// outline: 1px solid blue;
transition-delay: 2s;
position: absolute;
right:0;
top:1.7em;
box-sizing: content-box;
z-index:100;
}
@include hover{
&>section{
transition-delay: 0s;
max-height:20em;
padding:1em 1em;
box-shadow: 0 0 10px #ccc;
}
}
@include col-mediaquery-min(3){
max-height:0px;
padding:0.01em 1em;
transition-delay: 2s;
position: absolute;
@include hover{
&>section{
transition-delay: 0s;
max-height:20em;
padding:1em 1em;
box-shadow: 0 0 10px #ccc;
}
}
}
.form-item{
margin:0;
position: relative;
@@ -185,9 +188,9 @@ header[role="banner"]{
@extend %header-fs;
cursor: pointer;
span{
@include col-mediaquery-max(5){
display:none;
}
// @include col-mediaquery-max(5){
// display:none;
// }
}
}
.mdi-logout::before {
@@ -209,9 +212,9 @@ header[role="banner"]{
cursor: pointer;
&:before{padding-right: 0.2em;}
span{
@include col-mediaquery-max(5){
display:none;
}
// @include col-mediaquery-max(5){
// display:none;
// }
}
}
ul{
@@ -310,10 +313,12 @@ header[role="banner"]{
margin-right: 1em;
padding-left: 1em;
border-left: 1px solid #000;
#block-header-menu,
label[for="block-header-menu"]{
#block-header-menu{
display:none;
}
// label[for="block-header-menu"]{
// display:none;
// }
ul.menu{
margin:0;
li{
@@ -334,30 +339,35 @@ header[role="banner"]{
}
// }
@include col-mediaquery-max(3){
position: relative;
label[for="block-header-menu"]{
display:block;
}
/* Toggle Show/Hide Menu */
// https://code-boxx.com/simple-responsive-pure-css-hamburger-menu/#sec-download
ul.menu { display: none; }
input:checked ~ ul.menu { display: block; }
ul.menu{
position: absolute;
width: 110px;
height: auto;
top: 18.9px;
right: 0;
background-color: white;
padding: 0.2em 0.5em;
margin-right: -0.5em;
z-index: 90;
text-align: right;
// position: relative;
//
// label[for="block-header-menu"]{
// display:block;
// }
// /* Toggle Show/Hide Menu */
// // https://code-boxx.com/simple-responsive-pure-css-hamburger-menu/#sec-download
// ul.menu { display: none; }
// input:checked ~ ul.menu { display: block; }
// ul.menu{
// position: absolute;
// width: 110px;
// height: auto;
// top: 18.9px;
// right: 0;
// background-color: white;
// padding: 0.2em 0.5em;
// margin-right: -0.5em;
// z-index: 90;
// text-align: right;
// li{
// display: block;
// }
// }
ul.menu{
li{
display: block;
}
}
}
}
}