bachir/materio-base-legacy
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

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

Browse Source
This commit is contained in:
sarah garcin
2015-04-30 16:36:41 +02:00
parent 0ba300fe22
commit 23c085213e
10 changed files with 1934 additions and 1132 deletions
Download Patch File Download Diff File Expand all files Collapse all files

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

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