Add default focus treatment to search
Bug: T218154 Depends-on: I73505c1d180f157939493883d50a4440a66ae995 Change-Id: I187f20d9ec7847b17a19be59e87a574d813a3a10
This commit is contained in:
parent
d119da1835
commit
e75b3dfa37
@ -144,8 +144,11 @@ main {
|
|||||||
|
|
||||||
/* Search */
|
/* Search */
|
||||||
.search-box .search {
|
.search-box .search {
|
||||||
|
@border-width-base: 1px;
|
||||||
@searchIconSize: 20px;
|
@searchIconSize: 20px;
|
||||||
@searchIconGutter: 6px;
|
@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-color: #fff; // Support Fennec, Opera Mini: Remove default background, see T38490.
|
||||||
background-position: left @searchIconGutter center;
|
background-position: left @searchIconGutter center;
|
||||||
background-repeat: no-repeat;
|
background-repeat: no-repeat;
|
||||||
@ -154,12 +157,19 @@ main {
|
|||||||
-webkit-appearance: none;
|
-webkit-appearance: none;
|
||||||
width: 100%;
|
width: 100%;
|
||||||
margin-top: 0;
|
margin-top: 0;
|
||||||
|
border: @border-width-base solid #fff;
|
||||||
border-radius: @borderRadius;
|
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 );
|
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;
|
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 {
|
input.search {
|
||||||
// [T139928] Hide all pseudo-elements added to search inputs in WebKit.
|
// [T139928] Hide all pseudo-elements added to search inputs in WebKit.
|
||||||
&::-webkit-search-decoration,
|
&::-webkit-search-decoration,
|
||||||
|
Loading…
Reference in New Issue
Block a user