}
}
- &-empty &-handle {
- color: @color-base--subtle;
- }
-
&.oo-ui-iconElement .mw-widgets-datetime-dateTimeInputWidget-handle {
padding-left: @padding-start-input-text-icon-label;
}
.oo-ui-box-sizing( border-box );
border: 0;
border-radius: @border-radius-base;
- // Provide more top padding due to border not being part of the calculation
- padding-top: 10 / @ooui-font-size-browser / @ooui-font-size-base;
+ padding-top: @padding-top-base;
padding-bottom: @padding-bottom-base;
box-shadow: none;
font-size: inherit;
line-height: @line-height-widget-singleline;
text-align: center;
vertical-align: top;
+
+ // Day field, f.e. “Sat”
+ &:first-child {
+ cursor: pointer;
+ }
+
+ // Day field & time zome field, f.e. “Sat” & “Z”
+ &[ tabindex='-1' ] {
+ // Support: Firefox, Chrome
+ outline: 0;
+ }
}
&-editField {
}
&-clearButton {
+ // Override `&-field` from above
padding-top: 0;
+ padding-bottom: 0;
+ padding-left: @padding-start-button-clear;
+
+ // `&.oo-ui-iconElement` needed for specificity
+ &.oo-ui-iconElement > .oo-ui-buttonElement-button {
+ padding-top: @padding-top-button-clear;
+ }
.oo-ui-iconElement-icon {
background-size: @size-indicator @size-indicator;
}
}
+ &-empty {
+ .mw-widgets-datetime-dateTimeInputWidget-handle {
+ color: @color-base--subtle;
+ }
+
+ .mw-widgets-datetime-dateTimeInputWidget-clearButton {
+ display: none;
+ }
+ }
+
&.oo-ui-widget-enabled {
.mw-widgets-datetime-dateTimeInputWidget-handle {
.oo-ui-transition( border-color @transition-ease-medium );
@padding-horizontal-base: 12 / @ooui-font-size-browser / @ooui-font-size-base;
@padding-horizontal-input-text: 8 / @ooui-font-size-browser / @ooui-font-size-base;
@padding-top-base: 8 / @ooui-font-size-browser / @ooui-font-size-base;
+@padding-top-button-clear: 28 / @ooui-font-size-browser / @ooui-font-size-base; // As it's inside an input, we need to reduce from borders surrounding
@padding-bottom-base: 7 / @ooui-font-size-browser / @ooui-font-size-base;
@padding-start-input-text-icon: 6 / @ooui-font-size-browser / @ooui-font-size-base;
@padding-start-input-text-icon-label: 32 / @ooui-font-size-browser / @ooui-font-size-base;
+@padding-start-button-clear: 4 / @ooui-font-size-browser / @ooui-font-size-base;
@border-base: 1px solid #a2a9b1;
@border-color-base--disabled: #c8ccd1;