From 554f8c59a94c04f3513a1ee4caa826dbb3431612 Mon Sep 17 00:00:00 2001 From: Marco Ambrosini Date: Wed, 17 Aug 2022 16:31:53 +0200 Subject: [PATCH 1/5] Border rarius pill Signed-off-by: Marco Ambrosini --- src/components/NcAppNavigationItem/NcAppNavigationItem.vue | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/src/components/NcAppNavigationItem/NcAppNavigationItem.vue b/src/components/NcAppNavigationItem/NcAppNavigationItem.vue index df236cd94b..78cab9a0e6 100644 --- a/src/components/NcAppNavigationItem/NcAppNavigationItem.vue +++ b/src/components/NcAppNavigationItem/NcAppNavigationItem.vue @@ -507,7 +507,7 @@ export default { width: 100%; min-height: $clickable-area; padding-right: 8px; - border-radius: var(--border-radius-large); + border-radius: var(--border-radius-pill); &-wrapper { position: relative; From 1a3bbda40d3e1cc2183c970344785bd9f3ec2008 Mon Sep 17 00:00:00 2001 From: Marco Ambrosini Date: Wed, 17 Aug 2022 16:34:32 +0200 Subject: [PATCH 2/5] Fix padding Signed-off-by: Marco Ambrosini --- src/components/NcAppNavigationItem/NcAppNavigationItem.vue | 1 - 1 file changed, 1 deletion(-) diff --git a/src/components/NcAppNavigationItem/NcAppNavigationItem.vue b/src/components/NcAppNavigationItem/NcAppNavigationItem.vue index 78cab9a0e6..5fdc765452 100644 --- a/src/components/NcAppNavigationItem/NcAppNavigationItem.vue +++ b/src/components/NcAppNavigationItem/NcAppNavigationItem.vue @@ -506,7 +506,6 @@ export default { box-sizing: border-box; width: 100%; min-height: $clickable-area; - padding-right: 8px; border-radius: var(--border-radius-pill); &-wrapper { From 835ea03fccf939b5026607a6f8245c82aa8516e3 Mon Sep 17 00:00:00 2001 From: Marco Ambrosini Date: Thu, 18 Aug 2022 12:55:44 +0200 Subject: [PATCH 3/5] Add background transition Signed-off-by: Marco Ambrosini --- src/components/NcAppNavigationItem/NcAppNavigationItem.vue | 1 + 1 file changed, 1 insertion(+) diff --git a/src/components/NcAppNavigationItem/NcAppNavigationItem.vue b/src/components/NcAppNavigationItem/NcAppNavigationItem.vue index 5fdc765452..067a4dfa76 100644 --- a/src/components/NcAppNavigationItem/NcAppNavigationItem.vue +++ b/src/components/NcAppNavigationItem/NcAppNavigationItem.vue @@ -506,6 +506,7 @@ export default { box-sizing: border-box; width: 100%; min-height: $clickable-area; + transition: background-color 200ms ease-in-out; border-radius: var(--border-radius-pill); &-wrapper { From ef3b1ab830bfe262bc2e40cd08f35a1361435f43 Mon Sep 17 00:00:00 2001 From: Marco Ambrosini Date: Thu, 18 Aug 2022 12:55:58 +0200 Subject: [PATCH 4/5] Fix utils width Signed-off-by: Marco Ambrosini --- src/components/NcAppNavigationItem/NcAppNavigationItem.vue | 1 + 1 file changed, 1 insertion(+) diff --git a/src/components/NcAppNavigationItem/NcAppNavigationItem.vue b/src/components/NcAppNavigationItem/NcAppNavigationItem.vue index 067a4dfa76..2d05976f21 100644 --- a/src/components/NcAppNavigationItem/NcAppNavigationItem.vue +++ b/src/components/NcAppNavigationItem/NcAppNavigationItem.vue @@ -649,6 +649,7 @@ export default { /* counter and actions */ .app-navigation-entry__utils { display: flex; + width: $clickable-area; align-items: center; flex: 0 1 auto; } From 67cccef99cc92065e3f234b0d070a81d54c2c0b7 Mon Sep 17 00:00:00 2001 From: Marco Ambrosini Date: Tue, 23 Aug 2022 10:50:32 +0200 Subject: [PATCH 5/5] Use animation speed variable Signed-off-by: Marco Ambrosini --- src/components/NcAppNavigationItem/NcAppNavigationItem.vue | 2 +- src/components/NcListItem/NcListItem.vue | 2 +- 2 files changed, 2 insertions(+), 2 deletions(-) diff --git a/src/components/NcAppNavigationItem/NcAppNavigationItem.vue b/src/components/NcAppNavigationItem/NcAppNavigationItem.vue index 2d05976f21..145ba5c933 100644 --- a/src/components/NcAppNavigationItem/NcAppNavigationItem.vue +++ b/src/components/NcAppNavigationItem/NcAppNavigationItem.vue @@ -506,7 +506,7 @@ export default { box-sizing: border-box; width: 100%; min-height: $clickable-area; - transition: background-color 200ms ease-in-out; + transition: background-color var(--animation-quick) ease-in-out; border-radius: var(--border-radius-pill); &-wrapper { diff --git a/src/components/NcListItem/NcListItem.vue b/src/components/NcListItem/NcListItem.vue index 8bdd5241fb..7a99539c9e 100644 --- a/src/components/NcListItem/NcListItem.vue +++ b/src/components/NcListItem/NcListItem.vue @@ -574,7 +574,7 @@ export default { margin: 2px 0; width: 100%; cursor: pointer; - transition: background-color 200ms ease-in-out; + transition: background-color var(--animation-quick) ease-in-out; list-style: none; &:hover, &:focus {