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

sites/all/themes/gui/materiobasetheme/css/gui.css

@@ -0,0 +1,3 @@
+/*
+ * www.g-u-i.net
+ */

sites/all/themes/gui/materiobasetheme/package.json

@@ -8,7 +8,7 @@
   },
   "devDependencies": {
     "autoprefixer-core": "^5.1.5",
-    "grunt-contrib-compass": "v0.9.0",
+    "grunt-contrib-compass": "^0.9.0",
     "grunt-contrib-sass": "v0.7.3",
     "grunt-contrib-watch": "v0.6.1",
     "grunt-postcss": "^0.3.0",

sites/all/themes/gui/materiobasetheme/scss/gui.scss

@@ -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)
 {

sites/all/themes/gui/materiobasetheme/scss/layout.scss

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

sites/all/themes/gui/materiobasetheme/scss/misc.scss

@@ -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{