X-Git-Url: https://git.cyclocoop.org/%28%28?a=blobdiff_plain;f=resources%2Fsrc%2Fmediawiki.ui%2Fcomponents%2Fradio.less;h=1928699bb57b8b2e06564fd8b968ef202355de46;hb=eca35903a2390bf7eb503fa0ede6a76ce556dc55;hp=6d8978e3e681ecb7c51d9c4a7f78c825aacf84df;hpb=a9d435fb43f71695b1b4619281c21072d56433d0;p=lhc%2Fweb%2Fwiklou.git

diff --git a/resources/src/mediawiki.ui/components/radio.less b/resources/src/mediawiki.ui/components/radio.less
index 6d8978e3e6..1928699bb5 100644
--- a/resources/src/mediawiki.ui/components/radio.less
+++ b/resources/src/mediawiki.ui/components/radio.less
@@ -11,23 +11,23 @@
 //
 // Markup:
 // <div class="mw-ui-radio">
-//   <input type="radio" id="kss-example-7" name="kss-example-7">
-//   <label for="kss-example-7">Standard radio</label>
+//   <input type="radio" id="kss-example-4" name="kss-example-4">
+//   <label for="kss-example-4">Standard radio</label>
 // </div>
 // <div class="mw-ui-radio">
-//   <input type="radio" id="kss-example-7-checked" name="kss-example-7" checked>
-//   <label for="kss-example-7-checked">Standard checked radio</label>
+//   <input type="radio" id="kss-example-4-checked" name="kss-example-4" checked>
+//   <label for="kss-example-4-checked">Standard checked radio</label>
 // </div>
 // <div class="mw-ui-radio">
-//   <input type="radio" id="kss-example-7-disabled" name="kss-example-7-disabled" disabled>
-//   <label for="kss-example-7-disabled">Disabled radio</label>
+//   <input type="radio" id="kss-example-4-disabled" name="kss-example-4-disabled" disabled>
+//   <label for="kss-example-4-disabled">Disabled radio</label>
 // </div>
 // <div class="mw-ui-radio">
-//   <input type="radio" id="kss-example-7-disabled-checked" name="kss-example-7-disabled" disabled checked>
-//   <label for="kss-example-7-disabled-checked">Disabled checked radio</label>
+//   <input type="radio" id="kss-example-4-disabled-checked" name="kss-example-4-disabled" disabled checked>
+//   <label for="kss-example-4-disabled-checked">Disabled checked radio</label>
 // </div>
 //
-// Styleguide 7.
+// Styleguide 4.
 .mw-ui-radio {
 	display: inline-block;
 	vertical-align: middle;
@@ -35,13 +35,17 @@
 
 @radioSize: 2em;
 
-// We use the not selector to cancel out styling on IE 8 and below
-.mw-ui-radio:not(#noop) {
+// We use the not selector to cancel out styling on IE 8 and below.
+// We also disable this styling on javascript disabled devices. This fixes the issue with
+// Opera Mini where checking/unchecking doesn't apply styling but potentially leaves other
+// more capable browsers with unstyled radio buttons.
+.client-js .mw-ui-radio:not(#noop) {
 	// Position relatively so we can make use of absolute pseudo elements
 	position: relative;
 	line-height: @radioSize;
 
 	* {
+		// reset font sizes (see bug 72727)
 		font: inherit;
 		vertical-align: middle;
 	}
@@ -59,8 +63,9 @@
 
 		// the pseudo before element of the label after the radio now looks like a radio
 		& + label::before {
-			cursor: pointer;
+			.transition( 0.2s cubic-bezier(0.175, 0.885, 0.32, 1.275) );
 			content: '';
+			cursor: pointer;
 			.box-sizing(border-box);
 			position: absolute;
 			left: 0;
@@ -69,15 +74,22 @@
 			height: @radioSize;
 			background-color: #fff;
 			border: 1px solid @colorGray7;
-		}
-
-		// when the input is checked, style the label pseudo before element that followed as a checked radio
-		&:checked + label::before {
 			.background-image-svg('images/radio_checked.svg', 'images/radio_checked.png');
 			.background-size( @radioSize, @radioSize );
 			background-repeat: no-repeat;
 			background-position: center center;
 			background-origin: border-box;
+			background-size: 0 0;
+		}
+
+		// when the input is checked, style the label pseudo before element that followed as a checked radio
+		&:checked + label::before {
+			background-size: 100% 100%;
+		}
+
+		&:active + label::before {
+			background-color: @colorGray13;
+			border-color: @colorGray13;
 		}
 
 		&:focus + label::before {
@@ -89,19 +101,14 @@
 			border-bottom-width: 3px;
 		}
 
-		&:active + label::before {
-			background-color: @colorGray13;
-			border-color: @colorGray13;
-		}
-
-		// disabled checked boxes have a gray background
+		// disabled radios have a gray background
 		&:disabled + label::before {
 			cursor: default;
-			border-color: @colorGray14;
 			background-color: @colorGray14;
+			border-color: @colorGray14;
 		}
 
-		// disabled and checked boxes have a white circle
+		// disabled and checked radios have a white circle
 		&:disabled:checked + label::before {
 			.background-image-svg('images/radio_disabled.svg', 'images/radio_disabled.png');
 		}