jquery-typeahead/src/jquery.typeahead.css

jQuery plugin that provides Typeahead (autocomplete) Search preview from Json object(s) via same domain Ajax request or cross domain Jsonp and offers data compression inside Local Storage. The plugin is built with a lot of options and callbacks to allow c

.typeahead__container {
  /**
     * Restore the font weight unset by the previous rule.
     */
  /**
     * Show the overflow in IE.
     * 1. Show the overflow in Edge.
     */
  /**
     * Remove the inheritance of text transform in Edge, Firefox, and IE.
     * 1. Remove the inheritance of text transform in Firefox.
     */
  /**
     * 1. Prevent a WebKit bug where (2) destroys native `audio` and `video`
     *    controls in Android 4.
     * 2. Correct the inability to style clickable types in iOS and Safari.
     */
  /**
     * Remove the inner border and padding in Firefox.
     */
  /**
     * Restore the focus styles unset by the previous rule.
     */
  /**
     * Change the border, margin, and padding in all browsers (opinionated).
     */
  /**
     * 1. Correct the text wrapping in Edge and IE.
     * 2. Correct the color inheritance from `fieldset` elements in IE.
     * 3. Remove the padding so developers are not caught out when they zero out
     *    `fieldset` elements in all browsers.
     */
  /**
     * Remove the default vertical scrollbar in IE.
     */
  /**
     * 1. Add the correct box sizing in IE 10-.
     * 2. Remove the padding in IE 10-.
     */
  /**
     * Correct the cursor style of increment and decrement buttons in Chrome.
     */
  /**
     * 1. Correct the odd appearance in Chrome and Safari.
     * 2. Correct the outline style in Safari.
     */
  /**
     * Correct the text style of placeholders in Chrome, Edge, and Safari.
     */
  /**
     * 1. Correct the inability to style clickable types in iOS and Safari.
     * 2. Change font properties to `inherit` in Safari.
     */
}

.typeahead__container button,
.typeahead__container input,
.typeahead__container optgroup,
.typeahead__container select,
.typeahead__container textarea {
  font: inherit;
  /* 1 */
  margin: 0;
  /* 2 */
}

.typeahead__container optgroup {
  font-weight: bold;
}

.typeahead__container button,
.typeahead__container input {
  /* 1 */
  overflow: visible;
}

.typeahead__container button,
.typeahead__container select {
  /* 1 */
  text-transform: none;
}

.typeahead__container button,
.typeahead__container html [type="button"],
.typeahead__container [type="reset"],
.typeahead__container [type="submit"] {
  -webkit-appearance: button;
  /* 2 */
}

.typeahead__container button::-moz-focus-inner,
.typeahead__container [type="button"]::-moz-focus-inner,
.typeahead__container [type="reset"]::-moz-focus-inner,
.typeahead__container [type="submit"]::-moz-focus-inner {
  border-style: none;
  padding: 0;
}

.typeahead__container button:-moz-focusring,
.typeahead__container [type="button"]:-moz-focusring,
.typeahead__container [type="reset"]:-moz-focusring,
.typeahead__container [type="submit"]:-moz-focusring {
  outline: 1px dotted ButtonText;
}

.typeahead__container fieldset {
  border: 1px solid #c0c0c0;
  margin: 0 2px;
  padding: 0.35em 0.625em 0.75em;
}

.typeahead__container legend {
  -webkit-box-sizing: border-box;
  box-sizing: border-box;
  /* 1 */
  color: inherit;
  /* 2 */
  display: table;
  /* 1 */
  max-width: 100%;
  /* 1 */
  padding: 0;
  /* 3 */
  white-space: normal;
  /* 1 */
}

.typeahead__container textarea {
  overflow: auto;
}

.typeahead__container [type="checkbox"],
.typeahead__container [type="radio"] {
  -webkit-box-sizing: border-box;
  box-sizing: border-box;
  /* 1 */
  padding: 0;
  /* 2 */
}

.typeahead__container [type="number"]::-webkit-inner-spin-button,
.typeahead__container [type="number"]::-webkit-outer-spin-button {
  height: auto;
}

