fixed gruntfile, fixed modal buttons, fixed .gitignore .sass-cache folder

.gitignore

@@ -18,3 +18,5 @@ _base_d7.tmproj
 *.sublime-project*
 
 node_modules
+
+.sass-cache

sites/all/themes/gui/materiobasetheme/Gruntfile.js

@@ -6,7 +6,7 @@ module.exports = function (grunt) {
         tasks: ['compass:dev']
       },
       postcss: {
-        files: ['css/styles.css', 'css/wysiwyg.css'],
+        files: ['scss/styles.scss', 'scss/wysiwyg.scss'],
         tasks: ['postcss']
       },
       //    options: {
@@ -18,6 +18,7 @@ module.exports = function (grunt) {
         options: {
           sassDir: 'scss',
           cssDir: 'css',
+          specify: ['scss/styles.scss', 'scss/wysiwyg.scss'],
           imagesPath: 'img',
           noLineComments: false,
           // outputStyle: 'compressed'

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

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

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

@@ -7,8 +7,8 @@
 // =
 // =
 // =
-// ===== TYPOGRAHIE ====================================================================================================== 
- 
+// ===== TYPOGRAHIE ======================================================================================================
+
 @mixin fs8(){font-size:8px;}
 @mixin fs9(){font-size:9px;}
 @mixin fs10(){font-size:10px;}
@@ -44,10 +44,10 @@
 
 @mixin hyphens($value: auto)
 {
-  -webkit-hyphens:$value;
-     -moz-hyphens:$value;
-      -ms-hyphens:$value;
-       -o-hyphens:$value;
+  // -webkit-hyphens:$value;
+  //    -moz-hyphens:$value;
+  //     -ms-hyphens:$value;
+  //      -o-hyphens:$value;
           hyphens:$value;
 }
 @mixin font-size($value: 1em,$lineheight:1.3em)
@@ -64,7 +64,7 @@ $red:#E60000;
 // =
 // =
 // =
-// ===== SHORTCUTS ======================================================================================================= 
+// ===== SHORTCUTS =======================================================================================================
 
 // padding
 // @mixin p($p){ padding:$arguments; }
@@ -121,7 +121,7 @@ $red:#E60000;
 @mixin bgca($r, $g, $b, $a){
   background-color: rgb($r, $g, $b); // ie8
   background-color: rgba($r, $g, $b, $a);
-  *background-color: rgb($r, $g, $b); // ie7 
+  *background-color: rgb($r, $g, $b); // ie7
 };
 
 // Selection
@@ -138,7 +138,7 @@ $red:#E60000;
     &::-webkit-selection {
     	background:$bgcolor;
     	color:$color;
-    } 
+    }
 }
 
 // Colors
@@ -151,9 +151,9 @@ $red:#E60000;
 // Opacity
 @mixin opacity($opacity: 0.5)
 {
-  -webkit-opacity: $opacity;
-   -khtml-opacity: $opacity;
-     -moz-opacity: $opacity;
+  // -webkit-opacity: $opacity;
+  //  -khtml-opacity: $opacity;
+  //    -moz-opacity: $opacity;
           opacity: $opacity;
 }
 
@@ -166,7 +166,7 @@ $red:#E60000;
   @include size($size, $size);
 }
 
