sarah garcin 1313e1f0e2 debug css
2015-05-06 15:04:39 +02:00

187 lines
4.9 KiB
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;}