1083 lines
22 KiB
SCSS
1083 lines
22 KiB
SCSS
@import './base/reset';
|
|
@import './base/variables';
|
|
@import './base/colors';
|
|
@import './base/grid';
|
|
@import './base/layout';
|
|
@import './base/animations';
|
|
@import './base/fonts';
|
|
|
|
|
|
html{
|
|
// background-color: red;
|
|
}
|
|
|
|
|
|
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;
|
|
}
|
|
|
|
#block-sitebranding{
|
|
h1{
|
|
margin:0;
|
|
line-height: 1;
|
|
}
|
|
}
|
|
|
|
#block-userlogin{
|
|
position: relative;
|
|
// width:8em;
|
|
padding:0 1em;
|
|
overflow: visible;
|
|
h2{
|
|
@extend %header-fs;
|
|
line-height: 1.38;
|
|
margin: 0;
|
|
}
|
|
&>section{
|
|
background-color: #fff;
|
|
overflow: hidden;
|
|
width:11em;
|
|
height:1px;
|
|
padding:0.01em 1em;
|
|
// margin:0 0 0 -1em;
|
|
box-sizing:content-box;
|
|
transition: all 0.4s ease-in-out;
|
|
// outline: 1px solid blue;
|
|
transition-delay: 2s;
|
|
position: absolute;
|
|
right:0;
|
|
top:1.7em;
|
|
box-sizing: content-box;
|
|
}
|
|
&:hover{
|
|
&>section{
|
|
transition-delay: 0s;
|
|
height:12em;
|
|
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;
|
|
}
|
|
}
|
|
}
|
|
}
|
|
}
|
|
|
|
// non-vue userblock
|
|
#block-userblock{
|
|
h2{display:none;}
|
|
a{
|
|
margin-right: 1em;
|
|
}
|
|
}
|
|
// vue userblock
|
|
#user-tools{
|
|
padding-top: 0.06em;
|
|
h4{
|
|
@extend %header-fs;
|
|
cursor: pointer;
|
|
}
|
|
.mdi-logout::before {
|
|
margin: -0.125em 0 0 0;
|
|
vertical-align: top;
|
|
}
|
|
}
|
|
|
|
// vue flaglist
|
|
#user-flags{
|
|
border-left: 1px solid #000;
|
|
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;}
|
|
}
|
|
ul{
|
|
background-color: #fff;
|
|
overflow: hidden;
|
|
width:11em;
|
|
max-height:1px;
|
|
padding:0.01em 1em;
|
|
// margin:0 0 0 -1em;
|
|
box-sizing:content-box;
|
|
transition: all 0.4s ease-in-out;
|
|
// outline: 1px solid blue;
|
|
transition-delay: 2s;
|
|
position: absolute;
|
|
right:0;
|
|
top:1.7em;
|
|
box-sizing: content-box;
|
|
z-index: 30;
|
|
}
|
|
&: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;
|
|
}
|
|
span.mdi{
|
|
font-size: 0.9em;
|
|
}
|
|
div.actions{
|
|
opacity:0;
|
|
transition: opacity 0.3s ease-in-out;
|
|
padding-left:0.5em;
|
|
|
|
span.mdi{
|
|
cursor: pointer;
|
|
color: #4e4d4d;
|
|
}
|
|
span.delete-btn{
|
|
&.loading:before{
|
|
animation: rotating 2s linear infinite;
|
|
}
|
|
}
|
|
}
|
|
&:hover{
|
|
div.actions{
|
|
opacity:1;
|
|
}
|
|
}
|
|
|
|
&.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;
|
|
ul.menu{
|
|
margin:0;
|
|
li{
|
|
padding:0;
|
|
display: inline-block;
|
|
&:not(:first-of-type){
|
|
margin-left: 0.5em;
|
|
}
|
|
a{
|
|
@extend %header-fs;
|
|
}
|
|
}
|
|
}
|
|
}
|
|
|
|
#block-languageswitcher{
|
|
text-align: right;
|
|
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;
|
|
}
|
|
&>ul.links{
|
|
// background-color: #fff;
|
|
overflow: hidden;
|
|
width:3.5em;
|
|
// display: inline-block;
|
|
height:1px;
|
|
padding:0.01em 0;
|
|
margin:0;
|
|
box-sizing:content-box;
|
|
transition: all 0.4s ease-in-out;
|
|
// outline: 1px solid blue;
|
|
// transition-delay: 2s;
|
|
}
|
|
&:hover{
|
|
&>ul.links{
|
|
transition-delay: 0s;
|
|
height:2em;
|
|
padding:0.3em 0;
|
|
// box-shadow: 0 0 10px #ccc;
|
|
}
|
|
}
|
|
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
|
|
#block-pagetitle{
|
|
float: left;
|
|
padding:1em 0;
|
|
h2{
|
|
margin:0;
|
|
font-size: 1.512em;
|
|
text-transform: capitalize;
|
|
font-weight: 300;
|
|
|
|
body:not(.path-home) & {
|
|
padding:0.5em 1em;
|
|
}
|
|
body.path-blabla & {
|
|
color: #fff;
|
|
background-color: $color-blabla;
|
|
}
|
|
body.path-showrooms & {
|
|
color: #fff;
|
|
background-color: $color-showrooms;
|
|
}
|
|
body.path-base & {
|
|
color: #fff;
|
|
background-color: $color-base;
|
|
}
|
|
}
|
|
}
|
|
|
|
#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;
|
|
}
|
|
|
|
#edit-submit{
|
|
border:0;
|
|
text-indent: 50px;
|
|
overflow: hidden;
|
|
width:20px; height:20px;
|
|
margin:0;
|
|
// border-radius: 7px;
|
|
background-image: url('../img/search.png');
|
|
background-position: center;
|
|
background-repeat: no-repeat;
|
|
background-size: contain;
|
|
}
|
|
|
|
}
|
|
|
|
}
|
|
}
|
|
|
|
|
|
|
|
// 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{
|
|
>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;
|
|
}
|
|
}
|
|
}
|
|
}
|
|
}
|
|
}
|
|
}
|
|
|
|
|
|
// __ _
|
|
// / _|_ _ ___ _ _| |_
|
|
// | _| '_/ _ \ ' \ _|
|
|
// |_| |_| \___/_||_\__|
|
|
|
|
article.node--type-frontpage{
|
|
|
|
%front-col-field__label{
|
|
font-size: 3.5em;
|
|
line-height: 1;
|
|
}
|
|
%front-col-descritpion{
|
|
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;
|
|
.field__label{
|
|
@extend %front-col-field__label;
|
|
}
|
|
.field__item{
|
|
@extend %front-col-descritpion;
|
|
}
|
|
}
|
|
}
|
|
|
|
%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-descritpion;
|
|
}
|
|
}
|
|
>div:nth-child(2){
|
|
grid-column: 2;
|
|
}
|
|
}
|
|
|
|
.node__content{
|
|
|
|
&>section{
|
|
&.home-intro{
|
|
@extend %part-centered-layout;
|
|
}
|
|
&.home-database{
|
|
background-color: $color-base;
|
|
@extend %part-columned-layout;
|
|
.field--name-field-a-database{}
|
|
.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;
|
|
li{
|
|
position: relative;
|
|
list-style: none;
|
|
margin:0; padding:0;
|
|
padding-top: 140%;
|
|
.card{
|
|
position:absolute;
|
|
top:0; bottom:0;
|
|
left:0; right:0;
|
|
width: auto;
|
|
height: auto;
|
|
.field--name-field-short-description{
|
|
font-size: 0.756em;
|
|
line-height: 0.9;
|
|
}
|
|
}
|
|
}
|
|
}
|
|
}
|
|
}
|
|
&.home-showrooms{
|
|
background-color: $color-showrooms;
|
|
@extend %part-columned-layout;
|
|
.field--name-field-showrooms{
|
|
}
|
|
.field--name-computed-showrooms-reference{
|
|
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;
|
|
.taxonomy-term{
|
|
position: relative;
|
|
width:100%; height:100%;
|
|
div.visuel{
|
|
width:100%;
|
|
padding-bottom: 10em;
|
|
img{
|
|
max-width: 100%;
|
|
height: auto;
|
|
}
|
|
}
|
|
section.text{
|
|
position: absolute;
|
|
bottom:0; left:0;
|
|
width:100%;
|
|
box-sizing:border-box;
|
|
padding:1em 0;
|
|
background-color:$color-showrooms;
|
|
color: #fff;
|
|
>*{
|
|
// display: inline-block;
|
|
font-size: 0.9em;
|
|
}
|
|
h2,p{
|
|
margin:0;
|
|
}
|
|
|
|
}
|
|
}
|
|
}
|
|
}
|
|
}
|
|
&.home-blabla{
|
|
background-color: $color-blabla;
|
|
@extend %part-columned-layout;
|
|
|
|
.cards-list-home{
|
|
position: relative;
|
|
$bp: ($column_width*2 + $column_goutiere );
|
|
overflow-y: hidden;
|
|
|
|
@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;
|
|
li{
|
|
position: relative;
|
|
list-style: none;
|
|
margin:0; padding:0;
|
|
padding-top: 67.8%;
|
|
overflow: hidden;
|
|
.card{
|
|
position:absolute;
|
|
top:0; bottom:0;
|
|
left:0; right:0;
|
|
width: auto;
|
|
height: auto;
|
|
.field--name-title{
|
|
font-size: 0.756em;
|
|
line-height: 0.9;
|
|
}
|
|
}
|
|
}
|
|
}
|
|
}
|
|
}
|
|
&.home-pricing{
|
|
@extend %part-centered-layout;
|
|
|
|
}
|
|
}
|
|
}
|
|
}
|
|
|
|
|
|
// ___ _
|
|
// / __|__ _ _ _ __| |___
|
|
// | (__/ _` | '_/ _` (_-<
|
|
// \___\__,_|_| \__,_/__/
|
|
|
|
.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;
|
|
}
|
|
}
|
|
}
|
|
|
|
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;
|
|
}
|
|
&.minicard{
|
|
height:100px;
|
|
}
|
|
// &.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;
|
|
// margin-bottom: 0.1em;
|
|
}
|
|
span.ref{
|
|
font-size: 0.693em;
|
|
font-weight: 300;
|
|
line-height: 1;
|
|
}
|
|
}
|
|
&.card-thematique header{
|
|
background-color: $color-base-transparent;
|
|
}
|
|
nav.tools{
|
|
position: absolute;
|
|
top: 0;
|
|
right: 0;
|
|
z-index: 21;
|
|
$toolbar_width: 15px;
|
|
width: $toolbar_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 - $toolbar_width - 10px;
|
|
box-sizing: border-box;
|
|
padding: 0.3em;
|
|
background-color: #fff;
|
|
box-shadow: -2px 3px 4px rgba(0, 0, 0, 0.2);
|
|
opacity: 0;
|
|
max-height: 0; max-width:0;
|
|
overflow: hidden;
|
|
transition: all 0.2s ease-in-out;
|
|
}
|
|
&:hover{
|
|
.tool-content{
|
|
transition: all 0.3s ease-in-out;
|
|
opacity: 1;
|
|
max-height: 195px;
|
|
max-width:200px;
|
|
}
|
|
}
|
|
}
|
|
.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;
|
|
&:hover, &.isActive{
|
|
color:#1a1a1a;
|
|
}
|
|
}
|
|
}
|
|
opacity: 0;
|
|
transition: opacity 0.2s ease-in-out;
|
|
}
|
|
&: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%;
|
|
}
|
|
section.col-right{
|
|
>*:not(nav.tools){
|
|
position: relative;
|
|
padding: 0.5em;
|
|
box-sizing: border-box;
|
|
width: 100%;
|
|
}
|
|
header{
|
|
bottom: auto;
|
|
}
|
|
section.samples{
|
|
ul{
|
|
display: flex;
|
|
flex-flow: row wrap;
|
|
font-size: 0.882em;
|
|
font-weight: 300;
|
|
// line-height: 1.35;
|
|
li{
|
|
padding-right: 0.5em;
|
|
span.showroom{ font-weight: 500; }
|
|
}
|
|
}
|
|
}
|
|
section.body{
|
|
p{
|
|
font-size: 0.882em;
|
|
font-weight: 300;
|
|
line-height: 1.35;
|
|
}
|
|
|
|
}
|
|
nav.tools{
|
|
opacity: 1;
|
|
section.close{
|
|
span.btn.mdi-close{
|
|
cursor:pointer;
|
|
}
|
|
}
|
|
}
|
|
}
|
|
}
|
|
}
|
|
|
|
|
|
|
|
// ___ _ _ _
|
|
// | _ ) |__ _| |__| |__ _
|
|
// | _ \ / _` | '_ \ / _` |
|
|
// |___/_\__,_|_.__/_\__,_|
|
|
#blabla{
|
|
|
|
}
|
|
|
|
#main-content > article.article{
|
|
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;
|
|
}
|
|
}
|
|
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;
|
|
}
|
|
}
|
|
// 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{
|
|
ul{
|
|
width:calc(100% + #{$column_goutiere});
|
|
li{
|
|
display: inline-block;
|
|
vertical-align: top;
|
|
width:$column_width;
|
|
margin:0 $column_goutiere 0 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{
|
|
&.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;
|
|
}
|
|
&:nth-child(1){
|
|
grid-column: 1;
|
|
a:before{
|
|
content:'< ';
|
|
}
|
|
}
|
|
&:nth-child(2){
|
|
grid-column: 2;
|
|
text-align: right;
|
|
a:after{
|
|
content:' >';
|
|
}
|
|
}
|
|
}
|
|
}
|
|
}
|
|
|
|
// ___ _
|
|
// / __| |_ _____ __ ___ _ ___ ___ _ __ ___
|
|
// \__ \ ' \/ _ \ 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%;
|
|
}
|
|
}
|
|
}
|
|
|
|
}
|