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

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

@@ -113,10 +113,10 @@ $red:#E60000;
 }
 
 // Background
-@mixin bg($color, $url, $repeat, $scrollfixed, $pos){background: $arguments;}
-@mixin bgc($color){background-color: $arguments;}
-@mixin bkgd($params){background: $arguments;}
-@mixin bkgdc($color){@include bgc($arguments);}
+@mixin bg($color, $url, $repeat, $scrollfixed, $pos){background: $color, $url, $repeat, $scrollfixed, $pos;}
+@mixin bgc($color){background-color: $color;}
+@mixin bkgd($params){background: $params;}
+@mixin bkgdc($color){@include bgc($color);}
 
 @mixin bgca($r, $g, $b, $a){
   background-color: rgb($r, $g, $b); // ie8
@@ -366,9 +366,9 @@ $g:0;
 }
 @mixin border-radius($topleft: 0, $topright: 0, $bottomright: 0, $bottomleft: 0)
 {
-	-webkit-border-radius:$arguments;
-	   -moz-border-radius:$arguments;
-	        border-radius:$arguments;
+	-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; 
@@ -404,29 +404,28 @@ $g:0;
 // $duration: 1s;
 // $transitiondelay:0s;
 // $timingfunction: "ease-out";
-@mixin transition($property)
+@mixin transition($property:all)
 {
   -webkit-transition: $property;
      -moz-transition: $property;
        -o-transition: $property;
           transition: $property;
 }
-$arguments:("all", 0s);
-@mixin transition($arguments)
+
+@mixin transition($property:all, $speed:1s)
 {
-  -webkit-transition: $arguments;
-     -moz-transition: $arguments;
-       -o-transition: $arguments;
-          transition: $arguments;
-}
-//$parameters:($property, $duration, $transitiondelay, "ease-out");
-$parameters:("all", 0s, "ease-out");
-@mixin transition($parameters)
+  -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: $parameters;
-     -moz-transition: $parameters;
-       -o-transition: $parameters;
-          transition: $parameters;
+  -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)
 {

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

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

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

@@ -227,10 +227,10 @@ a:hover {
 /** embed player */
 .embedded-video{
   .player iframe{
-    // @media @max-768{
-    //   max-width:100%;
-    //   height:auto;
-    // } change this
+    @media #{$medium-only}{
+      max-width:100%;
+      height:auto;
+    }// change this
   }
 }
 

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

@@ -67,27 +67,49 @@
   position:absolute; width:100%; height:100%; top:0; left:0;
 }
 
