diff --git a/src/assets/NcAppNavigationItem.scss b/src/assets/NcAppNavigationItem.scss index a6b8612e57..a017450582 100644 --- 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 index eaef329e6b..9220f2a197 100644 --- 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 index ac21ada11e..9f136f4ea5 100644 --- 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;