383 lines
7.1 KiB
SCSS
383 lines
7.1 KiB
SCSS
// @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';
|
|
// $mdi-font-path: "./mdi/fonts";
|
|
// @import './mdi/scss/materialdesignicons.scss';
|
|
@import './base/fonts';
|
|
|
|
|
|
html{
|
|
// background-color: red;
|
|
}
|
|
|
|
|
|
aside.messages{
|
|
border:none;
|
|
}
|
|
|
|
|
|
// _ _ _
|
|
// | || |___ __ _ __| |___ _ _
|
|
// | __ / -_) _` / _` / -_) '_|
|
|
// |_||_\___\__,_\__,_\___|_|
|
|
|
|
header[role="banner"]{
|
|
padding:0.2em 0 0 0;
|
|
#block-sitebranding{
|
|
h1{
|
|
margin:0;
|
|
line-height: 1;
|
|
}
|
|
}
|
|
|
|
#block-userlogin{
|
|
position: relative;
|
|
width:8em;
|
|
overflow: visible;
|
|
h2{
|
|
margin: 0;
|
|
font-size: 1em;
|
|
font-weight: 400;
|
|
}
|
|
&>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;
|
|
}
|
|
}
|
|
}
|
|
}
|
|
}
|
|
|
|
#block-header{
|
|
margin-right: 1em;
|
|
padding-left: 1em;
|
|
border-left: 1px solid #000;
|
|
ul.menu{
|
|
margin:0;
|
|
li{
|
|
padding:0;
|
|
}
|
|
}
|
|
}
|
|
|
|
#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;
|
|
}
|
|
}
|
|
|
|
|
|
#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;
|
|
// }
|
|
// }
|
|
|
|
|
|
// front
|
|
article.node--type-frontpage{
|
|
.node__content{
|
|
.field--name-field-what-is-materio,
|
|
.field--name-field-a-database,
|
|
.field--name-field-showrooms,
|
|
.field--name-field-blabla,
|
|
.field--name-field-pricing{
|
|
&:not(:nth-child(1)){
|
|
margin-top: 1em;
|
|
}
|
|
.field__label{
|
|
font-size: 2.2em;
|
|
font-weight: bold;
|
|
}
|
|
}
|
|
|
|
// .field--name-computed-materials-reference,
|
|
.field--name-computed-showrooms-reference,
|
|
.field--name-computed-articles-reference{
|
|
// outline: 1px green solid;
|
|
margin:0; padding:0;
|
|
width: calc(100% + #{$column_goutiere});
|
|
|
|
.field__item{
|
|
display: inline-block;
|
|
vertical-align: top;
|
|
width:210px;
|
|
margin:0 $column_goutiere $column_goutiere 0; padding:0;
|
|
p{
|
|
margin:0;
|
|
}
|
|
}
|
|
}
|
|
}
|
|
}
|
|
|
|
|
|
// ___ _
|
|
// / __|__ _ _ _ __| |___
|
|
// | (__/ _` | '_/ _` (_-<
|
|
// \___\__,_|_| \__,_/__/
|
|
|
|
.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;
|
|
width:$column_width; height:295px;
|
|
box-shadow: 0 0 5px rgba(0,0,0,0.2);
|
|
// focused
|
|
// box-shadow: 0 0 7px rgba(0,0,0,0.9);
|
|
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.8;
|
|
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;
|
|
}
|
|
}
|
|
section.images{
|
|
position: relative;
|
|
&, *{width: 100%; height:100%;}
|
|
figure{
|
|
margin:0;
|
|
position: absolute;
|
|
top:0; left:0;
|
|
// 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;
|
|
}
|
|
}
|
|
}
|
|
}
|
|
}
|