|
@@ -19,19 +19,24 @@
|
|
|
@import "../bower_components/foundation/scss/foundation/components/inline-lists";
|
|
|
@import "../bower_components/foundation/scss/foundation/components/buttons";
|
|
|
@import "../bower_components/foundation/scss/foundation/components/button-groups";
|
|
|
-// @import "../bower_components/foundation/scss/foundation/components/grid";
|
|
|
+@import "../bower_components/foundation/scss/foundation/components/grid";
|
|
|
// @import "../bower_components/foundation/scss/foundation/components/top-bar";
|
|
|
// @import "../bower_components/foundation/scss/foundation/components/block-grid";
|
|
|
|
|
|
|
|
|
@import "gui.scss";
|
|
|
|
|
|
+@import "colors.scss";
|
|
|
@import "fonts.scss";
|
|
|
@import "layout.scss";
|
|
|
@import "../fonts/icon/foundation-icons.css";
|
|
|
|
|
|
#root{
|
|
|
// background: #fff url('../img/beta-2.png') no-repeat 0px 0px;
|
|
|
+ body.home-v2 &{
|
|
|
+ background-color: $creme;
|
|
|
+ }
|
|
|
+
|
|
|
}
|
|
|
|
|
|
@mixin shadowBtn(){
|
|
@@ -490,7 +495,14 @@ $headerouterheight:$headerheight+$headerpaddingtop+$headerpaddingbottom;
|
|
|
}
|
|
|
}
|
|
|
}
|
|
|
+/*
|
|
|
+ __ _ ___ __ _
|
|
|
+ __ __/ /_(_) (_) /_(_)__ _____
|
|
|
+ / / / / __/ / / / __/ / _ \/ ___/
|
|
|
+/ /_/ / /_/ / / / /_/ / __(__ )
|
|
|
+\__,_/\__/_/_/_/\__/_/\___/____/
|
|
|
|
|
|
+*/
|
|
|
#utilities{
|
|
|
margin-top:$headerouterheight;
|
|
|
.not-logged-in &{ overflow:hidden; }
|
|
@@ -502,6 +514,19 @@ $headerouterheight:$headerheight+$headerpaddingtop+$headerpaddingbottom;
|
|
|
margin-top:0;
|
|
|
}
|
|
|
}
|
|
|
+/*
|
|
|
+ _
|
|
|
+ ____ ___ ____ _(_)___
|
|
|
+ / __ `__ \/ __ `/ / __ \
|
|
|
+ / / / / / / /_/ / / / / /
|
|
|
+/_/ /_/ /_/\__,_/_/_/ /_/
|
|
|
+*/
|
|
|
+#main{
|
|
|
+ body.home-v2 &{
|
|
|
+ padding-top:$headerouterheight;
|
|
|
+ }
|
|
|
+}
|
|
|
+
|
|
|
/*
|
|
|
__ _ __ ___ __ __ __
|
|
|
/ /_ (_)___ _/ /_ / (_)___ _/ /_ / /____ ____/ /
|
|
@@ -1079,7 +1104,6 @@ $cardfull_h:610px;
|
|
|
width:$w; height:$h;
|
|
|
@include inlineblock(); position:relative; margin:7px;
|
|
|
|
|
|
- //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); //change this commas
|
|
@@ -1634,8 +1658,6 @@ body.print-node-materiau{
|
|
|
{
|
|
|
padding-bottom: 1em;
|
|
|
}
|
|
|
-
|
|
|
-
|
|
|
}
|
|
|
|
|
|
/*
|
|
@@ -1684,9 +1706,6 @@ body.print-node-materiau{
|
|
|
margin-bottom: 2em;
|
|
|
}
|
|
|
|
|
|
-@import "misc.scss";
|
|
|
-
|
|
|
-
|
|
|
/*
|
|
|
___ __ ____________ __________ __ _______ __ __________________
|
|
|
/ | / / / /_ __/ __ \/ ____/ __ \/ |/ / __ \/ / / ____/_ __/ ____/
|
|
@@ -2753,51 +2772,172 @@ body.page-node-11187{
|
|
|
}
|
|
|
}
|
|
|
|
|
|
-// ------ HOME PAGE ---------
|
|
|
-#homev2{
|
|
|
- padding: 40px 40px;
|
|
|
- h2{font-size: 3.8em; font-weight: 500;}
|
|
|
+/*
|
|
|
+ __ __ _ _____
|
|
|
+ / / / /___ ____ ___ ___ | | / /__ \
|
|
|
+ / /_/ / __ \/ __ `__ \/ _ \ | | / /__/ /
|
|
|
+ / __ / /_/ / / / / / / __/ | |/ // __/
|
|
|
+/_/ /_/\____/_/ /_/ /_/\___/ |___//____/
|
|
|
+*/
|
|
|
+
|
|
|
+body.home-v2{
|
|
|
+ #center{
|
|
|
+ background-color: transparent;
|
|
|
+ padding:0;
|
|
|
+ }
|
|
|
+}
|
|
|
+
|
|
|
+#home-v2{
|
|
|
+ // padding: 40px 40px;
|
|
|
+ h2{font-size: 2.1em; font-weight: 300;}
|
|
|
a{color: #000};
|
|
|
- ul{margin-left: 0px;}
|
|
|
- li{padding:0px;}
|
|
|
- .menu {
|
|
|
- margin-left: 0px;
|
|
|
- li{display: inline-block;
|
|
|
- a{
|
|
|
- background-color: #4d4d4d;
|
|
|
+
|
|
|
+ .panel-separator{clear:both;}
|
|
|
+ >.panel-panel>div>.panel-pane {
|
|
|
+ // padding: 10px 15px;
|
|
|
+
|
|
|
+
|
|
|
+
|
|
|
+ &.pane-node{
|
|
|
+ @include rounded(5px);
|
|
|
+ overflow:hidden;
|
|
|
+ .pane-content, .node{
|
|
|
+ position:relative; width:100%; height:100%; overflow:hidden;
|
|
|
+ }
|
|
|
+
|
|
|
+ .links a{
|
|
|
+ background-color: rgba(255,255,255, 0.7);
|
|
|
@include rounded(5px);
|
|
|
- padding: 10px 10px;
|
|
|
- color: #FFF;
|
|
|
- font-size: 18px;
|
|
|
- font-weight: 700;
|
|
|
- &:hover{ background-color: #FFF; color:#4d4d4d;}
|
|
|
+ padding: 15px;
|
|
|
}
|
|
|
}
|
|
|
- }
|
|
|
- .pane-node {
|
|
|
- height:450px;
|
|
|
- margin-top: 40px;
|
|
|
- font-size: 1.25em;
|
|
|
- @include rounded(5px);
|
|
|
- padding: 20px 30px;
|
|
|
- .links a{
|
|
|
- background-color: rgba(255,255,255, 0.7);
|
|
|
- @include rounded(5px);
|
|
|
- padding: 15px;
|
|
|
+
|
|
|
+ &.intro-video{
|
|
|
+ height:auto;
|
|
|
+ background-color: #f7f8f2;
|
|
|
+ margin-top:0; padding-top:0;
|
|
|
+ .field-name-field-emvideo{
|
|
|
+ .embedded-video{
|
|
|
+ margin:0 auto;
|
|
|
+ @media #{$small-only}{
|
|
|
+ width:320px; height:180px;
|
|
|
+ }
|
|
|
+ @media #{$medium-only}{
|
|
|
+ width:640px; height:360px;
|
|
|
+ }
|
|
|
+ @media #{$large-only}{
|
|
|
+ width:800px; height:450px;
|
|
|
+ }
|
|
|
+ @media #{$xlarge-up}{
|
|
|
+ width:1024px; height:576px;
|
|
|
+ }
|
|
|
+ .player, iframe{
|
|
|
+ width:100%; height:100%;
|
|
|
+ }
|
|
|
+
|
|
|
+ }
|
|
|
+ }
|
|
|
+ .field-name-title-field{
|
|
|
+ display:none;
|
|
|
+ }
|
|
|
+
|
|
|
+ .field-name-body{
|
|
|
+ // @include grid-row();
|
|
|
+ margin-top:1em;
|
|
|
+ text-align: center;
|
|
|
+ p{
|
|
|
+ // @include grid-column(6);
|
|
|
+ text-align: left;
|
|
|
+ @include inlineblock();
|
|
|
+ width:35%; margin-left:2%;
|
|
|
+ font-size:0.756em;
|
|
|
+ }
|
|
|
+ }
|
|
|
+
|
|
|
}
|
|
|
- .content{
|
|
|
- margin-bottom: 20px;
|
|
|
+
|
|
|
+ &.pane-menu-menu-home-v2{
|
|
|
+ margin:2em 0;
|
|
|
+ ul.menu{
|
|
|
+ margin: 0px; text-align: center;
|
|
|
+ }
|
|
|
+ li{
|
|
|
+ margin:0 1em 0 0; padding:0px; list-style: none;
|
|
|
+ @include inlineblock();
|
|
|
+ a{
|
|
|
+ background-color: #4d4d4d;
|
|
|
+ @include rounded(5px);
|
|
|
+ padding: 5px 12px 7px;
|
|
|
+ color: $creme;
|
|
|
+ font-size: 18px;
|
|
|
+ font-weight: 500;
|
|
|
+ transition:opacity,background-color 0.2s ease-out;
|
|
|
+ }
|
|
|
+
|
|
|
+ &:nth-child(1){
|
|
|
+ // a{color:$orange;}
|
|
|
+ &:hover a{background-color: $orange; color:#4d4d4d;}
|
|
|
+ }
|
|
|
+ &:nth-child(2){
|
|
|
+ // a{color:$vertclair;}
|
|
|
+ &:hover a{background-color: $vertclair; color:#4d4d4d;}
|
|
|
+ }
|
|
|
+ &:nth-child(3){
|
|
|
+ // a{color:$bleuclair;}
|
|
|
+ &:hover a{background-color: $bleuclair; color:#4d4d4d;}
|
|
|
+ }
|
|
|
+ &:nth-child(4){
|
|
|
+ // a{color:$jaune;}
|
|
|
+ &:hover a{background-color: $jaune; color:#4d4d4d;}
|
|
|
+ }
|
|
|
+ &:nth-child(5){
|
|
|
+ // a{color:$rose;}
|
|
|
+ &:hover a{background-color: $rose; color:#4d4d4d;}
|
|
|
+ }
|
|
|
+ &:nth-child(6){
|
|
|
+ // a{color:$violet;}
|
|
|
+ &:hover a{background-color: $violet; color:#4d4d4d;}
|
|
|
+ }
|
|
|
+ &:nth-child(7){
|
|
|
+ // a{color:$rouge;}
|
|
|
+ &:hover a{background-color: $rouge; color:#4d4d4d;}
|
|
|
+ }
|
|
|
+ }
|
|
|
}
|
|
|
+
|
|
|
&.showroom{
|
|
|
- background: url("http://carnet-aux-petites-choses.fr/wp-content/uploads/2015/02/un-oeil-sur-la-matiere-materiO-26_gagaone.jpg");
|
|
|
+ height:450px;
|
|
|
+ margin-top: 15px;
|
|
|
+ background-color: #fff;
|
|
|
+ // background: url("http://carnet-aux-petites-choses.fr/wp-content/uploads/2015/02/un-oeil-sur-la-matiere-materiO-26_gagaone.jpg");
|
|
|
background-size: cover;
|
|
|
position: relative;
|
|
|
- .content{
|
|
|
- background-color: rgba(255,255,255, 0.7);
|
|
|
- width: 40%;
|
|
|
- @include rounded(5px);
|
|
|
- padding: 20px 30px;
|
|
|
+ .pane-content{
|
|
|
+ width:100%; height:100%; position:relative;
|
|
|
+ .node{position:absolute;height:100%;width:100%;}
|
|
|
+ .field-name-field-bandeau{
|
|
|
+ position:absolute; width:100%; height:100%; overflow:hidden;
|
|
|
+ img{width:100%; margin-top:-10%;}
|
|
|
+ }
|
|
|
+ .group-content{
|
|
|
+ position:relative;
|
|
|
+ z-index:2;
|
|
|
+ width:30%;
|
|
|
+ margin:3em 2em;
|
|
|
+ background-color: rgba(255,255,255, 0.7);
|
|
|
+ padding:1em;
|
|
|
+ @include rounded(5px);
|
|
|
+ .field-name-title-field{
|
|
|
+ font-size: 2.1em; font-weight: 300;
|
|
|
+ }
|
|
|
+ .field-name-body{
|
|
|
+ margin-top: 1em;
|
|
|
+ }
|
|
|
+ }
|
|
|
+
|
|
|
}
|
|
|
+
|
|
|
+
|
|
|
&:after{
|
|
|
content:url("../img/bulle.png");
|
|
|
transform: scale(0.8);
|
|
@@ -2808,10 +2948,28 @@ body.page-node-11187{
|
|
|
}
|
|
|
}
|
|
|
&.bdd{
|
|
|
+ height:450px;
|
|
|
+ margin-top: 30px;
|
|
|
background-color: #FFF;
|
|
|
position: relative;
|
|
|
.links a{background-color: #e6e6e6;}
|
|
|
- .pane-content{width:30%; float:right;}
|
|
|
+
|
|
|
+ .field-name-field-bandeau{
|
|
|
+ @include inlineblock(); width:60%;
|
|
|
+ }
|
|
|
+ .group-content{
|
|
|
+ @include inlineblock(); width:35%;
|
|
|
+ background-color: rgba(255,255,255, 0.7);
|
|
|
+ padding:1em;
|
|
|
+ @include rounded(5px);
|
|
|
+ .field-name-title-field{
|
|
|
+ font-size: 2.1em; font-weight: 300;
|
|
|
+ }
|
|
|
+ .field-name-body{
|
|
|
+ margin-top: 1em;
|
|
|
+ }
|
|
|
+ }
|
|
|
+
|
|
|
&:after{
|
|
|
content:url("../img/boule.png");
|
|
|
transform: scale(0.8);
|
|
@@ -2821,47 +2979,121 @@ body.page-node-11187{
|
|
|
}
|
|
|
}
|
|
|
&.formations{
|
|
|
+ position: relative;
|
|
|
+ height:300px;
|
|
|
+ margin-top: 30px;
|
|
|
background-color: #000;
|
|
|
color: #FFF;
|
|
|
- padding-right: 20%;
|
|
|
- position: relative;
|
|
|
a{color: #FFF;}
|
|
|
- .pane-title, .pane-content{/*width: 60%; float:right;*/}
|
|
|
- .pane-title:before{
|
|
|
- content:url("../img/formations.png");
|
|
|
- transform: scale(0.7);
|
|
|
- float: left;
|
|
|
- position: relative;
|
|
|
- top:-20px;
|
|
|
- margin: 0px 90px 0px 50px;
|
|
|
+
|
|
|
+ .node{
|
|
|
+ padding:0 0 0 30%; width:70%;
|
|
|
+
|
|
|
+ &:before{
|
|
|
+ content:" ";
|
|
|
+ background: transparent url("../img/formations.png") no-repeat center center;
|
|
|
+ background-clip: padding-box;
|
|
|
+ background-size: contain;
|
|
|
+ position: absolute; left:0;
|
|
|
+ // border: 1px solid red;
|
|
|
+ z-index: 2;
|
|
|
+ width:30%; height:100%;
|
|
|
+ // padding:0.5em;
|
|
|
+ }
|
|
|
+ }
|
|
|
+
|
|
|
+ .group-content{
|
|
|
+ padding:1em; position:relative;
|
|
|
+ .field-name-title-field{
|
|
|
+ font-size: 2.1em; font-weight: 300;
|
|
|
+ }
|
|
|
+ .field-name-body{
|
|
|
+ margin-top: 1em;
|
|
|
+ }
|
|
|
}
|
|
|
}
|
|
|
&.services{
|
|
|
background-color: #FFF;
|
|
|
- .pane-title, .pane-content{/*width: 60%; float:left;*/}
|
|
|
- .pane-title:before{
|
|
|
- content:url("../img/services.png");
|
|
|
- transform: scale(0.8);
|
|
|
- float: right;
|
|
|
- position: relative;
|
|
|
- top:-20px;
|
|
|
- margin: 0px 90px 0px 50px;
|
|
|
+ height:300px;
|
|
|
+ margin-top: 30px;
|
|
|
+
|
|
|
+ .node{
|
|
|
+ padding:0 30% 0 0; width:70%;
|
|
|
+
|
|
|
+ &:before{
|
|
|
+ content:" ";
|
|
|
+ background: transparent url("../img/services.png") no-repeat center center;
|
|
|
+ background-clip: padding-box;
|
|
|
+ background-size: contain;
|
|
|
+ position: absolute; right:0;
|
|
|
+ // border: 1px solid red;
|
|
|
+ z-index: 2;
|
|
|
+ width:30%; height:100%;
|
|
|
+ // padding:0.5em;
|
|
|
+ }
|
|
|
+ }
|
|
|
+
|
|
|
+ .group-content{
|
|
|
+ padding:1em; position:relative;
|
|
|
+ .field-name-title-field{
|
|
|
+ font-size: 2.1em; font-weight: 300;
|
|
|
+ }
|
|
|
+ .field-name-body{
|
|
|
+ margin-top: 1em;
|
|
|
+ }
|
|
|
}
|
|
|
}
|
|
|
}
|
|
|
//mini panneau news
|
|
|
- .pane-news-home-v2{
|
|
|
- margin-top: 40px;
|
|
|
+ >.panel-panel>div>.pane-news-home-v2{
|
|
|
+ background-color: #e6e6e6; @include rounded(10px);
|
|
|
+ margin-top: 30px; padding-top: 1em;
|
|
|
+ // padding:0;
|
|
|
position: relative;
|
|
|
// .panel-col-first{width:70%;}
|
|
|
// .panel-col-last{width:29.9%;}
|
|
|
h2{font-size: 30px;}
|
|
|
+
|
|
|
+ #mini-panel-news_home_v2 .center-wrapper{
|
|
|
+ @include grid-row();
|
|
|
+ .panel-panel{
|
|
|
+ overflow:hidden;
|
|
|
+ .inside{margin:0;}
|
|
|
+ }
|
|
|
+ .panel-col-first{@include grid-column(7);}
|
|
|
+ .panel-col-last{@include grid-column(4);}
|
|
|
+ }
|
|
|
+ #mini-panel-news_home_v2 .panel-col-bottom{
|
|
|
+ @include grid-row(); margin-top: 1.5em; margin-bottom: 1.5em;
|
|
|
+ >.inside{
|
|
|
+ @include grid-column(12);
|
|
|
+ }
|
|
|
+ }
|
|
|
+
|
|
|
.view-news-home-v2{
|
|
|
- .views-row{width: 30%; display: inline-block;}
|
|
|
+ .views-row{@include inlineblock();}
|
|
|
}
|
|
|
.node-simplenews{
|
|
|
- h1{background-color: #FFF; text-align: center; padding: 20px;}
|
|
|
+ @include rounded(5px); background-color: #FFF;
|
|
|
+ @include drop-shadow(0, 0, 5px, 0.2);
|
|
|
+ @include transition-simply-prefix(box-shadow 0.3s ease-out);
|
|
|
+ overflow:hidden;
|
|
|
+ position:relative;
|
|
|
+ margin:7px;
|
|
|
+ >a{
|
|
|
+ position:absolute;
|
|
|
+ bottom:0; width:100%;
|
|
|
+ background-color: #FFF;
|
|
|
+ text-align: center;
|
|
|
+ h1{
|
|
|
+ padding: 10px; margin:0;
|
|
|
+ font-size:1em;
|
|
|
+ }
|
|
|
+ }
|
|
|
+
|
|
|
}
|
|
|
+
|
|
|
+ //deco
|
|
|
&:after{
|
|
|
content:url("../img/point.png");
|
|
|
//transform: scale(1);
|
|
@@ -2870,4 +3102,11 @@ body.page-node-11187{
|
|
|
right: 0px;
|
|
|
}
|
|
|
}
|
|
|
-}
|
|
|
+}
|
|
|
+
|
|
|
+
|
|
|
+
|
|
|
+
|
|
|
+
|
|
|
+@import "misc.scss";
|
|
|
+// end
|