esiur/iui
2
0
Fork 0
mirror of https://github.com/esiur/iui.git synced 2025-05-06 06:42:58 +00:00
Code Issues Projects Releases Wiki Activity

Merge branch 'main' of https://github.com/esiur/iui

Browse Source
This commit is contained in:
Ahmed Zamil 2024-07-05 17:38:58 +03:00
commit 2d73f0c63c
2 changed files with 77 additions and 72 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

22
css/iui.css
View File

@ -244,13 +244,17 @@ html[dir="rtl"] .textbox-with-label > input:not(:placeholder-shown) + span {
} }
.input > input:focus + span, .input > input:focus + span,
.input > input:not(:placeholder-shown) + span { .input > textarea:focus + span,
.input > input:not(:placeholder-shown) + span,
.input > textarea:not(:placeholder-shown) + span {
opacity: 1; opacity: 1;
transform: scale(0.75) translateY(-40%) translateX(-20px); transform: scale(0.75) translateY(-40%) translateX(-20px);
} }
html[dir="rtl"] .input > input:focus + span, html[dir="rtl"] .input > input:focus + span,
html[dir="rtl"] .input > input:not(:placeholder-shown) + span { html[dir="rtl"] .input > textarea:focus + span,
html[dir="rtl"] .input > input:not(:placeholder-shown) + span,
html[dir="rtl"] .input > textarea:not(:placeholder-shown) + span {
opacity: 1; opacity: 1;
transform: scale(0.75) translateY(-40%) translateX(20%); transform: scale(0.75) translateY(-40%) translateX(20%);
} }
@ -1907,7 +1911,7 @@ _:-moz-tree-row(hover), html[dir='rtl'] .autocomplete-menu, html[dir='rtl'] .sel
width: 100%; width: 100%;
} }
.input > input, .select, .textbox { .input > input, .input > textarea, .select, .textbox {
outline: none; outline: none;
color: var(--textbox-color); color: var(--textbox-color);
border: var(--textbox-border); border: var(--textbox-border);
@ -1919,11 +1923,11 @@ _:-moz-tree-row(hover), html[dir='rtl'] .autocomplete-menu, html[dir='rtl'] .sel
font-size: 1em; font-size: 1em;
} }
.input > input { .input > input, .input > textarea {
padding: 2px 5px; padding: 2px 5px;
} }
.input > input:disabled { .input > input:disabled, .input > textarea:disabled {
background: var(--textbox-background-disabled); background: var(--textbox-background-disabled);
} }
@ -1945,20 +1949,20 @@ _:-moz-tree-row(hover), html[dir='rtl'] .autocomplete-menu, html[dir='rtl'] .sel
font-weight: bold; font-weight: bold;
} }
.input > input:active, .textbox:active { .input > input:active, .input > textarea:active, .textbox:active {
border: 1px solid #34495E; border: 1px solid #34495E;
} }
.input > input:focus, .textbox:focus { .input > input:focus, .input > textarea:focus, .textbox:focus {
border-color: var(--textbox-border-color-focus); border-color: var(--textbox-border-color-focus);
box-shadow: var(--textbox-box-shadow-focus); box-shadow: var(--textbox-box-shadow-focus);
} }
.input-invalid > input { .input-invalid > input, .input-invalid > textarea {
border-color: var(--textbox-border-color-invalid) !important; border-color: var(--textbox-border-color-invalid) !important;
} }
.input-invalid > input:focus { .input-invalid > input:focus, .input-invalid > textarea:focus {
box-shadow: var(--textbox-box-shadow-invalid) !important; box-shadow: var(--textbox-box-shadow-invalid) !important;
} }

9
src/UI/Input.js
View File

@ -55,7 +55,11 @@ export default IUI.module(
this._span = document.createElement("span"); this._span = document.createElement("span");
this._span.innerHTML = this.getAttribute("caption"); this._span.innerHTML = this.getAttribute("caption");
this._input = document.createElement("input"); let type = this.hasAttribute("type")
? this.getAttribute("type").toLowerCase()
: "text";
this._input = document.createElement(type == "multiline" ? "textarea" : "input");
this._input.placeholder = this.getAttribute("placeholder") || ""; this._input.placeholder = this.getAttribute("placeholder") || "";
let self = this; let self = this;
@ -69,9 +73,6 @@ export default IUI.module(
self._emit("change", { value: self.value }); self._emit("change", { value: self.value });
}); });
this.type = this.hasAttribute("type")
? this.getAttribute("type").toLowerCase()
: "text";
this.accept = this.getAttribute("accept"); this.accept = this.getAttribute("accept");