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

less to sass - need to integrate transition, button and media queries

Browse Source
This commit is contained in:
sarah garcin
2015-04-29 22:47:56 +02:00
parent 7763d08111
commit 0ba300fe22
57 changed files with 16068 additions and 772 deletions
Download Patch File Download Diff File Expand all files Collapse all files

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

@@ -1,24 +1,24 @@
/** RESPONSIVE break points */
@max-480 : ~"screen and (max-width: 479px)";
@min-480 : ~"screen and (min-width: 480px)";
// @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)";
// @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)";
// @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)";
// @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)";
// @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)";
// @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
html, body{
// position:relative;
@@ -30,53 +30,56 @@ body{
overflow-y:scroll; top:0;
}
@rootminwidth : 320px;
$rootminwidth : 320px;
/** NIVEAU 0 */
#root{
min-width:@rootminwidth;
min-width:$rootminwidth;
.ie8 &{min-width:1024px;}
}
/** NIVEAU 1 */
#container{ margin:0 auto; position:relative; .transition(padding-top, 0.5s, ease-out);}
#container{
margin:0 auto; position:relative;
@include transition(padding-top 0.5s ease-out); // change this
}
/** NIVEAU 2 */
.padded(){ @p:2%; width:100%-2*@p; padding-left:@p; padding-right:@p; }
@mixin padded(){ $p:2%; width:100%-2*$p; padding-left:$p; padding-right:$p; }
@header-z-index:1000;
$header-z-index:1000;
#header{
@media @min-768{
position:fixed; top:0; margin:0 auto; .bgc(#fff); min-width:@rootminwidth*0.97;
}
z-index:@header-z-index;
.padded;
.editmenu-enabled &{ .mt(30px); }
.admin-menu &{ .mt(35px); }
// @media @min-768{
// 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 @min-768{
html.no-touch &{
position:fixed; top:0; margin:0 auto; min-width:@rootminwidth*0.97;
.mt(60px);
}
html.no-touch .editmenu-enabled &{ .mt(80px); }
html.no-touch .admin-menu &{ .mt(85px); }
}
@media @max-768{
>.region{.pt(5px); .pb(5px);}
}
// @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
z-index:999;
.bgc(#fff);
.padded;
@include bgc(#fff);
@include padded;
}
#main{.padded; overflow-x:hidden;}
#main{@include padded; overflow-x:hidden;}
#footer{.padded;}
#footer{@include padded;}
/** NIVEAU 3 */
@@ -87,8 +90,7 @@ body{
// #container, #header-blocks, #center{.transition(width, 0.5s, ease-out); }
.footer-block .region, .header-block{ .inlineblock();}
// .footer-block .region, .header-block{ @include inlineblock();} change this
/** NIVEAU 4 */
#center{ padding:5px; }