Align to WikimediaUI themed widgets

Aligning to WikimediaUI themed widgets. As of now, Calendar- &
DateTimeInputWidget have been user-interface wise in limbo between
WikimediaUI style and non-themed style. Let's align it to former
and ensure theme-dependency in a future step.
Also
- massively cleaning up LESS,
- removing duplicated, already inherited properties and
- fixing little annoyances like `line-height` in fields being wrong or
- `:focus` states being disconnected from the rest.

Bug: T189352
Change-Id: Ia39254aec3535aed9e3d3e01b3fc01c25cd72c2e

diff --git a/resources/src/mediawiki.widgets.datetime/CalendarWidget.less b/resources/src/mediawiki.widgets.datetime/CalendarWidget.less
index 093c58b..e7afff8 100644 (file)
--- a/resources/src/mediawiki.widgets.datetime/CalendarWidget.less
+++ b/resources/src/mediawiki.widgets.datetime/CalendarWidget.less
@@ -2,10 +2,20 @@
 @import 'mediawiki.widgets.datetime.definitions';
 
 .mw-widgets-datetime-calendarWidget {
+       background-color: @background-color-base;
        display: inline-block;
        position: relative;
-       vertical-align: middle;
+       border: @border-base;
+       border-radius: @border-radius-base;
        padding: 0.5em;
+       box-shadow: @box-shadow-dialog;
+       vertical-align: middle;
+
+       &:focus {
+               border-color: @color-progressive;
+               outline: 0;
+               box-shadow: @box-shadow-base--focus, @box-shadow-dialog;
+       }
 
        &.mw-widgets-datetime-calendarWidget-dependent {
                display: block;
@@ -22,22 +32,23 @@
                }
        }
 