-@mixin op-visible(){
+.op-visible{
   visibility:visible;
   .csstransitions &{
     @include opacity(1);
     @include transition-simply-prefix(opacity 0.3s ease-out);
   }
 }
-@mixin op-hidden(){
+.op-hidden{
   visibility:hidden;
   >*{
       margin-top:-100000px;
     }
   .csstransition &{
     @include opacity(0);
-    @include transition-simply-prefix(visibility 0s 0.3s opacity 0.3s ease-out);
+    @include transition-simply-prefix(visibility 0s 0.3s); // opacity 0.3s ease-out); change this
     >*{
       @include transition-simply-prefix(margin-top 0s 0.3s);
     }
   }
 }
 
+@mixin op-visible(){
+  visibility:visible;
+  .csstransitions &{
+    @include opacity(1);
+    @include transition-simply-prefix(opacity 0.3s ease-out);
+  }
+} // change this
+
+@mixin op-hidden(){
+  visibility:hidden;
+  >*{
+      margin-top:-100000px;
+    }
+  .csstransition &{
+    @include opacity(0);
+    @include transition-simply-prefix(visibility 0s 0.3s); // opacity 0.3s ease-out); change this
+    >*{
+      @include transition-simply-prefix(margin-top 0s 0.3s);
+    }
+  }
+} // change this
+
 @mixin bouton(){
   @include fs16();
   font-weight:bold;
@@ -130,12 +152,12 @@
 @mixin bgcWhite(){
   @include bgca(255, 255, 255, 0.8);
   text-shadow:0 0 4px rgba(255, 255, 255, 0.4);
-  @include transition-simply-prefix(background-color 0.2s ease-out text-shadow 0.2s ease-out);
+  @include transition-simply-prefix(background-color 0.2s ease-out); // text-shadow 0.2s ease-out); //change this
 }
 @mixin bgcBlack(){
   @include bgca(0, 0, 0, 0.7);
   text-shadow:0 0 4px rgba(0, 0, 0, 0.4);
-  @include transition-simply-prefix(background-color 0.2s ease-out text-shadow 0.2s ease-out);
+  @include transition-simply-prefix(background-color 0.2s ease-out); // text-shadow 0.2s ease-out); //change this
 }
 
 // .bgcWhiteParentHover(){
@@ -183,7 +205,7 @@ $headerouterheight:$headerheight+$headerpaddingtop+$headerpaddingbottom;
       margin-top:-3px;
       margin-left:-0.5em;
       @include fs900;
-      //@media $max-980{display:none;} change this
+      @media #{$medium-only} {display:none;} //change this
      .ie8 &{position: absolute; margin-top:22px;}
     }
   }
@@ -198,7 +220,7 @@ $headerouterheight:$headerheight+$headerpaddingtop+$headerpaddingbottom;
     >.region{
       @include inlineblock();vertical-align:middle;
       @include pr(1em); @include mr(1em);
-      //@media $max-768{ @include pr(0.3em); @include mr(0.3em); } change this 
+      @media #{$medium-up}{ @include pr(0.3em); @include mr(0.3em); }//change this
       border-right: 1px solid #707070;
       &:last-child{border:none; padding: 0; margin: 0;}
     }
@@ -210,7 +232,7 @@ $headerouterheight:$headerheight+$headerpaddingtop+$headerpaddingbottom;
         margin: 0; line-height: 1.2; font-weight: normal; }
       &:not(:last-child){
         @include pr(0.8em); 
-        // @media $max-1200{ @include pr(0.3em); } change this
+        @media #{$xlarge-only}{ @include pr(0.3em); } //change this
       }
     }
 
@@ -264,9 +286,9 @@ $headerouterheight:$headerheight+$headerpaddingtop+$headerpaddingbottom;
         }
       }
 
-      // @media $max-480{
-      //   span.login{display:none;}
-      // } change this
+      @media #{$small-only}{
+        span.login{display:none;}
+      } //change this
     }
 
     #block-materio-flag-materio-flag-mylists-nav{
@@ -311,8 +333,8 @@ $headerouterheight:$headerheight+$headerpaddingtop+$headerpaddingbottom;
 
       h2{
         i{ vertical-align: text-bottom; margin: 0 2px 2px 0;}
-        // @media $min-980{ i{display: none;} }
-        // @media $max-980{ span.menu-title{display:none;} } change this
+        @media #{$xlarge-up}{ i{display: none;} }
+        @media #{$medium-only}{ span.menu-title{display:none;} } //change this
       }
     }
 
@@ -330,10 +352,10 @@ $headerouterheight:$headerheight+$headerpaddingtop+$headerpaddingbottom;
       a span.account{text-transform: lowercase;}
       a span.logout{display:none; @include ml(5px); }
       .icon-off{margin: 0 0.5em 0 0.5em;}
-      // @media $min-768{ .icon-off{display: none;} }
-      // @media $max-768{ a span.logout{display:none;} }
+      @media #{$large-only}{ .icon-off{display: none;} }
+      @media #{$medium-up}{ a span.logout{display:none;} }
       
-      // @media $max-768{a span.account{display:none;}} change this
+      @media #{$small-only}{a span.account{display:none;}} //change this
     }
 
     #headerblock-right{
@@ -390,41 +412,42 @@ $headerouterheight:$headerheight+$headerpaddingtop+$headerpaddingbottom;
         .ie8 &{display: inline;}
       }
       // menu en ligne
-      // @media $min-768{
-      //   h2{display:none;}
-      //   ul.menu, li{
-      //     @include inlineblock; vertical-align: middle;
-      //     padding: 0; margin: 0;
-      //   }
-      //   a{padding: 0 0.5em 0 0;}
-      // } change this
+      @media #{$medium-up}{
+        h2{display:none;}
+        ul.menu, li{
+          @include inlineblock; vertical-align: middle;
+          padding: 0; margin: 0;
+        }
+        a{padding: 0 0.5em 0 0;}
+      } //change this
 
       //menu deroulant
