RanchiMall/standard-ui
3
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

more input customization added with ::part

Browse Source
This commit is contained in:
sairaj mote 2023-08-13 04:28:26 +05:30
parent a809ba93a7
commit 0c11ec1480
2 changed files with 4 additions and 3 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

5
components/dist/input.js vendored
View File

@ -137,6 +137,7 @@ smInput.innerHTML = `
font-family: inherit;
width: 100%;
caret-color: var(--accent-color, teal);
font-weight: inherit;
}
:host([animate]) .input:focus-within .container input,
.animate-placeholder .container input {
@ -221,10 +222,10 @@ smInput.innerHTML = `
}
</style>
<div class="outer-container">
<label part="input" class="input">
<label part="input-wrapper" class="input">
<slot name="icon"></slot>
<div class="container">
<input type="text"/>
<input part="input" type="text"/>
<div part="placeholder" class="label"></div>
<button class="clear hidden" title="Clear" tabindex="-1">
<svg class="icon" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" width="24" height="24"><path fill="none" d="M0 0h24v24H0z"/><path d="M12 22C6.477 22 2 17.523 2 12S6.477 2 12 2s10 4.477 10 10-4.477 10-10 10zm0-11.414L9.172 7.757 7.757 9.172 10.586 12l-2.829 2.828 1.415 1.415L12 13.414l2.828 2.829 1.415-1.415L13.414 12l2.829-2.828-1.415-1.415L12 10.586z"/></svg>

2
components/dist/input.min.js vendored
View File

File diff suppressed because one or more lines are too long