diff --git a/resources/skins.minerva.base.styles/ui.less b/resources/skins.minerva.base.styles/ui.less index 6a2407f..2353c97 100644 --- a/resources/skins.minerva.base.styles/ui.less +++ b/resources/skins.minerva.base.styles/ui.less @@ -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,