Checkboxes (#23063)

* remove ie8 fixes for checkboxes

* add indeterminate style to checkboxes

* add styles for radio inputs

* add missing checkbox-mixed-disabled icon

* fix white radios

* remove unnecessary png file

2 files changed, 86 insertions, 19 deletions

diff --git a/core/css/inputs.css b/core/css/inputs.css
index c61f14e4120..f02a606decd 100644
--- a/core/css/inputs.css
+++ b/core/css/inputs.css
@@ -74,11 +74,7 @@ textarea:hover, textarea:focus, textarea:active {
 	opacity: 1;
 }
 
-.ie8 input[type="checkbox"] { margin:0; padding:0; height:auto; width:auto; }
-.ie8 input[type="checkbox"]:hover+label, input[type="checkbox"]:focus+label { color:#111 !important; }
-
-/* ie8 doesn't support :checked */
-html:not(.ie8) input[type="checkbox"].checkbox {
+input[type="checkbox"].checkbox {
 	position: absolute;
 	left:-10000px;
 	top: auto;
@@ -87,7 +83,7 @@ html:not(.ie8) input[type="checkbox"].checkbox {
 	overflow: hidden;
 }
 
-html:not(.ie8) input[type="checkbox"].checkbox + label:before {
+input[type="checkbox"].checkbox + label:before {
 	content: "";
 	display: inline-block;
 
@@ -99,43 +95,108 @@ html:not(.ie8) input[type="checkbox"].checkbox + label:before {
 	opacity: 0.7;
 }
 
-html:not(.ie8) input[type="checkbox"].checkbox:disabled +label:before { opacity: .6; }
+input[type="checkbox"].checkbox:disabled +label:before { opacity: .6; }
 
-html:not(.ie8) input[type="checkbox"].checkbox.u-left +label:before { float: left; }
-html:not(.ie8) input[type="checkbox"].checkbox.u-hidden + label:before { display: none; }
+input[type="checkbox"].checkbox.u-left +label:before { float: left; }
+input[type="checkbox"].checkbox.u-hidden + label:before { display: none; }
 
-html:not(.ie8) input[type="checkbox"].checkbox--white + label:before {
-	background-image: url('../img/actions/checkbox-white.svg');
+input[type="checkbox"].checkbox:checked + label:before {
+	background-image: url('../img/actions/checkbox-checked.svg');
 }
 
-html:not(.ie8) input[type="checkbox"].checkbox:checked + label:before {
-	background-image: url('../img/actions/checkbox-checked.svg');
+input[type="checkbox"].checkbox:indeterminate + label:before {
+	background-image: url('../img/actions/checkbox-mixed.svg');
 }
 
-html:not(.ie8) input[type="checkbox"].checkbox:disabled + label:before {
+input[type="checkbox"].checkbox:disabled + label:before {
 	background-image: url('../img/actions/checkbox-disabled.svg');
 }
 
-html:not(.ie8) input[type="checkbox"].checkbox:checked:disabled + label:before {
+input[type="checkbox"].checkbox:checked:disabled + label:before {
 	background-image: url('../img/actions/checkbox-checked-disabled.svg');
 }
 
-html:not(.ie8) input[type="checkbox"].checkbox--white:checked + label:before {
+input[type="checkbox"].checkbox:indeterminate:disabled + label:before {
+	background-image: url('../img/actions/checkbox-mixed-disabled.svg');
+}
+
+input[type="checkbox"].checkbox--white + label:before {
+	background-image: url('../img/actions/checkbox-white.svg');
+}
+
+input[type="checkbox"].checkbox--white:checked + label:before {
 	background-image: url('../img/actions/checkbox-checked-white.svg');
 }
 
-html:not(.ie8) input[type="checkbox"].checkbox--white:disabled + label:before {
+input[type="checkbox"].checkbox--white:indeterminate + label:before {
+	background-image: url('../img/actions/checkbox-mixed-white.svg');
+}
+
+input[type="checkbox"].checkbox--white:disabled + label:before {
 	background-image: url('../img/actions/checkbox-disabled-white.svg');
 }
 
-html:not(.ie8) input[type="checkbox"].checkbox--white:checked:disabled + label:before {
+input[type="checkbox"].checkbox--white:checked:disabled + label:before {
 	background-image: url('../img/actions/checkbox-checked-disabled.svg');
 }
 
-html:not(.ie8) input[type="checkbox"].checkbox:hover+label:before, input[type="checkbox"]:focus+label:before {
+input[type="checkbox"].checkbox--white:indeterminate:disabled + label:before {
+	background-image: url('../img/actions/checkbox-mixed-disabled.svg');
+}
+
+input[type="checkbox"].checkbox:hover+label:before, input[type="checkbox"]:focus+label:before {
 	color:#111 !important;
 }
 
+input[type="radio"].radio {
+	position: absolute;
+	left:-10000px;
+	top: auto;
+	width: 1px;
+	height: 1px;
+	overflow: hidden;
+}
+
+input[type="radio"].radio + label:before {
+	content: "";
+	display: inline-block;
+
+	height: 20px;
+	width: 20px;
+	vertical-align: middle;
+
+	background: url('../img/actions/radio.svg') left top no-repeat;
+	opacity: 0.7;
+}
+
+input[type="radio"].radio:checked + label:before {
+	background-image: url('../img/actions/radio-checked.svg');
+}
+
+input[type="radio"].radio:disabled + label:before {
+	background-image: url('../img/actions/radio-disabled.svg');
+}
+
+input[type="radio"].radio:checked:disabled + label:before {
+	background-image: url('../img/actions/radio-checked-disabled.svg');
+}
+
+input[type="radio"].radio--white + label:before {
+	background-image: url('../img/actions/radio-white.svg');
+}
+
+input[type="radio"].radio--white:checked + label:before {
+	background-image: url('../img/actions/radio-checked.svg');
+}
+
+input[type="radio"].radio--white:disabled + label:before {
+	background-image: url('../img/actions/radio-disabled.svg');
+}
+
+input[type="radio"].radio--white:checked:disabled + label:before {
+	background-image: url('../img/actions/radio-checked-disabled.svg');
+}
+
 input[type="time"] {
 	width: initial;
 	height: 31px;
diff --git a/core/img/actions/checkbox-mixed-disabled.svg b/core/img/actions/checkbox-mixed-disabled.svg
new file mode 100644
index 00000000000..2a1bbe51218
--- /dev/null
+++ b/core/img/actions/checkbox-mixed-disabled.svg
@@ -0,0 +1,6 @@
+<?xml version="1.0" encoding="UTF-8" standalone="no"?>
+<svg xmlns:rdf="http://www.w3.org/1999/02/22-rdf-syntax-ns#" xmlns="http://www.w3.org/2000/svg" height="16px" width="16px" version="1.1" xmlns:cc="http://creativecommons.org/ns#" xmlns:dc="http://purl.org/dc/elements/1.1/">
+ <path d="m2.5 2.5h11v11h-11z" fill="#dcdcdc"/>
+ <path d="m3 2c-0.554 0-1 0.446-1 1v10c0 0.554 0.446 1 1 1h10c0.554 0 1-0.446 1-1v-10c0-0.554-0.446-1-1-1h-10zm0 1h10v10h-10v-10z" fill="#969696"/>
+ <path d="m4 7h8v2h-8z" fill="#fff"/>
+</svg>