-      // @media $max-768{
-      //   position:relative;
-      //   h2 .menu-title{display: none;}
-      //   .menu-wrapper{
-      //     position:absolute; width:150px; display:none; right:0; @include pt(5px);
-      //     ul.menu{
-      //       background-color: #e6e6e6; @include rounded(5px); padding: 0 5px 5px 5px; margin: 0; text-align: right;
-      //       li{
-      //         height:0;
-      //         overflow:hidden;
-      //         .transition-simply-prefix(height 0.3s ease-out");
-      //         a{
-      //           display:block; width:100%; padding:2px 5px; .12;
-      //         }
-      //       }
-      //     }
-      //   }
-      //   html.no-touch &:hover, &.hovered{
-      //     z-index:$header-z-index;
-      //     .menu-wrapper{
-      //       display:block;
-      //       ul.menu{li{height:25px;}}
-      //     }
-      //   }
-      // } change this
+      @media #{$small-only}{
+        position:relative;
+        h2 .menu-title{display: none;}
+        .menu-wrapper{
+          position:absolute; width:150px; display:none; right:0; @include pt(5px);
+          ul.menu{
+            background-color: #e6e6e6; 
+            @include rounded(5px); padding: 0 5px 5px 5px; margin: 0; text-align: right;
+            li{
+              height:0;
+              overflow:hidden;
+              @include transition-simply-prefix(height 0.3s ease-out);
+              a{
+                display:block; width:100%; padding:2px 5px; @include fs12;
+              }
+            }
+          }
+        }
+        html.no-touch &:hover, &.hovered{
+          z-index:$header-z-index;
+          .menu-wrapper{
+            display:block;
+            ul.menu{li{height:25px;}}
+          }
+        }
+      } //change this
     }
 
     #block-materio-user-old-database-link{
@@ -459,65 +482,65 @@ $headerouterheight:$headerheight+$headerpaddingtop+$headerpaddingbottom;
   padding: 0.5em;
   position:relative;
 
-  // @media $min-768{
-  //   margin: 20px 0 6px;
-
-  //   .block{ @include inlineblock; vertical-align: top; }
-  //   .block-materio-didactique{
-  //     width:65%;
-  //     .side{
-  //       @include inlineblock(); vertical-align: top;
-  //       position:relative; //height:100%;
-  //     }
-  //     .group-sideleft{ width:65%; }
-  //     .group-sideright{ width:30%; }
-
-  //     .field-name-title-field{.24;}
-  //     // .field-name-field-visuel{}
-
-  //     .node.emvideo{
-  //       .group-sideleft, .group-sideright{ width:47%; }
-  //       .group-sideleft{.mr(2%);}
-  //       // .field-name-field-visuel{display:none;}
-  //     }
-
-  //   }
-  //   #block-materio-user-user-register{
-  //     width:30%;.p(5px); height:290px;
-  //   }
-  // }
+  @media #{$medium-up}{
+    margin: 20px 0 6px;
 
