sambruk/excalidraw
2
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

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
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;
}
}