Y-SLD/assets/playkit/examples/scss/pages/search.scss

@import '../base';

//========== Search Form
.s__form-wrap {
  padding: 2rem 1.5rem;
  border: 1px solid $border-color-default;
  border-radius: $border-radius;
  margin-bottom: 2rem;

  @include media-breakpoint-up(sm) {
    padding: 2.5rem 2rem;
  }

  @include media-breakpoint-up(md) {
    padding: 3.5rem;
  }
}

.s__form-inner {
  display: flex;
  flex-direction: column;
  
  .s__form-input-group {
    margin-bottom: 24px;
  }
  
  .s__form-field,
  .s__form-cats-btn,
  .s__form-submit-btn {
    box-shadow: none;
    outline: none;
  }

  .s__form-cats-btn {
    color: $gray-light;
  }

  .s__form-submit-btn,
  .s__form-input-group {
    height: 3.5rem;
  }

  @include media-breakpoint-up(sm) {
    flex-direction: row;
    .s__form-input-group {
      margin-right: 2rem;
      margin-bottom: 0;
    }

    .s__form-submit-btn {
      flex: 0 0 25%;
      width: 25%;
    }
  }

  @include media-breakpoint-up(md) {
    height: 4rem;
    .s__form-submit-btn,
    .s__form-input-group {
      height: 4rem;
    }

    .s__form-submit-btn {
      flex: 0 0 18%;
      width: 18%;
    }
  }
}

//========== Search Type
.s__type-wrap {
  border: 1px solid $border-color-default;
  border-radius: $border-radius;
  margin-bottom: 2rem;
  margin-right: auto;
  margin-left: auto;
  
  ul {
    padding: 0;
    margin: 0;
    list-style-type: none;
  }

  @include media-breakpoint-up(md) {
    width: 80%;
  }

  @include media-breakpoint-up(lg) {
    width: 60%;
  }
}

.s__type-list {
  li {
    margin-bottom: -2px;
  }

  a {
    display: block;
    font-weight: 400;
    letter-spacing: 1px;
    padding: 1.5rem .5rem;
    font-size: 1rem;
    text-transform: uppercase;
    border-bottom: 2px solid transparent;
  }

  a:hover,
  a:focus,
  li.active a {
    border-bottom-color: $brand-success;
  }
}