-  // @media $min-480{
-  //   .block-materio-didactique{
-  //     .side{.inlineblock(); vertical-align: top;}
-  //   }
-  // }
+    .block{ @include inlineblock; vertical-align: top; }
+    .block-materio-didactique{
+      width:65%;
+      .side{
+        @include inlineblock(); vertical-align: top;
+        position:relative; //height:100%;
+      }
+      .group-sideleft{ width:65%; }
+      .group-sideright{ width:30%; }
 
-  // @media $max-768{
-  //   .m(10px 0 6px);
-  //   .block-materio-didactique{
-  //     .group-sideleft, .group-sideright{ width:100%; }
-  //     .field-name-title-field{ .20; cursor:pointer; }
-
-  //     .node-didactique:not(:first-child){
-  //       .field-name-title-field{ font-weight:normal; &:before{content:"- ";}}
-  //     }
-
-  //     html.js & .node-didactique{
-  //       height:auto;
-  //       height:25px; overflow: hidden;
-  //       &.opened{height:auto;}
-  //     }
-  //   }
-  // }
+      .field-name-title-field{@include fs24;}
+      // .field-name-field-visuel{}
+
+      .node.emvideo{
+        .group-sideleft, .group-sideright{ width:47%; }
+        .group-sideleft{@include mr(2%);}
+        // .field-name-field-visuel{display:none;}
+      }
+
+    }
+    #block-materio-user-user-register{
+      width:30%; padding:5px; height:290px;
+    }
+  }
+
+  @media #{$small-up}{
+    .block-materio-didactique{
+      .side{@include inlineblock(); vertical-align: top;}
+    }
+  }
+
+  @media #{$small-only}{
+    margin:10px 0 6px;
+    .block-materio-didactique{
+      .group-sideleft, .group-sideright{ width:100%; }
+      .field-name-title-field{@include fs20; cursor:pointer; }
 
-  // @media @480-768{
-  //   .block-materio-didactique{
-  //     // .pt(150px);
-  //     .group-sideleft{ width:50%; }
-  //     .group-sideright{ width:50%; }
-  //   }
-  // } change this
+      .node-didactique:not(:first-child){
+        .field-name-title-field{ font-weight:normal; &:before{content:"- ";}}
+      }
+
+      html.js & .node-didactique{
+        height:auto;
+        height:25px; overflow: hidden;
+        &.opened{height:auto;}
+      }
+    }
+  }
+
+  @media #{$small-only}{
+    .block-materio-didactique{
+      // .pt(150px);
+      .group-sideleft{ width:50%; }
+      .group-sideright{ width:50%; }
+    }
+  } //change this
 
   .oldie &{
     .block{@include inlineblock;}
@@ -569,11 +592,11 @@ $headerouterheight:$headerheight+$headerpaddingtop+$headerpaddingbottom;
           .side{ height:100%; }
           .field-name-field-emvideo{
             $r:0.5625;
-            // @media $max-480 { $w:290px; width:$w; height:$w*$r; }
-            // @media @480-768 { $w:216px; width:$w; height:$w*$r; }
-            // @media @768-980 { $w:216px; width:$w; height:$w*$r; }
-            // @media @980-1200 { $w:280px; width:$w; height:$w*$r; }
-            // @media $min-1200 { $w:340px; width:$w; height:$w*$r; }//change this
+            @media #{$small-only} { $w:290px; width:$w; height:$w*$r; }
+            @media #{$medium-only} { $w:216px; width:$w; height:$w*$r; }
+            @media #{$large-only} { $w:216px; width:$w; height:$w*$r; }
+            @media #{$xlarge-only} { $w:280px; width:$w; height:$w*$r; }
+            @media #{$xxlarge-only} { $w:340px; width:$w; height:$w*$r; }//change this
             *{height:100%; width:100%;}
           }
         }
@@ -683,15 +706,15 @@ $headerouterheight:$headerheight+$headerpaddingtop+$headerpaddingbottom;
     text-align: center; text-decoration: none;
   }
 
-  // @media $max-480{
-  //   background-position: 160% 50%;
-  //   .form-item-mail input.form-text, .form-item-name input.form-text{ width:7em;}
-  // }
+  @media #{$small-only}{
+    background-position: 160% 50%;
+    .form-item-mail input.form-text, .form-item-name input.form-text{ width:7em;}
+  }
 
-  // @media $max-768{
-  //   min-height:60px; padding: 15px 0;
-  //   #user-login, >h3:first-child, >h3 span{ display:none; }
-  // }
+  @media #{$small-only}{
+    min-height:60px; padding: 15px 0;
+    #user-login, >h3:first-child, >h3 span{ display:none; }
+  }
 
   .message-error{
     color:#b94a48; @include fs12;
@@ -756,7 +779,7 @@ $headerouterheight:$headerheight+$headerpaddingtop+$headerpaddingbottom;
     }
 
     .mylists{
-       // .transition-simply-prefix(height 0.3s ease-out");
+       // .transition-simply-prefix(height 0.3s ease-out);
       section{
         h2, .flaged{
           height:0; overflow: hidden;
@@ -785,9 +808,9 @@ $headerouterheight:$headerheight+$headerpaddingtop+$headerpaddingbottom;
       // height:35px;
       //  margin: 5px;
     }
-    // @media $max-480{
-    //   .p(0); h1{line-height:0.5;}
-    // } //change this
+    @media #{$small-only}{
+      padding:0; h1{line-height:0.5;}
+    }
   }
   // text-align:right;
   // >*{ text-align: left ;}
