Align mw.widgets.DateInputWidget to OOjs UI's MediaWiki theme widgets

Aligning mw.widgets.DateInputWidget to improved color palette and to
similar MediaWiki theme widgets. Removing distinction of theme specific
styles for now. Introducing transitions in several places to improve
user experience and changing CalendarWidget to `box-sizing: border-box`
to enable border on IE 8.

Bug: T149270
Change-Id: I6b5b99f444a02f68933c85ccd2b8898d3a8758bf

diff --git a/resources/src/mediawiki.widgets/mw.widgets.CalendarWidget.less b/resources/src/mediawiki.widgets/mw.widgets.CalendarWidget.less
index 4d90496..2fe5d3d 100644 (file)
--- a/resources/src/mediawiki.widgets/mw.widgets.CalendarWidget.less
+++ b/resources/src/mediawiki.widgets/mw.widgets.CalendarWidget.less
@@ -5,6 +5,8 @@
  * @license The MIT License (MIT); see LICENSE.txt
  */
 
+@import 'mediawiki.mixins';
+
 @calendarWidth: 21em;
 @calendarHeight: 14em;
 
@@ -14,7 +16,7 @@
 
 .mw-widget-calendarWidget-header {
        position: relative;
-       line-height: 2.5em;
+       line-height: 2.5;
 }
 
 .mw-widget-calendarWidget-header .oo-ui-buttonWidget {
@@ -64,16 +66,12 @@
                height: @calendarHeight;
        }
 
-       .mw-widget-calendarWidget-old-body {
-               // background: #fdd;
-       }
-
-       .mw-widget-calendarWidget-body:not(.mw-widget-calendarWidget-old-body):first-child {
+       .mw-widget-calendarWidget-body:not( .mw-widget-calendarWidget-old-body ):first-child {
                margin-top: -@calendarHeight;
                margin-left: -@calendarWidth;
        }
 
-       .mw-widget-calendarWidget-body:not(.mw-widget-calendarWidget-old-body):last-child {
+       .mw-widget-calendarWidget-body:not( .mw-widget-calendarWidget-old-body ):last-child {
                margin-top: 0;
                margin-left: 0;
        }
@@ -86,7 +84,7 @@
        .mw-widget-calendarWidget-body:first-child {
                margin-top: 0 !important;
                margin-left: 0 !important;
-               transition: 0.5s margin-left;
+               .transition( margin-left 500ms );
        }
 }
 
@@ -97,7 +95,7 @@
        .mw-widget-calendarWidget-body:first-child {
                margin-left: -@calendarWidth !important;
                margin-top: 0 !important;
-               transition: 0.5s margin-left;
+               .transition( margin-left 500ms );
        }
 }
 
@@ -112,7 +110,7 @@
        .mw-widget-calendarWidget-body:first-child {
                margin-left: 0 !important;
                margin-top: 0 !important;
-               transition: 0.5s margin-top;
+               .transition( margin-top 500ms );
        }
 }
 
@@ -127,7 +125,7 @@
        .mw-widget-calendarWidget-body:first-child {
                margin-left: 0 !important;
                margin-top: -@calendarHeight !important;
-               transition: 0.5s margin-top;
+               .transition( margin-top 500ms );
        }
 }
 
@@ -149,15 +147,15 @@
        width: @calendarWidth / 7;
        line-height: @calendarHeight / 7;
        // Don't overlap the hacked-up fake box-shadow border we get when focussed