-       background-color: #fff;
-       border: 1px solid #ccc;
-
        &.mw-widgets-datetime-calendarWidget-dependent {
                margin-top: -1px;
-               border-top: 1px solid #fff;
        }
 
        &-heading {
+               font-weight: bold;
                text-align: center;
                vertical-align: middle;
-               font-weight: bold;
                white-space: nowrap;
 
                .mw-widgets-datetime-calendarWidget-previous {
                        float: left;
+
+                       // Overwrite OOUI's `.oo-ui-buttonElement-frameless.oo-ui-iconElement:first-child`
+                       &:first-child {
+                               margin-left: 0;
+                       }
                }
                .mw-widgets-datetime-calendarWidget-next {
                        float: right;
@@ -52,20 +63,37 @@
 
                        .oo-ui-buttonElement-button {
                                width: 100%;
-                               border: 1px dotted rgba( 255, 255, 255, 0 );
-                               .oo-ui-box-sizing( border-box );
+                               border: 1px solid rgba( 255, 255, 255, 0 );
+                               .oo-ui-transition(
+                                       background-color @transition-base,
+                                       color @transition-base,
+                                       border-color @transition-base
+                               );
                        }
 
-                       &.mw-widgets-datetime-calendarWidget-extra .oo-ui-buttonElement-button .oo-ui-labelElement-label {
-                               color: #bbb;
+                       &.mw-widgets-datetime-calendarWidget-extra .oo-ui-buttonElement-button {
+                               .oo-ui-labelElement-label {
+                                       color: @color-base--subtle;
+                               }
+
+                               &:hover .oo-ui-labelElement-label {
+                                       color: @color-base--inverted;
+                               }
                        }
 
                        &.mw-widgets-datetime-calendarWidget-selected .oo-ui-buttonElement-button {
-                               background-color: #def;
+                               background-color: #2a4b8d;
+
                                .oo-ui-labelElement-label {
-                                       color: #38f;
+                                       color: @color-base--inverted;
                                }
                        }
+
+                       &.oo-ui-widget-enabled .oo-ui-buttonElement-button:hover {
+                               background-color: @color-progressive;
+                               color: @color-base--inverted;
+                               border-color: @color-progressive;
+                       }
                }
        }
 

diff --git a/resources/src/mediawiki.widgets.datetime/DateTimeInputWidget.less b/resources/src/mediawiki.widgets.datetime/DateTimeInputWidget.less
index f205da3..510eb21 100644 (file)
--- a/resources/src/mediawiki.widgets.datetime/DateTimeInputWidget.less
+++ b/resources/src/mediawiki.widgets.datetime/DateTimeInputWidget.less
@@ -4,6 +4,9 @@
 .mw-widgets-datetime-dateTimeInputWidget {
        display: inline-block;
        position: relative;
+       width: 100%;
+       max-width: @max-width-input;
+       .oo-ui-inline-spacing( 0.5em );
        vertical-align: middle;
 
        &-fields {
@@ -13,143 +16,151 @@
                .oo-ui-unselectable();
 
                > .mw-widgets-datetime-dateTimeInputWidget-field {
-                       .oo-ui-box-sizing(border-box);
-
+                       .oo-ui-box-sizing( border-box );
                        display: table-cell;
                        white-space: pre;
                }
        }
 
        &-handle {
-               width: 100%;
+               background-color: @background-color-base;
+               color: @color-base;
                display: inline-block;
-               overflow: hidden;
-
-               // Needed for proper behavior with overflow: hidden.
+               .oo-ui-box-sizing( border-box );
+               width: 100%;
+               height: @size-base;
+               border: @border-base;
+               border-radius: @border-radius-base;
+               padding: 0 @padding-horizontal-input-text;
+               box-shadow: inset 0 0 0 0 @color-progressive;
+               // Needed for proper behavior with `overflow: hidden`.
                vertical-align: bottom;
-
+               overflow: hidden;
                .oo-ui-unselectable();
-               .oo-ui-box-sizing(border-box);
+               .oo-ui-transition( box-shadow @transition-base );
 
-               > .oo-ui-indicatorElement-indicator,
-               > .oo-ui-iconElement-icon {
-                       position: absolute;
+               > .oo-ui-iconElement-icon,
+               > .oo-ui-indicatorElement-indicator {
                        background-position: center center;
                        background-repeat: no-repeat;
+                       position: absolute;
+                       top: 0;
                        z-index: 1;
                }
-       }
-
-       margin: 0.25em 0;
-       width: 100%;
-       max-width: 50em;
-
-       .oo-ui-inline-spacing(0.5em);
-
-       &-handle {
-               height: 2.5em;
-               border: 1px solid #ccc;
-               padding: 0 1em;
-               margin: 0;
-               background-color: #fff;
-               color: #000;
-               box-shadow: inset 0 0 0 0 @progressive;
-               border-radius: 0.1em;
-               .oo-ui-transition(box-shadow @quick-ease);
-               .oo-ui-box-sizing(border-box);
-
-               > .oo-ui-indicatorElement-indicator {
-                       right: 0;
-               }
 
                > .oo-ui-iconElement-icon {
-                       left: 0.25em;
+                       left: @padding-start-input-text-icon;
+                       width: @size-icon;
+                       height: @size-icon;
                }
 
                > .oo-ui-indicatorElement-indicator {
-                       top: 0;
-                       width: @indicator-size;
-                       height: @indicator-size;
-                       margin: 0.775em;
-               }
-
-               > .oo-ui-iconElement-icon {
-                       top: 0;
-                       width: @icon-size;
-                       height: @icon-size;
-                       margin: 0.3em;
+                       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: #777;
+               color: @color-base--subtle;
+       }
+
+       &.oo-ui-iconElement .mw-widgets-datetime-dateTimeInputWidget-handle {
+               padding-left: @padding-start-input-text-icon-label;
+       }
+
+       &.oo-ui-indicatorElement .mw-widgets-datetime-dateTimeInputWidget-handle {
+               padding-right: @size-indicator + 2 * @padding-horizontal-input-text;
        }
 
        &-field {
-               padding: 0;
-               margin: 0;
-               font-size: inherit;
-               font-family: inherit;
                background-color: transparent;
                color: inherit;
+               .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 / @oo-ui-font-size-browser / @oo-ui-font-size-base;
+               padding-bottom: @padding-bottom-base;
                box-shadow: none;
+               font-size: inherit;
+               font-family: inherit;
+               line-height: @line-height-widget-singleline;
                text-align: center;
-               vertical-align: middle;
-               .oo-ui-box-sizing(border-box);
+               vertical-align: top;
        }
 
-       &.oo-ui-widget-disabled {
-               .mw-widgets-datetime-dateTimeInputWidget-handle {
-                       color: #ccc;
-                       text-shadow: 0 1px 1px #fff;
-                       border-color: #ddd;
-                       background-color: #f3f3f3;
-
-                       > .oo-ui-iconElement-icon,
-                       > .oo-ui-indicatorElement-indicator {
-                               opacity: 0.2;
+       &-editField {
+               .mw-widgets-datetime-dateTimeInputWidget-invalid {
+                       border: 1px solid @border-color-erroneous;
+                       box-shadow: @box-shadow-widget;
+
+                       &:focus {
+                               border: 1px solid @border-color-erroneous;
+                               box-shadow: @box-shadow-erroneous--focus;
                        }
                }
        }
 
+       &-clearButton {
+               padding-top: 0;
+       }
+
        &.oo-ui-widget-enabled {
-               .mw-widgets-datetime-dateTimeInputWidget-editField:hover {
-                       background-color: #eee;
-               }
+               .mw-widgets-datetime-dateTimeInputWidget-handle {
+                       .oo-ui-transition( border-color @transition-medium );
 
-               &.oo-ui-flaggedElement-invalid {
-                       .mw-widgets-datetime-dateTimeInputWidget-handle {
-                               border-color: #f00;
-                               box-shadow: inset 0 0 0 0 #f00;
+                       &:hover {
+                               border-color: @border-color-input--hover;
                        }
+               }
 
-                       .mw-widgets-datetime-dateTimeInputWidget-handle:focus {
-                               border-color: #f00;
-                               box-shadow: inset 0 0 0 0.1em #f00;
+               // Set on widget parent to also enable `:hover` on child elmeents
+               &:hover {
+                       input,
+                       textarea {
+                               border-color: @border-color-input--hover;
                        }
                }
-       }
 
-       input.mw-widgets-datetime-dateTimeInputWidget-field {
-               padding: 0.5em 0;
-       }
+               .mw-widgets-datetime-dateTimeInputWidget-editField:hover {
+                       background-color: @background-color-base--hover;
+               }
+
+               .mw-widgets-datetime-dateTimeInputWidget-editField:focus {
+                       outline: 0;
+                       box-shadow: inset 0 0 0 1px @color-progressive, 0 0 0 1px @color-progressive;
+               }
 
-       &-editField.mw-widgets-datetime-dateTimeInputWidget-invalid {
-               border: 1px solid #f00;
-               box-shadow: inset 0 0 0 0 #f00;
+               &.oo-ui-flaggedElement-invalid {
+                       .mw-widgets-datetime-dateTimeInputWidget-handle {
+                               border-color: @border-color-erroneous;
+                               box-shadow: @box-shadow-widget;
 
-               &:focus {
-                       border: 1px solid #f00;
-                       box-shadow: inset 0 0 0 0.1em #f00;
+                               &:focus {
+                                       border-color: @border-color-erroneous;
+                                       box-shadow: @box-shadow-erroneous--focus;
+                               }
+                       }
                }
        }
 
-       &.oo-ui-iconElement .mw-widgets-datetime-dateTimeInputWidget-handle {
-               padding-left: 3em;
-       }
+       &.oo-ui-widget-disabled {
+               .mw-widgets-datetime-dateTimeInputWidget-handle {
+                       background-color: @background-color-base--disabled;
+                       // Support: Safari
+                       -webkit-text-fill-color: @color-base--disabled;
+                       color: @color-base--disabled;
+                       border-color: @border-color-base--disabled;
+                       text-shadow: @text-shadow-base--disabled;
+               }
 
-       &.oo-ui-indicatorElement .mw-widgets-datetime-dateTimeInputWidget-handle {
-               padding-right: 2em;
+               > .oo-ui-iconElement-icon,
+               > .oo-ui-indicatorElement-indicator {
+                       opacity: @opacity-base--disabled;
+               }
        }
 }

diff --git a/resources/src/mediawiki.widgets.datetime/mediawiki.widgets.datetime.definitions.less b/resources/src/mediawiki.widgets.datetime/mediawiki.widgets.datetime.definitions.less
index a9c2dd2..ff0630f 100644 (file)
--- a/resources/src/mediawiki.widgets.datetime/mediawiki.widgets.datetime.definitions.less
+++ b/resources/src/mediawiki.widgets.datetime/mediawiki.widgets.datetime.definitions.less
@@ -1,5 +1,5 @@
 /*!
- * OOUI defines used by the existing CSS (will make it easier to put this
+ * OOUI definitions used by the existing CSS (will make it easier to put this
  * widget in OOUI once OOUI is capable of handling it)
  */
 
@@ -19,6 +19,7 @@
 
 .oo-ui-inline-spacing( @spacing, @cancelled-spacing: 0 ) {
        margin-right: @spacing;
+
        &:last-child {
                margin-right: @cancelled-spacing;
        }
@@ -31,7 +32,58 @@
        transition: @value;
 }
 
-@indicator-size: unit( 12 / 16 / 0.8, em );
-@icon-size: unit( 24 / 16 / 0.8, em );
-@quick-ease: 100ms ease;
-@progressive: #36c;
+// Variables taken from OOUI's WikimediaUI theme, see its common.less for further explanations
+@oo-ui-font-size-browser: 16; // assumed browser default of `16px`
+@oo-ui-font-size-base: 0.875em; // equals `14px` at browser default of `16px`
+
+@background-color-base: #fff;
+@background-color-base--hover: #eaecf0;
+@background-color-base--disabled: #eaecf0;
+
+@color-base: #222;
+@color-base--inverted: #fff;
+@color-base--subtle: #72777d;
+@color-base--disabled: #72777d;
+@color-progressive: #36c;
+@color-erroneous: #d33;
+
+@min-size-indicator: 12px;
+@size-base: 32 / @oo-ui-font-size-browser / @oo-ui-font-size-base;
+@size-icon: 24 / @oo-ui-font-size-browser / @oo-ui-font-size-base;
+@size-indicator: 12 / @oo-ui-font-size-browser / @oo-ui-font-size-base;
+@max-width-base: 50em;
+@max-width-input: @max-width-base;
+
+@padding-input-text: @padding-top-base @padding-horizontal-input-text @padding-bottom-base;
+@padding-horizontal-base: 12 / @oo-ui-font-size-browser / @oo-ui-font-size-base;
+@padding-horizontal-input-text: 8 / @oo-ui-font-size-browser / @oo-ui-font-size-base;
+@padding-top-base: 8 / @oo-ui-font-size-browser / @oo-ui-font-size-base;
+@padding-bottom-base: 7 / @oo-ui-font-size-browser / @oo-ui-font-size-base;
+@padding-start-input-text-icon: 6 / @oo-ui-font-size-browser / @oo-ui-font-size-base;
+@padding-start-input-text-icon-label: 32 / @oo-ui-font-size-browser / @oo-ui-font-size-base;
+
+@border-base: 1px solid #a2a9b1;
+@border-color-base--disabled: @color-base--disabled;
+@border-color-base--active: #72777d;
+@border-color-input--hover: @border-color-base--active;
+@border-color-erroneous: @color-erroneous;
+
+@border-radius-base: 2px;
+
+@box-shadow-base--focus: inset 0 0 0 1px @color-progressive;
+@box-shadow-dialog: 0 2px 2px 0 rgba( 0, 0, 0, 0.25 );
+@box-shadow-widget: inset 0 0 0 1px transparent;
+@box-shadow-erroneous--focus: inset 0 0 0 1px @color-erroneous;
+
+@line-height-widget-singleline: 15 / @oo-ui-font-size-browser / @oo-ui-font-size-base;
+
+@text-shadow-base: 0 1px 1px @color-base--inverted; // 'coined' effect
+@text-shadow-base--disabled: @text-shadow-base;
+
+@opacity-base--disabled: 0.51;
+
+@transition-base:             @transition-duration-base;
+@transition-medium:           @transition-duration-medium;
+// Transitions > Durations
+@transition-duration-base:    100ms;
+@transition-duration-medium:  250ms;