materio-base-d7/sites/all/themes/gui/materiobasetheme/scss/layout.scss

/** RESPONSIVE break points */

// @max-480  : ~"screen and (max-width: 479px)";
// @min-480  : ~"screen and (min-width: 480px)";

// @480-768  : ~"screen and (min-width: 480px) and (max-width: 767px)";

// @max-768  : ~"screen and (max-width: 767px)";
// @min-768  : ~"screen and (min-width: 768px)";

// @768-980  : ~"screen and (min-width: 768px) and (max-width: 979px)";

// @max-980  : ~"screen and (max-width: 979px)";
// @min-980  : ~"screen and (min-width: 980px)";

// @980-1200  : ~"screen and (min-width: 980px) and (max-width: 1199px)";

// @max-1200 : ~"screen and (max-width: 1199px)";
// @min-1200 : ~"screen and (min-width: 1200px)";
// change this

// Here we define the breakpoints which will become the upper border for each media size.
// The function em-calc() calculates the em-value from a px-value.
$small-breakpoint:  em-calc(480)  !default;
$medium-breakpoint: em-calc(768) !default;
$large-breakpoint:  em-calc(980) !default;
$xlarge-breakpoint: em-calc(1200) !default;

$small-range:   (0, $small-breakpoint) !default; /* 0, 480px */
$medium-range:  ($small-breakpoint  + em-calc(1), $medium-breakpoint) !default; /* 481px, 768px */
$large-range:   ($medium-breakpoint + em-calc(1), $large-breakpoint)  !default; /* 769px, 980px */
$xlarge-range:  ($large-breakpoint  + em-calc(1), $xlarge-breakpoint) !default; /* 981px, 1200px */
$xxlarge-range: ($xlarge-breakpoint + em-calc(1), em-calc(99999999)) !default; /* 1201px, ... */

// Media Queries
$screen: "only screen" !default;

$landscape: "#{$screen} and (orientation: landscape)" !default;
$portrait: "#{$screen} and (orientation: portrait)" !default;

$small-up: $screen !default;
$small-only: "#{$screen} and (max-width: #{upper-bound($small-range)})" !default;

$medium-up: "#{$screen} and (min-width:#{lower-bound($medium-range)})" !default;
$medium-only: "#{$screen} and (min-width:#{lower-bound($medium-range)}) and (max-width:#{upper-bound($medium-range)})" !default;

$large-up: "#{$screen} and (min-width:#{lower-bound($large-range)})" !default;
$large-only: "#{$screen} and (min-width:#{lower-bound($large-range)}) and (max-width:#{upper-bound($large-range)})" !default;

$xlarge-up: "#{$screen} and (min-width:#{lower-bound($xlarge-range)})" !default;
$xlarge-only: "#{$screen} and (min-width:#{lower-bound($xlarge-range)}) and (max-width:#{upper-bound($xlarge-range)})" !default;

$xxlarge-up: "#{$screen} and (min-width:#{lower-bound($xxlarge-range)})" !default;
$xxlarge-only: "#{$screen} and (min-width:#{lower-bound($xxlarge-range)}) and (max-width:#{upper-bound($xxlarge-range)})" !default;

$retina: (
  "#{$screen} and (-webkit-min-device-pixel-ratio: 2)",
  "#{$screen} and (min--moz-device-pixel-ratio: 2)",
  "#{$screen} and (-o-min-device-pixel-ratio: 2/1)",
  "#{$screen} and (min-device-pixel-ratio: 2)",
  "#{$screen} and (min-resolution: 192dpi)",
  "#{$screen} and (min-resolution: 2dppx)"
);

*{
 box-sizing: content-box;
 &:before, &:after{
   box-sizing: content-box;
 }
}

html, body{
  // position:relative;
  // overflow:hidden;
  // width:100%;
  // height:100%;
}
body{
  overflow-y:scroll; top:0;
}

h1, h2, h3, h4, h5, h6{
  font-family: inherit;
}

h1{
  font-weight: bold;
}

figure {
  margin: 0;
}

input[type="checkbox"] + label{
  margin:0;
}

p{
  font-family: inherit;
  font-weight: inherit;
  font-size: inherit;
  line-height: inherit;
  margin-bottom: inherit;
}

a{
  font-size: inherit;
}

.column, .columns {
  padding: inherit;
  float: inherit;
}

$rootminwidth : 320px;

/** NIVEAU 0 */
#root{
  min-width:$rootminwidth;

  .ie8 &{min-width:1024px;}
}

/** NIVEAU 1 */
#container{ 
  margin:0 auto; position:relative; 
  @include transition(padding-top 0.5s ease-out); // change this
}

/** NIVEAU 2 */
@mixin padded(){ $p:2%; width:100%-2*$p; padding-left:$p; padding-right:$p; }

$header-z-index:1000;
#header{
  @media #{$medium-up}{
    position:fixed; top:0; margin:0 auto; @include bgc(#fff); min-width:$rootminwidth*0.97;
  } //change this
  z-index:$header-z-index;
  @include padded;
  .editmenu-enabled &{ @include mt(30px); }
  .admin-menu &{ @include mt(35px); }
}

#utilities{
  @media #{$medium-up}{
    html.no-touch &{
      position:fixed; top:0; margin:0 auto; min-width:$rootminwidth*0.97;
      @include mt(60px);
    }
    html.no-touch .editmenu-enabled &{ @include mt(80px); }
    html.no-touch .admin-menu &{ @include mt(85px); }
  }
  @media #{$small-only}{
    >.region{@include pt(5px); @include pb(5px);}
  } //change this
  z-index:999;
  @include bgc(#fff);
  @include padded;

}

#main{@include padded; overflow-x:hidden;}

#footer{@include padded;}

/** NIVEAU 3 */

.js #content-top{}

// .js #content{ overflow-y:hidden; }


// #container, #header-blocks, #center{.transition(width, 0.5s, ease-out); }

// .footer-block .region, .header-block{ @include inlineblock();} change this

/** NIVEAU 4 */
#center{ padding:5px; }

/** Z-INDEX */
#block-feedback-form{z-index:1001;}
#admin-menu{z-index:1002;}
#admin-toolbar{z-index:1003;}