-// center 
+// center
 @mixin center-block() {
   display: block;
   margin-left: auto;
@@ -178,7 +178,7 @@ $red:#E60000;
 // =
 // =
 // =
-// ===== DISPLAY UTILS =================================================================================================== 
+// ===== DISPLAY UTILS ===================================================================================================
 // Inline blocks
 @mixin inlineblock()
 {
@@ -226,7 +226,7 @@ $g:0;
 //
 //    ___ @mixin align-child()
 //   |
-//   |  Permet l’alignement vertical d’un objet par rapport à son premier parent (dans son conteneur direct)@mixin  
+//   |  Permet l’alignement vertical d’un objet par rapport à son premier parent (dans son conteneur direct)@mixin
 //   |
 //   |  1 param   : $vertical-align
 //
@@ -260,7 +260,7 @@ $g:0;
 // =
 // =
 // =
-// ===== CSS3 ============================================================================================================ 
+// ===== CSS3 ============================================================================================================
 
 // Gradients
 @mixin gradient($color: #F5F5F5, $start: #EEE, $stop: #FFF)
@@ -302,7 +302,7 @@ $g:0;
 //   |
 //   |  1 param   : $blur
 //   |  2+ params : $horizontal / $vertical / $blur / $color: #000 / $spread: 0px
-//   
+//
 //    ___ .inset-shadow()
 //   |
 //   |  Ombré intérieur.
@@ -312,73 +312,73 @@ $g:0;
 //
 @mixin box-shadow($blur: 9px)
 {
-  filter: progid:DXImageTransform.Microsoft.dropshadow(OffX=0, OffY=0, Color='#000');
-  -ms-filter: "progid:DXImageTransform.Microsoft.dropshadow(OffX=0, OffY=0, Color='#000')";
-  -webkit-box-shadow: 0 0 $blur #000;
-     -moz-box-shadow: 0 0 $blur #000;
-      -ms-box-shadow: 0 0 $blur #000;
+  // filter: progid:DXImageTransform.Microsoft.dropshadow(OffX=0, OffY=0, Color='#000');
+  // -ms-filter: "progid:DXImageTransform.Microsoft.dropshadow(OffX=0, OffY=0, Color='#000')";
+  // -webkit-box-shadow: 0 0 $blur #000;
+  //    -moz-box-shadow: 0 0 $blur #000;
+  //     -ms-box-shadow: 0 0 $blur #000;
           box-shadow: 0 0 $blur #000;
 }
 @mixin box-shadow($x, $y, $blur: 9px, $color: #000, $spread: 0px)
 {
-  filter: progid:DXImageTransform.Microsoft.dropshadow(OffX=$x, OffY=$y, Color=~'${color}');
-  -ms-filter: "progid:DXImageTransform.Microsoft.dropshadow(OffX=${x}, OffY=${y}, Color='${color}')";
-  -webkit-box-shadow: $x $y $blur $spread $color;
-     -moz-box-shadow: $x $y $blur $spread $color;
-      -ms-box-shadow: $x $y $blur $spread $color;
+  // filter: progid:DXImageTransform.Microsoft.dropshadow(OffX=$x, OffY=$y, Color=~'${color}');
+  // -ms-filter: "progid:DXImageTransform.Microsoft.dropshadow(OffX=${x}, OffY=${y}, Color='${color}')";
+  // -webkit-box-shadow: $x $y $blur $spread $color;
+  //    -moz-box-shadow: $x $y $blur $spread $color;
+  //     -ms-box-shadow: $x $y $blur $spread $color;
           box-shadow: $x $y $blur $spread $color;
 }
 @mixin inset-shadow($blur: 9px)
 {
-  filter: progid:DXImageTransform.Microsoft.dropshadow(OffX=0, OffY=0, Color='#000');
-  -ms-filter: "progid:DXImageTransform.Microsoft.dropshadow(OffX=0, OffY=0, Color='#000')";
-  -webkit-box-shadow: 0 0 $blur #000 inset;
-     -moz-box-shadow: 0 0 $blur #000 inset;
-      -ms-box-shadow: 0 0 $blur #000 inset;
+  // filter: progid:DXImageTransform.Microsoft.dropshadow(OffX=0, OffY=0, Color='#000');
+  // -ms-filter: "progid:DXImageTransform.Microsoft.dropshadow(OffX=0, OffY=0, Color='#000')";
+  // -webkit-box-shadow: 0 0 $blur #000 inset;
+  //    -moz-box-shadow: 0 0 $blur #000 inset;
+  //     -ms-box-shadow: 0 0 $blur #000 inset;
           box-shadow: 0 0 $blur #000 inset;
 }
 @mixin inset-shadow($x, $y, $blur: 9px, $color: #000, $spread: 0px)
 {
-  filter: progid:DXImageTransform.Microsoft.dropshadow(OffX=$x, OffY=$y, Color=~'${color}');
-  -ms-filter: "progid:DXImageTransform.Microsoft.dropshadow(OffX=0, OffY=0, Color='${color}')";
-  -webkit-box-shadow: $x $y $blur $spread $color inset;
-     -moz-box-shadow: $x $y $blur $spread $color inset;
-      -ms-box-shadow: $x $y $blur $spread $color inset;
+  // filter: progid:DXImageTransform.Microsoft.dropshadow(OffX=$x, OffY=$y, Color=~'${color}');
+  // -ms-filter: "progid:DXImageTransform.Microsoft.dropshadow(OffX=0, OffY=0, Color='${color}')";
+  // -webkit-box-shadow: $x $y $blur $spread $color inset;
+  //    -moz-box-shadow: $x $y $blur $spread $color inset;
+  //     -ms-box-shadow: $x $y $blur $spread $color inset;
           box-shadow: $x $y $blur $spread $color inset;
 }
 
 @mixin drop-shadow($x-axis: 0, $y-axis: 1px, $blur: 2px, $alpha: 0.1)
 {
-  -webkit-box-shadow: $x-axis $y-axis $blur rgba(0, 0, 0, $alpha);
-  -moz-box-shadow: $x-axis $y-axis $blur rgba(0, 0, 0, $alpha);
+  // -webkit-box-shadow: $x-axis $y-axis $blur rgba(0, 0, 0, $alpha);
+  // -moz-box-shadow: $x-axis $y-axis $blur rgba(0, 0, 0, $alpha);
   box-shadow: $x-axis $y-axis $blur rgba(0, 0, 0, $alpha);
 }
 
 // Border radius
 @mixin rounded($radius: 2px)
 {
-  -webkit-border-radius: $radius;
-     -moz-border-radius: $radius;
+  // -webkit-border-radius: $radius;
+  //    -moz-border-radius: $radius;
           border-radius: $radius;
-  -webkit-background-clip: padding-box;
-     -moz-background-clip: padding;
-          background-clip: padding-box; 
+  // -webkit-background-clip: padding-box;
+  //    -moz-background-clip: padding;
+          background-clip: padding-box;
 }
 @mixin border-radius($topleft: 0, $topright: 0, $bottomright: 0, $bottomleft: 0)
 {
-	-webkit-border-radius:$topleft $topright $bottomright $bottomleft;
-	   -moz-border-radius:$topleft $topright $bottomright $bottomleft;
+	// -webkit-border-radius:$topleft $topright $bottomright $bottomleft;
+	//    -moz-border-radius:$topleft $topright $bottomright $bottomleft;
 	        border-radius:$topleft $topright $bottomright $bottomleft;
-  -webkit-background-clip: padding-box;
-     -moz-background-clip: padding;
-          background-clip: padding-box; 
+  // -webkit-background-clip: padding-box;
+  //    -moz-background-clip: padding;
+          background-clip: padding-box;
 }
 
 // transitions
 @mixin transition-simply-prefix($string) {
-  -webkit-transition: $string;
-  -moz-transition: $string;
-  -o-transition: $string;
+  // -webkit-transition: $string;
+  // -moz-transition: $string;
+  // -o-transition: $string;
   transition: $string;
 }
 
@@ -388,11 +388,11 @@ $g:0;
 //   |  1 param   : $property
 //   |  2 params  : $property / $duration
 //   |  3+ params : $property / $duration / $transitiondelay:0s , $timingfunction:ease-out
-//   
+//
 //    ___ .transitions()
 //   |
 //   |  Permet de fixer des paramètres spécifique par propriétés, exemple:
-//   |  
+//   |
 //   |  .transitions(
 //   |     'height , padding  , margin , box-shadow',
 //   |     '.5s    , .2s      , .2s    , .2s',
@@ -406,41 +406,41 @@ $g:0;
 // $timingfunction: "ease-out";
 @mixin transition($property:all)
 {
-  -webkit-transition: $property;
-     -moz-transition: $property;
-       -o-transition: $property;
+  // -webkit-transition: $property;
+  //    -moz-transition: $property;
+  //      -o-transition: $property;
           transition: $property;
 }
 
 @mixin transition($property:all, $speed:1s)
 {
-  -webkit-transition: $property, $speed;
-     -moz-transition: $property, $speed;
-       -o-transition: $property, $speed;
+  // -webkit-transition: $property, $speed;
+  //    -moz-transition: $property, $speed;
+  //      -o-transition: $property, $speed;
           transition: $property, $speed;
 }
 
 @mixin transition($property:all, $speed:1s, $ease:ease-out)
 {
-  -webkit-transition: $property, $speed, $ease;
-     -moz-transition: $property, $speed, $ease;
-       -o-transition: $property, $speed, $ease;
+  // -webkit-transition: $property, $speed, $ease;
+  //    -moz-transition: $property, $speed, $ease;
+  //      -o-transition: $property, $speed, $ease;
           transition: $property, $speed, $ease;
 }
 @mixin transitions($property: all, $duration:0s, $transitiondelay:0s, $timingfunction:ease-out)
 {
-  -webkit-transition-property       :property;
-  -webkit-transition-duration       :duration;
-  -webkit-transition-delay          :transitiondelay;
-  -webkit-transition-timing-function:timingfunction;
-     -moz-transition-property       :property;
-     -moz-transition-duration       :duration;
-     -moz-transition-delay          :transitiondelay;
-     -moz-transition-timing-function:timingfunction;
-       -o-transition-property       :property;
-       -o-transition-duration       :duration;
-       -o-transition-delay          :transitiondelay;
-       -o-transition-timing-function:timingfunction;
+  // -webkit-transition-property       :property;
+  // -webkit-transition-duration       :duration;
+  // -webkit-transition-delay          :transitiondelay;
+  // -webkit-transition-timing-function:timingfunction;
+  //    -moz-transition-property       :property;
+  //    -moz-transition-duration       :duration;
+  //    -moz-transition-delay          :transitiondelay;
+  //    -moz-transition-timing-function:timingfunction;
+  //      -o-transition-property       :property;
+  //      -o-transition-duration       :duration;
+  //      -o-transition-delay          :transitiondelay;
+  //      -o-transition-timing-function:timingfunction;
           transition-property       :property;
           transition-duration       :duration;
           transition-delay          :transitiondelay;
@@ -449,25 +449,25 @@ $g:0;
 
 @mixin transitions-duration($duration: 0s)
 {
-  -webkit-transition-duration: $duration;
-     -moz-transition-duration: $duration;
-       -o-transition-duration: $duration;
+  // -webkit-transition-duration: $duration;
+  //    -moz-transition-duration: $duration;
+  //      -o-transition-duration: $duration;
           transition-duration: $duration;
 }
 
 @mixin transition-duration($duration: 0.2s)
 {
-  -webkit-transition-duration: $duration;
-     -moz-transition-duration: $duration;
-       -o-transition-duration: $duration;
+  // -webkit-transition-duration: $duration;
+  //    -moz-transition-duration: $duration;
+  //      -o-transition-duration: $duration;
           transition-duration: $duration;
 }
 
 @mixin transitions-delay($delay: 0s)
 {
-  -webkit-transition-delay: delay;
-     -moz-transition-delay: delay;
-       -o-transition-delay: delay;
+  // -webkit-transition-delay: delay;
+  //    -moz-transition-delay: delay;
+  //      -o-transition-delay: delay;
           transition-delay: delay;
 }
 
@@ -476,68 +476,68 @@ $g:0;
 //    ___ .rotation()
 //   |
 //   |  1 param   : $degree
-//   
+//
 //    ___ .rotate()
-//   |  
+//   |
 //   |  Tentative de compatibilté étendue (fonctionne uniquement pour 0, 90, 180 ou 270 degrés).
-//   |  
+//   |
 //   |  1 param  : $degree
 //   |  3 params : $degree / $originX / $originY
 //
 @mixin rotation($deg:5deg)
 {
-  -webkit-transform: rotate($deg);
-     -moz-transform: rotate($deg);
+  // -webkit-transform: rotate($deg);
+  //    -moz-transform: rotate($deg);
           transform: rotate($deg);
 }
 @mixin rotate($value, $originX:0%, $originY:0%, $unit:'deg')
 {
-  filter: progid:DXImageTransform.Microsoft.BasicImage(rotation = (360 / $value) + 1); //0, 1, 2, or 3 rotate 0, 90, 180 or 270
-  -webkit-transform: rotate($value $unit); // $value $unit rather than $value$unit remove the spaces between value and unit.
-     -moz-transform: rotate($value $unit);
-      -ms-transform: rotate($value $unit);
-       -o-transform: rotate($value $unit);
+  // filter: progid:DXImageTransform.Microsoft.BasicImage(rotation = (360 / $value) + 1); //0, 1, 2, or 3 rotate 0, 90, 180 or 270
+  // -webkit-transform: rotate($value $unit); // $value $unit rather than $value$unit remove the spaces between value and unit.
+  //    -moz-transform: rotate($value $unit);
+  //     -ms-transform: rotate($value $unit);
+  //      -o-transform: rotate($value $unit);
           transform: rotate($value $unit);
-  -webkit-transform-origin:$originX $originY;
-     -moz-transform-origin:$originX $originY;
-      -ms-transform-origin:$originX $originY;
-       -o-transform-origin:$originX $originY;
+  // -webkit-transform-origin:$originX $originY;
+  //    -moz-transform-origin:$originX $originY;
+  //     -ms-transform-origin:$originX $originY;
+  //      -o-transform-origin:$originX $originY;
           transform-origin:$originX $originY;
 }
 
 // Scale
 @mixin scale($ratio:1.5)
 {
-  -webkit-transform:scale($ratio);
-     -moz-transform:scale($ratio);
+  // -webkit-transform:scale($ratio);
+  //    -moz-transform:scale($ratio);
           transform:scale($ratio);
 }
 
 // Translate
 @mixin translate($x:0, $y:0)
 {
-  -webkit-transform: translate($x, $y);
-     -moz-transform: translate($x, $y);
-      -ms-transform: translate($x, $y);
-       -o-transform: translate($x, $y);
+  // -webkit-transform: translate($x, $y);
+  //    -moz-transform: translate($x, $y);
+  //     -ms-transform: translate($x, $y);
+  //      -o-transform: translate($x, $y);
           transform: translate($x, $y);
 }
 
 // Columns
 @mixin columns($colwidth: 250px, $colcount: 0, $colgap: 50px, $columnRuleColor: #EEE, $columnRuleStyle: solid, $columnRuleWidth: 1px)
 {
-  -webkit-column-width     : $colwidth;
-  -webkit-column-count     : $colcount;
-  -webkit-column-gap       : $colgap;
-  -webkit-column-rule-color: $columnRuleColor;
-  -webkit-column-rule-style: $columnRuleStyle;
-  -webkit-column-rule-width: $columnRuleWidth;
-     -moz-column-width     : $colwidth;
-     -moz-column-count     : $colcount;
-     -moz-column-gap       : $colgap;
-     -moz-column-rule-color: $columnRuleColor;
-     -moz-column-rule-style: $columnRuleStyle;
-     -moz-column-rule-width: $columnRuleWidth;
+  // -webkit-column-width     : $colwidth;
+  // -webkit-column-count     : $colcount;
+  // -webkit-column-gap       : $colgap;
+  // -webkit-column-rule-color: $columnRuleColor;
+  // -webkit-column-rule-style: $columnRuleStyle;
+  // -webkit-column-rule-width: $columnRuleWidth;
+  //    -moz-column-width     : $colwidth;
+  //    -moz-column-count     : $colcount;
+  //    -moz-column-gap       : $colgap;
+  //    -moz-column-rule-color: $columnRuleColor;
+  //    -moz-column-rule-style: $columnRuleStyle;
+  //    -moz-column-rule-width: $columnRuleWidth;
           column-width     : $colwidth;
           column-count     : $colcount;
           column-gap       : $colgap;
@@ -559,7 +559,7 @@ $g:0;
   font-weight: normal;
   padding: 0.25em 0.75em;
   margin-top:.5em;
-  
+
   &:hover{background-color:darken($bc, 20%);}
   &:active{
     text-shadow: 0 1px 0 lighten($bc,5%);
@@ -583,7 +583,7 @@ $g:0;
 // =
 // =
 // =
-// ===== RETINA ========================================================================================================== 
+// ===== RETINA ==========================================================================================================
 
 // retina.less
 // A helper mixin for applying high-resolution background images (http://www.retinajs.com)

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

@@ -2,10 +2,28 @@
  * Primary Drupal Styles
  * Author: g-u-i.net
  */
+@charset "UTF-8";
 
-@import "../bower_components/foundation/scss/foundation.scss";
 @import "../bower_components/foundation/scss/normalize.scss";
 
+@import "../bower_components/foundation/scss/foundation/functions";
+
+// $row-width: rem-calc(1250);
+// $total-columns: 12;
+// $column-gutter: rem-calc(20);
+
+//@import "../bower_components/foundation/scss/foundation/settings"; // this is not working, causing an error on compilation
+@import "../bower_components/foundation/scss/foundation/components/global";
+@import "../bower_components/foundation/scss/foundation/components/type";
+@import "../bower_components/foundation/scss/foundation/components/clearing";
+@import "../bower_components/foundation/scss/foundation/components/inline-lists";
+@import "../bower_components/foundation/scss/foundation/components/buttons";
+@import "../bower_components/foundation/scss/foundation/components/button-groups";
+// @import "../bower_components/foundation/scss/foundation/components/grid";
+// @import "../bower_components/foundation/scss/foundation/components/top-bar";
+// @import "../bower_components/foundation/scss/foundation/components/block-grid";
+
+
 @import "gui.scss";
 
 @import "fonts.scss";
@@ -141,7 +159,7 @@
     .column-switcher{
       display:inline-block; @include rounded(3px); color:#fff; background-color: #3e3e3e; vertical-align:middle;
       @include fs700(); @include fs22;
-      padding: 0.05em 0.15em 0.2em 0.2em; line-height:0.5; 
+      padding: 0.05em 0.15em 0.2em 0.2em; line-height:0.5;
       @include regular;
       &.prev-column{cursor: w-resize;}
       &.next-column{cursor: e-resize;}
@@ -188,14 +206,14 @@ $headerouterheight:$headerheight+$headerpaddingtop+$headerpaddingbottom;
     //width:210px; //padding-left:5px; //margin-left:50px;
     @include inlineblock();
     h1{
-      margin:0; 
-      @include fs36; 
+      margin:0;
+      @include fs36;
       @include inlineblock(); vertical-align: baseline; position:relative; line-height:1.25;
       a:hover{text-decoration: none ;}
     }
     span.beta{
       line-height:1; letter-spacing: 0.1em;
-      color:rgb(0,0,122); 
+      color:rgb(0,0,122);
       @include fs12;
       position:absolute; left:0; @include pl(0); @include ml(0);
     }
@@ -227,10 +245,10 @@ $headerouterheight:$headerheight+$headerpaddingtop+$headerpaddingbottom;
     .block{
       @include inlineblock(); vertical-align:middle;
       h2{
-        @include fs12; 
+        @include fs12;
         margin: 0; line-height: 1.2; font-weight: normal; }
       &:not(:last-child){
-        @include pr(0.8em); 
+        @include pr(0.8em);
         @media #{$xlarge-only}{ @include pr(0.3em); } //change this
       }
     }
@@ -262,12 +280,12 @@ $headerouterheight:$headerheight+$headerpaddingtop+$headerpaddingbottom;
         #edit-actions{
           margin: 5px 0; padding: 0; @include bgc(transparent); text-align: right;
           input.form-submit{
-            @include fs12;  
+            @include fs12;
             padding: 10px;
           }
         }
         div.newpass a{
-          @include fs12; 
+          @include fs12;
           color:#686868;
         }
 
@@ -293,8 +311,8 @@ $headerouterheight:$headerheight+$headerpaddingtop+$headerpaddingbottom;
     #block-materio-flag-materio-flag-mylists-nav{
       position:relative;
       h2{
-        margin: 0; 
-        @include fs12; 
+        margin: 0;
+        @include fs12;
         line-height:1.1;}// @include fs700;
       // h2, section.mylists{@include inlineblock();}
       section.mylists{
@@ -303,7 +321,7 @@ $headerouterheight:$headerheight+$headerpaddingtop+$headerpaddingbottom;
         .ie8 &{background:#FFF;}
         ul{margin: 0;}
         li{
-          list-style: none; 
+          list-style: none;
           @include fs12; @include fs700;
           padding: 0 10px; text-align: left; width:200px;
           height:0; overflow:hidden; @include transition-simply-prefix(height 0.3s ease-out);
@@ -312,7 +330,7 @@ $headerouterheight:$headerheight+$headerpaddingtop+$headerpaddingbottom;
           a, span.preview{white-space:nowrap; cursor:pointer;}
           a.open-list{max-width:150px;}
           span.count{
-            @include fs300; 
+            @include fs300;
             padding: 0 5px;}
           span.preview, a.edit-list{@include pr(5px);}
 
@@ -338,7 +356,7 @@ $headerouterheight:$headerheight+$headerpaddingtop+$headerpaddingbottom;
     }
 
     #block-ajax-register-ajax-register-block{
-      @include fs12; 
+      @include fs12;
       text-transform: lowercase;
     }
 
@@ -353,7 +371,7 @@ $headerouterheight:$headerheight+$headerpaddingtop+$headerpaddingbottom;
       .fi-power{margin: 0 0.5em 0 0.5em;}
       @media #{$large-only}{ .fi-power{display: none;} }
       @media #{$medium-up}{ a span.logout{display:none;} }
-      
+
       @media #{$small-only}{a span.account{display:none;}} //change this
     }
 
@@ -368,8 +386,8 @@ $headerouterheight:$headerheight+$headerpaddingtop+$headerpaddingbottom;
       @include ml(1em);
       // border-left: 1px solid #707070;
       ul,li{
-        margin:0;padding:0;list-style-type: none; 
-        @include fs12; 
+        margin:0;padding:0;list-style-type: none;
+        @include fs12;
         line-height: 1;
         &.active{display:none;}
       }
@@ -406,7 +424,7 @@ $headerouterheight:$headerheight+$headerpaddingtop+$headerpaddingbottom;
       }
 
       ul.menu, li{
-        @include fs12; 
+        @include fs12;
         list-style: none;
         .ie8 &{display: inline;}
       }
@@ -427,7 +445,7 @@ $headerouterheight:$headerheight+$headerpaddingtop+$headerpaddingbottom;
         .menu-wrapper{
           position:absolute; width:150px; display:none; right:0; @include pt(5px);
           ul.menu{
-            background-color: #e6e6e6; 
+            background-color: #e6e6e6;
             @include rounded(5px); padding: 0 5px 5px 5px; margin: 0; text-align: right;
             li{
               height:0;
@@ -548,16 +566,16 @@ $headerouterheight:$headerheight+$headerpaddingtop+$headerpaddingbottom;
   .block-materio-didactique{
       // .ie8 &{max-width:850px; border: 1px solid #C6C6C6;}
       .node-didactique{
-      @include fs14; 
+      @include fs14;
       @include bgc(#fff); //padding: 5px;
       margin: 0 auto;
       // .ie8 &{max-width:750px; margin-left:15px; margin-top:10px;}
 
       .side{position:relative;}
 
-      .field-name-title-field{ 
-        @include fs900; 
-        @include italic; 
+      .field-name-title-field{
+        @include fs900;
+        @include italic;
         padding:5px 0;
       }
       .field-name-field-visuel{
@@ -869,8 +887,8 @@ $headerouterheight:$headerheight+$headerpaddingtop+$headerpaddingbottom;
     // position:absolute; top:10px; right:0;
     float:right;
     >.inner{
-      @include inlineblock(); margin:0 0 0 10px; 
-      padding: 3px 10px; @include bgc(#fff); @include rounded(3px); 
+      @include inlineblock(); margin:0 0 0 10px;
+      padding: 3px 10px; @include bgc(#fff); @include rounded(3px);
       @include shadowBtn(); text-align: right;
     }
   }
@@ -1496,10 +1514,19 @@ article.node-materiau.vm-cardfull, article.node-breve.vm-cardfull{
 
     .form-actions{ text-align: right ;}
     input.form-submit{
-      @include button; 
-      //@include btn-mini; color:#000; //change this btn bootstrap -> foundation 
+      @include button($button-tny);
+      //@include btn-mini; color:#000; //change this btn bootstrap -> foundation
       &[name="create"]{
-       // @include btn-info; change this
+        @include button($button-tny, $success-color);
+      }
+      &[name="save"]{
+        @include button($button-tny, $success-color);
+      }
+      &[name="delete"]{
+        @include button($button-tny, $alert-color);
+      }
+      &[name="cancel"]{
+        @include button($button-tny, $secondary-color);
       }
     }
   }
@@ -1633,7 +1660,7 @@ article.node-materiau.vm-cardfull, article.node-breve.vm-cardfull{
   @include drop-shadow(0, 0, 5px, 0.4);
   &.op-visible{
     @include transition-simply-prefix(opacity 0.1s ease-out); // top 0.1s linear); // left 0.1s linear,
-    // change this transition foundation 
+    // change this transition foundation
   }
 }
 
@@ -1763,7 +1790,7 @@ article.node-materiau.vm-cardfull, article.node-breve.vm-cardfull{
       margin: 0; text-align:right; padding: 1em 0.5em;
     }
 
-    // input#edit-submit{@include btn; @include btn-success;} //change this btn foundation 
+    // input#edit-submit{@include btn; @include btn-success;} //change this btn foundation
 
     /* #user-profile-form */
     #edit-profile-adherent-field-first-name, #edit-profile-adherent-field-name,
@@ -1872,7 +1899,7 @@ body.page-node-11187{
           max-width: 98%;
         }
       }
-    }  
+    }
 
     #block-materio-user-user-register{
       width:600px; margin: 0 auto;
@@ -2440,4 +2467,4 @@ body.page-node-11187{
     max-width:50%;
     height:auto;
   }
-} 
+}

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

@@ -1,5 +1,5 @@
 /* LISIBILITY */
-@import "../components/gui/gui.less";
+@import "gui.scss";
 
 
 *{font-size:14px;}
@@ -27,13 +27,13 @@ h6{font-size:12px;}
 br:after{content:"·"; color:red; border: 1px solid #999;}
 
 /* LAYOUT AND GRAPHICS */
-#full{ width:99%; }
-#demi{ width:47%; }
-#tiers{ width:29%; }
-#quart{ width:23%; }
-#right{ float:right; margin-left:2%; }
-#left{ float:left; margin-right:2%; }
-#center{ display:block; margin:0 auto; }
+@mixin full(){ width:99%; }
+@mixin demi(){ width:47%; }
+@mixin tiers(){ width:29%; }
+@mixin quart(){ width:23%; }
+@mixin right(){ float:right; margin-left:2%; }
+@mixin left(){ float:left; margin-right:2%; }
+@mixin center(){ display:block; margin:0 auto; }
 
 
 img{height:auto; margin:0.5em 0;}
@@ -43,22 +43,22 @@ div{border: 1px solid #1A1A1A;}
 img,p,div{ position:relative;
 	&:before{font-size:10px; color:red; background-color: #1A1A1A; position:absolute; top:0; z-index:3000;}
 
-	&.full{#full; &:before{content:" full ";}}
-	&.demi{ #demi; margin-right:2%; &:before{content:" demi "; right:0;}}
-	&.tiers{ #tiers; margin-right:2%; &:before{content:" tiers "; right:0;}}
-	&.quart{ #quart; margin-right:2%; &:before{content:" quart "; right:0;}}
+	&.full{@include full(); &:before{content:" full ";}}
+	&.demi{ @include demi(); margin-right:2%; &:before{content:" demi "; right:0;}}
+	&.tiers{ @include tiers(); margin-right:2%; &:before{content:" tiers "; right:0;}}
+	&.quart{ @include quart(); margin-right:2%; &:before{content:" quart "; right:0;}}
 
-	&.demi-left{ #demi; #left; &:before{content:" demi-left "; left:0;}}
-	&.demi-right{ #demi; #right;  &:before{content:" demi-right "; right:0;}}
-	&.demi-center{ #demi; #center;  &:before{content:" demi-denter "; right:0;}}
+	&.demi-left{ @include demi(); @include left(); &:before{content:" demi-left "; left:0;}}
+	&.demi-right{ @include demi(); @include right();  &:before{content:" demi-right "; right:0;}}
+	&.demi-center{ @include demi(); @include center();  &:before{content:" demi-denter "; right:0;}}
 
-	&.tiers-left{ #tiers; #left;  &:before{content:" tiers-left "; left:0;}}
-	&.tiers-right{ #tiers; #right;  &:before{content:" tiers-right "; right:0;}}
-	&.tiers-center{ #tiers; #center;  &:before{content:" tiers-center "; right:0;}}
+	&.tiers-left{ @include tiers(); @include left();  &:before{content:" tiers-left "; left:0;}}
+	&.tiers-right{ @include tiers(); @include right();  &:before{content:" tiers-right "; right:0;}}
+	&.tiers-center{ @include tiers(); @include center();  &:before{content:" tiers-center "; right:0;}}
 
-	&.quart-left{ #quart; #left;  &:before{content:" quart-left "; left:0;}}
-	&.quart-right{ #quart; #right;  &:before{content:" quart-right "; right:0;}}
-	&.quart-center{ #quart; #center;  &:before{content:" quart-center "; right:0;}}
+	&.quart-left{ @include quart(); @include left();  &:before{content:" quart-left "; left:0;}}
+	&.quart-right{ @include quart(); @include right();  &:before{content:" quart-right "; right:0;}}
+	&.quart-center{ @include quart(); @include center();  &:before{content:" quart-center "; right:0;}}