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
|
/*!
* MediaWiki Widgets – PHP DateInputWidget styles.
*
* @copyright 2011-2015 MediaWiki Widgets Team and others; see AUTHORS.txt
* @license The MIT License (MIT); see LICENSE.txt
*/
// Variables taken from OOUI's WikimediaUI theme
@oo-ui-font-size-browser: 16; // assumed browser default of `16px`
@oo-ui-font-size-base: 0.8em; // equals `12.8px` at browser default of `16px`
@background-color-base: #fff;
@color-base--emphasized: #000;
@border-base: 1px solid #a2a9b1;
@border-color-base--focus: #36c;
@border-color-input--hover: #72777d;
@border-radius-base: 2px;
@padding-input-text: @padding-top-base @padding-horizontal-input-text @padding-bottom-base;
@padding-horizontal-input-text: 8 / @oo-ui-font-size-browser / @oo-ui-font-size-base;
@padding-top-base: 8 / @oo-ui-font-size-browser / @oo-ui-font-size-base; // equals `0.625em`≈`8px`
@padding-bottom-base: 7 / @oo-ui-font-size-browser / @oo-ui-font-size-base; // equals `0.547em`≈`7px`
@box-shadow-widget: inset 0 0 0 1px transparent;
@box-shadow-widget--focus: inset 0 0 0 1px #36c;
@line-height-widget-singleline: 1.172em; // Firefox needs a value, Chrome the unit; equals `15px` at base `font-size: 12.8px`
@transition-ease-out-sine-medium: 200ms cubic-bezier( 0.39, 0.575, 0.565, 1 );
// Mixins taken from OOUI
.oo-ui-box-sizing( @type: border-box ) {
-webkit-box-sizing: @type;
-moz-box-sizing: @type;
box-sizing: @type;
}
.oo-ui-inline-spacing( @spacing, @cancelled-spacing: 0 ) {
margin-right: @spacing;
&:last-child {
margin-right: @cancelled-spacing;
}
}
.oo-ui-transition( @value1, @value2: X, ... ) {
@value: ~`"@{arguments}".replace( /[\[\]]|\,\sX/g, '' )`; // stylelint-disable-line function-comma-space-after, function-whitespace-after, string-quotes, value-keyword-case
-webkit-transition: @value;
-moz-transition: @value;
transition: @value;
}
// DateInputWidget rules
.mw-widget-dateInputWidget {
&.oo-ui-textInputWidget {
display: inline-block;
position: relative;
width: 21em;
margin-top: 0.25em;
// .oo-ui-inline-spacing( 0.5em ); already inherited from `.oo-ui-inputWidget`
margin-bottom: 0.25em;
margin-left: 0;
}
// Note that this block applies to both the PHP widget and the JS widget
&-handle,
&.oo-ui-textInputWidget input {
display: inline-block;
position: relative;
cursor: pointer;
/**
* Ensures non-infused and infused widget have the same height.
* Equal to line height + top padding + bottom padding
*/
max-height: 2.458em;
}
// Ensure `.mw-widget-dateInputWidget-handle` similar appearance to OOUI's `.oo-ui-textInputWidget`
&-handle {
background-color: @background-color-base;
color: @color-base--emphasized;
.oo-ui-box-sizing( border-box );
width: 100%;
border: @border-base;
border-radius: @border-radius-base;
padding: @padding-input-text;
line-height: @line-height-widget-singleline;
}
&.oo-ui-widget-enabled {
.mw-widget-dateInputWidget-handle {
box-shadow: @box-shadow-widget; // necessary for smooth transition
.oo-ui-transition(
border-color @transition-ease-out-sine-medium,
box-shadow @transition-ease-out-sine-medium
);
&:hover {
border-color: @border-color-input--hover;
}
&:focus {
outline: 0;
border-color: @border-color-base--focus;
box-shadow: @box-shadow-widget--focus;
}
& > .oo-ui-labelElement-label {
cursor: pointer;
}
}
}
&-active {
&.oo-ui-textInputWidget input {
cursor: text;
}
}
}
|
