Bachir Soussi Chiadmi deb2bff572 print fine tuning
2016-01-21 12:02:55 +01:00

3462 lines
91 KiB
SCSS

/**
* Primary Drupal Styles
* Author: g-u-i.net
*/
//@charset "UTF-8";
@import "../bower_components/foundation/scss/normalize.scss";
@import "../bower_components/foundation/scss/foundation/functions";
// $row-width: rem-calc(1250);
// $total-columns: 12;
// $column-gutter: rem-calc(20);
//@import "../bower_components/foundation/scss/foundation/settings"; // this is not working, causing an error on compilation
@import "../bower_components/foundation/scss/foundation/components/global";
@import "../bower_components/foundation/scss/foundation/components/type";
@import "../bower_components/foundation/scss/foundation/components/clearing";
@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/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";
@mixin shadowBtn(){
@include drop-shadow(0, 0, 5px, 0.4);
@include transition-simply-prefix(box-shadow 0.3s ease-out);
&:hover, &:focus{
@include drop-shadow(0, 0, 5px, 0.7);
}
&:active{
@include transition-simply-prefix(box-shadow 0s ease-out);
@include drop-shadow(0, 0, 5px, 0.4);
}
}
@mixin shadowTextBtnWhite(){
cursor:pointer;
text-shadow:0 0 2px rgba(255, 255, 255, 0.2);
@include transition-simply-prefix(text-shadow 0.3s ease-out);
&:hover, &:focus{
text-shadow:0 0 3px rgba(255, 255, 255, 1);
}
&:active{
@include transition-simply-prefix(text-shadow 0s ease-out);
text-shadow:0 0 2px rgba(255, 255, 255, 0.2);
}
}
@mixin shadowTextBtnBlack(){
cursor:pointer;
text-shadow:0 0 2px rgba(0, 0, 0, 0.2);
@include transition-simply-prefix(text-shadow 0.2s ease-out);
&:hover, &:focus{
text-shadow:0 0 2px rgba(0, 0, 0, 0.8);
}
&:active{
@include transition-simply-prefix(text-shadow 0s ease-out);
text-shadow:0 0 2px rgba(0, 0, 0, 0.2);
}
}
@mixin horihoverswitch(){
position:relative; z-index:1; background-color:#fff;
figure{
position: absolute; top:0; left:0;
&:first-child{ position:relative; z-index:1; }
}
}
@mixin layer(){
position:absolute; width:100%; height:100%; top:0; left:0;
}
.op-visible{
visibility:visible;
.csstransitions &{
opacity:1;
@include transition-simply-prefix(opacity 0.3s ease-out);
}
}
.op-hidden{
visibility:hidden;
>*{
margin-top:-100000px;
}
.csstransition &{
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 &{
opacity:1;
@include transition-simply-prefix(opacity 0.3s ease-out);
}
} // change this
@mixin op-hidden(){
visibility:hidden;
>*{
margin-top:-100000px;
}
.csstransition &{
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);
}
}
} // change this
@mixin bouton(){
@include fs16();
font-weight:bold;
padding: 0.1em 0.3em 0.2em; @include rounded(0.3em);
border: 2px solid #ccc; background-color:#ccc; color:#4D4D4D; // blanc/bleu
@include shadowTextBtnWhite();
text-align: center; text-decoration: none;
}
@mixin bouton-bleu(){
@include bouton();
@include shadowTextBtnBlack();
border-color:#69CDCF; background-color:#69CDCF; color:#fff;
}
@mixin bouton-vert(){
@include bouton();
@include shadowTextBtnBlack();
border-color:#E6DE1C; background-color:#E6DE1C; color:#fff;
}
/** colomnized() */
@mixin columnized($padding){
padding : $padding;
&.columnized{
padding: 0;
.column>*{padding:$padding;}
@include transition-simply-prefix(margin-left 0.3s ease-out);
.column-switcher{
display:inline-block; @include rounded(3px); color:#fff; background-color: #3e3e3e; vertical-align:middle;
@include fs700(); @include fs22;
padding: 0.05em 0.15em 0.2em 0.2em; line-height:0.5;
@include regular;
&.prev-column{cursor: w-resize;}
&.next-column{cursor: e-resize;}
}
}
}
@mixin bgcWhite(){
background-color: rgba(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); //change this
}
@mixin bgcBlack(){
background-color: rgba(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); //change this
}
// .bgcWhiteParentHover(){
// background-color: rgba(255, 255, 255, 0.2);
// text-shadow:0 0 4px rgba(255, 255, 255, 0.9);
// &:hover{
// @include bgcWhite();
// }
// }
$headerheight:45px;
$headerpaddingtop:5px;
$headerpaddingbottom:10px;
$headerouterheight:$headerheight+$headerpaddingtop+$headerpaddingbottom;
/*
__ ___________ ____ __________
/ / / / ____/ | / __ \/ ____/ __ \
/ /_/ / __/ / /| | / / / / __/ / /_/ /
/ __ / /___/ ___ |/ /_/ / /___/ _, _/
/_/ /_/_____/_/ |_/_____/_____/_/ |_|
*/
#header{
padding-top:$headerpaddingtop;
padding-bottom:$headerpaddingbottom;
height:$headerheight;
// position:relative;
// @include drop-shadow(0, 3px, 2px, 0.4); margin-bottom:5px;
a{&, &:active, &:visited{color:#000;}}
// .logo, #header-blocks{@include inlineblock(); vertical-align:middle;}
.logo{
//width:210px; //padding-left:5px; //margin-left:50px;
@include inlineblock();
h1{
margin:0;
@include fs36;
@include inlineblock(); vertical-align: baseline; position:relative; line-height:1.25;
a:hover{text-decoration: none ;}
}
span.slogan{
@include fs14;
margin-top:-3px;
margin-left:-0.5em;
@include fs900;
@media #{$small-only} {display:none;}
@media #{$medium-only} {display:none;}
.ie8 &{position: absolute; margin-top:22px;}
}
}
#header-blocks{
//position:absolute; right:0; bottom:0;
padding-top:17px;
float:right;
text-align:right;
text-transform: capitalize;
>.region{
@include inlineblock();vertical-align:middle;
padding-right:1em; margin-right:1em;
@media #{$small-only and $medium-only}{ padding-right:0.3em; margin-right:0.3em; }//change this
border-right: 1px solid #707070;
&:last-child{border:none; padding: 0; margin: 0;}
}
.block{
@include inlineblock(); vertical-align:middle;
h2{
@include fs12;
margin: 0; line-height: 1.2; font-weight: normal; }
&:not(:last-child){
padding-right:0.8em;
@media #{$xlarge-only}{ padding-right:0.3em; } //change this
}
}
#block-materio-user-front-link{
a{
@include fs12;
// line-height: 1.2;
}
// i{ vertical-align: text-bottom; margin: 0 2px 0px 0;}
span.text{ display:none; }
}
#block-user-login{
@include fs12;
text-align:left; position:relative;
h2{
padding-right:5px;
// .icon-user;
i{ vertical-align: text-bottom; margin: 0 2px 2px 0;}
}
form#user-login-form{
position:absolute; overflow:hidden; right:0; margin: 0;
height:0;
@include transition-simply-prefix(height 0.3s ease-out);
&>div{
padding: 5px; margin: 5px;
background-color: #e6e6e6; @include rounded(5px); @include drop-shadow(0, 0, 5px, 0.2);
}
.form-item{margin: 0; padding-bottom:5px;}
label,input{
margin: 0;
@include fs10;
}
// label{width:30%;}
input.form-text{
width:150px; height:2em;
}
.form-actions{
margin: 5px 0; padding: 0; background-color:transparent; text-align: right;
input.form-submit{
// @include fs12;
@include fs16; padding: 0.1em 0.6em 0.2em; @include rounded(0.3em);
font-weight:bold;
margin-bottom:4px;
border: 2px solid #E6DE1C; background-color:#E6DE1C; color:#fff; // noire/jaune
@include shadowTextBtnBlack();
}
}
div.newpass{
text-align: right;
a{
@include fs11;
color:#686868;
text-transform: lowercase;
}
}
// div.register a{
// display:block; padding: 10px 5px; background-color: #ccf718; font-weight:bold; text-align: center; .14;
// }
}
html.no-touch &:hover, &.hovered{
form#user-login-form{
height:300px;
&>div{
}
z-index:$header-z-index;
}
}
@media #{$small-only}{
span.login{display:none;}
} //change this
}
#block-ajax-register-ajax-register-block{
@include fs12;
text-transform: lowercase;
}
#block-logintoboggan-logintoboggan-logged-in{
@include fs12;
line-height:1.5;
i{
vertical-align: text-bottom;
margin: 0 5px 1px 0;
line-height:1;
}
a span.account{text-transform: lowercase;}
a span.logout{display:none; margin-left:5px; }
.fi-power{margin: 0 0.5em 0 0.5em;}
// @media #{$large-only}{ .fi-power{display: none;} }
@media #{$small-only}{a span.account{display:none;}}
@media #{$medium-only}{a span.account{display:none;}}
}
#block-materio-flag-materio-flag-mylists-nav{
position:relative;
h2{
margin: 0;
@include fs12;
line-height:1.5;
i{line-height:1;}
@media #{$small-only and $medium-only}{
span.menu-title{display:none;}
}
}// @include fs700;
section.mylists{
position:absolute; z-index:20; background-color: rgba(255, 255, 255, 0.9); min-width:100%; margin: 0 0 0 -5px;
@include rounded(3px); @include drop-shadow(-2px, 2px, 5px, 0.2);
.ie8 &{background:#FFF;}
ul{margin: 0;}
li{
list-style: none;
@include fs12; @include fs700;
padding: 0 10px; text-align: left; width:200px;
height:0; overflow:hidden; @include transition-simply-prefix(height 0.3s ease-out);
// height:15px; padding: 3px 10px;
a, span.preview{white-space:nowrap; cursor:pointer;}
a.open-list{max-width:150px;}
span.count{
@include fs300;
padding: 0 5px;}
span.preview, a.edit-list{padding-right:5px;}
.no-touch &:not(:hover) {
span.preview, a.edit-list{@include op-hidden;}
}
}
}
&:hover{
section.mylists{
padding-bottom:5px;
li{height:15px; padding: 3px 10px; }
}
}
h2{
i{ vertical-align: text-bottom; margin: 0 2px 2px 0;}
// @media #{$xlarge-up}{ i{display: none;} }
@media #{$small-only}{ span.menu-title{display:none;} }
}
}
#headerblock-right{
.block{
@include inlineblock; vertical-align: middle; padding:0;
&:first-child{padding: 0;}
}
}
#block-locale-language{
// margin-left:1em;
// border-left: 1px solid #707070;
ul,li{
margin:0;padding:0;list-style-type: none;
@include fs12;
line-height: 1;
&.active{display:none;}
}
.ie8 &{padding-top:5px;}
ul{padding-top:0.155em;}
li{
font-size: 0.9em;
padding:0.33em 0.35em 0.3em;
@include rounded(3px);
&, >*{color:#fff; text-transform: uppercase;}
background-color: #808080;
@include transition-simply-prefix(background-color 0.3s ease-out);
&:hover{background-color: #1A1A1A;}
}
}
// #block-menu-menu-about{
// position:relative;
// ul.menu{
// position:absolute; padding: 0 5px 5px 5px; margin: 0; width:100px; display:none; right:0; text-align: right;
// background-color: #e6e6e6; @include rounded(5px);
// li{
// height:0;
// overflow:hidden; list-style-type: none;
// .transition-simply-prefix(height 0.3s ease-out");
// a{
// display:block; width:100%; padding:2px 5px; .12;
// }
// }
// }
// &:hover{
// ul.menu{
// display:block;
// li{height:25px;}
// }
// }
// }
#block-menu-menu-top-menu{
h2{
.ie8 &{display:none;}
i{ vertical-align: text-bottom; margin: 0 0 2px 0;}
}
ul.menu, li{
@include fs12;
list-style: none;
.ie8 &{display: inline;}
}
// menu en ligne
@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 #{$small-only}{
position:relative;
h2 .menu-title{display: none;}
.menu-wrapper{
position:absolute; width:150px; display:none; right:0; padding-top: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{
a{
@include fs12;
;}
}
}
}
/*
__ _ ___ __ _
__ __/ /_(_) (_) /_(_)__ _____
/ / / / __/ / / / __/ / _ \/ ___/
/ /_/ / /_/ / / / /_/ / __(__ )
\__,_/\__/_/_/_/\__/_/\___/____/
*/
#utilities{
background-color: #fff;
margin-top:$headerouterheight;
.not-logged-in &{ overflow:hidden; }
&>.inner{padding:0.5em 0;}
&.closed{
.tabs, .node-didactique{display:none;} height:0;
}
@media #{$small-only}{
margin-top:0;
}
}
/*
_
____ ___ ____ _(_)___
/ __ `__ \/ __ `/ / __ \
/ / / / / / /_/ / / / / /
/_/ /_/ /_/\__,_/_/_/ /_/
*/
#main{
body.home-v2 &{
padding-top:$headerouterheight;
}
}
/*
__ _ __ ___ __ __ __
/ /_ (_)___ _/ /_ / (_)___ _/ /_ / /____ ____/ /
/ __ \/ / __ `/ __ \/ / / __ `/ __ \/ __/ _ \/ __ /
/ / / / / /_/ / / / / / / /_/ / / / / /_/ __/ /_/ /
/_/ /_/_/\__, /_/ /_/_/_/\__, /_/ /_/\__/\___/\__,_/
/____/ /____/
*/
#highlighted{
@include rounded(5px);
@include drop-shadow(0, 0, 6px, 0.6);
padding: 0.5em;
position:relative;
@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%; }
.field-name-title-field{@include fs24;}
// .field-name-field-visuel{}
.node.emvideo{
.group-sideleft, .group-sideright{ width:47%; }
.group-sideleft{margin-right:2%;}
// .field-name-field-visuel{display:none;}
}
}
#block-materio-user-user-register{
width:30%; padding:5px; height:290px;
}
}
@media #{$small-up}{
.block-materio-didactique{
.side{@include inlineblock(); vertical-align: top;}
}
}
@media #{$small-only}{
margin:10px 0 6px;
.block-materio-didactique{
.group-sideleft, .group-sideright{ width:100%; }
.node-didactique{
.field-name-title-field{
@include fs20;
font-weight:normal!important;
// &:before{content:"- ";}
&:after{
content:"\a0\f10b";
font-family: "foundation-icons";
font-style: normal;
font-weight: normal;
font-variant: normal;
text-transform: none;
line-height: 1;
-webkit-font-smoothing: antialiased;
display: inline-block;
text-decoration: inherit;
font-size: 16px;
}
}
}
html.js & .node-didactique{
height:auto;
height:30px; overflow: hidden;
&.opened{height:auto;}
}
}
}
// @media #{$small-only}{
// .block-materio-didactique{
// // .pt(150px);
// .group-sideleft{ width:50%; }
// .group-sideright{ width:50%; }
// }
// } //change this
.oldie &{
.block{@include inlineblock;}
}
.block-materio-didactique{
// .ie8 &{max-width:850px; border: 1px solid #C6C6C6;}
.node-didactique{
@include fs14;
background-color:#fff; //padding: 5px;
margin: 0 auto;
// .ie8 &{max-width:750px; margin-left:15px; margin-top:10px;}
.side{position:relative;}
.field-name-title-field{
@include fs900;
@include italic;
padding:5px 0;
}
.field-name-field-visuel{
text-align: center;
figure, img{display:inline;}
}
&.emvideo{
.field-name-field-visuel{display:none;}
}
// .field-name-field-emvideo{
// a{
// display:block; width:100%; height:100%;
// background: transparent url(../img/vimeo-play-btn.png) no-repeat center center;
// &:hover{background-image: url(../img/vimeo-play-btn-hover.png);}
// img{max-width:100%;}
.ie8 &{.player{display:none;}}
// }
// }
}
html.js &{
position:relative;
overflow: hidden;
.slides{
height:270px; margin: 0; position:relative; width:100%; overflow:hidden;
.node-didactique{ @include layer(); }
.field-name-title-field{ height:30px;}
.group-column-wrapper{
height:240px;
.side{ height:100%; }
.field-name-field-emvideo{
$r:0.5625;
@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%;}
}
}
}
.tabs{
height:30px; margin: 0; text-align:left;
>*{
@include inlineblock(); vertical-align: top ; padding:5px 10px; @include fs12; cursor:pointer; color:#bfbfbf;
&:hover, &:focus, &.active{color:#3f3f3f;}
}
}
}
}
}
/*
__ __ __ _ __
/ /_ / /___ _____/ /__ ________ ____ _(_)____/ /____ _____
/ __ \/ / __ \/ ___/ //_/ / ___/ _ \/ __ `/ / ___/ __/ _ \/ ___/
/ /_/ / / /_/ / /__/ ,< / / / __/ /_/ / (__ ) /_/ __/ /
/_.___/_/\____/\___/_/|_| /_/ \___/\__, /_/____/\__/\___/_/
/____/
*/
#block-materio-user-user-register, #block-materio-user-user-createaccount{
min-height:120px; padding: 5px;
background: transparent url('../img/register-block.png') no-repeat 100% 90%;
.ie8 &{max-width:250px; float:right; background-image:none;}
h2, h3{@include fs900; @include italic; padding:5px 0; margin: 0; line-height: 1; background-color:#fff; @include inlineblock(); min-width:50%;}
h2{@include fs24;} h3{@include fs16;}
form{margin: 0; background-color: rgba(255, 255, 255, 0.7); padding-bottom:5px; @include inlineblock(); }
.form-item, .form-wrapper{
margin: 0; @include inlineblock; vertical-align: middle; position:relative;
}
#edit-account{margin-right:5px;}
input.form-text{ @include fs12; @include rounded(5px); margin-bottom:4px;.ie8 &{margin-right:5px;}}
.form-item-mail input.form-text, .form-item-name input.form-text{ width:11em;}
.form-item-pass input.form-text{ width:7em;}
#edit-mail-check{
position:absolute; bottom:100%; z-index:9999; background-image: none;
height:auto; //width:90%;
padding: 5px; @include rounded(5px); margin-bottom:10px;
@include fs11; background-color: #fff;
@include drop-shadow(0, 0, 5px, 0.6);
@include transition-simply-prefix(bottom 0.1s ease-out);
&.error{
background-color: #f3968d;
// border: 2px solid #f30002;
color:#fff;
}
&.ok{ display:none; }
}
.form-submit{
//border: 2px solid #69CDCF; background-color:#69CDCF; color:#FF7400; // orange/bleu
@include fs16; padding: 0.1em 0.6em 0.2em; @include rounded(0.3em);
font-weight:bold;
margin-bottom:4px;
}
.form-item-termsofservices, #edit-field-newsletter{
margin-bottom:0; display:block; line-height: 1;
&>*{ @include inlineblock; vertical-align: middle; margin: 0; }
label{ @include fs10; background-color: #fff; @include rounded(3px); }
}
#user-register-form{
.form-submit{
border: 2px solid #69CDCF; background-color:#69CDCF; color:#fff; // blanc/bleu
@include shadowTextBtnBlack();
&[disabled]{
background-color:#ddd; border: 2px solid #ddd;
}
}
}
#user-login{
.form-submit{
border: 2px solid #E6DE1C; background-color:#E6DE1C; color:#fff; // noire/jaune
@include shadowTextBtnBlack();
}
}
#edit-simplenews{
padding-top:0.5em;
.fieldset-description{
@include fs12;
}
.form-checkboxes{
.form-item{
display:block;
label{@include fs12;}
}
}
}
a.join{
// @include inlineblock();
display:block;
// margin: 10px 0;
width:5em;
@include fs16; padding: 0.1em 0.3em 0.2em; @include rounded(0.3em);
font-weight:bold;
border: 2px solid #69CDCF; background-color:#69CDCF; color:#fff; // blanc/bleu
@include shadowTextBtnBlack();
text-align: center; text-decoration: none;
}
@media #{$small-only}{
background-position: 160% 50%;
.form-item-mail input.form-text, .form-item-name input.form-text{ width:7em;}
min-height:60px; padding: 15px 0;
// #user-login, >h3:first-child, >h3 span{ display:none; }
}
.message-error{
color:#b94a48; @include fs12;
}
.modal-content &{
padding: 2em;
width:400px;
background-color: #fff;
padding:5px;
@include rounded(5px);
@include drop-shadow(0, 0, 7px, 0.4);
#user-register-form{
// hide honeypot field, because drupal.attachbehavior() doesn't work
div.homepage-textfield{display:none;}
.description{
@include fs12;
}
}
}
}
/*
__ __ __
_________ ____ / /____ ____ / /_ / /_____ ____
/ ___/ __ \/ __ \/ __/ _ \/ __ \/ __/_____/ __/ __ \/ __ \
/ /__/ /_/ / / / / /_/ __/ / / / /_/_____/ /_/ /_/ / /_/ /
\___/\____/_/ /_/\__/\___/_/ /_/\__/ \__/\____/ .___/
/_/
*/
#content-top{
// padding-left:50px;
/*
___ _ _ _ _
| _| |___ ___ ___| |_|___| |_
| _| | .'| . |___| | |_ -| _|
|_| |_|__,|_ | |_|_|___|_|
|___|
*/
#block-materio-flag-materio-flag-mybookmarks, #block-materio-flag-materio-flag-mylists{
// padding:5px 0;
@include fs10; color:#666666; @include fs300;
.ie8 &{margin-top:40px;}
h2{
@include fs12; @include fs700; margin: 0 0 0.5em 0; line-height:1.2; color:#000;
a.open-list, i.fi-x{
@include inlineblock(); cursor:pointer; color:#000; margin-left:0.5em;
opacity:0; @include transition-simply-prefix(opacity 0.1s ease-out);
}
i:before{
@include fs14;
}
}
&:hover{
a.open-list, i.fi-x{
opacity:1;
}
}
span.listname[name=bookmarks]{
cursor:pointer;
}
section.bookmarks{
height:0; overflow:hidden;
&.active{
height:auto;
}
article.node.vm-bookmark{
overflow:hidden;
}
}
.mylists{
// .transition-simply-prefix(height 0.3s ease-out);
section{
h2, .flaged{
height:0; overflow: hidden;
}
&.active{
h2, .flaged{
height:auto;
}
}
}
}
// .js & .mybookmarks{display:none;}
}
}
#tool-bar{
// margin-left:50px;
position:relative;
.inner-content{
padding-top:10px; padding-bottom:10px;
&>*{
@include inlineblock();
vertical-align: middle ;
// height:35px;
// margin: 5px;
}
@media #{$small-only}{
padding:0; h1{line-height:0.5;}
}
}
// text-align:right;
// >*{ text-align: left ;}
// .block{
// .inlineblock();
// margin:0 0 0 20px;
// }
.oldie &{background-color:#B1ADAD; padding:0 10px;}
.btn-group{
padding: 0; @include rounded(3px); @include bgc(#fff); margin:4px;
@include shadowBtn();
}
#block-materio-page-title-materio-page-title{
// .ie8 &{margin-top:40px;}
margin: 0 10px 0 0;
h1{ margin: 0;
@include fs24; text-transform: capitalize; @include fs300;
// line-height:1;
}
i{ vertical-align: middle ; margin-right:5px;}
// i.icon-materio-folder{line-height: 1.3;}
a.edit-list{
@include op-hidden;
i{ margin: 0 0 0 5px;}
}
&:hover{
a.edit-list{ @include op-visible; }
}
@media #{$medium-only}{
display:block;
}
}
#block-materio-search-api-materio-search-api-viewmode{
.viewmode-link{
@include inlineblock(); margin:0 2px;
&.active{cursor:normal;}
.inner{display:none;@include fs10; }
}
@media #{$small-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 #{$small-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{
// @include inlineblock(); vertical-align: middle ;
// position:absolute; top:10px; right:0;
float:right;
>.inner{
@include inlineblock(); margin:0 0 0 10px;
padding: 3px 10px; background-color:#fff; @include rounded(3px);
@include shadowBtn(); text-align: right;
}
}
#materio-search-api-search-form{
text-align: right;
@include inlineblock(); margin: 0;
.form-item, input, .form-checkboxes{@include inlineblock(); margin:0; vertical-align:middle; padding:0;}
.form-checkboxes{
padding: 3px; @include fs12;
.form-item{
margin:0 5px;
label{@include fs10;}
}
}
a.back-search-home{
display:inline-block;
vertical-align: middle;
color:#000;
padding: 0 0.5em 0 0.2em;
i:before{
font-size:1.3em;
}
}
input#edit-searchfield{
border: 1px solid #ccc; @include rounded(15px);
margin:3px 0 3px 3px; padding: 4px 5px; height:20px;
@include fs12; line-height:1;
background-position: 100% 7px;
// width:100%;
&.throbbing { background-position: 100% -15px; }
}
#edit-searchfield-autocomplete-aria-live{
.oldie &{
background-color:#1a1a1a;
}
};
input#edit-create{ padding: 3px; }
&.loading{
background: transparent url('../img/ajax-loader.gif') no-repeat 98% center;
input#edit-create{ visibility: hidden; }
}
@media #{$small-only}{
input#edit-searchfield{width:16em;}
#edit-bundles-filter{display:none;}
}
}
}
#center{
// background-color: #e6e6e6;
@include rounded(10px);
.node-type-page:not(.page-node-11187) &{ background-color:#fff; }
.ie8 &{height:100%; margin-top:20px;}
}
#content{
padding:1em;
@include transition-simply-prefix(height 0.3s ease-out);
&.faded{
opacity:0.5;
@include transition-simply-prefix(opacity 0.3s ease-out);
}
.materiobase-results, .materiobase-actuality, .materio-flags-list{
padding:0 0 30px 0; margin:0 0 20px 0;
&.loading{
background-image: url('../img/ajax-loader.gif');
background-position: center bottom;
background-repeat: no-repeat;
}
p.search-performance, p.flaglist-infos, p.actualities-infos{
@include fs12; @include fs500; margin: 0;
padding:10px 0 5px 15px;
}
// p.search-performance{.role-7 & {@include fs12;}}
.search-results, .actuality-items, .flaglist-items{
font-size:0;
>*{font-size:16px;}
text-align:center;
>*{text-align:left;}
}
}
ul.pager{
padding: 1em 0; text-align: left;
.ie8 &{position:absolute; left:37px; bottom: 35px;}
li{margin:0; @include inlineblock(); vertical-align: middle;}
.pager-current, a{color:#000;@include fs12; }
.pager-current{@include fs900; @include fs14;.ie8 &{background:#fff; padding:0.3em 1em 0.3em 1em; margin-top:0.05em; border: 1px solid #333333;}}
.pager-first, .pager-previous, .pager-next, .pager-last{ a{ @include fs24; @include fs300; } }
// html.js & {display:none;}
}
.node-type-page &{
// padding-left:15px;
}
}
/** #content-bottom */
#content-bottom{
padding-top:10px;
}
/*
_________ ____ ____ _____
/ ____/ | / __ \/ __ \/ ___/
/ / / /| | / /_/ / / / /\__ \
/ /___/ ___ |/ _, _/ /_/ /___/ /
\____/_/ |_/_/ |_/_____//____/
*/
$cardbookmark_w:50px;
$cardbookmark_h:70px;
$cardsmall_w:100px;
$cardsmall_h:140px;
$cardmedium_w:210px;
$cardmedium_h:295px;
$cardbig_w:425px;
$cardbig_h:610px;
$cardfull_w:850px;
$cardfull_h:610px;
@mixin card-box($w, $h){
width:$w; height:$h;
@include inlineblock(); position:relative; margin:7px;
@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
}
@mixin card($w, $h){
@include card-box($w, $h);
>div.side{
@include rounded(5px); overflow: hidden;
}
// .no-touch &:hover{ @include drop-shadow(0, 0, 5px, 0.7); }
&.focused{ @include drop-shadow(0, 0, 7px, 0.9); }
&.just-added{ opacity:0; }
&.associated{
@include transition-simply-prefix(margin 0.3s ease-out);
&.just-added{margin-left:-$w;margin-right:$w;}
.modal-content &{
position:absolute;
top:0; left:0;
z-index:999;
}
}
&.removed{
@include transition-simply-prefix(width 0.3s ease-out);
width:0; padding-left:0; padding-right:0; margin-right:0; margin-left:0; overflow:hidden;
}
// TODO: how to show that a card was flaged ?
// .search-results &.flaged, .actuality-items &.flaged{
// border: 2px solid rgba(0,0,0, 0.3); margin: 3px;
// @include drop-shadow(0, 0, 3px, 0.6);
// }
nav.nav{
position:absolute; top:0; right:0; z-index:11;
padding: 5px 0;
@include border-radius(0, 5px, 0, 3px);
@include fs11;
// colors
// background-color: rgba(10, 10, 10, 0.9); color:#fff;
// a{color:#fff;}
//ul{background-color: rgba(10, 10, 10, 0.9);}
background-color: rgba(255, 255, 255, 0.9); color:#000;
a{color:#000;}
ul{background-color: rgba(255, 255, 255, 0.9);}
span.op{@include fs900; @include fs14;}
ul{padding: 0; margin: 0;}
section{
position:relative;
&>i{margin: 0 5px; &:hover{cursor:pointer;}}
}
ul{
position:absolute; right:0; top:0; margin-right:22px; min-width:80px; padding: 0; display:block;
@include rounded(3px); @include drop-shadow(-2px, 2px, 5px, 0.2);
// padding: 5px 10px;
li{
padding: 0; margin: 0; line-height:1; display:block;
height:0; overflow:hidden; @include transition-simply-prefix(height 0.2s ease-out);
// height:15px; overflow:hidden;
a{ display:block;}
}
&.links{
a{font-size:12px;}
}
&.flag-lists-entity-links{
width:160px;
font-size:0;
>*{font-size:11px;}
// &.loading{
// a{visibility: hidden;}
// background: transparent url('../img/ajax-loader.gif') no-repeat 98% center;
// }
li{
@include inlineblock(); min-width:48%; max-width:98%; padding-left:2px;
a{
color:#a6a6a6; @include transition-simply-prefix(color 0.2s ease-out);
&:hover, &.unflag-action{
color:#000; text-decoration: none;
}
}
&.flag-lists-create{
display:block; width:100%;
>*{ margin-top:1px; padding-top:1px; border-top:1px solid #e6e6e6;}
a{color:#000;}
}
&.loading{
a{visibility: hidden;}
background: transparent url('../img/ajax-loader.gif') no-repeat 98% center;
}
}
}
.ie8 &{background:#FFF;}
}
section:hover{
ul{
padding: 5px 5px;
li{height:17px;}
&.flag-lists-entity-links{
// width:160px;
}
}
}
// display:none;
}
// &:hover{nav.nav{display:block;}}
div.workflow{
position:absolute; top:0; left:0; z-index:11;
padding: 5px;
@include border-radius(5px, 0, 3px, 0);
@include fs11; vertical-align: top;
background-color: rgba(255, 255, 255, 0.9); color:#000;
span{padding: 3px 0 0 4px; @include inlineblock();}
}
.field-name-field-description .upgrade{
@include fs12;
padding-top:4em;margin-top:-4.5em;
// .bgc(rgba(255,255,255,0.6));
background : linear-gradient(to bottom, rgba(255,255,255,0) 0%, #fff 4em);
position:relative;
}
.side.oops p, .side .upgrade p{
padding: 10px; @include fs12;
a{
display:block; margin: 10px 0;
@include fs18; padding: 0.1em 0.6em 0.2em; @include rounded(0.3em);
font-weight:bold;
border: 2px solid #69CDCF; background-color:#69CDCF; color:#fff; // blanc/bleu
@include shadowTextBtnBlack();
text-align: center; text-decoration: none;
}
}
}// .card()
/*
_ _ ___
___ ___ ___ _| | ___ ___ ___ ___ ___| |_ ___ ___ ___| _|___ ___ _____ ___ ___ ___ ___
| _| .'| _| . | |_ -| -_| .'| _| _| | | . | -_| _| _| . | _| | .'| | _| -_|
|___|__,|_| |___| |___|___|__,|_| |___|_|_| | _|___|_| |_| |___|_| |_|_|_|__,|_|_|___|___|
|_|
*/
article.search-performance{
.inner{
padding: 1em;
}
p{@include fs14;}
a.button{
display:block; margin: 10px auto; max-width:10em;
@include fs18; padding: 0.1em 0.6em 0.2em; @include rounded(0.3em);
font-weight:bold;
border: 2px solid #69CDCF; background-color:#69CDCF; color:#fff; // blanc/bleu
@include shadowTextBtnBlack();
text-align: center; text-decoration: none;
}
&.view-mode-cardsmall{
@include card-box(327px, 140px);
}
&.view-mode-cardmedium{
@include card-box(210px, 295px);
.inner{
padding: 4em 1em 0;
}
}
&.view-mode-cardbig{
@include card-box(425px, 115px);
display:block; margin:0 auto;
}
&.view-mode-cardfull{
@include card-box(850px, 115px);
.inner{
padding: 1em 212px;
}
display:block; margin:0 auto;
}
}
/*
_____ _____ _____ ____ _____ _____ _____ _____ _____ _____ _____ _____ _____
| | _ | __ | \ | __ | | | | | | _ | __ | | | __|
| --| | -| | | | __ -| | | | | -| | | | | -| -|__ |
|_____|__|__|__|__|____/ |_____|_____|_____|__|__|_|_|_|__|__|__|__|__|__|_____|
*/
article.node-materiau.vm-bookmark, article.node-breve.vm-bookmark{
@include card($cardbookmark_w, $cardbookmark_h);
margin:3px;
.group-header{
display:none;
}
.group-images{ @include horihoverswitch(); }
// nav.nav{top:0;}
div.workflow{display:none;}
}
/*
_____ _____ _____ ____ _____ _____ _____ __ __
| | _ | __ | \ | __| | _ | | | |
| --| | -| | | |__ | | | | | |__| |__
|_____|__|__|__|__|____/ |_____|_|_|_|__|__|_____|_____|
*/
article.node-materiau.vm-cardsmall, article.node-breve.vm-cardsmall{
@include card($cardsmall_w, $cardsmall_h); //width:100px; height:140px;
.group-header{
display:none; position:absolute;
@include fs14; @include fs500;
.field-name-title-field{@include fs700;}
.field-name-field-reference-materio, .field-name-field-localisation{ @include inlineblock(); @include fs12; }
.field-name-field-localisation{ float:right; }
}
.group-images{ @include horihoverswitch(); @include rounded(5px); overflow:hidden; }
nav.nav{
ul.flag-lists-entity-links{
width:75px; min-width:75px;
li{width:98%;}
}
.ie8 &{background: #FFF}
}
.no-touch &:not(.focused) nav.nav{@include op-hidden;}
.no-touch &:not(.focused) div.workflow{@include op-hidden;}
}
/*
_____ _____ _____ __ _____ _____ _____ _____ _____ _____ __ __ _____ _____ _____ ____
|_ _| | | ||_ _| | _ | | __| | _ | | | | | | _ | __ | \
| | | | | | | |__| | |- -| __| |__ | | | | | |__| |__ | --| | -| | |
|_| |_____|_____|_____|_| |_____|__| |_____|_|_|_|__|__|_____|_____| |_____|__|__|__|__|____/
*/
#tooltip{
.group-header.smallcard{
@include fs14; @include fs500;
.field-name-title-field{@include fs700;}
.field-name-field-reference-materio, .field-name-field-localisation{ @include inlineblock(); @include fs12; }
.field-name-field-localisation{ float:right; }
}
}
/*
_____ _____ _____ ____ _____ _____ ____ _____ _____ _____
| | _ | __ | \ | | __| \| | | | |
| --| | -| | | | | | | __| | |- -| | | | | |
|_____|__|__|__|__|____/ |_|_|_|_____|____/|_____|_____|_|_|_|
*/
article.node-materiau.vm-cardmedium, article.node-breve.vm-cardmedium{
@include card($cardmedium_w, $cardmedium_h); //width:210px; height:295px;
.side{
@include layer(); background-color:#fff; cursor:pointer;
&:nth-child(2){z-index:1;}
}
.group-header{
position:absolute; bottom:0; z-index:2;
width:190px; padding:5px 15px 5px 5px; min-height:55px;
@include fs20; @include fs300; line-height:1;
.field-name-title-field{@include fs700;}
.field-name-field-nature-titre{@include fs14;}
@include bgcWhite();
@include border-radius(0, 0, 4px, 4px); overflow: hidden;
.field-name-field-reference-materio, .field-name-field-localisation, .field-name-field-authored-on{ @include inlineblock(); @include fs12; vertical-align: bottom; width:48%;}
.field-name-field-localisation{ text-align: right; }
.ie8 &{background:#fff; font-color:#000; line-height: 1em; padding: 10px;}
}
&.node-breve .group-header{
// @include fs20; @include fs300; line-height:1.1;
color:#fff; @include bgcBlack();
.field-name-field-authored-on{ @include fs12; @include fs500; }
.ie8 &{background:#000; font-size:15px; line-height: 1.2em;}
}
// &:hover .group-header{
// .bgcWhiteParentHover();
// }
.group-images{ @include horihoverswitch(); }
// side 2
.field-name-field-description, .field-name-body{
@include fs12; @include fs300; overflow: hidden; z-index:-1; @include columnized(5px);
.column>*{padding-right:25px;}
}
// side 3
.column-wrapper{
@include columnized(5px);
}
.field-name-field-company-fab, .field-name-field-company-distrib{
@include fs12; padding:5px; @include fs300;
.field-label{ @include fs10; text-transform: lowercase; margin:0;}
.field-name-field-tode-company{@include fs14;}
// span.print-link{display:none;}
}
.field-name-field-materiau-ref, .field-name-field-source, .field-name-field-attachments{
@include fs12; padding: 5px; @include fs300; a{color:#000;}
}
.field-label{@include fs900; margin: 1em 0 0.5em;}
// nav
.no-touch &:not(.focused) nav.nav{@include op-hidden;}
.no-touch &:not(.focused) div.workflow{@include op-hidden;}
.ie8 &{nav.nav{background: #FFF}}
}
/*
_____ _____ _____ ____ _____ _____ _____
| | _ | __ | \ | __ | | __|
| --| | -| | | | __ -|- -| | |
|_____|__|__|__|__|____/ |_____|_____|_____|
*/
article.node-materiau.vm-cardbig, article.node-breve.vm-cardbig{
@include card($cardbig_w, $cardbig_h); //width:425px; height:610px;
.side{
@include layer(); background-color:#fff; height:270px; top:340px; cursor:pointer;
&:nth-child(2){z-index:1;}
}
.group-side1{position:relative; @include border-radius(5px, 5px, 0, 0); overflow:hidden;}
.group-header{
position:absolute; bottom:0; z-index:2;
width:405px; padding:10px;
@include fs20; @include fs300; line-height: 1.1;
.field-name-title-field{@include fs700;}
.field-name-field-nature-titre{@include fs14;}
@include bgcWhite();
.field-name-field-reference-materio, .field-name-field-localisation, .field-name-field-authored-on { @include inlineblock(); @include fs12; vertical-align: bottom; width:48%;}
.field-name-field-localisation{ text-align: right; }
.ie8 &{background:#fff; font-color:#000; line-height: 1em; padding: 20px; border-bottom: 1px solid #C6C6C6;}
}
// &:hover .group-header{ .bgcWhiteParentHover(); }
&.node-breve .group-header{
color:#fff; @include bgcBlack();
.field-name-field-authored-on{ @include fs12; @include fs500; }
.ie8 &{background:#000; font-color:#fff; line-height: 1em; padding: 20px;}
}
.group-images{ @include horihoverswitch(); height:auto;}
// side 2
.field-name-field-description, .field-name-body{
@include fs12; @include fs300; @include columnized(10px);
}
// side 3
.column-wrapper{
@include columnized(10px);
}
// side 4
.field-name-field-company-fab, .field-name-field-company-distrib{
@include fs12; padding:10px; @include fs300;
.field-label{ @include fs10; text-transform: lowercase; float: none; }
.field-name-field-tode-company{@include fs14;}
}
.field-name-field-materiau-ref, .field-name-field-source, .field-name-field-attachments{
@include fs12; padding: 10px; @include fs300; a{color:#000;}
}
.field-label{@include fs900; margin: 0 0 0.5em;}
// nav
// nav.nav{ margin: 5px; }
.ie8 &{nav.nav{background: #FFF}}
// upgarde and full
.side.oops p, .side .upgrade p{
padding: 3em;
a{
border: 2px solid #eee; background-color:#eee; color:#fff;
@include transition-simply-prefix(border 0.3s ease-out);
@include transition-simply-prefix(background-color 0.3s ease-out);
}
}
&:hover .side.oops p, &:hover .side .upgrade p{
a{
border: 2px solid #69CDCF; background-color:#69CDCF;
}
}
}
/*
_____ _____ _____ ____ _____ _____ __ __
| | _ | __ | \ | __| | | | | |
| --| | -| | | | __| | | |__| |__
|_____|__|__|__|__|____/ |__| |_____|_____|_____|
*/
article.node-materiau.vm-cardfull, article.node-breve.vm-cardfull{
@include card($cardfull_w, $cardfull_h); //width:875px; height:610px;
nav.nav{top:0;}
font-size:0px;
>*{@include fs16;}
>.side{@include inlineblock(); width:50%;
&.group-side-left{
@include border-radius(5px, 0, 0, 5px);
}
&.group-side-right{
@include border-radius(0, 5px, 5px, 0);
}
}
.group-images{ @include horihoverswitch(); }
.group-header{
@include fs20; @include fs300; padding:10px;
.field-name-title-field{@include fs700;}
.field-name-field-reference-materio, .field-name-field-localisation, .field-name-field-authored-on{ @include inlineblock(); @include fs12; padding-right:15px;}
// .field-name-field-localisation{ float:right; }
}
&.node-breve .group-header{
color:#fff; @include bgcBlack();
.field-name-field-authored-on{ @include fs500; }
}
.field-name-field-description, .field-name-body{
@include fs12; @include fs300; padding: 10px;
}
.field-name-field-attachments{
padding: 10px;
@include fs12;
}
// side 4
.field-name-field-company-fab, .field-name-field-company-distrib{
@include fs12; padding:10px; @include fs300;
@include inlineblock(); width:40%;
.field-item{margin-top:1em;}
.field-label{ @include fs10; text-transform: lowercase; float: none; }
.field-name-field-tode-company{@include fs14;}
}
.field-name-field-materiau-ref, .field-name-field-source, .field-name-field-attachments{
@include fs12; padding: 10px; @include fs300; a{color:#000;}
}
.field-label{@include fs900; margin: 0 0 0.5em;}
// nav
nav.nav{ margin: 5px; }
div.workflow{ margin: 5px; }
// upgarde and full
.side.oops p, .side .upgrade p{
padding: 3em;
a{
border: 2px solid #eee; background-color:#eee; color:#fff;
@include transition-simply-prefix(border 0.3s ease-out);
@include transition-simply-prefix(background-color 0.3s ease-out);
}
}
&:hover .side.oops p, &:hover .side .upgrade p{
a{
border: 2px solid #69CDCF; background-color:#69CDCF;
}
}
}
/*
_ _ _
___ ___ ___ _| | ___ ___|_|___| |_
| _| .'| _| . | | . | _| | | _|
|___|__,|_| |___| | _|_| |_|_|_|_|
|_|
*/
body.print-body-materiau{
// >*{font-size:0.8em;}
}
.print-node-materiau{
margin:0 auto;
@media screen {
@include card($cardfull_w, auto);
width:1024px;
padding:1em;
}
}
.print-site_name{}
.print-content{}
.print-content .node-materiau.vm-print{
margin:0; position:relative;
.field-name-title-field{@include fs500; font-size: 1.4em;}
// .field-name-field-reference-materio, .field-name-field-localisation, .field-name-field-authored-on{ @include inlineblock(); @include fs12; padding-right:15px;}
.field-name-field-nature-titre{
@include fs500;font-size: 1em;margin-bottom: 0.5em;
}
.group-head-right{
position:absolute;
top:0; right:0;
padding-top:1em;
text-align: right;
font-size:0.8em;
.field-name-field-reference-materio{font-weight: 800; font-size: 1.2em;}
}
.side{
&.group-side-left{
width:45%;
position:absolute;
.field-name-field-description{font-size:0.8em;}
>.field-type-taxonomy-term-reference{
display:inline-block; vertical-align: top; width: 45%;
margin:0.5em 1em 0 0;
font-size:0.7em;
>.field-label{font-size: 0.8em; font-weight: 300;}
>.node-company{
.field-name-field-tode-company{font-size: 1.2em;}
.field-label{display:none;}
}
}
}
&.group-side-right{
section, div, figure{max-width: 100%;}
.field-name-field-materiau-image{
text-align: right;
.field-item{
display:none;
&:nth-child(-n+7){
display:inline-block;
}
max-width:19%;
margin:0.5em 0 0 0.5em;
&:nth-child(-n+2){
max-width:100%;
margin-left: 50%;
}
img{max-width:100%;}
}
}
}
}
.field-name-field-tode-company{
font-size: 1.5em; font-weight: 700;
}
.field-name-field-description,
.field-name-field-company-fab,
.field-name-field-reference-distrib
{
padding-bottom: 1em;
}
}
/*
____ ____ _____ ________
/ __ \/ __ \/ _/ | / /_ __/
/ /_/ / /_/ // // |/ / / /
/ ____/ _, _// // /| / / /
/_/ /_/ |_/___/_/ |_/ /_/
*/
@media print {
@page { margin: 1.5cm 7mm 8mm; }
}
.print-site_name{
width:100%;
vertical-align: bottom;
margin-bottom:0.5em;
h1{
margin:0 0 0 0;
font-size: 1.4em;
text-align: center;
// @include inlineblock(); vertical-align: baseline; position:relative; line-height:1.25;
a{
color:inherit;
&:hover{text-decoration: none ;}
}
}
span.slogan{
display: none;
font-size: 0.8em;
margin-top:-3px;
margin-left:-0.5em;
@include fs900;
.ie8 &{position: absolute; margin-top:22px;}
}
}
.print-content{
margin-bottom: 1em;
}
.print-footer{
position:absolute; bottom:0; text-align: center; width:100%;
p{
display:inline-block; width:45%; text-align: center;
// margin: 0 3em;
}
}
/*
___ __ ____________ __________ __ _______ __ __________________
/ | / / / /_ __/ __ \/ ____/ __ \/ |/ / __ \/ / / ____/_ __/ ____/
/ /| |/ / / / / / / / / / / / / / / /|_/ / /_/ / / / __/ / / / __/
/ ___ / /_/ / / / / /_/ / /___/ /_/ / / / / ____/ /___/ /___ / / / /___
/_/ |_\____/ /_/ \____/\____/\____/_/ /_/_/ /_____/_____/ /_/ /_____/
*/
#autocomplete{
border: 0; @include rounded(3px);
background-color: rgba(0,0,0,0.6);
text-align: left;
margin-left: 2px;
.oldie &{background-color:#545454;}
li{
color:#FFF; background-color: transparent;
&.selected{background-color: rgba(0,0,0,0.8);}
div{padding:0.1em 5px;} @include fs12;
}
}
/**
* the old modal api (balck bg) for contextual forms (create new flag list)
*/
@mixin mat_modal(){
background-color: rgba(0,0,0,0.7);
@include rounded(5px); border: 0;
*{color:#fff; background-color:transparent;}
@include fs12;
form{
background-color:transparent; color:#fff; border: 0px;
.form-actions{
background-color:transparent; margin: 0; padding: 0; border: 0;
}
input.form-text, textarea, div.grippie{background-color:#fff; color:#000; border: 0;}
.form-actions{ text-align: right ;}
input.form-submit{
@include button($button-tny);
//@include btn-mini; color:#000; //change this btn bootstrap -> foundation
&[name="create"]{
@include button($button-tny, $success-color);
}
&[name="save"]{
@include button($button-tny, $success-color);
}
&[name="delete"]{
@include button($button-tny, $alert-color);
}
&[name="cancel"]{
@include button($button-tny, $secondary-color);
}
}
}
}
#modal{
@include mat_modal();
>*{padding: 10px;}
.form-item-flag-lists-name{
// label, input{.inlineblock();}
// label{width:38%;}
input{width:95%;}
}
.actions{
text-align: right;
}
}
/**
* the new modal api used for preview and register modal
*/
.modal-wrapper {
&:before {
content: "";
display: inline-block;
height: 100%;
margin-right: -0.25em;
vertical-align: middle;
}
&:after, &:before {
-moz-box-sizing: border-box;
}
// background-color: rgba(0, 0, 0, 0.4);
bottom: 0;
// display: none;
left: 0;
position: fixed;
right: 0;
text-align: center;
top: 0;
white-space: nowrap;
z-index: 99998;
.modal-bg{
background-color: #000;
position:absolute;
top:0; left:0;
width:100%; height:100%;
opacity:0.5;
}
.modal-content{
position:relative;
display: inline-block;
margin: 0 auto;
text-align: left;
vertical-align: middle;
white-space: normal;
// width: 400px;
min-height:200px;
// background-color: #fff;
}
}
/*
_______ __________ ____ __ __ ____ ___ _ __
/ / ___// ____/ __ \/ __ \/ / / / / __ \/ | / | / /
__ / /\__ \/ / / /_/ / / / / / / / / /_/ / /| | / |/ /
/ /_/ /___/ / /___/ _, _/ /_/ / /___/ /___/ ____/ ___ |/ /| /
\____//____/\____/_/ |_|\____/_____/_____/_/ /_/ |_/_/ |_/
*/
.jspContainer{
.jspVerticalBar{
background-color: transparent;
width:5px; //margin-right:-5px;
.jspTrack{
background-color: transparent;
.jspDrag{
background-color: #ccc;
@include rounded(3px);
}
}
}
}
/*
__________ ____ __ ______________
/_ __/ __ \/ __ \/ / /_ __/ _/ __ \
/ / / / / / / / / / / / / // /_/ /
/ / / /_/ / /_/ / /___/ / _/ // ____/
/_/ \____/\____/_____/_/ /___/_/
*/
#tooltip{
position:absolute; z-index:999; max-width:180px; background-color: rgba(255, 255, 255, 1); padding: 5px; @include rounded(3px);
@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,
// change this transition foundation
}
}
/*
______________________ ____ ___ ________ __
/ ____/ ____/ ____/ __ \/ __ )/ | / ____/ //_/
/ /_ / __/ / __/ / / / / __ / /| |/ / / ,<
/ __/ / /___/ /___/ /_/ / /_/ / ___ / /___/ /| |
/_/ /_____/_____/_____/_____/_/ |_\____/_/ |_|
*/
#block-feedback-form{
@media #{$medium-only}{ bottom:5px; left:5px; right:auto; }
h2{
line-height:1.2; @include fs14; margin: 0;
.title{display:none;}
}
#feedback-form-toggle{
padding: 2px 3px; @include rounded(3px); background-color:#ff7600; color:#fff;
line-height:2; @include fs900;
}
.content{
@include mat_modal();
.ie8 &{background:#000;}
}
#feedback-status-message{background-color:#fff; padding: 5px;}
}
/*
_________ _____ __ __ __ _________ ____ _____
/_ __/ | / ___// //_/ _/_/ /_ __/ | / __ ) ___/
/ / / /| | \__ \/ ,< _/_/ / / / /| | / __ \__ \
/ / / ___ |___/ / /| | _/_/ / / / ___ |/ /_/ /__/ /
/_/ /_/ |_/____/_/ |_| /_/ /_/ /_/ |_/_____/____/
*/
@mixin tabs-primary(){
a{
@include fs12;
padding: 5px 10px;
background-color:#e6e6e6;
&.active, &:hover{background-color:#e6e6e6;}
@include rounded(3px);
}
}
@mixin tabs-secondary(){
@include fs10;
padding: 0.5em 1em;
}
#tasks{
ul.tabs{
@include inlineblock();
border:0 solid #fff;
padding: 0; margin: 0;
li{padding: 0; margin: 2px 5px; border:0 solid #fff;}
a{
border:0; color:#7f7f7f;
&.active, &:hover{font-weight: 900; color:#000;}
}
&.primary{
@include tabs-primary();
}
&.secondary{
@include tabs-secondary();
}
}
}
/*
______________ _____________________
/ ___/_ __/ |/_ __/ _/ ____/ ___/
\__ \ / / / /| | / / / // / \__ \
___/ // / / ___ |/ / _/ // /___ ___/ /
/____//_/ /_/ |_/_/ /___/\____//____/
*/
/*
_ _ ___ ___ ___
| | |_ -| -_| _|
|___|___|___|_|
*/
.page-user, .page-user-edit, .page-user-password, .page-user-reset, .page-toboggan{
#center{background: #fff url('../img/user-page-bg.gif') no-repeat bottom right;}
.messages{ width:800px; margin:0 auto; }
&.role-6 #tasks .tabs.primary{display:none;}
&.role-6 #tasks .tabs.secondary{@include tabs-primary();}
#center >*{
width:800px; margin:0 auto; padding-top:1em; @include fs14;
fieldset{
margin-bottom:1em;
border:none;
}
legend{
@include fs16; margin:0; padding:10px 0 5px 0; line-height:1; border:0 solid #fff;
a{color:#000;}
}
.form-item{
margin:0 0 0.5em 0; width:100%;
label, input.form-text{
@include inlineblock(); vertical-align:middle;
}
label{margin-right:1em;}
input.form-text{
padding:2px 4px; width:20em;
}
}
.form-wrapper{
&>.form-item{margin:0 0 2em 0;}
}
.form-type-password-confirm, .form-type-new-password-confirm{
label{width:9em;}
.password-parent{width:auto;}
.password-strength, .password-confirm{
width:15em; margin-top:0;
}
}
.form-type-checkbox{
input{margin:0;}
label{@include fs14; margin:0;}
}
#edit-language{
.form-item{
@include inlineblock(); width:auto; margin-right:1em;
input, label{margin:0;}
}
}
select.form-select{
width:auto; padding:2px 4px; height:auto;
}
div.description{
@include fs11;
}
div.form-actions{
margin: 0; text-align:right; padding: 1em 0.5em;
}
// input#edit-submit{@include btn; @include btn-success;} //change this btn foundation
&#user-profile-form{
label{min-width:10em; }
}
#edit-profile-adherent-field-first-name, #edit-profile-adherent-field-name,
#edit-profile-adherent-field-private-quality, #edit-profile-adherent-field-service, #edit-profile-adherent-field-employee,
#edit-profile-adherent-field-naf, #edit-profile-adherent-field-siret{
@include inlineblock(); vertical-align:middle; width:auto; margin: 0 1em 0.5em 0;
div{width:auto; margin: 0; padding: 0;}
// label{margin: 0 0.5em 0 0;}
}
// #edit-profile-adherent-field-name, #edit-profile-adherent-field-service,
// #edit-profile-adherent-field-naf, #edit-profile-adherent-field-siret, .form-item-profile-adherent-field-adresse-und-0-locality{
// label{min-width:auto;}
// }
#edit-profile-adherent-field-siret{label{width:auto;}input{width:8em;}}
#edit-profile-adherent-field-naf{input{width:13em;}}
#edit-profile-adherent-field-organization{ margin: 2em 0 0 0; }
#edit-profile-adherent-field-employee{
label{width:auto;}
input{width:4em;}
}
#edit-profile-adherent-field-private-phone{
.form-phone-number{
@include inlineblock(); vertical-align:middle;
#edit-profile-adherent-field-private-phone-und-0-number{width:10em;}
}
}
#edit-profile-adherent-field-adresse-und-0{
padding:0;
.street-block{
input{ width:35em;}
}
.locality-block{
.form-item{width:auto; margin-right:1em;}
}
}
#edit-profile-adherent-field-user-website{
margin: 2em 0 0 0;
.form-item>*{@include inlineblock(); vertical-align: middle; }
input{width:35em}
}
&.profile{
h3{border:0 solid transparent;}
.field-label{display:inline;}
}
#edit-mimemail, #edit-locale, #edit-timezone{padding:0;}
}
} // user
/*
_____ _____ _____ _____ __ _____ _____ _____ _ _ _ _____
| __| | | _ | | | __| | | __| | | | __|
|__ |- -| | | | __| |__| __| | | | __| | | |__ |
|_____|_____|_|_|_|__| |_____|_____|_|___|_____|_____|_____|
*/
body.node-type-simplenews{
#content{
.inner-content{
text-align:center;
}
article.node.node-simplenews{
@include inlineblock();
max-width:600px;
padding:1em 0;
tbody{
border-top:0px;
}
}
}
}
/*
_____ _____ _____ _____ _____ _____ _____ _____ _____ _____ _____
| _ | _ | __| __| | | | | |_ _| _ | |_ _|
| __| | | | __| | --| | | | | | | | | | --| | |
|__| |__|__|_____|_____| |_____|_____|_|___| |_| |__|__|_____| |_|
*/
.page-node-11175{
#main{
// background-color:#fff;
#center{
background: #fff url('../img/bg-contact.gif') no-repeat bottom right;
}
.field-name-body p{
@include inlineblock; margin: 15px;
strong{@include fs18;}
}
}
} // contact
/*
_____ _____ _____ _____ _____ _____ _____
| _ | __ | | | | | | __|
| __| -|- -| --|- -| | | | | |
|__| |__|__|_____|_____|_____|_|___|_____|
*/
body.page-node-11187{
// #center{ background-color: #fff; }
@media #{$medium-up}{
.node-11187{
.field-name-body{
div.column, div.column-demi, div.column-full, div.column-auto{
&, &:last-child{
@include inlineblock; margin: 10px; float:none;
}
}
div.column{
width:22.4%;
ul.list-text, p.description{ 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; padding:2em;
}
}
@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{
text-align:center;
>*{text-align:left;}
div.column, div.column-demi, div.column-full, div.column-auto{
position:relative; background-color: #fff;
@include rounded(5px); @include drop-shadow(0, 0, 6px, 0.5);
.ie8 &{max-width:500px; margin:auto; margin-bottom:15px; border:1px solid #C6C6C6;}
overflow:hidden;
&>*{ padding: 0 10px;}
// img{float:left; padding: 0; }
h2{ text-align: left; margin: 5px 0 0 15px;}
.subtitle{
padding: 0 0 0 15px;
@include fs18; @include italic; @include bold; line-height:1;
}
ul{margin: 0; padding: 0 15px;}
li{
list-style: none; @include fs12;
&:before{
content:"+ ";
@include fs900;
}
}
.description{
@include fs12;
margin: 0; padding: 0 15px;
}
.get-link{
margin: 0; @include border-radius(0 0 5px 5px); border: 1px solid #fff; min-height: 92px;
a{ display:block; width:100%; padding: 15px 0; color:#1A1A1A; text-decoration: none; }
}
.get-link{background-color: #C8C8C8; }
&.web{ .get-link{ background-color: #69CDCF; } }
&.webshowroom { .get-link{ background-color: #D476AE; } }
&.pack4 { .get-link{ background-color: #E6DE1C; } }
&.etudiants{ .get-link{background-color: #4BA13D; } };
// &.ecole-de-neige { .list-neige{min-height:80px;} }
&.neutral .get-link{
min-height: 62px;
padding:15px 0;
}
} // end div.column div.column-demi
div.column{
h2{ padding:10px 0 0; @include fs24; }
// .subtitle{ min-height:3em; }
.get-link{
padding: 0;
@include fs28; text-align: center;
@include italic; @include fs900;
span{ @include fs20; }
@include shadowTextBtnWhite();
}
}
div.column-demi{
h2{ padding:10px 0 0; @include fs24; top:0; }
.subtitle{ min-height:2em; }
ul{ @include fs14; min-height:120px;}
.get-link{ @include fs14; text-align: left; padding: 0 1em; background-color:#ddd; }
}
}
} // end .node-11187
// hide get free account for user already logged-in
// hide get flocon for user already flocon (role-6)
&.logged-in{
// .column.gratos{.get-link{
// cursor:auto!important;
// a{display:none!important;}
// }}
// &.role-6{
// .column.etudiants{.get-link{
// cursor:auto!important;
// a{display:none!important;}
// }}
// }
}
} // princing
/*
_____ ____ _____ _____ _____ _____ _____ _____ _____ _____ _____ _____
| _ | \| | | __| __| | | | | | __| | __ | |
| | | | | __|__ |- -| | | | | | | __| | | -| | | |
|__|__|____/|__|__|_____|_____|_____|_____|_|___| |__| |_____|__|__|_|_|_|
*/
.node-11186{
nav ul.links a.language-link { display:none; }
}
#webform-client-form-11186{
@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; border-top-width: 0; border-right-width: 0; border-bottom-width: 0;
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; margin-right:1em; border-bottom: 1px solid #cccccc; }
.description{ @include fs11; width:25em; @include inlineblock; vertical-align:bottom; margin-left:1em; color:#7f7f7f;}
input.form-text{width:13em;}
}
@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; margin-right:0.5em; }
input.form-text, select.form-select{width:60%;}
#webform-component-infos{@include fs14;}
} //change this
background-color: #e6e6e6; @include rounded(10px);
.fieldset-wrapper>.form-item{ @include inlineblock; }
#webform-component-column-left{@include inlineblock; width:25%; border:none;}
#webform-component-column-right{ @include inlineblock; min-width:70%;}
#webform-component-column-left--membership-options{
.form-type-radio{
border:1px solid #ddd; @include rounded(5px); padding: 10px 5px; margin: 5px 0;
input{ @include inlineblock; vertical-align: middle; margin:0px 5px;}
label{@include fs20; @include fs700; @include inlineblock; vertical-align: middle; margin: 0;}
background-color: #fff;
&:hover{@include drop-shadow(0, 0, 5px, 0.2); }
&.form-item-submitted-column-left-membership-options:nth-child(1){background-color: #69CDCF;}
&.form-item-submitted-column-left-membership-options:nth-child(2){background-color: #D476AE;}
&.form-item-submitted-column-left-membership-options:nth-child(3){background-color: #E6DE1C;}
&.form-item-submitted-column-left-membership-options:not(.selected){opacity:0.4;}
}
&>label{width:200px; @include fs18; @include fs700; }
label{ border: 0; }
}
#webform-component-column-right--me--my-account-email{
display:block;
}
#webform-component-column-right--company--administrative-e-mail{
.description{@include inlineblock;}
}
#addressfield-wrapper{ margin-top:1em; }
.street-block .form-item{ @include inlineblock; }
#webform-component-column-right--collaborators{
margin: 20px 0; overflow:hidden;
fieldset{@include inlineblock; width:33%;}
.form-item{display:block;}
label{width:6em;}
input{width:11em;}
}
#webform-component-infos{margin: 20px 0;}
.form-actions{
padding: 0; margin: 0;
border: 0px;
background-color: transparent;
text-align: left;
.form-submit{
border: 2px solid #69CDCF; background-color:#69CDCF; color:#fff;
@include fs18; padding: 0.2em 1em 0.3em; @include rounded(0.3em);
font-weight:bold;
margin-bottom:9px;
@include shadowTextBtnBlack();
}
}
#webform-component-column-right--news-letters{
>label{margin: 0; @include fs18; @include fs700; border:none; line-height:40px}
.form-item{
@include inlineblock();
label{width:auto}
input, label{margin: 0;}
}
}
#edit-submitted-terms-of-services{
margin-bottom:0.5em;
input, label{margin: 0 0.3em 0 0;}
label{ width:auto; }
}
} // adhesion
/*
_____ _____ _____ _____ _____ _____ _____ _____ _____ _ _ _ _____ _____ _____ _____
| | | | | | _ | __ |_ _| | | | | __| | | | | __| | __ | |
| | | --| | --| | -| | | | | |- -| __| | | | | __| | | -| | | |
|_____|_____| |_____|__|__|__|__| |_| \___/|_____|_____|_____| |__| |_____|__|__|_|_|_|
*/
#uc-cart-view-form{
background-color: #e6e6e6;
// @include rounded(10px);
padding: 10px, 30px;
// max-width:$cardfull_w;
display:inline-block;
table{
width:auto; display:table;
background-color:#fff;
thead th{border-bottom:none;padding: 1em;}
tbody{
border-top:none;
tr.even, tr.odd{
background-color:#fff;
border-bottom:none;
}
td{
padding: 1em;
// &.price{ padding: 0.5em 1em; }
}
}
}
fieldset{ border: none!important;}
.form-type-uc-quantity input{
width:2em;
}
.form-actions{
padding: 0; margin: 0;
border: 0px;
background-color: transparent;
text-align: right;
display:block; width:100%;
&:before, &:after{
display:block;
}
.form-submit{
@include bouton();
margin-left:1em;
&#edit-checkout--2{
@include bouton-bleu();
}
}
}
}
/*
_____ _____ _____ _____ _____ _____ _____ _____ _____ _____ _____ _____ _____ _____
| | | | | | | | __| | | | | | |_ _| | __| | __ | |
| | | --| | --| | __| --| -| | | | | | | | __| | | -| | | |
|_____|_____| |_____|__|__|_____|_____|__|__|_____|_____| |_| |__| |_____|__|__|_|_|_|
*/
#uc-cart-checkout-form{
// display:inline-block;
@mixin price-table(){
@include fs14;
min-width:20em;
td.price{width:4em;};
}
background-color: #e6e6e6;
// @include rounded(10px);
padding: 10px, 30px;
fieldset{ border: none!important;}
fieldset.form-row{
// @include rounded(5px); border-left: 1px solid #cccccc; border-bottom: 1px solid #cccccc;
padding-bottom:20px; margin-bottom:20px;
// fieldset{ border: 0 solid #ddd; padding: 0;}
}
fieldset.form-column{
@include inlineblock; max-width:39%; clear:both; float:none;
margin: 15px 1em;
> .fieldset-wrapper > .form-wrapper{
margin: 10px 0;
}
}
fieldset.form-column-left{}
fieldset.form-column-right{
border-left:1px solid #ccc;
margin-left:2em; padding-left:2em;
// background-color:#fff; @include rounded(5px);
}
legend{margin: 0; @include fs18; @include fs700; border:none; line-height:2;}
.fieldset-description{@include fs12;}
.fieldset-wrapper{@include fs12;}
.form-item{ margin: 0 20px 0 0; }
.description{ @include fs11; width:25em; @include inlineblock; vertical-align:bottom; margin-left:1em; color:#7f7f7f;}
#cart-pane{
>.fieldset-wrapper{
@include inlineblock();
@include rounded(5px);
padding: 10px;
background-color:#fff;
}
table{
@include price-table();
}
tbody{border:none; }
tr{background-color: transparent; border:none; }
td{
padding: 0 5px;
vertical-align: bottom;
&.products{
a{color:inherit; @include fs700;}
width:auto;
ul.product-description{margin: 0; @include fs12;}
li{list-style: none;}
}
}
tr.subtotal{
td{@include fs16; @include fs700;}
}
}
#customer-pane{width:35em;}
#billing-pane{
label{ @include fs12; width:8em; @include inlineblock; vertical-align:middle; margin-right:1em; border-bottom: 1px solid #cccccc; }
input.form-text{width:13em;}
}
#coupon_automatic-pane{}
#coupon-pane{}
#payment-pane{
// float:right;
.fieldset-wrapper{
background-color:#fff;
@include rounded(5px);
padding: 10px;
}
#line-items-div{
float:none; border:none;
@include inlineblock(); margin: 10px 0 20px;
table{@include price-table();}
tbody{border:none;}
td{
padding: 0 5px;
}
tr{
td{@include fs500;}
&.line-item-total td{
@include fs16; @include fs700; text-align: right;
}
}
}
#edit-panes-payment-payment-method{
label{width:auto; border-bottom:none;}
.form-item-panes-payment-payment-method{
border:1px solid #ddd;
border-radius:5px;
margin: 0.5em; padding: 0.5em;
label{font-weight:bold;}
}
}
#payment-details{
width:25em;
border-top:none; padding: 0; margin: 0;
}
}
#edit-actions{
width:100%;
padding:1em 0; margin: 0;
border: 0px;
background-color: transparent;
text-align: center;
.form-submit{
@include bouton();
margin-left:1em;
&#edit-continue{
@include bouton-bleu();
}
}
}
}
/*
_____ _____ _____ _____ _____ _____
| | | | | | _ | __ |_ _|
| | | --| | --| | -| | |
|_____|_____| |_____|__|__|__|__| |_|
&&
_____ _____ _____ _____ _____ _____ _____ _____ _____ _____ _____ _____ __ _____ ____ _____ _____ _____ _____ _____
| | | | | | | | __| | | | | | |_ _| | | | _ | | | | \| _ |_ _| | | | |
| | | --| | --| | __| --| -| | | | | | | | | | | |__|- -| | | | | | |- -| | | | | |
|_____|_____| |_____|__|__|_____|_____|__|__|_____|_____| |_| \___/|__|__|_____|_____|____/|__|__| |_| |_____|_____|_|___|
*/
//.page-cart,
.page-cart-checkout-review{
#content{
//text-align:center;
&> .inner-content{
//.card-box($cardfull_w, $cardfull_h);
//text-align:left;
display:inline-block;
padding: 1em;
}
}
#edit-actions{
margin: 0; padding: 0;
&:before, &:after{display:block;}
}
#review-instructions{
width:30em;
padding: 1em 0;
// .info;
}
table.order-review-table{
border:none;
.pane-title-row{
border:none;
background-color:transparent;
text-align:left;
@include fs18;
td{ padding: 1em 0 0 0; }
}
table.cart-review{
tr.odd{
background-color:transparent;
border:none;
}
}
td.title-col{
padding: 0;
text-align:left;
}
td.data-col{
padding: 0;
width:75%;
}
.review-button-row{
border:none;
background-color:transparent;
&>td{
padding: 3em 0 0 0;
}
form{
margin: 0 0.5em 0 0; @include inlineblock();
}
}
}
#edit-actions{
border: 0px;
background-color: transparent;
text-align: right;
}
input.form-submit{
@include bouton();
margin-left:1em;
&#edit-submit{
@include bouton-bleu();
}
}
}
/*
____ _____ ____ _____ _____ _____ _____ _____ _____ _____
| \| | \| _ | |_ _| | | | | __|
| | |- -| | | | --| | | |- -| | | | | __|
|____/|_____|____/|__|__|_____| |_| |_____|__ _|_____|_____|
|__|
*/
#didactique-page{
.node-didactique{
@include rounded(5px); background-color: #FFF;
@include drop-shadow(0, 0, 5px, 0.2);
max-width:850px;
@include fs14; background-color:#fff; //padding: 5px;
margin: 1em auto; padding: 1em;
.field-name-field-emvideo{
margin: 1em 0;
}
.field-name-title-field{
@include fs24; @include fs900; @include italic; padding:5px 0;
}
.field-name-field-visuel{
figure, img{max-width:100%;}
}
}
@media #{$medium-up}{
.side{ @include inlineblock(); vertical-align: top; }
.group-sideleft{ width:60%; }
.group-sideright{ width:39%; }
}
// @media #{$small-up}{
// } // change this
}
/*
_ _ _ _____ _____ _ _ _ _____ _____ _____ _____
| | | | | | | | | | | __| | _ | __ | __|
| | | | | | | | | | | __| | | -| __|
|_____|__|__|_____| |_____|_____| |__|__|__|__|_____|
*/
.page-whoweare{
#tool-bar{
@media #{$small-only}{
#block-materio-page-title-materio-page-title{display:none;}
} // chanhe this
}
}
/*
_ _
_____ ___|_|___| |_ ___ ___ ___ ___ ___ ___
| | .'| | | _| -_| | .'| | _| -_|
|_|_|_|__,|_|_|_|_| |___|_|_|__,|_|_|___|___|
*/
.maintenance-page{
#container, #header{ text-align: center; padding: 0; position:relative;}
#main{background-color: transparent; }
#header h1.site-name{font-size:36px; margin: 0; padding-left:0;}
h2.site-slogan{font-size:16px; @include fs300; margin: 0; line-height:1.1;}
}
/*
_____ _____ _____
| __| _ | |
| __| | | |
|__| |__|__|__ _|
|__|
*/
.page-faq-page #main{
background: #fff url('../img/bg-faq.png') no-repeat bottom right;
}
#content .faq-content{
.faq-description{
@include fs12; padding-bottom:2em;
}
ul.faq-ul-questions-top{
margin: 0;
li{
list-style: none;
a{
@include fs18; @include fs500;
}
}
}
h3.faq-header{
@include fs20; @include fs700; line-height:1.2;
margin: 0;
a{color:#000;}
}
.faq-dl-hide-answer{
padding: 0;
}
.faq-category-group{
padding-bottom:1em;
}
.faq-question-answer{
padding: 0.3em 0 0 0.8em;
.faq-question{
@include fs16; padding: 0; @include fs500;
a{color:#000;}
}
.faq-answer{
padding: 0; margin-bottom:2em;
@include fs12;
}
}
.field-name-body img{
max-width:50%;
height:auto;
}
}
/*
__ __ _ _____
/ / / /___ ____ ___ ___ | | / /__ \
/ /_/ / __ \/ __ `__ \/ _ \ | | / /__/ /
/ __ / /_/ / / / / / / __/ | |/ // __/
/_/ /_/\____/_/ /_/ /_/\___/ |___//____/
*/
body.home-v2{
#center{
background-color: transparent;
padding:0;
}
}
@mixin shaddowed(){
@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
&:hover{@include drop-shadow(0, 0, 5px, 0.4);}
}
#home-v2{
// padding: 40px 40px;
h2{font-size: 2.1em; font-weight: 300;}
a{color: #000};
.field-name-field-liens{
margin-top:1em;
.field-item{@include inlineblock(); margin:0 0.5em 0.5em 0; }
a{
font-weight: 700; @include inlineblock();
padding:0.5em 1em 0.7em;
@include rounded(5px);
background-color: rgba(255,255,255, 0.8);
body.logged-in &.visitor{display:none;}
body.not-logged-in &.member{display:none;}
}
}
.panel-separator{clear:both;}
>.panel-panel>div>.panel-pane {
// padding: 10px 15px;
overflow:hidden;
&.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: 15px;
}
}
&.intro-video{
height:auto;
background-color: $creme;
margin-top:2em;margin-bottom:2em; 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{
// display:none;
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;
@media #{$small-only}{
width:48%;
}
}
}
@media #{$small-only}{
margin-top: 0.5em;
}
}
&.pane-menu-menu-home-v2, &.pane-menu-menu-menu-home-member{
margin:2em 0;
ul.menu{
margin: 0px; text-align: center;
}
li{
margin:0 1em 0 0; padding:0px; list-style: none; height:2.5em;
@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;
&[href="/fr/actuality"]{
background-color:$vertjaune;
@include shadowTextBtnBlack();
}
}
}
// @media #{$small-only}{
// display:none;
// }
}
&.pane-materio-user-user-register{
padding: 2em 0;
background: transparent url('../img/register-block.png') no-repeat 100% 90%;
text-align: center;
.pane-content{
@include inlineblock(); text-align: left;
}
h2, h3{@include fs900; @include italic; padding:5px 0; margin: 0; line-height: 1; @include inlineblock(); vertical-align: middle;}
h2{@include fs24;} h3{@include fs16;}
form{margin: 0 1em; padding:0px; @include inlineblock(); vertical-align: middle;}
.form-item, .form-wrapper{
margin: 0; position:relative; @include inlineblock();vertical-align: middle;
}
#edit-account{margin-right:5px;}
input.form-text{ @include fs12; @include rounded(5px); margin-bottom:4px;.ie8 &{margin-right:5px;}}
.form-item-mail input.form-text, .form-item-name input.form-text{ width:11em;}
.form-item-pass input.form-text{ width:7em;}
#edit-mail-check{
position:absolute; bottom:100%; z-index:9999; background-image: none;
height:auto; //width:90%;
padding: 5px; @include rounded(5px); margin-bottom:10px;
@include fs11; background-color: #fff;
@include drop-shadow(0, 0, 5px, 0.6);
@include transition-simply-prefix(bottom 0.1s ease-out);
&.error{
background-color: #f3968d;
// border: 2px solid #f30002;
color:#fff;
}
&.ok{ display:none; }
}
.form-submit{
//border: 2px solid #69CDCF; background-color:#69CDCF; color:#FF7400; // orange/bleu
@include fs16; padding: 0.1em 0.6em 0.2em; @include rounded(0.3em);
font-weight:bold;
margin-bottom:4px;
}
.form-item-termsofservices, #edit-field-newsletter{
margin-bottom:0; display:block; line-height: 1;
&>*{ @include inlineblock; vertical-align: middle; margin: 0; }
label{ @include fs10; background-color: #fff; @include rounded(3px); }
}
#user-register-form{
.form-submit{
border: 2px solid #69CDCF; background-color:#69CDCF; color:#fff; // blanc/bleu
@include shadowTextBtnBlack();
&[disabled]{
background-color:#ddd; border: 2px solid #ddd;
}
}
}
#user-login{
.form-submit{
border: 2px solid #E6DE1C; background-color:#E6DE1C; color:#fff; // noire/jaune
@include shadowTextBtnBlack();
}
}
#edit-simplenews{display:none;}
a.join{
@include inlineblock(); vertical-align: middle;
// display:block;
margin: 0 1em;
// width:5em;
@include fs16; padding: 0.1em 0.3em 0.2em; @include rounded(0.3em);
font-weight:bold;
border: 2px solid #69CDCF; background-color:#69CDCF; color:#fff; // blanc/bleu
@include shadowTextBtnBlack();
text-align: center; text-decoration: none;
}
@media #{$small-only}{
background-position: 160% 50%;
.form-item-mail input.form-text, .form-item-name input.form-text{ width:7em;}
min-height:60px; padding: 15px 0;
// #user-login, >h3:first-child, >h3 span{ display:none; }
}
.message-error{
color:#b94a48; @include fs12;
}
}
&.showroom{
@include shaddowed();
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;
.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-wrapper{
position:relative;
z-index:2;
width:30%;
margin:3em 2em;
.group-content{
background-color: rgba(255,255,255, 0.8);
padding:1em;
@include rounded(5px);
.field-name-title-field{
font-size: 2.1em; font-weight: 300;
}
.field-name-body{
margin-top: 0.5em;
}
}
}
}
&:after{
content:url("../img/bulle.png");
transform: scale(0.8);
position: absolute;
bottom:-120px;
right: -20px;
z-index:10;
}
@media #{$small-only}{
height:210px;
margin-top: 10px;
.pane-content{
.field-name-field-bandeau{
position:absolute; width:200%; height:100%; overflow:hidden;
img{margin-top:-100px; margin-left:-200px;}
}
.group-content-wrapper{
width:auto;
padding:2%;
margin:2%;
.field-name-body{
font-size:0.756em;
margin-top:0.5em;
}
}
}
&:after{
opacity:0.4;
}
}
}
&.bdd{
@include shaddowed();
height:450px;
margin-top: 30px;
background-color: #FFF;
position: relative;
.links a{background-color: #e6e6e6;}
.field-name-field-bandeau{
@include inlineblock(); width:60%; height:100%; overflow:hidden;
img{max-width:2000px;}
}
.group-content-wrapper{
@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;
}
.field-name-field-liens a{background-color: rgba(230,230,230, 0.8);}
}
&:after{
content:url("../img/boule.png");
transform: scale(0.8);
position: absolute;
bottom:-50px;
left: -50px;
}
@media #{$small-only}{
height:auto;
.field-name-field-bandeau{
width:100%; display:block; height:310px; overflow:hidden;
}
.group-content-wrapper{display:block; width:100%; z-index:1;}
&:after{opacity:0.6; z-index:0;}
}
}
&.formations{
@include shaddowed();
position: relative;
height:300px;
margin-top: 30px;
background-color: #000;
color: #FFF;
a{color: #FFF;}
.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-wrapper{
padding:1em; position:relative;
.field-name-title-field{
font-size: 2.1em; font-weight: 300;
}
.field-name-body{
margin-top: 1em;
}
}
@media #{$small-only}{
height:auto;
}
}
&.services{
@include shaddowed();
background-color: #FFF;
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-wrapper{
padding:1em; position:relative;
.field-name-title-field{
font-size: 2.1em; font-weight: 300;
}
.field-name-body{
margin-top: 1em;
}
.field-name-field-liens a{background-color: rgba(230,230,230, 0.8);}
}
@media #{$small-only}{
height:auto;
}
}
&.publication{
@include shaddowed();
position: relative;
// height:300px;
margin-top: 30px;
padding:1em;
background-color: #000;
&, a, h1, h2{color: #fff;}
@include rounded(10px);
.view-publication-home-v2{
.views-row{
@include inlineblock();
width:30%;
h1{display:none;}
}
}
@media #{$small-only}{
.view-publication-home-v2{
.views-row{display:block; width:90%; margin-bottom: 1em;}
}
}
}
}
//mini panneau news
>.panel-panel>div>.pane-news-home-v2{
background-color: #e6e6e6; @include rounded(10px);
margin-top: 30px; padding-top: 1em; padding-bottom: 1em;
// padding:0;
position: relative;
// .panel-col-first{width:70%;}
// .panel-col-last{width:29.9%;}
h2{font-size: 30px;}
@media #{$medium-up}{
#mini-panel-news_home_v2 .center-wrapper{
@include grid-row();
.panel-panel{
overflow:hidden;
@include grid-column(4);
// width:32.8%;
padding:0em; margin-left:1em;
&.panel-col-first{width:auto;}
&:not(.panel-col-first){width:31%;}
.inside{margin:0;}
article.node, article.node-breve.vm-cardbig{margin:0; height:610px;}
}
}
}
#mini-panel-news_home_v2 .panel-col-bottom{
@include grid-row(); margin-top: 1.5em; margin-bottom: 1.5em;
>.inside{
@include grid-column(12);
}
p{display:none;}
.form-checkboxes{
margin:0 0 0.5em 0;
.form-item{
@include inlineblock(); margin-right: 1em;
label, input{vertical-align: middle;}
}
}
.form-item-mail{
@include inlineblock(); margin:0;
label, input{@include inlineblock(); margin-right: 1em;}
}
#edit-subscribe, #edit-unsubscribe{@include inlineblock();}
}
// .view-news-home-v2{
// .views-row{@include inlineblock();}
// }
.node-simplenews{
@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);
position: absolute;
bottom:20px;
right: 10px;
}
@media #{$small-only}{
background-color: transparent;
#mini-panel-news_home_v2 .center-wrapper{
.panel-panel.panel-col-first{max-width:100%;}
.panel-panel:not(.panel-col-first){display:none;}
}
&:after{z-index: -1; opacity:0.4;}
}
}
#contact-pane{
margin:2em 0; padding:1em;
background-color: #e6e6e6;
.field-name-body{
text-align: center;
p{
@include inlineblock();
min-width: 20%;
}
}
}
} // homeV2
/*
_ __
_____(_)___ ___ ____ / /__ ____ ___ _ _______
/ ___/ / __ `__ \/ __ \/ / _ \/ __ \/ _ \ | /| / / ___/
(__ ) / / / / / / /_/ / / __/ / / / __/ |/ |/ (__ )
/____/_/_/ /_/ /_/ .___/_/\___/_/ /_/\___/|__/|__/____/
/_/
*/
.node-type-simplenews{
img{
max-width: none !important;
}
}
/*
_ _ _ _ _
| | | (_) | | (_)
_ __ _ _| |__ | |_ ___ __ _| |_ _ ___ _ __ ___
| '_ \| | | | '_ \| | |/ __/ _` | __| |/ _ \| '_ \/ __|
| |_) | |_| | |_) | | | (_| (_| | |_| | (_) | | | \__ \
| .__/ \__,_|_.__/|_|_|\___\__,_|\__|_|\___/|_| |_|___/
| |
|_|
*/
body.node-type-publication{
article.node-publication{
.field{
figure, img{max-width:100%;}
}
@media #{$large-up}{
.field{@include inlineblock();}
.field-name-field-couverture{width:25%;}
.field-name-body{
margin-left: 1em;
width:70%;
}
}
}
}
@import "misc.scss";
// end