Merge "Increase distance of button to container"

This commit is contained in:
jenkins-bot 2019-09-26 22:12:09 +00:00 committed by Gerrit Code Review
commit dca6da5767
3 changed files with 14 additions and 6 deletions

View File

@ -7,7 +7,7 @@
/* Framework */
html {
font-size: @html-font-size;
font-size: @font-size-root;
}
html,

View File

@ -38,15 +38,16 @@
}
// The search input.
#searchInput {
width: 100%;
.box-sizing( border-box );
border: @border-width-base solid @colorGray10;
border-radius: @borderRadius;
// `padding-right` equals to `#searchbutton` width below.
padding: 0.4em 1.818em 0.4em 0.4em;
padding: 0.4em @width-search-button 0.4em 0.4em;
.box-shadow( @boxShadowWidget );
font-size: 0.8125em; // Equals to `13px` at browser default of `16px`.
font-size: @font-size-search-input;
direction: ltr;
.transition( ~'border-color 250ms, box-shadow 250ms' );
// Support: Webkit browsers. Undo the proprietary styles applied to `type=search` fields,
@ -84,12 +85,15 @@
position: absolute;
top: @border-width-base;
bottom: @border-width-base;
// `@border-width-base * 2` is in regards to harmonize position start and end.
right: @border-width-base;
min-width: 20px;
width: 1.818em; // Equals to `20px` at `11px` base.
min-width: 24px;
width: @width-search-button;
border: 0;
padding: 0;
cursor: pointer;
// Equal `font-size` to search input for `padding` calculationo.
font-size: @font-size-search-input;
/* Opera 12 on RTL flips the text in a funny way without this. */
/* @noflip */
direction: ltr;

View File

@ -1,6 +1,6 @@
@import 'mediawiki.ui/variables';
@html-font-size: 100%;
@font-size-root: 100%;
@font-size-browser: 16; // Assumed browser default of `16px`
@font-family-serif: 'Linux Libertine', 'Georgia', 'Times', serif;
@ -44,3 +44,7 @@
@background-position-menu-personal-icon: left ( 4 / @font-size-browser / @font-size-menu-personal );
@font-size-menu-personal: 0.75em;
@line-height-menu-personal: 14 / @font-size-browser / @font-size-menu-personal; // equals `1.667em`≈`14px`
// Search
@width-search-button: 24 / @font-size-browser / @font-size-search-input;
@font-size-search-input: unit( 13 / @font-size-browser, em ); // Equals `0.8125em`.