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:14em;
      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;
    }
    &:hover{
      &>section{
        transition-delay: 0s;
        height:12em;
        padding:1em 1em;
        box-shadow: 0 0 10px #ccc;
      }
    }
  }

  #block-languageswitcher{
    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:5em;
      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;
      &.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;
      }
    }

  }

}

aside.messages{
  padding: 0;
}

// content top
#materio-sapi-search-form{
  .form-item, input.button{
    display: inline-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{
      .field__item{
        display: inline-block;
        vertical-align: top;
        max-width:250px;
      }
    }
  }
}