awesomplete.css 1.9 KB

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