aux-search/src/index.scss

body {
  position: relative;
  min-height: 100vh;
}

#content {
  padding-bottom: 4rem;
}

footer {
  position: absolute;
  bottom: 0;
  width: 100%;
  height: 4rem;
}

header .navbar.navbar-static-top {
  .brand {
    padding-bottom: 0;
  }
  img.logo {
    margin-top: -5px;
    padding-right: 5px;
    line-height: 25px;
    height: 25px;
  }
  ul.nav > li {
    line-height: 20px;
  }
}

.search-page {
  .search-input.with-suggestions-loading {
    .input-append div.loader {
      display: block;
    }
  }
  .search-input.with-suggestions {
    ul.dropdown-menu {
      display: block;
    }
    .input-append input {
      border-radius: 4px 0 0 0;
    }
  }
  .search-input {
    position: relative;
    ul.dropdown-menu {
      font-size: 18px;
      width: 25.6em;
      height: auto;
      max-height: 200px;
      border-radius: 0;
      margin-top: -10px;
      border-top: 0;
      overflow-y: scroll;
      li > a {
        font-size: 14px;
      }
      li > a#dropdown-menu-selected {
        color: #fff;
        text-decoration: none;
        background-color: #0081c2;
        background-image: -moz-linear-gradient(top,#08c,#0077b3);
        background-image: -webkit-gradient(linear,0 0,0 100%,from(#08c),to(#0077b3));
        background-image: -webkit-linear-gradient(top,#08c,#0077b3);
        background-image: -o-linear-gradient(top,#08c,#0077b3);
        background-image: linear-gradient(to bottom,#08c,#0077b3);
        background-repeat: repeat-x;
        filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#ff0088cc',endColorstr='#ff0077b3',GradientType=0);
      }
    }
    .input-append {
      position: relative;
      input {
        font-size: 18px;
        height: 40px;
        width: 25em;
      }
      div.loader {
        display: none;
        z-index: 100;
        position: absolute;
        margin: 0;
        top: 37px;
        right: 125px;
        font-size: 6px;
        color: #999999;
      }
      button {
        font-size: 24px;
        height: 50px;
        min-width: 4em;
      }
    }
    form > p > strong {
      vertical-align: middle;
      font-size: 1.2em;
      margin-left: 0.2em;
    }
  }
  .search-result {
    tbody > tr {
      cursor: pointer;
    }
    tbody > td > dl > dd > ul.inline {
      margin: 0;
      li {
        margin: 0;
        padding: 0;
      }
      li::after {
        content: ", ";
        padding-right: 0.5em;
      }
      li:last-child::after {
        content: "";
      }
    }
    tbody > td > dl > dd > pre {
      background: transparent;
      border: 0;
      padding: 0;
      line-height: 20px;
      margin: 0;
    }
    tbody > td > dl > dt,
    tbody > td > dl > dd {
      margin-bottom: 1em;
    }
  }
}

.loader,
.loader:before,
.loader:after {
  background: transparent;
  -webkit-animation: load1 1s infinite ease-in-out;
  animation: load1 1s infinite ease-in-out;
  width: 1em;
  height: 4em;
}
.loader {
  color: #000000;
  text-indent: -9999em;
  margin: 88px auto;
  position: relative;
  font-size: 11px;
  -webkit-transform: translateZ(0);
  -ms-transform: translateZ(0);
  transform: translateZ(0);
  -webkit-animation-delay: -0.16s;
  animation-delay: -0.16s;
}
.loader:before,
.loader:after {
  position: absolute;
  top: 0;
  content: '';
}
.loader:before {
  left: -1.5em;
  -webkit-animation-delay: -0.32s;
  animation-delay: -0.32s;
}
.loader:after {
  left: 1.5em;
}
@-webkit-keyframes load1 {
  0%,
  80%,
  100% {
    box-shadow: 0 0;
    height: 4em;
  }
  40% {
    box-shadow: 0 -2em;
    height: 5em;
  }
}
@keyframes load1 {
  0%,
  80%,
  100% {
    box-shadow: 0 0;
    height: 4em;
  }
  40% {
    box-shadow: 0 -2em;
    height: 5em;
  }
}