From a72bddd553ad9ff2e587282da0c8e3ad4829802a Mon Sep 17 00:00:00 2001 From: Marco Date: Tue, 14 Nov 2023 18:29:28 +0900 Subject: [PATCH] Fix tabs appearance Signed-off-by: Marco --- .../NcAppSidebar/NcAppSidebarTabs.vue | 24 +++++++++++++++---- 1 file changed, 20 insertions(+), 4 deletions(-) diff --git a/src/components/NcAppSidebar/NcAppSidebarTabs.vue b/src/components/NcAppSidebar/NcAppSidebarTabs.vue index d6270ce5e7..cb4f86049d 100644 --- a/src/components/NcAppSidebar/NcAppSidebarTabs.vue +++ b/src/components/NcAppSidebar/NcAppSidebarTabs.vue @@ -269,8 +269,8 @@ export default { &__nav { display: flex; justify-content: stretch; - margin-top: 10px; - padding: 0 4px; + margin: 10px 8px 0 8px; + border-bottom: 1px solid var(--color-border); } &__tab { @@ -314,7 +314,23 @@ export default { } } -:deep(.checkbox-radio-switch--button-variant.checkbox-radio-switch) { - border: unset; +// Override checkbox-radio-switch styles so that it looks like tabs +:deep(.checkbox-radio-switch--button-variant) { + border: unset !important; + border-radius: 0 !important; + .checkbox-content { + padding: var(--default-grid-baseline); + border-radius: var(--default-grid-baseline) var(--default-grid-baseline) 0 0 !important; + margin: 0 !important; + border-bottom: var(--default-grid-baseline) solid transparent !important; + .checkbox-content__icon--checked > * { + color: var(--color-main-text) !important; + } + } + &.checkbox-radio-switch--checked .checkbox-radio-switch__content{ + background: transparent !important; + color: var(--color-main-text) !important; + border-bottom: var(--default-grid-baseline) solid var(--color-primary-element) !important; + } }