Bug 1321302 - Undo changes from
bug 1309316 that switches in-content checkboxes to real ones instead of pseudoelements. r?Gijs
Checkboxes (and radio inputs) haven't traditionally been very stylable in Gecko, even with
-moz-appearance: none;. That was fixed in
bug 418833, but those patches will not be uplifted
in time for 52.
In
bug 1309316, I had counted on getting
bug 418833 landed in time to make 52, and so had
written some CSS to switch us to using traditional checkboxes (with the new styling abilities)
rather than the old mechanism, which was a hacky pseudoelement solution. Since
bug 418833
didn't make the uplift, we have to go back to the old mechanism. That's what this patch
does.
MozReview-Commit-ID: 1NfvHWpioxF
--- a/toolkit/themes/shared/in-content/common.inc.css
+++ b/toolkit/themes/shared/in-content/common.inc.css
@@ -502,51 +502,70 @@ html|a:visited {
html|a:hover:active,
.text-link:hover:active {
color: var(--in-content-link-color-active);
text-decoration: none;
}
/* Checkboxes and radio buttons */
+/* Hide the actual checkbox */
+html|input[type="checkbox"] {
+ opacity: 0;
+ width: 0;
+ pointer-events: none;
+ position: absolute;
+}
+
+/* Create a box to style as the checkbox */
+html|input[type="checkbox"] + html|label:before {
+ display: inline-block;
+ content: "";
+ vertical-align: middle;
+}
+
+html|input[type="checkbox"] + html|label {
+ line-height: 0px;
+}
+
xul|checkbox {
margin-inline-start: 0;
}
xul|*.checkbox-check,
-html|input[type="checkbox"] {
+html|input[type="checkbox"] + html|label:before {
-moz-appearance: none;
width: 23px;
height: 23px;
border-radius: 2px;
border: 1px solid var(--in-content-box-border-color);
margin-inline-end: 10px;
background-color: #f1f1f1;
/* !important needed to override toolkit checked !important rule */
background-image: linear-gradient(#fff, rgba(255,255,255,0.8)) !important;
background-position: center center;
background-repeat: no-repeat;
box-shadow: 0 1px 1px 0 #fff, inset 0 2px 0 0 rgba(0,0,0,0.03);
}
xul|checkbox:not([disabled="true"]):hover > xul|*.checkbox-check,
-html|input[type="checkbox"]:not(:disabled):hover {
+html|input[type="checkbox"]:not(:disabled) + html|label:hover:before {
border-color: var(--in-content-border-focus);
}
xul|*.checkbox-check[checked] {
list-style-image: url("chrome://global/skin/in-content/check.svg#check");
}
-html|input[type="checkbox"]:checked {
+html|input[type="checkbox"]:checked + html|label:before {
background-image: url("chrome://global/skin/in-content/check.svg#check"), linear-gradient(#fff, rgba(255,255,255,0.8)) !important;
}
xul|checkbox[disabled="true"] > xul|*.checkbox-check,
-html|input[type="checkbox"]:disabled {
+html|input[type="checkbox"]:disabled + html|label {
opacity: 0.5;
}
xul|*.checkbox-label-box {
margin-inline-start: -1px; /* negative margin for the transparent border */
padding-inline-start: 0;
}