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

more respnsive: header hamburger done, started base

Browse Source
This commit is contained in:
Bachir Soussi Chiadmi
2021-03-29 22:28:24 +02:00
parent d170979b42
commit 2f1636dfd4
13 changed files with 651 additions and 48 deletions
Download Patch File Download Diff File Expand all files Collapse all files

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

@@ -151,21 +151,28 @@ header[role="banner"]{
display:block;
}
// default position (hidden, translated right)
$w: 20em;
.header-block-wrapper{
z-index: 10;
z-index: 100;
position: absolute;
top: $min-height;
$w: 300px;
width: $w;
right: - $w - 150px;
right:0;
// right: - $w - 150px;
box-sizing: border-box;
// transform: translateX(150px);
transition: right 0.5s ease-in-out;
// transform: translateX(450px);
overflow: hidden;
width:0.1px;
box-shadow: 0 0 0 #fff;
padding:1em 0;
margin-top: 0.7em;
transition: all 0.5s ease-in-out;
>*.block, >div#user-tools{
display: block;
padding:0 0 0.5em 0!important;
margin:0 0 0.5em 0!important;
width: $w - 2em;
padding:0 0 1em 0!important;
margin:0 0 1em 0!important;
text-align: right;
border-left: none!important;
border-right: none!important;
@@ -173,11 +180,20 @@ header[role="banner"]{
border-bottom: 1px solid #ccc!important;
}
}
#user-flags{
width: $w - 2em;
padding:1em 0 0 0!important;
margin:1em 0 0 0!important;
border-top: 1px solid #ccc!important;
}
}
// input checked, wrapper visible
input#header-block-right-toggle:checked ~ div.header-block-wrapper {
// transform: translateX(1px);
right:1px;
// right:1px;
width: $w;
padding:1em 1em;
box-shadow: -2px 2px 4px #ccc;
}
}
}

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

@@ -11,9 +11,9 @@ $mdi-font-path: './mdi/fonts/';
@import './base/fonts';
// @import './base/responsive';
html{
// background-color: red;
}
// .dialog-off-canvas-main-canvas{
// background-color: red;
// }
@mixin iconMDI($name) {
&::before {
@@ -54,6 +54,10 @@ header[role="banner"]{
font-weight: 400;
}
// @include col-mediaquery-max(3){
// overflow-x: hidden;
// }
#block-sitebranding{
h1{
margin:0;
@@ -77,9 +81,11 @@ header[role="banner"]{
@include col-mediaquery-max(3){
.header-block.header-right{
.header-block-wrapper{
padding:1em 1em;
box-shadow: -2px 2px 4px #ccc;
background-color: #fff;
&, #user-flags ul{
// background-color: #222;
// color: #fff;
background-color: #fff;
}
}
}
}
@@ -496,13 +502,15 @@ header[role="banner"]{
align-self: flex-end;
}
@include col-mediaquery-max(3){
flex-direction: column-reverse;
flex-direction: column;
justify-content:center;
#block-pagetitle{
width: max-content;
// width: max-content;
width:100%;
}
#block-materiosapisearchblock{
box-sizing: border-box;
width:100%;
}
}
@@ -513,8 +521,9 @@ header[role="banner"]{
@include col-mediaquery-max(3){
body.path-frontpage &, body.path-home & {
display: none;
display: none;
}
padding: 1em 0 0;
}
h2{
margin:0;
@@ -574,13 +583,21 @@ header[role="banner"]{
width:20px; height:20px;
margin:0;
// border-radius: 7px;
background-image: url('../img/search.png');
background-image: url('../img/search.svg');
background-position: center;
background-repeat: no-repeat;
background-size: contain;
background-color: transparent
}
}
@include col-mediaquery-max(3){
body:not(.path-base) &{
display: none;
}
padding: 0 1em;
background-color: $color-base;
}
}
}
@@ -1202,6 +1219,38 @@ article.node--type-frontpage{
vertical-align: top;
}
}
@include col-mediaquery-max(3){
&>ul{
display: flex;
flex-flow: row wrap;
justify-content: space-around;
width:100%;
>li{
flex: 0 1 48%;
margin:0 0 0.5em 0;
>article{
width:100%;
height:auto;
>section.images{
height: auto;
>figure{
position: relative;
&:not(:first-child){
display:none;
}
img:not(.blank){
width:100%;
height:auto;
}
img.blank{
top:0; bottom:0; left:0; right:0;
}
}
}
}
}
}
}
}
article.card{