Skip to content

Instant Search: add more styling specificity to search input #14661

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Merged
keoshi merged 9 commits into from
Feb 20, 2020
Merged

Instant Search: add more styling specificity to search input #14661

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
9 commits
Select commit Hold shift + click to select a range
a2f7fe7
Ensure there's a cross to clear search on browsers that support it
keoshi Feb 13, 2020
2088dfe
Reduce font-size on results count text
keoshi Feb 13, 2020
c823444
Make close button behave similarly on different themes
keoshi Feb 13, 2020
dc548f2
Ensure there's a cross to clear search on browsers that support it
keoshi Feb 13, 2020
0748fd0
Reduce font-size on results count text
keoshi Feb 13, 2020
1d744b8
Make close button behave similarly on different themes
keoshi Feb 13, 2020
25d77f2
Merge branch 'update/instant-search-box-styling' of https://github.co…
keoshi Feb 13, 2020
9d6d6b2
Ensures the clear button is displayed in the search box
keoshi Feb 20, 2020
c80387e
Merge branch 'instant-search-master' into update/instant-search-box-s…
keoshi Feb 20, 2020
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
10 changes: 9 additions & 1 deletion modules/search/instant-search/components/search-box.scss
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -51,6 +51,14 @@ input.jetpack-instant-search__box-input.search-field {
.jetpack-instant-search__box input,
.jetpack-instant-search__box input[type='search'].jetpack-instant-search__box-input {
width: 100%;
height: 52px;
height: 52px;
transition: color, border-color 0.25s ease-in-out;

&::-webkit-search-decoration,
&::-webkit-search-cancel-button,
&::-webkit-search-results-button,
&::-webkit-search-results-decoration {
display: initial;
-webkit-appearance: searchfield;
Copy link
Contributor

@jsnmoon jsnmoon Feb 18, 2020

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Suggested change
-webkit-appearance: searchfield;
-webkit-appearance: searchfield;
display: initial;

This should fix the issue with 2020. These elements were being set to display: none.

Copy link
Contributor Author

@keoshi keoshi Feb 20, 2020

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Brilliant @jsnmoon ! Thanks for figuring that out. Added in 9d6d6b2

}
}
2 changes: 1 addition & 1 deletion modules/search/instant-search/components/search-results.scss
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -66,7 +66,7 @@
}

.jetpack-instant-search__search-results-real-query {
font-size: 1.5em;
font-size: 1em;
font-weight: bold;
}

Expand Down