<div class="quick-search quick-search--durp quick-search--large">
<form role="search" method="get" aria-label="quick search form" id="quick-search-form" class="quick-search__form" action="">
<input id="quick-search-input" name="s" type="text" placeholder="Search" class="quick-search__input quick-search__input--large">
<label for="quick-search-input" class="quick-search__input-label">
Search the website
</label>
<div class="quick-search__icon">
<svg aria-hidden="true" class="search-icon" xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewBox="0 0 16 16">
<path class="_mark" fill="inherit" d="M6 12A6 6 0 116 0a6 6 0 010 12zm0-2a4 4 0 100-8 4 4 0 000 8zm5.293 2.707a1 1 0 011.414-1.414l3 3a1 1 0 01-1.414 1.414l-3-3z"/>
</svg>
</div>
<input aria-label="submit search query" class="quick-search__submit" type="submit" id="quick-search-submit" value="Search" />
</form>
</div>
<div class="quick-search quick-search--{{ siteUnit }} {{ isLarge ? 'quick-search--large' }}">
<form role="search" method="get" aria-label="quick search form" id="{{ id|default('quick-search') }}-form" class="quick-search__form" action="{{site.link}}">
<input id="{{ id|default('quick-search') }}-input" name="s" type="text" placeholder="Search" class="quick-search__input {{ isLarge ? 'quick-search__input--large' }}">
<label for="{{ id|default('quick-search') }}-input" class="quick-search__input-label">
Search the website
</label>
<div class="quick-search__icon">
{% include 'bits/icons/search.twig' %}
</div>
<input aria-label="submit search query" class="quick-search__submit" type="submit" id="{{ id|default('quick-search') }}-submit" value="Search" />
</form>
</div>
{
"siteUnit": "durp",
"departmentName": "Department of Urban and Regional Planning",
"background": "dark",
"isLarge": true
}
.quick-search
--backgroundColor cloud
--icon-color illiniOrange
--itemTextColor greyDarkest
&--arch
--backgroundColor cloud
--icon-color industrialBlue
--itemTextColor greyDarkest
&--art
--backgroundColor cloud
--icon-color archesBlue
--itemTextColor greyDarkest
&--college
--backgroundColor cloud
--icon-color illiniOrange
--itemTextColor illiniBlue
&--dance
--backgroundColor charcoalDark
--icon-color archesBlue
--itemTextColor white
&--durp
--backgroundColor cloud
--icon-color illiniOrange
--itemTextColor greyDarkest
&--theatre
--backgroundColor illiniBlueDark
--icon-color illiniOrange
--itemTextColor white
&--music
--backgroundColor almaMaterDark
--icon-color illiniOrange
--itemTextColor white
@extends $eyebrowPill
background-color var(--backgroundColor)
&__form
align-items center
display inline-flex
width 100%
&__icon
display flex
margin-left 8px
svg
fill var(--icon-color)
&__input-label
position absolute
z-index -1
left -100vw
&__input
width 50px
transition all 0.3s
color var(--itemTextColor)
&::placeholder
color var(--itemTextColor)
&:focus
width 200px
&__submit
@extends $invisible
&--large
padding 10px 20px
background-color white
width 100%
&__input--large
font-size 20px
width 100%
&::placeholder
color greyDarkest
&:focus
width 100%
There are no notes for this item.