.typeahead__container ::-webkit-input-placeholder {
  color: inherit;
  opacity: 0.54;
}

.typeahead__container ::-webkit-file-upload-button {
  -webkit-appearance: button;
  /* 1 */
  font: inherit;
  /* 2 */
}

.typeahead__container {
  position: relative;
  font: 1rem Lato, "Helvetica Neue", Arial, Helvetica, sans-serif;
}

.typeahead__container * {
  -webkit-box-sizing: border-box;
  box-sizing: border-box;
  outline: 0;
}

.typeahead__query {
  position: relative;
  z-index: 2;
  width: 100%;
}

.typeahead__filter {
  position: relative;
}

.typeahead__filter button {
  min-width: 100%;
  white-space: nowrap;
}

.typeahead__filter button:after {
  display: inline-block;
  margin-left: 4px;
  width: 0;
  height: 0;
  vertical-align: -2px;
  content: "";
  border: 4px solid;
  border-right-color: transparent;
  border-bottom-color: transparent;
  border-left-color: transparent;
}

.typeahead__field {
  display: -webkit-box;
  display: -webkit-flex;
  display: -ms-flexbox;
  display: flex;
  position: relative;
  width: 100%;
}

.typeahead__button button {
  border-top-right-radius: 2px;
  border-bottom-right-radius: 2px;
}

.typeahead__field {
  color: #555;
}

.typeahead__field input,
.typeahead__field textarea,
.typeahead__field [contenteditable],
.typeahead__field .typeahead__hint {
  display: block;
  width: 100%;
  line-height: 1.25;
  min-height: calc(0.5rem * 2 + 1.25rem + 2px);
  padding: 0.5rem 0.75rem;
  background: #fff;
  border: 1px solid #ccc;
  border-radius: 2px 0 0 2px;
  -webkit-appearance: none;
  -moz-appearance: none;
  appearance: none;
  -webkit-box-sizing: border-box;
  box-sizing: border-box;
}

.typeahead__field input:focus, .typeahead__field input:active,
.typeahead__field textarea:focus,
.typeahead__field textarea:active,
.typeahead__field [contenteditable]:focus,
.typeahead__field [contenteditable]:active,
.typeahead__field .typeahead__hint:focus,
.typeahead__field .typeahead__hint:active {
  border-color: #66afe9;
}

.typeahead__container.hint .typeahead__field input,
.typeahead__container.hint .typeahead__field textarea,
.typeahead__container.hint .typeahead__field [contenteditable] {
  background: transparent;
}

.typeahead__container.hint .typeahead__query > :last-child, .typeahead__hint {
  background: #fff;
}

.typeahead__container button {
  display: inline-block;
  margin-bottom: 0;
  text-align: center;
  -ms-touch-action: manipulation;
  touch-action: manipulation;
  cursor: pointer;
  background-color: #fff;
  border: 1px solid #ccc;
  line-height: 1.25;
  padding: 0.5rem 0.75rem;
  -webkit-user-select: none;
  -moz-user-select: none;
  -ms-user-select: none;
  user-select: none;
  color: #555;
}

.typeahead__container button:hover, .typeahead__container button:focus {
  color: #3c3c3c;
  background-color: #f5f5f5;
  border-color: #b3b3b3;
}

.typeahead__container button:active, .typeahead__container button.active {
  background-image: none;
}

.typeahead__container button:focus, .typeahead__container button:active {
  border-color: #66afe9;
}

.typeahead__container input.disabled,
.typeahead__container input[disabled],
.typeahead__container button.disabled,
.typeahead__container button[disabled] {
  cursor: not-allowed;
  pointer-events: none;
  opacity: 0.65;
  -webkit-box-shadow: none;
  box-shadow: none;
  background-color: #fff;
  border-color: #ccc;
}

.typeahead__container .typeahead__field input,
.typeahead__container .typeahead__field textarea,
.typeahead__container .typeahead__field [contenteditable],
.typeahead__container .typeahead__field .typeahead__hint,
.typeahead__container .typeahead__field .typeahead__label-container {
  padding-right: 32px;
}

