Files
excalidraw/packages/excalidraw/components/ExcalidrawLogo.scss
Ryan Di 416e8b3e42 feat: new mobile layout (#9996)
* 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>
2025-10-09 23:48:31 +02:00

88 lines
1.5 KiB
SCSS

.excalidraw {
.ExcalidrawLogo {
--logo-icon--mobile: 1rem;
--logo-text--mobile: 0.75rem;
--logo-icon--xs: 2rem;
--logo-text--xs: 1.5rem;
--logo-icon--small: 2.5rem;
--logo-text--small: 1.75rem;
--logo-icon--normal: 3rem;
--logo-text--normal: 2.2rem;
--logo-icon--large: 90px;
--logo-text--large: 65px;
display: flex;
align-items: center;
svg {
flex: 0 0 auto;
}
.ExcalidrawLogo-icon {
width: auto;
color: var(--color-logo-icon);
}
.ExcalidrawLogo-text {
margin-left: 0.75rem;
width: auto;
color: var(--color-logo-text);
}
&.is-mobile {
.ExcalidrawLogo-icon {
height: var(--logo-icon--mobile);
}
.ExcalidrawLogo-text {
height: var(--logo-text--mobile);
margin-left: 0.5rem;
}
}
&.is-xs {
.ExcalidrawLogo-icon {
height: var(--logo-icon--xs);
}
.ExcalidrawLogo-text {
height: var(--logo-text--xs);
}
}
&.is-small {
.ExcalidrawLogo-icon {
height: var(--logo-icon--small);
}
.ExcalidrawLogo-text {
height: var(--logo-text--small);
}
}
&.is-normal {
.ExcalidrawLogo-icon {
height: var(--logo-icon--normal);
}
.ExcalidrawLogo-text {
height: var(--logo-text--normal);
}
}
&.is-large {
.ExcalidrawLogo-icon {
height: var(--logo-icon--large);
}
.ExcalidrawLogo-text {
height: var(--logo-text--large);
}
}
}
}