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;
62 &.oo-ui-iconElement .mw-widgets-datetime-dateTimeInputWidget-handle {
63 padding-left: @padding-start-input-text-icon-label;
66 &.oo-ui-indicatorElement .mw-widgets-datetime-dateTimeInputWidget-handle {
67 padding-right: @size-indicator + 2 * @padding-horizontal-input-text;
71 background-color: transparent;
73 .oo-ui-box-sizing( border-box );
75 border-radius: @border-radius-base;
76 padding-top: @padding-top-base;
77 padding-bottom: @padding-bottom-base;
81 line-height: @line-height-widget-singleline;
85 // Day field, f.e. “Sat”
90 // Day field & time zome field, f.e. “Sat” & “Z”
92 // Support: Firefox, Chrome
98 .mw-widgets-datetime-dateTimeInputWidget-invalid {
99 border: 1px solid @border-color-erroneous;
100 box-shadow: @box-shadow-widget;
103 border: 1px solid @border-color-erroneous;
104 box-shadow: @box-shadow-erroneous--focus;
110 // Override `&-field` from above
113 padding-left: @padding-start-button-clear;
115 // `&.oo-ui-iconElement` needed for specificity
116 &.oo-ui-iconElement > .oo-ui-buttonElement-button {
117 padding-top: @padding-top-button-clear;
120 .oo-ui-iconElement-icon {
121 background-size: @size-indicator @size-indicator;
126 .mw-widgets-datetime-dateTimeInputWidget-handle {
127 color: @color-base--subtle;
130 .mw-widgets-datetime-dateTimeInputWidget-clearButton {
135 &.oo-ui-widget-enabled {
136 .mw-widgets-datetime-dateTimeInputWidget-handle {
137 .oo-ui-transition( border-color @transition-ease-medium );
140 border-color: @border-color-input--hover;
144 // Set on widget parent to also enable `:hover` on child elmeents
148 border-color: @border-color-input--hover;
152 .mw-widgets-datetime-dateTimeInputWidget-editField:hover {
153 background-color: @background-color-base--hover;
156 .mw-widgets-datetime-dateTimeInputWidget-editField:focus {
158 box-shadow: inset 0 0 0 1px @color-progressive, 0 0 0 1px @color-progressive;
161 &.oo-ui-flaggedElement-invalid {
162 .mw-widgets-datetime-dateTimeInputWidget-handle {
163 border-color: @border-color-erroneous;
164 box-shadow: @box-shadow-widget;
167 border-color: @border-color-erroneous;
168 box-shadow: @box-shadow-erroneous--focus;
174 &.oo-ui-widget-disabled {
175 .mw-widgets-datetime-dateTimeInputWidget-handle {
176 background-color: @background-color-base--disabled;
178 -webkit-text-fill-color: @color-base--disabled;
179 color: @color-base--disabled;
180 border-color: @border-color-base--disabled;
181 text-shadow: @text-shadow-base--disabled;
184 > .oo-ui-iconElement-icon,
185 > .oo-ui-indicatorElement-indicator {
186 opacity: @opacity-base--disabled;