bachir/materio-base-legacy
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

refactoring - transition + media queries - bug with icon and princing grid

Browse Source
This commit is contained in:
sarah garcin
2015-04-30 16:36:41 +02:00
parent 0ba300fe22
commit 23c085213e
10 changed files with 1934 additions and 1132 deletions
Download Patch File Download Diff File Expand all files Collapse all files

87
sites/all/themes/gui/materiobasetheme/scss/layout.scss
View File

@@ -20,6 +20,53 @@
// @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;
}
html, body{
// position:relative;
// overflow:hidden;
@@ -30,6 +77,18 @@ body{
overflow-y:scroll; top:0;
}
h1, h2, h3, h4, h5, h6{
font-family: inherit;
}
h1{
font-weight: bold;
}
figure {
margin: 0;
}
$rootminwidth : 320px;
/** NIVEAU 0 */
@@ -50,9 +109,9 @@ $rootminwidth : 320px;
$header-z-index:1000;
#header{
// @media @min-768{
// position:fixed; top:0; margin:0 auto; @include bgc(#fff); min-width:@rootminwidth*0.97;
// } //change this
@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); }
@@ -60,17 +119,17 @@ $header-z-index:1000;
}
#utilities{
// @media @min-768{
// 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 @max-768{
// >.region{@include pt(5px); @include pb(5px);}
// } change this
@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 #{$medium-only}{
>.region{@include pt(5px); @include pb(5px);}
} //change this
z-index:999;
@include bgc(#fff);
@include padded;