app.scss 24 KB

12345678910111213141516171819202122232425262728293031323334353637383940414243444546474849505152535455565758596061626364656667686970717273747576777879808182838485868788899091929394959697989910010110210310410510610710810911011111211311411511611711811912012112212312412512612712812913013113213313413513613713813914014114214314414514614714814915015115215315415515615715815916016116216316416516616716816917017117217317417517617717817918018118218318418518618718818919019119219319419519619719819920020120220320420520620720820921021121221321421521621721821922022122222322422522622722822923023123223323423523623723823924024124224324424524624724824925025125225325425525625725825926026126226326426526626726826927027127227327427527627727827928028128228328428528628728828929029129229329429529629729829930030130230330430530630730830931031131231331431531631731831932032132232332432532632732832933033133233333433533633733833934034134234334434534634734834935035135235335435535635735835936036136236336436536636736836937037137237337437537637737837938038138238338438538638738838939039139239339439539639739839940040140240340440540640740840941041141241341441541641741841942042142242342442542642742842943043143243343443543643743843944044144244344444544644744844945045145245345445545645745845946046146246346446546646746846947047147247347447547647747847948048148248348448548648748848949049149249349449549649749849950050150250350450550650750850951051151251351451551651751851952052152252352452552652752852953053153253353453553653753853954054154254354454554654754854955055155255355455555655755855956056156256356456556656756856957057157257357457557657757857958058158258358458558658758858959059159259359459559659759859960060160260360460560660760860961061161261361461561661761861962062162262362462562662762862963063163263363463563663763863964064164264364464564664764864965065165265365465565665765865966066166266366466566666766866967067167267367467567667767867968068168268368468568668768868969069169269369469569669769869970070170270370470570670770870971071171271371471571671771871972072172272372472572672772872973073173273373473573673773873974074174274374474574674774874975075175275375475575675775875976076176276376476576676776876977077177277377477577677777877978078178278378478578678778878979079179279379479579679779879980080180280380480580680780880981081181281381481581681781881982082182282382482582682782882983083183283383483583683783883984084184284384484584684784884985085185285385485585685785885986086186286386486586686786886987087187287387487587687787887988088188288388488588688788888989089189289389489589689789889990090190290390490590690790890991091191291391491591691791891992092192292392492592692792892993093193293393493593693793893994094194294394494594694794894995095195295395495595695795895996096196296396496596696796896997097197297397497597697797897998098198298398498598698798898999099199299399499599699799899910001001100210031004100510061007100810091010101110121013101410151016101710181019102010211022102310241025102610271028102910301031103210331034103510361037103810391040104110421043104410451046104710481049105010511052105310541055105610571058105910601061106210631064106510661067106810691070107110721073107410751076107710781079108010811082108310841085108610871088108910901091109210931094109510961097109810991100110111021103110411051106110711081109
  1. @import './base/reset';
  2. @import './base/variables';
  3. @import './base/colors';
  4. @import './base/grid-flex';
  5. @import './base/transitions';
  6. @import './base/layout';
  7. @import './base/fonts';
  8. /* The emerging W3C standard
  9. that is currently Firefox-only */
  10. * {
  11. scrollbar-width: thin;
  12. scrollbar-color: $grisclair rgba(255,255,255,0);
  13. }
  14. /* Works on Chrome/Edge/Safari */
  15. *::-webkit-scrollbar {
  16. width: 12px;
  17. }
  18. *::-webkit-scrollbar-track {
  19. background: rgba(255,255,255,0);
  20. }
  21. *::-webkit-scrollbar-thumb {
  22. background-color: $grisclair;
  23. border-radius: 20px;
  24. border: none;
  25. }
  26. body{
  27. color: #1a1a1a;
  28. }
  29. #root{
  30. }
  31. .red{
  32. background-color: red;
  33. color:white;
  34. }
  35. header[role="banner"]{
  36. div.wrapper{
  37. display: grid;
  38. grid-template-columns: 1fr 1fr;
  39. }
  40. h1.site-title{
  41. grid-column: 1;
  42. margin:0;
  43. font-size: 1em;
  44. }
  45. nav#header-menu{
  46. grid-column: 2;
  47. text-align: right;
  48. >ul>li{
  49. display: inline-block;
  50. margin-right: 1em;
  51. position: relative;
  52. >ul{
  53. position: absolute;
  54. top:1em; right:-1em;
  55. overflow: hidden;
  56. padding-bottom: 0.5em;
  57. background-color: white;
  58. >li{
  59. padding:0 1em;
  60. // margin-right: -1em;
  61. transition: height 0.3s ease-in-out;
  62. height:0;
  63. overflow: hidden;
  64. }
  65. }
  66. &:hover, &.opened{
  67. >ul>li{
  68. height:1em;
  69. }
  70. }
  71. }
  72. li>span,li>a{
  73. font-size: 0.9em;
  74. color: $bleuroi;
  75. text-transform: uppercase;
  76. }
  77. }
  78. }
  79. section[role="main-content"]{
  80. #home{
  81. header{
  82. text-align: center;
  83. h1{
  84. color: $bleuroi;
  85. font-size: 8em;
  86. font-weight: 300;
  87. margin:15vh 0 0;
  88. }
  89. h2{
  90. color: $or;
  91. font-size: 2em;
  92. font-weight: 300;
  93. margin:1em 0 0;
  94. text-transform: uppercase;
  95. letter-spacing: 0.2em;
  96. sup{
  97. // line-height: 5em;
  98. vertical-align:text-top;
  99. font-size: 0.7em
  100. }
  101. }
  102. }
  103. // $filet_space:8em;
  104. // $decallage: 0.5em;
  105. section{
  106. padding-top: 8em;
  107. }
  108. @mixin teasersfilet($filet_space, $decallage){
  109. &:before, &:after{
  110. z-index: 0;
  111. content: "";
  112. position: absolute;
  113. opacity: 0.4;
  114. }
  115. &:before{
  116. border:1px solid $or;
  117. width:calc(100% + #{$filet_space*2 + $decallage*2});
  118. left:- $filet_space - $default_gap/2 -$decallage;
  119. height:calc(100% + #{$filet_space});
  120. top:- $filet_space / 2;
  121. }
  122. &:after{
  123. border:1px solid $rouge;
  124. width:calc(100% + #{$filet_space*2});
  125. left:- $filet_space - $default_gap/2;
  126. height:calc(100% + #{$filet_space + $decallage*2});
  127. top:- $filet_space / 2 - $decallage;
  128. }
  129. }
  130. div.teasers{
  131. display: flex;
  132. flex-direction: row;
  133. flex-wrap: nowrap;
  134. position: relative;
  135. padding-right: 0;
  136. article{
  137. box-sizing: border-box;
  138. flex-basis: percentage(2 / ( $default_sum - 6) );
  139. padding-right: $default_gap;
  140. @include fontsans;
  141. h1{
  142. color: $bleuroi;
  143. }
  144. p{
  145. font-size: 0.882em;
  146. line-height: 1.2;
  147. }
  148. span{
  149. color:$rouge;
  150. font-size:0.693em;
  151. }
  152. }
  153. // filets decoratif
  154. @include teasersfilet(8em, 0.5em);
  155. }
  156. // responsive
  157. @media only screen and (max-width: $small-bp) {
  158. header{
  159. h1{
  160. font-size: 5em;
  161. margin:7vh 0 0;
  162. }
  163. h2{
  164. font-size: 1em;
  165. }
  166. }
  167. section{
  168. padding-top: 4em;
  169. }
  170. div.teasers{
  171. flex-direction: column;
  172. // filets decoratif
  173. @include teasersfilet(4em, 0.5em);
  174. }
  175. }
  176. }
  177. #list-corpus, .index{
  178. >header>h1{
  179. font-family: "noto_sans";
  180. color: $rouge;
  181. font-weight: 400;
  182. }
  183. article.item{
  184. margin: 2em 0 0;
  185. header h1{
  186. font-size: 1.512em;
  187. color: $bleuroi;
  188. font-weight: 400;
  189. margin:0;
  190. }
  191. }
  192. ul.item-list{
  193. li{
  194. margin: 0 0 2em 0;
  195. header{
  196. h2{
  197. margin:0.4em 0 0.2em;
  198. @include title1blue;
  199. }
  200. h3{
  201. margin:0.2em 0;
  202. @include fontsans;
  203. font-size: 0.756em;
  204. font-weight: 500;
  205. }
  206. margin-bottom: 0.3em;
  207. }
  208. section.editions{
  209. div.editions{
  210. ol{
  211. padding:0;
  212. li{
  213. margin:0.7em 1em;
  214. }
  215. }
  216. }
  217. }
  218. h4{
  219. margin:0.1em 0;
  220. font-weight: 300;
  221. @include fontsans;
  222. font-size: 0.756em;
  223. &.texts-quantity{
  224. color: $rouge;
  225. // &:after{
  226. // content: ">>";
  227. // margin:0 0 0 0.5em;
  228. // }
  229. }
  230. }
  231. ul {
  232. li{
  233. margin:0 0 0 1em;
  234. h3{
  235. margin: 0.5em 0;
  236. font-weight: 400;
  237. font-size: 1em;
  238. }
  239. }
  240. }
  241. }
  242. }
  243. }
  244. #corpus{
  245. }
  246. .index{
  247. }
  248. .index-item{
  249. header{
  250. h1{
  251. @include title2black;
  252. }
  253. }
  254. .occurences{
  255. >ul{
  256. >li{
  257. padding:0 0 2em 0;
  258. h3{
  259. @include title1black;
  260. padding:0 0 1em 0;
  261. }
  262. >ul{
  263. >li{
  264. padding:0 0 1em 0;
  265. section{
  266. h4{
  267. @include title2black;
  268. display: inline-block;
  269. }
  270. span.open-close{
  271. cursor: pointer;
  272. display: inline-block;
  273. svg{
  274. transform: rotate(-90deg) scale(0.8);
  275. transition: transform 0.3s ease-in-out;
  276. path{
  277. fill:$bleuroi;
  278. }
  279. }
  280. }
  281. div.text{
  282. max-height: 0;
  283. transition: max-height 0.3s ease-in-out;
  284. overflow: hidden;
  285. box-sizing: content-box;
  286. p, h1, h2, h3, h4, h5, h6{
  287. margin: 0.5em 0 0 0;
  288. }
  289. }
  290. a.lire-plus{
  291. color: $bleuroi;
  292. opacity: 0;
  293. display: inline-block;
  294. height: 0;
  295. overflow: hidden;
  296. transition: height, opacity 0.3s ease-in-out;
  297. }
  298. &.opened{
  299. span.open-close{
  300. cursor: pointer;
  301. display: inline-block;
  302. svg{
  303. transform: scale(0.8) rotate(0);
  304. }
  305. }
  306. div.text{
  307. max-height:100px;
  308. }
  309. a.lire-plus{
  310. opacity: 1;
  311. height:1em;
  312. }
  313. }
  314. }
  315. }
  316. }
  317. }
  318. }
  319. }
  320. }
  321. #edition{
  322. >header{
  323. position: relative;
  324. h1{
  325. @include title1black;
  326. }
  327. aside.index-tooltip{
  328. z-index:10;
  329. margin-top: -1.75em;
  330. position:absolute;
  331. text-align: right;
  332. right: 2em;
  333. h1 {
  334. @include title2black;
  335. margin:0 0 0.5em 0;
  336. }
  337. p{
  338. margin:0 0 0.5em 0;
  339. }
  340. time{
  341. font-weight: 600;
  342. }
  343. @media only screen and (max-width: $small-bp) {
  344. background-color: #fff;
  345. padding: 1em;
  346. box-shadow: 0 0 10px $gris;
  347. *{
  348. pointer-events: none;
  349. }
  350. }
  351. }
  352. }
  353. >section{
  354. div#text{
  355. .infinite-loading-container{
  356. height:0;
  357. overflow: hidden;
  358. }
  359. div.tei{
  360. @media only screen and (min-width: $small-bp + 1) {
  361. border-left: 1px dotted $grisclair;
  362. padding-left: 1em;
  363. &.active{
  364. border-left: 1px dotted $grisfonce;
  365. }
  366. }
  367. >h1{@include teititle1blue;}
  368. span.placeName,
  369. span.objectName,
  370. span.persName{
  371. font-weight: 600;
  372. }
  373. // front page
  374. header{
  375. padding-top: 1em;
  376. h1{
  377. @include teititlefrontblue;
  378. .initial{
  379. text-transform: uppercase;
  380. font-size: 1.3em;
  381. line-height: 1.3em;
  382. }
  383. }
  384. }
  385. .byline{
  386. text-align: center;
  387. font-style: italic;
  388. padding-bottom: 1em;
  389. }
  390. .docImprint{
  391. text-align: center;
  392. // padding-bottom: 1em;
  393. }
  394. .imprimatur{
  395. text-align: center;
  396. font-style: italic;
  397. padding-bottom: 1em;
  398. }
  399. }
  400. }
  401. }
  402. >nav{
  403. padding-bottom: 0;
  404. $pager_h:2em;
  405. span.nav-title{ display:none; }
  406. section#toc{
  407. box-sizing: content-box;
  408. padding:0 0 1em 1.5em;
  409. height:calc(100% - #{$pager_h});
  410. overflow-x: hidden;
  411. overflow-y: auto;
  412. >ul{
  413. ul{
  414. li{
  415. ul{
  416. overflow: hidden;
  417. max-height: 1000px;
  418. transition: max-height 0.5s ease-in-out;
  419. // transform: scaleY(1);
  420. // transform-origin: top;
  421. // transition: transform 0.3s ease-in-out;
  422. &:not(.opened){
  423. // height:0;
  424. max-height:0;
  425. transition: max-height 0.5s cubic-bezier(0, 1.05, 0, 1);
  426. // transform: scaleY(0);
  427. }
  428. // &.opened{
  429. // border: 1px solid red;
  430. // }
  431. // padding-left: 1em;
  432. border-left: 0.5px solid $grisclair;
  433. // min-height: 1em;
  434. margin-bottom: 0em;
  435. li{
  436. // min-height: 1em;
  437. // border-left: 1px solid red;
  438. padding:0 0 0.2em 1em;
  439. }
  440. }
  441. }
  442. }
  443. .toc-title{
  444. color: $gris;
  445. font-weight: 400;
  446. margin:0;
  447. &.active,
  448. &:hover{
  449. color:$grisfonce;
  450. font-weight: 600;
  451. }
  452. &.loaded{
  453. color:$grisfonce;
  454. }
  455. }
  456. h2.toc-title{font-size: 0.882em;}
  457. h3.toc-title{font-size: 0.882em;}
  458. h4.toc-title{font-size: 0.882em;}
  459. h5.toc-title{font-size: 0.882em;}
  460. h6.toc-title{font-size: 0.882em;}
  461. span.toc-title{font-size: 0.882em;}
  462. }
  463. }
  464. div#page-nav{
  465. height:$pager_h;
  466. overflow: hidden;
  467. box-sizing: content-box;
  468. padding:0 1.5em;
  469. select{
  470. option{
  471. padding:0;
  472. }
  473. }
  474. }
  475. }
  476. // responsive
  477. @media only screen and (max-width: $small-bp) {
  478. position: relative;
  479. >nav{
  480. $top: 45px;
  481. z-index: 2;
  482. position: absolute;
  483. top:$top;
  484. right:0;
  485. background-color: #fff;
  486. width:40%;
  487. box-sizing: border-box;
  488. padding-top: 1em;
  489. padding-bottom: 1em;
  490. height:calc(100% - #{$top});
  491. transform: translateX(100%);
  492. transition: transform 0.3s ease-in-out;
  493. span.nav-title{
  494. display: block;
  495. position: absolute;
  496. top:4.5em; left:-1.8em;
  497. transform: rotateZ(-90deg);
  498. transform-origin: center;
  499. @include fontsans;
  500. font-size: 0.600em;
  501. cursor: pointer;
  502. color: $bleuroi;
  503. svg{
  504. vertical-align: bottom;
  505. transform-origin: center;
  506. transform: scale(0.8) rotate(180deg);
  507. transition: transform 0.3s ease-in-out;
  508. path{
  509. fill: $bleuroi;
  510. }
  511. }
  512. }
  513. &.opened{
  514. box-shadow: -3px -3px 5px $grisclair;
  515. transform: translateX(0);
  516. span.nav-title{
  517. svg{
  518. transform: scale(0.7) rotate(0);
  519. }
  520. }
  521. }
  522. }
  523. }
  524. }
  525. #text{
  526. .tei{
  527. width: 93%;
  528. h1{
  529. font-size: 1.512em;
  530. }
  531. p{
  532. margin-top: 0;
  533. font-size: 1.134em;
  534. line-height: 1.5;
  535. span.persName,
  536. span.placeName,
  537. span.objectName{
  538. font-weight: 600;
  539. }
  540. a{
  541. font-weight: 600;
  542. &.active-link{
  543. color: $rouge;
  544. // text-decoration: underline;
  545. }
  546. sup.mdi{
  547. font-size: 0.630em;
  548. vertical-align: super;
  549. // line-height: 0.1;
  550. padding: 0 0.2em;
  551. }
  552. }
  553. }
  554. }
  555. // <span role=\"pageBreak\" data-num=\"15\"></span>
  556. // span[role="pageBreak"]{
  557. // display: inline-block;
  558. // border-left: 1px solid $bleuroi;
  559. // height:1.4em;
  560. // // word-spacing: 0;
  561. // margin: 0 0.3em;
  562. // line-height: 3;
  563. // position: relative;
  564. // vertical-align: bottom;
  565. // &:after, &:before{
  566. // content: '';
  567. // display: block;
  568. // width:0.5em;
  569. // position: absolute;
  570. // }
  571. // &:after{
  572. // top:0;
  573. // left:0;
  574. // border-top: 1px solid $bleuroi;
  575. // }
  576. // &:before{
  577. // bottom:0;
  578. // right:0;
  579. // border-bottom: 1px solid $bleuroi;
  580. // }
  581. // }
  582. span[role="pageNum"]{
  583. // display:inline;
  584. position: relative;
  585. float:right;
  586. // position: sticky;
  587. $w:0.5em;
  588. width:$w; height:0;
  589. margin-left:calc(100% - (#{$w} * 0.5));
  590. // &:before
  591. &:after{
  592. // display: block;
  593. position: absolute;
  594. font-size: 0.630em;
  595. width:$w; height:$w*2;
  596. line-height: $w*1.7;
  597. padding-left: 1em;
  598. border-right: 1px solid $bleuroilight;
  599. color: $bleuroi;
  600. text-indent: $w + 0.5em;
  601. }
  602. // &:before{
  603. // content:attr(data-num-prev);
  604. // border-bottom: 1px solid $bleuroilight;
  605. // bottom: 0.1em;
  606. // }
  607. &:after{
  608. content:attr(data-num);
  609. border-top: 1px solid $bleuroilight;
  610. // bottom:1.3em;
  611. }
  612. }
  613. }
  614. #biblio{
  615. .router-link-active{
  616. font-weight: 600;
  617. }
  618. ul.item-list{
  619. margin:0;
  620. padding:0;
  621. li{
  622. padding:0;
  623. margin:0 0 1.5em 0;
  624. h2{
  625. margin:0;
  626. @include title2black;
  627. }
  628. p{
  629. margin:0;
  630. }
  631. }
  632. }
  633. }
  634. }
  635. footer[role="tools"]{
  636. $list-item-h: 7em;
  637. @mixin resultItem{
  638. box-sizing: border-box;
  639. // we are only on 10 colls as 2 are occupied by sides
  640. flex-basis: percentage(2/($default_sum - 2));
  641. max-height: $list-item-h;
  642. overflow: hidden;
  643. padding-bottom: 1em;
  644. padding-right: $default_gap;
  645. article{
  646. max-height: 100%;
  647. overflow: hidden;
  648. }
  649. article.item{
  650. h1{
  651. @include title3black;
  652. font-weight: 600;
  653. max-width: 95%;
  654. }
  655. h2{
  656. @include title3black;
  657. text-transform: none;
  658. }
  659. span{
  660. font-size: 0.882em;
  661. }
  662. // .preview{
  663. // font-size: 0.882em;
  664. // margin:0;
  665. // code{
  666. // @include fontserif;
  667. // background-color: lighten(desaturate($rouge,20%), 20%);
  668. // padding:0 0.2em;
  669. // }
  670. // }
  671. }
  672. }
  673. #history{
  674. z-index: 8;
  675. background-color: $or;
  676. padding:1.2em $side-padding;
  677. max-height: $list-item-h;
  678. @include accordeon-transition($list-item-h);
  679. >header{
  680. }
  681. .history-list{
  682. overflow-x: hidden;
  683. .wrapper{
  684. height:100%;
  685. // hidding the scrollbar
  686. overflow-y: auto;
  687. // width:calc(100% + 1em);
  688. padding-right: 1em;
  689. >ul{
  690. padding:0;
  691. display: flex;
  692. flex-direction: row;
  693. flex-wrap: wrap;
  694. }
  695. }
  696. li.item{
  697. @include resultItem;
  698. }
  699. }
  700. }
  701. #results{
  702. z-index: 9;
  703. background-color: $gris;
  704. padding:1.2em $side-padding;
  705. @media only screen and (max-width: $small-bp) {
  706. padding:1.2em $side-padding/2;
  707. }
  708. max-height: $list-item-h * 3;
  709. @include accordeon-transition($list-item-h * 3);
  710. >header{
  711. .search-keys{
  712. font-size: 0.756em;
  713. font-weight: 500;
  714. }
  715. .results-count{
  716. font-size: 0.756em;
  717. }
  718. }
  719. .results-list{
  720. overflow-x: hidden;
  721. .wrapper{
  722. position:relative;
  723. height:100%;
  724. // hidding the scrollbar
  725. overflow-y: auto;
  726. // width:calc(100% + 1em);
  727. padding-right: 1em;
  728. >ul{
  729. padding:0;
  730. display: flex;
  731. flex-direction: row;
  732. flex-wrap: wrap;
  733. }
  734. }
  735. li.result{
  736. @include resultItem;
  737. }
  738. .infinite-loading-container{
  739. // TODO: how to center the loading
  740. }
  741. }
  742. >header, section.results-list{
  743. transition: opacity 0.2s ease-in-out;
  744. }
  745. &.loading {
  746. >header, section.results-list{
  747. transition: opacity 0.5s ease-in-out;
  748. opacity:0.5;
  749. pointer-events: none;
  750. }
  751. }
  752. // responsive
  753. @media only screen and (max-width: $small-bp) {
  754. position: relative;
  755. >header{
  756. padding:0 0 1em 0;
  757. >*{
  758. display: inline-block;
  759. margin-right: 1em;
  760. }
  761. #sorting{
  762. width:10em;
  763. }
  764. }
  765. >section.results-list{
  766. max-height: 15em;
  767. li.result{
  768. flex-basis: 33%;
  769. }
  770. }
  771. >nav{
  772. position: absolute;
  773. top:1.2em; right:1.2em;
  774. }
  775. }
  776. }
  777. #footer-bottom{
  778. z-index: 10;
  779. padding:0 $side-padding;
  780. @media only screen and (max-width: $small-bp) {
  781. padding:0 $side-padding/2;
  782. }
  783. background-color: $bleuroi;
  784. &>*{
  785. // disable grid gap
  786. padding-right: 0;
  787. }
  788. #footer-tabs{
  789. ul{
  790. padding:0; margin:0;
  791. display: flex;
  792. flex-direction: column;
  793. li{
  794. flex: 1 1 auto;
  795. .wrapper{
  796. box-sizing: border-box;
  797. line-height: 0.6em;
  798. height:2em;
  799. width: calc(100% + $side-padding);
  800. margin-left:-$side-padding;
  801. padding:0.3em 0.5em 0.3em $side-padding;
  802. }
  803. &.history .wrapper{
  804. background-color: $or;
  805. }
  806. &.results .wrapper{
  807. background-color: $gris;
  808. }
  809. span{
  810. font-size: 0.693em;
  811. font-weight: 400;
  812. text-transform: uppercase;
  813. cursor: pointer;
  814. @include fade-transition;
  815. }
  816. }
  817. }
  818. }
  819. #search{
  820. color: #fff;
  821. background-color: $bleuroi;
  822. form{
  823. padding: 0;
  824. // display: flex;
  825. // flex-direction: row;
  826. // flex-wrap: wrap;
  827. fieldset{
  828. padding:0.7em 1em;
  829. border: none;
  830. box-sizing:border-box;
  831. // width correction as row is not the same width as others in the page
  832. // flex-basis: percentage(2/($default_sum - 1));
  833. // flex-basis: 17.667%;
  834. // flex-basis: percentage(2 / 11);
  835. &:not(:first-of-type){
  836. border-left: 1px solid $grisclair;
  837. }
  838. }
  839. fieldset.search{
  840. display: inline-flex;
  841. >div{
  842. width:80%;
  843. vertical-align: middle;
  844. }
  845. label[for="keys"]{
  846. display: none;
  847. }
  848. input[type="text"]{
  849. padding:0em 0.3em;
  850. margin:0 0 0.3em 0;
  851. box-sizing: border-box;
  852. font-size: 0.756em;
  853. line-height: 1;
  854. width:100%;
  855. height:1.4em;
  856. border:none;
  857. border-radius: 2px;
  858. }
  859. span.mdi{
  860. display: inline-block;
  861. margin:0 0 0 0.5em;
  862. font-size: 1.2em;
  863. line-height:1.1;
  864. vertical-align:middle;
  865. width:1.2em; height:1.2em;
  866. border-radius: 0.6em;
  867. background-color: #fff;
  868. color: $bleuroi;
  869. text-align: center;
  870. font-weight: 700;
  871. cursor: pointer;
  872. }
  873. }
  874. }
  875. fieldset.filters{
  876. .vs__actions{
  877. background-color: $grisclair;
  878. align-items:baseline;
  879. padding-top:0.2em;
  880. }
  881. }
  882. form{
  883. transition: opacity 0.2s ease-in-out;
  884. }
  885. &.loading{
  886. form{
  887. opacity:0.5;
  888. transition: opacity 0.5s ease-in-out;
  889. pointer-events: none;
  890. }
  891. }
  892. // responsive
  893. @media only screen and (max-width: $small-bp) {
  894. form{
  895. fieldset{
  896. &.search{
  897. >div{
  898. display: inline-flex;
  899. flex-wrap: nowrap;
  900. width:84%;
  901. >*{
  902. flex-basis: 45%;
  903. margin: 0 0.5em 0 0;
  904. // box-sizing: content-box;
  905. // width:auto!important;
  906. &#keys[type="text"]{
  907. margin-right:1.5em;
  908. }
  909. }
  910. }
  911. span.mdi{
  912. width:1em; height:1em;
  913. margin-top: -0.1em;
  914. margin-left: 0;
  915. }
  916. }
  917. &.filters{
  918. border-left: none;
  919. flex-basis: 32%;
  920. padding: 0.2em 0 1em 1em;
  921. }
  922. }
  923. }
  924. }
  925. }
  926. }
  927. h2{
  928. margin:0;
  929. font-size: 0.756em;
  930. font-weight: 400;
  931. text-transform: uppercase;
  932. padding:0;
  933. }
  934. }
  935. // vue-select
  936. .v-select{
  937. padding:0;
  938. div[role="combobox"]{
  939. background-color: #fff;
  940. padding:0;
  941. border-radius: 2px;
  942. border: none;
  943. }
  944. input[type="search"]{
  945. margin:0;
  946. padding:0;
  947. }
  948. .vs__search{
  949. &, &:focus{
  950. font-size: 0.756em;
  951. line-height: 1;
  952. height:1.2em;
  953. border:none;
  954. box-sizing: border-box;
  955. }
  956. }
  957. .vs__actions{
  958. padding:1px 3px;
  959. svg[role="presentation"]{
  960. transform: scale(0.8);
  961. path{
  962. fill: $bleuroi;
  963. }
  964. }
  965. }
  966. .vs__selected{
  967. margin:0;
  968. padding:0.2em 0;
  969. line-height:1;
  970. font-size: 0.756em;
  971. background-color: #fff;
  972. border:none;
  973. align-items: middle;
  974. box-sizing: content-box;
  975. display: inline-block;
  976. width: calc(100% - 12px);
  977. // &>*:not(button){
  978. // display: inline-block;
  979. // width:70%;
  980. // }
  981. button{
  982. svg{
  983. transform: scale(0.8);
  984. path{
  985. fill: $bleuroi;
  986. }
  987. }
  988. &.vs__deselect{
  989. line-height: 0;
  990. }
  991. }
  992. }
  993. // border-radius: 2px;
  994. // border: none;
  995. }
  996. ul[role="listbox"]{
  997. @include fontsans;
  998. padding:0;
  999. margin:0;
  1000. border:none;
  1001. position: relative;
  1002. li{
  1003. box-sizing: content-box;
  1004. padding:0.3em;
  1005. margin:0;
  1006. font-size: 0.756em;
  1007. line-height: 1;
  1008. white-space: normal;
  1009. position: relative;
  1010. *{
  1011. max-width: 100%;
  1012. }
  1013. }
  1014. }
  1015. // ___
  1016. // |_ _|__ ___ _ _ ___
  1017. // | |/ _/ _ \ ' \(_-<
  1018. // |___\__\___/_||_/__/
  1019. span.mdi-close{
  1020. cursor: pointer;
  1021. }
  1022. @keyframes spin {
  1023. from {
  1024. transform:rotate(0deg);
  1025. }
  1026. to {
  1027. transform:rotate(360deg);
  1028. }
  1029. }
  1030. span.mdi-loading{
  1031. animation-name: spin;
  1032. animation-duration: 2000ms;
  1033. animation-iteration-count: infinite;
  1034. animation-timing-function: linear;
  1035. }
  1036. // _ _ _
  1037. // | | ___ __ _ __| (_)_ _ __ _
  1038. // | |__/ _ \/ _` / _` | | ' \/ _` |
  1039. // |____\___/\__,_\__,_|_|_||_\__, |
  1040. // |___/
  1041. span.loading{
  1042. @include fontsans;
  1043. font-size: 0.756em;
  1044. color: $grisfonce;
  1045. animation: pulseloading 4s infinite;
  1046. }
  1047. @keyframes pulseloading{
  1048. 0% {
  1049. opacity: 1;
  1050. }
  1051. 50%{
  1052. opacity: 0;
  1053. }
  1054. 100% {
  1055. opacity: 1;
  1056. }
  1057. }