Browse Source

feat(gui): finalised navbar style

Signed-off-by: Pranav C <pranavxc@gmail.com>
pull/4996/head
Pranav C 2 years ago
parent
commit
bdcec083f7
  1. 2
      packages/nc-gui/assets/style.scss
  2. 4
      packages/nc-gui/components/cell/SingleSelect.vue
  3. 8
      packages/nc-gui/components/dashboard/TreeView.vue
  4. 5
      packages/nc-gui/components/smartsheet/toolbar/SearchData.vue
  5. 17
      packages/nc-gui/pages/[projectType]/[projectId]/index/index.vue

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

@ -6,7 +6,7 @@
--header-height: 42px;
--toolbar-height: 48px;
--tw-text-opacity: 1;
--navbar-bg: #f4f4f4;
--navbar-bg: #FAFAFA;
--navbar-border: #e0e0e0;
}

4
packages/nc-gui/components/cell/SingleSelect.vue

@ -323,7 +323,7 @@ useEventListener(document, 'click', handleClose, true)
@apply !text-xs;
}
:deep(.ant-select-clear > span){
@apply block
:deep(.ant-select-clear > span) {
@apply block;
}
</style>

8
packages/nc-gui/components/dashboard/TreeView.vue

@ -360,8 +360,8 @@ onMounted(async () => {
</Transition>
<Transition name="layout" mode="out-in">
<MdiClose v-if="searchActive" class="text-lg mx-1 mt-0.5" @click="onSearchCloseIconClick" />
<IcRoundSearch v-else class="text-lg text-primary mx-1 mt-0.5" @click="toggleSearchActive(true)" />
<MdiClose v-if="searchActive" class="text-gray-500 text-lg mx-1 mt-0.5" @click="onSearchCloseIconClick" />
<IcRoundSearch v-else class="text-gray-500 text-lg mx-1 mt-0.5" @click="toggleSearchActive(true)" />
</Transition>
</div>
<div
@ -387,8 +387,8 @@ onMounted(async () => {
</Transition>
<Transition name="slide-right" mode="out-in">
<MdiClose v-if="searchActive" class="text-lg mx-1 mt-0.5" @click="onSearchCloseIconClick" />
<IcRoundSearch v-else class="text-lg text-primary mx-1 mt-0.5" @click="onSearchIconClick" />
<MdiClose v-if="searchActive" class="text-gray-500 text-lg mx-1 mt-0.5" @click="onSearchCloseIconClick" />
<IcRoundSearch v-else class="text-gray-500 text-lg mx-1 mt-0.5" @click="onSearchIconClick" />
</Transition>
<a-dropdown v-if="!isSharedBase" :trigger="['click']" overlay-class-name="nc-dropdown-import-menu" @click.stop>

5
packages/nc-gui/components/smartsheet/toolbar/SearchData.vue

@ -83,8 +83,9 @@ function onPressEnter() {
</a-input>
</div>
</template>
<style scoped>
:deep(input::placeholder){
@apply !text-xs
:deep(input::placeholder) {
@apply !text-xs;
}
</style>

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

@ -114,12 +114,10 @@ function onEdit(targetKey: number, action: 'add' | 'remove' | string) {
& > .ant-tabs-nav-wrap > .ant-tabs-nav-list {
& > .ant-tabs-tab {
@apply border-0 !text-sm py-2 font-weight-medium z-2;
border-top-right-radius: 8px;
border-top-left-radius: 8px;
border-top: 1px solid white;
border-left: 1px solid white;
border-right: 1px solid white;
@apply !border-[var(--navbar-border)];
& + .ant-tabs-tab {
@apply ml-1;
}
@ -127,6 +125,12 @@ function onEdit(targetKey: number, action: 'add' | 'remove' | string) {
& > .ant-tabs-tab-active {
@apply relative bg-white w-full h-full overflow-y-visible;
border-top: 1px solid white;
border-left: 1px solid white;
border-right: 1px solid white;
@apply !border-[var(--navbar-border)];
&:after {
@apply absolute content-[''] left-0 -bottom-[1px] w-full h-[1px] bg-inherit z-100;
}
@ -160,9 +164,10 @@ function onEdit(targetKey: number, action: 'add' | 'remove' | string) {
@apply flex mt-[2px];
}
&,
background: linear-gradient(0deg, var(--navbar-border) 1px, var(--navbar-bg) 1px) !important;
:deep(.ant-tabs-tab:not(.ant-tabs-tab-active)) {
background: linear-gradient(0deg, var(--navbar-border) 1px, var(--navbar-bg) 1px) !important;
background: linear-gradient(0deg, var(--navbar-border) 1px, #f2f2f2 1px) !important;
}
}
</style>

Loading…
Cancel
Save