yuuza/outline
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

Tweak floating toolbar style

Browse Source
This commit is contained in:
Tom Moor
2023-10-06 12:31:03 -04:00
parent 9924fa6621
commit 63263eee82
2 changed files with 6 additions and 13 deletions
Download Patch File Download Diff File Expand all files Collapse all files

17
app/editor/components/ToolbarButton.tsx
View File

@@ -1,6 +1,5 @@
import { transparentize } from "polished";
import styled, { css } from "styled-components"; import styled, { css } from "styled-components";
import { s } from "@shared/styles"; import { extraArea, s } from "@shared/styles";
type Props = { type Props = {
active?: boolean; active?: boolean;
@@ -19,7 +18,7 @@ export default styled.button.attrs((props) => ({
height: 24px; height: 24px;
cursor: var(--pointer); cursor: var(--pointer);
border: none; border: none;
border-radius: 2px; border-radius: 4px;
background: none; background: none;
transition: opacity 100ms ease-in-out; transition: opacity 100ms ease-in-out;
padding: 0; padding: 0;
@@ -45,19 +44,13 @@ export default styled.button.attrs((props) => ({
cursor: default; cursor: default;
} }
&:before { ${extraArea(4)}
position: absolute;
content: "";
top: -6px;
right: -4px;
left: -4px;
bottom: -6px;
}
${(props) => ${(props) =>
props.active && props.active &&
css` css`
opacity: 1; opacity: 1;
background: ${(props) => transparentize(0.9, s("accent")(props))}; color: ${s("accentText")};
background: ${s("accent")};
`}; `};
`; `;

2
app/editor/components/ToolbarMenu.tsx
View File

@@ -118,7 +118,7 @@ const FlexibleWrapper = styled.div`
color: ${s("textSecondary")}; color: ${s("textSecondary")};
overflow: hidden; overflow: hidden;
display: flex; display: flex;
gap: 8px; gap: 6px;
`; `;
const Arrow = styled(ExpandedIcon)` const Arrow = styled(ExpandedIcon)`