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

/* The emerging W3C standard
that is currently Firefox-only */
* {
  scrollbar-width: thin;
  scrollbar-color: $grisclair rgba(255,255,255,0);
}

/* Works on Chrome/Edge/Safari */
*::-webkit-scrollbar {
  width: 12px;
}
*::-webkit-scrollbar-track {
  background: rgba(255,255,255,0);
}
*::-webkit-scrollbar-thumb {
  background-color: $grisclair;
  border-radius: 20px;
  border: none;
}

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{
      padding-bottom: 0;
      $pager_h:2em;
      section#toc{
        box-sizing: content-box;
        padding:0 0 1em 1.5em;
        height:calc(100% - #{$pager_h});
        overflow-x: hidden;
        overflow-y: auto;
        >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;}
        }
      }
      div#page-nav{
        height:$pager_h;
        overflow: hidden;
        box-sizing: content-box;
        padding:0 1.5em;
        select{
          option{
            padding:0;
          }
        }
      }
    }
  }

  #text{
    .tei{
      width: 93%;
      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;
          }
        }
      }
    }
    // <span role=\"pageBreak\" data-num=\"15\"></span>
    span[role="pageBreak"]{
      display: inline-block;
      border-left: 1px solid $bleuroi;
      height:1.4em;
      // word-spacing: 0;
      margin: 0 0.3em;
      line-height: 3;
      position: relative;
      vertical-align: bottom;
      &:after, &:before{
        content: '';
        display: block;
        width:0.5em;
        position: absolute;
      }
      &:after{
        top:0;
        left:0;
        border-top: 1px solid $bleuroi;
      }
      &:before{
        bottom:0;
        right:0;
        border-bottom: 1px solid $bleuroi;
      }
    }
    span[role="pageNum"]{
      // display:inline;
      position: relative;
      float:right;
      // position: sticky;
      $w:0.5em;
      width:$w; height:0;
      margin-left:calc(100% - (#{$w} * 0.5));
      // &:before
      &:after{
        // display: block;
        position: absolute;
        font-size: 0.630em;
        width:$w; height:$w*2;
        line-height: $w*1.7;
        padding-left: 1em;
        border-right: 1px solid $bleuroilight;
        color: $bleuroi;
        text-indent: $w + 0.5em;
      }
      // &:before{
      //   content:attr(data-num-prev);
      //   border-bottom: 1px solid $bleuroilight;
      //   bottom: 0.1em;
      // }
      &:after{
        content:attr(data-num);
        border-top: 1px solid $bleuroilight;
        // bottom:1.3em;
      }
    }
  }


}

footer[role="tools"]{
  $list-item-h: 5em;

  @mixin resultItem{
    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.item{
        h1{
          @include title3black;
          font-weight: 600;
          max-width: 95%;
        }
        h2{
          @include title3black;
          text-transform: none;
        }
        span{
          font-size: 0.882em;
        }
      // .preview{
      //   font-size: 0.882em;
      //   margin:0;
      //   code{
      //     @include fontserif;
      //     background-color: lighten(desaturate($rouge,20%), 20%);
      //     padding:0 0.2em;
      //   }
      // }
    }

  }

  #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{
        @include resultItem;
      }
    }
  }
  #results{
    z-index: 9;
    background-color: $gris;
    padding:1.2em $side-padding;
    max-height: $list-item-h * 5;
    @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{
        position:relative;
        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{
        @include resultItem;
      }
      .infinite-loading-container{
        // TODO: how to center the loading
      }
    }
  }
  #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;
        // display: flex;
        // flex-direction: row;
        // flex-wrap: wrap;
        fieldset{
          padding:0.7em 1em;
          border: none;
          box-sizing:border-box;
          // width correction as row is not the same width as others in the page
          // flex-basis: percentage(2/($default_sum - 1));
          flex-basis: 17.667%;
          // flex-basis: percentage(2 / 11);
          &:not(:first-of-type){
            border-left: 1px solid $grisclair;
          }
        }
        fieldset.search{
          display: inline-flex;
          >div{
            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;
          }
        }
      }

      fieldset.filters{
        .vs__actions{
          background-color: $grisclair;
          align-items:baseline;
          padding-top:0.2em;
        }
      }
    }
  }
  h2{
    margin:0;
    font-size: 0.756em;
    font-weight: 400;
    text-transform: uppercase;
    padding:0;
  }
}

// vue-select
.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.2em 0;
    line-height:1;
    font-size: 0.756em;
    background-color: #fff;
    border:none;
    align-items: middle;
    box-sizing: content-box;
    display: inline-block;
    width: calc(100% - 12px);
    // &>*:not(button){
    //   display: inline-block;
    //   width:70%;
    // }
    button{
      svg{
        transform: scale(0.8);
        path{
          fill: $bleuroi;
        }
      }
      &.vs__deselect{
        line-height: 0;
      }
    }

  }

  // border-radius: 2px;
  // border: none;
}

ul[role="listbox"]{
  @include fontsans;
  padding:0;
  margin:0;
  border:none;
  position: relative;
  li{
    box-sizing: content-box;
    padding:0.3em;
    margin:0;
    font-size: 0.756em;
    line-height: 1;
    white-space: normal;
    position: relative;
    *{
      max-width: 100%;
    }
  }
}

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

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