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

Merge pull request #518 from ONLYOFFICE/bugfix/tab-colors

Browse Source 
Bugfix/tab-colors
This commit is contained in:
Timofey Boyko 2024-07-05 17:53:14 +03:00 committed by GitHub
commit cb69375fa2
No known key found for this signature in database
GPG Key ID: B5690EEEBB952194
1 changed files with 11 additions and 7 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

18
packages/shared/components/tabs/Tabs.styled.ts
View File

@ -161,7 +161,7 @@ export const Tab = styled.div<{
line-height: 20px; line-height: 20px;
cursor: pointer; cursor: pointer;
opacity: ${(props) => (props.isDisabled && props.$type === TabsTypes.Secondary ? 0.6 : 1)}; opacity: ${(props) => (props.isDisabled && props.$type === TabsTypes.Secondary ? 0.6 : 1)};
pointer-events: ${(props) => props.isDisabled && props.$type === TabsTypes.Secondary && "none"}; pointer-events: ${(props) => ((props.isDisabled && props.$type === TabsTypes.Secondary) || props.isActive) && "none"};
user-select: none; user-select: none;
padding: ${(props) => padding: ${(props) =>
@ -202,13 +202,15 @@ export const Tab = styled.div<{
!props.isActive && !props.isActive &&
props.theme.tabs.hoverTextColorPrimary}; props.theme.tabs.hoverTextColorPrimary};
opacity: ${(props) =>
props.$type === TabsTypes.Primary && props.isActive && 0.85};
background-color: ${(props) => background-color: ${(props) =>
props.$type === TabsTypes.Secondary && props.$type === TabsTypes.Secondary &&
!props.isActive && !props.isActive &&
props.theme.tabs.hoverBackgroundColorSecondary}; props.theme.tabs.hoverBackgroundColorSecondary};
border: ${(props) =>
props.$type === TabsTypes.Secondary &&
!props.isActive &&
css`1px solid ${props.theme.tabs.hoverBackgroundColorSecondary}`};
}; };
&:active { &:active {
@ -217,13 +219,15 @@ export const Tab = styled.div<{
!props.isActive && !props.isActive &&
props.theme.tabs.pressedTextColorPrimary}; props.theme.tabs.pressedTextColorPrimary};
opacity: ${(props) =>
props.$type === TabsTypes.Primary && props.isActive && 1};
background-color: ${(props) => background-color: ${(props) =>
props.$type === TabsTypes.Secondary && props.$type === TabsTypes.Secondary &&
!props.isActive && !props.isActive &&
props.theme.tabs.pressedBackgroundColorSecondary}; props.theme.tabs.pressedBackgroundColorSecondary};
border: ${(props) =>
props.$type === TabsTypes.Secondary &&
!props.isActive &&
css`1px solid ${props.theme.tabs.pressedBackgroundColorSecondary}`};
}; };
`; `;