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