Remove blue border from DateInputWidget calendar

CalendarWidget will now only get the blue focus border when it is
focussed itself, not always inside a focussed DateInputWidget.

Bug: T113741
Change-Id: I0332a9bac4c5ec6abb5a836125718e6b779bf496

diff --git a/resources/src/mediawiki.widgets/mw.widgets.CalendarWidget.less b/resources/src/mediawiki.widgets/mw.widgets.CalendarWidget.less
index 702eb80..9d30eb8 100644 (file)
--- a/resources/src/mediawiki.widgets/mw.widgets.CalendarWidget.less
+++ b/resources/src/mediawiki.widgets/mw.widgets.CalendarWidget.less
@@ -148,7 +148,7 @@
        // 7x7 grid
        width: @calendarWidth / 7;
        line-height: @calendarHeight / 7;
-       // Don't overlap the hacked-up fake box-shadow border we get inside DateInputWidget when focussed
+       // Don't overlap the hacked-up fake box-shadow border we get when focussed
        &:nth-child(7n) {
                width: @calendarWidth / 7 - 0.2em;
                margin-right: 0.2em;
@@ -167,7 +167,7 @@
        // 2x6 grid
        width: @calendarWidth / 2;
        line-height: @calendarHeight / 6;
-       // Don't overlap the hacked-up fake box-shadow border we get inside DateInputWidget when focussed
+       // Don't overlap the hacked-up fake box-shadow border we get when focussed
        &:nth-child(2n) {
                width: @calendarWidth / 2 - 0.2em;
                margin-right: 0.2em;
@@ -186,7 +186,7 @@
        // 5x4 grid
        width: @calendarWidth / 5;
        line-height: @calendarHeight / 4;
-       // Don't overlap the hacked-up fake box-shadow border we get inside DateInputWidget when focussed
+       // Don't overlap the hacked-up fake box-shadow border we get when focussed
        &:nth-child(5n) {
                width: @calendarWidth / 5 - 0.2em;
                margin-right: 0.2em;
@@ -206,6 +206,15 @@
 }
 
 /* Theme-specific */
+.mw-widget-calendarWidget {
+       box-shadow: inset 0 0 0 1px #ccc;
+}
+
+.mw-widget-calendarWidget:focus {
+       outline: none;
+       box-shadow: inset 0 0 0 2px #347bff;
+}
+
 .mw-widget-calendarWidget-day {
        color: #444;
        border-radius: 0.1em;

diff --git a/resources/src/mediawiki.widgets/mw.widgets.DateInputWidget.less b/resources/src/mediawiki.widgets/mw.widgets.DateInputWidget.less
index f78a18d..8c1d2a0 100644 (file)
--- a/resources/src/mediawiki.widgets/mw.widgets.DateInputWidget.less
+++ b/resources/src/mediawiki.widgets/mw.widgets.DateInputWidget.less
@@ -66,26 +66,16 @@
                padding-left: 1em;
        }
 
-       > .mw-widget-calendarWidget {
-               background-color: white;
+       > .oo-ui-textInputWidget {
+               z-index: 2;
        }
 
-       &-active > .mw-widget-calendarWidget {
+       > .mw-widget-calendarWidget {
+               background-color: white;
                margin-top: -2px;
-               // Immitate focussed input styles
-               // First shadow generates bottom and right "border", second shadow generates bottom and left,
-               // resulting in no "border" at the top. Note that this generates a 2px-wide "border", not 1px.
-               // It makes sense when you think about it long enough and look up what each value means. Enjoy.
-               // (This is symmetrical anyway, and CSSJanus can't flip it correctly. T62805)
-               /* @noflip */
-               box-shadow: inset -1px -1px 0 1px #347bff, inset 1px -1px 0 1px #347bff;
-               border-top: 1px solid #ccc;
 
                &:focus {
-                       outline: none;
-                       // Add border at the top on focus
-                       margin-top: -3px;
-                       border-top: 2px solid #347bff;
+                       z-index: 3;
                }
        }