mkdocs-material/src/assets/stylesheets/modules/search/_layout.scss

/*
 * Copyright (c) 2016 Martin Donath <martin.donath@squidfunk.com>
 *
 * Permission is hereby granted, free of charge, to any person obtaining a copy
 * of this software and associated documentation files (the "Software"), to
 * deal in the Software without restriction, including without limitation the
 * rights to use, copy, modify, merge, publish, distribute, sublicense, and/or
 * sell copies of the Software, and to permit persons to whom the Software is
 * furnished to do so, subject to the following conditions:
 *
 * The above copyright notice and this permission notice shall be included in
 * all copies or substantial portions of the Software.
 *
 * THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
 * IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
 * FITNESS FOR A PARTICULAR PURPOSE AND NON-INFRINGEMENT. IN NO EVENT SHALL THE
 * AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
 * LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING
 * FROM, OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS
 * IN THE SOFTWARE.
 */

/* ----------------------------------------------------------------------------
 * Search layout
 * ------------------------------------------------------------------------- */

/*
 * Search bar
 */
.bar.search {
  margin-top: 8px;

  /*
   * Search input
   */
  .query {
    font-size: 18px;
    padding: 13px 0;
    margin: 0;
    width: 100%;
    height: 48px;

    /* [tablet portait+]: Slightly larger typo */
    @include break-from-device(tablet portrait) {
      font-size: 20px;
      padding: 12px 0;
    }

    /* Hack [IE]: Hide redundant clear button */
    &::-ms-clear {
      display: none;
    }
  }
}

/*
 * Search results
 */
.results {
  position: fixed;
  top: 0;
  left: 0;
  width: 0;
  height: 100%;
  z-index: 2;
  overflow-y: scroll;
  -webkit-overflow-scrolling: touch;

  /* [tablet landscape+]: Limit results to five entries */
  @include break-from-device(tablet landscape) {
    height: auto;
    top: 64px;
  }

  /*
   * Scrollable container
   */
  .scrollable {
    top: 56px;

    /* [tablet portait+]: Increase vertical spacing */
    @include break-from-device(tablet portrait) {
      top: 64px;
    }

    /* [tablet landscape+]: Limit results to five entries */
    @include break-from-device(tablet landscape) {
      position: static;
      max-height: 413px;
    }

    /*
     * Leave room for status bar in iOS web application
     */
    .ios.standalone & {

      /* [orientation: portrait]: Account for status bar in portrait mode */
      @include break-at-orientation(portrait) {
        top: (56px + 20px);

        /* [tablet portait+]: Increase vertical spacing */
        @include break-from-device(tablet portrait) {
          top: (64px + 20px);
        }
      }
    }
  }

  /*
   * Active search mode
   */
  #toggle-search:checked ~ .main &,
  .toggle-search & {
    width: 100%;

    /* Hack [Firefox]: div doesn't collapse, unless this is applied */
    overflow-y: visible;

    /* [tablet portait+]: Stretch to viewport */
    @include break-to-device(tablet landscape) {
      height: 100%;
    }
  }

  /*
   * Search meta data
   */
  .meta {
    font-weight: 700;

    /*
     * Number of results
     */
    strong {
      display: block;
      font-size: 11px;
      max-width: 1200px;
      margin-left: auto;
      margin-right: auto;
      padding: 16px;

      /* [tablet portait+]: Increase vertical spacing */
      @include break-from-device(tablet portrait) {
        padding: 16px 24px;
      }
    }
  }

  /*
   * Search result item link
   */
  .list a {
    display: block;
  }
}

/*
 * Search result item
 */
.result {
  max-width: 1200px;
  margin-left: auto;
  margin-right: auto;
  padding: 12px 16px 16px;

  /* [tablet portait+]: Increase vertical spacing */
  @include break-from-device(tablet portrait) {
    padding: 16px 24px 20px;
  }

  /*
   * Article title
   */
  h1 {
    line-height: 24px;
    text-overflow: ellipsis;
    white-space: nowrap;
    overflow: hidden;
  }

  /*
   * Article link
   */
  span {
    font-size: 12px;
    text-overflow: ellipsis;
    white-space: nowrap;
    overflow: hidden;
  }
}

/*
 * Switch visibility, if browser doesn't support 3D transforms
 */
.no-csstransforms3d {

  /*
   * Hide search results
   */
  .results {
    display: none;
  }

  /*
   * Active search mode
   */
  #toggle-search:checked ~ .main,
  .toggle-search {

    /*
     * Show search results
     */
    .results {
      display: block;
      overflow: auto;
    }
  }
}