Correcting slight issues with mw-ui-input with
focus behaviour and vertical alignment
Use negative margin to ensure that when input element is
focused that all 4 border sides are shown rather than just
3.
Change-Id: I9d51fcd1781a9a615e3b41e6988e19021466a9d1
width: 100%;
padding: .3em .3em .3em .6em;
display: block;
+ vertical-align: middle;
// Override user agent stylesheet properties. Instead use parent element.
color: inherit;
font-family: inherit;
.mw-ui-input-large {
margin-top: 0;
margin-bottom: 0;
+
+ // When two large inputs are together, we make them flush by hiding one of the borders
& + .mw-ui-input-large {
- border-top-width: 0;
+ margin-top: -1px;
+ }
+ // When focusing, make the input relative to raise it above any attached inputs to unhide its borders
+ &:focus {
+ position: relative;
}
}