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

64
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%);
} }
@ -1903,11 +1907,11 @@ _:-moz-tree-row(hover), html[dir='rtl'] .autocomplete-menu, html[dir='rtl'] .sel
position: relative; position: relative;
} }
.input > input { .input > input {
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);
@ -1917,25 +1921,25 @@ _:-moz-tree-row(hover), html[dir='rtl'] .autocomplete-menu, html[dir='rtl'] .sel
transition: all 0.2s; transition: all 0.2s;
font-family: "default"; font-family: "default";
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);
} }
.input > input[type='checkbox'] { .input > input[type='checkbox'] {
width: 24px; width: 24px;
height: 24px; height: 24px;
transition-duration: 0.3s; transition-duration: 0.3s;
position: relative; position: relative;
} }
.input > input:checked::before { .input > input:checked::before {
content: '\2713'; content: '\2713';
color: #4ebeec; color: #4ebeec;
position: absolute; position: absolute;
@ -1943,24 +1947,24 @@ _:-moz-tree-row(hover), html[dir='rtl'] .autocomplete-menu, html[dir='rtl'] .sel
top: 50%; top: 50%;
transform: translateY(-50%) translateX(-50%); transform: translateY(-50%) translateX(-50%);
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;
} }
.input-invalid:focus-within:after, .select-invalid:after { .input-invalid:focus-within:after, .select-invalid:after {
content: attr(vmsg); content: attr(vmsg);
@ -2938,14 +2942,14 @@ html[dir='rtl'] .navbar-item[level='3'] > .link {
position: relative; position: relative;
} }
.sitebar-item > i-link { .sitebar-item > i-link {
display: flex; display: flex;
} }
.sitebar-item > i-link:hover { .sitebar-item > i-link:hover {
border-radius: 0; border-radius: 0;
color:var(--menu-item-hover-color); color: var(--menu-item-hover-color);
} }
.sitebar-menu { .sitebar-menu {
position: absolute; position: absolute;
@ -3038,20 +3042,20 @@ html[dir='rtl'] .navbar-item[level='3'] > .link {
flex-direction: row-reverse; flex-direction: row-reverse;
} }
.location > span { .location > span {
background-color: #5de198; background-color: #5de198;
padding: 0px 10px; padding: 0px 10px;
border-radius: 10px; border-radius: 10px;
margin: 0px 2px; margin: 0px 2px;
font-size: 14px; font-size: 14px;
white-space: nowrap; white-space: nowrap;
} }
.location > span:nth-child(1) { .location > span:nth-child(1) {
/*background-color: #eabf33;*/ /*background-color: #eabf33;*/
background-color: #f2d473; background-color: #f2d473;
} }
.codepreview { .codepreview {
display: flex; display: flex;

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");