No notes defined.
<form class="intranetSearch">
<div class="intranetSearch__searchField">
<label class="visually-hidden">Search MySSW</label>
<input class="intranetSearch__searchInput" type="text" placeholder="Search MySSW..." />
<button class="intranetSearch__searchButton" type="submit" aria-label="Search" title="Search">Search</button>
</div>
<a href="">Advanced Search</a>
</form>
<form class="intranetSearch">
<div class="intranetSearch__searchField">
<label class="visually-hidden">Search MySSW</label>
<input class="intranetSearch__searchInput" type="text" placeholder="Search MySSW..."/>
<button class="intranetSearch__searchButton" type="submit" aria-label="Search" title="Search">Search</button>
</div>
<a href="">Advanced Search</a>
</form>
.intranetSearch {
margin-bottom: $spacing-lg;
&__searchField {
position: relative;
box-sizing: border-box;
display: flex;
width: 100%;
margin-bottom: $spacing-xs;
padding: $spacing-xs;
border: 1px solid $grey--light;
border-radius: $border-radius-sm;
background: $offwhite;
@include typescale('lg');
@supports selector(focus-within) {
&:focus-within {
border-color: $tertiary;
}
}
@media (min-width: $breakpoint-largescreen-typography) {
@include typescale('xl');
padding: $spacing-sm;
}
}
&__searchInput {
flex: 999 1 auto;
border: 0;
background: transparent;
min-width: 0;
max-width: none;
@supports selector(focus-within) {
outline: none;
}
}
&__searchButton {
flex: 1 1 2em;
appearance: none;
border: 0;
background: center center / 80% no-repeat url('#{$assets-directory}/img/rarr-tertiary.svg');
cursor: pointer;
text-indent: -9999em;
&:hover,
&:focus {
opacity: 0.75;
}
}
a {
@include typescale('sm');
color: $grey;
}
}