// TODO: abstract and integrate @mixin search-icon {
@include add-background-svg("usa-icons-bg/search--white"); background-position: center center; background-size: units(3);
}
.usa-search {
@include border-box-sizing; @include clearfix; @include typeset($theme-search-font-family); position: relative; // if role is in the <form> element (>=2.6.0)... &[role="search"], // if there is a (=2.5.[0,1])... &[role="search"] > div, // ...or if the component has a separate <div[role="search"]> (<=2.4.0) [role="search"] { display: flex; } [type="submit"] { @include search-icon; border-bottom-left-radius: 0; border-top-left-radius: 0; height: units(4); margin: 0; padding: 0; width: units($theme-button-small-width); @include at-media("mobile-lg") { @include u-padding-x(2); background-image: none; width: auto; } }
}
.usa-search–big {
$height: units(6); [type="search"], .usa-search__input { @include at-media("mobile-lg") { font-size: font-size($theme-search-font-family, "sm"); height: $height; } } [type="submit"], .usa-search__submit { @include at-media("mobile-lg") { @include u-padding-x(4); font-size: font-size($theme-search-font-family, "lg"); height: $height; width: auto; } }
}
.usa-search–small {
[type="submit"], .usa-search__submit { @include at-media("mobile-lg") { @include search-icon; width: units($theme-button-small-width); } }
}
// Extra specificity to override rules set in normalize.css. input {
/* stylelint-disable-line selector-no-qualifying-type */ box-sizing: border-box; appearance: none;
}
[type=“search”], .usa-search__input {
@include u-padding-y(0); border-bottom-right-radius: 0; border-right: none; border-top-right-radius: 0; box-sizing: border-box; float: left; font-size: font-size($theme-search-font-family, "xs"); height: units(4); margin: 0;
}
.usa-search__submit-text {
@include sr-only; @include at-media("mobile-lg") { @include not-sr-only; }
}