Browse Source

refactor(gui): tab size increase and define colors as css var

Signed-off-by: Pranav C <pranavxc@gmail.com>
pull/4996/head
Pranav C 2 years ago
parent
commit
1e5f268b74
  1. 2
      packages/nc-gui/assets/style.scss
  2. 7
      packages/nc-gui/pages/[projectType]/[projectId]/index.vue
  3. 14
      packages/nc-gui/pages/[projectType]/[projectId]/index/index.vue

2
packages/nc-gui/assets/style.scss

@ -6,6 +6,8 @@
--header-height: 42px; --header-height: 42px;
--toolbar-height: 48px; --toolbar-height: 48px;
--tw-text-opacity: 1; --tw-text-opacity: 1;
--navbar-bg: #F4F6F6;
--navbar-border: #e5e7eb;
} }
.ant-layout-header { .ant-layout-header {

7
packages/nc-gui/pages/[projectType]/[projectId]/index.vue

@ -606,11 +606,6 @@ useEventListener(document, 'keydown', async (e: KeyboardEvent) => {
} }
.nc-sidebar-header { .nc-sidebar-header {
//@apply relative; @apply border-[var(--navbar-border)] !bg-[var(--navbar-bg)];
//&::after{
// //@apply absolute content-[''] -right-1 top-0 w-1 h-full bg-inherit;
//}
@apply border-gray-150 !bg-gray-50;
} }
</style> </style>

14
packages/nc-gui/pages/[projectType]/[projectId]/index/index.vue

@ -113,7 +113,7 @@ function onEdit(targetKey: number, action: 'add' | 'remove' | string) {
& > .ant-tabs-nav-wrap > .ant-tabs-nav-list { & > .ant-tabs-nav-wrap > .ant-tabs-nav-list {
& > .ant-tabs-tab { & > .ant-tabs-tab {
@apply border-0 !text-sm py-1.5 font-weight-medium z-2; @apply border-0 !text-sm py-2 font-weight-medium z-2;
border-top-right-radius: 8px; border-top-right-radius: 8px;
border-top-left-radius: 8px; border-top-left-radius: 8px;
border-top: 1px solid white; border-top: 1px solid white;
@ -163,17 +163,7 @@ function onEdit(targetKey: number, action: 'add' | 'remove' | string) {
&, &,
:deep(.ant-tabs-tab:not(.ant-tabs-tab-active)) { :deep(.ant-tabs-tab:not(.ant-tabs-tab-active)) {
background: linear-gradient(0deg, #e5e7eb 1px, rgb(249, 250, 251) 1px) !important; background: linear-gradient(0deg, var(--navbar-border) 1px, var(--navbar-bg) 1px) !important;
} }
} }
//:deep(.ant-tabs-nav-list), :deep(.ant-tabs-nav),:deep(.ant-tabs-nav-wrap), :deep(.ant-tabs), :deep(.nc-tab-bar) {
// overflow-y: visible !important;
//}
//
//:deep(.ant-tabs),:deep(.ant-tabs-nav-wrap){
// overflow-x: hidden !important;
// overflow-y: visible !important;
// overflow: visible !important;
//}
</style> </style>

Loading…
Cancel
Save