.typeahead__filter, .typeahead__button {
  z-index: 1;
}

.typeahead__filter button, .typeahead__button button {
  margin-left: -1px;
  border-bottom-left-radius: 0;
  border-top-left-radius: 0;
}

.typeahead__filter:hover, .typeahead__filter:active, .typeahead__filter:focus, .typeahead__button:hover, .typeahead__button:active, .typeahead__button:focus {
  z-index: 1001;
}

.typeahead__filter:hover button:focus, .typeahead__filter:hover button:active, .typeahead__filter:active button:focus, .typeahead__filter:active button:active, .typeahead__filter:focus button:focus, .typeahead__filter:focus button:active, .typeahead__button:hover button:focus, .typeahead__button:hover button:active, .typeahead__button:active button:focus, .typeahead__button:active button:active, .typeahead__button:focus button:focus, .typeahead__button:focus button:active {
  z-index: 1001;
}

.typeahead__filter + .typeahead__button button {
  margin-left: -2px;
}

.typeahead__container.filter .typeahead__filter {
  z-index: 1001;
}

.typeahead__list, .typeahead__dropdown {
  position: absolute;
  left: 0;
  z-index: 1000;
  width: 100%;
  min-width: 160px;
  padding: 5px 0;
  margin: 2px 0 0;
  list-style: none;
  text-align: left;
  background-color: #fff;
  border: 1px solid #ccc;
  border-radius: 2px;
  background-clip: padding-box;
}

.typeahead__result.detached .typeahead__list {
  position: relative;
  z-index: 1041;
  top: initial;
  left: initial;
}

.typeahead__dropdown {
  right: 0;
  left: initial;
  z-index: 1001;
}

.typeahead__list > li {
  position: relative;
  border-top: solid 1px #ccc;
}

.typeahead__list > li:first-child {
  border-top: none;
}

.typeahead__list .typeahead__item[disabled] > a,
.typeahead__dropdown .typeahead__dropdown-item[disabled] > a {
  cursor: not-allowed;
  color: #bababa;
  background-color: #fafafa;
}

.typeahead__list .typeahead__item > a,
.typeahead__dropdown .typeahead__dropdown-item > a {
  display: block;
  padding: 0.5rem 0.75rem;
  clear: both;
  color: #333;
  text-decoration: none;
}

.typeahead__list .typeahead__item:not([disabled]) > a:hover,
.typeahead__list .typeahead__item:not([disabled]) > a:focus,
.typeahead__list .typeahead__item:not([disabled]).active > a,
.typeahead__dropdown .typeahead__dropdown-item:not([disabled]) > a:hover,
.typeahead__dropdown .typeahead__dropdown-item:not([disabled]) > a:focus,
.typeahead__dropdown .typeahead__dropdown-item:not([disabled]).active > a {
  background-color: #f5f5f5;
  color: #3c3c3c;
}

.typeahead__list.empty > li {
  padding: 0.5rem 0.75rem;
  color: #333;
}

.typeahead__list > .typeahead__group {
  border-color: #bfdef6;
  font-weight: bold;
}

.typeahead__list > .typeahead__group:first-child {
  border-top: solid 1px #bfdef6;
}

.typeahead__list > .typeahead__group > a,
.typeahead__list > .typeahead__group > a:hover,
.typeahead__list > .typeahead__group > a:focus,
.typeahead__list > .typeahead__group.active > a {
  cursor: default;
  color: #17639f;
  background: #ecf5fc;
  display: block;
  padding: 0.5rem 0.75rem;
  clear: both;
  text-decoration: none;
}

.typeahead__list > li.typeahead__group + li.typeahead__item {
  border-color: #bfdef6;
}

.typeahead__container.result .typeahead__list,
.typeahead__container.filter .typeahead__dropdown,
.typeahead__container.hint .typeahead__hint,
.typeahead__container.backdrop + .typeahead__backdrop {
  display: block !important;
}

