<form class="search-form search-form--durp" aria-label="search page form" role="search" method="get" id="search-form" action="">
<div class="search-form__container">
<label class="search-form__input-label" for="search-input">Search for keywords</label>
<input class="search-form__input" placeholder="Enter search term" type="text" id="search-input" value="" name="s" required="required" />
<button class="search-form__clear-button" type="button" role="button" onclick="document.getElementById('search-input').value = '';document.getElementById('search-input').focus();">
<span class="search-form__clear-button-text">
Clear input field
</span>
<span class="search-form__clear-button-icon">
<svg aria-hidden="true" class="clear-icon" xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24">
<path class="clear-icon__shape" fill="#E84A27" d="M12 0c6.627 0 12 5.373 12 12s-5.373 12-12 12S0 18.627 0 12 5.373 0 12 0zm0 2C6.477 2 2 6.477 2 12s4.477 10 10 10 10-4.477 10-10S17.523 2 12 2zM8.613 7.21l.094.083L12 10.585l3.293-3.292c.39-.39 1.024-.39 1.414 0 .36.36.388.928.083 1.32l-.083.094L13.415 12l3.292 3.293c.39.39.39 1.024 0 1.414-.36.36-.928.388-1.32.083l-.094-.083L12 13.415l-3.293 3.292c-.39.39-1.024.39-1.414 0-.36-.36-.388-.928-.083-1.32l.083-.094L10.585 12 7.293 8.707c-.39-.39-.39-1.024 0-1.414.36-.36.928-.388 1.32-.083z"/>
</svg>
</span>
</button>
<input class="search-form__submit" type="submit" id="search-submit" value="Search" />
<div class="search-form__submit-icon">
<svg aria-hidden="true" class="search-large-icon" xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24">
<path class="search-large-icon__shape" fill="#E84A27" d="M17.613 16.21l.094.083 6 6c.39.39.39 1.024 0 1.414-.36.36-.928.388-1.32.083l-.094-.083-6-6c-.39-.39-.39-1.024 0-1.414.36-.36.928-.388 1.32-.083zM9 0c4.97 0 9 4.03 9 9s-4.03 9-9 9-9-4.03-9-9 4.03-9 9-9zm0 2C5.134 2 2 5.134 2 9s3.134 7 7 7 7-3.134 7-7-3.134-7-7-7z"/>
</svg>
</div>
</div>
</form>
<form class="search-form search-form--{{ siteUnit }}" aria-label="search page form" role="search" method="get" id="search-form" action="{{site.link}}">
<div class="search-form__container">
<label class="search-form__input-label" for="search-input">Search for keywords</label>
<input class="search-form__input" placeholder="Enter search term" type="text" id="search-input" value="{{ search.term }}" name="s" required="required" />
<button class="search-form__clear-button" type="button" role="button" onclick="document.getElementById('search-input').value = '';document.getElementById('search-input').focus();">
<span class="search-form__clear-button-text">
Clear input field
</span>
<span class="search-form__clear-button-icon">
{% include 'bits/icons/clear-x.twig' %}
</span>
</button>
<input class="search-form__submit" type="submit" id="search-submit" value="Search" />
<div class="search-form__submit-icon">
{% include 'bits/icons/search-large.twig' %}
</div>
</div>
</form>
{
"siteUnit": "durp",
"departmentName": "Music",
"background": "light",
"post": {
"term": "Nancy Drew"
}
}
breakpoint = 580px
.search-form
--iconFillColor illiniOrange
--iconFillColorActive black
--borderColorActive illiniOrange
--backgroundColorActive transparent
--textColorActive black
&--arch
--iconFillColor industrialBlue
--borderColorActive industrialBlue
--backgroundColorActive industrialBlue
--textColorActive white
--iconFillColorActive white
&--art
--iconFillColor archesBlue
--borderColorActive archesBlue
--backgroundColorActive archesBlue
--textColorActive charcoal
--iconFillColorActive charcoal
&--college
--iconFillColor illiniOrange
--borderColorActive illiniOrange
--backgroundColorActive illiniOrange
--textColorActive illiniBlue
--iconFillColorActive illiniBlue
&--dance
--iconFillColor archesBlue
--borderColorActive archesBlue
--backgroundColorActive archesBlue
--textColorActive charcoal
--iconFillColorActive charcoal
&--durp
--iconFillColor illiniOrange
--borderColorActive illiniOrange
--backgroundColorActive illiniOrange
--textColorActive illiniBlue
--iconFillColorActive illiniBlue
&--landarch
--iconFillColor illiniOrange
--borderColorActive illiniOrange
--backgroundColorActive illiniOrange
--textColorActive illiniBlue
--iconFillColorActive illiniBlue
&--theatre
--iconFillColor illiniOrange
--borderColorActive illiniOrange
--backgroundColorActive illiniOrange
--textColorActive illiniBlue
--iconFillColorActive illiniBlue
&--music
--iconFillColor illiniOrange
--borderColorActive illiniOrange
--backgroundColorActive illiniOrange
--textColorActive illiniBlue
--iconFillColorActive illiniBlue
&__container
align-items center
@supports (display: grid)
display grid
grid-template-columns 1fr 144px
+below(breakpoint)
grid-template-columns 1fr 56px
grid-template-areas "input submit"
&__input-label
@extends $invisible
&__input
@extends $headline2
background-color white
border 2px solid charcoalLighter
border-radius 100px 0 0 100px
color charcoalLight
padding 16px 50px 16px 24px
transition border-color .3s ease
+below(breakpoint)
padding 10px 16px 10px 16px
primaryLink()
grid-area input
&::placeholder
color grey
font-weight normal
&:focus
border-color var(--borderColorActive)
outline none
& ~ ^[0]__submit
border-color var(--borderColorActive)
&__submit-icon
display flex
grid-area submit
margin-left auto
margin-right 24px
pointer-events none
& .search-large-icon
& .search-large-icon__shape
fill var(--iconFillColor)
& path
transition all .3s ease
+below(breakpoint)
margin 0 18px 0 14px
&__submit
@extends $primaryLink
background-color cloud
border 2px solid charcoalLighter
border-left none
border-radius 0 100px 100px 0
color charcoalLight
cursor pointer
grid-area submit
height 100%
padding 16px 56px 16px 24px
transition all .3s ease
+below(breakpoint)
color transparent
padding 0
&:focus
&:hover
fill var(--iconFillColorActive)
background-color var(--backgroundColorActive)
color var(--textColorActive)
border-color var(--borderColorActive)
&:focus
&:hover + .search-form__submit-icon path
fill var(--iconFillColorActive)
background-color var(--backgroundColorActive)
color var(--textColorActive)
border var(--borderColorActive)
&__clear-button
cursor pointer
grid-area input
margin-left auto
margin-right 16px
& .clear-icon
& .clear-icon__shape
fill var(--iconFillColor)
+below(breakpoint)
display none
&__clear-button-text
@extends $invisible
&__clear-button-icon
display flex
There are no notes for this item.