forked from godaddy-wordpress/go
-
Notifications
You must be signed in to change notification settings - Fork 0
Commit
This commit does not belong to any branch on this repository, and may belong to a fork outside of the repository.
Improved site search bar (godaddy-wordpress#400)
* Add search-modal template partial * Output search modal in header * Refactor search_toggle to also toggle close button * Simplify z-index values * Set search query as search form value * Remove z-index value * Remove close icon from search toggle * Remove section-inner of search-modal * style search modal * Cleanup site-search styles * Fix search field focus * Two classes needed to handle animation * New search-toggle script * Tweak focus so cursor focuses at end of search input when a term exists * Remove comment from header.php * Theme header background is applied to search box * Use existing --admin-bar-lg media query * Add reduced motion preference for search bar drop-in * Tweak transition * Revert previously committed positioning style * Tweak site title in modern
- Loading branch information
1 parent
c8be57c
commit 6407410
Showing
16 changed files
with
189 additions
and
291 deletions.
There are no files selected for viewing
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
|
|
@@ -73,7 +73,6 @@ | |
| pointer-events: auto; | ||
| text-align: center; | ||
| visibility: visible; | ||
| z-index: 9998; | ||
|
|
||
| & a { | ||
| display: block; | ||
|
|
||
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
|
|
@@ -20,7 +20,6 @@ | |
| .header__title-nav { | ||
| flex: 1 0 75%; | ||
| order: 2; | ||
| z-index: 9999; | ||
| } | ||
|
|
||
| .header__extras { | ||
|
|
||
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,63 @@ | ||
| /*! Search Modal: */ | ||
| .search-modal { | ||
| background: rgba(0, 0, 0, 0.25); | ||
| bottom: 0; | ||
| display: none; | ||
| left: -9999rem; | ||
| opacity: 0; | ||
| overflow: -moz-scrollbars-none; | ||
| -ms-overflow-style: none; | ||
| position: fixed; | ||
| top: 0; | ||
| transition: opacity 0.15s linear, left 0s 0.15s linear; | ||
| width: 100%; | ||
| z-index: 10001; | ||
|
|
||
| @media (prefers-reduced-motion: reduce) { | ||
| transition: 0; | ||
| } | ||
|
|
||
| &::-webkit-scrollbar { | ||
| display: none !important; | ||
| } | ||
|
|
||
| &.show-modal { | ||
| display: block; | ||
| left: 0; | ||
| } | ||
|
|
||
| &.active { | ||
| cursor: pointer; | ||
| opacity: 1; | ||
| transition: opacity 0.2s linear; | ||
|
|
||
| & > * { | ||
| cursor: default; | ||
| } | ||
|
|
||
| & .search-modal-inner { | ||
| box-shadow: 0 0 2rem 0 rgba(0, 0, 0, 0.08); | ||
| transform: translateY(0); | ||
| transition: transform 0.25s ease-in-out, box-shadow 0.1s 0.25s linear; | ||
| } | ||
| } | ||
| } | ||
|
|
||
| .search-modal-inner { | ||
| background-color: hsl(var(--theme-header--bg, var(--color-white, #fff))); | ||
| padding: 3vw; | ||
| transform: translateY(-100%); | ||
| transition: transform 0.15s linear, box-shadow 0.15s linear; | ||
|
|
||
| @media (--medium) { | ||
| padding: var(--header-padding, 3vw) var(--theme-block-padding-x); | ||
| } | ||
| } | ||
|
|
||
| .admin-bar .search-modal.active { | ||
| top: 32px; | ||
|
|
||
| @media (--admin-bar-lg) { | ||
| top: 46px; | ||
| } | ||
| } |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -1,86 +1,58 @@ | ||
| /*! Header: Site Search */ | ||
| .header { | ||
| /*! Site Search: */ | ||
| .header .site-search { | ||
| z-index: 2; | ||
|
|
||
| & .site-search { | ||
| z-index: 2; | ||
| & .search-form { | ||
| display: flex; | ||
| } | ||
|
|
||
| & .search-form__input { | ||
| margin-bottom: 0; | ||
| } | ||
|
|
||
| @media (--large) { | ||
| left: 0; | ||
| opacity: 0; | ||
| pointer-events: none; | ||
| & .search-input__button { | ||
| border-radius: var(--theme-search-submit--radius, var(--theme-button--radius)); | ||
| box-shadow: none; | ||
| color: inherit; | ||
| margin: 0 0 0 0.5rem; | ||
| padding: 0 1.75rem; | ||
| position: relative; | ||
| transition: var(--theme-button-transition); | ||
| width: 50px; | ||
|
|
||
| & .search-input__label { | ||
| left: -5000px; | ||
| position: absolute; | ||
| right: -0.75rem; | ||
| transform: translateX(60%); | ||
| transition: opacity 175ms ease-out 75ms, transform ease-out 175ms; | ||
| } | ||
|
|
||
| & .search-form { | ||
| display: flex; | ||
| & .search-input__arrow-icon { | ||
| fill: hsl(var(--theme-search-submit--color)); | ||
| height: auto; | ||
| left: 50%; | ||
| position: absolute; | ||
| top: 50%; | ||
| transform: translate3d(-50%, -50%, 0); | ||
| width: 20px; | ||
| } | ||
|
|
||
| & .search-form__input { | ||
| margin-bottom: 0; | ||
| &::after { | ||
| display: none !important; | ||
| } | ||
|
|
||
| & .search-input__button { | ||
| background-color: hsl(var(--theme-search-submit--bg)); | ||
| border-radius: var(--theme-search-submit--radius, var(--theme-button--radius)); | ||
| &:active, | ||
| &:hover { | ||
| background-color: hsl(var(--theme-search-submit--bg-interactive)); | ||
| border-color: hsl(var(--theme-search-submit--bg-interactive)); | ||
| box-shadow: none; | ||
| color: inherit; | ||
| margin: 0 0 0 0.5rem; | ||
| padding: 0 1.75rem; | ||
| position: relative; | ||
| transition: var(--theme-button-transition); | ||
| width: 50px; | ||
|
|
||
| & .search-input__label { | ||
| left: -5000px; | ||
| position: absolute; | ||
| } | ||
|
|
||
| & .search-input__arrow-icon { | ||
| fill: hsl(var(--theme-search-submit--color)); | ||
| height: auto; | ||
| left: 50%; | ||
| position: absolute; | ||
| top: 50%; | ||
| transform: translate3d(-50%, -50%, 0); | ||
| width: 20px; | ||
| } | ||
|
|
||
| &::after { | ||
| display: none !important; | ||
| } | ||
|
|
||
| &:active, | ||
| &:hover { | ||
| background-color: hsl(var(--theme-search-submit--bg-interactive)); | ||
| border-color: hsl(var(--theme-search-submit--bg-interactive)); | ||
| box-shadow: none; | ||
|
|
||
| & .search-input__arrow-icon { | ||
| fill: hsl(var(--theme-search-submit--color)); | ||
| } | ||
| } | ||
|
|
||
| &:focus { | ||
| @mixin outline; | ||
| outline-offset: 2px; | ||
| } | ||
| } | ||
|
|
||
| /* When search becomes visible */ | ||
| &.is-open { | ||
| opacity: 1; | ||
| pointer-events: all; | ||
| transform: translateX(0); | ||
| z-index: 9999; | ||
| &:focus { | ||
| @mixin outline; | ||
| outline-offset: 2px; | ||
| } | ||
| } | ||
| } | ||
|
|
||
| /* Override aria defaults */ | ||
| .header__navigation .site-search[aria-hidden="true"] { | ||
| display: none; | ||
| visibility: visible; | ||
| } |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Oops, something went wrong.