inc/awesomplete.css

   1 [hidden] { display: none; }
   2
   3 .visually-hidden {
   4     position: absolute;
   5     clip: rect(0, 0, 0, 0);
   6 }
   7
   8 div.awesomplete {
   9     display: inline-block;
  10     position: relative;
  11 }
  12
  13 div.awesomplete > ul {
  14     position: absolute;
  15     left: 0;
  16     z-index: 9999;
  17     min-width: 100%;
  18     box-sizing: border-box;
  19     list-style: none;
  20     padding: 0;
  21     border-radius: .3em;
  22     margin: .2em 0 0;
  23     background: #FFF;
  24     border: 1px solid rgba(0,0,0,.3);
  25     box-shadow: .05em .2em .6em rgba(0,0,0,.2);
  26     text-shadow: none;
  27 }
  28
  29 div.awesomplete > ul[hidden],
  30 div.awesomplete > ul:empty {
  31     display: none;
  32 }
  33
  34 @supports (transform: scale(0)) {
  35     div.awesomplete > ul {
  36         transition: .3s cubic-bezier(.4,.2,.5,1.4);
  37         transform-origin: 1.43em -.43em;
  38     }
  39
  40     div.awesomplete > ul[hidden],
  41     div.awesomplete > ul:empty {
  42         opacity: 0;
  43         transform: scale(0);
  44         display: block;
  45         transition-timing-function: ease;
  46     }
  47 }
  48
  49 /* Pointer */
  50 div.awesomplete > ul:before {
  51     content: "";
  52     position: absolute;
  53     top: -.43em;
  54     left: 1em;
  55     width: 0; height: 0;
  56     padding: .4em;
  57     background: white;
  58     border: inherit;
  59     border-right: 0;
  60     border-bottom: 0;
  61     -webkit-transform: rotate(45deg);
  62     transform: rotate(45deg);
  63 }
  64
  65 div.awesomplete > ul > li {
  66     position: relative;
  67     padding: .2em .5em;
  68     cursor: pointer;
  69 }
  70
  71 div.awesomplete > ul > li:hover {
  72     background: hsl(200, 40%, 80%);
  73     color: black;
  74 }
  75
  76 div.awesomplete > ul > li[aria-selected="true"] {
  77     background: hsl(205, 40%, 40%);
  78     color: white;
  79 }
  80
  81 div.awesomplete mark {
  82     background: hsl(65, 100%, 50%);
  83 }
  84
  85 div.awesomplete li:hover mark {
  86     background: hsl(68, 101%, 41%);
  87 }
  88
  89 div.awesomplete li[aria-selected="true"] mark {
  90     background: hsl(86, 102%, 21%);
  91     color: inherit;
  92 }