$usa-btn-small-width: 4.5rem; $usa-btn-medium-width: 8.5rem; $usa-btn-big-width: 11.6rem;
@mixin search-icon {
background-image: url('#{$image-path}/search.png'); background-image: url('#{$image-path}/search.svg'); background-position: 50%; background-repeat: no-repeat;
}
.usa-search {
@include clearfix; max-width: none; position: relative; [type=submit], .usa-search-submit { @include search-icon; border-bottom-left-radius: 0; border-top-left-radius: 0; height: 3.3rem; margin: 0; padding: 0; width: $usa-btn-small-width; @include media($small-screen) { background-image: none; width: $usa-btn-medium-width; } } &.usa-search-big { @include media($small-screen) { $height: 4.4rem; $width: $usa-btn-big-width; [type=search], .usa-search-input { font-size: $base-font-size; height: $height; width: calc(100% - #{$width}); } [type=submit], .usa-search-submit { font-size: $h3-font-size; height: $height; width: $width; } } } &.usa-search-small { @include media($small-screen) { $width: $usa-btn-small-width; [type=search], .usa-search-input { width: calc(100% - #{$width}); } [type=submit], .usa-search-submit { @include search-icon; width: $width; } } $lt-nav-width: $nav-width - 1px; @media screen and (max-width: $lt-nav-width) { &.usa-sr-only { left: auto; position: relative; } } }
}
// Extra specificity to override rules set in reset.css. input { /* stylelint-disable-line selector-no-qualifying-type */
box-sizing: border-box; appearance: none;
}
[type=search], .usa-search-input {
@include padding(0 null); border-bottom-right-radius: 0; border-right: none; border-top-right-radius: 0; box-sizing: border-box; float: left; font-size: $small-font-size; height: 3.3rem; margin: 0; width: calc(100% - #{$usa-btn-small-width}); @include media($small-screen) { width: calc(100% - #{$usa-btn-medium-width}); }
}
.usa-search-submit-text {
@include sr-only; @include media($small-screen) { @include not-sr-only(); }
}