Fixing checkbox spacing & accessibility, ref #10617

Signed-off-by: Jan C. Borchardt <hey@jancborchardt.net>
nextcloud · Aug 21, 2020 · 8fb2ef1 · 8fb2ef1
1 parent e212862
commit 8fb2ef1
Show file tree

Hide file tree

Showing 4 changed files with 34 additions and 11 deletions.
diff --git a/apps/files/css/files.scss b/apps/files/css/files.scss
@@ -459,16 +459,20 @@ table td.selection {
 }
 
 /* File checkboxes */
-#fileList tr td.selection>.selectCheckBox + label:before {
+#filestable th #select_all_files + label:before,
+#fileList tr td.selection > .selectCheckBox + label:before {
 	opacity: 0.3;
 	margin-right: 0;
 }
 
 /* Show checkbox with full opacity when hovering, checked, or selected */
-#fileList tr:hover td.selection>.selectCheckBox + label:before,
-#fileList tr:focus td.selection>.selectCheckBox + label:before,
-#fileList tr td.selection>.selectCheckBox:checked + label:before,
-#fileList tr.selected td.selection>.selectCheckBox + label:before {
+#filestable th:hover #select_all_files + label:before,
+#filestable th #select_all_files:focus + label:before,
+#filestable th #select_all_files:checked + label:before,
+#fileList tr:hover td.selection > .selectCheckBox + label:before,
+#fileList tr td.selection > .selectCheckBox:focus + label:before,
+#fileList tr td.selection > .selectCheckBox:checked + label:before,
+#fileList tr.selected td.selection > .selectCheckBox + label:before {
 	opacity: 1;
 }
 

diff --git a/apps/settings/css/settings.scss b/apps/settings/css/settings.scss
@@ -895,6 +895,18 @@ span.version {
 			display: inline-block;
 		}
 	}
+
+	input {
+		&[type='checkbox'],
+		&[type='radio'] {
+			&.radio,
+			&.checkbox {
+				+ label {
+					line-height: 44px;
+				}
+			}
+		}
+	}
 }
 
 .personal-settings-setting-box .section {

diff --git a/core/css/apps.scss b/core/css/apps.scss
@@ -702,7 +702,7 @@ $min-content-width: $breakpoint-mobile - $navigation-width - $list-min-width;
 				+ label {
 					display: inline-block;
 					width: 100%;
-					padding: 5px 0;
+					line-height: 44px;
 				}
 			}
 		}

diff --git a/core/css/inputs.scss b/core/css/inputs.scss
@@ -358,14 +358,21 @@ input {
 				height: $checkbox-radio-size;
 				width: $checkbox-radio-size;
 				vertical-align: middle;
-				border-radius: 50%;
-				margin: 0 6px 3px 3px;
+				border-radius: var(--border-radius-pill);
+				margin: 0 13px 2px 4px;
 				border: 1px solid $color-checkbox-radio-border;
 			}
-			&:not(:disabled):not(:checked) + label:hover:before,
+
+			&:not(:disabled) + label:hover:before,
 			&:focus + label:before {
-				border-color: var(--color-primary-element);
+				box-shadow: 0 0 0 2px var(--color-text-maxcontrast) !important;
+			}
+
+			&:not(:disabled):not(:checked) + label:hover:before,
+			&:focus:not(:checked) + label:before {
+				box-shadow: 0 0 0 2px var(--color-primary-element) !important;
 			}
+
 			&:checked + label:before,
 			&.checkbox:indeterminate + label:before {
 			/* ^ :indeterminate have a strange behavior on radio,
@@ -393,7 +400,7 @@ input {
 		}
 		&.checkbox {
 			+ label:before {
-				border-radius: 1px;
+				border-radius: var(--border-radius);
 				height: $checkbox-radio-size;
 				width: $checkbox-radio-size;
 				box-shadow: none !important;