Siklos/svg-layout-designer-react
1
1
Fork 0
Code Issues Pull requests Projects Releases Wiki Activity

Increase opacity for better visibility

Browse source
This commit is contained in:
Siklos 2022-09-15 12:53:08 +02:00 • committed by Eric Nguyen
parent 4f0a6795ad
commit 8a7196eeac
2 changed files with 5 additions and 5 deletions
Download patch file Download diff file Expand all files Collapse all files

4
src/Components/Category/Category.tsx
View file

@ -22,14 +22,14 @@ export function Category(props: ICategoryProps): JSX.Element {
className='flex flex-row group full' className='flex flex-row group full'
onClick={() => setIsOpen(!isOpen)} onClick={() => setIsOpen(!isOpen)}
> >
<span className={'transition-all flex-1 h-full justify-center sidebar-component-left rounded-b-none bg-slate-400/60 group-hover:bg-blue-600'}> <span className={'transition-all flex-1 h-full justify-center sidebar-component-left rounded-b-none bg-slate-400/80 group-hover:bg-blue-600'}>
{TruncateString(props.category, 25)} {TruncateString(props.category, 25)}
</span> </span>
<span className={'flex-none h-full justify-center sidebar-component-right rounded-b-none'}> <span className={'flex-none h-full justify-center sidebar-component-right rounded-b-none'}>
<ChevronRightIcon className='transition-all w-5 rotate-90' /> <ChevronRightIcon className='transition-all w-5 rotate-90' />
</span> </span>
</div> </div>
<div className='transition-all grid gap-2 p-2 bg-slate-400/60 overflow-auto rounded-b-lg visible'> <div className='transition-all grid gap-2 p-2 bg-slate-400/80 overflow-auto rounded-b-lg visible'>
{ props.children } { props.children }
</div> </div>
</button> </button>

6
src/index.scss
View file

@ -8,15 +8,15 @@
} }
.sidebar-component { .sidebar-component {
@apply transition-all px-2 py-6 text-sm rounded-lg bg-slate-300/60 hover:bg-blue-500 hover:text-slate-50 @apply transition-all px-2 py-6 text-sm rounded-lg bg-slate-300/80 hover:bg-blue-500 hover:text-slate-50
} }
.sidebar-component-left { .sidebar-component-left {
@apply transition-all px-2 py-6 text-sm rounded-l-lg bg-slate-300/60 group-hover:bg-blue-500 group-hover:text-slate-50 @apply transition-all px-2 py-6 text-sm rounded-l-lg bg-slate-300/80 group-hover:bg-blue-500 group-hover:text-slate-50
} }
.sidebar-component-right { .sidebar-component-right {
@apply transition-all px-2 py-6 text-sm rounded-r-lg bg-slate-400/60 group-hover:bg-blue-600 group-hover:text-slate-50 @apply transition-all px-2 py-6 text-sm rounded-r-lg bg-slate-400/80 group-hover:bg-blue-600 group-hover:text-slate-50
} }
.sidebar-component-card { .sidebar-component-card {