enfrancais-app/src/assets/scss/app.scss

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

/* 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;
        }
      }
      //
      // &:focus-within
      // &:hover,
      &.opened{
        >ul>li{
          height:1em;
        }
      }
      &.has-submenu{
        cursor: pointer;
      }
    }
    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: 8em;
    }
    @mixin teasersfilet($filet_space, $decallage){
      &: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;
      }

    }
    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
      @include teasersfilet(8em, 0.5em);
      }
    // responsive
    @media only screen and (max-width: $small-bp) {
      header{
        h1{
          font-size: 5em;
          margin:7vh 0 0;
        }
        h2{
          font-size: 1em;
        }
      }
      section{
        padding-top: 4em;
      }
      div.teasers{
        flex-direction: column;
        // filets decoratif
        @include teasersfilet(4em, 0.5em);
      }
    }
  }

  #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 title1black;
        margin:0 0 0.3em;
      }
      p{
        margin: 0 0 0.5em 0;
      }
      h3{
        @include title2black
        margin:0;
      }
      .authors{
        a{
          @include title2black;
          color: $bleuroi;
        }
        margin:0 0 0.3em;
      }
      .mdi{
        color: $bleuroilight;
        font-size: 0.7em;
      }
    }
    .occurences{
      >ul{
        >li{
          padding:0 0 2em 0;
          h3{
            @include title2black;
            padding:0 0 0.5em 0;
            color: $bleuroi;
          }
          >ul{
            >li{
              padding:0 0 0.5em 0;
              section{
                h4{
                  @include title3black;
                  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;
                  }
                }
              }
            }
          }
        }
      }
    }
    nav{
      h3{
        @include title2black;
        margin:0 0 0.5em;
      }
      h4{
        @include title3black;
        margin:0 0 0.5em;
        color: $bleuroi;
      }
      .attested-forms{
        ul{
          >li{
            margin: 0 0 1em 0;
            li{
              margin: 0 0 0.5em 0;
            }
          }
        }
        a{
          @include title4black;
          color: $grisfonce;
          font-weight: 400;
        }
      }
    }
  }

  #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;
        }
        @media only screen and (max-width: $small-bp) {
          background-color: #fff;
          padding: 1em;
          box-shadow: 0 0 10px $gris;
          *{
            pointer-events: none;
          }
        }
      }
    }

    $pagenum_w:1em;
    >section{
      padding-right: 0;
      >.wrapper{
        padding-right: $pagenum_w*2;
      }
      div#text{
        // .infinite-loading-container{
        //   height:0;
        //   overflow: hidden;
        // }
        div.tei{
          position: relative;
          width: calc(100% - #{$pagenum_w});

          // @media only screen and (min-width: $small-bp + 1) {
          padding-right: $pagenum_w;
          border-left: 1px dotted $grisclair;
          padding-left: 1em;
          &.active{
            border-left: 1px dotted $bleuroi;
          }
          // }
          >h1{@include teititle1blue;}
          span.placeName,
          span.objectName,
          span.persName{
            font-weight: 600;
          }

          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="pageNum"]{
            font-size: 16px;
            position: relative;
            float:right;
            width: $pagenum_w; height:0;
            // margin-left:calc(100% - #{$pagenum_w * 2});
            // margin-left: 100%;
            margin-right: - $pagenum_w;
            &:after{
              content:attr(data-num);
              border-top: 1px solid $bleuroilight;
              position: absolute;
              right:0;
              font-size: 0.630em;
              width: $pagenum_w*2; height: $pagenum_w;
              line-height: $pagenum_w;
              border-right: 1px solid $bleuroilight;
              color: $bleuroi;
              text-indent: $pagenum_w * 2.5;
            }
          }

          a.text-item-link{
            // float: left;
            position: absolute;
            top:0; left:0;
            // display: block;
            // width:1em; height:1em;
            font-size: 0.630em;
            .mdi{
              color: $bleuroi;
              pointer-events: none;
            }
          }
          // front page
          header{
            padding-top: 1em;
            h1{
              @include teititlefrontblue;
              .initial{
                text-transform: uppercase;
                font-size: 1.3em;
                line-height: 1.3em;
              }
            }
          }
          .byline{
            text-align: center;
            font-style: italic;
            padding-bottom: 1em;
          }
          .docImprint{
            text-align: center;
            // padding-bottom: 1em;
          }
          .imprimatur{
            text-align: center;
            font-style: italic;
            padding-bottom: 1em;

          }

          figure{
            // outline: 1px solid red;
            background-color: $grisclair;
            margin:1em 0;
            img{
              width: 100%;
            }
            figcaption{
              @include fontcaption
              padding: 0.5em;
            }
          }
        }
      }
    }

    >nav{
      $pager_h:2em;
      display: flex;
      flex-direction: column;
      span.nav-title{ display:none; }

      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{
            @include title4black;
            &.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:1em 0 0 1.5em;
        select{
          option{
            padding:0;
          }
        }
      }
    }
    // responsive
    @media only screen and (max-width: $small-bp) {
      position: relative;
      >nav{
        $top: 45px;
        z-index: 2;
        position: absolute;
        top:$top;
        right:0;
        background-color: #fff;
        width:percentage(10/$default_sum);
        box-sizing: border-box;
        padding-top: 1em;
        padding-bottom: 1em;
        height:calc(100% - #{$top});

        transform: translateX(100%);
        transition: transform 0.3s ease-in-out;

        span.nav-title{
          display: block;
          position: absolute;
          top:4.5em; left:-1.8em;
          transform: rotateZ(-90deg);
          transform-origin: center;
          @include fontsans;
          font-size: 0.600em;
          cursor: pointer;
          color: $bleuroi;
          svg{
            vertical-align: bottom;
            transform-origin: center;
            transform: scale(0.8) rotate(180deg);
            transition: transform 0.3s ease-in-out;
            path{
              fill: $bleuroi;
            }
          }
        }

        &.opened{
          box-shadow: -3px -3px 5px $grisclair;
          transform: translateX(0);
          span.nav-title{
            svg{
              transform: scale(0.7) rotate(0);
            }
          }
        }

      }
    }
  }

  #text{
    .tei{}}

  #biblio{
    .router-link-active{
      font-weight: 600;
    }
    ul.item-list{
      margin:0;
      padding:0;
      li{
        padding:0;
        margin:0 0 1.5em 0;
        h2{
          margin:0;
          @include title2black;
        }
        p{
          margin:0;
        }
      }
    }
  }
}

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

  @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));
    max-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;
    @media only screen and (max-width: $small-bp) {
      padding:1.2em $side-padding/2;
    }
    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{
        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
      }
    }

    >header, section.results-list{
      transition: opacity 0.2s ease-in-out;
    }
    &.loading {
      >header, section.results-list{
        transition: opacity 0.5s ease-in-out;
        opacity:0.5;
        pointer-events: none;
      }
    }

    // responsive
    @media only screen and (max-width: $small-bp) {
      position: relative;
      >header{
        padding:0 0 1em 0;
        >*{
          display: inline-block;
          margin-right: 1em;
        }
        #sorting{
          width:10em;
        }
      }
      >section.results-list{
        max-height: 15em;
        li.result{
          flex-basis: 33%;
        }
      }
      >nav{
        position: absolute;
        top:1.2em; right:1.2em;
      }
    }
  }
  #footer-bottom{
    z-index: 10;
    padding:0 $side-padding;
    @media only screen and (max-width: $small-bp) {
      padding:0 $side-padding/2;
    }
    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:0em 0.3em;
            margin:0 0 0.3em 0;
            box-sizing: border-box;
            font-size: 0.756em;
            line-height: 1;
            width:100%;
            height:1.4em;
            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;
        }
      }
      form{
        transition: opacity 0.2s ease-in-out;
      }
      &.loading{
        form{
          opacity:0.5;
          transition: opacity 0.5s ease-in-out;
          pointer-events: none;
        }
      }

      // responsive
      @media only screen and (max-width: $small-bp) {
        form{
          fieldset{
            &.search{
              >div{
                display: inline-flex;
                flex-wrap: nowrap;
                width:84%;
                >*{
                  flex-basis: 45%;
                  margin: 0 0.5em 0 0;
                  // box-sizing: content-box;
                  // width:auto!important;
                  &#keys[type="text"]{
                    margin-right:1.5em;
                  }
                }
              }
              span.mdi{
                width:1em; height:1em;
                margin-top: -0.1em;
                margin-left: 0;
              }
            }
            &.filters{
              border-left: none;
              flex-basis: 32%;
              padding: 0.2em 0 1em 1em;
            }
          }
        }
      }
    }
  }
  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;
    -webkit-appearance:textfield;
    -webkit-box-sizing:content-box;
  }
  input::-webkit-search-decoration,
  input::-webkit-search-cancel-button {
      display: none;
  }
  .vs__search{
    &, &:focus{
      font-size: 0.756em;
      line-height: 1;
      height:1.2em;
      border:none;
      box-sizing: border-box;
    }
  }
  .vs__dropdown-toggle{
    input::placeholder{background-color: #fff;}
  }
  .vs__selected-options{
    background-color: #fff;
  }
  .vs__actions{
    padding:1px 3px;
    button.vs__clear{
      line-height: 0.5;
      // height:0;
    }
    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;
}


 //  _                 _ _
 // | |   ___  __ _ __| (_)_ _  __ _
 // | |__/ _ \/ _` / _` | | ' \/ _` |
 // |____\___/\__,_\__,_|_|_||_\__, |
 //                            |___/

span.loading{
  @include fontsans;
  font-size: 0.756em;
  color: $grisfonce;
  animation: pulseloading 4s infinite;
}

@keyframes pulseloading{
  0% {
    opacity: 1;
  }
  50%{
    opacity: 0;
  }
  100% {
    opacity: 1;
  }
}