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

44
sites/all/themes/gui/materiobasetheme/scss/gui.scss
View File

@@ -67,9 +67,9 @@ $red:#E60000;
// ===== SHORTCUTS =======================================================================================================
// padding
@mixin p($p){ padding:$arguments; }
@mixin p($v, $h){ padding:$arguments; }
@mixin p($t, $l, $b, $l){ padding:$arguments; }
// @mixin p($p){ padding:$arguments; }
// @mixin p($v, $h){ padding:$arguments; }
// @mixin p($t, $l, $b, $l){ padding:$arguments; }
@mixin pt($p){ padding-top:$p; }
@mixin pr($p){ padding-right:$p; }
@@ -77,9 +77,9 @@ $red:#E60000;
@mixin pl($p){ padding-left:$p; }
// margin
@mixin m($p){ margin:$arguments; }
@mixin m($v, $h){ margin:$arguments; }
@mixin m($t, $l, $b, $l){ margin:$arguments; }
// @mixin m($p){ margin:$arguments; }
// @mixin m($v, $h){ margin:$arguments; }
// @mixin m($t, $l, $b, $l){ margin:$arguments; }
@mixin mt($m){ margin-top:$m; }
@mixin mr($m){ margin-right:$m; }
@@ -89,11 +89,11 @@ $red:#E60000;
@mixin no-margin(){ margin:0; padding:0; }
// border
@mixin b($b){ border: $b; }
@mixin b($size, $color){ border: $size solid $color; }
// @mixin b($b){ border: $b; }
// @mixin b($size, $color){ border: $size solid $color; }
@mixin bt($b){ border-top: $b;}
@mixin bt($size, $color){border-top: $size solid $color;}
//@mixin bt($size, $color){border-top: $size solid $color;}
@mixin br($b){ border-right: $b;}
@mixin br($size, $color){border-right: $size solid $color;}
@@ -179,13 +179,12 @@ $red:#E60000;
// =
// =
// ===== DISPLAY UTILS ===================================================================================================
// Inline blocks
@mixin inlineblock($top)
@mixin inlineblock()
{
display:moz-inline-stack;
display:inline-block;
vertical-align:$align;
vertical-align:top;
zoom:1;
*display:inline;
// .ie7 &, .ie8 &{display:block;float:left;}
@@ -401,26 +400,33 @@ $g:0;
// | 'linear , ease-out , linear , ease-out'
// | );
//
@mixin transition($property: all)
// $property: all;
// $duration: 1s;
// $transitiondelay:0s;
// $timingfunction: "ease-out";
@mixin transition($property)
{
-webkit-transition: $property;
-moz-transition: $property;
-o-transition: $property;
transition: $property;
}
@mixin transition($property, $duration)
$arguments:("all", 0s);
@mixin transition($arguments)
{
-webkit-transition: $arguments;
-moz-transition: $arguments;
-o-transition: $arguments;
transition: $arguments;
}
@mixin transition($property, $duration, $transitiondelay, $timingfunction:ease-out)
//$parameters:($property, $duration, $transitiondelay, "ease-out");
$parameters:("all", 0s, "ease-out");
@mixin transition($parameters)
{
-webkit-transition: $arguments;
-moz-transition: $arguments;
-o-transition: $arguments;
transition: $arguments;
-webkit-transition: $parameters;
-moz-transition: $parameters;
-o-transition: $parameters;
transition: $parameters;
}
@mixin transitions($property: all, $duration:0s, $transitiondelay:0s, $timingfunction:ease-out)
{

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; }

2
sites/all/themes/gui/materiobasetheme/scss/misc.scss
View File

@@ -38,7 +38,7 @@ div.messages { @include messages();}
.messages-label{display:none;}
#better-messages-wrapper{
background-color: rgba(255,255,255,0.7); @include p(10px); @include rounded(5px); @include drop-shadow(0, 0, 6px, 0.4);
background-color: rgba(255,255,255,0.7); padding :10px; @include rounded(5px); @include drop-shadow(0, 0, 6px, 0.4);
#better-messages-default{
div.messages{

1209
sites/all/themes/gui/materiobasetheme/scss/styles.scss
View File

File diff suppressed because it is too large Load Diff