Browse Source

refactor(gui): sidebar toggle icon color change

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

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

@ -6,8 +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-bg: #f4f4f4;
--navbar-border: #e5e7eb; --navbar-border: #e0e0e0;
} }
.ant-layout-header { .ant-layout-header {
@ -305,3 +305,9 @@ a {
@apply text-gray-300 italic; @apply text-gray-300 italic;
} }
} }
.ant-btn-loading-icon{
& > span {
@apply block bg-red-500
}
}

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

@ -589,7 +589,7 @@ useEventListener(document, 'keydown', async (e: KeyboardEvent) => {
.nc-left-sidebar { .nc-left-sidebar {
.nc-sidebar-left-toggle-icon { .nc-sidebar-left-toggle-icon {
@apply opacity-0 transition-opactity duration-200 transition-color text-white/80 hover:text-white/100; @apply opacity-0 transition-opactity duration-200 transition-color text-gray-500/80 hover:text-gray-500/100;
.nc-left-sidebar { .nc-left-sidebar {
@apply !border-r-0; @apply !border-r-0;

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

@ -34,11 +34,11 @@ function onEdit(targetKey: number, action: 'add' | 'remove' | string) {
<div class="flex items-end !min-h-[var(--header-height)] !bg-white-500 nc-tab-bar"> <div class="flex items-end !min-h-[var(--header-height)] !bg-white-500 nc-tab-bar">
<div <div
v-if="!isOpen" v-if="!isOpen"
class="nc-sidebar-left-toggle-icon hover:after:(bg-primary bg-opacity-75) group nc-sidebar-add-row py-2 px-3" class="nc-sidebar-left-toggle-icon hover:after:(bg-primary bg-opacity-75) group nc-sidebar-add-row py-2 px-3 mb-1"
> >
<MdiMenu <MdiMenu
v-e="['c:grid:toggle-navdraw']" v-e="['c:grid:toggle-navdraw']"
class="cursor-pointer transform transition-transform duration-500 text-white" class="cursor-pointer transform transition-transform duration-500 text-gray-500/80 hover:text-gray-500"
:class="{ 'rotate-180': !isOpen }" :class="{ 'rotate-180': !isOpen }"
@click="toggle(!isOpen)" @click="toggle(!isOpen)"
/> />
@ -133,11 +133,10 @@ function onEdit(targetKey: number, action: 'add' | 'remove' | string) {
} }
& > .ant-tabs-tab:not(.ant-tabs-tab-active) { & > .ant-tabs-tab:not(.ant-tabs-tab-active) {
//@apply bg-gray-100 text-gray-500;
@apply bg-gray-50 text-gray-500; @apply bg-gray-50 text-gray-500;
.ant-tabs-tab-remove { .ant-tabs-tab-remove {
//@apply !text-default; @apply !text-default;
} }
} }
} }

Loading…
Cancel
Save