X-Git-Url: https://git.heureux-cyclage.org/?a=blobdiff_plain;f=resources%2Fsrc%2Fmediawiki.ui%2Fcomponents%2Fcheckbox.less;h=67f8a21377e9cc96c9c2dc03580a11ea0a5eb53d;hb=a487177ab7ae584428fb1ed72f9d6d846ac585ef;hp=826c82f00f59a03cbcb027082f1f235bbeeaafe8;hpb=175bc3679872cf791725084fbee84a793ca20187;p=lhc%2Fweb%2Fwiklou.git

diff --git a/resources/src/mediawiki.ui/components/checkbox.less b/resources/src/mediawiki.ui/components/checkbox.less
index 826c82f00f..67f8a21377 100644
--- a/resources/src/mediawiki.ui/components/checkbox.less
+++ b/resources/src/mediawiki.ui/components/checkbox.less
@@ -11,10 +11,20 @@
 //
 // Markup:
 // <div class="mw-ui-checkbox">
-//   <input type="checkbox" id="kss-example-5"><label for="kss-example-5">Standard checkbox</label>
+//   <input type="checkbox" id="kss-example-5">
+//   <label for="kss-example-5">Standard checkbox</label>
 // </div>
 // <div class="mw-ui-checkbox">
-//   <input type="checkbox" id="kss-example-5-2" disabled><label for="kss-example-5-2">Disabled checkbox</label>
+//   <input type="checkbox" id="kss-example-5-checked" checked>
+//   <label for="kss-example-5-checked">Standard checked checkbox</label>
+// </div>
+// <div class="mw-ui-checkbox">
+//   <input type="checkbox" id="kss-example-5-disabled" disabled>
+//   <label for="kss-example-5-disabled">Disabled checkbox</label>
+// </div>
+// <div class="mw-ui-checkbox">
+//   <input type="checkbox" id="kss-example-5-disabled-checked" disabled checked>
+//   <label for="kss-example-5-disabled-checked">Disabled checked checkbox</label>
 // </div>
 //
 // Styleguide 5.
@@ -23,7 +33,7 @@
 	vertical-align: middle;
 }
 
-@checkboxSize: 1.6em;
+@checkboxSize: 2em;
 
 // We use the not selector to cancel out styling on IE 8 and below
 .mw-ui-checkbox:not(#noop) {
@@ -32,6 +42,8 @@
 	line-height: @checkboxSize;
 
 	* {
+		// reset font sizes (see bug 72727)
+		font: inherit;
 		vertical-align: middle;
 	}
 
@@ -42,61 +54,57 @@
 		// ensure the invisible checkbox takes up the required width
 		width: @checkboxSize;
 		height: @checkboxSize;
+		// This is needed for Firefox mobile (See bug 71750 to workaround default Firefox stylesheet)
+		max-width: none;
+		margin-right: 0.4em;
 
 		// the pseudo before element of the label after the checkbox now looks like a checkbox
-		& + label {
+		& + label::before {
+			content: '';
 			cursor: pointer;
-			margin: 0 .4em;
-
-			&::before {
-						content: '';
-						position: absolute;
-						left: 0;
-						display: inline-block;
-						border-radius: @borderRadius;
-						margin-right: 18px;
-						width: @checkboxSize;
-						height: @checkboxSize;
-						background-color: #fff;
-						border: 1px solid grey;
-					}
+			.box-sizing(border-box);
+			position: absolute;
+			left: 0;
+			border-radius: @borderRadius;
+			width: @checkboxSize;
+			height: @checkboxSize;
+			background-color: #fff;
+			border: 1px solid @colorGray7;
 		}
 
 		// when the input is checked, style the label pseudo before element that followed as a checked checkbox
-		&:checked {
-			+ label {
-				&::before {
-					.background-image-svg('images/checked.svg', 'images/checked.png');
-					.background-size( @checkboxSize, @checkboxSize );
-					background-repeat: no-repeat;
-					background-position: center top;
-				}
-			}
+		&:checked + label::before {
+			.background-image-svg('images/checked.svg', 'images/checked.png');
+			.background-size( @checkboxSize - 0.2em, @checkboxSize - 0.2em );
+			background-repeat: no-repeat;
+			background-position: center center;
+			background-origin: border-box;
 		}
 
-		@focusBottomBorderSize: 0.2em;
-		&:active,
-		&:focus {
-			+ label {
-				&::after {
-					content: '';
-					position: absolute;
-					width: @checkboxSize;
-					height: @checkboxSize - @focusBottomBorderSize + 0.08; // offset by bottom border
-					// offset from the checkbox by 1px to account for left border
-					left: 1px;
-					border-bottom: solid @focusBottomBorderSize lightgrey;
-				}
-			}
+		&:active + label::before {
+			background-color: @colorGray13;
+			border-color: @colorGray13;
 		}
 
-		// disabled checked boxes have a gray background
-		&:disabled + label {
+		&:focus + label::before {
+			border-width: 2px;
+		}
+
+		&:focus:hover + label::before,
+		&:hover + label::before {
+			border-bottom-width: 3px;
+		}
+
+		// disabled checkboxes have a gray background
+		&:disabled + label::before {
 			cursor: default;
+			background-color: @colorGray14;
+			border-color: @colorGray14;
+		}
 
-			&::before {
-				background-color: lightgrey;
-			}
+		// disabled and checked checkboxes have a white circle
+		&:disabled:checked + label::before {
+			.background-image-svg('images/checked_disabled.svg', 'images/checked_disabled.png');
 		}
 	}
 }