1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
|
// Inputs
@import "mediawiki.mixins";
@import "mediawiki.ui/variables";
@import "mediawiki.ui/mixins";
// Placeholder text styling helper
.field-placeholder-styling() {
font-style: italic;
font-weight: normal;
}
// Text inputs
//
// Apply the mw-ui-input class to input and textarea fields.
//
// Styleguide 1.
// mw-ui-input
//
// Style an input using MediaWiki UI.
// Currently in draft status and subject to change.
// When focused a progressive highlight appears to the left of the field.
//
// Markup:
// <input class="mw-ui-input" placeholder="Enter your name">
// <textarea class="mw-ui-input">Text here</textarea>
//
// Styleguide 1.1.
.mw-ui-input {
// turn off default input styling for input[type="search"] fields
-webkit-appearance: none;
border: 1px solid @colorFieldBorder;
.box-sizing(border-box);
width: 100%;
padding: .3em .3em .3em .6em;
display: block;
vertical-align: middle;
border-radius: @borderRadius;
font-family: inherit;
font-size: inherit;
line-height: inherit;
.transition(~"border 0.2s cubic-bezier(0.39, 0.575, 0.565, 1), box-shadow 0.2s cubic-bezier(0.39, 0.575, 0.565, 1)");
// Placeholder text styling must be set individually for each browser @winter
&::-webkit-input-placeholder { // webkit
.field-placeholder-styling;
}
&::-moz-placeholder { // FF 4-18
.field-placeholder-styling;
}
&:-moz-placeholder { // FF >= 19
.field-placeholder-styling;
}
&:-ms-input-placeholder { // IE >= 10
.field-placeholder-styling;
}
// Remove red outline from inputs which have required field and invalid content.
// This is a Firefox only issue
// See https://developer.mozilla.org/en-US/docs/Web/CSS/:invalid
// This should be above :focus so focus behaviour takes preference
&:invalid {
box-shadow: none;
}
&:focus {
box-shadow: inset 0 0 0 2px @colorProgressive;
// Color being used to match inset shadow, not semantic reasons
border-color: @colorProgressive;
// Remove focus glow on input[type="search"]
outline: 0;
}
&:disabled {
border-color: @colorGray14;
color: @colorGray12;
}
}
textarea.mw-ui-input {
min-height: 8em;
}
// mw-ui-input-inline
//
// Use mw-ui-input-inline with mw-ui-input in cases where you want a button to line up with the input.
//
// Markup:
// <input class="mw-ui-input mw-ui-input-inline">
// <button class="mw-ui-button mw-ui-constructive">Submit</button>
//
// Styleguide 1.2.
input[type="number"],
.mw-ui-input-inline {
display: inline-block;
width: auto;
}
// mw-ui-input-large
//
// Use mw-ui-input-large with mw-ui-input in cases where there are multiple inputs on a screen and you
// want to draw attention to one instance. For example, replying with a subject line and more text.
// Currently in draft status and subject to change. When used on an input field, the text is styled
// in a large font. When used alongside another mw-ui-input large they are pushed together to form one
// contiguous block.
//
// Markup:
// <input value="input" class="mw-ui-input mw-ui-input-large" value="input" placeholder="Enter subject">
// <textarea class="mw-ui-input mw-ui-input-large" placeholder="Provide additional details"></textarea>
//
// Styleguide 1.3.
.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 {
margin-top: -1px;
}
// When focusing, make the input relative to raise it above any attached inputs to unhide its borders
&:focus {
position: relative;
}
}
input.mw-ui-input-large {
font-size: 1.75em;
font-weight: bold;
line-height: 1.25em;
}
|
