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 */ /* Framework */
html { html {
font-size: @html-font-size; font-size: @font-size-root;
} }
html, html,

View file

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

View file

@ -1,6 +1,6 @@
@import 'mediawiki.ui/variables'; @import 'mediawiki.ui/variables';
@html-font-size: 100%; @font-size-root: 100%;
@font-size-browser: 16; // Assumed browser default of `16px` @font-size-browser: 16; // Assumed browser default of `16px`
@font-family-serif: 'Linux Libertine', 'Georgia', 'Times', serif; @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 ); @background-position-menu-personal-icon: left ( 4 / @font-size-browser / @font-size-menu-personal );
@font-size-menu-personal: 0.75em; @font-size-menu-personal: 0.75em;
@line-height-menu-personal: 14 / @font-size-browser / @font-size-menu-personal; // equals `1.667em`≈`14px` @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`.