jenkins-bot has submitted this change and it was merged.
Change subject: Remove blue border from DateInputWidget calendar
..
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
---
M resources/src/mediawiki.widgets/mw.widgets.CalendarWidget.less
M resources/src/mediawiki.widgets/mw.widgets.DateInputWidget.less
2 files changed, 17 insertions(+), 18 deletions(-)
Approvals:
Bartosz Dziewoński: Looks good to me, but someone else must approve
Jforrester: Looks good to me, but someone else must approve
Esanders: Looks good to me, approved
jenkins-bot: Verified
diff --git a/resources/src/mediawiki.widgets/mw.widgets.CalendarWidget.less
b/resources/src/mediawiki.widgets/mw.widgets.CalendarWidget.less
index 702eb80..9d30eb8 100644
--- 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
--- 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;
}
}
--
To view, visit https://gerrit.wikimedia.org/r/241082
To unsubscribe, visit https://gerrit.wikimedia.org/r/settings
Gerrit-MessageType: merged
Gerrit-Change-Id: I0332a9bac4c5ec6abb5a836125718e6b779bf496
Gerrit-PatchSet: 4
Gerrit-Project: mediawiki/core
Gerrit-Branch: master
Gerrit-Owner: Esanders
Gerrit-Reviewer: Bartosz Dziewoński
Gerrit-Reviewer: Edokter
Gerrit-Reviewer: Esanders
Gerrit-Reviewer: Jack Phoenix
Gerrit-Reviewer: Jforrester
Gerrit-Reviewer: jenkins-bot <>
