excalidraw-box
Code Issues

fix: style sidebar button to match native Excalidraw UI

Browse Source
This commit is contained in:
ruinivist
2026-05-30 18:07:38 +00:00
parent 7e0ec4b1c4
commit d52c08cd10
2 changed files with 10 additions and 8 deletions
Download Patch File Download Diff File Expand all files Collapse all files
src/App.tsx
+1 -1
View File
@@ -414,7 +414,7 @@ export function App() {
<div className="app-actions"> <div className="app-actions">
<button <button
type="button" type="button"
className="secondary-button app-actions-toggle" className="app-actions-toggle"
onClick={openSidebar} onClick={openSidebar}
aria-label="Open drawings" aria-label="Open drawings"
> >
src/styles.css
+9 -7
View File
@@ -169,14 +169,16 @@ input {
display: inline-flex; display: inline-flex;
align-items: center; align-items: center;
justify-content: center; justify-content: center;
width: var(--lg-button-size, 2.25rem); width: 2.25rem;
height: var(--lg-button-size, 2.25rem); height: 2.25rem;
padding: 0; padding: 0;
border: none; border: none;
border-radius: var(--border-radius-lg, 12px); border-radius: 8px;
box-shadow: 0 0 0 1px var(--app-surface-lowest); box-shadow: 0 0 0 1px var(--app-surface-lowest);
background: var(--app-surface-low); background: var(--app-island-bg);
color: var(--app-text-color); color: var(--app-text-color);
cursor: pointer;
transition: background-color 120ms ease, box-shadow 120ms ease;
} }
.app-actions-toggle svg { .app-actions-toggle svg {
@@ -265,12 +267,12 @@ input {
} }
.app-actions-toggle:hover { .app-actions-toggle:hover {
background: var(--app-button-hover-bg); background-color: var(--app-button-hover-bg);
} }
.app-actions-toggle:active { .app-actions-toggle:active {
box-shadow: 0 0 0 1px var(--app-button-active-border); background-color: var(--app-button-active-bg);
background: var(--app-button-active-bg); box-shadow: inset 0 0 0 1px var(--app-button-active-border);
} }
.sr-only { .sr-only {