materio-d8/web/themes/custom/materiotheme/assets/styles/main.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;
//   }
// }


//   __             _
//  / _|_ _ ___ _ _| |_
// |  _| '_/ _ \ ' \  _|
// |_| |_| \___/_||_\__|

%part-centered-layout{
  padding:1.5em 0;
  background-color: #fff;
  >div:nth-child(1){
    width:80%;
    margin: 0 auto;
    text-align: center;
    .field__label{
      font-size: 3em;
    }
    .field__item{
      font-size: 0.9em;
      line-height: 1.3;
    }
  }
}

%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{
      font-size: 3em;
      line-height: 0.9
    }
    .field__item{
      font-size: 0.9em;
      line-height: 1.3;
    }
  }
  >div:nth-child(2){
    grid-column: 2;
  }
}

article.node--type-frontpage{
  .node__content{

    &>section{
      &.home-intro{
        @extend %part-centered-layout;
      }
      &.home-database{
        background-color: #69cdcf;
        @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: #50aa3c;
        @extend %part-columned-layout;
        .field--name-field-showrooms{
        }
        .field--name-computed-showrooms-reference{
        }
      }
      &.home-blabla{
        background-color: #9458aa;
        @extend %part-columned-layout;

        .cards-list-home{
          position: relative;
          // max-height: 580px;
          // overflow-y: hidden;
          ul{
            width:100%;
            margin:0; padding:0;
            display: grid;
            grid-template-columns: repeat(auto-fill, minmax(80px, 220px));
            // grid-template-rows: 1fr;
            grid-gap: 1em;
            justify-content:start;
            li{
              position: relative;
              list-style: none;
              margin:0; padding:0;
              padding-top: 140%;
              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;

      }
    }

    .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;
  box-shadow: 0 0 5px rgba(0,0,0,0.2);
  width:$column_width; height:295px;
  // &.card-small{
  //   width:100px; height:140px;
  // }
  // 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;
        }
      }
    }
  }
}