VolkerE has uploaded a new change for review.
https://gerrit.wikimedia.org/r/286380
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
* Make clickable area of clear button easier approachable
* Hiding clear button on disabled label elements
Bug: T134117
Change-Id: Id80f68f8c9162d38e353026fb83ec11d251da617
---
M src/themes/mediawiki/widgets.less
1 file changed, 36 insertions(+), 9 deletions(-)
git pull ssh://gerrit.wikimedia.org:29418/oojs/ui refs/changes/80/286380/1
diff --git a/src/themes/mediawiki/widgets.less
b/src/themes/mediawiki/widgets.less
index 200fc88..c5f4f8e 100644
--- a/src/themes/mediawiki/widgets.less
+++ b/src/themes/mediawiki/widgets.less
@@ -780,14 +780,17 @@
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-top: 0;
+ padding-left: 0.4em;
+ padding-bottom: 0;
+ padding-right: 0.4em;
&:focus {
outline: 0;
@@ -795,15 +798,39 @@
}
&.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
+
+ & .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: newchange
Gerrit-Change-Id: Id80f68f8c9162d38e353026fb83ec11d251da617
Gerrit-PatchSet: 1
Gerrit-Project: oojs/ui
Gerrit-Branch: master
Gerrit-Owner: VolkerE <[email protected]>
_______________________________________________
MediaWiki-commits mailing list
[email protected]
https://lists.wikimedia.org/mailman/listinfo/mediawiki-commits
