thinkful-ui/src/SearchBar/search-bar.less

Shared navigation and UI resources for Thinkful.

@import "~tfstyleguide/vars";

.search-bar__nav {
  background-color: @white;
  left: 0;
  right: 0;
  top: 0;
  pointer-events: all;
  transition: opacity .22s ease;
  display: none;

  @media @tablet {
    position: absolute;
    height: 240px;
    top: 46px;
    display: inline-block;
    width: 100vw;
    left: 50%;
    transform: translateX(-50vw);
  }
}

.app-nav-link__mobile-only__search + .search-bar__active {
  display: inline-block;
}

.search-bar__hidden {
  pointer-events: none;
  opacity: 0;
  top: -100%;
  position: fixed;
}

.search-bar__active {
  opacity: 1;
  background-color: transparent;
  position: absolute;
  pointer-events: none;
  top: 46px;

  .search-home-link {
    pointer-events: all;
    &.search-home-link__active-hidden {
      display: none;
    }
  }

  .search-suggestions {
    border-top: none;
    width: 100vw;
    left: 50%;
    transform: translateX(-50vw);
    position: absolute;
  }
}

.search-underlay {
  position: absolute;
  width: 100vw;
  height: ~"calc(100vh - 286px)";
  top: 240px;
  bottom: 0;
  left: 0;
  right: 0;
  background-image: linear-gradient(@white, transparent);
  z-index: -1;
}

.search-form-container {
  width: @grid-width;
  margin-left: auto;
  margin-right: auto;
  max-width: 100%;
}

@keyframes wiggle {
    10% { -webkit-transform: scale(1); }
    25% { transform: scale(1.3); }
    40% { transform: scale(1); }
    55% { -webkit-transform: rotate(-2deg) scale(1); }
    60% { -webkit-transform: rotate(2deg); }
    70% { -webkit-transform: rotate(-2deg); }
    80% { -webkit-transform: rotate(2deg); }
    90% { -webkit-transform: rotate(0deg); }
}

@keyframes colorburst {
  0% { box-shadow: 0 0 0 2px @red50; }
  15% { box-shadow: 0 0 0 4px @orange; }
  30% { box-shadow: 0 0 0 6px @yellow; }
  50% { box-shadow: 0 0 0 8px @green75; }
  75% { box-shadow: 0 0 0 6px @blue75; }
  85% { box-shadow: 0 0 0 4px @purple20; }
  100% { box-shadow: 0 0 0 2px @gray15; }
}

.search-form {
  position: relative;
  width: (5 * @column-px) + (4 * @gutter-px);
  display: inline-block;
  max-width: 100%;
  padding-left: 15px;
  padding-right: 15px;
  padding-top: 35px;
  padding-bottom: 15px;
  pointer-events: all;

  @media @tablet {
    padding-bottom: 30px;
    padding-top: 60px;
    padding-left: 0;
    padding-right: 0;
  }

  .search-input {
    display: inline-block;
    padding-left: 45px;
    padding-right: 45px;
    margin-bottom: 0;
    min-width: 0;
    width: 100%;

    @media @tablet {
      min-width: inherit;
      max-width: inherit;
    }

    &.wiggle {
      animation: wiggle 1s, colorburst .5s;
    }
  }

  .icon-search {
    color: @blue;
    font-size: 24px;
    position: absolute;
    top: 50px;
    left: 25px;
    @media @tablet {
      left: 15px;
      top: 75px;
    }
  }

  .icon-close {
    color: @blue;
    font-size: 24px;
    cursor: pointer;
    position: absolute;
    top: 50px;
    right: 25px;
    &:hover {
      color: @blue75;
    }
    @media @tablet {
      right: 15px;
      top: 75px;
    }
  }
}

.search-home-link {
  margin-left: 30px;
}

.search-suggestions {
  width: 100%;
  background-color: @white;
  border-top: 2px solid @gray15;
  border-bottom: 2px solid @gray15;
  color: @gray75;
  z-index: 1;
  // box-shadow: 0 0px 15px 3px @gray25;
}

.suggestion-item {
  cursor: pointer;
  height: 45px;
  border-top: 1px solid transparent;
  border-bottom: 1px solid transparent;
  background-color: @white;
  transition: background-color .11s ease,
              border-top-color .11s ease,
              border-bottom-color .11s ease;

  p {
    width: @grid-width;
    margin-left: auto;
    margin-right: auto;
    max-width: 100%;
    padding-top: 5px;
    padding-left: 15px;
    padding-right: 15px;
    margin-bottom: 0;
    display: block;

    @media @tablet {
      padding-left: 45px;
      padding-right: 0;
    }
  }

  &.suggestion-item__active {
    background-color: @gray15;
    border-top-color: @gray25;
    border-bottom-color: @gray25;
    transition: background-color .11s ease,
                border-top-color .11s ease,
                border-bottom-color .11s ease;
  }
}