mirror of
https://github.com/excalidraw/excalidraw.git
synced 2025-11-17 11:14:23 +01:00
416e8b3e42
* compact bottom toolbar * put menu trigger to top left * add popup to switch between grouped tool types * add a dedicated mobile toolbar * update position for mobile * fix active tool type * add mobile mode as well * mobile actions * remove refactored popups * excali logo mobile * include mobile * update mobile menu layout * move selection and deletion back to right * do not fill eraser * fix styling * fix active styling * bigger buttons, smaller gaps * fix other tools not opened * fix: Style panel persistence and restore Signed-off-by: Mark Tolmacs <mark@lazycat.hu> * move hidden action btns to extra popover * fix dropdown overlapping with welcome screen * replace custom popup with popover * improve button styles * swapping redo and delete * always show undo & redo and improve styling * change background * toolbar styles * no any * persist perferred selection tool and align tablet as well * add a renderTopLeftUI to props * tweak border and bg * show combined properties only when using suitable tools * fix preferred tool * new stroke icon * hide color picker hot keys * init preferred tool based on device * fix main menu sizing * fix welcome screen offset * put text before image * disable call highlight on buttons * fix renderTopLeftUI --------- Signed-off-by: Mark Tolmacs <mark@lazycat.hu> Co-authored-by: Mark Tolmacs <mark@lazycat.hu> Co-authored-by: dwelle <5153846+dwelle@users.noreply.github.com>
79 lines
1.5 KiB
SCSS
79 lines
1.5 KiB
SCSS
@import "open-color/open-color.scss";
|
|
@import "../css/variables.module.scss";
|
|
|
|
.excalidraw {
|
|
.mobile-toolbar {
|
|
display: flex;
|
|
flex: 1;
|
|
align-items: center;
|
|
padding: 0px;
|
|
gap: 4px;
|
|
border-radius: var(--space-factor);
|
|
overflow-x: auto;
|
|
scrollbar-width: none;
|
|
-ms-overflow-style: none;
|
|
justify-content: space-between;
|
|
}
|
|
|
|
.mobile-toolbar::-webkit-scrollbar {
|
|
display: none;
|
|
}
|
|
|
|
.mobile-toolbar .ToolIcon {
|
|
min-width: 2rem;
|
|
min-height: 2rem;
|
|
border-radius: 4px;
|
|
display: flex;
|
|
align-items: center;
|
|
justify-content: center;
|
|
flex-shrink: 0;
|
|
|
|
.ToolIcon__icon {
|
|
width: 2.25rem;
|
|
height: 2.25rem;
|
|
|
|
&:hover {
|
|
background-color: transparent;
|
|
}
|
|
}
|
|
|
|
&.active {
|
|
background: var(
|
|
--color-surface-primary-container,
|
|
var(--island-bg-color)
|
|
);
|
|
border-color: var(--button-active-border, var(--color-primary-darkest));
|
|
}
|
|
|
|
svg {
|
|
width: 1rem;
|
|
height: 1rem;
|
|
}
|
|
}
|
|
|
|
.mobile-toolbar .App-toolbar__extra-tools-dropdown {
|
|
min-width: 160px;
|
|
z-index: var(--zIndex-layerUI);
|
|
}
|
|
|
|
.mobile-toolbar-separator {
|
|
width: 1px;
|
|
height: 24px;
|
|
background: var(--default-border-color);
|
|
margin: 0 2px;
|
|
flex-shrink: 0;
|
|
}
|
|
|
|
.mobile-toolbar-undo {
|
|
display: flex;
|
|
align-items: center;
|
|
}
|
|
|
|
.mobile-toolbar-undo .ToolIcon {
|
|
min-width: 32px;
|
|
min-height: 32px;
|
|
width: 32px;
|
|
height: 32px;
|
|
}
|
|
}
|