University of Staffordshire Pattern Library

Global Search

No notes defined.

<div class="global-search  global-search--open" id="global-search" role="form">
    <button class="global-search__close" id="global-search__close" type="button">
        <svg width="0" height="0" style="position:absolute">
            <symbol viewBox="0 0 16 16" id="icon-close-white" xmlns="http://www.w3.org/2000/svg">
                <title>Atoms/Iconography/close-white@2x</title>
                <path d="M16 1.61L9.61 8 16 14.39 14.39 16 8 9.61 1.61 16 0 14.39 6.39 8 0 1.61 1.61 0 8 6.39 14.39 0z" fill="currentColor" fill-rule="evenodd" />
            </symbol>
        </svg>
        <span><svg xmlns="http://www.w3.org/2000/svg" class="icon icon-close-white">
                <use xmlns:xlink="http://www.w3.org/1999/xlink" xlink:href="#icon-close-white"></use>
            </svg></span>
        <span class="visually-hidden">Close search</span>
    </button>
    <div class="global-search__container">
        <div id="global-search__options" class="grid  global-search__options">
            <div class="col-1/4@tablet  col-full@mobile">
                <input class="global-search__scope" id="global-search__scope--courses" name="cScope" type="radio" value="courses" checked="">
                <label for="global-search__scope--courses">Search courses</label>
                <br>
                <input class="global-search__scope" id="global-search__scope--site" name="cScope" type="radio" value="wholeSite">
                <label for="global-search__scope--site">Search staffs.ac.uk</label>
            </div>
            <div class="col-3/4@tablet  col-full@mobile">
                <input class="global-search__keywords" id="global-search__keywords--courses" name="cQueryH" type="search" placeholder="Search courses">
                <input class="global-search__keywords  visually-hidden" id="global-search__keywords--whole-site" name="cQueryH" type="search" placeholder="Search staffs.ac.uk">
            </div>
        </div>
        <p class="global-search__hint">Hit enter to search or ESC to close</p>
    </div>
</div>
 
<div class="global-search{{ closed == true ? '' : '  global-search--open'}}" id="global-search" role="form">
    <button class="global-search__close" id="global-search__close" type="button">
        <svg width="0" height="0" style="position:absolute"><symbol viewBox="0 0 16 16" id="icon-close-white" xmlns="http://www.w3.org/2000/svg"><title>Atoms/Iconography/close-white@2x</title><path d="M16 1.61L9.61 8 16 14.39 14.39 16 8 9.61 1.61 16 0 14.39 6.39 8 0 1.61 1.61 0 8 6.39 14.39 0z" fill="currentColor" fill-rule="evenodd"/></symbol></svg>
        <span><svg xmlns="http://www.w3.org/2000/svg" class="icon icon-close-white"><use xmlns:xlink="http://www.w3.org/1999/xlink" xlink:href="#icon-close-white"></use></svg></span>
        <span class="visually-hidden">Close search</span>
    </button>
    <div class="global-search__container">
        <div id="global-search__options" class="grid  global-search__options">
            <div class="col-1/4@tablet  col-full@mobile">
                <input class="global-search__scope" id="global-search__scope--courses" name="cScope" type="radio" value="courses" checked="">
                <label for="global-search__scope--courses">Search courses</label>
                <br>
                <input class="global-search__scope" id="global-search__scope--site" name="cScope" type="radio" value="wholeSite">
                <label for="global-search__scope--site">Search staffs.ac.uk</label>
            </div>
            <div class="col-3/4@tablet  col-full@mobile">
                <input class="global-search__keywords" id="global-search__keywords--courses" name="cQueryH" type="search" placeholder="Search courses">
                <input class="global-search__keywords  visually-hidden" id="global-search__keywords--whole-site" name="cQueryH" type="search" placeholder="Search staffs.ac.uk">
            </div>
        </div>
        <p class="global-search__hint">Hit enter to search or ESC to close</p>
    </div>
</div>
  • Content: 
    .global-search {
    opacity: 0;
    transition: opacity 0.5s;
    position: fixed;
    z-index: -1;
    top: 0;
    right: 0;
    width: 100%;
    height: 100%;
    background: rgba(0, 0, 0, 0.9);
    text-align: right;
  
    &__container {
      margin: $spacing-4xl auto;
      padding: $spacing-xl;
      
      @media (min-width: $fifth-breakpoint) {
        max-width: 60%;
      }
    }
  
    &__options {
      @include typescale('sm');
      color: #FFF;
      background-color: $teal;
      padding: $spacing-lg;
      text-align: left;
  
      @media (min-width: $fifth-breakpoint) {
        @include typescale('md');
      }
  
      & label {
          clear: right;
      }
    }
  
    &__keywords[type='search'] {
      max-width: 100%;
    }
  
    &__hint {
      color: #FFF;
    }
  
    &--open {
      opacity: 1;
      pointer-events: auto;
      z-index: 999;
    }
  
    &__close {
      background: none;
      border: 0;
      color: #FFF;
      @include typescale('3xl');
      padding: $spacing-lg;
  
      &:hover {
        cursor: pointer;
      }
    }
  }
  • URL: /components/raw/global-search/_global-search.scss
  • Filesystem Path: src\components\global-search\_global-search.scss
  • Size: 1.2 KB