jenkins-bot has submitted this change and it was merged.
Change subject: MediaWiki Theme: Add radio buttons
......................................................................
MediaWiki Theme: Add radio buttons
Change-Id: I77195752d83c9902aaf9809fdb4d7cd10c3f2052
---
M src/themes/mediawiki/images.json
A src/themes/mediawiki/images/icons/circle.svg
M src/themes/mediawiki/widgets.less
3 files changed, 77 insertions(+), 1 deletion(-)
Approvals:
Bartosz Dziewoński: Looks good to me, but someone else must approve
Trevor Parscal: Looks good to me, approved
jenkins-bot: Verified
diff --git a/src/themes/mediawiki/images.json b/src/themes/mediawiki/images.json
index 5be0929..e047ef8 100644
--- a/src/themes/mediawiki/images.json
+++ b/src/themes/mediawiki/images.json
@@ -41,6 +41,7 @@
"next": { "file": "move-ltr.svg" },
"picture": { "file": "picture.svg" },
"previous": { "file": "move-rtl.svg" },
+ "circle": { "file": "circle.svg", "variants": [
"constructive" ] },
"redo": { "file": "arched-arrow-ltr.svg" },
"remove": { "file": "remove.svg", "variants": [
"destructive" ] },
"search": { "file": "search.svg" },
diff --git a/src/themes/mediawiki/images/icons/circle.svg
b/src/themes/mediawiki/images/icons/circle.svg
new file mode 100644
index 0000000..a600581
--- /dev/null
+++ b/src/themes/mediawiki/images/icons/circle.svg
@@ -0,0 +1 @@
+<?xml version="1.0" encoding="utf-8"?><svg xmlns="http://www.w3.org/2000/svg";
width="24" height="24" viewBox="0 0 24 24"><circle cx="12" cy="12"
r="6"></circle></svg>
diff --git a/src/themes/mediawiki/widgets.less
b/src/themes/mediawiki/widgets.less
index e6f2f40..3f905e9 100644
--- a/src/themes/mediawiki/widgets.less
+++ b/src/themes/mediawiki/widgets.less
@@ -213,7 +213,81 @@
}
}
-.theme-oo-ui-radioInputWidget () {}
+.theme-oo-ui-radioInputWidget () {
+ position: relative;
+ line-height: @input-size;
+
+ * {
+ font: inherit;
+ vertical-align: middle;
+ }
+
+ input[type="radio"] {
+ // we hide the input element as instead we will style the span
that follows
+ // we use opacity so that VoiceOver software can still identify
it
+ opacity: 0;
+
+ // having a margin might offset the checkbox from the pseudo
element
+ // making only the overlap region react to events
+ margin: 0;
+
+ // ensure the invisible checkbox takes up the required width
+ width: @input-size;
+ height: @input-size;
+
+ // This is needed for Firefox mobile (See bug 71750 to
workaround default Firefox stylesheet)
+ max-width: none;
+
+ & + span {
+ cursor: pointer;
+ margin: 0 0.4em;
+ }
+
+ & + span::before {
+ content: '';
+ .oo-ui-box-sizing( border-box );
+ position: absolute;
+ left: 0;
+ border-radius: 100%;
+ width: @input-size;
+ height: @input-size;
+ background: white;
+ border: 1px solid @input-border-color;
+ }
+
+ &:checked + span::before {
+
.oo-ui-background-image('@{oo-ui-default-image-path}/icons/circle-constructive.svg');
+ background-size: @input-size, @input-size;
+ background-repeat: no-repeat;
+ background-position: center center;
+ background-origin: border-box;
+ }
+
+ &:active + span::before {
+ background-color: @input-active-color;
+ border-color: @input-active-color;
+ }
+
+ &:focus + span::before {
+ border-width: @input-focus-border-width;
+ }
+
+ &:focus:hover + span::before,
+ &:hover + span::before {
+ border-bottom-width: @input-hover-border-bottom-width;
+ }
+
+ &:disabled + span::before {
+ cursor: default;
+ background-color: @input-disabled-color;
+ border-color: @input-disabled-color;
+ }
+
+ &:disabled:checked + span::before {
+
.oo-ui-background-image('@{oo-ui-default-image-path}/icons/circle-invert.svg');
+ }
+ }
+}
.theme-oo-ui-textInputWidget () {
width: 100%;
--
To view, visit https://gerrit.wikimedia.org/r/176398
To unsubscribe, visit https://gerrit.wikimedia.org/r/settings
Gerrit-MessageType: merged
Gerrit-Change-Id: I77195752d83c9902aaf9809fdb4d7cd10c3f2052
Gerrit-PatchSet: 5
Gerrit-Project: oojs/ui
Gerrit-Branch: master
Gerrit-Owner: Prtksxna <psax...@wikimedia.org>
Gerrit-Reviewer: Bartosz Dziewoński <matma....@gmail.com>
Gerrit-Reviewer: Esanders <esand...@wikimedia.org>
Gerrit-Reviewer: Jforrester <jforres...@wikimedia.org>
Gerrit-Reviewer: Prtksxna <psax...@wikimedia.org>
Gerrit-Reviewer: Trevor Parscal <tpars...@wikimedia.org>
Gerrit-Reviewer: jenkins-bot <>
_______________________________________________
MediaWiki-commits mailing list
MediaWiki-commits@lists.wikimedia.org
https://lists.wikimedia.org/mailman/listinfo/mediawiki-commits
