1 /* stylelint-disable no-duplicate-selectors */
2 @import 'mediawiki.widgets.datetime.definitions';
4 .mw-widgets-datetime-dateTimeInputWidget {
8 // Hack: Set maximum width equivalent to DateInputWidgets calendar popup
10 .oo-ui-inline-spacing( 0.5em );
11 vertical-align: middle;
17 .oo-ui-unselectable();
19 > .mw-widgets-datetime-dateTimeInputWidget-field {
20 .oo-ui-box-sizing( border-box );
27 background-color: @background-color-base;
29 display: inline-block;
30 .oo-ui-box-sizing( border-box );
34 border-radius: @border-radius-base;
35 padding: 0 @padding-horizontal-input-text;
36 box-shadow: inset 0 0 0 0 @color-progressive;
37 // Needed for proper behavior with `overflow: hidden`.
38 vertical-align: bottom;
40 .oo-ui-unselectable();
41 .oo-ui-transition( box-shadow @transition-base );
43 > .oo-ui-iconElement-icon,
44 > .oo-ui-indicatorElement-indicator {
45 background-position: center center;
46 background-repeat: no-repeat;
52 > .oo-ui-iconElement-icon {
53 left: @padding-start-input-text-icon;
58 > .oo-ui-indicatorElement-indicator {
59 right: @padding-horizontal-base;
63 &.oo-ui-iconElement .mw-widgets-datetime-dateTimeInputWidget-handle {
64 padding-left: @padding-start-input-text-icon-label;
67 &.oo-ui-indicatorElement .mw-widgets-datetime-dateTimeInputWidget-handle {
68 padding-right: @size-indicator + 2 * @padding-horizontal-input-text;
72 background-color: transparent;
74 .oo-ui-box-sizing( border-box );
76 border-radius: @border-radius-base;
77 padding-top: @padding-top-base;
78 padding-bottom: @padding-bottom-base;
82 line-height: @line-height-widget-singleline;
86 // Day field, f.e. “Sat”
91 // Day field & time zome field, f.e. “Sat” & “Z”
93 // Support: Firefox, Chrome
99 .mw-widgets-datetime-dateTimeInputWidget-invalid {
100 border: 1px solid @border-color-erroneous;
101 box-shadow: @box-shadow-widget;
104 border: 1px solid @border-color-erroneous;
105 box-shadow: @box-shadow-erroneous--focus;
111 // Override `&-field` from above
114 padding-left: @padding-start-button-clear;
116 // `&.oo-ui-iconElement` needed for specificity
117 &.oo-ui-iconElement > .oo-ui-buttonElement-button {
118 padding-top: @padding-top-button-clear;
121 .oo-ui-iconElement-icon {
122 background-size: @size-indicator @size-indicator;
127 .mw-widgets-datetime-dateTimeInputWidget-handle {
128 color: @color-base--subtle;
131 .mw-widgets-datetime-dateTimeInputWidget-clearButton {
136 &.oo-ui-widget-enabled {
137 .mw-widgets-datetime-dateTimeInputWidget-handle {
138 .oo-ui-transition( border-color @transition-ease-medium );
141 border-color: @border-color-input--hover;
145 // Set on widget parent to also enable `:hover` on child elmeents
149 border-color: @border-color-input--hover;
153 .mw-widgets-datetime-dateTimeInputWidget-editField:hover {
154 background-color: @background-color-base--hover;
157 .mw-widgets-datetime-dateTimeInputWidget-editField:focus {
159 box-shadow: inset 0 0 0 1px @color-progressive, 0 0 0 1px @color-progressive;
162 &.oo-ui-flaggedElement-invalid {
163 .mw-widgets-datetime-dateTimeInputWidget-handle {
164 border-color: @border-color-erroneous;
165 box-shadow: @box-shadow-widget;
168 border-color: @border-color-erroneous;
169 box-shadow: @box-shadow-erroneous--focus;
175 &.oo-ui-widget-disabled {
176 .mw-widgets-datetime-dateTimeInputWidget-handle {
177 background-color: @background-color-base--disabled;
179 -webkit-text-fill-color: @color-base--disabled;
180 color: @color-base--disabled;
181 border-color: @border-color-base--disabled;
182 text-shadow: @text-shadow-base--disabled;
185 > .oo-ui-iconElement-icon,
186 > .oo-ui-indicatorElement-indicator {
187 opacity: @opacity-base--disabled;