Rollup merge of #104267 - notriddle:notriddle/checkbox, r=GuillaumeGomez

rustdoc: use checkbox instead of switch for settings toggles

Preview: http://notriddle.com/notriddle-rustdoc-demos/checkbox/test_dingus/index.html

## Before

![image](https://user-images.githubusercontent.com/1593513/201232887-dee27ef5-b091-49bb-be4a-103d2e7983f3.png)

## After

![image](https://user-images.githubusercontent.com/1593513/201232835-95b40b77-6535-4280-8719-44c992a07772.png)

## Description

The switch ("slider") is designed to give the application a "physical" feel, but nothing else in here really followed through. They didn't support the "flick" gesture that real iOS switches support, and the radio buttons that were also used in Rustdoc Settings were a more "classic" form element anyway.

Also, while switches are the exclusive toggle design on iOS (since [Apple HIG] reserves checkboxes for Mac only), the [Google Material] guidelines say that lists of switches are bad, and you should just use check boxes.

[Apple HIG]: https://developer.apple.com/design/human-interface-guidelines/components/selection-and-input/toggles
[Google Material]: https://m3.material.io/components/checkbox/guidelines#6902f23d-ceba-4b19-ae3b-b78b9b01d185

4 files changed, 19 insertions, 67 deletions

diff --git a/src/librustdoc/html/static/css/settings.css b/src/librustdoc/html/static/css/settings.css
index 83939f63b4e..1f6fb961e91 100644
--- a/src/librustdoc/html/static/css/settings.css
+++ b/src/librustdoc/html/static/css/settings.css
@@ -8,7 +8,8 @@
 	flex-wrap: wrap;
 }
 
-.setting-line .radio-line input {
+.setting-line .radio-line input,
+.setting-line .toggle input {
 	margin-right: 0.3em;
 	height: 1.2rem;
 	width: 1.2rem;
@@ -17,9 +18,18 @@
 	outline: none;
 	-webkit-appearance: none;
 	cursor: pointer;
+}
+.setting-line .radio-line input {
 	border-radius: 50%;
 }
-.setting-line .radio-line input + span {
+.setting-line .toggle input:checked {
+	content: url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 40 40">\
+		<path d="M7,25L17,32L33,12" fill="none" stroke="black" stroke-width="5"/>\
+		<path d="M7,23L17,30L33,10" fill="none" stroke="white" stroke-width="5"/></svg>');
+}
+
+.setting-line .radio-line input + span,
+.setting-line .toggle span {
 	padding-bottom: 1px;
 }
 
@@ -49,37 +59,6 @@
 	cursor: pointer;
 }
 
-.toggle input {
-	opacity: 0;
-	position: absolute;
-}
-
-.slider {
-	position: relative;
-	width: 45px;
-	min-width: 45px;
-	display: block;
-	height: 28px;
-	margin-right: 20px;
-	cursor: pointer;
-	background-color: #ccc;
-	transition: .3s;
-}
-
-.slider:before {
-	position: absolute;
-	content: "";
-	height: 19px;
-	width: 19px;
-	left: 4px;
-	bottom: 4px;
-	transition: .3s;
-}
-
-input:checked + .slider:before {
-	transform: translateX(19px);
-}
-
 .setting-line > .sub-settings {
 	padding-left: 42px;
 	width: 100%;
@@ -94,7 +73,11 @@ input:checked + .slider:before {
 	box-shadow: inset 0 0 0 3px var(--main-background-color);
 	background-color: var(--settings-input-color);
 }
-.setting-line .radio-line input:focus {
+.setting-line .toggle input:checked {
+	background-color: var(--settings-input-color);
+}
+.setting-line .radio-line input:focus,
+.setting-line .toggle input:focus {
 	box-shadow: 0 0 1px 1px var(--settings-input-color);
 }
 /* In here we combine both `:focus` and `:checked` properties. */
@@ -102,9 +85,7 @@ input:checked + .slider:before {
 	box-shadow: inset 0 0 0 3px var(--main-background-color),
 		0 0 2px 2px var(--settings-input-color);
 }
-.setting-line .radio-line input:hover {
+.setting-line .radio-line input:hover,
+.setting-line .toggle input:hover {
 	border-color: var(--settings-input-color) !important;
 }
-input:checked + .slider {
-	background-color: var(--settings-input-color);
-}
diff --git a/src/librustdoc/html/static/css/themes/ayu.css b/src/librustdoc/html/static/css/themes/ayu.css
index 2fa1fa39d63..4beca56b66a 100644
--- a/src/librustdoc/html/static/css/themes/ayu.css
+++ b/src/librustdoc/html/static/css/themes/ayu.css
@@ -77,16 +77,6 @@ Original by Dempfi (https://github.com/dempfi/ayu)
 	--crate-search-hover-border: #e0e0e0;
 }
 
-.slider {
-	background-color: #ccc;
-}
-.slider:before {
-	background-color: white;
-}
-input:focus + .slider {
-	box-shadow: 0 0 0 2px #0a84ff, 0 0 0 6px rgba(10, 132, 255, 0.3);
-}
-
 h1, h2, h3, h4 {
 	color: white;
 }
diff --git a/src/librustdoc/html/static/css/themes/dark.css b/src/librustdoc/html/static/css/themes/dark.css
index 43f8dd42ab3..9b0bd8c8f0a 100644
--- a/src/librustdoc/html/static/css/themes/dark.css
+++ b/src/librustdoc/html/static/css/themes/dark.css
@@ -72,16 +72,6 @@
 	--crate-search-hover-border: #2196f3;
 }
 
-.slider {
-	background-color: #ccc;
-}
-.slider:before {
-	background-color: white;
-}
-input:focus + .slider {
-	box-shadow: 0 0 0 2px #0a84ff, 0 0 0 6px rgba(10, 132, 255, 0.3);
-}
-
 .content .item-info::before { color: #ccc; }
 
 body.source .example-wrap pre.rust a {
diff --git a/src/librustdoc/html/static/css/themes/light.css b/src/librustdoc/html/static/css/themes/light.css
index c8c5289ab54..f12fb61d879 100644
--- a/src/librustdoc/html/static/css/themes/light.css
+++ b/src/librustdoc/html/static/css/themes/light.css
@@ -69,15 +69,6 @@
 	--crate-search-hover-border: #717171;
 }
 
-.slider {
-	background-color: #ccc;
-}
-.slider:before {
-	background-color: white;
-}
-input:focus + .slider {
-	box-shadow: 0 0 0 2px #0a84ff, 0 0 0 6px rgba(10, 132, 255, 0.3);
-}
 
 .content .item-info::before { color: #ccc; }