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

finished thematique layout, added mixin for columns media-query

Browse Source
This commit is contained in:
Bachir Soussi Chiadmi
2020-12-26 12:42:37 +01:00
parent 144ab7db26
commit 8527be2da9
3 changed files with 116 additions and 31 deletions
Download Patch File Download Diff File Expand all files Collapse all files

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

@ -23,19 +23,74 @@ body.toolbar-horizontal.toolbar-themes.toolbar-no-tabs{
padding-top: 24px!important;
}
// define breakpoints media query for each card column number
// $i: 1;
// $colw: $column_width;
// $m: $column_goutiere;
// $bp: $colw + $m;
// @while $bp < 4096px {
// $upbp: $bp + $colw + $m;
// // @media only screen and (min-width: $bp + 1px) and (max-width: $upbp) {
// // width:$bp;
// // }
// breakpoint-#{$i}: ("bp":$bp, "upbp":$upbp);
// // @mixin col_breakpoint_#{$i}() {
// // @media (min-width: $bp + 1px) and (max-width: $upbp) {
// // @content;
// // }
// // }
// $bp: $upbp;
// $i: $i + 1;
// }
// @mixin col-mediaquery($i) {
// @media (min-width: map.get(#{$breakpoint-$i}, "bp") + 1px) and (max-width: map.get(#{$breakpoint-$i}, "upbp")) {
// @content;
// }
// }
@mixin col-mediaquery-min-max($i) {
$bp: ($column_width + $column_goutiere) * $i + 1px;
$upbp: ($column_width + $column_goutiere) * ($i + 1);
@media (min-width: $bp) and (max-width: $upbp) {
@content;
}
}
@mixin col-mediaquery-min($i) {
$bp: ($column_width + $column_goutiere) * $i;
@media (min-width: $bp) {
@content;
}
}
@mixin col-mediaquery-max($i) {
$bp: ($column_width + $column_goutiere) * $i;
@media (max-width: $bp) {
@content;
}
}
// build break points for each multiple of cards row
// cards will always be centered, using all available space
%grided-width{
margin:0 auto;
$m: $column_goutiere;
$colw: $column_width;
$bp: $colw + $m;
$bp: ($colw + $m) * 2;
$i: 2;
@while $bp < 4096px {
$upbp: $bp + $colw + $m;
@media only screen and (min-width: $bp + 1px) and (max-width: $upbp) {
width:$bp;
@if $i == 2 {
@media only screen and (max-width: $bp) {
width:$bp;
}
}@else{
@media only screen and (min-width: $bp + 1px) and (max-width: $upbp) {
width:$bp;
}
}
$bp: $upbp;
$i: $i + 1;
}
// outline:1px blue solid;
// &>*{