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