design.estate/dees-wcctools
3
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

fix(wcc-properties): Improve wcc-properties CSS to prevent grid overflow, properly size and center icon glyphs, and adjust right-side offset

Browse Source
This commit is contained in:
Jürgen Kunz
2025-12-21 18:24:46 +00:00
parent 36dd6b5064
commit 0068c0749d
3 changed files with 19 additions and 6 deletions
Download Patch File Download Diff File Expand all files Collapse all files

15
ts_web/elements/wcc-properties.ts
View File

@@ -207,22 +207,22 @@ export class WccProperties extends DeesElement {
}
.selectorButtons2 {
display: grid;
grid-template-columns: 1fr 1fr;
grid-template-columns: repeat(2, minmax(0, 1fr));
flex: 1;
}
.selectorButtons4 {
display: grid;
grid-template-columns: repeat(4, 1fr);
grid-template-columns: repeat(4, minmax(0, 1fr));
flex: 1;
}
.selectorButtons5 {
display: grid;
grid-template-columns: repeat(5, 1fr);
grid-template-columns: repeat(5, minmax(0, 1fr));
flex: 1;
}
.selectorButtons1 {
display: grid;
grid-template-columns: 1fr;
grid-template-columns: minmax(0, 1fr);
flex: 1;
}
.button {
@@ -259,6 +259,11 @@ export class WccProperties extends DeesElement {
.button .material-symbols-outlined {
font-size: 18px;
font-variation-settings: 'FILL' 0, 'wght' 300;
min-width: 18px;
min-height: 18px;
display: inline-flex;
align-items: center;
justify-content: center;
}
.button.selected .material-symbols-outlined {
@@ -301,7 +306,7 @@ export class WccProperties extends DeesElement {
top: 0.5rem;
bottom: 0.5rem;
left: 0.5rem;
right: calc(520px + 0.5rem);
right: calc(600px + 0.5rem);
display: flex;
align-items: center;
justify-content: center;