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

feat: redesign toolbar & tweaks (#4387)

Browse source
This commit is contained in:
David Luzar 2021-12-15 15:31:44 +01:00 • committed by GitHub
parent 390da3fd0f
commit 7db63bd397
No known key found for this signature in database
GPG key ID: 4AEE18F83AFDEB23
16 changed files with 233 additions and 60 deletions
Download patch file Download diff file Expand all files Collapse all files

49
src/components/ToolIcon.scss
View file

@ -8,17 +8,7 @@
position: relative;
cursor: pointer;
-webkit-tap-highlight-color: transparent;
border-radius: var(--space-factor);
user-select: none;
background-color: var(--button-gray-1);
&:hover {
background-color: var(--button-gray-2);
}
&:active {
background-color: var(--button-gray-3);
}
}
.ToolIcon--plain {
@ -29,6 +19,20 @@
}
}
.ToolIcon_type_radio,
.ToolIcon_type_checkbox {
& + .ToolIcon__icon {
background-color: var(--button-gray-1);
&:hover {
background-color: var(--button-gray-2);
}
&:active {
background-color: var(--button-gray-3);
}
}
}
.ToolIcon__icon {
width: 2.5rem;
height: 2.5rem;
@ -38,7 +42,11 @@
justify-content: center;
align-items: center;
border-radius: var(--space-factor);
border-radius: var(--border-radius-lg);
& + .ToolIcon__label {
margin-inline-start: 0;
}
svg {
position: relative;
@ -46,10 +54,6 @@
fill: var(--icon-fill-color);
color: var(--icon-fill-color);
}
& + .ToolIcon__label {
margin-inline-start: 0;
}
}
.ToolIcon__label {
@ -79,7 +83,7 @@
margin: 0;
font-size: inherit;
&:focus {
&:focus-visible {
box-shadow: 0 0 0 2px var(--focus-highlight-color);
}
@ -121,7 +125,7 @@
}
}
&:focus + .ToolIcon__icon {
&:focus-visible + .ToolIcon__icon {
box-shadow: 0 0 0 2px var(--focus-highlight-color);
}
@ -141,10 +145,6 @@
background-color: transparent;
}
&:focus {
box-shadow: none;
}
.ToolIcon__icon {
background-color: var(--button-gray-1);
&:hover {
@ -159,13 +159,6 @@
}
}
.ToolIcon.ToolIcon__lock {
margin-inline-end: var(--space-factor);
&.ToolIcon_type_floating {
margin-left: 0.1rem;
}
}
.ToolIcon__keybinding {
position: absolute;
bottom: 2px;