Merge pull request #5958 from nextcloud-libraries/fix/radiobutton-ali…

…gnment fix(NcActions): NcActionCheckbox and NcActionRadio icon alignment
nextcloud-libraries · Aug 14, 2024 · 34f5c70 · 34f5c70
2 parents e8ce5f4 + cf9c9ad
commit 34f5c70
Show file tree

Hide file tree

Showing 2 changed files with 3 additions and 5 deletions.
diff --git a/src/components/NcActionCheckbox/NcActionCheckbox.vue b/src/components/NcActionCheckbox/NcActionCheckbox.vue
@@ -206,8 +206,7 @@ export default {
 
 		&::before {
 			margin-block: 0 !important;
-			// 16px is the width of the checkbox including the border
-			margin-inline: calc((var(--default-clickable-area) - 16px) / 2) !important;
+			margin-inline: calc((var(--default-clickable-area) - 14px) / 2) !important;
 		}
 	}
 

diff --git a/src/components/NcActionRadio/NcActionRadio.vue b/src/components/NcActionRadio/NcActionRadio.vue
@@ -199,10 +199,9 @@ export default {
 		padding: 0 !important;
 		padding-right: $icon-margin !important;
 
-		// radio-width is 12px, border is 2
-		// (44 - 14 - 2) / 2 = 14
+		// (34 -14) / 2 = 10 same as ncactioncheckbox
 		&::before {
-			margin: 0 14px 0 !important;
+			margin: calc((var(--default-clickable-area) - 14px) / 2) !important;
 		}
 	}