IlyaSobolev/DocSpace-client
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Web:Shared:ContextMenu:Fixed hover styles in the context menu when it has a scroll. The hover effect strip did not reach the end of the modal on the right side.

Browse Source
This commit is contained in:
Vlada Gazizova 2024-03-12 19:22:01 +03:00
parent 671bdf07d4
commit e2e9ba59a5
4 changed files with 16 additions and 2 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

9
packages/shared/components/context-menu/ContextMenu.styled.ts
View File

@ -277,6 +277,15 @@ const StyledContextMenu = styled.div<{
margin: ${(props) => props.theme.dropDownItem.margin};
}
.p-contextmenu .scroll-body .p-menuitem {
margin-right: ${(props) => `-${props.theme.scrollbar.paddingInlineEnd}`};
@media ${mobile} {
margin-right: ${(props) =>
`-${props.theme.scrollbar.paddingInlineEndMobile}`};
}
}
.p-menuitem-icon {
max-height: ${(props) => props.theme.dropDownItem.lineHeight};

5
packages/shared/components/scrollbar/Scrollbar.styled.ts
View File

@ -12,13 +12,14 @@ const StyledScrollbar = styled(Scrollbar)<{ $fixedSize?: boolean }>`
}
.scroll-body {
padding-inline-end: 17px !important;
padding-inline-end: ${(props) => props.theme.scrollbar.paddingInlineEnd};
position: relative;
outline: none;
tab-index: -1;
@media ${mobile} {
padding-inline-end: 8px !important;
padding-inline-end: ${(props) =>
props.theme.scrollbar.paddingInlineEndMobile};
}
}

2
packages/shared/themes/base.ts
View File

@ -613,6 +613,8 @@ export const getBaseTheme = () => {
bgColor: "rgba(6, 22, 38, 0.16)",
hoverBgColor: "rgba(6, 22, 38, 0.32)",
pressBgColor: "rgba(6, 22, 38, 0.5)",
paddingInlineEnd: "17px !important",
paddingInlineEndMobile: "8px !important",
},
modalDialog: {

2
packages/shared/themes/dark.ts
View File

@ -583,6 +583,8 @@ const Dark: TTheme = {
bgColor: "rgba(20, 20, 20, 0.4)",
hoverBgColor: "rgba(20, 20, 20, 0.64)",
pressBgColor: "rgba(20, 20, 20, 0.8)",
paddingInlineEnd: "17px !important",
paddingInlineEndMobile: "8px !important",
},
modalDialog: {