@import './base/reset'; @import './base/variables'; @import './base/colors'; @import './base/grid-flex'; @import './base/transitions'; @import './base/layout'; @import './base/fonts'; // your-app.scss // @import '~@sweetalert2/themes/dark/dark.scss'; /* 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; // background-image: url('/static/img/grille-ligne-de-base.png'); // background-repeat: repeat; } #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){ z-index: 1; &:before, &:after{ z-index: 0; content: ""; position: absolute; opacity: 0.4; pointer-events: none; } &: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>.wrapper{ 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; } a.readmore span{ color:$rouge; font-size:0.693em; } } // filets decoratif @include teasersfilet(8em, 0.5em); } // responsive @media only screen and (max-width: $small-bp), (orientation: portrait) { 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{ @include titleSansRed; margin: 0; } } article.item{ // margin: 2em 0 0; header{ margin:0; h1{ margin:0; span.title{ @include title1black; color: $bleuroi; } span.quantity{ @include title4black; } } } } &:not(#list-corpus){ ul.item-list{ li{ margin-bottom: $base-line; max-height: $base-line * 3; opacity: 1; transition: all 0.3s ease-in-out; &.hidden { // display: none; max-height: 0.001px; opacity: 0; margin-bottom: 0.001px; } } } } ul.item-list{ li{ // margin: 0 0 2em 0; margin-bottom: $base-line; header{ h2{ @include title1blue; // margin:0.4em 0 0.2em; margin-bottom: $base-line / 2; } h3{ margin:0; @include fontsans; font-size: 0.756em; font-weight: 500; line-height: $base-line / 2; } section.notice{ @include fontsans; font-size: 0.756em; font-weight: 300; line-height: $base-line / 2; } margin-bottom: $base-line / 2; } h4{ margin:0; font-weight: 300; @include fontsans; font-size: 0.756em; line-height: $base-line / 2; &.texts-quantity{ color: $rouge; margin-bottom: $base-line / 4; } } section.editions{ div.editions{ ol{ padding:0; li{ margin:0.7em 1em; } } } } section.texts{ ul.texts-list{ // padding: 0 0 0 1em; li{ margin-bottom: $base-line / 2; } h3{ @include title2black; // margin: 0.7em 0 0.3em; line-height: $base-line / 2; } p{ font-weight: 300; @include fontsans; font-size: 0.756em; margin: 0; line-height: $base-line / 2; } } } ul { li{ // margin:0 0 0 1em; h3{ margin: 0.5em 0; font-weight: 400; font-size: 1em; } } } } } .abc{ ul{ li{ opacity: 1; transition: opacity 0.3s ease-in-out; padding: 3px; &.inactive{ opacity: 0.4; } span.tout, span.letter{ @include fontcaption; font-variant: small-caps; font-size: 1em; cursor: pointer; // line-height: $base-line / 2; border: 1px solid $grisclair; border-radius: 3px; padding: 0.3em; display: inline-block; text-align: center; } &:not(:first-of-type) span.letter{ width: 1.1em; height: 1.1em; } span.quantity{ font-size: 0.765em; } } } } } #corpus{ } .index{ } .index-item{ header{ h1{ @include title1black; margin:0 0 0.3em; } section{ margin-bottom: 1em; h3{ @include title2black; margin:0; font-weight: 600; } } p{ margin: 0 0 0.5em 0; } .authors{ a{ @include title2black; color: $bleuroi; } margin:0 0 0.3em; } .mdi{ color: $bleuroilight; font-size: 0.7em; } .attested-forms{ ul{ // >li{ // margin: 0 0 1em 0; // li{ // margin: 0 0 0.5em 0; // } // } } a{ @include title4grey; color: $grisfonce; font-weight: 400; } } } .tabs{ border-bottom: 1px solid $bleuroilight; margin-bottom: $base-line / 2; .tab{ cursor: pointer; border-radius: 5px 5px 0 0; z-index: 10; display: inline-block; margin-bottom: -2px; padding: 0.3em 0.5em; border: 1px solid $bleuroilight; &.active{ border-bottom: 2px solid white; } } } .occurences{ >ul{ >li{ padding:0 0 $base-line / 2 0; h3{ @include title1black; padding:0 0 $base-line / 2 0; color: $bleuroi; } >ul{ >li{ // padding:0 0 0.5em 0; section{ h4{ // @include title3black; @include title4grey; color: $grisfonce; font-weight: 400; display: inline-block; a{ span.form{ font-style: italic; } } } // ? c'est quoi ça ? // 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; // } // } } } } } } } .attested-forms-occurences{ >ul{ >li{ margin: 0 0 1em 0; h3{ @include title1black; padding:0 0 0 0; } li{ // margin: 0 0 0.5em 0; h4{ // @include title3black; @include title4grey; color: $grisfonce; font-weight: 400; display: inline-block; a{ span.edition{ font-style: italic; } } } } } } } nav{ h3{ @include title2black; margin:0 0 0.5em; } h4{ @include title3black; margin:0 0 0.5em; color: $bleuroi; } } } #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), (orientation: portrait) { 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*3; // outline: orange solid thin; } div#text{ // .infinite-loading-container{ // height:0; // overflow: hidden; // } .text-wrapper{ // padding-left: 1em; position: relative; } .textrefcopylink{ display: block; position: absolute; z-index: 99; span.mdi-open-in-new { position: relative; z-index: 10; margin-left: 1px; } .popup{ position: absolute; top:0; left: 1px; // width: 15em; background-color: #fff; border-radius: 3px; padding: 1em 1em 1em 1.5em; box-shadow: 2px 2px 5px rgba(0,0,0,0.2); display: none; opacity: 0.1; // outline: 1px solid blue; transition: opacity 2s ease-in-out; button.copy-btn{ display: block; padding: 0.5em 0.2em; @include fontcaption; white-space: nowrap; border: none; background: none; cursor: pointer; } } &:hover .popup{ display: block; opacity: 1; transition: opacity 2s ease-in-out; } } div.tei{ position: relative; width: calc(100% - #{$pagenum_w}); // DEBUG color:chartreuse; &>*{ color: #1A1A1A;} // @media only screen and (min-width: $small-bp + 1) { padding-right: $pagenum_w; border-left: 1px dotted $grisclair; padding-left: 1em; margin-left:1.2em; overflow: visible; &.active{ border-left: 1px dotted $bleuroi; } // } // front page header{ padding-top: $base-line; h1{ @include teititlefrontblue; .initial{ display: inline-block; text-transform: uppercase; font-size: 1.3em; line-height: $base-line*2; margin: $base-line/2 0; } margin-bottom: $base-line; } } span.metamark.tailpiece, span.metamark.simpleLine{ display: block; border-top: 1px solid $gris; margin: $base-line / 2 auto; } .byline{ text-align: center; font-style: italic; padding-bottom: 1em; } .docImprint{ text-align: center; // padding-bottom: 1em; .pubPlace{ display: block; } .publisher{ display: block; } .docDate{ display: block; margin-top: $base-line / 2; } } .imprimatur{ text-align: center; font-style: italic; padding-bottom: $base-line; } >h1{ @include teititle1blue; } h1{ font-size: 1.512em; line-height: $base-line; } p{ margin-top: 0; font-size: 1.134em; line-height: $base-line; margin-bottom: $base-line / 2; span.no-wrap{ white-space: nowrap; } span.persName, span.placeName, span.objectName{ font-weight: 500; } a{ font-weight: 500; &.active-link{ // color: $rouge; // text-decoration: underline; // line-height: $base-line/2; } // sup.mdi{ // font-size: 0.630em; // vertical-align: super; // // line-height: 0.1; // padding: 0 0.2em; // } } } blockquote{ padding: 0 1em; } ul, ol{ padding: 0 0 0 2em; li{ list-style: disc; } } span.mdi.index-item-icon{ font-size: 14px; vertical-align: super; } // span[role="pageBreak"]{ // display: block; // height:1.5em; // } span.simpleLine + span[role="pageBreak"]{ height:0em; margin-top: -1em; } span.metamark.typographicalPiece + span[role="pageBreak"]{ height:0em; } span.metamark.typographicalPiece{ display: block; height: 1.5em; } span.metamark.typographicalPiece + span.metamark.typographicalPiece{ display: none; } span[role="pageNum"]{ font-size: 16px; position: relative; float:right; width: $pagenum_w; height:$base-line/4; border-bottom: 1px solid $bleuroilight; border-right: 1px solid $bleuroilight; // outline: solid red thin; // margin-left:calc(100% - #{$pagenum_w * 2}); // margin-left: 100%; margin-right: - $pagenum_w * 1.5; &:before{ // outline: solid green thin; content:attr(data-num); font-size: 0.630em; line-height: $base-line/3; position: absolute; right: 0; top:$base-line/2; color: $bleuroi; // top:0; // width: $pagenum_w*2; height: $pagenum_w; // border-top: 1px solid $bleuroilight; // border-right: 1px solid $bleuroilight; // 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; } } figure{ // outline: 1px solid red; background-color: $grisclair; margin:1em 0; img{ width: 100%; } figcaption{ @include fontcaption; padding: 0.5em; } } ul{ line-height: $base-line; margin-bottom: $base-line/2; } blockquote{ margin: $base-line/2 1em; line-height: $base-line; p{ margin: 0; } } } } } >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; line-height: $base-line / 2; // section.tocitem{ // position: relative; // &:after{ // display: block; // position:absolute; // top:0; right:0; // color: red; // content: attr(type); // font-size: 11px; // border: 1px solid red; // border-radius: 3px; // padding: 0px 2px; // } // } >ul{ >li{ section.tocitem{ ul{ overflow: hidden; max-height: 10000px; transition: max-height 0.5s ease-in-out; &:not(.opened):not(.init_opened){ max-height:0; transition: max-height 0.5s cubic-bezier(0, 1.05, 0, 1); } &:not([level="1"]){ border-left: 0.5px solid $grisclair; margin-bottom: 0em; li{ padding:0 0 0 1em; } } } &.notitle>ul>li{ padding:0; } } } } section.tocitem{ &[level="1"]:not([type="front"]), &[level="2"]{ padding-top: 0.4em; } } .toc-title{ @include title4grey; color: $grismoyen; &.active, &:hover{ color:$grisfonce; font-weight: 600; } &.loaded{ color:$grisfonce; } &.notitle{ color: red; } &.disabled{ color: $grisclair; pointer-events: none; } } h2.toc-title{ font-size: 1.1em; color: $bleuroilight; &:hover, &.loaded{ color: $bleuroi; } } h3.toc-title{font-size: 1em;} h4.toc-title{font-size: 0.9em;} h5.toc-title{font-size: 0.8em;} h6.toc-title{font-size: 0.7em;} // span.toc-title{font-size: 0.882em;} // >ul{ // ul{ // li{ // ul{ // overflow: hidden; // max-height: 10000px; // 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 1em; // } // } // } // } // .toc-title{ // @include title4grey; // &.active, // &:hover{ // color:$grisfonce; // font-weight: 600; // } // &.loaded{ // color:$grisfonce; // } // &.notitle{ // color: red; // } // } // h2.toc-title{font-size: 1.1em;} // h3.toc-title{font-size: 1em;} // h4.toc-title{font-size: 0.9em;} // h5.toc-title{font-size: 0.8em;} // h6.toc-title{font-size: 0.7em;} // // span.toc-title{font-size: 0.882em;} // } } div#indexes-filters{ // height:$pager_h; overflow: hidden; box-sizing: content-box; padding:1em 0 0 1.5em; select{ option{ padding:0; } } } 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), (orientation: portrait) { 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); } } } } } } #biblio{ >header{ &>h1{ @include titleSansRed; margin: 0; } li{ margin: 0.5em 0 0; a{ @include title2black; &.router-link-active{ font-weight: 600; } } } } ul.item-list{ margin:0; padding:0; li{ padding:0; margin:0 0 $base-line 0; h2{ margin:0; @include title1black; color: $bleuroi; } p{ margin:0; } span.date{ @include title2black; font-weight: 600; } aside{ overflow: hidden; h5{ @include title2black; margin: $base-line / 2 0; cursor: pointer; // padding-left: 1em; // position: relative; &:before{ cursor: pointer; content:"\2304"; position: relative; display: inline-block; top: -4px; // transform-origin: center; // transform: rotateZ(-90deg); } } ul{ max-height: 1px; transition: all 0.3s ease-in-out; padding-left: 1em; li{ margin-bottom: $base-line / 2; } } &.opened{ h5{ &:before{ top: 4px; content:"\2303"; // transform: rotateZ(90deg); } } ul{ max-height: 100em; } } } } &.manifestations{ li{ max-height: 0.2px; margin-bottom:0; overflow: hidden; transition: all 1s ease-in-out; &.active{ max-height: 10em; } .wrapper{ margin-bottom: $base-line; } } } } ul.authors-filters{ li{ @include title4black; line-height: $base-line / 2; span{ cursor: pointer; color: $gris; &.active{ color: $grisfonce; } } } } } } 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-size: 0.9em; font-weight: 600; max-width: 95%; word-break:normal; } 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), (orientation: portrait) { 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), (orientation: portrait) { 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), (orientation: portrait) { padding:0 $side-padding/2; } background-color: $bleuroi; &>*{ // disable grid gap padding-right: 0; flex-grow: 0; flex-shrink: 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; align-items: center; >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), (orientation: portrait) { 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; } } } } } ; #logos{ // max-height: 100%; position: relative; flex-shrink: 1; // display: flex; // flex-direction: row; // justify-content: flex-end; .wrapper{ position: relative; box-sizing: content-box; // max-height: 50px; padding:1em; text-align: right; height: 30px; img{ // display: inline-block; height: 100%; padding-left: 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%; } h3{ @include title1black; color: $bleuroi; padding: 0.5em 0 0 0.3em; span.hi{ font-variant-position: super; } } } } // ___ // |_ _|__ ___ _ _ __ // | |/ _/ _ \ ' \(_-< // |___\__\___/_||_/__/ 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; } }