marcel/excalidraw
1
0
Fork 0
mirror of https://github.com/excalidraw/excalidraw.git synced 2025-09-15 13:30:06 +02:00
Code Issues Packages Projects Releases Wiki Activity

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