refactoring - transition + media queries - bug with icon and princing grid
This commit is contained in:
sarah garcin
parent
0ba300fe22
commit
23c085213e
Binary file not shown.
Binary file not shown.
Binary file not shown.
Binary file not shown.
@ -1,23 +1,23 @@
|
||||
/*
|
||||
Error: Undefined mixin 'transition'.
|
||||
on line 45 of /home/sarahgarcin/Sites/materio/base_d7/sites/all/themes/gui/materiobasetheme/scss/layout.scss, in `transition'
|
||||
from line 45 of /home/sarahgarcin/Sites/materio/base_d7/sites/all/themes/gui/materiobasetheme/scss/layout.scss
|
||||
on line 104 of /home/sarahgarcin/Sites/materio/base_d7/sites/all/themes/gui/materiobasetheme/scss/layout.scss, in `transition'
|
||||
from line 104 of /home/sarahgarcin/Sites/materio/base_d7/sites/all/themes/gui/materiobasetheme/scss/layout.scss
|
||||
|
||||
40: }
|
||||
41:
|
||||
42: /** NIVEAU 1 *\/
|
||||
43: #container{
|
||||
44: margin:0 auto; position:relative;
|
||||
45: @include transition(padding-top 0.5s ease-out); // change this
|
||||
46: }
|
||||
47:
|
||||
48: /** NIVEAU 2 *\/
|
||||
49: @mixin padded(){ $p:2%; width:100%-2*$p; padding-left:$p; padding-right:$p; }
|
||||
50:
|
||||
99: }
|
||||
100:
|
||||
101: /** NIVEAU 1 *\/
|
||||
102: #container{
|
||||
103: margin:0 auto; position:relative;
|
||||
104: @include transition(padding-top 0.5s ease-out); // change this
|
||||
105: }
|
||||
106:
|
||||
107: /** NIVEAU 2 *\/
|
||||
108: @mixin padded(){ $p:2%; width:100%-2*$p; padding-left:$p; padding-right:$p; }
|
||||
109:
|
||||
|
||||
Backtrace:
|
||||
/home/sarahgarcin/Sites/materio/base_d7/sites/all/themes/gui/materiobasetheme/scss/layout.scss:45:in `transition'
|
||||
/home/sarahgarcin/Sites/materio/base_d7/sites/all/themes/gui/materiobasetheme/scss/layout.scss:45
|
||||
/home/sarahgarcin/Sites/materio/base_d7/sites/all/themes/gui/materiobasetheme/scss/layout.scss:104:in `transition'
|
||||
/home/sarahgarcin/Sites/materio/base_d7/sites/all/themes/gui/materiobasetheme/scss/layout.scss:104
|
||||
/usr/lib/ruby/gems/2.2.0/gems/compass-1.0.3/vendor/bundle/ruby/2.2.0/gems/sass-3.4.13/lib/sass/tree/visitors/perform.rb:348:in `block in visit_mixin'
|
||||
/usr/lib/ruby/gems/2.2.0/gems/compass-1.0.3/vendor/bundle/ruby/2.2.0/gems/sass-3.4.13/lib/sass/stack.rb:98:in `block in with_mixin'
|
||||
/usr/lib/ruby/gems/2.2.0/gems/compass-1.0.3/vendor/bundle/ruby/2.2.0/gems/sass-3.4.13/lib/sass/stack.rb:115:in `with_frame'
|
||||
@ -71,4 +71,4 @@ Backtrace:
|
||||
body:before {
|
||||
white-space: pre;
|
||||
font-family: monospace;
|
||||
content: "Error: Undefined mixin 'transition'.\A on line 45 of /home/sarahgarcin/Sites/materio/base_d7/sites/all/themes/gui/materiobasetheme/scss/layout.scss, in `transition'\A from line 45 of /home/sarahgarcin/Sites/materio/base_d7/sites/all/themes/gui/materiobasetheme/scss/layout.scss\A \A 40: }\A 41: \A 42: /** NIVEAU 1 */\A 43: #container{ \A 44: margin:0 auto; position:relative; \A 45: @include transition(padding-top 0.5s ease-out); // change this\A 46: }\A 47: \A 48: /** NIVEAU 2 */\A 49: @mixin padded(){ $p:2%; width:100%-2*$p; padding-left:$p; padding-right:$p; }\A 50: "; }
|
||||
content: "Error: Undefined mixin 'transition'.\A on line 104 of /home/sarahgarcin/Sites/materio/base_d7/sites/all/themes/gui/materiobasetheme/scss/layout.scss, in `transition'\A from line 104 of /home/sarahgarcin/Sites/materio/base_d7/sites/all/themes/gui/materiobasetheme/scss/layout.scss\A \A 99: }\A 100: \A 101: /** NIVEAU 1 */\A 102: #container{ \A 103: margin:0 auto; position:relative; \A 104: @include transition(padding-top 0.5s ease-out); // change this\A 105: }\A 106: \A 107: /** NIVEAU 2 */\A 108: @mixin padded(){ $p:2%; width:100%-2*$p; padding-left:$p; padding-right:$p; }\A 109: "; }
|
||||
|
||||
File diff suppressed because it is too large
Load Diff
@ -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;
|
||||
-webkit-transition: $property, $speed;
|
||||
-moz-transition: $property, $speed;
|
||||
-o-transition: $property, $speed;
|
||||
transition: $property, $speed;
|
||||
}
|
||||
//$parameters:($property, $duration, $transitiondelay, "ease-out");
|
||||
$parameters:("all", 0s, "ease-out");
|
||||
@mixin transition($parameters)
|
||||
|
||||
@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)
|
||||
{
|
||||
|
||||
@ -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;
|
||||
|
||||
@ -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
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
@ -67,13 +67,35 @@
|
||||
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);
|
||||
}
|
||||
}
|
||||
.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);
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
@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;
|
||||
>*{
|
||||
@ -81,12 +103,12 @@
|
||||
}
|
||||
.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);
|
||||
}
|
||||
}
|
||||
}
|
||||
} // change this
|
||||
|
||||
@mixin bouton(){
|
||||
@include fs16();
|
||||
@ -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;
|
||||
@media #{$medium-up}{
|
||||
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%; }
|
||||
.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{}
|
||||
.field-name-title-field{@include fs24;}
|
||||
// .field-name-field-visuel{}
|
||||
|
||||
// .node.emvideo{
|
||||
// .group-sideleft, .group-sideright{ width:47%; }
|
||||
// .group-sideleft{.mr(2%);}
|
||||
// // .field-name-field-visuel{display:none;}
|
||||
// }
|
||||
.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%;.p(5px); height:290px;
|
||||
// }
|
||||
// }
|
||||
}
|
||||
#block-materio-user-user-register{
|
||||
width:30%; padding:5px; height:290px;
|
||||
}
|
||||
}
|
||||
|
||||
// @media $min-480{
|
||||
// .block-materio-didactique{
|
||||
// .side{.inlineblock(); vertical-align: top;}
|
||||
// }
|
||||
// }
|
||||
@media #{$small-up}{
|
||||
.block-materio-didactique{
|
||||
.side{@include inlineblock(); vertical-align: top;}
|
||||
}
|
||||
}
|
||||
|
||||
// @media $max-768{
|
||||
// .m(10px 0 6px);
|
||||
// .block-materio-didactique{
|
||||
// .group-sideleft, .group-sideright{ width:100%; }
|
||||
// .field-name-title-field{ .20; cursor:pointer; }
|
||||
@media #{$small-only}{
|
||||
margin:10px 0 6px;
|
||||
.block-materio-didactique{
|
||||
.group-sideleft, .group-sideright{ width:100%; }
|
||||
.field-name-title-field{@include fs20; cursor:pointer; }
|
||||
|
||||
// .node-didactique:not(:first-child){
|
||||
// .field-name-title-field{ font-weight:normal; &:before{content:"- ";}}
|
||||
// }
|
||||
.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;}
|
||||
// }
|
||||
// }
|
||||
// }
|
||||
html.js & .node-didactique{
|
||||
height:auto;
|
||||
height:25px; overflow: hidden;
|
||||
&.opened{height:auto;}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
// @media @480-768{
|
||||
// .block-materio-didactique{
|
||||
// // .pt(150px);
|
||||
// .group-sideleft{ width:50%; }
|
||||
// .group-sideright{ width:50%; }
|
||||
// }
|
||||
// } change this
|
||||
@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%;
|
||||
// }
|
||||
// }
|
||||
// }
|
||||
@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%;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
// #block-materio-user-user-register{
|
||||
// width:600px; margin: 0 auto;
|
||||
// }
|
||||
//}change this
|
||||
#block-materio-user-user-register{
|
||||
width:600px; margin: 0 auto;
|
||||
}
|
||||
}
|
||||
|
||||
// @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;}
|
||||
// }
|
||||
@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
|
||||
}
|
||||
Loading…
x
Reference in New Issue
Block a user