There are no notes for this item.
<div class="global-search" 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" 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>
.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('lg');
color: #FFF;
background-color: $maroon;
padding: $spacing-lg;
text-align: left;
@media (min-width: $fifth-breakpoint) {
@include typescale('xl');
}
& 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;
}
}
}