1 /* stylelint-disable no-duplicate-selectors */
2 @import 'mediawiki.widgets.datetime.definitions';
4 .mw-widgets-datetime-dateTimeInputWidget {
8 max-width: @max-width-input;
9 .oo-ui-inline-spacing( 0.5em );
10 vertical-align: middle;
16 .oo-ui-unselectable();
18 > .mw-widgets-datetime-dateTimeInputWidget-field {
19 .oo-ui-box-sizing( border-box );
26 background-color: @background-color-base;
28 display: inline-block;
29 .oo-ui-box-sizing( border-box );
33 border-radius: @border-radius-base;
34 padding: 0 @padding-horizontal-input-text;
35 box-shadow: inset 0 0 0 0 @color-progressive;
36 // Needed for proper behavior with `overflow: hidden`.
37 vertical-align: bottom;
39 .oo-ui-unselectable();
40 .oo-ui-transition( box-shadow @transition-base );
42 > .oo-ui-iconElement-icon,
43 > .oo-ui-indicatorElement-indicator {
44 background-position: center center;
45 background-repeat: no-repeat;
51 > .oo-ui-iconElement-icon {
52 left: @padding-start-input-text-icon;
57 > .oo-ui-indicatorElement-indicator {
58 right: @padding-horizontal-base;
63 color: @color-base--subtle;
66 &.oo-ui-iconElement .mw-widgets-datetime-dateTimeInputWidget-handle {
67 padding-left: @padding-start-input-text-icon-label;
70 &.oo-ui-indicatorElement .mw-widgets-datetime-dateTimeInputWidget-handle {
71 padding-right: @size-indicator + 2 * @padding-horizontal-input-text;
75 background-color: transparent;
77 .oo-ui-box-sizing( border-box );
79 border-radius: @border-radius-base;
80 // Provide more top padding due to border not being part of the calculation
81 padding-top: 10 / @ooui-font-size-browser / @ooui-font-size-base;
82 padding-bottom: @padding-bottom-base;
86 line-height: @line-height-widget-singleline;
92 .mw-widgets-datetime-dateTimeInputWidget-invalid {
93 border: 1px solid @border-color-erroneous;
94 box-shadow: @box-shadow-widget;
97 border: 1px solid @border-color-erroneous;
98 box-shadow: @box-shadow-erroneous--focus;
106 .oo-ui-iconElement-icon {
107 background-size: @size-indicator @size-indicator;
111 &.oo-ui-widget-enabled {
112 .mw-widgets-datetime-dateTimeInputWidget-handle {
113 .oo-ui-transition( border-color @transition-ease-medium );
116 border-color: @border-color-input--hover;
120 // Set on widget parent to also enable `:hover` on child elmeents
124 border-color: @border-color-input--hover;
128 .mw-widgets-datetime-dateTimeInputWidget-editField:hover {
129 background-color: @background-color-base--hover;
132 .mw-widgets-datetime-dateTimeInputWidget-editField:focus {
134 box-shadow: inset 0 0 0 1px @color-progressive, 0 0 0 1px @color-progressive;
137 &.oo-ui-flaggedElement-invalid {
138 .mw-widgets-datetime-dateTimeInputWidget-handle {
139 border-color: @border-color-erroneous;
140 box-shadow: @box-shadow-widget;
143 border-color: @border-color-erroneous;
144 box-shadow: @box-shadow-erroneous--focus;
150 &.oo-ui-widget-disabled {
151 .mw-widgets-datetime-dateTimeInputWidget-handle {
152 background-color: @background-color-base--disabled;
154 -webkit-text-fill-color: @color-base--disabled;
155 color: @color-base--disabled;
156 border-color: @border-color-base--disabled;
157 text-shadow: @text-shadow-base--disabled;
160 > .oo-ui-iconElement-icon,
161 > .oo-ui-indicatorElement-indicator {
162 opacity: @opacity-base--disabled;