From 87586544f100400b62108859a5159bee57908459 Mon Sep 17 00:00:00 2001 From: Volker E Date: Sun, 20 Aug 2017 19:58:04 -0700 Subject: [PATCH] widgets.DateInputWidget Align design with WikimediaUI MIME-Version: 1.0 Content-Type: text/plain; charset=utf8 Content-Transfer-Encoding: 8bit Aligning DateInputWidget with WikimediaUI theme widgets by: - using “Red50” color `#d33` from color palette, - using standard dialog `box-shadow` value, - ensure handle appearance is similar to standard TextInputWidget, - align variable name, - introduce similar variables from WikimediaUI theme, and also - removing unnecessary properties. Adding a `max-height` to address vendor specific UI elements for `type=date` in Chrome. Bug: T180094 Change-Id: I4e0ca6c472e2d6ddbe64eb783acf8c38c5beacc4 --- .../mw.widgets.DateInputWidget.less | 21 ++--- .../mw.widgets.DateInputWidget.styles.less | 78 ++++++++++++++++--- 2 files changed, 75 insertions(+), 24 deletions(-) diff --git a/resources/src/mediawiki.widgets/mw.widgets.DateInputWidget.less b/resources/src/mediawiki.widgets/mw.widgets.DateInputWidget.less index 47f804521e..9750452803 100644 --- a/resources/src/mediawiki.widgets/mw.widgets.DateInputWidget.less +++ b/resources/src/mediawiki.widgets/mw.widgets.DateInputWidget.less @@ -13,16 +13,12 @@ user-select: none; } -@indicator-size: unit( 12 / 16 / 0.8, em ); +@size-indicator: unit( 12 / 16 / 0.8, em ); .mw-widget-dateInputWidget { &-handle { .oo-ui-unselectable(); - > .oo-ui-labelElement-label { - padding: 0; - } - > .oo-ui-indicatorElement-indicator { display: none; } @@ -33,28 +29,25 @@ position: absolute; top: 0; right: 0; - width: @indicator-size; + width: @size-indicator; height: 100%; margin: 0 0.775em; } > .oo-ui-textInputWidget { z-index: 2; - - & input { - padding-left: 1em; - } } &-calendar { background-color: #fff; position: absolute; margin-top: -2px; - box-shadow: 0 0.15em 0 0 rgba( 0, 0, 0, 0.15 ); + border-radius: 2px; + box-shadow: 0 2px 2px 0 rgba( 0, 0, 0, 0.25 ); z-index: 1; &:focus { - box-shadow: inset 0 0 0 1px #36c, 0 0.15em 0 0 rgba( 0, 0, 0, 0.15 ); + box-shadow: inset 0 0 0 1px #36c, 0 2px 2px 0 rgba( 0, 0, 0, 0.25 ); z-index: 3; } } @@ -68,8 +61,8 @@ &.oo-ui-flaggedElement-invalid { .mw-widget-dateInputWidget-handle { - border-color: #f00; - box-shadow: inset 0 0 0 0 #f00; + border-color: #d33; + box-shadow: none; } } diff --git a/resources/src/mediawiki.widgets/mw.widgets.DateInputWidget.styles.less b/resources/src/mediawiki.widgets/mw.widgets.DateInputWidget.styles.less index 18cf723904..ea6c9819bc 100644 --- a/resources/src/mediawiki.widgets/mw.widgets.DateInputWidget.styles.less +++ b/resources/src/mediawiki.widgets/mw.widgets.DateInputWidget.styles.less @@ -5,6 +5,32 @@ * @license The MIT License (MIT); see LICENSE.txt */ +// Variables taken from OOUI's WikimediaUI theme +@oo-ui-font-size-browser: 16; // assumed browser default of `16px` +@oo-ui-font-size-base: 0.8em; // equals `12.8px` at browser default of `16px` + +@background-color-base: #fff; + +@color-base--emphasized: #000; + +@border-base: 1px solid #a2a9b1; +@border-color-base--focus: #36c; +@border-color-input--hover: #72777d; +@border-radius-base: 2px; + +@padding-input-text: @padding-top-base @padding-horizontal-input-text @padding-bottom-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; // equals `0.625em`≈`8px` +@padding-bottom-base: 7 / @oo-ui-font-size-browser / @oo-ui-font-size-base; // equals `0.547em`≈`7px` + +@box-shadow-widget: inset 0 0 0 1px transparent; +@box-shadow-widget--focus: inset 0 0 0 1px #36c; + +@line-height-widget-singleline: 1.172em; // Firefox needs a value, Chrome the unit; equals `15px` at base `font-size: 12.8px` + +@transition-ease-out-sine-medium: 200ms cubic-bezier( 0.39, 0.575, 0.565, 1 ); + +// Mixins taken from OOUI .oo-ui-box-sizing( @type: border-box ) { -webkit-box-sizing: @type; -moz-box-sizing: @type; @@ -19,13 +45,21 @@ } } +.oo-ui-transition( @value1, @value2: X, ... ) { + @value: ~`"@{arguments}".replace( /[\[\]]|\,\sX/g, '' )`; // stylelint-disable-line function-comma-space-after, function-whitespace-after, string-quotes, value-keyword-case + -webkit-transition: @value; + -moz-transition: @value; + transition: @value; +} + +// DateInputWidget rules .mw-widget-dateInputWidget { &.oo-ui-textInputWidget { display: inline-block; position: relative; width: 21em; margin-top: 0.25em; - .oo-ui-inline-spacing( 0.5em ); + // .oo-ui-inline-spacing( 0.5em ); already inherited from `.oo-ui-inputWidget` margin-bottom: 0.25em; margin-left: 0; } @@ -33,21 +67,45 @@ // Note that this block applies to both the PHP widget and the JS widget &-handle, &.oo-ui-textInputWidget input { - background-color: #fff; display: inline-block; position: relative; - .oo-ui-box-sizing( border-box ); - width: 100%; cursor: pointer; - padding: 0.5em 1em; - border: 1px solid #a2a9b1; - border-radius: 2px; - outline: 0; - line-height: 1.275; /** * Ensures non-infused and infused widget have the same height. * Equal to line height + top padding + bottom padding */ - height: 2.275em; + max-height: 2.458em; + } + + // Ensure `.mw-widget-dateInputWidget-handle` similar appearance to OOUI's `.oo-ui-textInputWidget` + &-handle { + background-color: @background-color-base; + color: @color-base--emphasized; + .oo-ui-box-sizing( border-box ); + width: 100%; + border: @border-base; + border-radius: @border-radius-base; + padding: @padding-input-text; + line-height: @line-height-widget-singleline; + } + + &.oo-ui-widget-enabled { + .mw-widget-dateInputWidget-handle { + box-shadow: @box-shadow-widget; // necessary for smooth transition + .oo-ui-transition( + border-color @transition-ease-out-sine-medium, + box-shadow @transition-ease-out-sine-medium + ); + + &:hover { + border-color: @border-color-input--hover; + } + + &:focus { + outline: 0; + border-color: @border-color-base--focus; + box-shadow: @box-shadow-widget--focus; + } + } } } -- 2.20.1