smig/excalidraw
1
0
Fork 0
mirror of https://github.com/excalidraw/excalidraw.git synced 2025-04-14 16:40:58 -04:00
Code Issues Projects Releases Packages Wiki Activity Actions

feat: tweak properties panel styling (#9322)
All checks were successful
Tests / test (push) Successful in 4m43s
Details

Browse source
This commit is contained in:
David Luzar 2025-03-30 19:20:13 +02:00 • committed by GitHub
parent 83fac6d0db
commit 7c58477382
No known key found for this signature in database
GPG key ID: B5690EEEBB952194
3 changed files with 29 additions and 21 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

36
packages/excalidraw/components/ColorPicker/ColorPicker.scss
View file

@ -15,7 +15,7 @@
.color-picker-container {
display: grid;
grid-template-columns: 1fr 20px 1.625rem;
grid-template-columns: 1fr 8px 1.625rem;
padding: 0.25rem 0px;
align-items: center;
@ -30,13 +30,14 @@
}
.color-picker__button {
--radius: 0.25rem;
--radius: 6px;
--size: 1.375rem;
padding: 0;
margin: 0;
width: 1.35rem;
height: 1.35rem;
border: 1px solid var(--color-gray-30);
margin: 1px;
width: var(--size);
height: var(--size);
border: 0;
border-radius: var(--radius);
filter: var(--theme-filter);
background-color: var(--swatch-color);
@ -45,16 +46,16 @@
font-family: inherit;
box-sizing: border-box;
&:hover {
&:hover:not(.active) {
&::after {
content: "";
position: absolute;
top: -2px;
left: -2px;
right: -2px;
bottom: -2px;
box-shadow: 0 0 0 1px var(--color-gray-30);
border-radius: calc(var(--radius) + 1px);
top: 0;
left: 0;
right: 0;
bottom: 0;
box-shadow: 0 0 0 1px var(--swatch-color);
border-radius: var(--radius);
filter: var(--theme-filter);
}
}
@ -62,10 +63,11 @@
&.active {
.color-picker__button-outline {
position: absolute;
top: -2px;
left: -2px;
right: -2px;
bottom: -2px;
--offset: -1px;
top: var(--offset);
left: var(--offset);
right: var(--offset);
bottom: var(--offset);
box-shadow: 0 0 0 1px var(--color-primary-darkest);
z-index: 1; // due hover state so this has preference
border-radius: calc(var(--radius) + 1px);

2
packages/excalidraw/components/Range.scss
View file

@ -6,7 +6,7 @@
.range-wrapper {
position: relative;
padding-top: 10px;
padding-bottom: 30px;
padding-bottom: 25px;
}
.range-input {

12
packages/excalidraw/css/styles.scss
View file

@ -173,7 +173,7 @@ body.excalidraw-cursor-resize * {
.buttonList {
flex-wrap: wrap;
display: flex;
column-gap: 0.5rem;
column-gap: 0.375rem;
row-gap: 0.5rem;
label {
@ -386,10 +386,16 @@ body.excalidraw-cursor-resize * {
.App-menu__left {
overflow-y: auto;
padding: 0.75rem;
width: 12.5rem;
padding: 0.75rem 0.75rem 0.25rem 0.75rem;
width: 11.875rem;
box-sizing: border-box;
position: absolute;
.buttonList label,
.buttonList button,
.buttonList .zIndexButton {
--button-bg: transparent;
}
}
.dropdown-select {