Merge "language: Move some language-related classes to includes/language/"

[lhc/web/wiklou.git] / resources / src / mediawiki.widgets.datetime / DateTimeInputWidget.less

diff --git a/resources/src/mediawiki.widgets.datetime/DateTimeInputWidget.less b/resources/src/mediawiki.widgets.datetime/DateTimeInputWidget.less
index 370a19f..042d795 100644 (file)
--- a/resources/src/mediawiki.widgets.datetime/DateTimeInputWidget.less
+++ b/resources/src/mediawiki.widgets.datetime/DateTimeInputWidget.less
@@ -5,7 +5,8 @@
        display: inline-block;
        position: relative;
        width: 100%;
-       max-width: @max-width-input;
+       // Hack: Set maximum width equivalent to DateInputWidgets calendar popup
+       max-width: 24.275em;
        .oo-ui-inline-spacing( 0.5em );
        vertical-align: middle;
 
@@ -56,18 +57,9 @@
 
                > .oo-ui-indicatorElement-indicator {
                        right: @padding-horizontal-base;
-                       min-width: @min-size-indicator;
-                       width: @size-indicator;
-                       min-height: @min-size-indicator;
-                       height: @size-indicator;
-                       max-height: @size-base;
                }
        }
 
-       &-empty &-handle {
-               color: @color-base--subtle;
-       }
-
        &.oo-ui-iconElement .mw-widgets-datetime-dateTimeInputWidget-handle {
                padding-left: @padding-start-input-text-icon-label;
        }
@@ -82,8 +74,7 @@
                .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;
@@ -91,6 +82,17 @@
                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 {
@@ -106,7 +108,29 @@
        }
 
        &-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 {