1 @import "mediawiki.widgets.datetime.definitions";
3 .mw-widgets-datetime-dateTimeInputWidget {
6 vertical-align: middle;
12 .oo-ui-unselectable();
14 > .mw-widgets-datetime-dateTimeInputWidget-field {
15 .oo-ui-box-sizing(border-box);
24 display: inline-block;
27 // Needed for proper behavior with overflow: hidden.
28 vertical-align: bottom;
30 .oo-ui-unselectable();
31 .oo-ui-box-sizing(border-box);
33 > .oo-ui-indicatorElement-indicator,
34 > .oo-ui-iconElement-icon {
36 background-position: center center;
37 background-repeat: no-repeat;
46 .oo-ui-inline-spacing(0.5em);
50 border: 1px solid #ccc;
53 background-color: #fff;
55 box-shadow: inset 0 0 0 0 @progressive;
57 .oo-ui-transition(box-shadow @quick-ease);
58 .oo-ui-box-sizing(border-box);
60 > .oo-ui-indicatorElement-indicator {
64 > .oo-ui-iconElement-icon {
68 > .oo-ui-indicatorElement-indicator {
70 width: @indicator-size;
71 height: @indicator-size;
75 > .oo-ui-iconElement-icon {
92 background-color: transparent;
97 vertical-align: middle;
98 .oo-ui-box-sizing(border-box);
101 &.oo-ui-widget-disabled {
102 .mw-widgets-datetime-dateTimeInputWidget-handle {
104 text-shadow: 0 1px 1px #fff;
106 background-color: #f3f3f3;
108 > .oo-ui-iconElement-icon,
109 > .oo-ui-indicatorElement-indicator {
115 &.oo-ui-widget-enabled {
116 .mw-widgets-datetime-dateTimeInputWidget-editField:hover {
117 background-color: #eee;
120 &.oo-ui-flaggedElement-invalid {
121 .mw-widgets-datetime-dateTimeInputWidget-handle {
123 box-shadow: inset 0 0 0 0 #f00;
126 .mw-widgets-datetime-dateTimeInputWidget-handle:focus {
128 box-shadow: inset 0 0 0 0.1em #f00;
133 input.mw-widgets-datetime-dateTimeInputWidget-field {
137 &-editField.mw-widgets-datetime-dateTimeInputWidget-invalid {
138 border: 1px solid #f00;
139 box-shadow: inset 0 0 0 0 #f00;
142 border: 1px solid #f00;
143 box-shadow: inset 0 0 0 0.1em #f00;
147 &.oo-ui-iconElement .mw-widgets-datetime-dateTimeInputWidget-handle {
151 &.oo-ui-indicatorElement .mw-widgets-datetime-dateTimeInputWidget-handle {