Browse Source

wip : changed bg color for select component

pull/7181/head
musharaf-nocodb 10 months ago
parent
commit
ce471a0816
  1. 32
      packages/nc-gui/assets/style.scss
  2. 6
      packages/nc-gui/components/nc/Select.vue

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

@ -52,13 +52,16 @@ main {
@apply m-0 h-full w-full bg-white; @apply m-0 h-full w-full bg-white;
} }
.nc-input-md { .nc-input-md {
@apply !rounded-lg !py-2 !px-3 mb-1; @apply !rounded-lg !py-2 !px-3 mb-1;
} }
.mobile { .mobile {
.nc-scrollbar-md, .nc-scrollbar-x-md, .nc-scrollbar-dark-md, .nc-scrollbar-x-md-dark, .nc-scrollbar-x-lg { .nc-scrollbar-md,
.nc-scrollbar-x-md,
.nc-scrollbar-dark-md,
.nc-scrollbar-x-md-dark,
.nc-scrollbar-x-lg {
&::-webkit-scrollbar { &::-webkit-scrollbar {
width: 0px; width: 0px;
} }
@ -93,7 +96,6 @@ main {
overflow-x: scroll; overflow-x: scroll;
scrollbar-width: thin !important; scrollbar-width: thin !important;
&::-webkit-scrollbar { &::-webkit-scrollbar {
width: 4px; width: 4px;
height: 4px; height: 4px;
@ -108,7 +110,6 @@ main {
-webkit-border-radius: 10px; -webkit-border-radius: 10px;
border-radius: 10px; border-radius: 10px;
width: 4px; width: 4px;
@apply bg-gray-200; @apply bg-gray-200;
} }
@ -122,7 +123,6 @@ main {
overflow-x: hidden; overflow-x: hidden;
scrollbar-width: thin !important; scrollbar-width: thin !important;
&::-webkit-scrollbar { &::-webkit-scrollbar {
width: 4px; width: 4px;
height: 4px; height: 4px;
@ -154,7 +154,6 @@ main {
overflow-x: scroll; overflow-x: scroll;
scrollbar-width: thin !important; scrollbar-width: thin !important;
&::-webkit-scrollbar { &::-webkit-scrollbar {
width: 4px; width: 4px;
height: 4px; height: 4px;
@ -169,14 +168,11 @@ main {
-webkit-border-radius: 10px; -webkit-border-radius: 10px;
border-radius: 10px; border-radius: 10px;
width: 4px; width: 4px;
background-color: rgba(0, 0, 0, 0.3) background-color: rgba(0, 0, 0, 0.3);
} }
&::-webkit-scrollbar-thumb:hover { &::-webkit-scrollbar-thumb:hover {
background-color: rgba(0, 0, 0, 0.4) background-color: rgba(0, 0, 0, 0.4);
} }
} }
@ -197,7 +193,6 @@ main {
-webkit-border-radius: 10px; -webkit-border-radius: 10px;
border-radius: 10px; border-radius: 10px;
width: 8px; width: 8px;
@apply bg-gray-200; @apply bg-gray-200;
} }
@ -498,8 +493,9 @@ a {
@apply p-4; @apply p-4;
} }
.ant-select-item-option-selected:not(.ant-select-item-option-disabled),
.ant-select-item-option-active:not(.ant-select-item-option-disabled) { .ant-select-item-option-active:not(.ant-select-item-option-disabled) {
@apply bg-primary bg-opacity-20; @apply bg-gray-300 bg-opacity-20;
} }
.ant-select-selection-search-input:focus { .ant-select-selection-search-input:focus {
@ -653,7 +649,8 @@ input[type='number'] {
.nc-emoji { .nc-emoji {
@apply xs:(text-lg); @apply xs:(text-lg);
} }
.material-symbols, .nc-icon { .material-symbols,
.nc-icon {
@apply !xs:(text-xl -mt-0.25); @apply !xs:(text-xl -mt-0.25);
} }
@ -662,7 +659,7 @@ input[type='number'] {
} }
.nc-sidebar-node-btn:not(.nc-sidebar-expand) { .nc-sidebar-node-btn:not(.nc-sidebar-expand) {
@apply !xs:(hidden) @apply !xs:(hidden);
} }
} }
@ -670,15 +667,14 @@ input[type='number'] {
@apply opacity-0 group-hover:(opacity-100) text-gray-600 hover:(bg-gray-400 bg-opacity-20 text-gray-900) duration-100; @apply opacity-0 group-hover:(opacity-100) text-gray-600 hover:(bg-gray-400 bg-opacity-20 text-gray-900) duration-100;
} }
.nc-button.ant-btn.nc-sidebar-node-btn.nc-sidebar-expand { .nc-button.ant-btn.nc-sidebar-node-btn.nc-sidebar-expand {
@apply xs:(opacity-100 hover:bg-gray-50); @apply xs:(opacity-100 hover:bg-gray-50);
.nc-icon { .nc-icon {
@apply xs:(visible opacity-100 !text-gray-500) @apply xs:(visible opacity-100 !text-gray-500);
} }
} }
.ant-message-notice-content { .ant-message-notice-content {
@apply !rounded-md; @apply !rounded-md;
} }

6
packages/nc-gui/components/nc/Select.vue

@ -65,6 +65,10 @@ const onChange = (value: string) => {
@apply !xs:mt-1.75; @apply !xs:mt-1.75;
} }
.ant-select-item-option {
@apply !rounded-md my-0.5;
}
.nc-select.ant-select { .nc-select.ant-select {
height: fit-content; height: fit-content;
.ant-select-selector { .ant-select-selector {
@ -90,7 +94,7 @@ const onChange = (value: string) => {
} }
.nc-select-dropdown { .nc-select-dropdown {
@apply !rounded-xl py-1.5; @apply !rounded-xl p-1.5;
.rc-virtual-list-holder { .rc-virtual-list-holder {
overflow-y: scroll; overflow-y: scroll;

Loading…
Cancel
Save