variablelab/theatre
4
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity

Style tweaks

Browse source
This commit is contained in:
Aria Minaei 2021-08-08 12:32:53 +02:00
parent 361f4f13a5
commit b8b65cfde5
2 changed files with 15 additions and 6 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

4
theatre/studio/src/panels/ObjectEditorPanel/propEditors/utils/SingleRowPropEditor.tsx
View file

@ -33,9 +33,9 @@ export const rowBg = css`
&:before { &:before {
height: 2px; height: 2px;
right: 0; right: 0;
bottom: -1px; bottom: 0px;
left: calc(-2px + var(--left-pad) + var(--depth) * var(--step)); left: calc(-2px + var(--left-pad) + var(--depth) * var(--step));
background-color: ${transparentize(0.3, rowBgColor)}; background-color: ${transparentize(0.2, rowBgColor)};
} }
` `

17
theatre/studio/src/panels/OutlinePanel/BaseItem.tsx
View file

@ -7,14 +7,17 @@ import {transparentize, darken, opacify, lighten} from 'polished'
import {rowBgColor} from '@theatre/studio/panels/ObjectEditorPanel/propEditors/utils/SingleRowPropEditor' import {rowBgColor} from '@theatre/studio/panels/ObjectEditorPanel/propEditors/utils/SingleRowPropEditor'
import {pointerEventsAutoInNormalMode} from '@theatre/studio/css' import {pointerEventsAutoInNormalMode} from '@theatre/studio/css'
export const Container = styled.li<{depth: number}>` export const Container = styled.li`
--depth: ${(props) => props.depth};
margin: 0; margin: 0;
padding: 0; padding: 0;
list-style: none; list-style: none;
display: flex;
justify-content: flex-start;
flex-direction: column;
align-items: flex-start;
` `
export const BaseHeader = styled.div<{}>`` export const BaseHeader = styled.div``
const baseBg = lighten(0.05, rowBgColor) const baseBg = lighten(0.05, rowBgColor)
@ -25,6 +28,7 @@ export const outlinePanelTheme = {baseBg, baseFontColor, baseBorderColor}
const Header = styled(BaseHeader)` const Header = styled(BaseHeader)`
padding-left: calc(4px + var(--depth) * 16px); padding-left: calc(4px + var(--depth) * 16px);
padding-right: 8px;
height: 24px; height: 24px;
box-sizing: border-box; box-sizing: border-box;
display: flex; display: flex;
@ -155,7 +159,12 @@ const BaseItem: React.FC<{
const canContainChildren = children !== undefined const canContainChildren = children !== undefined
return ( return (
<Container depth={depth}> <Container
style={
/* @ts-ignore */
{'--depth': depth}
}
>
<Header className={selectionStatus} onClick={select ?? noop}> <Header className={selectionStatus} onClick={select ?? noop}>
<Head_IconContainer> <Head_IconContainer>
{canContainChildren ? ( {canContainChildren ? (