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

update

Browse Source
This commit is contained in:
Juergen Kunz
2025-06-26 15:08:14 +00:00
parent b41e9f31e7
commit 167df241b7
9 changed files with 559 additions and 437 deletions
Download Patch File Download Diff File Expand all files Collapse all files

50
ts_web/elements/dees-input-checkbox.ts
View File

@ -50,14 +50,24 @@ export class DeesInputCheckbox extends DeesInputBase<DeesInputCheckbox> {
}
.maincontainer {
padding: 5px 0px;
display: flex;
align-items: center;
gap: 12px;
padding: 8px 0px;
color: ${cssManager.bdTheme('#333', '#ccc')};
cursor: pointer;
user-select: none;
transition: all 0.2s;
}
.maincontainer:hover {
color: ${cssManager.bdTheme('#000', '#fff')};
}
.maincontainer:hover .checkbox {
border-color: ${cssManager.bdTheme('#999', '#888')};
}
input:focus {
outline: none;
border-bottom: 1px solid #e4002b;
@ -72,6 +82,7 @@ export class DeesInputCheckbox extends DeesInputBase<DeesInputCheckbox> {
width: 24px;
display: inline-block;
background: ${cssManager.bdTheme('#fafafa', '#222')};
flex-shrink: 0;
}
.checkbox.selected {
@ -118,13 +129,43 @@ export class DeesInputCheckbox extends DeesInputBase<DeesInputCheckbox> {
img {
padding: 4px;
}
.checkbox-label {
font-size: 14px;
transition: color 0.2s ease;
}
.maincontainer:hover .checkbox-label {
color: ${cssManager.bdTheme('#1a1a1a', '#ffffff')};
}
.maincontainer.disabled {
cursor: not-allowed;
opacity: 0.5;
}
.maincontainer.disabled:hover {
color: ${cssManager.bdTheme('#333', '#ccc')};
}
.maincontainer.disabled:hover .checkbox {
border-color: ${cssManager.bdTheme('#ccc', '#333')};
}
.description-text {
font-size: 12px;
color: ${cssManager.bdTheme('#666', '#999')};
margin-top: 4px;
line-height: 1.4;
padding-left: 36px;
}
`,
];
public render(): TemplateResult {
return html`
<div class="input-wrapper">
<div class="maincontainer" @click="${this.toggleSelected}">
<div class="maincontainer ${this.disabled ? 'disabled' : ''}" @click="${this.toggleSelected}">
<div class="checkbox ${this.value ? 'selected' : ''} ${this.disabled ? 'disabled' : ''}" tabindex="0">
${this.value
? html`
@ -135,8 +176,11 @@ export class DeesInputCheckbox extends DeesInputBase<DeesInputCheckbox> {
`
: html``}
</div>
${this.label ? html`<div class="checkbox-label">${this.label}</div>` : ''}
</div>
<dees-label .label=${this.label}></dees-label>
${this.description ? html`
<div class="description-text">${this.description}</div>
` : ''}
</div>
`;
}