Dylan/excalidraw
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

feat: tweak properties panel styling (#9322)

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

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

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

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

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