Recduce border radii of navigation items and buttons

Signed-off-by: Marco <[email protected]>
nextcloud-libraries · Apr 29, 2024 · 1b6dadd · 1b6dadd
1 parent 3febf1b
commit 1b6dadd
Show file tree

Hide file tree

Showing 3 changed files with 5 additions and 7 deletions.
diff --git a/src/assets/NcAppNavigationItem.scss b/src/assets/NcAppNavigationItem.scss
@@ -8,7 +8,7 @@
 	min-height: $clickable-area;
 	transition: background-color var(--animation-quick) ease-in-out;
 	transition: background-color 200ms ease-in-out;
-	border-radius: var(--border-radius-pill);
+	border-radius: var(--border-radius-large);
 
 	&-wrapper {
 		position: relative;
@@ -117,7 +117,7 @@
 		&:focus-visible {
 			box-shadow: 0 0 0 4px var(--color-main-background);
 			outline: 2px solid var(--color-main-text);
-			border-radius: var(--border-radius-pill);
+			border-radius: var(--border-radius-large);
 		}
 	}
 }

diff --git a/src/components/NcButton/NcButton.vue b/src/components/NcButton/NcButton.vue
@@ -738,7 +738,7 @@ export default {
 	span {
 		cursor: pointer;
 	}
-	border-radius: math.div($clickable-area, 2);
+	border-radius: var(--border-radius-large);
 	transition-property: color, border-color, background-color;
 	transition-duration: 0.1s;
 	transition-timing-function: linear;
@@ -841,7 +841,7 @@ export default {
 		box-shadow: 0 0 0 4px var(--color-main-background) !important;
 		&.button-vue--vue-tertiary-on-primary {
 			outline: 2px solid var(--color-primary-element-text);
-			border-radius: var(--border-radius);
+			border-radius: var(--border-radius-large);
 			background-color: transparent;
 		}
 	}

diff --git a/src/components/NcListItem/NcListItem.vue b/src/components/NcListItem/NcListItem.vue
@@ -801,9 +801,7 @@ export default {
 	// 4px padding for the focus-visible styles. Width is reduced to compensate it
 	margin: 4px;
 	width: calc(100% - 8px);
-	// Fix for border-radius being too large for 3-line entries like in Mail
-	// 44px avatar size / 2 + 8px padding, and 2px for better visual quality
-	border-radius: 32px;
+	border-radius: var(--border-radius-large);
 	cursor: pointer;
 	transition: background-color var(--animation-quick) ease-in-out;
 	list-style: none;