.typeahead__container .typeahead__list,
.typeahead__container .typeahead__dropdown,
.typeahead__container .typeahead__hint,
.typeahead__container + .typeahead__backdrop {
  display: none !important;
}

.typeahead__dropdown li:last-child {
  margin-top: 5px;
  padding-top: 5px;
  border-top: solid 1px #ccc;
}

.typeahead__cancel-button {
  -webkit-user-select: none;
  -moz-user-select: none;
  -ms-user-select: none;
  user-select: none;
  position: absolute;
  right: 0;
  cursor: pointer;
  line-height: 1.25;
  padding: 0.5rem 0.75rem;
  visibility: hidden;
}

.typeahead__label .typeahead__cancel-button {
  visibility: visible;
  right: 4px;
}

.typeahead__container.cancel:not(.loading) .typeahead__cancel-button, .typeahead__label .typeahead__cancel-button {
  visibility: visible;
}

.typeahead__container.cancel:not(.loading) .typeahead__cancel-button:hover, .typeahead__label .typeahead__cancel-button:hover {
  color: #d0021b;
}

.typeahead__search-icon {
  padding: 0 1.25rem;
  width: 16px;
  height: 16px;
  background: url(data:image/svg+xml;charset=utf8;base64,PD94bWwgdmVyc2lvbj0iMS4wIiBlbmNvZGluZz0iaXNvLTg4NTktMSI/Pgo8IS0tIEdlbmVyYXRvcjogQWRvYmUgSWxsdXN0cmF0b3IgMTguMS4xLCBTVkcgRXhwb3J0IFBsdWctSW4gLiBTVkcgVmVyc2lvbjogNi4wMCBCdWlsZCAwKSAgLS0+CjxzdmcgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIiB4bWxuczp4bGluaz0iaHR0cDovL3d3dy53My5vcmcvMTk5OS94bGluayIgdmVyc2lvbj0iMS4xIiBpZD0iQ2FwYV8xIiB4PSIwcHgiIHk9IjBweCIgdmlld0JveD0iMCAwIDI1MC4zMTMgMjUwLjMxMyIgc3R5bGU9ImVuYWJsZS1iYWNrZ3JvdW5kOm5ldyAwIDAgMjUwLjMxMyAyNTAuMzEzOyIgeG1sOnNwYWNlPSJwcmVzZXJ2ZSIgd2lkdGg9IjE2cHgiIGhlaWdodD0iMTZweCI+CjxnIGlkPSJTZWFyY2giPgoJPHBhdGggc3R5bGU9ImZpbGwtcnVsZTpldmVub2RkO2NsaXAtcnVsZTpldmVub2RkOyIgZD0iTTI0NC4xODYsMjE0LjYwNGwtNTQuMzc5LTU0LjM3OGMtMC4yODktMC4yODktMC42MjgtMC40OTEtMC45My0wLjc2ICAgYzEwLjctMTYuMjMxLDE2Ljk0NS0zNS42NiwxNi45NDUtNTYuNTU0QzIwNS44MjIsNDYuMDc1LDE1OS43NDcsMCwxMDIuOTExLDBTMCw0Ni4wNzUsMCwxMDIuOTExICAgYzAsNTYuODM1LDQ2LjA3NCwxMDIuOTExLDEwMi45MSwxMDIuOTExYzIwLjg5NSwwLDQwLjMyMy02LjI0NSw1Ni41NTQtMTYuOTQ1YzAuMjY5LDAuMzAxLDAuNDcsMC42NCwwLjc1OSwwLjkyOWw1NC4zOCw1NC4zOCAgIGM4LjE2OSw4LjE2OCwyMS40MTMsOC4xNjgsMjkuNTgzLDBDMjUyLjM1NCwyMzYuMDE3LDI1Mi4zNTQsMjIyLjc3MywyNDQuMTg2LDIxNC42MDR6IE0xMDIuOTExLDE3MC4xNDYgICBjLTM3LjEzNCwwLTY3LjIzNi0zMC4xMDItNjcuMjM2LTY3LjIzNWMwLTM3LjEzNCwzMC4xMDMtNjcuMjM2LDY3LjIzNi02Ny4yMzZjMzcuMTMyLDAsNjcuMjM1LDMwLjEwMyw2Ny4yMzUsNjcuMjM2ICAgQzE3MC4xNDYsMTQwLjA0NCwxNDAuMDQzLDE3MC4xNDYsMTAyLjkxMSwxNzAuMTQ2eiIgZmlsbD0iIzU1NTU1NSIvPgo8L2c+CjxnPgo8L2c+CjxnPgo8L2c+CjxnPgo8L2c+CjxnPgo8L2c+CjxnPgo8L2c+CjxnPgo8L2c+CjxnPgo8L2c+CjxnPgo8L2c+CjxnPgo8L2c+CjxnPgo8L2c+CjxnPgo8L2c+CjxnPgo8L2c+CjxnPgo8L2c+CjxnPgo8L2c+CjxnPgo8L2c+Cjwvc3ZnPgo=) no-repeat scroll center center transparent;
}

