2408 lines
51 KiB
SCSS
2408 lines
51 KiB
SCSS
|
|
$mdi-font-path: './mdi/fonts/';
|
|
@import './mdi/scss/materialdesignicons';
|
|
|
|
@import './base/variables';
|
|
@import './base/colors';
|
|
@import './base/reset';
|
|
@import './base/grid';
|
|
@import './base/layout';
|
|
@import './base/animations';
|
|
@import './base/fonts';
|
|
// @import './base/responsive';
|
|
|
|
// .dialog-off-canvas-main-canvas{
|
|
// background-color: red;
|
|
// }
|
|
|
|
@mixin iconMDI($name) {
|
|
&::before {
|
|
content: mdi($name);
|
|
display: inline-block;
|
|
font: normal normal normal #{$mdi-font-size-base}/1 '#{$mdi-font-name}'; // shortening font declaration
|
|
font-size: inherit; // can't have font-size inherit on line above, so need to override
|
|
text-rendering: auto; // optimizelegibility throws things off #1094
|
|
line-height: inherit;
|
|
-webkit-font-smoothing: antialiased;
|
|
-moz-osx-font-smoothing: grayscale;
|
|
}
|
|
}
|
|
|
|
@mixin hover{
|
|
@media (hover: hover) { /* solves sticky problem */
|
|
&:hover {
|
|
@content;
|
|
}
|
|
}
|
|
&.tapped{
|
|
@content;
|
|
}
|
|
}
|
|
|
|
aside.messages{
|
|
border:none;
|
|
}
|
|
|
|
// _ _ _
|
|
// | || |___ __ _ __| |___ _ _
|
|
// | __ / -_) _` / _` / -_) '_|
|
|
// |_||_\___\__,_\__,_\___|_|
|
|
|
|
header[role="banner"]{
|
|
padding:0.2em 0 0 0;
|
|
|
|
%header-fs{
|
|
font-size: 0.9em;
|
|
// line-height: 1;
|
|
font-weight: 400;
|
|
}
|
|
|
|
// @include col-mediaquery-max(3){
|
|
// overflow-x: hidden;
|
|
// }
|
|
|
|
#block-sitebranding{
|
|
h1{
|
|
margin:0;
|
|
line-height: 1;
|
|
}
|
|
.slogan{
|
|
font-size: 0.882em;
|
|
display: block;
|
|
white-space: nowrap;
|
|
// @include col-mediaquery-max(2){
|
|
// display:none;
|
|
// }
|
|
}
|
|
@include col-mediaquery-max(3){
|
|
h1, .slogan{
|
|
display: inline-block;
|
|
}
|
|
}
|
|
}
|
|
|
|
@include col-mediaquery-max(3){
|
|
.header-block.header-right{
|
|
.header-block-wrapper{
|
|
&, #user-flags ul{
|
|
// background-color: #222;
|
|
// color: #fff;
|
|
background-color: #fff;
|
|
}
|
|
}
|
|
}
|
|
}
|
|
|
|
#block-socialmedialinks{
|
|
padding-right: 0.5em;
|
|
border-right: 1px solid $color-main-text;
|
|
margin-right: 0.5em;
|
|
li{
|
|
padding:0;
|
|
}
|
|
// @include col-mediaquery-max(4){
|
|
// display:none;
|
|
// }
|
|
}
|
|
|
|
#block-userlogin{
|
|
position: relative;
|
|
// width:8em;
|
|
padding:0 1em;
|
|
overflow: visible;
|
|
h2{
|
|
@extend %header-fs;
|
|
line-height: 1.38;
|
|
margin: 0;
|
|
}
|
|
&>section{
|
|
overflow: hidden;
|
|
background-color: #fff;
|
|
// margin:0 0 0 -1em;
|
|
box-sizing:content-box;
|
|
transition: all 0.4s ease-in-out;
|
|
// outline: 1px solid blue;
|
|
right:0;
|
|
top:1.7em;
|
|
box-sizing: content-box;
|
|
z-index:100;
|
|
}
|
|
// appears on hover only on big screens
|
|
@include col-mediaquery-min(3){
|
|
&>section{
|
|
max-height:0px;
|
|
padding:0.01em 1em;
|
|
transition-delay: 2s;
|
|
position: absolute;
|
|
width:11em;
|
|
}
|
|
|
|
@include hover{
|
|
&>section{
|
|
transition-delay: 0s;
|
|
max-height:20em;
|
|
padding:1em 1em;
|
|
box-shadow: 0 0 10px #ccc;
|
|
}
|
|
}
|
|
}
|
|
.form-item{
|
|
margin:0;
|
|
position: relative;
|
|
width:100%;
|
|
&.form-item-name{
|
|
margin:2px 0 0.5em 0;
|
|
input{
|
|
width:90%;
|
|
padding:0;
|
|
box-sizing: content-box;
|
|
}
|
|
}
|
|
&.form-item-pass{
|
|
margin:0 0 0.5em 0;
|
|
input{
|
|
width:90%;
|
|
padding:0;
|
|
box-sizing: content-box;
|
|
}
|
|
}
|
|
&.form-item-persistent-login{
|
|
font-size: 0.756em;
|
|
label{
|
|
vertical-align: top;
|
|
}
|
|
}
|
|
}
|
|
#edit-actions{
|
|
margin:0;
|
|
}
|
|
.item-list{
|
|
ul{
|
|
margin:0;
|
|
li{
|
|
list-style: none;
|
|
margin:0;
|
|
a{
|
|
font-size: 0.756em;
|
|
}
|
|
}
|
|
}
|
|
}
|
|
span.login-message{
|
|
color: red;
|
|
font-size: 0.693em;
|
|
line-height: 1.2;
|
|
display: block;
|
|
padding: 0 0 0.8em 0;
|
|
}
|
|
span.login-message[v-if="loginMessage"],
|
|
span.register-message[v-if="registerMessage"]{
|
|
display: none;
|
|
}
|
|
}
|
|
|
|
// non-vue userblock
|
|
#block-userblock{
|
|
h2{display:none;}
|
|
a{
|
|
margin-right: 1em;
|
|
}
|
|
}
|
|
// vue userblock
|
|
#user-tools{
|
|
padding-top: 0.06em;
|
|
a.mdi-account{
|
|
@extend %header-fs;
|
|
cursor: pointer;
|
|
span{
|
|
// @include col-mediaquery-max(5){
|
|
// display:none;
|
|
// }
|
|
}
|
|
}
|
|
.mdi-logout::before {
|
|
margin: -0.125em 0 0 0;
|
|
vertical-align: top;
|
|
}
|
|
}
|
|
|
|
// vue flaglist
|
|
#user-flags{
|
|
padding-left: 0.5em;
|
|
margin-left: 0.5em;
|
|
display: inline-block;
|
|
vertical-align: top;
|
|
position: relative;
|
|
h2{
|
|
@extend %header-fs;
|
|
cursor: pointer;
|
|
&:before{padding-right: 0.2em;}
|
|
span{
|
|
// @include col-mediaquery-max(5){
|
|
// display:none;
|
|
// }
|
|
}
|
|
}
|
|
ul{
|
|
background-color: #fff;
|
|
overflow: hidden;
|
|
// margin:0 0 0 -1em;
|
|
box-sizing:content-box;
|
|
// outline: 1px solid blue;
|
|
box-sizing: content-box;
|
|
}
|
|
// folders menu dropdown only for gig screens
|
|
@include col-mediaquery-min(3){
|
|
border-left: 1px solid #000;
|
|
ul{
|
|
transition: all 0.4s ease-in-out;
|
|
transition-delay: 2s;
|
|
z-index: 30;
|
|
position: absolute;
|
|
right:0;
|
|
top:1.7em;
|
|
width:11em;
|
|
max-height:1px;
|
|
padding:0.01em 1em;
|
|
|
|
}
|
|
@include hover{
|
|
ul{
|
|
transition-delay: 0s;
|
|
max-height:50em;
|
|
padding:1em 1em;
|
|
box-shadow: 0 0 10px #ccc;
|
|
}
|
|
}
|
|
}
|
|
li{
|
|
width:100%;
|
|
// cursor: pointer;
|
|
display: flex;
|
|
flex-direction: row;
|
|
align-items: baseline;
|
|
flex-wrap: nowrap;
|
|
h5{
|
|
@extend %header-fs;
|
|
cursor: pointer;
|
|
font-weight: 700;
|
|
span.length{
|
|
font-weight: 300;
|
|
}
|
|
}
|
|
span.mdi{
|
|
font-size: 0.9em;
|
|
}
|
|
div.actions{
|
|
padding-left:0.5em;
|
|
|
|
span.mdi{
|
|
cursor: pointer;
|
|
color: #4e4d4d;
|
|
}
|
|
span.delete-btn{
|
|
&.loading:before{
|
|
animation: rotating 2s linear infinite;
|
|
}
|
|
}
|
|
}
|
|
@include col-mediaquery-min(3){
|
|
div.actions{
|
|
opacity:0;
|
|
transition: opacity 0.3s ease-in-out;
|
|
}
|
|
|
|
@include hover{
|
|
div.actions{
|
|
opacity:1;
|
|
}
|
|
}
|
|
}
|
|
// small screens
|
|
@include col-mediaquery-max(3){
|
|
flex-direction: row-reverse;
|
|
div.actions{
|
|
padding-left: 0;
|
|
padding-right: 0.5em;
|
|
}
|
|
}
|
|
&.create-flag{
|
|
margin-top: 0.2em;
|
|
input{
|
|
align-self: flex-end;
|
|
border: 1px solid #bbb;
|
|
border-radius:5px;
|
|
width: calc(100% - 2em);
|
|
font-size:0.8em;
|
|
}
|
|
span.add-btn{
|
|
align-self: flex-end;
|
|
color: #bbb;
|
|
font-size: 1em;
|
|
padding: 0 0 0 .5em;
|
|
transition: all 0.2s ease-in-out;
|
|
&.active{
|
|
cursor: pointer;
|
|
color:#1a1a1a;
|
|
}
|
|
&.loading:before{
|
|
animation: rotating 2s linear infinite;
|
|
}
|
|
}
|
|
}
|
|
}
|
|
}
|
|
|
|
// menu
|
|
#block-header{
|
|
margin-right: 1em;
|
|
padding-left: 1em;
|
|
border-left: 1px solid #000;
|
|
#block-header-menu{
|
|
display:none;
|
|
}
|
|
// label[for="block-header-menu"]{
|
|
// display:none;
|
|
// }
|
|
ul.menu{
|
|
margin:0;
|
|
li{
|
|
padding:0;
|
|
a{
|
|
@extend %header-fs;
|
|
}
|
|
}
|
|
}
|
|
// @include col-mediaquery-max(3){
|
|
ul.menu{
|
|
li{
|
|
display: inline-block;
|
|
&:not(:first-of-type){
|
|
margin-left: 0.5em;
|
|
}
|
|
}
|
|
}
|
|
// }
|
|
@include col-mediaquery-max(3){
|
|
// position: relative;
|
|
//
|
|
// label[for="block-header-menu"]{
|
|
// display:block;
|
|
// }
|
|
// /* Toggle Show/Hide Menu */
|
|
// // https://code-boxx.com/simple-responsive-pure-css-hamburger-menu/#sec-download
|
|
// ul.menu { display: none; }
|
|
// input:checked ~ ul.menu { display: block; }
|
|
// ul.menu{
|
|
// position: absolute;
|
|
// width: 110px;
|
|
// height: auto;
|
|
// top: 18.9px;
|
|
// right: 0;
|
|
// background-color: white;
|
|
// padding: 0.2em 0.5em;
|
|
// margin-right: -0.5em;
|
|
// z-index: 90;
|
|
// text-align: right;
|
|
// li{
|
|
// display: block;
|
|
// }
|
|
// }
|
|
ul.menu{
|
|
text-align: right;
|
|
li{
|
|
display: block;
|
|
}
|
|
}
|
|
}
|
|
}
|
|
|
|
#block-languageswitcher{
|
|
text-align: right;
|
|
position: relative;
|
|
padding-right: 3px;
|
|
h2{
|
|
margin: 0.1em 0 0 0;
|
|
font-size: 0.756em;
|
|
font-weight: 400;
|
|
padding:0.1em 0.4em 0.2em;
|
|
border-radius: 3px;
|
|
background-color: #444;
|
|
color: #fff;
|
|
display: inline-block;
|
|
vertical-align: top;
|
|
|
|
@include iconMDI('translate');
|
|
width:12px;
|
|
height:15px;
|
|
overflow: hidden;
|
|
}
|
|
&>ul.links{
|
|
// background-color: #fff;
|
|
overflow: hidden;
|
|
// display: inline-block;
|
|
margin:0;
|
|
box-sizing:content-box;
|
|
// outline: 1px solid blue;
|
|
// transition-delay: 2s;
|
|
}
|
|
|
|
@include col-mediaquery-min(3){
|
|
&>ul.links{
|
|
width:3.5em;
|
|
position: absolute;
|
|
top:17px;
|
|
right:0;
|
|
transition: all 0.4s ease-in-out;
|
|
padding:0.01em 0;
|
|
height:1px;
|
|
}
|
|
@include hover{
|
|
&>ul.links{
|
|
transition-delay: 0s;
|
|
height:2em;
|
|
padding:0.3em 0;
|
|
// box-shadow: 0 0 10px #ccc;
|
|
}
|
|
}
|
|
}
|
|
|
|
@include col-mediaquery-max(3){
|
|
h2{display: none;}
|
|
|
|
}
|
|
li{
|
|
list-style: none;
|
|
padding:0;
|
|
display: inline-block;
|
|
&.is-active{
|
|
display:none;
|
|
}
|
|
a{
|
|
margin: 0;
|
|
font-size: 0.756em;
|
|
font-weight: 400;
|
|
padding:0.2em 0.4em;
|
|
border-radius: 3px;
|
|
background-color: #444;
|
|
color: #fff;
|
|
}
|
|
}
|
|
|
|
}
|
|
|
|
// header bottom
|
|
#header-bottom{
|
|
// disable the default wrapper behaviour
|
|
&:after{content: none;}
|
|
// apply flex for normal layout
|
|
display: flex;
|
|
flex-direction: row;
|
|
justify-content: space-between;
|
|
|
|
#block-pagetitle{}
|
|
#block-materiosapisearchblock{
|
|
align-self: flex-end;
|
|
}
|
|
@include col-mediaquery-max(3){
|
|
flex-direction: column;
|
|
justify-content:center;
|
|
#block-pagetitle{
|
|
// width: max-content;
|
|
width:100%;
|
|
}
|
|
#block-materiosapisearchblock{
|
|
box-sizing: border-box;
|
|
width:100%;
|
|
}
|
|
}
|
|
|
|
}
|
|
#block-pagetitle{
|
|
// float: left;
|
|
padding:1em 0;
|
|
|
|
@include col-mediaquery-max(3){
|
|
body.path-frontpage &, body.path-home & {
|
|
display: none;
|
|
}
|
|
padding: 1em 0 0;
|
|
body.path-base &{
|
|
h2{
|
|
padding: 0.5em 1em 0!important;
|
|
}
|
|
}
|
|
|
|
}
|
|
h2{
|
|
margin:0;
|
|
font-size: 1.512em;
|
|
text-transform: capitalize;
|
|
font-weight: 300;
|
|
|
|
body.path-home & {
|
|
display: none;
|
|
}
|
|
body:not(.path-home) & {
|
|
padding:0.5em 1em;
|
|
}
|
|
body.path-blabla &,
|
|
body.path-checkout & {
|
|
color: #fff;
|
|
background-color: $color-blabla;
|
|
}
|
|
body.path-showrooms & {
|
|
color: #fff;
|
|
background-color: $color-showrooms;
|
|
}
|
|
body.path-base &,
|
|
body.path-thematique & {
|
|
color: #fff;
|
|
background-color: $color-base;
|
|
}
|
|
body.path-pricing & {
|
|
color: #fff;
|
|
background-color: $color-webshowroom;
|
|
}
|
|
}
|
|
}
|
|
|
|
#block-materiosapisearchblock{
|
|
// float:right;
|
|
// display:inline-block;
|
|
// box-shadow: 0 0 5px rgba(0,0,0,0.2);
|
|
padding:0;
|
|
|
|
#materio-sapi-search-form{
|
|
.form-item, input.button{
|
|
display: inline-block;
|
|
}
|
|
|
|
#edit-search{
|
|
border:1px #BBB solid;
|
|
border-radius: 14px;
|
|
padding:0.3em;
|
|
color:#666;
|
|
}
|
|
|
|
.button.form-submit{
|
|
border:0;
|
|
text-indent: 50px;
|
|
overflow: hidden;
|
|
width:20px; height:20px;
|
|
margin:0;
|
|
// border-radius: 7px;
|
|
background-image: url('../img/search.svg');
|
|
background-position: center;
|
|
background-repeat: no-repeat;
|
|
background-size: contain;
|
|
background-color: transparent
|
|
}
|
|
|
|
}
|
|
@include col-mediaquery-max(3){
|
|
body:not(.path-base) &{
|
|
display: none;
|
|
}
|
|
padding: 0 1em;
|
|
background-color: $color-base;
|
|
}
|
|
|
|
}
|
|
}
|
|
|
|
|
|
|
|
// main
|
|
aside.messages{
|
|
padding: 0;
|
|
}
|
|
|
|
// content top
|
|
// #content-top{
|
|
// &:after{
|
|
// content:"";
|
|
// clear:both;
|
|
// display: block;
|
|
// }
|
|
// }
|
|
|
|
|
|
// ___ _ _ _ __ _
|
|
// / __|___ _ _| |_ ___ _ _| |_ ___| | ___ / _| |_
|
|
// | (__/ _ \ ' \ _/ -_) ' \ _|___| |__/ -_) _| _|
|
|
// \___\___/_||_\__\___|_||_\__| |____\___|_| \__|
|
|
#content-left{
|
|
z-index: 5;
|
|
box-sizing: content-box;
|
|
max-width:1px;
|
|
overflow-x: hidden;
|
|
transition: all 0.3s ease-in-out;
|
|
&.opened{
|
|
max-width: 500px;
|
|
padding: 0.3em;
|
|
}
|
|
>*{
|
|
box-sizing: border-box;
|
|
background-color: #fff;
|
|
box-shadow: -2px 0px 4px rgba(0, 0, 0, 0.2);
|
|
padding: 0.5em;
|
|
}
|
|
.flag-collection{
|
|
>header{
|
|
display: flex;
|
|
flex-direction: row;
|
|
justify-content: space-between;
|
|
padding-bottom: $column_goutiere;
|
|
h3{
|
|
// flex-basis: calc(100% - 1em);
|
|
}
|
|
.mdi-close{
|
|
// display: block;
|
|
// flex-basis: 1em;
|
|
cursor:pointer;
|
|
align-self: flex-end;
|
|
}
|
|
}
|
|
>ul{
|
|
@include col-mediaquery-max(2){
|
|
display:flex;
|
|
flex-direction: row;
|
|
flex-wrap: wrap;
|
|
justify-content: space-between;
|
|
}
|
|
>li{
|
|
|
|
margin:0 0 $column_goutiere 0;
|
|
padding:0;
|
|
article.card.minicard{
|
|
width:$minicard_width;
|
|
height:$minicard_height;
|
|
margin:auto;
|
|
>header{
|
|
padding: 0.3em 0.3em 0.1em;
|
|
h1{
|
|
margin:0;
|
|
}
|
|
}
|
|
>nav.tools{
|
|
// top: auto;
|
|
// bottom: 0;
|
|
padding:0 0.2em;
|
|
// background:transparent;
|
|
.mdi.unflag{
|
|
cursor: pointer;
|
|
}
|
|
.tool.samples{
|
|
.tool-content{
|
|
|
|
}
|
|
}
|
|
}
|
|
}
|
|
|
|
}
|
|
}
|
|
}
|
|
}
|
|
|
|
|
|
// __ _
|
|
// / _|_ _ ___ _ _| |_
|
|
// | _| '_/ _ \ ' \ _|
|
|
// |_| |_| \___/_||_\__|
|
|
|
|
@mixin btn{
|
|
display: inline-block;
|
|
font-size: 0.9em;
|
|
font-weight: bold;
|
|
padding: 0.7em 1em;
|
|
margin-bottom: 0.3em;
|
|
background-color: #fff;
|
|
color: #000;
|
|
border-radius: 5px;
|
|
border: none;
|
|
}
|
|
|
|
article.node--type-frontpage{
|
|
|
|
%front-col-field__label{
|
|
font-size: 3.5em;
|
|
line-height: 1;
|
|
@include col-mediaquery-max(3){
|
|
font-size: 2em;
|
|
}
|
|
}
|
|
%front-col-description{
|
|
font-size: 0.9em;
|
|
line-height: 1.3;
|
|
}
|
|
|
|
%part-centered-layout{
|
|
padding:1.5em 0;
|
|
background-color: #fff;
|
|
>div:nth-child(1){
|
|
width:80%;
|
|
margin: 0 auto;
|
|
text-align: center;
|
|
@include col-mediaquery-max(3){
|
|
width:auto;
|
|
padding:0 1em;
|
|
text-align: left;
|
|
}
|
|
.field__label{
|
|
@extend %front-col-field__label;
|
|
}
|
|
.field__item{
|
|
@extend %front-col-description;
|
|
}
|
|
}
|
|
}
|
|
|
|
// %part-columned-layout{
|
|
// display:grid;
|
|
// grid-template-columns: 300px 1fr;
|
|
// grid-column-gap: 2em;
|
|
// padding:2em 1em;
|
|
// >div:nth-child(1){
|
|
// color: #fff;
|
|
// grid-column: 1;
|
|
// .field__label{
|
|
// @extend %front-col-field__label;
|
|
// }
|
|
// .field__item{
|
|
// @extend %front-col-description;
|
|
// }
|
|
// }
|
|
// >div:nth-child(2){
|
|
// grid-column: 2;
|
|
// }
|
|
// }
|
|
|
|
%part-columned-layout{
|
|
display:flex;
|
|
flex-direction: row;
|
|
flex-wrap: nowrap;
|
|
>div:nth-child(1){
|
|
flex: 0 0 $column_width * 2 + $column_goutiere;
|
|
box-sizing: border-box;
|
|
padding: 1em;
|
|
color: #fff;
|
|
.field__label{
|
|
@extend %front-col-field__label;
|
|
}
|
|
.field__item{
|
|
@extend %front-col-description;
|
|
}
|
|
}
|
|
>div:nth-child(2){
|
|
flex: 1 1 auto;
|
|
box-sizing: border-box;
|
|
padding: 1em 0.5em;
|
|
}
|
|
@include col-mediaquery-max(3){
|
|
flex-direction: column;
|
|
>div:nth-child(1){
|
|
flex: 0 0 auto;
|
|
// box-sizing: border-box;
|
|
// padding: 1em;
|
|
}
|
|
>div:nth-child(2){
|
|
// flex: 1 1 auto;
|
|
// box-sizing: border-box;
|
|
// padding: 1em 0.5em;
|
|
}
|
|
}
|
|
|
|
}
|
|
|
|
>h2{
|
|
display: none;
|
|
}
|
|
|
|
.node__content{
|
|
|
|
&>section{
|
|
&.home-intro{
|
|
@extend %part-centered-layout;
|
|
.field__item{
|
|
display: flex;
|
|
flex-flow: row nowrap;
|
|
justify-content: center;
|
|
p{
|
|
flex: 0 0 $column_width * 2;
|
|
padding:1em;
|
|
}
|
|
@include col-mediaquery-max(3){
|
|
display: none;
|
|
}
|
|
}
|
|
}
|
|
&.home-database{
|
|
background-color: $color-base;
|
|
@extend %part-columned-layout;
|
|
.field--name-field-a-database{
|
|
.field__label{
|
|
cursor: pointer;
|
|
}
|
|
}
|
|
.field--name-field-database-links{
|
|
.field__item{
|
|
display: inline-block;
|
|
a{
|
|
@include btn;
|
|
background-color: #fff;
|
|
color: $color-base;
|
|
}
|
|
}
|
|
}
|
|
.cards-list-home{
|
|
position: relative;
|
|
// max-height: (130px*1.4)*3;
|
|
max-height: 580px;
|
|
overflow-y: hidden;
|
|
ul{
|
|
width:100%;
|
|
margin:0; padding:0;
|
|
// display: grid;
|
|
// grid-template-columns: repeat(auto-fill, minmax(50px, 130px));
|
|
// grid-template-rows: 1fr;
|
|
// grid-gap: 1em;
|
|
// justify-content:start;
|
|
display: flex;
|
|
flex-flow: row wrap;
|
|
justify-content: space-between;
|
|
@include col-mediaquery-max(3){
|
|
justify-content: space-around;
|
|
}
|
|
li{
|
|
padding:0 0 $column_goutiere / 2 0;
|
|
box-sizing: border-box;
|
|
// padding-top: 140%;
|
|
width: $column_width / 2;
|
|
height: $card_height / 2;
|
|
position: relative;
|
|
list-style: none;
|
|
margin:0;
|
|
.card{
|
|
// position:absolute;
|
|
// top:0; bottom:0;
|
|
// left:0; right:0;
|
|
width: 100%;
|
|
height: 100%;
|
|
.field--name-field-short-description{
|
|
font-size: 0.656em;
|
|
line-height: 1.2;
|
|
}
|
|
}
|
|
}
|
|
}
|
|
}
|
|
}
|
|
&.home-showrooms{
|
|
background-color: $color-showrooms;
|
|
@extend %part-columned-layout;
|
|
.field--name-field-showrooms{}
|
|
.field--name-field-showroom-links{
|
|
.field__item{
|
|
display: inline-block;
|
|
a{
|
|
@include btn;
|
|
background-color: #fff;
|
|
color: $color-showrooms;
|
|
}
|
|
}
|
|
}
|
|
.field--name-computed-showrooms-reference{
|
|
overflow: hidden;
|
|
position:relative;
|
|
// height:550px;
|
|
display: grid;
|
|
grid-template-rows: 1fr;
|
|
$bp: ($column_width + $column_goutiere )*7;
|
|
|
|
@media only screen and (max-width: $bp){
|
|
grid-template-columns: 1fr;
|
|
>.field__item{
|
|
grid-column: 1;
|
|
}
|
|
}
|
|
@media only screen and (min-width: $bp + 1px){
|
|
grid-template-columns: 1fr 1fr;
|
|
grid-gap: 1em;
|
|
>.field__item:nth-child(odd){
|
|
grid-column: 1;
|
|
}
|
|
>.field__item:nth-child(even){
|
|
grid-column: 2;
|
|
}
|
|
}
|
|
|
|
>.field__item{
|
|
grid-row: 1;
|
|
// position: absolute;
|
|
// top:0; left:0;
|
|
// width:100%; height:100%;
|
|
// overflow: hidden;
|
|
opacity: 0;
|
|
// transform: translateX(100%);
|
|
transition: all 2s ease-out;
|
|
&.active{
|
|
opacity: 1;
|
|
// transform: translateX(0);
|
|
// transition: all 0.3s ease-in-out;
|
|
}
|
|
|
|
.taxonomy-term{
|
|
position: relative;
|
|
width:100%; height:100%;
|
|
div.visuel{
|
|
width:100%;
|
|
padding-bottom: 5em;
|
|
img{
|
|
max-width: 100%;
|
|
height: auto;
|
|
}
|
|
}
|
|
section.text{
|
|
position: absolute;
|
|
bottom:0; left:0;
|
|
width:100%;
|
|
box-sizing:border-box;
|
|
padding:1em 0 0;
|
|
background-color:$color-showrooms;
|
|
color: #fff;
|
|
// >*{
|
|
// // display: inline-block;
|
|
// font-size: 0.9em;
|
|
// }
|
|
h2,p{
|
|
margin:0;
|
|
}
|
|
h2{
|
|
font-size: 2em;
|
|
}
|
|
.field--name-field-public-address{
|
|
br{
|
|
display:none;
|
|
}
|
|
span:not(:nth-last-of-type(1)) {
|
|
margin-right: 0.4em;
|
|
&:after{
|
|
padding-left: 0.5em;
|
|
content:"⋅"
|
|
}
|
|
}
|
|
}
|
|
.field--name-field-public-phone {
|
|
display: inline-block;
|
|
margin-right: 0.4em;
|
|
&:after{
|
|
padding-left: 0.5em;
|
|
content:"⋅"
|
|
}
|
|
}
|
|
.field--name-field-public-email {
|
|
display: inline-block;
|
|
}
|
|
}
|
|
}
|
|
}
|
|
}
|
|
}
|
|
&.home-blabla{
|
|
background-color: $color-blabla;
|
|
@extend %part-columned-layout;
|
|
|
|
.field--name-field-blabla-links{
|
|
.field__item{
|
|
display: inline-block;
|
|
a{
|
|
@include btn;
|
|
background-color: #fff;
|
|
color: $color-blabla;
|
|
}
|
|
}
|
|
}
|
|
.cards-list-home{
|
|
position: relative;
|
|
$bp: ($column_width*2 + $column_goutiere );
|
|
overflow-y: hidden;
|
|
max-height: 315px;
|
|
|
|
// @media only screen and (max-width: $bp * 6){
|
|
// max-height: 630px;
|
|
// }
|
|
// @media only screen and (min-width: ($bp * 6) + 1px){
|
|
// max-height: 310px;
|
|
// }
|
|
|
|
ul{
|
|
width:100%;
|
|
margin:0; padding:0;
|
|
// display: grid;
|
|
// grid-template-columns: repeat(auto-fill, minmax(80px, $column_width*2));
|
|
// // grid-template-rows: 1fr;
|
|
// grid-gap: 1em;
|
|
// justify-content:start;
|
|
display: flex;
|
|
flex-flow: row wrap;
|
|
justify-content: space-between;
|
|
li{
|
|
padding:0 0 $column_goutiere 0;
|
|
box-sizing: border-box;
|
|
// padding-top: 140%;
|
|
width: $column_width;
|
|
// height: $card_height / 2;
|
|
position: relative;
|
|
list-style: none;
|
|
margin:0;
|
|
// padding-top: 67.8%;
|
|
overflow: hidden;
|
|
.card{
|
|
// position:absolute;
|
|
// top:0; bottom:0;
|
|
// left:0; right:0;
|
|
width: 100%;
|
|
height: auto;
|
|
.field--name-title{
|
|
font-size: 0.756em;
|
|
line-height: 0.9;
|
|
}
|
|
}
|
|
}
|
|
}
|
|
|
|
@include col-mediaquery-max(3){
|
|
max-height: 386px;
|
|
ul{
|
|
justify-content: space-around;
|
|
li{
|
|
flex: 0 3 45%;
|
|
}
|
|
}
|
|
}
|
|
}
|
|
}
|
|
&.home-pricing{
|
|
@extend %part-centered-layout;
|
|
>h3{
|
|
@extend %front-col-field__label;
|
|
text-align: center;
|
|
text-transform: capitalize;
|
|
padding: 0.7em 0 0.3em 0;
|
|
|
|
@include col-mediaquery-max(3){
|
|
text-align: left;
|
|
padding: 0 0.4em;
|
|
}
|
|
}
|
|
.field--name-field-pricing-pitch{
|
|
text-align: center;
|
|
p{ margin:0;}
|
|
@include col-mediaquery-max(3){
|
|
text-align: left;
|
|
p{ padding: 0.5em 1em; }
|
|
}
|
|
}
|
|
.field--name-field-pricing{
|
|
// padding:2em 0;
|
|
display: flex;
|
|
flex-flow: row nowrap;
|
|
justify-content: center;
|
|
padding-bottom: 1em;
|
|
p{
|
|
flex: 0 0 $column_width * 2;
|
|
padding: 1em;
|
|
margin: 0;
|
|
text-align: center;
|
|
}
|
|
@include col-mediaquery-max(3){
|
|
flex-flow: column;
|
|
justify-content: flex-start;
|
|
p{
|
|
flex: 0 0 auto;
|
|
text-align: left;
|
|
padding: 0 1em 0.5em;
|
|
}
|
|
}
|
|
}
|
|
.field--name-computed-products-reference{
|
|
display: flex;
|
|
flex-flow: row nowrap;
|
|
@include col-mediaquery-max(3){
|
|
flex-flow: column;
|
|
justify-content: flex-start;
|
|
}
|
|
>.field__item{
|
|
flex:0 0 50%;
|
|
text-align: center;
|
|
padding: 2em 0;
|
|
a.btn{
|
|
@include btn;
|
|
background-color: #fff;
|
|
}
|
|
&:nth-child(1){
|
|
background-color: $color-base;
|
|
a.btn{
|
|
color: $color-base;
|
|
}
|
|
}
|
|
&:nth-child(2){
|
|
background-color: $color-webshowroom;
|
|
a.btn{
|
|
color: $color-webshowroom;
|
|
}
|
|
}
|
|
color: #fff;
|
|
position: relative;
|
|
height:18em;
|
|
>article{
|
|
position: absolute;
|
|
top:50%; left:50%;
|
|
transform: translate(-50%, -50%);
|
|
}
|
|
.field--name-title{
|
|
@extend %front-col-field__label;
|
|
font-weight: 600;
|
|
line-height: 0.7;
|
|
padding-bottom: 0.1em;
|
|
text-align: center;
|
|
word-spacing: 30000px;
|
|
}
|
|
.field--name-body{
|
|
@extend %front-col-description;
|
|
padding:0.5em;
|
|
p{
|
|
margin: 0;
|
|
}
|
|
}
|
|
|
|
@include col-mediaquery-max(3){
|
|
flex: 0 0 auto;
|
|
padding:0;
|
|
// height: auto;
|
|
>article{
|
|
|
|
}
|
|
}
|
|
}
|
|
}
|
|
}
|
|
}
|
|
}
|
|
}
|
|
|
|
|
|
// ___ _
|
|
// / __|__ _ _ _ __| |___
|
|
// | (__/ _` | '_/ _` (_-<
|
|
// \___\__,_|_| \__,_/__/
|
|
|
|
.infinite-loading-container{
|
|
.infinite-status-prompt{
|
|
i[class^="loading-"]{
|
|
width:15px; height:15px;
|
|
}
|
|
}
|
|
}
|
|
|
|
.cards-list{
|
|
position: relative;
|
|
.search-info{
|
|
font-size: 0.756em;
|
|
font-weight: 500;
|
|
margin: 0;
|
|
padding: 0 0 0.5em 0;
|
|
}
|
|
|
|
&>ul{
|
|
// outline: 1px green solid;
|
|
margin:0; padding:0;
|
|
width: calc(100% + #{$column_goutiere});
|
|
|
|
&>li{
|
|
list-style: none;
|
|
margin:0 $column_goutiere $column_goutiere 0; padding:0;
|
|
display: inline-block;
|
|
vertical-align: top;
|
|
}
|
|
}
|
|
@include col-mediaquery-max(3){
|
|
&>ul{
|
|
display: flex;
|
|
flex-flow: row wrap;
|
|
justify-content: space-around;
|
|
width:100%;
|
|
>li{
|
|
flex: 0 1 48%;
|
|
margin:0 0 0.5em 0;
|
|
filter: drop-shadow(0 0 3px #aaa);
|
|
>article{
|
|
width:100%;
|
|
height:auto;
|
|
box-shadow: none;
|
|
>section.images{
|
|
#base &{
|
|
height: auto;
|
|
}
|
|
>figure{
|
|
position: relative;
|
|
&:not(:first-child){
|
|
display:none;
|
|
}
|
|
img:not(.blank){
|
|
width:100%;
|
|
height:auto;
|
|
}
|
|
img.blank{
|
|
top:0; bottom:0; left:0; right:0;
|
|
}
|
|
}
|
|
}
|
|
}
|
|
}
|
|
}
|
|
}
|
|
}
|
|
|
|
article.card{
|
|
position: relative;
|
|
box-shadow: 0 0 5px rgba(0,0,0,0.2);
|
|
width:$column_width; height:$card_height;
|
|
&.article{
|
|
width:$column_width*2 + $column_goutiere; height:$card_height;
|
|
section.images{
|
|
a{
|
|
display:block;
|
|
}
|
|
}
|
|
}
|
|
|
|
&.minicard{
|
|
height:100px;
|
|
width:$minicard_width;
|
|
height:$minicard_height;
|
|
margin:auto;
|
|
>header{
|
|
padding: 0.3em 0.3em 0.1em;
|
|
cursor: pointer;
|
|
h1{
|
|
margin:0;
|
|
font-size: 1em;
|
|
}
|
|
h4{
|
|
margin:0;
|
|
line-height: 1.1;
|
|
margin-bottom: -0.4em;
|
|
}
|
|
span.ref{
|
|
line-height: 0.5;
|
|
}
|
|
}
|
|
>nav.tools{
|
|
// top: auto;
|
|
// bottom: 0;
|
|
padding:0 0.2em;
|
|
background:rgba(255,255,255, 0.8);
|
|
.mdi.unflag{
|
|
cursor: pointer;
|
|
}
|
|
.tool.samples{
|
|
@include hover{
|
|
.tool-content{
|
|
max-width:140px;
|
|
}
|
|
}
|
|
}
|
|
}
|
|
}
|
|
&.linkedmaterialcard{
|
|
width:$linkedmaterialcard_width;
|
|
height:$linkedmaterialcard_height;
|
|
>header{
|
|
padding: 0.3em 0.3em 0.1em;
|
|
cursor: pointer;
|
|
h1{
|
|
margin:0;
|
|
font-size: 1em;
|
|
}
|
|
h4{
|
|
margin:0;
|
|
line-height: 1.1;
|
|
margin-bottom: -0.4em;
|
|
}
|
|
span.ref{
|
|
line-height: 0.5;
|
|
}
|
|
}
|
|
>nav.tools{
|
|
top: auto;
|
|
bottom: 0;
|
|
padding:0 0.2em;
|
|
background:transparent;
|
|
.mdi.unflag{
|
|
cursor: pointer;
|
|
}
|
|
}
|
|
}
|
|
// &.card-small{
|
|
// width:100px; height:140px;
|
|
// }
|
|
// focused
|
|
// box-shadow: 0 0 7px rgba(0,0,0,0.9);
|
|
// &.article{
|
|
// width: $column_width * 2 + $column_goutiere;
|
|
//
|
|
// }
|
|
header{
|
|
position: absolute;
|
|
bottom:0;
|
|
z-index:10;
|
|
color: #000;
|
|
background-color: rgba(255,255,255,0.8);
|
|
padding: 0.3em 0.3em;
|
|
box-sizing:border-box;
|
|
width:100%;
|
|
h1, h4{ margin:0; padding:0; }
|
|
h1{
|
|
font-size: 1.3em;
|
|
font-weight: 700;
|
|
line-height: 0.85;
|
|
margin-bottom: 0.2em;
|
|
}
|
|
h4{
|
|
font-size: 0.882em;
|
|
font-weight: 300;
|
|
line-height: 1.1;
|
|
margin-bottom: -0.2em;
|
|
}
|
|
span.ref{
|
|
font-size: 0.693em;
|
|
font-weight: 300;
|
|
line-height: 1;
|
|
}
|
|
}
|
|
&.card-thematique header{
|
|
background-color: $color-base-transparent;
|
|
}
|
|
$navtool_width: 15px;
|
|
nav.tools{
|
|
position: absolute;
|
|
top: 0;
|
|
right: 0;
|
|
z-index: 21;
|
|
width: $navtool_width;
|
|
background-color: #fff;
|
|
box-sizing: content-box;
|
|
padding: 0.3em 0.1em;
|
|
>*{
|
|
overflow: visible;
|
|
position: relative;
|
|
span.btn{
|
|
overflow: hidden;
|
|
font-size: 0.882em;
|
|
}
|
|
.tool-content{
|
|
position: absolute;
|
|
top: 0px;
|
|
right: 100%;
|
|
// width: 5em;
|
|
width: $column_width - $navtool_width - 10px;
|
|
box-sizing: border-box;
|
|
padding: 0;
|
|
background-color: #fff;
|
|
box-shadow: -2px 3px 8px rgba(0, 0, 0, 0.5);
|
|
opacity: 0;
|
|
max-height: 0; max-width:0;
|
|
overflow: hidden;
|
|
transition: all 0.2s ease-in-out;
|
|
transition-delay: 0.1s;
|
|
}
|
|
@include hover{
|
|
.tool-content{
|
|
transition: all 0.3s ease-in-out;
|
|
opacity: 1;
|
|
padding: 0.3em;
|
|
max-height: 195px;
|
|
max-width:200px;
|
|
}
|
|
|
|
}
|
|
}
|
|
|
|
@include col-mediaquery-max(3){
|
|
width:23px;
|
|
>*{
|
|
>span.btn, >a{
|
|
font-size:1.2em;
|
|
}
|
|
}
|
|
}
|
|
|
|
.tool.flags{
|
|
.tool-content{
|
|
ul{
|
|
display: flex;
|
|
flex-flow: row wrap;
|
|
li{
|
|
padding:0 0.5em 0 0;
|
|
}
|
|
}
|
|
}
|
|
span.flag{
|
|
cursor: pointer;
|
|
font-size: 0.756em;
|
|
color: #bbb;
|
|
transition: color 0.3s ease-in-out;
|
|
@include hover{
|
|
color:#1a1a1a;
|
|
}
|
|
&.isActive{
|
|
color:#1a1a1a;
|
|
}
|
|
}
|
|
li.create-flag{
|
|
margin-top: 0.2em;
|
|
padding:0;
|
|
input{
|
|
align-self: flex-end;
|
|
border: 1px solid #bbb;
|
|
border-radius:5px;
|
|
width: calc(100% - 2em);
|
|
font-size:0.8em;
|
|
}
|
|
span.add-btn{
|
|
align-self: flex-end;
|
|
color: #bbb;
|
|
font-size: 1em;
|
|
// padding: 0 0 0 .5em;
|
|
transition: all 0.2s ease-in-out;
|
|
&.active{
|
|
cursor: pointer;
|
|
color:#1a1a1a;
|
|
}
|
|
&.loading:before{
|
|
animation: rotating 2s linear infinite;
|
|
}
|
|
}
|
|
}
|
|
}
|
|
.tool.samples{
|
|
.tool-content{
|
|
font-size: 0.756em;
|
|
ul li{
|
|
font-weight: bold;
|
|
span.showroom{
|
|
font-weight: 400;
|
|
}
|
|
}
|
|
}
|
|
}
|
|
opacity: 0;
|
|
transition: opacity 0.2s ease-in-out;
|
|
}
|
|
|
|
@include hover{
|
|
nav.tools{
|
|
opacity:1;
|
|
}
|
|
}
|
|
section.images{
|
|
position: relative;
|
|
&, *{width: 100%; height:100%;}
|
|
figure{
|
|
cursor: pointer;
|
|
margin:0;
|
|
position: absolute;
|
|
top:0; left:0;
|
|
// width: 100%; height:100%;
|
|
&:first-of-type{
|
|
z-index:5
|
|
}
|
|
transition: opacity 0.2s ease-in-out;
|
|
&.show{opacity: 1; z-index:6;}
|
|
&.hide{opacity: 0;}
|
|
|
|
img{
|
|
// width: 100%; height:100%;
|
|
&.blank{
|
|
position: absolute;
|
|
top:0; left:0;
|
|
z-index: 20;
|
|
}
|
|
}
|
|
}
|
|
}
|
|
// overwritnig card for card-medium (aka search-card)
|
|
&.search-card{
|
|
>header{
|
|
cursor: pointer;
|
|
}
|
|
}
|
|
// overwriting card for modal-card
|
|
&.modal-card{
|
|
display: flex;
|
|
flex-flow: row-reverse nowrap;
|
|
width: $modalcard_width;
|
|
height: $modalcard_height;
|
|
>.col{
|
|
flex-basis: 50%;
|
|
}
|
|
@include col-mediaquery-max(3){
|
|
flex-flow: column;
|
|
width: 100%;
|
|
height: 100%;
|
|
overflow-y: auto;
|
|
>.col-right{
|
|
flex:0 0 auto;
|
|
}
|
|
>.col-left{
|
|
flex:0 0 100%;
|
|
}
|
|
}
|
|
section.col-right{
|
|
>*:not(nav.tools){
|
|
position: relative;
|
|
padding: 0.3em $navtool_width + 5px 0 0.5em;
|
|
box-sizing: border-box;
|
|
width: 100%;
|
|
}
|
|
>header{
|
|
bottom: auto;
|
|
}
|
|
span.label{
|
|
font-size: 0.693em;
|
|
font-weight: 500;
|
|
}
|
|
|
|
section.body{
|
|
p{
|
|
font-size: 0.693em;
|
|
font-weight: 300;
|
|
line-height: 1.35;
|
|
margin:0 0 0.3em;
|
|
}
|
|
|
|
}
|
|
.vsa-list{
|
|
padding:0;
|
|
border: none;
|
|
--vsa-heading-padding: 0 0;
|
|
--vsa-content-padding: 0 0 0.5em;
|
|
--vsa-default-icon-size: 0.3;
|
|
--vsa-border-width: 0;
|
|
--vsa-text-color: #{$color-main-text};
|
|
--vsa-highlight-color: #fff;
|
|
--vsa-bg-color: #fff;
|
|
|
|
.vsa-item__trigger:focus .vsa-item__trigger__icon--is-default::after, .vsa-item__trigger:focus .vsa-item__trigger__icon--is-default::before, .vsa-item__trigger:hover .vsa-item__trigger__icon--is-default::after, .vsa-item__trigger:hover .vsa-item__trigger__icon--is-default::before {
|
|
background-color: var(--vsa-text-color);
|
|
}
|
|
.vsa-item{
|
|
.vsa-item__heading{
|
|
button.vsa-item__trigger{
|
|
height:2em;
|
|
&:hover,
|
|
&:focus{
|
|
color: var(--vsa-text-color);
|
|
}
|
|
}
|
|
}
|
|
.vsa-item__content{}
|
|
|
|
&[data-vsa-active="false"]{
|
|
.vsa-item__heading{
|
|
padding-bottom: 0.2em;
|
|
margin-bottom: 0.2em;
|
|
border-bottom: 0.5px dotted $color-main-text;
|
|
}
|
|
|
|
}
|
|
|
|
}
|
|
}
|
|
section.linked-materials{
|
|
>ul{
|
|
display: flex;
|
|
flex-flow: row wrap;
|
|
justify-content: space-between;
|
|
>li{
|
|
flex-basis: 0 0 50%;
|
|
margin-bottom: 0.5em;
|
|
article.linkedmaterialcard{
|
|
}
|
|
}
|
|
}
|
|
}
|
|
|
|
nav.tools{
|
|
opacity: 1;
|
|
section.close{
|
|
span.btn.mdi-close{
|
|
cursor:pointer;
|
|
}
|
|
}
|
|
div.tool-content{
|
|
min-width: $column_width *2 - $navtool_width - 10px;
|
|
@include col-mediaquery-max(3){
|
|
min-width: 80vw;
|
|
}
|
|
}
|
|
|
|
}
|
|
section.tool.samples{
|
|
div.tool-content{
|
|
ul{
|
|
// display: flex;
|
|
// flex-flow: row wrap;
|
|
font-size: 0.756em;
|
|
font-weight: 300;
|
|
// line-height: 1.35;
|
|
li{
|
|
padding-right: 0.5em;
|
|
span.showroom{ font-weight: 500; }
|
|
}
|
|
}
|
|
}
|
|
}
|
|
section.tool.note{
|
|
@include hover{
|
|
div.tool-content{
|
|
max-height: 370px;
|
|
}
|
|
}
|
|
div.tool-content{
|
|
textarea,
|
|
textarea:focus,
|
|
textarea:focus-visible,
|
|
textarea:active{
|
|
resize:none;
|
|
width:99%;
|
|
height:350px;
|
|
margin:0;
|
|
padding:0.3em;
|
|
border:1px solid #ccc;
|
|
border-radius: 3px;
|
|
outline: none;
|
|
box-sizing: border-box;
|
|
|
|
}
|
|
}
|
|
}
|
|
// section.tool.industriels{
|
|
// div.tool-content{
|
|
// display: flex;
|
|
// flex-flow: row;
|
|
// >section{
|
|
// flex: 0 0 50%;
|
|
// h2{
|
|
// margin:0;
|
|
// font-size: 1em;
|
|
// line-height: 0.6;
|
|
// }
|
|
// p{
|
|
// margin: 0;
|
|
// font-size: 0.882em;
|
|
// }
|
|
// }
|
|
// }
|
|
// }
|
|
section.industriels{
|
|
display: flex;
|
|
flex-flow: row;
|
|
>section{
|
|
flex: 0 0 50%;
|
|
ul{
|
|
li{
|
|
padding:0.1em 0 .4em 0;
|
|
}
|
|
}
|
|
h2{
|
|
margin:0;
|
|
font-size: 1em;
|
|
line-height: 1;
|
|
}
|
|
p{
|
|
margin: 0;
|
|
font-size: 0.756em;
|
|
}
|
|
}
|
|
}
|
|
section.attachments{
|
|
a{
|
|
margin:0;
|
|
font-size: 0.882em;
|
|
line-height: 0.6;
|
|
span{
|
|
font-size: 0.8em
|
|
}
|
|
}
|
|
p{
|
|
margin: 0;
|
|
font-size: 0.882em;
|
|
}
|
|
}
|
|
}
|
|
}
|
|
}
|
|
|
|
// vuejs-modale hack as maxWidth and maxHeight does not work :(
|
|
@include col-mediaquery-min(3){
|
|
.vm--modale-card{
|
|
max-width: 850px;
|
|
max-height: 610px;
|
|
left: 50% !important;
|
|
top: 50% !important;
|
|
transform: translate(-50%, -50%) !important;
|
|
}
|
|
}
|
|
.vm--overlay{
|
|
background: rgba(0, 0, 0, 0.5)!important;
|
|
}
|
|
|
|
// _____ _ _ _
|
|
// |_ _| |_ ___ _ __ __ _| |_(_)__ _ _ _ ___
|
|
// | | | ' \/ -_) ' \/ _` | _| / _` | || / -_)
|
|
// |_| |_||_\___|_|_|_\__,_|\__|_\__, |\_,_\___|
|
|
// |_|
|
|
#main-content > article.thematique{
|
|
div.cols{
|
|
display: flex;
|
|
flex-direction: row;
|
|
flex-wrap: nowrap;
|
|
// @media only screen and (max-width: $small-bp) {
|
|
@include col-mediaquery-max(3){
|
|
flex-wrap: wrap;
|
|
}
|
|
// }
|
|
div.col-left{
|
|
padding: 0 $column_goutiere $column_goutiere 0;
|
|
flex: 0 0 $column_width * 2 + $column_goutiere;
|
|
}
|
|
div.col-right{}
|
|
}
|
|
div.col-left{
|
|
section.body{
|
|
background-color: $color-base;
|
|
padding: 0.5em 1em 1em;
|
|
}
|
|
section.visuel{
|
|
img{
|
|
width: 100%;
|
|
}
|
|
}
|
|
}
|
|
aside.linked-materials{
|
|
div.card-list{
|
|
>ul{
|
|
width:calc(100% + #{$column_goutiere});
|
|
>li{
|
|
display: inline-block;
|
|
vertical-align: top;
|
|
width:$column_width;
|
|
margin:0 $column_goutiere $column_goutiere 0;
|
|
}
|
|
}
|
|
|
|
}
|
|
h3.field__label{
|
|
font-size: 1em;
|
|
font-weight: 500;
|
|
margin: 2em 0 1em 0;
|
|
}
|
|
h1.title{
|
|
font-size: 1em;
|
|
font-weight: 400;
|
|
}
|
|
h3.ref{
|
|
font-size: 0.756em;
|
|
font-weight: 600;
|
|
}
|
|
h2.description{
|
|
font-size: 0.756em;
|
|
font-weight: 400;
|
|
}
|
|
}
|
|
|
|
}
|
|
|
|
// ___ _ _ _
|
|
// | _ ) |__ _| |__| |__ _
|
|
// | _ \ / _` | '_ \ / _` |
|
|
// |___/_\__,_|_.__/_\__,_|
|
|
#blabla{
|
|
|
|
}
|
|
|
|
#main-content > article.article{
|
|
// grid only on big screens
|
|
@include col-mediaquery-min(3){
|
|
div.cols{
|
|
display: grid;
|
|
grid-template-rows: 1fr;
|
|
grid-template-columns: repeat(6, 1fr);
|
|
grid-gap: 1em;
|
|
div.col-left{
|
|
grid-column: 1;
|
|
}
|
|
div.col-right{
|
|
grid-column: 2/6;
|
|
}
|
|
}
|
|
}
|
|
|
|
@include col-mediaquery-max(3){
|
|
div.cols{
|
|
padding:1em;
|
|
box-sizing: border-box;
|
|
.accroche{
|
|
figure{
|
|
width:100%;
|
|
}
|
|
}
|
|
}
|
|
}
|
|
|
|
section.accroche{
|
|
figure{
|
|
width:$column_width*2 + $column_goutiere;
|
|
margin:0 $column_goutiere 0 0;
|
|
img{
|
|
width:100%;
|
|
}
|
|
}
|
|
}
|
|
section.taxonomy{
|
|
margin:1em 0;
|
|
ul{
|
|
margin: 0;
|
|
}
|
|
li{
|
|
display:inline-block;
|
|
padding:0 0.5em 0 0;
|
|
}
|
|
}
|
|
div.gallery-wrapper{
|
|
.image{
|
|
display: inline-block;
|
|
width:$column_width;
|
|
margin:0 $column_goutiere $column_goutiere*0.6 0;
|
|
height:$card_height / 2;
|
|
background-size: cover;
|
|
}
|
|
@include col-mediaquery-max(3){
|
|
display: flex;
|
|
flex-flow: row wrap;
|
|
justify-content: space-between;
|
|
.image{
|
|
// width: auto; height: auto;
|
|
display: block;
|
|
flex: 0 1 48%;
|
|
margin: 0 0 $column_goutiere*0.6 0;
|
|
}
|
|
}
|
|
}
|
|
// section.videos{
|
|
// ul{
|
|
// margin:0; padding:0;
|
|
// li{
|
|
// margin:0; padding:0;
|
|
// display: inline-block;
|
|
// width:100%; overflow: hidden;
|
|
// }
|
|
// }
|
|
// }
|
|
// section.visuels{
|
|
// width:calc(100% + #{$column_goutiere});
|
|
// figure{
|
|
// position: relative;
|
|
// display: inline-block;
|
|
// vertical-align: top;
|
|
// width:$column_width*2 + $column_goutiere;
|
|
// margin:0 $column_goutiere $column_goutiere*0.6 0;
|
|
// img{
|
|
// width:100%;
|
|
// }
|
|
// caption{
|
|
// position: absolute; bottom: 0; left:0;
|
|
// box-sizing: border-box; width: 100%; padding:0.5em;
|
|
// background-color: $transparent-bg-blk; color: #fff;
|
|
// }
|
|
// }
|
|
// }
|
|
aside.linked-materials{
|
|
|
|
@include col-mediaquery-min(3){
|
|
ul{
|
|
width:calc(100% + #{$column_goutiere});
|
|
li{
|
|
display: inline-block;
|
|
vertical-align: top;
|
|
width:$column_width;
|
|
margin:0 $column_goutiere $column_goutiere 0;
|
|
}
|
|
}
|
|
}
|
|
h3.field__label{
|
|
font-size: 1em;
|
|
font-weight: 500;
|
|
margin: 2em 0 1em 0;
|
|
}
|
|
h1.title{
|
|
font-size: 1em;
|
|
font-weight: 400;
|
|
}
|
|
h3.ref{
|
|
font-size: 0.756em;
|
|
font-weight: 600;
|
|
}
|
|
h2.description{
|
|
font-size: 0.756em;
|
|
font-weight: 400;
|
|
}
|
|
}
|
|
nav.prevnext{
|
|
|
|
@include col-mediaquery-max(3){
|
|
padding: 0 1em;
|
|
}
|
|
&.bottom{
|
|
margin:2em 0;
|
|
}
|
|
ul{
|
|
padding:0;
|
|
margin:0;
|
|
display: grid;
|
|
grid-template-columns: 1fr 1fr;
|
|
}
|
|
li{
|
|
padding:0;
|
|
margin:0;
|
|
list-style: none;
|
|
a{
|
|
font-size: 0.756em;
|
|
font-weight: 700;
|
|
line-height: 1.3;
|
|
display: block;
|
|
position: relative;
|
|
padding: 0 1em;
|
|
}
|
|
&:nth-child(1){
|
|
grid-column: 1;
|
|
a:before{
|
|
content:'\021A4';
|
|
position: absolute;
|
|
left:0;
|
|
}
|
|
}
|
|
&:nth-child(2){
|
|
grid-column: 2;
|
|
text-align: right;
|
|
a:after{
|
|
content:'\021A6';
|
|
position: absolute;
|
|
right: 0;
|
|
}
|
|
}
|
|
}
|
|
}
|
|
}
|
|
|
|
// ___ _
|
|
// / __| |_ _____ __ ___ _ ___ ___ _ __ ___
|
|
// \__ \ ' \/ _ \ V V / '_/ _ \/ _ \ ' \(_-<
|
|
// |___/_||_\___/\_/\_/|_| \___/\___/_|_|_/__/
|
|
#showrooms{
|
|
width: calc(100% + #{$column_goutiere});
|
|
article.showroom{
|
|
width: $column_width * 2 + $column_goutiere;
|
|
display: inline-block;
|
|
vertical-align: top;
|
|
margin: 0 $column_goutiere $column_goutiere 0;
|
|
|
|
h1{
|
|
margin:0;
|
|
font-weight: 4;
|
|
}
|
|
p{ margin:0; }
|
|
figure{
|
|
margin:0;
|
|
img{
|
|
max-width: 100%;
|
|
}
|
|
}
|
|
}
|
|
|
|
}
|
|
|
|
// ___ _ _
|
|
// | _ \_ _(_)__(_)_ _ __ _
|
|
// | _/ '_| / _| | ' \/ _` |
|
|
// |_| |_| |_\__|_|_||_\__, |
|
|
// |___/
|
|
#main-content>#pricing,
|
|
#main-content .view-pricing-products .view-content{
|
|
display: flex;
|
|
flex-flow: row nowrap;
|
|
|
|
article.product,
|
|
.views-row{
|
|
flex:0 0 50%;
|
|
text-align: center;
|
|
padding: 2em 0;
|
|
>header{
|
|
padding-bottom: 1.3em;
|
|
}
|
|
>header h1,
|
|
.views-field-title{
|
|
font-size: 4em;
|
|
line-height: 0.6;
|
|
color: #fff;
|
|
text-align: center;
|
|
word-spacing: 30000px;
|
|
}
|
|
section.content, .views-field-body{
|
|
color: #fff;
|
|
.description{
|
|
font-size: 1.134em;
|
|
p{
|
|
margin: 0.3em;
|
|
}
|
|
}
|
|
}
|
|
aside{
|
|
padding:1em 0;
|
|
.variation{
|
|
display: flex;
|
|
flex-flow: row nowrap;
|
|
justify-content: center;
|
|
align-items:flex-end;
|
|
div.variation-description{
|
|
flex: 0 0 6.7em;
|
|
font-size: 2.012em;
|
|
font-weight: 800;
|
|
color: #fff;
|
|
p{
|
|
margin:0;
|
|
text-align: left;
|
|
}
|
|
}
|
|
button{
|
|
@include btn;
|
|
background-color: #fff;
|
|
}
|
|
}
|
|
}
|
|
&:nth-child(1){
|
|
background-color: $color-base;
|
|
aside .variation button{
|
|
color: $color-base;
|
|
}
|
|
}
|
|
&:nth-child(2){
|
|
background-color: $color-webshowroom;
|
|
aside .variation button{
|
|
color: $color-webshowroom;
|
|
}
|
|
}
|
|
}
|
|
@include col-mediaquery-max(3){
|
|
flex-flow: column;
|
|
article.product,
|
|
.views-row{
|
|
flex:0 1 auto;
|
|
}
|
|
}
|
|
}
|
|
|
|
.modal{
|
|
position: relative;
|
|
}
|
|
#pricing-modal-login-register{
|
|
position: relative;
|
|
width: 100%;
|
|
text-align: left;
|
|
h2{
|
|
margin: 0.4em 0 1.1em;
|
|
padding-right: 4em;
|
|
font-size: 1.2em;
|
|
font-weight: 300;
|
|
}
|
|
#login-register{
|
|
width: 100%;
|
|
display: flex;
|
|
flex-flow: row nowrap;
|
|
>section{
|
|
flex:0 0 250px;
|
|
form{
|
|
.form-item, .form-actions {
|
|
margin: 0.5em 0;
|
|
max-width: none;
|
|
}
|
|
.form-type-email,
|
|
.form-type-password,
|
|
.form-actions{
|
|
display:block;
|
|
}
|
|
input[type="email"],
|
|
input[type="password"]{
|
|
max-width: 11em;
|
|
}
|
|
&#user-login-form #edit-pass--description,
|
|
#edit-pass-pass1--description{
|
|
display: block;
|
|
max-width: 16em;
|
|
font-size: 0.693em;
|
|
}
|
|
|
|
span.login-message,
|
|
span.register-message{
|
|
color: red;
|
|
font-size: 0.693em;
|
|
line-height: 1.2;
|
|
display: block;
|
|
padding: 0.8em 0 0 0;
|
|
}
|
|
span.login-message[v-if="loginMessage"],
|
|
span.register-message[v-if="registerMessage"]{
|
|
display: none;
|
|
}
|
|
}
|
|
}
|
|
section.login{
|
|
form{
|
|
>div{
|
|
// display: block;
|
|
}
|
|
}
|
|
}
|
|
section.register{
|
|
|
|
}
|
|
}
|
|
}
|
|
|
|
#main-content form.commerce-checkout-flow{
|
|
$w:3;
|
|
max-width: $column_width * $w + $column_goutiere * ($w - 1);
|
|
.layout-checkout-form{
|
|
display: flex;
|
|
flex-flow: column;
|
|
.layout-region-checkout-main{
|
|
// disable default style
|
|
width:100%;
|
|
float: none;
|
|
// apply custom style
|
|
order:2;
|
|
background-color: $color-webshowroom;
|
|
padding: 1em;
|
|
label,
|
|
legend,
|
|
fieldset#edit-review-contact-information,
|
|
fieldset#edit-review-payment-information{
|
|
color: #fff;
|
|
}
|
|
fieldset{
|
|
border:none;
|
|
margin:0; padding:0;
|
|
legend{
|
|
font-size: 1.5em;
|
|
font-weight: 600;
|
|
margin-bottom: 0.5em;
|
|
}
|
|
}
|
|
$lw:10em;
|
|
.form-item{
|
|
margin:0 0 0.5em 0;
|
|
}
|
|
label{
|
|
display: inline-block;
|
|
font-weight: bold;
|
|
min-width: $lw;
|
|
}
|
|
input[type="text"]{
|
|
width:20em;
|
|
}
|
|
.stripe-form{
|
|
display: inline-block;
|
|
background-color: #fff;
|
|
color: #1A1A1A;
|
|
border-radius: 5px;
|
|
padding: 1em;
|
|
margin: 0 0 1em;
|
|
.form-item{
|
|
display: flex;
|
|
align-items: center;
|
|
flex-flow: row nowrap;
|
|
label{
|
|
color: #777;
|
|
}
|
|
.form-text{
|
|
background-color: #fff;
|
|
border-radius: 3px;
|
|
}
|
|
}
|
|
}
|
|
// .form-item-payment-information-billing-information-address-0-address-address-line2
|
|
.form-item-payment-information-add-payment-method-billing-information-address-0-address-address-line2{
|
|
padding-left:$lw + 0.25em;
|
|
}
|
|
// .form-item-payment-information-billing-information-copy-to-address-book
|
|
.form-item-payment-information-add-payment-method-billing-information-copy-to-address-book{
|
|
display: none;
|
|
}
|
|
}
|
|
.layout-region-checkout-secondary{
|
|
// disable default style
|
|
width:100%;
|
|
float: none;
|
|
// apply custom style
|
|
order: 1;
|
|
// display: flex;
|
|
// flex-flow: row nowrap;
|
|
// >.checkout-pane{
|
|
// flex: 0 0 50%;
|
|
// }
|
|
>h3{display:none;}
|
|
#edit-order-summary{
|
|
background-color: $color-base;
|
|
color:#fff;
|
|
padding:1em;
|
|
.view-commerce-checkout-order-summary{
|
|
display: flex;
|
|
flex-flow: row nowrap;
|
|
justify-content: space-between;
|
|
align-items: flex-end;
|
|
}
|
|
.field--name-product-id{
|
|
.field--name-title{
|
|
font-size: 2.5em;
|
|
font-weight: 800;
|
|
}
|
|
.field--name-body{
|
|
|
|
}
|
|
}
|
|
.field--name-title{
|
|
font-size: 1.5em;
|
|
font-weight: 600;
|
|
}
|
|
p{
|
|
margin:0;
|
|
}
|
|
}
|
|
#edit-coupon-redemption{
|
|
background-color: $color-showrooms;
|
|
padding:1em;
|
|
>.form-wrapper{
|
|
display: flex;
|
|
flex-flow: row;
|
|
align-items: center;
|
|
.form-item{
|
|
margin:0 0.5em 0 0;
|
|
label{
|
|
color: #fff;
|
|
font-size: 1.5em;
|
|
font-weight: 600;
|
|
margin-right: 0.5em;
|
|
}
|
|
input[type="text"]{
|
|
width: 7em;
|
|
}
|
|
}
|
|
input[type="submit"]{
|
|
background-color: #fff;
|
|
color: $color-showrooms;
|
|
border: none;
|
|
margin:0;
|
|
padding:0.1em 0.7em;
|
|
box-sizing: content-box;
|
|
height:2em;
|
|
font-weight: 800;
|
|
border-radius: 5px;
|
|
}
|
|
}
|
|
}
|
|
}
|
|
.layout-region-checkout-footer{
|
|
// disable default style
|
|
float: none;
|
|
width: 100%;
|
|
padding: 0;
|
|
// apply custom style
|
|
order: 3;
|
|
#edit-actions{
|
|
text-align: right;
|
|
}
|
|
input#edit-actions-next{
|
|
background-color: $color-blabla;
|
|
color: #fff;
|
|
border: none;
|
|
border-radius: 5px;
|
|
padding: 0.2em 0.4em 0.3em;
|
|
font-weight: 600;
|
|
font-size: 1.323em;
|
|
}
|
|
}
|
|
}
|
|
}
|
|
|
|
form#user-pass{
|
|
input.form-email{
|
|
max-width: 95%;
|
|
}
|
|
}
|
|
|
|
// ___ _
|
|
// | __|__ ___| |_ ___ _ _
|
|
// | _/ _ \/ _ \ _/ -_) '_|
|
|
// |_|\___/\___/\__\___|_|
|
|
footer[role="contentinfo"]{
|
|
body:not(.path-home) & {
|
|
display:none;
|
|
}
|
|
#block-materiosimplenewssubscription{
|
|
form{
|
|
display: flex;
|
|
flex-flow: row nowrap;
|
|
align-items: center;
|
|
font-size: 0.756em;
|
|
>*{
|
|
margin-right: 0.5em;
|
|
}
|
|
#edit-subscriptions{
|
|
display: flex;
|
|
flex-flow: row nowrap;
|
|
>*{
|
|
margin-right: 0.5em;
|
|
display: flex;
|
|
flex-flow: row nowrap;
|
|
align-items: center;
|
|
}
|
|
input{
|
|
margin-right: 0.3em;
|
|
}
|
|
}
|
|
#edit-mail-wrapper{
|
|
input[type="email"]{
|
|
width:10em;
|
|
}
|
|
}
|
|
#edit-actions--2{
|
|
input[type="submit"]{
|
|
border: none;
|
|
background: none;
|
|
background-color: $color-base;
|
|
border-radius: 5px;
|
|
color: #fff;
|
|
padding: 0.7em 1em;
|
|
font-weight: 700;
|
|
}
|
|
}
|
|
}
|
|
|
|
|
|
}
|
|
}
|