luulam/AFFiNE
1
0
Fork 0
Code Issues Pull Requests Actions 2 Packages Projects Releases Wiki Activity

style: adjust active slider bar collection item active style (#3458)

Browse Source 
Co-authored-by: Alex Yang <himself65@outlook.com>
This commit is contained in:
JimmFly
2023-07-29 23:22:21 +08:00
committed by GitHub
parent c45149b664
commit 6388a798c9
2 changed files with 8 additions and 13 deletions
Download Patch File Download Diff File Expand all files Collapse all files

1
apps/core/src/components/pure/workspace-slider-bar/collections/page.tsx
View File

@@ -150,6 +150,7 @@ export const Page = ({
<Collapsible.Root open={!collapsed}> <Collapsible.Root open={!collapsed}>
<MenuItem <MenuItem
data-testid="collection-page" data-testid="collection-page"
data-type="collection-list-item"
icon={icon} icon={icon}
onClick={clickPage} onClick={clickPage}
className={styles.title} className={styles.title}

10
packages/component/src/components/app-sidebar/menu-item/index.css.ts
View File

@@ -1,5 +1,4 @@
import { style } from '@vanilla-extract/css'; import { style } from '@vanilla-extract/css';
export const root = style({ export const root = style({
display: 'inline-flex', display: 'inline-flex',
alignItems: 'center', alignItems: 'center',
@@ -35,13 +34,8 @@ export const root = style({
paddingLeft: '4px', paddingLeft: '4px',
paddingRight: '12px', paddingRight: '12px',
}, },
'&[data-type="collection-list-item"][data-collapsible="false"]:hover': { '&[data-type="collection-list-item"][data-collapsible="false"][data-active="true"],&[data-type="favorite-list-item"][data-collapsible="false"][data-active="true"], &[data-type="favorite-list-item"][data-collapsible="false"]:hover, &[data-type="collection-list-item"][data-collapsible="false"]:hover':
width: 'calc(100% + 8px)', {
transform: 'translateX(-8px)',
paddingLeft: '20px',
paddingRight: '12px',
},
'&[data-type="favorite-list-item"][data-collapsible="false"]:hover': {
width: 'calc(100% + 8px)', width: 'calc(100% + 8px)',
transform: 'translateX(-8px)', transform: 'translateX(-8px)',
paddingLeft: '20px', paddingLeft: '20px',