Prtksxna has uploaded a new change for review. https://gerrit.wikimedia.org/r/176398
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 A src/themes/mediawiki/images/icons/radio.svg~ M src/themes/mediawiki/widgets.less 4 files changed, 79 insertions(+), 1 deletion(-) git pull ssh://gerrit.wikimedia.org:29418/oojs/ui refs/changes/98/176398/1 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/images/icons/radio.svg~ b/src/themes/mediawiki/images/icons/radio.svg~ new file mode 100644 index 0000000..29e5dba --- /dev/null +++ b/src/themes/mediawiki/images/icons/radio.svg~ @@ -0,0 +1,6 @@ +<?xml version="1.0" encoding="utf-8"?> +<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24"> + <g id="add"> + <path id="plus" d="M13 8h-2v3h-3v2h3v3h2v-3h3v-2h-3z"/> + </g> +</svg> diff --git a/src/themes/mediawiki/widgets.less b/src/themes/mediawiki/widgets.less index 2477752..83a2624 100644 --- a/src/themes/mediawiki/widgets.less +++ b/src/themes/mediawiki/widgets.less @@ -209,7 +209,77 @@ } } -.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; + + // 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: newchange Gerrit-Change-Id: I77195752d83c9902aaf9809fdb4d7cd10c3f2052 Gerrit-PatchSet: 1 Gerrit-Project: oojs/ui Gerrit-Branch: master Gerrit-Owner: Prtksxna <psax...@wikimedia.org> _______________________________________________ MediaWiki-commits mailing list MediaWiki-commits@lists.wikimedia.org https://lists.wikimedia.org/mailman/listinfo/mediawiki-commits