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;
59 min-width: @min-size-indicator;
60 width: @size-indicator;
61 min-height: @min-size-indicator;
62 height: @size-indicator;
63 max-height: @size-base;
68 color: @color-base--subtle;
71 &.oo-ui-iconElement .mw-widgets-datetime-dateTimeInputWidget-handle {
72 padding-left: @padding-start-input-text-icon-label;
75 &.oo-ui-indicatorElement .mw-widgets-datetime-dateTimeInputWidget-handle {
76 padding-right: @size-indicator + 2 * @padding-horizontal-input-text;
80 background-color: transparent;
82 .oo-ui-box-sizing( border-box );
84 border-radius: @border-radius-base;
85 // Provide more top padding due to border not being part of the calculation
86 padding-top: 10 / @ooui-font-size-browser / @ooui-font-size-base;
87 padding-bottom: @padding-bottom-base;
91 line-height: @line-height-widget-singleline;
97 .mw-widgets-datetime-dateTimeInputWidget-invalid {
98 border: 1px solid @border-color-erroneous;
99 box-shadow: @box-shadow-widget;
102 border: 1px solid @border-color-erroneous;
103 box-shadow: @box-shadow-erroneous--focus;
112 &.oo-ui-widget-enabled {
113 .mw-widgets-datetime-dateTimeInputWidget-handle {
114 .oo-ui-transition( border-color @transition-ease-medium );
117 border-color: @border-color-input--hover;
121 // Set on widget parent to also enable `:hover` on child elmeents
125 border-color: @border-color-input--hover;
129 .mw-widgets-datetime-dateTimeInputWidget-editField:hover {
130 background-color: @background-color-base--hover;
133 .mw-widgets-datetime-dateTimeInputWidget-editField:focus {
135 box-shadow: inset 0 0 0 1px @color-progressive, 0 0 0 1px @color-progressive;
138 &.oo-ui-flaggedElement-invalid {
139 .mw-widgets-datetime-dateTimeInputWidget-handle {
140 border-color: @border-color-erroneous;
141 box-shadow: @box-shadow-widget;
144 border-color: @border-color-erroneous;
145 box-shadow: @box-shadow-erroneous--focus;
151 &.oo-ui-widget-disabled {
152 .mw-widgets-datetime-dateTimeInputWidget-handle {
153 background-color: @background-color-base--disabled;
155 -webkit-text-fill-color: @color-base--disabled;
156 color: @color-base--disabled;
157 border-color: @border-color-base--disabled;
158 text-shadow: @text-shadow-base--disabled;
161 > .oo-ui-iconElement-icon,
162 > .oo-ui-indicatorElement-indicator {
163 opacity: @opacity-base--disabled;