[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: .3em;
  37      margin: .2em 0 0;
  38      background: hsla(0,0%,100%,.9);
  39      background: linear-gradient(to bottom right, white, hsla(0,0%,100%,.8));
  40      border: 1px solid rgba(0,0,0,.3);
  41      box-shadow: .05em .2em .6em rgba(0,0,0,.2);
  42      text-shadow: none;
  43  }
  44  
  45  @supports (transform: scale(0)) {
  46      .awesomplete > ul {
  47          transition: .3s cubic-bezier(.4,.2,.5,1.4);
  48          transform-origin: 1.43em -.43em;
  49      }
  50      
  51      .awesomplete > ul[hidden],
  52      .awesomplete > ul:empty {
  53          opacity: 0;
  54          transform: scale(0);
  55          display: block;
  56          transition-timing-function: ease;
  57      }
  58  }
  59  
  60      /* Pointer */
  61      .awesomplete > ul:before {
  62          content: "";
  63          position: absolute;
  64          top: -.43em;
  65          left: 1em;
  66          width: 0; height: 0;
  67          padding: .4em;
  68          background: white;
  69          border: inherit;
  70          border-right: 0;
  71          border-bottom: 0;
  72          -webkit-transform: rotate(45deg);
  73          transform: rotate(45deg);
  74      }
  75  
  76      .awesomplete > ul > li {
  77          position: relative;
  78          padding: .2em .5em;
  79          cursor: pointer;
  80      }
  81      
  82      .awesomplete > ul > li:hover {
  83          background: hsl(200, 40%, 80%);
  84          color: black;
  85      }
  86      
  87      .awesomplete > ul > li[aria-selected="true"] {
  88          background: hsl(205, 40%, 40%);
  89          color: white;
  90      }
  91      
  92          .awesomplete mark {
  93              background: hsl(65, 100%, 50%);
  94          }
  95          
  96          .awesomplete li:hover mark {
  97              background: hsl(68, 100%, 41%);
  98          }
  99          
 100          .awesomplete li[aria-selected="true"] mark {
 101              background: hsl(86, 100%, 21%);
 102              color: inherit;
 103          }
 104  /*# sourceMappingURL=awesomplete.css.map */