sirtimbly/IronCalc
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

fix: styles

Browse Source
This commit is contained in:
Daniel
2025-11-23 13:44:56 +01:00
committed by Nicolás Hatcher Andrés
parent c196db2115
commit ae6acdcdd5
1 changed files with 13 additions and 22 deletions
Download Patch File Download Diff File Expand all files Collapse all files

35
webapp/IronCalc/src/components/FormulaBar/FormulaBar.tsx
View File

@@ -43,7 +43,7 @@ function FormulaBar(properties: FormulaBarProps) {
return ( return (
<Container> <Container>
<AddressContainer> <AddressContainer $active={isMenuOpen}>
<FormulaBarMenu <FormulaBarMenu
onChange={handleMenuChange} onChange={handleMenuChange}
onMenuOpenChange={handleMenuOpenChange} onMenuOpenChange={handleMenuOpenChange}
@@ -52,10 +52,10 @@ function FormulaBar(properties: FormulaBarProps) {
model={model} model={model}
onUpdate={onChange} onUpdate={onChange}
> >
<CellBarAddress $active={isMenuOpen}>{cellAddress}</CellBarAddress> <CellBarAddress>{cellAddress}</CellBarAddress>
<MenuButton $active={isMenuOpen}> <StyledIcon>
<ChevronDown size={16} /> <ChevronDown size={16} />
</MenuButton> </StyledIcon>
</FormulaBarMenu> </FormulaBarMenu>
</AddressContainer> </AddressContainer>
<Divider /> <Divider />
@@ -148,7 +148,7 @@ const Container = styled("div")`
height: ${FORMULA_BAR_HEIGHT}px; height: ${FORMULA_BAR_HEIGHT}px;
`; `;
const AddressContainer = styled("div")` const AddressContainer = styled("div")<{ $active?: boolean }>`
color: ${theme.palette.common.black}; color: ${theme.palette.common.black};
font-style: normal; font-style: normal;
font-size: 12px; font-size: 12px;
@@ -159,12 +159,15 @@ const AddressContainer = styled("div")`
gap: 2px; gap: 2px;
border-radius: 4px; border-radius: 4px;
margin-left: 8px; margin-left: 8px;
cursor: pointer;
background-color: ${(props) =>
props.$active ? theme.palette.action.selected : "transparent"};
&:hover { &:hover {
background-color: ${theme.palette.grey["100"]}; background-color: ${theme.palette.grey["100"]};
} }
`; `;
const CellBarAddress = styled("div")<{ $active?: boolean }>` const CellBarAddress = styled("div")`
width: 100%; width: 100%;
box-sizing: border-box; box-sizing: border-box;
height: 24px; height: 24px;
@@ -172,28 +175,16 @@ const CellBarAddress = styled("div")<{ $active?: boolean }>`
align-items: center; align-items: center;
justify-content: center; justify-content: center;
text-align: center; text-align: center;
padding: 4px 8px; padding-left: 8px;
border-radius: 4px 0px 0px 4px; background-color: "transparent";
background-color: ${(props) =>
props.$active ? theme.palette.action.selected : "transparent"};
&:hover {
background-color: ${theme.palette.grey["300"]};
}
`; `;
const MenuButton = styled("div")<{ $active?: boolean }>` const StyledIcon = styled("div")`
display: flex; display: flex;
align-items: center; align-items: center;
justify-content: center; justify-content: center;
cursor: pointer;
padding: 4px 2px; padding: 4px 2px;
border-radius: 0px 4px 4px 0px; background-color: "transparent";
color: ${theme.palette.common.black};
background-color: ${(props) =>
props.$active ? theme.palette.action.selected : "transparent"};
&:hover {
background-color: ${theme.palette.grey["300"]};
}
`; `;
const EditorWrapper = styled("div")` const EditorWrapper = styled("div")`