materio-d8/web/themes/custom/materiotheme/assets/styles/main.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
  #header-bottom{
    // disable the default wrapper behaviour
    &:after{content: none;}
    // apply flex for normal layout
    display: flex;
    flex-direction: row;
    justify-content: space-between;
    #block-pagetitle{}
    #block-materiosapisearchblock{
      align-self: flex-end;
    }
    @include col-mediaquery-max(3){
      flex-direction: column-reverse;
      // justify-content: flex-start;
      #block-pagetitle{
        width: max-content;
      }
      #block-materiosapisearchblock{}
    }

  }
  #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 &,
      body.path-thematique & {
        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;
    }
  }

  >h2{
    display: none;
  }

  .node__content{

    &>section{
      &.home-intro{
        @extend %part-centered-layout;
      }
      &.home-database{
        background-color: $color-base;
        @extend %part-columned-layout;
        .field--name-field-a-database{
          a.btn{
            background-color: #fff;
            color: $color-base;
          }
        }
        .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{
          a.btn{
            background-color: #fff;
            color: $color-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;
          }
        }
      }
    }
  }
}


//  _____ _                   _   _
// |_   _| |_  ___ _ __  __ _| |_(_)__ _ _  _ ___
//   | | | ' \/ -_) '  \/ _` |  _| / _` | || / -_)
//   |_| |_||_\___|_|_|_\__,_|\__|_\__, |\_,_\___|
//                                    |_|
#main-content > article.thematique{
  div.cols{
    display: flex;
    flex-direction: row;
    flex-wrap: nowrap;
    // @media only screen and (max-width: $small-bp) {
    @include col-mediaquery-max(3){
      flex-wrap: wrap;
    }
    // }
    div.col-left{
      padding: 0 $column_goutiere $column_goutiere 0;
      flex: 0 0 $column_width * 2 + $column_goutiere;
    }
    div.col-right{}
  }
  div.col-left section.body{
    background-color: $color-base;
    padding: 0.5em 1em 1em;
  }
  aside.linked-materials{
    ul{
      width:calc(100% + #{$column_goutiere});
      li{
        display: inline-block;
        vertical-align: top;
        width:$column_width;
        margin:0 $column_goutiere $column_goutiere 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;
    }
  }

}


 //  ___ _      _    _
 // | _ ) |__ _| |__| |__ _
 // | _ \ / _` | '_ \ / _` |
 // |___/_\__,_|_.__/_\__,_|
#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 $column_goutiere 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%;
      }
    }
  }

}