@@ -819,9 +842,9 @@ $headerouterheight:$headerheight+$headerpaddingtop+$headerpaddingbottom;
       a.edit-list{ @include op-visible; }
     }
 
-    // @media $max-980{
-    //   display:block;
-    // }
+    @media #{$medium-only}{
+      display:block;
+    }
   }
 
   #block-materio-search-api-materio-search-api-viewmode{
@@ -830,16 +853,16 @@ $headerouterheight:$headerheight+$headerpaddingtop+$headerpaddingbottom;
       &.active{cursor:normal;}
        .inner{display:none;@include fs10; }
     }
-    // @media $max-768{
-    //   .viewmode-link{ display:block; &:not(.active){display:none;} }
-    // }
-    // @media $max-480{
-    //   html.no-touch &:hover, &.hovered{ .viewmode-link.viewmode-cardsmall, .viewmode-link.viewmode-cardmedium{display:block;} }
+    @media #{$medium-only}{
+      .viewmode-link{ display:block; &:not(.active){display:none;} }
+    }
+    @media #{$small-only}{
+      html.no-touch &:hover, &.hovered{ .viewmode-link.viewmode-cardsmall, .viewmode-link.viewmode-cardmedium{display:block;} }
 
-    // }
-    // @media @480-768{
-    //   html.no-touch &:hover, &.hovered{ .viewmode-link.viewmode-cardsmall, .viewmode-link.viewmode-cardmedium, .viewmode-link.viewmode-cardbig{display:block;} }
-    // }
+    }
+    @media #{$medium-only}{
+      html.no-touch &:hover, &.hovered{ .viewmode-link.viewmode-cardsmall, .viewmode-link.viewmode-cardmedium, .viewmode-link.viewmode-cardbig{display:block;} }
+    }
   }
 
   #block-materio-search-api-materio-search-api-search{
@@ -888,10 +911,10 @@ $headerouterheight:$headerheight+$headerpaddingtop+$headerpaddingbottom;
       input#edit-create{ visibility: hidden; }
     }
 
-    // @media $max-480{
-    //   input#edit-searchfield{width:16em;}
-    //   #edit-bundles-filter{display:none;}
-    // }
+    @media #{$small-only}{
+      input#edit-searchfield{width:16em;}
+      #edit-bundles-filter{display:none;}
+    }
   }
 
 }
@@ -984,7 +1007,7 @@ $cardfull_h:610px;
   //z-index:10; // pourquoi ce z-index ?
   @include rounded(5px); background-color: #FFF;
   @include drop-shadow(0, 0, 5px, 0.2);
