7-rows edit

search-row edit

Search this site row

Search Row Title

Base row intro text. Lorem ipsum quia dolor sit amet, consectetur, adipisci velit. Nemo enim ipsam voluptatem quia voluptas sit aspernatur aut odit aut fugit.

HTML
Output
SCSS

Expand

Copy

Edit

<section class="page-theme-wrapper h-theme-white"> <div class="SearchRow wm-row h-theme-green"> <div class="wm-row__mainWrapper"> <h3 class="wm-row__title SearchRow__title">Search Row Title</h3> <div class="wm-row__intro-text SearchRow__intro-text"> <p>Base row intro text. Lorem ipsum quia dolor sit amet, consectetur, adipisci velit. Nemo enim ipsam voluptatem quia voluptas sit aspernatur aut odit aut fugit.</p> </div> <div class="SearchRow__search-form"> <form action="" class="" id="search_subsite1" method="get" role="search"> <label for="q-side1"> <span class="sr-only">Search This Site</span> </label> <div class="SearchRow__input-wrapper"> <input type="search" class="SearchRow__input" id="q-side1" name="q" placeholder="Search this site" /> <button class="SearchRow__submit-button" title="Submit" type="submit"> <span class="sr-only">Submit Search</span> </button> </div> </form> </div> </div> </div> </section>  <section class="page-theme-wrapper h-theme-silver"> <div class="SearchRow wm-row h-theme-green"> <div class="wm-row__mainWrapper"> <h3 class="wm-row__title SearchRow__title sr-only">Search Row Title</h3> <div class="wm-row__intro-text SearchRow__intro-text"> <p>Base row intro text. Lorem ipsum quia dolor sit amet, consectetur, adipisci velit. Nemo enim ipsam voluptatem quia voluptas sit aspernatur aut odit aut fugit.</p> </div> <div class="SearchRow__search-form"> <form action="" class="" id="search_subsite2" method="get" role="search"> <label for="q-side2"> <span class="sr-only">Search This Site</span> </label> <div class="SearchRow__input-wrapper"> <input type="search" class="SearchRow__input" id="q-side2" name="q" placeholder="Search this site. Lorem ipsum quia dolor sit amet, consectetur, adipisci velit. Nemo enim ipsam voluptatem quia voluptas sit aspernatur aut odit aut fugit." /> <button class="SearchRow__submit-button" title="Submit" type="submit"> <span class="sr-only">Submit Search</span> </button> </div> </form> </div> </div> </div> </section>  <section class="page-theme-wrapper h-theme-green"> <div class="SearchRow wm-row h-theme-green"> <div class="wm-row__mainWrapper"> <h3 class="wm-row__title SearchRow__title sr-only">Search Row Title</h3> <div class="SearchRow__search-form"> <form action="" class="" id="search_subsite3" method="get" role="search"> <label for="q-side3"> <span class="sr-only">Search This Site</span> </label> <div class="SearchRow__input-wrapper"> <input type="search" class="SearchRow__input" id="q-side3" name="q" placeholder="Search this site" /> <button class="SearchRow__submit-button" title="Submit" type="submit"> <span class="sr-only">Submit Search</span> </button> </div> </form> </div> </div> </div> </section>

Copy

Edit

/* scss/7-rows/_search-row.scss */ // row-specific overrides .SearchRow { &__input-wrapper { margin: 0 auto; display: flex; max-width: var(--size-row-text-width-max); } // using focus-within on wrapper so input and button can be styled &__input-wrapper:focus-within { & .SearchRow__input { border-color: var(--color-wmgreen-90); outline: none; color: black !important; &::placeholder { opacity: 0; } } & .SearchRow__submit-button { background-color: var(--theme-message-box-color) !important; border-color: var(--color-wmgreen-90); &:after { color: var(--color-wmgreen-90) !important; } &:focus:after, &:hover:after { color: var(--color-wmgold-55) !important; } } } &__input { flex: 1 1 auto; padding: 0 0 0 11px; font-size: 16px; color: rgba(0, 0, 0, 0.55); height: kspaces(lg); background-color: var(--theme-message-box-color); border: 1px solid rgba(0, 0, 0, 0.3); border-right: none; border-radius: 4px 0 0 4px; text-overflow: ellipsis; overflow: hidden; -webkit-appearance: none; @include breakpoint($mobile-to-wide-mobile-breakpoint) { font-size: 18px; padding-left: kspaces(sm) !important; } &::-webkit-search-cancel-button { -webkit-appearance: none; height: 24px; width: 24px; margin-left: 0.4em; background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='%23777'><path d='M19 6.41L17.59 5 12 10.59 6.41 5 5 6.41 10.59 12 5 17.59 6.41 19 12 13.41 17.59 19 19 17.59 13.41 12z'/></svg>"); cursor: pointer; } } &__submit-button { flex: 0 0 auto; padding: 0 11px 0 14px !important; height: kspaces(lg); background-color: var(--theme-message-box-color); border: 1px solid rgba(0, 0, 0, 0.3); border-left: none; border-radius: 0 4px 4px 0; font-size: 20px; cursor: pointer; display: flex; justify-content: center; align-items: center; max-height: kspaces(lg); margin: 0 !important; transition: all 0s !important; @include breakpoint($mobile-to-wide-mobile-breakpoint) { font-size: 22px; padding-right: kspaces(sm) !important; padding-left: 25px !important; } &:after { position: relative; content: "\f002"; color: rgba(0, 0, 0, 0.4); font-family: "Font Awesome 6 Pro"; transition: all 0.18s ease-in-out; } &:hover { background-color: var(--theme-message-box-color) !important; &:after { color: var(--color-wmgold-55) !important; } } &:focus { outline: 1px dotted var(--color-wmgreen-90) !important; outline-offset: -4px; } } }