[Summary view] [Print] [Text view]

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