materio-d9/web/themes/custom/materiotheme/assets/styles/main.scss

2933 lines
62 KiB
SCSS
Raw Normal View History

2021-04-02 16:35:29 +02:00
// @import '~slim-select/scss';
$mdi-font-path: './mdi/fonts/';
@import './mdi/css/materialdesignicons.css';
@import './mdi/scss/variables';
@import './mdi/scss/functions';
@import './base/variables';
@import './base/colors';
@import './base/reset';
@import './base/grid';
@import './base/layout';
2020-11-20 10:39:19 +01:00
@import './base/animations';
@import '../fonts/ubuntu/ubuntu.css';
@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;
}
}
2021-03-30 15:42:40 +02:00
&.tapped{
@content;
}
}
aside.messages{
border:none;
2019-03-25 18:27:56 +01:00
}
2019-03-27 19:03:32 +01:00
// _ _ _
// | || |___ __ _ __| |___ _ _
// | __ / -_) _` / _` / -_) '_|
// |_||_\___\__,_\__,_\___|_|
header[role="banner"]{
padding:0.2em 0 0 0;
2019-07-16 18:36:17 +02:00
%header-fs{
font-size: 0.9em;
// line-height: 1;
font-weight: 400;
}
// @include col-mediaquery-max(3){
// overflow-x: hidden;
// }
2019-03-27 19:03:32 +01:00
#block-sitebranding{
h1{
margin:0;
line-height: 1;
2019-03-27 19:03:32 +01:00
}
2021-03-18 23:13:50 +01:00
.slogan{
2021-03-19 21:38:28 +01:00
font-size: 0.882em;
display: block;
white-space: nowrap;
// @include col-mediaquery-max(2){
// display:none;
// }
2021-03-18 23:13:50 +01:00
}
@include col-mediaquery-max(3){
h1, .slogan{
display: inline-block;
}
}
@include col-mediaquery-max(4, landscape){
.slogan{
display: none;
}
}
2019-03-27 19:03:32 +01:00
}
@include col-mediaquery-max(3){
.header-block.header-right{
.header-block-wrapper{
&, #user-flags ul{
// background-color: #222;
// color: #fff;
background-color: #fff;
}
}
}
}
2021-03-09 15:24:49 +01:00
#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;
// }
2021-03-09 15:24:49 +01:00
}
2019-03-27 19:03:32 +01:00
#block-userlogin{
2019-05-21 15:49:57 +02:00
position: relative;
2019-07-16 18:36:17 +02:00
// width:8em;
padding:0 1em;
overflow: visible;
2019-03-27 19:03:32 +01:00
h2{
2019-07-16 18:36:17 +02:00
@extend %header-fs;
line-height: 1.38;
2019-03-27 19:03:32 +01:00
margin: 0;
}
&>section{
overflow: hidden;
2019-03-27 19:03:32 +01:00
background-color: #fff;
// margin:0 0 0 -1em;
2019-03-27 19:03:32 +01:00
box-sizing:content-box;
transition: all 0.4s ease-in-out;
// outline: 1px solid blue;
2019-05-21 15:49:57 +02:00
right:0;
top:1.7em;
box-sizing: content-box;
z-index:100;
2019-03-27 19:03:32 +01:00
}
// 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;
}
2019-03-27 19:03:32 +01:00
}
// non-vue userblock
#block-userblock{
h2{display:none;}
a{
margin-right: 1em;
}
}
// vue userblock
#user-tools{
2020-11-19 21:43:56 +01:00
padding-top: 0.06em;
2021-03-18 23:13:50 +01:00
a.mdi-account{
2020-11-19 21:43:56 +01:00
@extend %header-fs;
cursor: pointer;
2021-03-18 23:13:50 +01:00
span{
@include col-mediaquery-min-max(3,5){
display:none;
}
2021-03-18 23:13:50 +01:00
}
2020-11-19 21:43:56 +01:00
}
.mdi-logout::before {
margin: -0.125em 0 0 0;
vertical-align: top;
}
}
2020-11-19 21:43:56 +01:00
// 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;
2020-11-20 10:39:19 +01:00
&:before{padding-right: 0.2em;}
2021-03-18 23:13:50 +01:00
span{
@include col-mediaquery-min-max(3,5){
display:none;
}
2021-03-18 23:13:50 +01:00
}
2020-11-19 21:43:56 +01:00
}
ul{
background-color: #fff;
overflow: hidden;
2020-11-20 10:39:19 +01:00
// margin:0 0 0 -1em;
box-sizing:content-box;
// outline: 1px solid blue;
box-sizing: content-box;
2020-11-19 21:43:56 +01:00
}
// 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;
}
}
}
2020-11-19 21:43:56 +01:00
li{
width:100%;
// cursor: pointer;
display: flex;
flex-direction: row;
align-items: baseline;
flex-wrap: nowrap;
h5{
@extend %header-fs;
cursor: pointer;
2021-03-11 19:14:20 +01:00
font-weight: 700;
span.length{
font-weight: 300;
}
2020-11-19 21:43:56 +01:00
}
span.mdi{
font-size: 0.9em;
}
div.actions{
padding-left:0.5em;
2020-11-20 10:39:19 +01:00
span.mdi{
cursor: pointer;
color: #4e4d4d;
}
span.delete-btn{
&.loading:before{
animation: rotating 2s linear infinite;
}
}
2020-11-19 21:43:56 +01:00
}
@include col-mediaquery-min(3){
div.actions{
opacity:0;
transition: opacity 0.3s ease-in-out;
}
2020-11-19 21:43:56 +01:00
@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;
}
}
2020-11-20 10:39:19 +01:00
&.create-flag{
margin-top: 0.2em;
input{
align-self: flex-end;
2020-11-19 21:43:56 +01:00
border: 1px solid #bbb;
border-radius:5px;
width: calc(100% - 2em);
font-size:0.8em;
2020-11-20 10:39:19 +01:00
}
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;
}
}
2020-11-19 21:43:56 +01:00
}
}
}
2019-07-16 18:36:17 +02:00
// menu
#block-header{
margin-right: 0.5em;
padding-left: 0.5em;
border-left: 1px solid #000;
#block-header-menu{
2021-03-18 23:13:50 +01:00
display:none;
}
// label[for="block-header-menu"]{
// display:none;
// }
ul.menu{
margin:0;
li{
padding:0;
2019-07-16 18:36:17 +02:00
a{
@extend %header-fs;
}
}
}
2021-03-19 21:38:28 +01:00
// @include col-mediaquery-max(3){
2021-03-18 23:13:50 +01:00
ul.menu{
li{
display: inline-block;
&:not(:first-of-type){
margin-left: 0.3em;
2021-03-18 23:13:50 +01:00
}
}
}
2021-03-19 21:38:28 +01:00
// }
@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;
2021-03-19 21:38:28 +01:00
li{
display: block;
2021-05-31 16:59:15 +02:00
a{
display: block;
padding: 0.2em 0;
}
2021-03-19 21:38:28 +01:00
}
}
2021-03-18 23:13:50 +01:00
}
}
#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;
2021-03-25 19:38:15 +01:00
justify-content:center;
#block-pagetitle{
// width: max-content;
width:100%;
}
#block-materiosapisearchblock{
box-sizing: border-box;
width:100%;
}
}
@include col-mediaquery-max(4, landscape){
#block-materiosapisearchblock{
align-self: flex-start;
}
}
}
#block-pagetitle{
// float: left;
padding:1em 0;
2021-03-25 19:38:15 +01:00
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;
}
2021-07-01 16:33:15 +02:00
body.path-webform & {
color: #fff;
background-color: $color-showrooms;
}
2021-07-14 12:23:13 +02:00
body.path-privacy-policy &,
body.path-tos & {
color: #fff;
background-color: $color-main-text;
}
}
2021-03-25 19:38:15 +01:00
@include col-mediaquery-max(3){
body.path-frontpage &, body.path-home & {
display: none;
2021-03-25 19:38:15 +01:00
}
padding: 1em 0 0;
body.path-base &{
h2{
padding: 0.5em 1em 0!important;
}
2021-03-30 15:42:40 +02:00
}
2021-03-25 19:38:15 +01:00
}
@include col-mediaquery-max(4, landscape){
padding:0 0 1em;
h2{
body:not(.path-home) & {
padding:0 0.6em 0.1em;
}
}
}
}
#block-materiosapisearchblock{
// float:right;
// display:inline-block;
// box-shadow: 0 0 5px rgba(0,0,0,0.2);
padding:0;
#materio-sapi-search-form{
2021-04-05 14:57:02 +02:00
display: grid;
2021-05-20 20:36:10 +02:00
grid-template-columns: auto 25px;
2021-04-05 14:57:02 +02:00
grid-template-rows: auto auto;
row-gap: 0.2em;
2021-05-20 20:30:54 +02:00
justify-items: stretch;
.form-item, input.button{
display: inline-block;
2021-04-01 22:44:44 +02:00
margin: 0;
}
2021-05-20 20:30:54 +02:00
.form-item-search{
2021-04-05 14:57:02 +02:00
grid-row: 1 / 1;
grid-column: 1 / 1;
2021-05-20 20:30:54 +02:00
position: relative;
#edit-search{
border:1px #BBB solid;
border-radius: 14px;
padding:0.3em;
color:#666;
width: 100%;
box-sizing: border-box;
}
}
2021-05-19 18:21:29 +02:00
fieldset#edit-filters{
2021-04-05 14:57:02 +02:00
grid-row: 2 / 2;
grid-column: 1 / span 2;
2021-05-19 18:21:29 +02:00
border: none;
padding: 0;
>legend{
line-height: 0.6;
padding-bottom: 0.2em;
width: 100%;
text-align: right;
span{
cursor: pointer;
font-size: 0.756em;
color: #8f8f8f;
}
}
> div.fieldset-wrapper{
height: 0;
overflow: hidden;
}
&.open >div.fieldset-wrapper{
height: auto;
overflow: visible;
}
2021-04-02 16:35:29 +02:00
.ss-main{
font-size: 0.756em;
2021-04-02 16:35:29 +02:00
.ss-single-selected{
border-radius: 0.7em;
2021-05-20 20:03:02 +02:00
&.ss-open-below{
border-radius: 0.7em 0.7em 0 0.7em;
}
height:1.5em;
border: none;
padding: 0 0.5em;
2021-04-21 21:59:41 +02:00
background-color: #eeeaea;
span.placeholder{
color: $color-main-text;
line-height: 1;
span.ss-disabled{
2021-04-21 21:59:41 +02:00
color: #8f8f8f;
}
}
2021-04-21 21:59:41 +02:00
span.ss-arrow span{
border-color: #b1adad;
}
2021-04-01 22:44:44 +02:00
}
2021-04-02 16:35:29 +02:00
.ss-content{
width:auto;
2021-05-20 20:03:02 +02:00
border: none;
border-radius: 0.7em 0 0.7em 0.7em;
&.ss-open{
box-shadow: 0 0 10px #ccc;
}
right: 0;
.ss-list{
max-height: none;
.ss-option{
white-space: nowrap;
text-align: right;
}
}
2021-04-01 22:44:44 +02:00
}
2021-05-20 20:03:02 +02:00
2021-04-01 22:44:44 +02:00
}
}
.button.form-submit{
2021-04-05 14:57:02 +02:00
grid-row: 1 / 1;
grid-column: 2 / 2;
justify-self: end;
align-self: center;
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 1em;
background-color: $color-base;
}
}
}
// main
aside.messages{
padding: 0;
}
// content top
// #content-top{
// &:after{
// content:"";
// clear:both;
// display: block;
// }
// }
2021-07-07 16:14:12 +02:00
#main-content.loading{
transition: all 0.3s ease-in-out;
opacity: 0.5;
pointer-events: none;
}
// ___ _ _ _ __ _
// / __|___ _ _| |_ ___ _ _| |_ ___| | ___ / _| |_
// | (__/ _ \ ' \ _/ -_) ' \ _|___| |__/ -_) _| _|
// \___\___/_||_\__\___|_||_\__| |____\___|_| \__|
#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;
2020-12-01 20:40:37 +01:00
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{
2020-12-01 20:40:37 +01:00
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;
2020-12-01 20:40:37 +01:00
.mdi.unflag{
cursor: pointer;
}
.tool.samples{
.tool-content{
}
}
}
}
}
}
}
}
2019-07-16 10:29:30 +02:00
// __ _
// / _|_ _ ___ _ _| |_
// | _| '_/ _ \ ' \ _|
// |_| |_| \___/_||_\__|
@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;
}
2019-07-16 18:36:17 +02:00
article.node--type-frontpage{
%front-col-field__label{
font-size: 3.5em;
line-height: 1;
2021-03-25 19:38:15 +01:00
@include col-mediaquery-max(3){
font-size: 2em;
}
2019-07-16 18:36:17 +02:00
}
%front-col-description{
2019-07-16 18:36:17 +02:00
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;
2021-03-25 19:38:15 +01:00
@include col-mediaquery-max(3){
width:auto;
padding:0 1em;
text-align: left;
}
2019-07-16 18:36:17 +02:00
.field__label{
@extend %front-col-field__label;
}
.field__item{
@extend %front-col-description;
2019-07-16 18:36:17 +02:00
}
2019-07-16 10:29:30 +02:00
}
}
2020-12-27 11:09:03 +01:00
// %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;
2020-12-27 11:09:03 +01:00
// }
// }
// >div:nth-child(2){
// grid-column: 2;
// }
// }
2019-07-16 18:36:17 +02:00
%part-columned-layout{
2020-12-27 11:09:03 +01:00
display:flex;
flex-direction: row;
flex-wrap: nowrap;
2019-07-16 18:36:17 +02:00
>div:nth-child(1){
2020-12-27 11:09:03 +01:00
flex: 0 0 $column_width * 2 + $column_goutiere;
box-sizing: border-box;
padding: 1em;
2019-07-16 18:36:17 +02:00
color: #fff;
.field__label{
@extend %front-col-field__label;
}
.field__item{
@extend %front-col-description;
2019-07-16 18:36:17 +02:00
}
2019-07-16 10:29:30 +02:00
}
2019-07-16 18:36:17 +02:00
>div:nth-child(2){
2020-12-27 11:09:03 +01:00
flex: 1 1 auto;
box-sizing: border-box;
padding: 1em 0.5em;
2019-07-16 10:29:30 +02:00
}
2021-03-25 19:38:15 +01:00
@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;
}
}
2019-07-16 10:29:30 +02:00
}
>h2{
display: none;
}
2019-05-24 16:46:14 +02:00
.node__content{
2019-07-15 18:44:03 +02:00
&>section{
&.home-intro{
2019-07-16 10:29:30 +02:00
@extend %part-centered-layout;
2021-01-04 14:20:04 +01:00
.field__item{
display: flex;
flex-flow: row nowrap;
justify-content: center;
p{
2021-05-26 10:17:06 +02:00
flex: 0 0 35%;
max-width: $column_width * 2;
padding:1em;
box-sizing: border-box;
2021-01-04 14:20:04 +01:00
}
2021-03-25 19:38:15 +01:00
@include col-mediaquery-max(3){
display: none;
}
2021-01-04 14:20:04 +01:00
}
2019-07-15 18:44:03 +02:00
}
&.home-database{
background-color: $color-base;
2019-07-16 10:29:30 +02:00
@extend %part-columned-layout;
.field--name-field-a-database{
2021-06-10 19:45:30 +02:00
// .field__label{
// cursor: pointer;
// }
}
.field--name-field-database-links{
.field__item{
display: inline-block;
a{
@include btn;
background-color: #fff;
color: $color-base;
}
}
}
2019-07-15 18:44:03 +02:00
.cards-list-home{
position: relative;
// max-height: (130px*1.4)*3;
max-height: 580px;
overflow-y: hidden;
ul{
width:100%;
margin:0; padding:0;
2020-12-27 11:09:03 +01:00
// 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;
2021-03-25 21:37:03 +01:00
@include col-mediaquery-max(3){
justify-content: space-around;
}
2019-07-15 18:44:03 +02:00
li{
2020-12-27 11:09:03 +01:00
padding:0 0 $column_goutiere / 2 0;
box-sizing: border-box;
// padding-top: 140%;
width: $column_width / 2;
height: $card_height / 2;
2020-12-27 12:05:34 +01:00
position: relative;
list-style: none;
margin:0;
2019-07-15 18:44:03 +02:00
.card{
2020-12-27 11:09:03 +01:00
// position:absolute;
// top:0; bottom:0;
// left:0; right:0;
width: 100%;
height: 100%;
2019-07-15 18:44:03 +02:00
.field--name-field-short-description{
2020-12-27 11:09:03 +01:00
font-size: 0.656em;
line-height: 1.2;
2019-07-15 18:44:03 +02:00
}
}
}
}
}
}
&.home-showrooms{
background-color: $color-showrooms;
2019-07-16 10:29:30 +02:00
@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;
}
}
2019-07-15 18:44:03 +02:00
}
.field--name-computed-showrooms-reference{
2020-12-27 17:46:04 +01:00
overflow: hidden;
2019-07-16 17:01:18 +02:00
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;
}
}
2019-07-16 17:01:18 +02:00
>.field__item{
grid-row: 1;
2019-07-16 17:01:18 +02:00
// position: absolute;
// top:0; left:0;
// width:100%; height:100%;
// overflow: hidden;
opacity: 0;
2020-12-27 17:46:04 +01:00
// transform: translateX(100%);
transition: all 2s ease-out;
&.active{
opacity: 1;
2020-12-27 17:46:04 +01:00
// transform: translateX(0);
// transition: all 0.3s ease-in-out;
}
2020-12-27 17:46:04 +01:00
2019-07-16 17:01:18 +02:00
.taxonomy-term{
position: relative;
width:100%; height:100%;
div.visuel{
width:100%;
2020-12-27 17:46:04 +01:00
padding-bottom: 5em;
2019-07-16 17:01:18 +02:00
img{
max-width: 100%;
height: auto;
2019-07-16 17:01:18 +02:00
}
}
section.text{
position: absolute;
bottom:0; left:0;
width:100%;
box-sizing:border-box;
2020-12-27 17:46:04 +01:00
padding:1em 0 0;
background-color:$color-showrooms;
2019-07-16 17:01:18 +02:00
color: #fff;
2020-12-27 17:46:04 +01:00
// >*{
// // display: inline-block;
// font-size: 0.9em;
// }
2019-07-16 17:01:18 +02:00
h2,p{
margin:0;
}
2020-12-27 17:46:04 +01:00
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;
}
2019-07-16 17:01:18 +02:00
}
}
}
2019-07-15 18:44:03 +02:00
}
}
&.home-blabla{
background-color: $color-blabla;
2019-07-16 10:29:30 +02:00
@extend %part-columned-layout;
.field--name-field-blabla-links{
.field__item{
display: inline-block;
a{
@include btn;
background-color: #fff;
color: $color-blabla;
}
}
}
2019-07-16 10:29:30 +02:00
.cards-list-home{
position: relative;
2020-02-19 15:30:58 +01:00
$bp: ($column_width*2 + $column_goutiere );
overflow-y: hidden;
2020-12-27 12:05:34 +01:00
max-height: 315px;
2020-12-27 12:05:34 +01:00
// @media only screen and (max-width: $bp * 6){
// max-height: 630px;
// }
// @media only screen and (min-width: ($bp * 6) + 1px){
// max-height: 310px;
// }
2019-07-16 10:29:30 +02:00
ul{
width:100%;
margin:0; padding:0;
2020-12-27 12:05:34 +01:00
// 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;
2019-07-16 10:29:30 +02:00
li{
2020-12-27 12:05:34 +01:00
padding:0 0 $column_goutiere 0;
box-sizing: border-box;
// padding-top: 140%;
width: $column_width;
// height: $card_height / 2;
2019-07-16 10:29:30 +02:00
position: relative;
list-style: none;
2020-12-27 12:05:34 +01:00
margin:0;
// padding-top: 67.8%;
2019-07-16 10:29:30 +02:00
overflow: hidden;
.card{
2020-12-27 12:05:34 +01:00
// position:absolute;
// top:0; bottom:0;
// left:0; right:0;
width: 100%;
2019-07-16 10:29:30 +02:00
height: auto;
.field--name-title{
font-size: 0.756em;
line-height: 0.9;
}
}
}
}
2021-03-25 19:38:15 +01:00
@include col-mediaquery-max(3){
max-height: 386px;
ul{
justify-content: space-around;
li{
flex: 0 3 45%;
}
}
}
2019-07-16 10:29:30 +02:00
}
2019-07-15 18:44:03 +02:00
}
&.home-pricing{
2019-07-16 10:29:30 +02:00
@extend %part-centered-layout;
2021-01-04 14:20:04 +01:00
>h3{
@extend %front-col-field__label;
text-align: center;
text-transform: capitalize;
padding: 0.7em 0 0.3em 0;
2021-03-25 21:37:03 +01:00
@include col-mediaquery-max(3){
text-align: left;
padding: 0 0.4em;
}
2021-01-04 14:20:04 +01:00
}
.field--name-field-pricing-pitch{
text-align: center;
p{ margin:0;}
2021-03-25 21:37:03 +01:00
@include col-mediaquery-max(3){
text-align: left;
p{ padding: 0.5em 1em; }
}
2021-01-04 14:20:04 +01:00
}
2020-12-27 19:22:21 +01:00
.field--name-field-pricing{
2021-01-04 14:20:04 +01:00
// 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;
}
2021-03-25 21:37:03 +01:00
@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;
}
}
2020-12-27 19:22:21 +01:00
}
.field--name-computed-products-reference{
display: flex;
flex-flow: row nowrap;
2021-06-09 13:06:52 +02:00
@include col-mediaquery-max(5){
2021-03-25 21:37:03 +01:00
flex-flow: column;
justify-content: flex-start;
}
2020-12-27 19:22:21 +01:00
>.field__item{
2021-06-09 13:06:52 +02:00
flex:0 0 33%;
2020-12-27 19:22:21 +01:00
text-align: center;
padding: 2em 0;
2021-06-09 13:06:52 +02:00
color: #fff;
2020-12-27 19:22:21 +01:00
position: relative;
2021-06-09 13:06:52 +02:00
height:23em;
>article{
2020-12-27 19:22:21 +01:00
position: absolute;
top:50%; left:50%;
transform: translate(-50%, -50%);
2021-06-09 13:06:52 +02:00
width:80%;
2020-12-27 19:22:21 +01:00
}
.field--name-title{
@extend %front-col-field__label;
font-weight: 600;
line-height: 0.7;
padding-bottom: 0.1em;
2020-12-27 19:22:21 +01:00
text-align: center;
word-spacing: 30000px;
}
.field--name-body{
@extend %front-col-description;
2020-12-27 19:22:21 +01:00
padding:0.5em;
p{
margin: 0;
}
}
2021-06-09 13:06:52 +02:00
.field--name-variations{
>.field__item{
// text-align: center;
// display: table;
// width: 100%;
// &:last-child{
// margin: 0.1em 0 0;
// }
margin-top: 0.5em;
2021-06-09 13:06:52 +02:00
>div{
// display: flex;
// flex-direction: row;
// justify-content: center;
// align-items: center;
// display: table-row;
// height: 1em;
display: grid;
grid-template-columns: 50% 50%;
>*{
// height:2em;
// display: table-cell;
// vertical-align: middle;
align-self: center;
}
2021-06-09 13:06:52 +02:00
.field--name-field-description{
text-align: right;
// width: 55%;
// margin-right: 0.5em;
// min-width: 10em;
h4{
2021-06-09 13:06:52 +02:00
font-size: 1.512em;
font-weight: 800;
color: #fff;
white-space: nowrap;
line-height: 1;
2021-06-09 13:06:52 +02:00
}
p{
font-size: 0.882em;
line-height: 0.8;
margin: 0;
}
2021-06-09 13:06:52 +02:00
}
form{
text-align: left;
padding-left: 1em;
// position: relative;
.form-actions{
margin:0;
}
input.button--add-to-cart{
@include btn;
margin: 0;
}
}
2021-06-09 13:06:52 +02:00
}
}
}
a.btn{
@include btn;
background-color: #fff;
}
&:nth-child(1){
background-color: $color-base;
a.btn{
color: $color-base;
}
.field--name-variations{
.field__item{
>div{
input.button--add-to-cart{
color: $color-base;
}
}
}
}
}
&:nth-child(2){
background-color: $color-webshowroom;
a.btn{
color: $color-webshowroom;
}
.field--name-variations{
.field__item{
>div{
input.button--add-to-cart{
color: $color-webshowroom;
}
}
}
}
}
&:nth-child(3){
background-color: $color-showrooms;
a.btn{
color: $color-showrooms;
}
>article{
max-width: 345px;
}
}
2021-03-25 21:37:03 +01:00
2021-06-09 13:06:52 +02:00
@include col-mediaquery-max(5){
2021-03-25 21:37:03 +01:00
flex: 0 0 auto;
padding:0;
// height: auto;
>article{
}
}
2020-12-27 19:22:21 +01:00
}
}
2019-07-15 18:44:03 +02:00
}
}
2019-05-24 16:46:14 +02:00
}
}
// ___ _
// / __|__ _ _ _ __| |___
// | (__/ _` | '_/ _` (_-<
// \___\__,_|_| \__,_/__/
.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;
@include col-mediaquery-max(4, landscape){
display:none;
}
}
&>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;
2021-03-30 15:42:40 +02:00
filter: drop-shadow(0 0 3px #aaa);
>article{
width:100%;
height:auto;
2021-03-30 15:42:40 +02:00
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;
2019-06-12 13:21:06 +02:00
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;
2021-01-20 12:09:22 +01:00
width:$minicard_width;
height:$minicard_height;
margin:auto;
>header{
padding: 0.3em 0.3em 0.1em;
cursor: pointer;
2021-01-20 12:09:22 +01:00
h1{
margin:0;
font-size: 1em;
}
h4{
margin:0;
line-height: 1.1;
margin-bottom: -0.4em;
}
span.ref{
line-height: 0.5;
2021-01-20 12:09:22 +01:00
}
}
>nav.tools{
// top: auto;
// bottom: 0;
2021-01-20 12:09:22 +01:00
padding:0 0.2em;
background:rgba(255,255,255, 0.8);
2021-01-20 12:09:22 +01:00
.mdi.unflag{
cursor: pointer;
}
.tool.samples{
@include hover{
.tool-content{
max-width:140px;
}
}
}
2021-01-20 12:09:22 +01:00
}
}
&.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;
}
}
}
2019-07-15 18:44:03 +02:00
// &.card-small{
// width:100px; height:140px;
// }
2019-06-12 13:21:06 +02:00
// focused
// box-shadow: 0 0 7px rgba(0,0,0,0.9);
2019-07-25 21:23:23 +02:00
// &.article{
// width: $column_width * 2 + $column_goutiere;
//
// }
header{
position: absolute;
bottom:0;
z-index:10;
2019-06-12 13:21:06 +02:00
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{
2019-06-12 13:21:06 +02:00
font-size: 1.3em;
font-weight: 700;
2019-07-25 21:23:23 +02:00
line-height: 0.85;
2019-06-12 13:21:06 +02:00
margin-bottom: 0.2em;
}
h4{
2019-06-12 13:21:06 +02:00
font-size: 0.882em;
font-weight: 300;
2021-01-20 12:09:22 +01:00
line-height: 1.1;
margin-bottom: -0.2em;
2019-06-12 13:21:06 +02:00
}
span.ref{
font-size: 0.693em;
font-weight: 300;
line-height: 1;
}
}
&.card-thematique header{
background-color: $color-base-transparent;
}
$navtool_width: 15px;
2020-11-24 14:07:10 +01:00
nav.tools{
position: absolute;
top: 0;
right: 0;
z-index: 21;
width: $navtool_width;
2020-11-24 14:07:10 +01:00
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%;
2020-12-01 20:40:37 +01:00
// width: 5em;
width: $column_width - $navtool_width - 10px;
2020-12-01 20:40:37 +01:00
box-sizing: border-box;
padding: 0;
2020-11-24 14:07:10 +01:00
background-color: #fff;
box-shadow: -2px 3px 8px rgba(0, 0, 0, 0.5);
2020-12-01 20:40:37 +01:00
opacity: 0;
max-height: 0; max-width:0;
overflow: hidden;
transition: all 0.2s ease-in-out;
transition-delay: 0.1s;
2020-12-01 20:40:37 +01:00
}
@include hover{
2020-12-01 20:40:37 +01:00
.tool-content{
transition: all 0.3s ease-in-out;
opacity: 1;
padding: 0.3em;
2020-12-01 20:40:37 +01:00
max-height: 195px;
max-width:200px;
}
2020-11-24 14:07:10 +01:00
}
}
2021-03-30 15:42:40 +02:00
@include col-mediaquery-max(3){
width:23px;
>*{
>span.btn, >a{
font-size:1.2em;
}
}
}
2020-11-24 14:07:10 +01:00
.tool.flags{
2020-12-01 20:40:37 +01:00
.tool-content{
ul{
display: flex;
flex-flow: row wrap;
li{
padding:0 0.5em 0 0;
}
}
}
2020-11-24 14:07:10 +01:00
span.flag{
cursor: pointer;
font-size: 0.756em;
color: #bbb;
transition: color 0.3s ease-in-out;
@include hover{
color:#1a1a1a;
}
&.isActive{
2020-11-24 14:07:10 +01:00
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;
}
}
}
2020-11-24 14:07:10 +01:00
}
.tool.samples{
.tool-content{
font-size: 0.756em;
ul li{
font-weight: bold;
span.showroom{
font-weight: 400;
}
}
}
}
2020-12-01 20:40:37 +01:00
opacity: 0;
transition: opacity 0.2s ease-in-out;
}
@include hover{
2020-12-01 20:40:37 +01:00
nav.tools{
opacity:1;
}
2020-11-24 14:07:10 +01:00
}
section.images{
position: relative;
2019-06-11 18:04:46 +02:00
&, *{width: 100%; height:100%;}
figure{
cursor: pointer;
2019-06-11 18:04:46 +02:00
margin:0;
position: absolute;
top:0; left:0;
2019-06-11 18:04:46 +02:00
// 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;}
2019-06-11 18:04:46 +02:00
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, portrait){
2021-03-30 15:42:40 +02:00
flex-flow: column;
width: 100%;
height: 100%;
overflow-y: auto;
>.col-right{
flex:0 0 auto;
}
>.col-left{
flex:0 0 100%;
}
}
@include col-mediaquery-max(4, landscape){
// flex-flow: row-reverse ;
width: 100%;
height: 100%;
>.col-right{
height: 100%;
overflow-y: auto;
}
// >.col-left{
// flex:0 0 50%;
// }
}
section.col-right{
>*:not(nav.tools){
position: relative;
padding: 0.3em $navtool_width + 5px 0 0.5em;
box-sizing: border-box;
width: 100%;
}
2021-01-20 12:09:22 +01:00
>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;
}
}
2021-01-25 17:13:38 +01:00
.vsa-list{
padding:0;
border: none;
--vsa-heading-padding: 0 0;
--vsa-content-padding: 0 0 0.5em;
--vsa-default-icon-size: 0.3;
2021-01-25 17:13:38 +01:00
--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;
2021-03-09 14:53:22 +01:00
border-bottom: 0.5px dotted $color-main-text;
}
2021-01-25 17:13:38 +01:00
}
2021-01-25 17:13:38 +01:00
}
}
2021-01-20 12:09:22 +01:00
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{
}
}
2021-01-20 12:09:22 +01:00
}
}
nav.tools{
opacity: 1;
section.close{
span.btn.mdi-close{
cursor:pointer;
}
}
div.tool-content{
min-width: $column_width *2 - $navtool_width - 10px;
2021-03-30 15:42:40 +02:00
@include col-mediaquery-max(3){
min-width: 80vw;
}
}
2021-03-30 15:42:40 +02:00
}
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;
}
}
}
2021-01-25 17:13:38 +01:00
// 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%;
2021-01-25 17:19:06 +01:00
ul{
li{
2021-01-26 11:43:42 +01:00
padding:0.1em 0 .4em 0;
2021-01-25 17:19:06 +01:00
}
}
h2{
margin:0;
font-size: 1em;
2021-01-25 17:21:27 +01:00
line-height: 1;
}
p{
margin: 0;
2021-01-26 11:43:42 +01:00
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;
}
}
}
}
}
2019-07-25 21:23:23 +02:00
.vm--modale-card{
position: relative;
}
2021-03-30 15:42:40 +02:00
// 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;
}
2020-12-25 17:37:15 +01:00
// _____ _ _ _
// |_ _| |_ ___ _ __ __ _| |_(_)__ _ _ _ ___
// | | | ' \/ -_) ' \/ _` | _| / _` | || / -_)
// |_| |_||_\___|_|_|_\__,_|\__|_\__, |\_,_\___|
// |_|
#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;
2020-12-25 17:37:15 +01:00
}
// }
div.col-left{
padding: 0 $column_goutiere $column_goutiere 0;
flex: 0 0 $column_width * 2 + $column_goutiere;
2020-12-25 17:37:15 +01:00
}
div.col-right{}
2020-12-25 17:37:15 +01:00
}
div.col-left{
section.body{
background-color: $color-base;
padding: 0.5em 1em 1em;
}
section.visuel{
img{
width: 100%;
}
}
2020-12-25 17:37:15 +01:00
}
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;
}
2020-12-25 17:37:15 +01:00
}
2020-12-25 17:37:15 +01:00
}
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;
}
}
}
// ___ _ _ _
// | _ ) |__ _| |__| |__ _
// | _ \ / _` | '_ \ / _` |
// |___/_\__,_|_.__/_\__,_|
2019-07-25 21:23:23 +02:00
#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%;
}
}
}
}
2020-02-19 15:58:15 +01:00
section.accroche{
figure{
width:$column_width*2 + $column_goutiere;
margin:0 $column_goutiere 0 0;
img{
width:100%;
}
}
}
2019-07-25 21:23:23 +02:00
section.taxonomy{
2020-02-20 12:57:35 +01:00
margin:1em 0;
2019-07-25 21:23:23 +02:00
ul{
2020-02-20 12:57:35 +01:00
margin: 0;
2019-07-25 21:23:23 +02:00
}
li{
display:inline-block;
padding:0 0.5em 0 0;
}
}
div.gallery-wrapper{
.image{
2019-07-25 21:23:23 +02:00
display: inline-block;
width:$column_width;
2020-02-19 15:58:15 +01:00
margin:0 $column_goutiere $column_goutiere*0.6 0;
height:$card_height / 2;
background-size: cover;
2019-07-25 21:23:23 +02:00
}
@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;
}
}
2019-07-25 21:23:23 +02:00
}
// 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;
// }
// }
// }
2019-07-25 21:23:23 +02:00
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;
}
}
}
2019-07-25 21:23:23 +02:00
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;
}
2019-07-25 21:23:23 +02:00
&.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;
2019-07-25 21:23:23 +02:00
}
&:nth-child(1){
grid-column: 1;
a:before{
content:'\021A4';
position: absolute;
left:0;
2019-07-25 21:23:23 +02:00
}
}
&:nth-child(2){
grid-column: 2;
text-align: right;
a:after{
content:'\021A6';
position: absolute;
right: 0;
2019-07-25 21:23:23 +02:00
}
}
}
}
}
// ___ _
// / __| |_ _____ __ ___ _ ___ ___ _ __ ___
// \__ \ ' \/ _ \ V V / '_/ _ \/ _ \ ' \(_-<
// |___/_||_\___/\_/\_/|_| \___/\___/_|_|_/__/
2019-07-25 21:23:23 +02:00
#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{
2021-06-09 13:06:52 +02:00
flex:0 0 33%;
text-align: center;
padding: 2em 0;
>header{
padding-bottom: 1.3em;
}
>header h1,
.views-field-title{
2021-06-10 20:02:26 +02:00
font-size: 3.5em;
line-height: 0.6;
color: #fff;
text-align: center;
word-spacing: 30000px;
}
section.content, .views-field-body{
color: #fff;
.description{
2021-06-10 20:02:26 +02:00
font-size: 1em;
p{
margin: 0.3em;
}
}
}
aside{
// padding:1em 0;
.variation{
// display: flex;
// flex-flow: row nowrap;
// justify-content: center;
// align-items:stretch;
display: grid;
grid-template-columns: 50% 50%;
margin-top: 0.5em;
>*{
align-self: center;
}
div.variation-description{
// flex: 0 0 auto;
color: #fff;
text-align: right;
h4{
font-size: 1.5em;
font-weight: 800;
margin:0;
line-height: 1;
}
p{
margin:0;
line-height: 0.8;
}
}
div.actions{
text-align: left;
padding-left: 1em;
button{
@include btn;
background-color: #fff;
}
}
}
2021-06-11 11:41:15 +02:00
a.btn{
@include btn;
background-color: #fff;
}
}
&:nth-child(1){
background-color: $color-base;
aside .variation .actions button{
color: $color-base;
}
}
&:nth-child(2){
background-color: $color-webshowroom;
aside .variation .actions button{
color: $color-webshowroom;
}
2021-06-09 13:06:52 +02:00
}
&:nth-child(3){
background-color: $color-showrooms;
aside .variation .actions button,
2021-06-11 11:41:15 +02:00
a.btn{
2021-06-09 13:06:52 +02:00
color: $color-showrooms;
}
}
}
2021-06-10 20:02:26 +02:00
@include col-mediaquery-max(5){
flex-flow: column;
article.product,
.views-row{
flex:0 1 auto;
}
}
}
.modal{
position: relative;
}
2021-06-09 13:06:52 +02:00
// #pricing-modal-login-register{
// position: relative;
// width: 100%;
// text-align: left;
//
// .vm--modale-loginregister{
// }
#login-register{
2021-06-09 13:06:52 +02:00
padding: 1em;
box-sizing: content-box;
width: 100%;
h2{
margin: 0.4em 0 1.1em;
padding-right: 4em;
font-size: 1.2em;
font-weight: 300;
}
>div.wrapper{
display: flex;
flex-flow: row nowrap;
>section{
2021-06-09 13:06:52 +02:00
flex:0 0 50%;
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"]{
2021-06-09 13:06:52 +02:00
max-width: 11em;
}
&#user-login-form #edit-pass--description,
#edit-pass-pass1--description{
2021-06-09 13:06:52 +02:00
display: block;
max-width: 16em;
font-size: 0.693em;
}
2021-06-09 13:06:52 +02:00
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{
}
@include col-mediaquery-max(3){
flex-flow: column;
>section{
flex:0 0 auto;
form{
input[type="email"],
input[type="password"]{
max-width: 90%;
width: 90%;
}
&#user-login-form #edit-pass--description,
#edit-pass-pass1--description{
max-width: 90%;
width: 90%;
}
}
&.login{
padding-bottom: 0.5em;
}
}
}
}
2021-06-09 13:06:52 +02:00
}
2021-06-09 13:06:52 +02:00
// @include col-mediaquery-max(3){
// height:100%;
// overflow-y: auto;
// #login-register{
// flex-flow: column;
// >section{
// flex:0 0 auto;
// form{
// input[type="email"],
// input[type="password"]{
// max-width: 90%;
// width: 90%;
// }
// &#user-login-form #edit-pass--description,
// #edit-pass-pass1--description{
// max-width: 90%;
// width: 90%;
// }
// }
// &.login{
// padding-bottom: 0.5em;
// }
// }
// }
// }
// @include col-mediaquery-max(4, landscape){
// h2{
// margin: 0 0 0.5em;
// }
// }
// }
#pricing{
@include col-mediaquery-max(3){
.overlay > .modal{
width:95%!important;
height:95%!important;
}
}
}
#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;
2021-06-21 15:46:10 +02:00
fieldset#edit-payment-information{
#edit-payment-information-add-payment-method{
// display: flex;
// flex-flow: column-reverse;
// #edit-payment-information-add-payment-method-payment-details{
// margin: 1em 0 0;
// }
}
}
label,
2021-01-06 22:16:50 +01:00
legend,
2021-06-21 15:46:10 +02:00
.description,
2021-01-06 22:16:50 +01:00
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;
}
}
2021-06-21 16:47:53 +02:00
#edit-completion-message{
p.welcom{
font-size: 1.512em;
}
p.base{
a{
// @include btn;
// background-color: $color-base;
// color: #fff;
// font-size: 1.134em;
2021-06-21 16:47:53 +02:00
}
}
p.order{
}
}
#edit-order-summary{
background-color: $color-showrooms;
padding:1em;
}
.form-item-materio-commerce-agree-nominative-nominative-terms{
label{
max-width: 95%;
vertical-align: top;
}
}
}
}
form#user-pass{
input.form-email{
max-width: 95%;
}
}
2021-06-08 21:20:59 +02:00
#member-warning{
padding: 2em 4em;
text-align: center;
h2{
}
p{
}
a{
@include btn;
background-color: $color-webshowroom;
color: #fff;
}
}
2021-07-01 16:33:15 +02:00
#webform-submission-multi-joueur-add-form{
$w:3;
max-width: $column_width * $w + $column_goutiere * ($w - 1);
.form-item{
margin:0.5em 0;
}
2021-07-05 12:08:32 +02:00
$lw:10em;
2021-07-01 16:33:15 +02:00
label{
display: inline-block;
width:$lw;
color: #fff;
}
.webform-element-description{
color:#fff;
}
.form-item{
position: relative;
box-sizing: border-box;
}
.form-item.form-no-label input[type="text"]{
margin-left: $lw*1.04;
}
input[type="text"],
input[type="tel"],
input[type="email"]{
width: calc(95% - #{$lw});
}
input[type="submit"]{
@include btn;
}
.address--wrapper{
background-color: $color-webshowroom;
margin:0;
padding: 1em 1em 0;
}
.form-item-vat-number{
background-color: $color-webshowroom;
margin:0;
padding: 1em 1em 0.6em;
}
.form-item-phone{
background-color: $color-webshowroom;
margin:0;
padding: 0 1em 1em;
}
2021-07-05 12:08:32 +02:00
.js-form-item-email{
background-color: $color-webshowroom;
margin:0;
padding: 0 1em 1em;
}
.webform-type-webform-email-confirm{
background-color: $color-webshowroom;
margin:0;
padding: 0 1em 1em;
label{
width: 15em;
}
input[type="email"]{
width: calc(95% - 15em);
}
}
2021-07-01 16:33:15 +02:00
.form-item-collaborateur{
background-color: $color-base;
margin:0;
padding: 1em;
input[type="image"]{
background-color: #fff;
}
input[type="submit"]{
background-color: #fff;
color: $color-base;
}
}
2021-07-05 14:45:56 +02:00
.form-item-commentaires{
background-color: $color-blabla;
margin:0;
padding:1em;
}
2021-07-01 16:33:15 +02:00
#edit-actions{
// background-color: $color-showrooms;
// margin:0;
// padding: 1em;
text-align: right;
input[type="submit"]{
background-color: $color-blabla;
color: #fff;
}
}
}
// ___ _
// | __|__ ___| |_ ___ _ _
// | _/ _ \/ _ \ _/ -_) '_|
// |_|\___/\___/\__\___|_|
footer[role="contentinfo"]{
2021-07-14 12:23:13 +02:00
// body:not(.path-home) & {
// display:none;
// }
>.wrapper{
display:flex;
flex-flow: row nowrap;
>div{
flex: 1 1 auto;
align-self: center;
}
2021-01-04 11:07:16 +01:00
}
2021-07-14 12:23:13 +02:00
#footer-left{
#block-materiosimplenewssubscription{
form{
display: flex;
flex-flow: row nowrap;
2021-07-14 12:23:13 +02:00
align-items: center;
font-size: 0.756em;
>*{
margin-right: 0.5em;
2021-07-14 12:23:13 +02:00
}
2021-07-14 17:14:41 +02:00
.form-item,
.form-actions{
margin-top: 0.3em;
margin-bottom: 0.3em;
}
2021-07-14 12:23:13 +02:00
#edit-subscriptions{
display: flex;
flex-flow: row nowrap;
2021-07-14 12:23:13 +02:00
>*{
margin-right: 0.5em;
display: flex;
flex-flow: row nowrap;
align-items: center;
}
input{
margin-right: 0.3em;
}
2021-01-04 11:07:16 +01:00
}
2021-07-14 12:23:13 +02:00
#edit-mail-wrapper{
input[type="email"]{
width:10em;
}
}
2021-07-14 12:23:13 +02:00
#edit-actions--2{
input[type="submit"]{
border: none;
background: none;
background-color: $color-base;
border-radius: 5px;
color: #fff;
padding: 0.45em 1em;
font-weight: 700;
}
}
}
2021-07-14 12:23:13 +02:00
}
2021-07-14 12:23:13 +02:00
}
2021-07-14 12:23:13 +02:00
#footer-middle{
}
2021-07-14 12:23:13 +02:00
#footer-right{
text-align: right;
nav.block-menu.menu--footer{
display: inline-block;
font-size: 0.756em;
ul.menu{
padding:0; margin:0;
display: flex;
flex-flow: row nowrap;
li.menu-item{
2021-07-14 17:14:41 +02:00
padding: 0.5em;
2021-07-14 12:23:13 +02:00
}
}
}
}
}
2021-07-12 12:50:40 +02:00
.eu-cookie-compliance-banner{
.popup-content{
display: flex;
flex-flow: row nowrap;
font-size: 00.756em;
padding: 0.3em 0;
& > *{
flex: 1 1 auto;
margin:0;
align-self: center;
max-width: 70%;
}
button{
margin:0;
}
#popup-buttons{
text-align: right;
}
}
}
2021-07-12 12:50:40 +02:00
img.lazy{
&.loading{
// background-color: red;
}
}