flox/client/resources/sass/components/_search.scss

.search-wrap {
  float: left;
  width: 100%;
  //position: absolute;
  box-shadow: 0 0 70px 0 rgba(0, 0, 0, .3);
  background: #fff;
  //z-index: 200;
  opacity: 0;

  .dark & {
    background: #2f2f2f;
  }

  .open-modal & {
    padding: 0 16px 0 0;
  }

  .subpage-open & {
    background: none;
    box-shadow: none;
    position: absolute;
    top: auto;
    left: auto;
  }

  .active & {
    transition: opacity .7s ease .1s;
    opacity: .97;
  }
}

.search-form {
  float: right;
  width: 100%;
  position: relative;

  @include transition(padding);

  .sticky & {
    //padding: 0 0 0 50px;
  }

  .subpage-open & {
    padding: 0;
  }
}

.search-input {
  float: left;
  background: transparent;
  width: 100%;
  border: 0;
  font-size: 19px;
  padding: 12px 0 12px 30px;
  color: $dark;

  .dark & {
    color: #989898;
  }

  @include media(5) {
    font-size: 16px;
  }

  .subpage-open & {
    color: #fff;
  }
}

.icon-search {
  background: url(../../../public/assets/img/search.png);
  height: 20px;
  width: 20px;
  position: absolute;
  left: 0;
  top: 15px;
  opacity: .5;

  @include transition(left);

  .dark & {
    background: url(../../../public/assets/img/search-dark.png);
  }

  .sticky & {
    //left: 50px;
  }

  .subpage-open & {
    background: url(../../../public/assets/img/search-dark.png);
    opacity: 1;
    left: 0;
  }
}

.icon-logo-small {
  background: url(../../../public/assets/img/logo-small.png);
  width: 32px;
  height: 25px;
  opacity: 0;
  top: 12px;
  left: -50px;
  position: absolute;

  @include transition(opacity, left);

  .sticky & {
    opacity: 1;
    left: 0;

    .dark & {
      opacity: .9;
    }

    &:active {
      opacity: .6;
    }
  }

  .subpage-open & {
    display: none;
  }
}