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

feat(form-inputs): Improve form input consistency and auto spacing across inputs and buttons

Browse Source
This commit is contained in:
Juergen Kunz
2025-06-22 20:32:59 +00:00
parent 024d8af40d
commit 4de835474b
11 changed files with 524 additions and 482 deletions
Download Patch File Download Diff File Expand all files Collapse all files

34
ts_web/elements/dees-input-text.ts
View File

@ -100,7 +100,8 @@ export class DeesInputText extends DeesInputBase {
input:focus {
outline: none;
border-bottom: 1px solid ${cssManager.bdTheme( colors.bright.blueActive, colors.dark.blueActive)};
border-bottom: 1px solid
${cssManager.bdTheme(colors.bright.blueActive, colors.dark.blueActive)};
cursor: text;
}
@ -117,6 +118,7 @@ export class DeesInputText extends DeesInputBase {
padding: 4px 0px;
width: 40px;
z-index: 3;
text-align: center;
}
.showPassword:hover {
@ -146,18 +148,20 @@ export class DeesInputText extends DeesInputBase {
letter-spacing: ${this.isPasswordBool ? '1px' : 'normal'};
color: ${this.goBright ? '#333' : '#ccc'};
}
${this.validationText ? css`
.validationContainer {
height: 22px;
opacity: 1;
}
` : css`
.validationContainer {
height: 4px;
padding: 2px !important;
opacity: 0;
}
`}
${this.validationText
? css`
.validationContainer {
height: 22px;
opacity: 1;
}
`
: css`
.validationContainer {
height: 4px;
padding: 2px !important;
opacity: 0;
}
`}
</style>
<div class="input-wrapper">
<dees-label .label=${this.label} .description=${this.description}></dees-label>
@ -168,9 +172,7 @@ export class DeesInputText extends DeesInputBase {
@input="${this.updateValue}"
.disabled=${this.disabled}
/>
<div class="validationContainer">
${this.validationText}
</div>
<div class="validationContainer">${this.validationText}</div>
${this.isPasswordBool
? html`
<div class="showPassword" @click=${this.togglePasswordView}>