-  @include transition-simply-prefix(box-shadow 0.3s ease-out opacity 0.3s ease-out);
+  @include transition-simply-prefix(box-shadow 0.3s ease-out); // opacity 0.3s ease-out); //change this commas
 }
 
 @mixin card($w, $h){
@@ -1258,7 +1281,8 @@ article.node-materiau.vm-cardmedium, article.node-breve.vm-cardmedium{
 
   // side 2
   .field-name-field-description, .field-name-body{
-    @include fs12; @include fs300; overflow: hidden; z-index:-1; @include columnized(5px); .column>*{@include pr(25px);}
+    @include fs12; @include fs300; overflow: hidden; z-index:-1; @include columnized(5px);
+    .column>*{@include pr(25px);}
   }
 
   // side 3
@@ -1472,7 +1496,8 @@ article.node-materiau.vm-cardfull, article.node-breve.vm-cardfull{
 
     .form-actions{ text-align: right ;}
     input.form-submit{
-      //@include btn; @include btn-mini; color:#000; change this btn bootstrap -> foundation 
+      @include button; 
+      //@include btn-mini; color:#000; //change this btn bootstrap -> foundation 
       &[name="create"]{
        // @include btn-info; change this
       }
@@ -1607,7 +1632,7 @@ article.node-materiau.vm-cardfull, article.node-breve.vm-cardfull{
   @include fs12; @include fs500;
   @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,
+    @include transition-simply-prefix(opacity 0.1s ease-out); // top 0.1s linear); // left 0.1s linear,
     // change this transition foundation 
   }
 }
@@ -1615,7 +1640,7 @@ article.node-materiau.vm-cardfull, article.node-breve.vm-cardfull{
 /** FEEDBACK */
 #block-feedback-form{
 
-  // @media $max-768{ bottom:5px; left:5px; right:auto; }
+  @media #{$medium-only}{ bottom:5px; left:5px; right:auto; }
 
   h2{
     line-height:1.2; @include fs14; margin: 0;
@@ -1824,40 +1849,40 @@ body.node-type-simplenews{
 body.page-node-11187{
   // #center{ background-color: #fff; }
 
-  // @media $min-480{
-  //   .node-11187{
-  //     .field-name-body{
-  //       div.column, div.column-demi, div.column-full, div.column-auto{
-  //         @include inlineblock;  margin: 10px;
-  //       }
-  //       div.column{
-  //         width:22.4%;
-  //         ul.list-text{ min-height:170px;}
-  //       }
-  //       div.column-demi{
-  //         width:46%;
-  //         ul.list-text{ min-height:110px;}
-  //       }
-  //       div.column-full{
-  //         width:92%;
-  //         // ul.list-text{ min-height:110px;}
-  //       }
-  //       div.column-auto{
-  //         width:auto;
-  //         max-width: 98%;
-  //       }
-  //     }
-  //   }  
-
-    // #block-materio-user-user-register{
-    //   width:600px; margin: 0 auto;
-    // }
-  //}change this
+  @media #{$medium-up}{
+    .node-11187{
+      .field-name-body{
+        div.column, div.column-demi, div.column-full, div.column-auto{
+          @include inlineblock;  margin: 10px;
+        }
+        div.column{
+          width:22.4%;
+          ul.list-text{ min-height:170px;}
+        }
+        div.column-demi{
+          width:46%;
+          ul.list-text{ min-height:110px;}
+        }
+        div.column-full{
+          width:92%;
+          // ul.list-text{ min-height:110px;}
+        }
+        div.column-auto{
+          width:auto;
+          max-width: 98%;
+        }
+      }
+    }  
 
-  // @media $max-480{
-  //   // #block-materio-user-user-register{  padding: 25px 0 0 0; #user-login, >h3:first-child, h3 >span{display:block;}}
-  //    #block-system-help{text-align: center;}
-  // }
+    #block-materio-user-user-register{
+      width:600px; margin: 0 auto;
+    }
+  }
+
+  @media #{$small-only}{
+    // #block-materio-user-user-register{  padding: 25px 0 0 0; #user-login, >h3:first-child, h3 >span{display:block;}}
+     #block-system-help{text-align: center;}
+  }
 
   .node-11187{
     .field-name-body{
@@ -1939,36 +1964,36 @@ body.page-node-11187{
 }
 
 #webform-client-form-11186{
-  // @media $min-768{
-  //   padding: 10px 30px;
-  //   #webform-component-column-left--membership-options{
-  //     margin: 10px 0;
-  //     label{width:auto;}
-  //   }
-  //   fieldset{
-  //     @include rounded(5px); border-left: 1px solid #cccccc; border-bottom: 1px solid #cccccc; padding: 10px;
-  //     fieldset{ border: 0 solid #ddd; padding: 0;}
-  //   }
-  //   legend{margin: 0; @include fs18; @include fs700;}
-  //   .form-item{ margin: 0 20px 0 0; }
-  //   label{ @include fs12; width:10em; @include inlineblock; vertical-align:middle; @include mr(1em); border-bottom: 1px solid #cccccc; }
-  //   .description{ @include fs11; width:25em; @include inlineblock; vertical-align:bottom; @include ml(1em); color:#7f7f7f;}
-  //   input.form-text{width:13em;}
-  // }
+  @media #{$medium-up}{
+    padding: 10px 30px;
+    #webform-component-column-left--membership-options{
+      margin: 10px 0;
+      label{width:auto;}
+    }
+    fieldset{
+      @include rounded(5px); border-left: 1px solid #cccccc; border-bottom: 1px solid #cccccc; padding: 10px;
+      fieldset{ border: 0 solid #ddd; padding: 0;}
+    }
+    legend{margin: 0; @include fs18; @include fs700;}
+    .form-item{ margin: 0 20px 0 0; }
+    label{ @include fs12; width:10em; @include inlineblock; vertical-align:middle; @include mr(1em); border-bottom: 1px solid #cccccc; }
+    .description{ @include fs11; width:25em; @include inlineblock; vertical-align:bottom; @include ml(1em); color:#7f7f7f;}
+    input.form-text{width:13em;}
+  }
 
-  // @media $max-768{
-  //   padding: 10px;
-  //   #webform-component-column-left--membership-options{
-  //     margin: 0 0 10px 0;
-  //     .form-item{width:100%;}
-  //     label{ width:75%; }
-  //   }
-  //   legend{margin: 0; @include fs16; @include fs700;}
-  //   .form-item{ margin: 0; float:none;}
-  //   label{ @include fs12; width:30%; @include inlineblock; vertical-align:middle; @include mr(0.5em); }
-  //   input.form-text, select.form-select{width:60%;}
-  //   #webform-component-infos{@include fs14;}
-  // } change this
+  @media #{$medium-only}{
+    padding: 10px;
+    #webform-component-column-left--membership-options{
+      margin: 0 0 10px 0;
+      .form-item{width:100%;}
+      label{ width:75%; }
+    }
+    legend{margin: 0; @include fs16; @include fs700;}
+    .form-item{ margin: 0; float:none;}
+    label{ @include fs12; width:30%; @include inlineblock; vertical-align:middle; @include mr(0.5em); }
+    input.form-text, select.form-select{width:60%;}
+    #webform-component-infos{@include fs14;}
+  } //change this
 
   background-color: #e6e6e6; @include rounded(10px);
 
@@ -2052,7 +2077,7 @@ body.page-node-11187{
   background-color: #e6e6e6;
   // @include rounded(10px);
   padding: 10px, 30px;
-//  max-width:$cardfull_w;
+  //  max-width:$cardfull_w;
   display:inline-block;
   table{
     width:auto; display:table;
@@ -2111,7 +2136,7 @@ body.page-node-11187{
   padding: 10px, 30px;
 
   fieldset.form-row{
-//    @include rounded(5px); border-left: 1px solid #cccccc; border-bottom: 1px solid #cccccc;
+    //    @include rounded(5px); border-left: 1px solid #cccccc; border-bottom: 1px solid #cccccc;
     @include pb(20px); @include mb(20px);
     // fieldset{ border: 0 solid #ddd; padding: 0;}
   }
@@ -2337,23 +2362,23 @@ body.page-node-11187{
       }
     }
 
-    // @media $min-480{
-    //   .side{ @include inlineblock(); vertical-align: top; }
-    //   .group-sideleft{ width:60%; }
-    //   .group-sideright{ width:39%; }
-    // }
+    @media #{$medium-up}{
+      .side{ @include inlineblock(); vertical-align: top; }
+      .group-sideleft{ width:60%; }
+      .group-sideright{ width:39%; }
+    }
 
-    // @media $max-480{
+    // @media #{$small-up}{
 
-    // } change this
+    // } // change this
 } // who-we-are
 
 /** DIDACTIQUE */
 .page-whoweare{
   #tool-bar{
-    // @media $max-480{
-    //   #block-materio-page-title-materio-page-title{display:none;}
-    // } // chanhe this
+    @media #{$small-only}{
+      #block-materio-page-title-materio-page-title{display:none;}
+    } // chanhe this
   }
 } // didactique
 
@@ -2414,4 +2439,4 @@ body.page-node-11187{
     max-width:50%;
     height:auto;
   }
-} // faq
+}