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

40
web/themes/custom/materiotheme/assets/styles/base/_layout.scss
View File

@ -57,7 +57,7 @@ body.toolbar-horizontal.toolbar-themes.toolbar-no-tabs{
}
}
@mixin col-mediaquery-min($i) {
$bp: ($column_width + $column_goutiere) * $i;
$bp: ($column_width + $column_goutiere) * $i + 1px;
@media (min-width: $bp) {
@content;
}
@ -113,7 +113,7 @@ header[role="banner"]{
// z-index: 20;
width:100vw;
// height: $header_height;
.wrapper{
>.wrapper{
@extend %grided-width;
// box-sizing:border-box;
background-color: #fff;
@ -127,14 +127,40 @@ header[role="banner"]{
.header-block{
min-height: 15px;
font-size: 0;
&>*{
font-size: $base_font_size;
}
&.header-right{
text-align: right;
}
&>*{
display: inline-block;
vertical-align:top;
font-size: $base_font_size;
text-align: left;
.header-block-wrapper{
&>*{
display: inline-block;
vertical-align:top;
text-align: left;
}
}
input#header-block-right-toggle{display: none;}
label[for="header-block-right-toggle"]{display:none;}
@include col-mediaquery-max(3){
&.header-right{
label[for="header-block-right-toggle"]{
display:block;
}
.header-block-wrapper{
position: absolute;
right:0;
background-color: green;
transform: translateX(150px);
transition: transform 0.5s ease-in-out;
>*{
display: block;
}
}
input#header-block-right-toggle:checked ~ div.header-block-wrapper {
transform: translateX(1px);
}
}
}
}
}