.typeahead__container.loading .typeahead__query:before, .typeahead__container.loading .typeahead__query:after {
  -webkit-transition: all 0s linear, opacity 0.2s ease;
  -o-transition: all 0s linear, opacity 0.2s ease;
  transition: all 0s linear, opacity 0.2s ease;
  position: absolute;
  z-index: 3;
  content: "";
  top: 50%;
  right: 0.55em;
  margin-top: -0.675rem;
  width: 1.35rem;
  height: 1.35rem;
  -webkit-box-sizing: border-box;
  box-sizing: border-box;
  border-radius: 500rem;
  border-style: solid;
  border-width: 0.1em;
}

.typeahead__container.loading .typeahead__query:before {
  border-color: rgba(0, 0, 0, 0.35);
}

.typeahead__container.loading .typeahead__query:after {
  -webkit-animation: button-spin 0.6s linear;
  animation: button-spin 0.6s linear;
  -webkit-animation-iteration-count: infinite;
  animation-iteration-count: infinite;
  border-color: #fff transparent transparent;
  -webkit-box-shadow: 0 0 0 1px transparent;
  box-shadow: 0 0 0 1px transparent;
}

@-webkit-keyframes button-spin {
  from {
    -webkit-transform: rotate(0deg);
    transform: rotate(0deg);
  }
  to {
    -webkit-transform: rotate(360deg);
    transform: rotate(360deg);
  }
}

@keyframes button-spin {
  from {
    -webkit-transform: rotate(0deg);
    transform: rotate(0deg);
  }
  to {
    -webkit-transform: rotate(360deg);
    transform: rotate(360deg);
  }
}

.typeahead__label-container {
  list-style: none;
  position: absolute;
  padding-top: calc(1rem * 0.375);
  padding-left: 6px;
  width: 100%;
  -webkit-flex-wrap: wrap;
  -ms-flex-wrap: wrap;
  flex-wrap: wrap;
  display: -webkit-box;
  display: -webkit-flex;
  display: -ms-flexbox;
  display: flex;
}

.typeahead__label {
  display: -webkit-box;
  display: -webkit-flex;
  display: -ms-flexbox;
  display: flex;
  font-size: calc(1rem * 0.875);
  position: relative;
  background: #ecf5fc;
  border: solid 1px #c2e0ff;
  padding-left: 4px;
  border-radius: 2px;
  margin-right: 4px;
  margin-bottom: calc(1rem * 0.375);
}

.typeahead__label > * {
  -webkit-align-self: center;
  -ms-flex-item-align: center;
  align-self: center;
}

.typeahead__label .typeahead__cancel-button {
  line-height: normal;
  height: auto;
  position: static;
  padding-top: calc(1rem * 0.25 - 1px);
  padding-bottom: calc(1rem * 0.25 + 1px);
  padding-left: 6px;
  padding-right: 6px;
  margin-left: 4px;
  font-size: calc(1rem * 0.875);
  border-left: solid 1px #c2e0ff;
}

.typeahead__label .typeahead__cancel-button:hover {
  background-color: #d5e9f9;
}