gdp_vuewp/assets/css/app.scss

@import './base/reset';
@import './base/variables';
@import './base/colors';
@import './base/grid-flex';
@import './base/layout';
@import './base/fonts';
@import './base/transitions';


body{
  color: #1a1a1a;
}

#root{
}

header[role="banner"]{
  div.wrapper{
    display: grid;
    grid-template-columns: 1fr 1fr;
  }
  h1.site-title{
    grid-column: 1;
    margin:0;
    font-size: 1em;
  }
  nav#header-menu{
    grid-column: 2;
    text-align: right;
    >ul>li{
      display: inline-block;
      margin-right: 1em;
      position: relative;
      >ul{
        position: absolute;
        top:1em; right:0;
        overflow: hidden;
        >li{
          transition: height 0.3s ease-in-out;
          height:0.2px;
        }
      }
      &:hover{
        >ul>li{
          height:1em;
        }
      }

    }
    li>span,li>a{
      font-size: 0.9em;
    }
  }
}
section[role="main-content"]{
  #home{
    header{
      text-align: center;
      h1{
        color: $bleuroi;
        font-size: 8em;
        font-weight: 300;
        margin:15vh 0 0;
      }
      h2{
        color: $or;
        font-size: 2em;
        font-weight: 300;
        margin:1em 0 0;
        text-transform: uppercase;
        letter-spacing: 0.2em;
        sup{
          // line-height: 5em;
          vertical-align:text-top;
          font-size: 0.7em
        }
      }
    }
    $filet_space:8em;
    $decallage: 0.5em;
    section{
      padding-top: $filet_space;
    }
    div.teasers{
      display: flex;
      flex-direction: row;
      flex-wrap: nowrap;
      position: relative;
      padding-right: 0;
      article{
        box-sizing: border-box;
        flex-basis: percentage(2 / ( $default_sum - 6) );
        padding-right: $default_gap;
      }
      // filets decoratif
      &:before, &:after{
        z-index: 0;
        content: "";
        position: absolute;
        opacity: 0.4;
      }
      &:before{
        border:1px solid $or;
        width:calc(100% + #{$filet_space*2 + $decallage*2});
        left:- $filet_space - $default_gap/2 -$decallage;
        height:calc(100% + #{$filet_space});
        top:- $filet_space / 2;
      }
      &:after{
        border:1px solid $rouge;
        width:calc(100% + #{$filet_space*2});
        left:- $filet_space - $default_gap/2;
        height:calc(100% + #{$filet_space + $decallage*2});
        top:- $filet_space / 2 - $decallage;
      }
    }
  }

  #corpus, .index{
    >header>h1{
      font-family: "noto_sans";
      color: $rouge;
      font-weight: 400;
    }

    article.item{
      margin: 2em 0 0;
      header h1{
        font-size: 1.323em;
        color: $bleuroi;
        font-weight: 400;
        margin:0;
      }
    }
  }

  #corpus{
  }

  .index{
  }
}
footer[role="tools"]{
  $list-item-h: 5.3em;
  #history{
    z-index: 8;
    background-color: $or;
    padding:1.2em $side-padding;
    max-height: $list-item-h;
    @include accordeon-transition($list-item-h);
    >header{

    }
    .history-list{
      overflow-x: hidden;
      .wrapper{
        height:100%;
        // hidding the scrollbar
        overflow-y: auto;
        width:calc(100% + 1em);
        padding-right: 1em;
        >ul{
          padding:0;
          display: flex;
          flex-direction: row;
          flex-wrap: wrap;
        }
      }
      li.item{
        box-sizing: border-box;
        // we are only on 10 colls as 2 are occupied by sides
        flex-basis: percentage(2/($default_sum - 2));
        height: $list-item-h;
        overflow: hidden;
        padding-bottom: 1em;
        padding-right: $default_gap;
        article{
          max-height: 100%;
          overflow: hidden;
        }
      }
      article.history.item{
        header{
          h1{
            font-size: 0.882em;
            font-weight: normal;
            margin:0 0 0.5em 0;
          }
        }
        .extract{
          p{
            font-size: 0.882em;
            margin:0;
          }
          code{
            background-color: lighten(desaturate($rouge,20%), 20%);
          }
        }
      }
    }
  }
  #results{
    z-index: 9;
    background-color: $gris;
    padding:1.2em $side-padding;
    max-height: $list-item-h * 3;
    @include accordeon-transition($list-item-h * 3);
    >header{
      .search-keys{
        font-size: 0.756em;
        font-weight: 500;
      }
      .results-count{
        font-size: 0.756em;
      }
    }
    .results-list{
      overflow-x: hidden;
      .wrapper{
        height:100%;
        // hidding the scrollbar
        overflow-y: auto;
        width:calc(100% + 1em);
        padding-right: 1em;
        >ul{
          padding:0;
          display: flex;
          flex-direction: row;
          flex-wrap: wrap;
        }
      }
      li.result{
        box-sizing: border-box;
        // we are only on 10 colls as 2 are occupied by sides
        flex-basis: percentage(2/($default_sum - 2));
        height: $list-item-h;
        overflow: hidden;
        padding-bottom: 1em;
        padding-right: $default_gap;
        article{
          max-height: 100%;
          overflow: hidden;
        }
      }
      article.result.item{
        header{
          h1{
            font-size: 0.882em;
            font-weight: normal;
            margin:0 0 0.5em 0;
          }
        }
        .extract{
          p{
            font-size: 0.882em;
            margin:0;
          }
          code{
            background-color: lighten(desaturate($rouge,20%), 20%);
          }
        }
      }
    }
  }
  #footer-bottom{
    z-index: 10;
    padding:0 $side-padding;
    background-color: $bleuroi;
    &>*{
      // disable grid gap
      padding-right: 0;
    }
    #footer-tabs{
      ul{
        padding:0; margin:0;
        display: flex;
        flex-direction: column;
        li{
          flex: 1 1 auto;
          .wrapper{
            box-sizing: border-box;
            line-height: 0.6em;
            height:2em;
            width: calc(100% + $side-padding);
            margin-left:-$side-padding;
            padding:0.3em 0.5em 0.3em $side-padding;
          }
          &.history .wrapper{
            background-color: $or;
          }
          &.results .wrapper{
            background-color: $gris;
          }
          span{
            font-size: 0.693em;
            font-weight: 400;
            text-transform: uppercase;
            cursor: pointer;
            @include fade-transition;
          }
        }
      }
    }
    #search{
      color: #fff;
      background-color: $bleuroi;
      form{
        padding: 0.7em;
        label[for="keys"]{
          display: none;
        }
        input[type="text"]{
          padding:0.3em;
          font-size: 0.756em;
          line-height: 1;
          height:1em;
          border:none;
          border-radius: 2px;
        }
        // input[type="submit"]{
        //   #submit-search{
        //     border:none;
        //
        //   }
        // }
        span.mdi{
          display: inline-block;
          font-size: 1.2em;
          line-height:1.1;
          vertical-align:middle;
          width:1.2em; height:1.2em;
          border-radius: 0.6em;
          background-color: #fff;
          color: $bleuroi;
          text-align: center;
          font-weight: 700;
          cursor: pointer;
        }
      }
    }
  }
  h2{
    margin:0;
    font-size: 0.756em;
    font-weight: 400;
    text-transform: uppercase;
    padding:0;
  }
}


//  ___
// |_ _|__ ___ _ _  ___
//  | |/ _/ _ \ ' \(_-<
// |___\__\___/_||_/__/

span.mdi-close{
  cursor: pointer;
}

@keyframes spin {
    from {
        transform:rotate(0deg);
    }
    to {
        transform:rotate(360deg);
    }
}

span.mdi-loading{
  animation-name: spin;
  animation-duration: 2000ms;
  animation-iteration-count: infinite;
  animation-timing-function: linear;
}