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

big update for home v2

Browse Source
This commit is contained in:
Bachir Soussi Chiadmi
2015-06-03 17:02:24 +02:00
parent 49004d7fee
commit 3ffbc09c10
26 changed files with 4210 additions and 1461 deletions
Download Patch File Download Diff File Expand all files Collapse all files

20
sites/all/themes/gui/materiobasetheme/scss/colors.scss Normal file
View File

@@ -0,0 +1,20 @@
/*
__
_________ / /___ __________
/ ___/ __ \/ / __ \/ ___/ ___/
/ /__/ /_/ / / /_/ / / (__ )
\___/\____/_/\____/_/ /____/
*/
$creme : #f7f8f2;
$orange : rgb(255,116,0);
$bleumarine : rgb(27,20,100);
$vertgris : rgb(95,159,131);
$jaune : rgb(230,222,28);
$bleuclair : rgb(105,205,207);
$rose : rgb(212,118,174);
$vertclair : rgb(121,230,68);
$violet : rgb(119,46,136);
$rouge : rgb(230,35,38);
$bleu : rgb(52,79,193);

62
sites/all/themes/gui/materiobasetheme/scss/layout.scss
View File

@@ -22,16 +22,17 @@
// 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, ... */
$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;
@@ -62,6 +63,9 @@ $retina: (
"#{$screen} and (min-resolution: 192dpi)",
"#{$screen} and (min-resolution: 2dppx)"
);
*/
$row-width: rem-calc(1280);
*{
box-sizing: content-box;
@@ -118,41 +122,40 @@ $rootminwidth : 320px;
/** NIVEAU 0 */
#root{
min-width:$rootminwidth;
.ie8 &{min-width:1024px;}
}
/** NIVEAU 1 */
#container{
margin:0 auto; position:relative;
#container{
margin:0 auto; position:relative;
@include transition(padding-top 0.5s ease-out); // change this
// padding:0 1em;
}
/** NIVEAU 2 */
@mixin padded(){ $p:2%; width:100%-2*$p; padding-left:$p; padding-right:$p; }
// @mixin padded(){width:100%;}
$header-z-index:1000;
#header{
@media #{$medium-up}{
position:fixed; top:0; margin:0 auto; @include bgc(#fff); min-width:$rootminwidth*0.97;
position:fixed; top:0; margin:0 auto; background-color: #fff; min-width:$rootminwidth*0.97;
} //change this
z-index:$header-z-index;
@include padded;
.editmenu-enabled &{ @include mt(30px); }
.admin-menu &{ @include mt(35px); }
.admin-menu &{ margin-top:35px; }
}
#utilities{
@media #{$medium-up}{
html.no-touch &{
position:fixed; top:0; margin:0 auto; min-width:$rootminwidth*0.97;
@include mt(60px);
margin-top:60px;
}
html.no-touch .editmenu-enabled &{ @include mt(80px); }
html.no-touch .admin-menu &{ @include mt(85px); }
html.no-touch .admin-menu &{ margin-top:85px; }
}
@media #{$small-only}{
>.region{@include pt(5px); @include pb(5px);}
>.region{padding-top:5px; padding-bottom:5px;}
} //change this
z-index:999;
@include bgc(#fff);
@@ -160,9 +163,14 @@ $header-z-index:1000;
}
#main{@include padded; overflow-x:hidden;}
#main{
@include padded;
overflow-x:hidden;
}
#footer{@include padded;}
#footer{
@include padded;
}
/** NIVEAU 3 */
@@ -176,11 +184,29 @@ $header-z-index:1000;
// .footer-block .region, .header-block{ @include inlineblock();} change this
/** NIVEAU 4 */
#center{ padding:5px; }
#center{
//padding:5px;
}
/** Z-INDEX */
#block-feedback-form{z-index:1001;}
#admin-menu{z-index:1002;}
#admin-toolbar{z-index:1003;}
/*
__ __ ___
/ / / /___ ____ ___ ___ _ _|__ \
/ /_/ / __ \/ __ `__ \/ _ \ | | / /_/ /
/ __ / /_/ / / / / / / __/ | |/ / __/
/_/ /_/\____/_/ /_/ /_/\___/ |___/____/
*/
body.home-v2{
#header>.inner, #utilities>.inner, #main, #footer{
@include grid-row();
}
// #header,#utilities{
// position:relative;
// }
}

22
sites/all/themes/gui/materiobasetheme/scss/misc.scss
View File

@@ -1,5 +1,12 @@
//** Messages. */
/*
__ ___
/ |/ /__ ______________ _____ ____ _____
/ /|_/ / _ \/ ___/ ___/ __ `/ __ `/ _ \/ ___/
/ / / / __(__ |__ ) /_/ / /_/ / __(__ )
/_/ /_/\___/____/____/\__,_/\__, /\___/____/
/____/
*/
@mixin messages(){
padding: 9px;
margin: 0.5em 0 0;
@@ -237,4 +244,15 @@ a:hover {
/** devel */
.not-logged-in{
#tasks ul.tabs.primary{display:none;}
}
}
/*
__ _
____ _____/ /___ ___ (_)___ ____ ___ ___ ____ __ __
/ __ `/ __ / __ `__ \/ / __ \ / __ `__ \/ _ \/ __ \/ / / /
/ /_/ / /_/ / / / / / / / / / / / / / / / / __/ / / / /_/ /
\__,_/\__,_/_/ /_/ /_/_/_/ /_/ /_/ /_/ /_/\___/_/ /_/\__,_/
*/
#admin-menu{
top:0;
}

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

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