-       &:nth-child(7n) {
+       &:nth-child( 7n ) {
                width: @calendarWidth / 7 - 0.2em;
                margin-right: 0.2em;
        }
-       &:nth-child(7n+1) {
+       &:nth-child( 7n+1 ) {
                width: @calendarWidth / 7 - 0.2em;
                margin-left: 0.2em;
        }
-       &:nth-child(42) ~ & {
+       &:nth-child( 42 ) ~ & {
                line-height: @calendarHeight / 7 - 0.2em;
                margin-bottom: 0.2em;
        }
@@ -168,15 +166,15 @@
        width: @calendarWidth / 2;
        line-height: @calendarHeight / 6;
        // Don't overlap the hacked-up fake box-shadow border we get when focussed
-       &:nth-child(2n) {
+       &:nth-child( 2n ) {
                width: @calendarWidth / 2 - 0.2em;
                margin-right: 0.2em;
        }
-       &:nth-child(2n+1) {
+       &:nth-child( 2n+1 ) {
                width: @calendarWidth / 2 - 0.2em;
                margin-left: 0.2em;
        }
-       &:nth-child(10) ~ & {
+       &:nth-child( 10 ) ~ & {
                line-height: @calendarHeight / 6 - 0.2em;
                margin-bottom: 0.2em;
        }
@@ -187,15 +185,15 @@
        width: @calendarWidth / 5;
        line-height: @calendarHeight / 4;
        // Don't overlap the hacked-up fake box-shadow border we get when focussed
-       &:nth-child(5n) {
+       &:nth-child( 5n ) {
                width: @calendarWidth / 5 - 0.2em;
                margin-right: 0.2em;
        }
-       &:nth-child(5n+1) {
+       &:nth-child( 5n+1 ) {
                width: @calendarWidth / 5 - 0.2em;
                margin-left: 0.2em;
        }
-       &:nth-child(15) ~ & {
+       &:nth-child( 15 ) ~ & {
                line-height: @calendarHeight / 4 - 0.2em;
                margin-bottom: 0.2em;
        }
@@ -207,37 +205,49 @@
 
 /* Theme-specific */
 .mw-widget-calendarWidget {
-       box-shadow: inset 0 0 0 1px #ccc;
-}
+       .box-sizing( border-box );
+       border: 1px solid #a2a9b1;
+       .transition( ~'border-color 100ms, box-shadow 100ms' );
 
-.mw-widget-calendarWidget:focus {
-       outline: none;
-       box-shadow: inset 0 0 0 2px #36c;
-}
+       &:focus {
+               border-color: #36c;
+               box-shadow: inset 0 0 0 1px #36c;
+               outline: 0;
+       }
 
-.mw-widget-calendarWidget-day {
-       color: #444;
-       border-radius: 0.1em;
-}
+       &-day {
+               color: #222;
+               border-radius: 2px;
+       }
 
-.mw-widget-calendarWidget-day-heading {
-       font-weight: bold;
-       color: #555;
-}
+       &-day-heading {
+               color: #54595d;
+               font-weight: bold;
+       }
 
-.mw-widget-calendarWidget-day-additional {
-       color: #aaa;
-}
+       &-day-additional {
+               color: #a2a9b1;
 
-.mw-widget-calendarWidget-day-today {
-       box-shadow: inset 0 0 0 1px #3787fb;
-}
+               &:hover {
+                       color: #222;
+               }
+       }
 
-.mw-widget-calendarWidget-item-selected {
-       background-color: #d8e6fe;
-       color: #3787fb;
-}
+       &-day-today {
+               box-shadow: inset 0 0 0 1px #36c;
+       }
+
+       &-item {
+               .transition( ~'background-color 250ms, color 250ms' );
 
-.mw-widget-calendarWidget-item:hover {
-       background-color: #eee;
+               &:hover {
+                       background-color: #36c;
+                       color: #fff;
+               }
+
+               &-selected {
+                       background-color: #2a4b8d;
+                       color: #fff;
+               }
+       }
 }

diff --git a/resources/src/mediawiki.widgets/mw.widgets.DateInputWidget.less b/resources/src/mediawiki.widgets/mw.widgets.DateInputWidget.less
index 46e6b62..8ba9a99 100644 (file)
--- a/resources/src/mediawiki.widgets/mw.widgets.DateInputWidget.less
+++ b/resources/src/mediawiki.widgets/mw.widgets.DateInputWidget.less
@@ -21,6 +21,7 @@
 
 .oo-ui-inline-spacing( @spacing, @cancelled-spacing: 0 ) {
        margin-right: @spacing;
+
        &:last-child {
                margin-right: @cancelled-spacing;
        }
@@ -31,15 +32,29 @@
 .mw-widget-dateInputWidget {
        display: inline-block;
        position: relative;
+       width: 21em;
+       margin-top: 0.25em;
+       .oo-ui-inline-spacing( 0.5em );
+       margin-bottom: 0.25em;
+       margin-left: 0;
 
        &-handle {
-               width: 100%;
+               background-color: #fff;
                display: inline-block;
-               cursor: pointer;
                position: relative;
-
+               .oo-ui-box-sizing( border-box );
+               width: 100%;
                .oo-ui-unselectable();
-               .oo-ui-box-sizing(border-box);
+               cursor: pointer;
+               padding: 0.5em 1em;
+               border: 1px solid #a2a9b1;
+               border-radius: 2px;
+               outline: 0;
+               line-height: 1.275;
+
+               > .oo-ui-labelElement-label {
+                       padding: 0;
+               }
 
                > .oo-ui-indicatorElement-indicator {
                        display: none;
@@ -51,76 +66,37 @@
                position: absolute;
                top: 0;
                right: 0;
-               height: 100%;
-       }
-
-       &.oo-ui-widget-disabled .mw-widget-dateInputWidget-handle {
-               cursor: default;
-       }
-
-       &-calendar {
-               position: absolute;
-               z-index: 1;
-       }
-
-       // Theme-specific styles
-       width: 21em;
-       margin: 0.25em 0;
-
-       .oo-ui-inline-spacing(0.5em);
-
-       &-handle {
-               padding: 0.5em 1em;
-               border: 1px solid #ccc;
-               border-radius: 0.1em;
-               line-height: 1.275em;
-               background-color: #fff;
-
-               > .oo-ui-labelElement-label {
-                       padding: 0;
-               }
-       }
-
-       &.oo-ui-indicatorElement .mw-widget-dateInputWidget-handle > .oo-ui-indicatorElement-indicator {
                width: @indicator-size;
+               height: 100%;
                margin: 0 0.775em;
        }
 
-       > .oo-ui-textInputWidget input {
-               padding-left: 1em;
-       }
-
        > .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 );
+               z-index: 1;
 
                &:focus {
+                       box-shadow: inset 0 0 0 1px #36c, 0 0.15em 0 0 rgba( 0, 0, 0, 0.15 );
                        z-index: 3;
                }
        }
 
-       &.oo-ui-widget-enabled {
-               .mw-widget-dateInputWidget-handle:hover {
-                       border-color: #36c;
-               }
-       }
-
-       &.oo-ui-widget-disabled {
+       &-empty {
                .mw-widget-dateInputWidget-handle {
-                       color: #ccc;
-                       text-shadow: 0 1px 1px #fff;
-                       border-color: #ddd;
-                       background-color: #f3f3f3;
-
-                       > .oo-ui-indicatorElement-indicator {
-                               opacity: 0.2;
-                       }
+                       color: #54595d;
+                       outline: 0;
                }
-
        }
 
        &.oo-ui-flaggedElement-invalid {
@@ -130,9 +106,23 @@
                }
        }
 
-       &-empty {
+       &.oo-ui-widget-enabled {
+               .mw-widget-dateInputWidget-handle:hover {
+                       border-color: #72777d;
+               }
+       }
+
+       &.oo-ui-widget-disabled {
                .mw-widget-dateInputWidget-handle {
-                       color: #ccc;
+                       background-color: #eaecf0;
+                       color: #72777d;
+                       border-color: #c8ccd1;
+                       text-shadow: 0 1px 1px #fff;
+                       cursor: default;
+
+                       > .oo-ui-indicatorElement-indicator {
+                               opacity: 0.51;
+                       }
                }
        }
 }