bachir/jeunes-et-engages-d7
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

BIG BIG BIG update

Browse Source 
V0 of first interface
going to refactor JS
This commit is contained in:
Bachir Soussi Chiadmi
2015-03-06 11:40:59 +01:00
parent e61e4c779d
commit 81f57b8f4e
153 changed files with 27621 additions and 356 deletions
Download Patch File Download Diff File Expand all files Collapse all files
sites/all/themes/gui/jee/css/jee.scss
+293 -20
View File
@@ -1,12 +1,6 @@
@charset "UTF-8";
@import "../bower_components/foundation/scss/normalize.scss";
@import "../bower_components/foundation/scss/foundation/functions";
$row-width: rem-calc(1250);
@@ -23,14 +17,12 @@ $column-gutter: rem-calc(20);
@import "../bower_components/foundation/scss/foundation/components/block-grid";
// @import "../bower_components/foundation/scss/foundation.scss"; // without importing the whole foundation, the final css files is 75% less heavier
// @import "../bower_components/animate.scss/scss/animate.scss";
/*
* ESADHaR
*/
@import "communs.scss";
@import "fonts.scss";
@import "misc.scss";
html{
@@ -41,25 +33,18 @@ body{
position:relative;
height:100%!important;
/* IE10 Consumer Preview */
/* IE10 Consumer Preview */
background-image: -ms-linear-gradient(top, #FFFDE9 0%, #BECFD9 100%);
/* Mozilla Firefox */
background-image: -moz-linear-gradient(top, #FFFDE9 0%, #BECFD9 100%);
/* Opera */
background-image: -o-linear-gradient(top, #FFFDE9 0%, #BECFD9 100%);
/* Webkit (Safari/Chrome 10) */
background-image: -webkit-gradient(linear, left top, left bottom, color-stop(0, #FFFDE9), color-stop(1, #BECFD9));
/* Webkit (Chrome 11+) */
background-image: -webkit-linear-gradient(top, #FFFDE9 0%, #BECFD9 100%);
/* W3C Markup, IE10 Release Preview */
background-image: linear-gradient(to bottom, #FFFDE9 0%, #BECFD9 100%);
}
#root{
@@ -94,7 +79,11 @@ body{
100% {opacity:0;}
}
$animeLogoDuration:12s;
body{
user-select:none;
}
$animeLogoDuration:8s;
#header{
position:absolute;
@@ -104,6 +93,10 @@ $animeLogoDuration:12s;
top:50%; left:50%;
margin-left:-350px;
margin-top:-155px;
transition-property: "transform";
transition-duration: 0.2s;
transition-timing-function:ease-out;
animation-fill-mode: forwards;
h1{
position:absolute;
@@ -130,7 +123,6 @@ $animeLogoDuration:12s;
}
}
h2{
background: transparent url('../assets/img/slogan.svg') no-repeat center center;
position:absolute;
@@ -141,11 +133,292 @@ $animeLogoDuration:12s;
animation-fill-mode: forwards;
}
} // #header
div.messages{
position:absolute;
top:20px; right:20px;
width:250px; max-height:30%;
overflow-y:auto;
}
#main{
position:absolute;
width:100%; height:100%;
&>.region, &>.region>.block-system, &>.region>.block-system>.content{
position:relative;
width:100%; height:100%;
}
.node-chapitre.node-teaser{
position:absolute;
transition: transform 0.2s ease-out;
// animation-fill-mode: forwards;
// INTERACTIVITÉ - - - - - - - - - - - --
// ----- DEFAULT MODE ----
.field-name-field-comprendre{
opacity:0; height:1px; overflow:hidden;
transition:1s ease-out;
transition-property:opacity height;
}
.field-name-field-partie{
opacity:0;
position:absolute;
transition:1s ease-out 1s;
transition-property: transform opacity;
// just let see the field vignette of first partie
&:nth-child(3){
z-index:2;
opacity:1;
transition-delay:0;
>.field-type-text{
opacity:0;
transition:1s ease-out;
transition-property: opacity;
}
>.field-name-field-vignette{cursor:pointer;z-index:2;}
}
}
// &.closed .field-name-field-partie{
// transform:none!important;
// }
.links{
opacity:0;>*{display:none;}
transition:1s ease-out 1s;
transition-property:opacity;
}
&:after{
opacity:0;
// display:none;
transition: 3s ease-out;
transition-property:opacity;
}
// ----- PREVIEW MODE ------
&.previewed{
&:after{opacity:1;}
.field-name-field-comprendre{opacity:1; height:6em;}
.links{opacity:1;>*{display:block;}}
.field-name-field-partie{
opacity:1; z-index:0;
// display all fields inside each parties
>.field{opacity:1;z-index:-1; cursor:default;}
}
}
// ------- GENERALS (non interactive) - - - - - - - - - - - - - - - - - -
&:after{ // background
content:" ";
background-size:contain;
// background-clip: content-box;
background-repeat: no-repeat;
position:absolute;
$pad:-2em;
top:-$pad;
left:$pad*6; right:$pad*6;
bottom:$pad*15;
// border: 1px solid blue;
z-index:-1;
}
h2.node-title{
font-family: "epflulb";
font-weight:normal;
text-transform: uppercase;
text-align: center;
max-width: 8.5em;
line-height: 1.1em;
@media #{$large-up} {
font-size: 1.3em;
}
@media #{$xlarge-up} {
font-size:1.8em;
}
z-index: 5;
}
.field-name-field-comprendre{
h1,h2,h3,h4,h5,h6{display:none!important;}
max-width:15em;
p{margin:0;}
}
.field-name-field-partie{clear:both; padding-top:1em;}
.field-name-field-vignette{
position:relative;
float:left;
$shadow-size:3.5em;
padding:$shadow-size;
margin-top:-$shadow-size*1.15;
margin-right:-$shadow-size+1.5em;
margin-bottom:0;
margin-left:0;
background-size: contain;
background-repeat: no-repeat;
background-origin: center center;
}
.field-type-text{
min-width:14em;
}
.field-name-field-titre{
font-family: "epflul";
font-size:1.6em;
line-height:1.1;
}
.field-name-field-sous-titre{
font-family: "epflul";
font-size:1.4em;
line-height:1.2;
}
.field-name-field-description{
// font-family: "epf-lul";
font-size:0.88em;
line-height:1.2;
}
ul.links{
margin:0; text-align: right; z-index:5; position:relative;
li.node-readmore{
padding:0;
a{
display:inline-block;
height:25px;
font-family: "open_sans";
font-weight: 900;
color:#000!important;
width:8em; text-align: left;
background: transparent url(../assets/img/readmore-btn.svg) no-repeat right center;
}
}
}
} // node-chapitre
// COLORS BY NODE - - - - - - - - - - - - - - - - - - - - -
$bs-blur:100px;
$bs-size:25px;
//SOL
#node-2{
&::after{
background-image : url(../assets/img/bgd-sol.svg);
}
&, a{color:$SOL-col-txt;}
h2.node-title{&,a{color:$SOL-color;}}
.field-name-field-vignette{
// background-image:url(../assets/img/shadow-sol.svg);
background-image:url(../assets/img/shadow-sol.svg);
}
// .field-name-field-vignette::before{
// box-shadow: 0 0 $bs-blur $bs-size $SOL-color;
// }
}
//DPH
#node-3{
&::after{
background-image : url(../assets/img/bgd-dph.svg);
}
&, a{color:$DPH-col-txt;}
h2.node-title{&,a{color:$DPH-color;}}
.field-name-field-vignette{
// background-image:url(../assets/img/shadow-dph.png);
background-image:url(../assets/img/shadow-dph.svg);
}
// .field-name-field-vignette::before{
// box-shadow: 0 0 $bs-blur $bs-size $DPH-color;
// }
}
// SUB
#node-4{
&::after{
background-image : url(../assets/img/bgd-sub.svg);
}
&, a{color:$SUB-col-txt;}
h2.node-title{&,a{color:$SUB-color;}}
.field-name-field-vignette{
// background-image:url(../assets/img/shadow-sub.png);
background-image:url(../assets/img/shadow-sub.svg);
}
// .field-name-field-vignette::before{
// box-shadow: 0 0 $bs-blur $bs-size $SUB-color;
// }
}
// BC
#node-5{
&::after{
background-image : url(../assets/img/bgd-bc.svg);
}
&, a{color:$BC-col-txt;}
h2.node-title{&,a{color:$BC-color;}}
.field-name-field-vignette{
// background-image:url(../assets/img/shadow-bc.png);
background-image:url(../assets/img/shadow-bc.svg);
}
// .field-name-field-vignette::before{
// box-shadow: 0 0 $bs-blur $bs-size $BC-color;
// }
}
//OPP
#node-6{
&::after{
background-image : url(../assets/img/bgd-opp.svg);
}
&, a{color:$OPP-col-txt;}
h2.node-title{&,a{color:$OPP-color;}}
.field-name-field-vignette{
// background-image:url(../assets/img/shadow-opp.png);
background-image:url(../assets/img/shadow-opp.svg);
}
// .field-name-field-vignette::before{
// box-shadow: 0 0 $bs-blur $bs-size $OPP-color;
// }
}
//DUB
#node-7{
&::after{
background-image : url(../assets/img/bgd-dub.svg);
}
&, a{color:$DUB-col-txt;}
h2.node-title{&,a{color:$DUB-color;}}
.field-name-field-vignette{
// background-image:url(../assets/img/shadow-dub.png);
background-image:url(../assets/img/shadow-dub.svg);
}
// .field-name-field-vignette::before{
// box-shadow: 0 0 $bs-blur $bs-size $DUB-color;
// }
}
// JUSO
#node-8{
&::after{
background-image : url(../assets/img/bgd-juso.svg);
}
&, a{color:$JUSO-col-txt;}
h2.node-title{&,a{color:$JUSO-color;}}
.field-name-field-vignette{
// background-image:url(../assets/img/shadow-juso.png);
background-image:url(../assets/img/shadow-juso.svg);
}
// .field-name-field-vignette::before{
// box-shadow: 0 0 $bs-blur $bs-size $JUSO-color;
// }
}
.chapter-wrapper{
position:absolute;
top:0; left:0; bottom:0; right:0;
}
} // main
#footer{
position:fixed;
bottom:0;
bottom:0; right:0;
.block{
display:inline-block;
vertical-align: top;