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

centered layout with columns breakpoints

Browse Source
This commit is contained in:
Bachir Soussi Chiadmi
2019-06-17 16:50:16 +02:00
parent 88dc7b7ea4
commit 625f6eb84b
10 changed files with 332 additions and 16 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

@ -8,10 +8,36 @@ body, html{
margin:0;
padding:0;
}
body{
overflow-x:hidden;
}
div.dialog-off-canvas-main-canvas{
width: 100vw;
}
body.toolbar-horizontal.toolbar-themes.toolbar-no-tabs{
padding-top: 24px!important;
}
%grided-width{
margin:0 auto;
$m: $column_goutiere;
$colw: $column_width;
$bp: $colw + $m;
@while $bp < 4096px {
$upbp: $bp + $colw + $m;
@media only screen and (min-width: $bp + 1px) and (max-width: $upbp) {
width:$bp - $m;
}
$bp: $upbp;
}
// outline:1px blue solid;
// &>*{
// outline:1px red solid;
// }
}
// _ _ _
// | || |___ __ _ __| |___ _ _
@ -19,14 +45,17 @@ body.toolbar-horizontal.toolbar-themes.toolbar-no-tabs{
// |_||_\___\__,_\__,_\___|_|
header[role="banner"]{
background-color: #fff;
overflow: visible;
position: fixed;
z-index: 20;
width:100vw;
// outline: 1px solid blue;
height: $header_height;
.wrapper{
@extend %grided-width;
// box-sizing:border-box;
.header-block{
min-height: 15px;
font-size: 0;
@ -50,5 +79,8 @@ header[role="banner"]{
// |_| |_\__,_|_|_||_|
main[role="main"]{
@extend %grided-width;
padding-top: $header_height+8px;
}

3
web/themes/custom/materiotheme/assets/styles/base/_variables.scss
View File

@ -1,3 +1,6 @@
$base_font_size:16px;
$header_height: 60px;
$column_width: 210px;
$column_goutiere: 15px;

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

@ -118,6 +118,7 @@ header[role="banner"]{
}
#block-languageswitcher{
text-align: right;
h2{
margin: 0.1em 0 0 0;
font-size: 0.756em;
@ -132,7 +133,8 @@ header[role="banner"]{
&>ul.links{
// background-color: #fff;
overflow: hidden;
width:5em;
width:3.5em;
// display: inline-block;
height:1px;
padding:0.01em 0;
margin:0;
@ -152,6 +154,7 @@ header[role="banner"]{
li{
list-style: none;
padding:0;
display: inline-block;
&.is-active{
display:none;
}
@ -206,6 +209,7 @@ aside.messages{
text-indent: 50px;
overflow: hidden;
width:20px; height:20px;
margin:0;
// border-radius: 7px;
background-image: url('../img/search.png');
background-position: center;
@ -238,13 +242,21 @@ article.node--type-frontpage{
}
}
.field--name-computed-materials-reference,
// .field--name-computed-materials-reference,
.field--name-computed-showrooms-reference,
.field--name-computed-articles-reference{
// outline: 1px green solid;
margin:0; padding:0;
width: calc(100% + #{$column_goutiere});
.field__item{
display: inline-block;
vertical-align: top;
max-width:250px;
width:210px;
margin:0 $column_goutiere $column_goutiere 0; padding:0;
p{
margin:0;
}
}
}
}
@ -266,23 +278,28 @@ article.node--type-frontpage{
.cards-list{
position: relative;
.search-info{
margin:0 0 1em 0;
}
&>ul{
// outline: 1px green solid;
margin:0; padding:0;
width: calc(100% + #{$column_goutiere});
&>li{
list-style: none;
margin:0 1em 1em 0; padding:0;
margin:0 $column_goutiere $column_goutiere 0; padding:0;
display: inline-block;
vertical-align: top;
}
}
}
.card{
article.card{
position: relative;
width:210px; height:295px;
width:$column_width; height:295px;
box-shadow: 0 0 5px rgba(0,0,0,0.2);
// focused
// box-shadow: 0 0 7px rgba(0,0,0,0.9);