materio-d8/web/themes/custom/materiotheme/assets/styles/base/_layout.scss

body, html{
  position: relative;
  width: 100%;
  height:100%;
  font-family: sans-serif;
  font-style: normal;
  margin:0;
  padding:0;
}
body{
  overflow-x:hidden;
}

div.dialog-off-canvas-main-canvas{
  width: 100vw;
  height:100vh;
  display: flex;
  flex-direction: column;
}

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 + 1px;
  @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) * 2;
  $bp: $colw + $m;
  $i: 1;
  @while  $bp < 4096px {
    $upbp: $bp + $colw + $m;
    @if $i == 1 {
      @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;
  // &>*{
  //   outline:1px red solid;
  // }
}


//  _  _             _
// | || |___ __ _ __| |___ _ _
// | __ / -_) _` / _` / -_) '_|
// |_||_\___\__,_\__,_\___|_|

header[role="banner"]{
  flex:0 0 auto;
  background-color: #fff;
  // overflow: visible;
  // position: fixed;
  // z-index: 20;
  width:100vw;
  // height: $header_height;
  >.wrapper{
    @extend %grided-width;
    // box-sizing:border-box;
    background-color: #fff;

    &:after{
      content:"";
      clear:both;
      display: block;
    }

    .header-block{
      $min-height:33px;
      min-height: $min-height;
      font-size: 0;
      &>*{
        font-size: $base_font_size;
      }
      &.header-right{
        text-align: right;
      }
      .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-left{ width: 75%; }
        &.header-right{
          width: 23%;
          label[for="header-block-right-toggle"]{
            display:block;
          }
          // default position (hidden, translated right)
          $w: 20em;
          .header-block-wrapper{
            z-index: 100;
            position: absolute;
            top: $min-height;
            right:0;
            // right: - $w - 150px;
            box-sizing: border-box;
            // 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;
              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;
              &:not(:last-child){
                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;
            width: $w;
            padding:1em 1em;
            box-shadow: -2px 2px 4px #ccc;
          }
        }
      }
    }
  }
}



//  __  __      _
// |  \/  |__ _(_)_ _
// | |\/| / _` | | ' \
// |_|  |_\__,_|_|_||_|

main[role="main"]{
  flex:1 1 auto;
  overflow-y: auto;
  overflow-x: hidden;
  >.scroller{
    width:100vw;
    >.wrapper{
      @extend %grided-width;
      display: flex;
      flex-direction: row-reverse;
      @include col-mediaquery-max(2){
        display: block;
      }
      #content-left{
        flex-basis: $column_width;
        flex-shrink: 0;
        // width:$column_width*2+$column_goutiere;
        >*{
          width:100%;
          box-sizing: border-box;
          padding:0.5em $column_goutiere;
        }
        @include col-mediaquery-max(2){
          padding-right: $column_goutiere;
        }
      }
      #content-center{
        flex-basis: 110%;
      }
    }
  }
}


//  ___         _
// | __|__  ___| |_ ___ _ _
// | _/ _ \/ _ \  _/ -_) '_|
// |_|\___/\___/\__\___|_|
footer[role="contentinfo"]{
  >.wrapper{
    @extend %grided-width;
  }
}