Jingga/cssOMS
1
0
Fork 0
mirror of https://github.com/Karaka-Management/cssOMS.git synced 2026-01-11 11:18:39 +00:00
Code Issues Actions Packages Projects Releases Wiki Activity

add foldable tree view, invalid/valid icons after inputs, sticky divs

Browse Source
This commit is contained in:
Dennis Eichhorn 2023-01-26 21:50:39 +01:00
parent 867c471381
commit ac5d6ad426
5 changed files with 297 additions and 233 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

19
input.scss
View File

@ -66,6 +66,7 @@ input[type="date"],
input[type="number"],
input[type="datetime-local"] {
height: 2rem;
padding-left: .5rem;
}
.inputWrapper {
@ -274,6 +275,24 @@ input::placeholder {
input:invalid {
transition: all 0.5s;
border-color: #f00;
& ~ i.ok {
display: none;
}
& ~ i.error {
display: inline-block;
}
}
input:valid {
& ~ i.ok {
display: inline-block;
}
& ~ i.error {
display: none;
}
}
textarea, .textarea {

2
layout.scss
View File

@ -29,7 +29,7 @@
}
}
.sticky {
div.sticky, section.sticky {
position: sticky;
top: 1rem;
}

40
list.scss
View File

@ -20,3 +20,43 @@ ul.h-list li {
display: inline-block;
margin: 5px 10px 5px 10px;
}
ul.foldable {
list-style-type: none;
margin: 0;
padding: 0;
input[type="checkbox"] {
display: none;
}
.caret {
cursor: pointer;
user-select: none;
&::before {
content: "\25B6";
color: black;
display: inline-block;
margin-right: 6px;
}
}
.nested {
display: none;
}
input[type="checkbox"]:checked {
&~.nested {
display: block;
}
&~.caret::before {
transform: rotate(90deg);
}
}
ul {
list-style-type: none;
}
}

407
styles.css
View File

File diff suppressed because it is too large Load Diff

62
tests/app/foldable.htm Normal file
View File

@ -0,0 +1,62 @@
<html>
<head>
<style>
ul.foldable {
list-style-type: none;
margin: 0;
padding: 0;
}
ul.foldable input[type=checkbox] {
display: none;
}
ul.foldable .caret {
cursor: pointer;
user-select: none;
}
ul.foldable .caret::before {
content: "\25B6";
color: black;
display: inline-block;
margin-right: 6px;
}
ul.foldable .nested {
display: none;
}
ul.foldable input[type=checkbox]:checked ~ .nested {
display: block;
}
ul.foldable input[type=checkbox]:checked ~ .caret::before {
transform: rotate(90deg);
}
ul.foldable ul {
list-style-type: none;
}
</style>
</head>
<body>
<ul class="foldable">
<li><input id="l1-1" type="checkbox" checked>
Beverages
<ul class="nested">
<li>Water</li>
<li>Coffee</li>
<li><input id="l2-1" type="checkbox">
<label class="caret" for="l2-1">Tea</label>
<ul class="nested">
<li>Black Tea</li>
<li>White Tea</li>
<li><input id="l3-1" type="checkbox">
<label class="caret" for="l3-1">Green Tea</label>
<ul class="nested">
<li>Sencha</li>
<li>Gyokuro</li>
<li>Matcha</li>
<li>Pi Lo Chun</li>
</ul>
</li>
</ul>
</li>
</ul>
</li>
</ul>