Last active
June 5, 2019 13:35
-
-
Save AndersDJohnson/5e02c5489d56c9021d9a to your computer and use it in GitHub Desktop.
Normalize vertical centering of form items across browsers.
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
/** | |
* This will normalize vertical centering of input text across browsers. | |
*/ | |
.mixin-input-height (@font-size, @height-scale: 2.5) { | |
@input-height: @font-size * @height-scale; | |
@input-padding-vertical: (@input-height - @font-size) / 2; | |
font-size: @font-size; | |
height: @input-height + 2; // webkit seems to have a weird 1px gap | |
// to vertically center input text in IE <= 8, but not stretch caret in modern browsers | |
// @see http://www.paulirish.com/2009/browser-specific-css-hacks/ | |
line-height: e(%("%d\9", @input-height)); | |
} | |
/** | |
* This will normalize vertical centering of form items (inputs, buttons, etc.) across browsers. | |
*/ | |
.mixin-form-items-height (@font-size, @height-scale: 2.5) { | |
@input-height: @font-size * @height-scale; | |
@input-padding-vertical: (@input-height - @font-size) / 2; | |
input, button { | |
font-size: @font-size; | |
} | |
input[type="text"], input[type="search"], input[type="email"] { | |
.mixin-input-height(@font-size, @height-scale); | |
} | |
button[type="submit"] { | |
line-height: @font-size; | |
padding-top: @input-padding-vertical; | |
padding-bottom: @input-padding-vertical; | |
} | |
} |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment