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{
}

.red{
  background-color: red;
  color:white;

}

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:-1em;
        overflow: hidden;
        padding-bottom: 0.5em;
        background-color: white;
        >li{
          padding:0 1em;
          // margin-right: -1em;
          transition: height 0.3s ease-in-out;
          height:0;
          overflow: hidden;
        }
      }
      &:hover{
        >ul>li{
          height:1em;
        }
      }

    }
    li>span,li>a{
      font-size: 0.9em;
      color: $bleuroi;
      text-transform: uppercase;

    }
  }
}
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;
        @include fontsans;

        h1{
          color: $bleuroi;
        }
        p{
          font-size: 0.882em;
          line-height: 1.2;
        }
        span{
          color:$rouge;
          font-size:0.693em;
        }
      }
      // 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;
      }
    }
  }

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

    article.item{
      margin: 2em 0 0;
      header h1{
        font-size: 1.512em;
        color: $bleuroi;
        font-weight: 400;
        margin:0;
      }
    }
    ul.item-list{
      li{
        margin: 0 0 2em 0;
        header{
          h2{
            margin:0.4em 0 0.2em;
            @include title1blue;
          }
          h3{
            margin:0.2em 0;
            @include fontsans;
            font-size: 0.756em;
            font-weight: 500;
          }
          margin-bottom: 0.3em;
        }
        section.editions{
          div.editions{
            ol{
              padding:0;
              li{
                margin:0.7em 1em;
              }
            }
          }
        }
        h4{
          margin:0.1em 0;
          font-weight: 300;
          @include fontsans;
          font-size: 0.756em;
          &.texts-quantity{
            color: $rouge;
            // &:after{
            //   content: ">>";
            //   margin:0 0 0 0.5em;
            // }
          }
        }

        ul {
          li{
            margin:0 0 0 1em;
            h3{
              margin: 0.5em 0;
              font-weight: 400;
              font-size: 1em;
            }
          }
        }
      }
    }
  }

  #corpus{
  }

  .index{
  }

  .index-item{
    header{
      h1{
        @include title2black;
      }
    }
    .occurences{
      >ul{
        >li{
          padding:0 0 2em 0;
          h3{
            @include title1black;
            padding:0 0 1em 0;
          }
          >ul{
            >li{
              padding:0 0 1em 0;
              section{
                h4{
                  @include title2black;
                  display: inline-block;
                }
                span.open-close{
                  cursor: pointer;
                  display: inline-block;
                  svg{
                    transform: rotate(-90deg) scale(0.8);
                    transition: transform 0.3s ease-in-out;
                    path{
                      fill:$bleuroi;
                    }
                  }
                }
                div.text{
                  max-height: 0;
                  transition: max-height 0.3s ease-in-out;
                  overflow: hidden;
                  box-sizing: content-box;
                  p, h1, h2, h3, h4, h5, h6{
                    margin: 0.5em 0 0 0;
                  }
                }
                a.lire-plus{
                  color: $bleuroi;
                  opacity: 0;
                  display: inline-block;
                  height: 0;
                  overflow: hidden;
                  transition: height, opacity 0.3s ease-in-out;
                }
                &.opened{
                  span.open-close{
                    cursor: pointer;
                    display: inline-block;
                    svg{
                      transform: scale(0.8) rotate(0);
                    }
                  }
                  div.text{
                    max-height:100px;
                  }
                  a.lire-plus{
                    opacity: 1;
                    height:1em;
                  }
                }
              }
            }
          }
        }
      }
    }
  }

  #edition{
    header{
      position: relative;
      h1{
        @include title1black;
      }
      aside.index-tooltip{
        z-index:10;
        margin-top: -1.75em;
        position:absolute;
        text-align: right;
        right: 2em;
        h1 {
          @include title2black;
          margin:0 0 0.5em 0;
        }
        p{
          margin:0 0 0.5em 0;
        }
        time{
          font-weight: 600;
        }
      }
    }

    >section{
      div#text{
        .infinite-loading-container{
          height:0;
          overflow: hidden;
        }
        div.tei{
          border-left: 1px dotted $grisclair;
          padding-left: 1em;
          &.active{
            border-left: 1px dotted $grisfonce;
          }

          >h1{@include title1blue;}
          span.placeName,
          span.objectName,
          span.persName{
            font-weight: 600;
          }
        }
      }
    }

    >nav{
      >section{
        padding:0 0 0 1.5em;
        >ul{
          ul{
            li{
              ul{
                overflow: hidden;
                max-height: 1000px;
                transition: max-height 0.5s ease-in-out;
                // transform: scaleY(1);
                // transform-origin: top;
                // transition: transform 0.3s ease-in-out;
                &:not(.opened){
                  // height:0;
                  max-height:0;
                  transition: max-height 0.5s cubic-bezier(0, 1.05, 0, 1);
                  // transform: scaleY(0);
                }
                // &.opened{
                //   border: 1px solid red;
                // }
                // padding-left: 1em;
                border-left: 0.5px solid $grisclair;
                // min-height: 1em;
                margin-bottom: 0em;
                li{
                  // min-height: 1em;
                  // border-left: 1px solid red;
                  padding:0 0 0.2em 1em;
                }
              }
            }
          }
          .toc-title{
            color: $gris;
            font-weight: 400;
            margin:0;
            &.active,
            &:hover{
              color:$grisfonce;
              font-weight: 600;
            }
            &.loaded{
              color:$grisfonce;
            }
          }
          h2.toc-title{font-size: 0.882em;}
          h3.toc-title{font-size: 0.882em;}
          h4.toc-title{font-size: 0.882em;}
          h5.toc-title{font-size: 0.882em;}
          h6.toc-title{font-size: 0.882em;}
          span.toc-title{font-size: 0.882em;}
        }
      }

    }
  }

  #text{
    .tei{
      h1{
        font-size: 1.512em;
      }
      p{
        margin-top: 0;
        font-size: 1.134em;
        line-height: 1.5;
        span.persName,
        span.placeName,
        span.objectName{
          font-weight: 600;
        }
        a{
          font-weight: 600;
          &.active-link{
            color: $rouge;
            // text-decoration: underline;
          }
          sup.mdi{
            font-size: 0.630em;
            vertical-align: super;
            // line-height: 0.1;
            padding: 0 0.2em;
          }
        }
      }
    }
  }


}
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;
        fieldset{
          padding:0em 1em;
          border: none;
          &:not(:first-of-type){
            border-left: 1px solid $grisclair;
          }
        }
        fieldset.search{
          >div{
            display: inline-block;
            width:80%;
            vertical-align: middle;
          }
          label[for="keys"]{
            display: none;
          }
          input[type="text"]{
            padding:0.3em;
            margin:0 0 0.3em 0;
            box-sizing: border-box;
            font-size: 0.756em;
            line-height: 1;
            width:100%;
            height:1.2em;
            border:none;
            border-radius: 2px;
          }
          span.mdi{
            display: inline-block;
            margin:0 0 0 0.5em;
            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;
  }
  .v-select{
    padding:0;
    div[role="combobox"]{
      background-color: #fff;
      padding:0;
      border-radius: 2px;
      border: none;
    }
    input[type="search"]{
      margin:0;
      padding:0;
    }
    .vs__search{
      &, &:focus{
        font-size: 0.756em;
        line-height: 1;
        height:1.2em;
        border:none;
        box-sizing: border-box;
      }
    }
    .vs__actions{
      padding:1px 3px;
      svg[role="presentation"]{
        transform: scale(0.8);
        path{
          fill: $bleuroi;
        }
      }
    }
    .vs__selected{
      margin:0;
      padding:0;
      line-height:1;
      font-size: 0.756em;
    }
    // border-radius: 2px;
    // border: none;
  }
  fieldset.filters .v-select{
    .vs__selected{
      background-color: #fff;
      border:none;
      padding:0.3em 0.5em;
      button{
        svg{
          transform: scale(0.8);
          path{
            fill: $bleuroi;
          }
        }
      }
    }
  }
}

// vue-select
ul[role="listbox"]{
  @include fontsans;
  padding:0;
  margin:0;
  border:none;
  li{
    padding:0.3em;
    margin:0;
    font-size: 0.756em;
    line-height: 1;
  }
}

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

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;
}