Add default focus treatment to search

Bug: T218154
Depends-on: I73505c1d180f157939493883d50a4440a66ae995
Change-Id: I187f20d9ec7847b17a19be59e87a574d813a3a10
This commit is contained in:
Volker E 2019-03-12 14:55:40 -07:00
parent d119da1835
commit e75b3dfa37
1 changed files with 11 additions and 1 deletions

View File

@ -144,8 +144,11 @@ main {
/* Search */
.search-box .search {
@border-width-base: 1px;
@searchIconSize: 20px;
@searchIconGutter: 6px;
@padding-vertical-search: 8px - @border-width-base;
@padding-start-search-icon: @searchIconSize + ( 2 * @searchIconGutter ) - @border-width-base;
background-color: #fff; // Support Fennec, Opera Mini: Remove default background, see T38490.
background-position: left @searchIconGutter center;
background-repeat: no-repeat;
@ -154,12 +157,19 @@ main {
-webkit-appearance: none;
width: 100%;
margin-top: 0;
border: @border-width-base solid #fff;
border-radius: @borderRadius;
padding: 0.5em 0 0.5em @searchIconSize + (2 * @searchIconGutter);
padding: @padding-vertical-search 0 @padding-vertical-search @padding-start-search-icon;
box-shadow: 0 1px 1px rgba( 0, 0, 0, 0.05 );
// Keyboard focus is taken care of below at `.search-box .search:focus`.
outline: 0;
}
.search-box .search:focus {
border-color: @colorProgressive;
box-shadow: inset 0 0 0 1px @colorProgressive, 0 1px 1px rgba( 0, 0, 0, 0.05 );
}
input.search {
// [T139928] Hide all pseudo-elements added to search inputs in WebKit.
&::-webkit-search-decoration,