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

fix(typelist): update styling

Browse Source
This commit is contained in:
Juergen Kunz
2025-06-27 00:45:11 +00:00
parent 7095197d07
commit 60951330d1
1 changed files with 67 additions and 16 deletions
Download Patch File Download Diff File Expand all files Collapse all files

83
ts_web/elements/dees-input-typelist.ts
View File

@@ -35,12 +35,24 @@ export class DeesInputTypelist extends DeesInputBase<DeesInputTypelist> {
}
.mainbox {
border-radius: 3px;
background: #222;
background: ${cssManager.bdTheme('#fafafa', '#222222')};
overflow: hidden;
border-top: ${cssManager.bdTheme('1px solid #CCC', '1px solid #444')};
border-bottom: ${cssManager.bdTheme('1px solid #CCC', '1px solid #333')};
border-right: ${cssManager.bdTheme('1px solid #CCC', 'none')};
border-left: ${cssManager.bdTheme('1px solid #CCC', 'none')};
border-top: ${cssManager.bdTheme('1px solid #CCC', '1px solid #ffffff10')};
border-bottom: ${cssManager.bdTheme('1px solid #CCC', '1px solid #222')};
border-right: ${cssManager.bdTheme('1px solid #CCC', '1px solid #ffffff10')};
border-left: ${cssManager.bdTheme('1px solid #CCC', '1px solid #ffffff10')};
box-shadow: ${cssManager.bdTheme('0px 1px 4px rgba(0,0,0,0.3)', 'none')};
transition: all 0.2s;
position: relative;
}
.mainbox:hover {
filter: ${cssManager.bdTheme('brightness(0.98)', 'brightness(1.05)')};
}
.mainbox:focus-within {
outline: 2px solid ${cssManager.bdTheme('#0069f2', '#0084ff')};
outline-offset: -2px;
}
.tags {
@@ -50,14 +62,15 @@ export class DeesInputTypelist extends DeesInputBase<DeesInputTypelist> {
.notags {
text-align: center;
opacity: 0.5;
font-size: 12px;
color: ${cssManager.bdTheme('#999', '#666')};
font-size: 13px;
font-style: italic;
}
input {
display: block;
box-sizing: border-box;
background: #181818;
background: ${cssManager.bdTheme('#f5f5f5', '#181818')};
width: 100%;
outline: none;
border: none;
@@ -67,30 +80,68 @@ export class DeesInputTypelist extends DeesInputBase<DeesInputTypelist> {
line-height: 32px;
height: 0px;
transition: height 0.2s;
border-top: 1px solid ${cssManager.bdTheme('#e0e0e0', '#333')};
}
input:focus {
height: 32px;
background: ${cssManager.bdTheme('#fafafa', '#1a1a1a')};
}
input::placeholder {
color: ${cssManager.bdTheme('#999', '#666')};
}
.tag {
display: inline-block;
background: ${cssManager.bdTheme('#e0e0e0', '#444')};
color: ${cssManager.bdTheme('#333', '#fff')};
padding: 4px 8px;
border-radius: 3px;
margin: 2px;
font-size: 12px;
background: ${cssManager.bdTheme('#e8f5e9', '#2d3a2d')};
color: ${cssManager.bdTheme('#2e7d32', '#81c784')};
padding: 4px 10px;
border-radius: 4px;
margin: 3px;
font-size: 13px;
font-weight: 500;
transition: all 0.2s;
border: 1px solid ${cssManager.bdTheme('#c8e6c9', '#1b5e20')};
}
.tag:hover {
background: ${cssManager.bdTheme('#c8e6c9', '#3d4f3d')};
transform: translateY(-1px);
}
.tag .remove {
margin-left: 6px;
margin-left: 8px;
cursor: pointer;
opacity: 0.6;
opacity: 0.7;
font-weight: 700;
font-size: 16px;
line-height: 1;
transition: opacity 0.2s;
}
.tag .remove:hover {
opacity: 1;
color: ${cssManager.bdTheme('#c62828', '#ef5350')};
}
/* Disabled state */
:host([disabled]) .mainbox {
opacity: 0.6;
cursor: not-allowed;
}
:host([disabled]) .tags {
cursor: not-allowed;
}
:host([disabled]) .tag {
pointer-events: none;
}
:host([disabled]) input {
cursor: not-allowed;
background: ${cssManager.bdTheme('#f0f0f0', '#1a1a1a')};
}
`,
];