smig/excalidraw
1
0
Fork 0
mirror of https://github.com/excalidraw/excalidraw.git synced 2025-05-03 10:00:07 -04:00
Code Issues Projects Releases Packages Wiki Activity Actions

Add a gap between shapes and lock (#569)

Browse source 
* Add a gap between shapes and lock

The lock is a different type as the rest of the shapes, so we should visually separate it.

* redesign lock icon

Co-authored-by: David Luzar <luzar.david@gmail.com>
This commit is contained in:
Christopher Chedeau 2020-01-26 19:01:56 +00:00 • committed by GitHub
parent 141b7409a2
commit 263fef4eaa
No known key found for this signature in database
GPG key ID: 4AEE18F83AFDEB23
3 changed files with 40 additions and 21 deletions
Download patch file Download diff file Expand all files Collapse all files

2
src/components/LockIcon.tsx
View file

@ -43,7 +43,7 @@ export function LockIcon(props: LockIconProps) {
const sizeCn = `ToolIcon_size_${props.size || DEFAULT_SIZE}`;
return (
<label className={`ToolIcon ${sizeCn}`} title={props.title}>
<label className={`ToolIcon ToolIcon__lock ${sizeCn}`} title={props.title}>
<input
className="ToolIcon_type_checkbox"
type="checkbox"

22
src/components/ToolIcon.scss
View file

@ -60,3 +60,25 @@
box-shadow: 0 0 0 2px #a5d8ff;
}
}
.ToolIcon.ToolIcon__lock {
display: flex;
align-items: center;
justify-content: center;
margin-left: 0.1rem;
.ToolIcon__icon {
background-color: transparent;
width: 2rem;
height: 2em;
}
&:hover .ToolIcon__icon {
background-color: transparent;
}
&:active .ToolIcon__icon {
background-color: transparent;
}
&:focus .ToolIcon__icon {
box-shadow: none;
}
}