From 53913c9961cd88124bc0eb81706caa940b5bac36 Mon Sep 17 00:00:00 2001 From: Volker E Date: Thu, 27 Oct 2016 19:23:49 -0700 Subject: [PATCH] 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 --- .../mw.widgets.CalendarWidget.less | 102 +++++++++-------- .../mw.widgets.DateInputWidget.less | 104 ++++++++---------- 2 files changed, 103 insertions(+), 103 deletions(-) diff --git a/resources/src/mediawiki.widgets/mw.widgets.CalendarWidget.less b/resources/src/mediawiki.widgets/mw.widgets.CalendarWidget.less index 4d904964ec..2fe5d3d2db 100644 --- 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 46e6b62ac7..8ba9a99162 100644 --- 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; + } } } } -- 2.20.1