fix: improve Coloris color picker visibility and button clickability
All checks were successful
Deploy / Build and Deploy to Production (push) Successful in 16s
All checks were successful
Deploy / Build and Deploy to Production (push) Successful in 16s
- Fix grid layout: add second column for input (grid-template-columns: var(--input-h) 1fr) - Ensure color picker button is clickable with cursor pointer and pointer-events auto - Set color picker z-index to 10000 to display above all UI elements - Add global styles to ensure Coloris button is always clickable Fixes issues where: - Color picker appeared behind ElementPopup - Button was not consistently clickable - Grid layout was missing second column definition Co-Authored-By: Claude Sonnet 4.5 <noreply@anthropic.com>
This commit is contained in:
parent
9127520ff7
commit
83455b7098
4 changed files with 58 additions and 62 deletions
|
|
@ -304,13 +304,15 @@ input[type=number] {
|
|||
.field .input-with-color .clr-field {
|
||||
width: 100%;
|
||||
display: grid;
|
||||
grid-template-columns: var(--input-h);
|
||||
grid-template-columns: var(--input-h) 1fr;
|
||||
grid-gap: 1ch;
|
||||
}
|
||||
.field .input-with-color .clr-field button {
|
||||
grid-column: 1;
|
||||
position: relative;
|
||||
border-radius: var(--border-radius);
|
||||
cursor: pointer;
|
||||
pointer-events: auto;
|
||||
}
|
||||
.field .input-with-color .clr-field input {
|
||||
grid-column: 2;
|
||||
|
|
@ -351,17 +353,20 @@ input[type=number] {
|
|||
flex-shrink: 2;
|
||||
}
|
||||
|
||||
.field-margin, .field-size {
|
||||
.field-margin,
|
||||
.field-size {
|
||||
display: inline-grid;
|
||||
width: calc(50% - 1ch);
|
||||
grid-template-columns: 6.5ch var(--input-w-small) 1fr;
|
||||
margin-bottom: var(--space-xs);
|
||||
}
|
||||
.field-margin input, .field-size input {
|
||||
.field-margin input,
|
||||
.field-size input {
|
||||
width: var(--input-w-small);
|
||||
padding-left: 0.75ch;
|
||||
}
|
||||
.field-margin:nth-of-type(odd), .field-size:nth-of-type(odd) {
|
||||
.field-margin:nth-of-type(odd),
|
||||
.field-size:nth-of-type(odd) {
|
||||
margin-right: 2ch;
|
||||
}
|
||||
|
||||
|
|
|
|||
Loading…
Add table
Add a link
Reference in a new issue