jenkins-bot has submitted this change and it was merged.
Change subject: CapsuleMultiSelectWidget: Fix cross-browser inconsistencies and
improve UX
......................................................................
CapsuleMultiSelectWidget: Fix cross-browser inconsistencies and improve UX
Fixing browser inconsistencies between Firefox, Chrome and IE 11. Also
* increasing clickable area of clear button for better usability and
* hiding clear button on disabled label elements
Bug: T134117
Change-Id: Id80f68f8c9162d38e353026fb83ec11d251da617
---
M src/themes/mediawiki/widgets.less
1 file changed, 34 insertions(+), 9 deletions(-)
Approvals:
Jforrester: Looks good to me, approved
jenkins-bot: Verified
diff --git a/src/themes/mediawiki/widgets.less
b/src/themes/mediawiki/widgets.less
index 200fc88..ec849f0 100644
--- a/src/themes/mediawiki/widgets.less
+++ b/src/themes/mediawiki/widgets.less
@@ -780,14 +780,14 @@
max-width: 100%;
.oo-ui-box-sizing( border-box );
vertical-align: middle;
- padding: 0 0.4em;
- margin: 0.1em;
height: 1.7em;
line-height: 1.7em;
background-color: #eee;
- border: @border-default;
color: @color-default;
+ margin: 0.1em;
+ border: @border-default;
border-radius: @border-radius-default;
+ padding: 0 0.4em;
&:focus {
outline: 0;
@@ -795,15 +795,40 @@
}
&.oo-ui-widget-disabled {
- color: @color-disabled;
- text-shadow: @text-shadow-disabled;
- border-color: @border-color-disabled;
background-color: @background-color-disabled;
+ color: @color-disabled;
+ border-color: @border-color-disabled;
+ text-shadow: @text-shadow-disabled;
}
- > .oo-ui-buttonElement {
- margin-top: -1.4em;
- padding-left: 0.3em;
+ // Clear button
+ & > .oo-ui-buttonElement {
+ display: none;
+ }
+
+ &.oo-ui-widget-enabled {
+ padding-right: @size-indicator + 0.6em;
+
+ > .oo-ui-buttonElement {
+ display: block;
+ position: absolute;
+ top: 0;
+ right: 0;
+ bottom: 0;
+ }
+ & .oo-ui-buttonElement-button {
+ display: block;
+ width: @size-indicator + 0.6em; // Padding on each side
of the indicator
+ height: 100%; // Firefox height calculation fix
+
+ & .oo-ui-indicator-clear {
+ position: absolute;
+ top: 0;
+ right: 0.3em;
+ bottom: 0;
+ height: auto;
+ }
+ }
}
}
--
To view, visit https://gerrit.wikimedia.org/r/286380
To unsubscribe, visit https://gerrit.wikimedia.org/r/settings
Gerrit-MessageType: merged
Gerrit-Change-Id: Id80f68f8c9162d38e353026fb83ec11d251da617
Gerrit-PatchSet: 2
Gerrit-Project: oojs/ui
Gerrit-Branch: master
Gerrit-Owner: VolkerE <[email protected]>
Gerrit-Reviewer: Bartosz Dziewoński <[email protected]>
Gerrit-Reviewer: Esanders <[email protected]>
Gerrit-Reviewer: Jforrester <[email protected]>
Gerrit-Reviewer: Prtksxna <[email protected]>
Gerrit-Reviewer: VolkerE <[email protected]>
Gerrit-Reviewer: jenkins-bot <>
_______________________________________________
MediaWiki-commits mailing list
[email protected]
https://lists.wikimedia.org/mailman/listinfo/mediawiki-commits
