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