blob: f205da3bc05cc05b2f9b896a1407cfab21bc5f99 (
plain)
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
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
|
/* stylelint-disable no-duplicate-selectors */
@import 'mediawiki.widgets.datetime.definitions';
.mw-widgets-datetime-dateTimeInputWidget {
display: inline-block;
position: relative;
vertical-align: middle;
&-fields {
position: relative;
display: table;
z-index: 2;
.oo-ui-unselectable();
> .mw-widgets-datetime-dateTimeInputWidget-field {
.oo-ui-box-sizing(border-box);
display: table-cell;
white-space: pre;
}
}
&-handle {
width: 100%;
display: inline-block;
overflow: hidden;
// Needed for proper behavior with overflow: hidden.
vertical-align: bottom;
.oo-ui-unselectable();
.oo-ui-box-sizing(border-box);
> .oo-ui-indicatorElement-indicator,
> .oo-ui-iconElement-icon {
position: absolute;
background-position: center center;
background-repeat: no-repeat;
z-index: 1;
}
}
margin: 0.25em 0;
width: 100%;
max-width: 50em;
.oo-ui-inline-spacing(0.5em);
&-handle {
height: 2.5em;
border: 1px solid #ccc;
padding: 0 1em;
margin: 0;
background-color: #fff;
color: #000;
box-shadow: inset 0 0 0 0 @progressive;
border-radius: 0.1em;
.oo-ui-transition(box-shadow @quick-ease);
.oo-ui-box-sizing(border-box);
> .oo-ui-indicatorElement-indicator {
right: 0;
}
> .oo-ui-iconElement-icon {
left: 0.25em;
}
> .oo-ui-indicatorElement-indicator {
top: 0;
width: @indicator-size;
height: @indicator-size;
margin: 0.775em;
}
> .oo-ui-iconElement-icon {
top: 0;
width: @icon-size;
height: @icon-size;
margin: 0.3em;
}
}
&-empty &-handle {
color: #777;
}
&-field {
padding: 0;
margin: 0;
font-size: inherit;
font-family: inherit;
background-color: transparent;
color: inherit;
border: 0;
box-shadow: none;
text-align: center;
vertical-align: middle;
.oo-ui-box-sizing(border-box);
}
&.oo-ui-widget-disabled {
.mw-widgets-datetime-dateTimeInputWidget-handle {
color: #ccc;
text-shadow: 0 1px 1px #fff;
border-color: #ddd;
background-color: #f3f3f3;
> .oo-ui-iconElement-icon,
> .oo-ui-indicatorElement-indicator {
opacity: 0.2;
}
}
}
&.oo-ui-widget-enabled {
.mw-widgets-datetime-dateTimeInputWidget-editField:hover {
background-color: #eee;
}
&.oo-ui-flaggedElement-invalid {
.mw-widgets-datetime-dateTimeInputWidget-handle {
border-color: #f00;
box-shadow: inset 0 0 0 0 #f00;
}
.mw-widgets-datetime-dateTimeInputWidget-handle:focus {
border-color: #f00;
box-shadow: inset 0 0 0 0.1em #f00;
}
}
}
input.mw-widgets-datetime-dateTimeInputWidget-field {
padding: 0.5em 0;
}
&-editField.mw-widgets-datetime-dateTimeInputWidget-invalid {
border: 1px solid #f00;
box-shadow: inset 0 0 0 0 #f00;
&:focus {
border: 1px solid #f00;
box-shadow: inset 0 0 0 0.1em #f00;
}
}
&.oo-ui-iconElement .mw-widgets-datetime-dateTimeInputWidget-handle {
padding-left: 3em;
}
&.oo-ui-indicatorElement .mw-widgets-datetime-dateTimeInputWidget-handle {
padding-right: 2em;
}
}
|