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

927 lines
19 KiB
SCSS
Raw Normal View History

2019-03-25 18:27:56 +01:00
// @Author: Bachir Soussi Chiadmi <bach>
// @Date: 18-12-2017
// @Email: bachir@figureslibres.io
// @Filename: app.scss
// @Last modified by: bach
// @Last modified time: 20-12-2017
// @License: GPL-V3
@import './base/reset';
@import './base/variables';
@import './base/colors';
@import './base/grid';
@import './base/layout';
2020-11-20 10:39:19 +01:00
@import './base/animations';
@import './base/fonts';
2019-03-25 18:27:56 +01:00
html{
// background-color: red;
}
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;
}
2019-03-27 19:03:32 +01:00
#block-sitebranding{
h1{
margin:0;
line-height: 1;
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{
background-color: #fff;
overflow: hidden;
width:11em;
2019-03-27 19:03:32 +01:00
height:1px;
padding:0.01em 1em;
// 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;
transition-delay: 2s;
2019-05-21 15:49:57 +02:00
position: absolute;
right:0;
top:1.7em;
box-sizing: content-box;
2019-03-27 19:03:32 +01:00
}
&:hover{
&>section{
transition-delay: 0s;
height:12em;
2019-03-27 19:03:32 +01:00
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;
}
}
}
}
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;
h4{
@extend %header-fs;
cursor: pointer;
}
.mdi-logout::before {
margin: -0.125em 0 0 0;
vertical-align: top;
}
}
2020-11-19 21:43:56 +01:00
// 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;
2020-11-20 10:39:19 +01:00
&:before{padding-right: 0.2em;}
2020-11-19 21:43:56 +01:00
}
ul{
background-color: #fff;
overflow: hidden;
2020-11-20 10:39:19 +01:00
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;
2020-11-19 21:43:56 +01:00
}
&:hover{
ul{
2020-11-20 10:39:19 +01:00
transition-delay: 0s;
max-height:12em;
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;
}
span.mdi{
font-size: 0.9em;
}
div.actions{
opacity:0;
transition: opacity 0.3s ease-in-out;
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
}
&:hover{
div.actions{
opacity:1;
}
}
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: 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;
}
2019-07-16 18:36:17 +02:00
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;
// }
// }
2019-07-16 10:29:30 +02:00
// __ _
// / _|_ _ ___ _ _| |_
// | _| '_/ _ \ ' \ _|
// |_| |_| \___/_||_\__|
2019-07-16 18:36:17 +02:00
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;
}
2019-07-16 10:29:30 +02:00
}
}
2019-07-16 18:36:17 +02: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-descritpion;
}
2019-07-16 10:29:30 +02:00
}
2019-07-16 18:36:17 +02:00
>div:nth-child(2){
grid-column: 2;
2019-07-16 10:29:30 +02:00
}
}
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;
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{}
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;
display: grid;
grid-template-columns: repeat(auto-fill, minmax(50px, 130px));
grid-template-rows: 1fr;
grid-gap: 1em;
2019-07-16 10:29:30 +02:00
justify-content:start;
2019-07-15 18:44:03 +02:00
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;
2019-07-16 10:29:30 +02:00
@extend %part-columned-layout;
2019-07-15 18:44:03 +02:00
.field--name-field-showrooms{
}
.field--name-computed-showrooms-reference{
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;
.taxonomy-term{
position: relative;
width:100%; height:100%;
div.visuel{
width:100%;
padding-bottom: 10em;
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;
padding:1em 0;
background-color:$color-showrooms;
2019-07-16 17:01:18 +02:00
color: #fff;
>*{
// display: inline-block;
font-size: 0.9em;
}
h2,p{
margin:0;
}
}
}
}
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;
.cards-list-home{
position: relative;
2020-02-19 15:30:58 +01:00
$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;
}
2019-07-16 10:29:30 +02:00
ul{
width:100%;
margin:0; padding:0;
display: grid;
2020-02-19 15:30:58 +01:00
grid-template-columns: repeat(auto-fill, minmax(80px, $column_width*2));
2019-07-16 10:29:30 +02:00
// grid-template-rows: 1fr;
grid-gap: 1em;
justify-content:start;
li{
position: relative;
list-style: none;
margin:0; padding:0;
2020-02-19 15:30:58 +01:00
padding-top: 67.8%;
2019-07-16 10:29:30 +02:00
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;
}
}
}
}
}
2019-07-15 18:44:03 +02:00
}
&.home-pricing{
2019-07-16 10:29:30 +02:00
@extend %part-centered-layout;
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;
}
&>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;
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;
}
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;
line-height: 1;
// margin-bottom: 0.1em;
}
span.ref{
font-size: 0.693em;
font-weight: 300;
line-height: 1;
}
}
2020-11-24 14:07:10 +01:00
nav.tools{
position: absolute;
top: 0;
right: 0;
z-index: 21;
width: 1em;
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;
box-sizing: content-box;
padding: 0.3em;
background-color: #fff;
box-shadow: -2px 3px 4px rgba(0, 0, 0, 0.2);
}
}
.tool.flags{
span.flag{
cursor: pointer;
font-size: 0.756em;
color: #bbb;
transition: color 0.3s ease-in-out;
&:hover, &.isActive{
color:#1a1a1a;
}
}
}
}
section.images{
position: relative;
2019-06-11 18:04:46 +02:00
&, *{width: 100%; height:100%;}
figure{
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
}
img{
// width: 100%; height:100%;
&.blank{
position: absolute;
top:0; left:0;
z-index: 20;
}
}
}
}
}
2019-07-25 21:23:23 +02:00
// ___ _ _ _
// | _ ) |__ _| |__| |__ _
// | _ \ / _` | '_ \ / _` |
// |___/_\__,_|_.__/_\__,_|
#blabla{
}
#main-content > article.article{
2020-02-20 10:36:49 +01:00
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;
}
}
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
}
}
// 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{
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%;
}
}
}
}