mirror_css/98.css
1
0
Fork 0
mirror of https://github.com/jdan/98.css.git synced 2025-09-25 05:01:29 +02:00
Code Issues Releases Wiki Activity

Added mixed-value checkbox states

Browse Source
This commit is contained in:
Vincent Langlois
2024-04-26 23:15:43 -04:00
parent ffa29f4cd9
commit c5d209516e
4 changed files with 97 additions and 1 deletions
Download Patch File Download Diff File Expand all files Collapse all files

21
docs/index.html.ejs
View File

@@ -229,6 +229,27 @@
<label for="example${getCurrentId()}">I am inactive but still checked</label>
</div>
`) %>
<p>
Checkboxes can be displayed in a mixed-value, or <code>indeterminate</code>, appearance through JavaScript. This state can also be disabled.
</p>
<%- example(`
<div class="field-row">
<input type="checkbox" id="indeterminate-example-1">
<label for="indeterminate-example">This is a mixed-value / indeterminate checkbox</label>
</div>
<div class="field-row">
<input type="checkbox" disabled id="indeterminate-example-2">
<label for="indeterminate-example">This is a disabled mixed-value / indeterminate checkbox</label>
</div>
<!-- JavaScript -->
<script>
document.getElementById("indeterminate-example-1").indeterminate = true;
document.getElementById("indeterminate-example-2").indeterminate = true;
</script>
`) %>
</div>
</section>

33
icon/checkmark-mixed-value-disabled.svg Normal file
View File

@@ -0,0 +1,33 @@
<svg width="7" height="7" viewBox="0 0 7 7" fill="none" xmlns="http://www.w3.org/2000/svg">
<path fill-rule="evenodd" clip-rule="evenodd" d="M0 0h1v1h-1z" fill="#808080" />
<path fill-rule="evenodd" clip-rule="evenodd" d="M2 0h1v1h-1z" fill="#808080" />
<path fill-rule="evenodd" clip-rule="evenodd" d="M4 0h1v1h-1z" fill="#808080" />
<path fill-rule="evenodd" clip-rule="evenodd" d="M6 0h1v1h-1z" fill="#808080" />
<path fill-rule="evenodd" clip-rule="evenodd" d="M1 1h1v1h-1z" fill="#808080" />
<path fill-rule="evenodd" clip-rule="evenodd" d="M3 1h1v1h-1z" fill="#808080" />
<path fill-rule="evenodd" clip-rule="evenodd" d="M5 1h1v1h-1z" fill="#808080" />
<path fill-rule="evenodd" clip-rule="evenodd" d="M0 2h1v1h-1z" fill="#808080" />
<path fill-rule="evenodd" clip-rule="evenodd" d="M2 2h1v1h-1z" fill="#808080" />
<path fill-rule="evenodd" clip-rule="evenodd" d="M4 2h1v1h-1z" fill="#808080" />
<path fill-rule="evenodd" clip-rule="evenodd" d="M6 2h1v1h-1z" fill="#808080" />
<path fill-rule="evenodd" clip-rule="evenodd" d="M1 3h1v1h-1z" fill="#808080" />
<path fill-rule="evenodd" clip-rule="evenodd" d="M3 3h1v1h-1z" fill="#808080" />
<path fill-rule="evenodd" clip-rule="evenodd" d="M5 3h1v1h-1z" fill="#808080" />
<path fill-rule="evenodd" clip-rule="evenodd" d="M0 4h1v1h-1z" fill="#808080" />
<path fill-rule="evenodd" clip-rule="evenodd" d="M2 4h1v1h-1z" fill="#808080" />
<path fill-rule="evenodd" clip-rule="evenodd" d="M4 4h1v1h-1z" fill="#808080" />
<path fill-rule="evenodd" clip-rule="evenodd" d="M6 4h1v1h-1z" fill="#808080" />
<path fill-rule="evenodd" clip-rule="evenodd" d="M1 5h1v1h-1z" fill="#808080" />
<path fill-rule="evenodd" clip-rule="evenodd" d="M3 5h1v1h-1z" fill="#808080" />
<path fill-rule="evenodd" clip-rule="evenodd" d="M5 5h1v1h-1z" fill="#808080" />
<path fill-rule="evenodd" clip-rule="evenodd" d="M0 6h1v1h-1z" fill="#808080" />
<path fill-rule="evenodd" clip-rule="evenodd" d="M2 6h1v1h-1z" fill="#808080" />
<path fill-rule="evenodd" clip-rule="evenodd" d="M4 6h1v1h-1z" fill="#808080" />
<path fill-rule="evenodd" clip-rule="evenodd" d="M6 6h1v1h-1z" fill="#808080" />
</svg>
Side by Side

After

Width:  |  Height:  |  Size: 2.1 KiB

33
icon/checkmark-mixed-value.svg Normal file
View File

@@ -0,0 +1,33 @@
<svg width="7" height="7" viewBox="0 0 7 7" fill="none" xmlns="http://www.w3.org/2000/svg">
<path fill-rule="evenodd" clip-rule="evenodd" d="M0 0h1v1h-1z" fill="black" />
<path fill-rule="evenodd" clip-rule="evenodd" d="M2 0h1v1h-1z" fill="black" />
<path fill-rule="evenodd" clip-rule="evenodd" d="M4 0h1v1h-1z" fill="black" />
<path fill-rule="evenodd" clip-rule="evenodd" d="M6 0h1v1h-1z" fill="black" />
<path fill-rule="evenodd" clip-rule="evenodd" d="M1 1h1v1h-1z" fill="black" />
<path fill-rule="evenodd" clip-rule="evenodd" d="M3 1h1v1h-1z" fill="black" />
<path fill-rule="evenodd" clip-rule="evenodd" d="M5 1h1v1h-1z" fill="black" />
<path fill-rule="evenodd" clip-rule="evenodd" d="M0 2h1v1h-1z" fill="black" />
<path fill-rule="evenodd" clip-rule="evenodd" d="M2 2h1v1h-1z" fill="black" />
<path fill-rule="evenodd" clip-rule="evenodd" d="M4 2h1v1h-1z" fill="black" />
<path fill-rule="evenodd" clip-rule="evenodd" d="M6 2h1v1h-1z" fill="black" />
<path fill-rule="evenodd" clip-rule="evenodd" d="M1 3h1v1h-1z" fill="black" />
<path fill-rule="evenodd" clip-rule="evenodd" d="M3 3h1v1h-1z" fill="black" />
<path fill-rule="evenodd" clip-rule="evenodd" d="M5 3h1v1h-1z" fill="black" />
<path fill-rule="evenodd" clip-rule="evenodd" d="M0 4h1v1h-1z" fill="black" />
<path fill-rule="evenodd" clip-rule="evenodd" d="M2 4h1v1h-1z" fill="black" />
<path fill-rule="evenodd" clip-rule="evenodd" d="M4 4h1v1h-1z" fill="black" />
<path fill-rule="evenodd" clip-rule="evenodd" d="M6 4h1v1h-1z" fill="black" />
<path fill-rule="evenodd" clip-rule="evenodd" d="M1 5h1v1h-1z" fill="black" />
<path fill-rule="evenodd" clip-rule="evenodd" d="M3 5h1v1h-1z" fill="black" />
<path fill-rule="evenodd" clip-rule="evenodd" d="M5 5h1v1h-1z" fill="black" />
<path fill-rule="evenodd" clip-rule="evenodd" d="M0 6h1v1h-1z" fill="black" />
<path fill-rule="evenodd" clip-rule="evenodd" d="M2 6h1v1h-1z" fill="black" />
<path fill-rule="evenodd" clip-rule="evenodd" d="M4 6h1v1h-1z" fill="black" />
<path fill-rule="evenodd" clip-rule="evenodd" d="M6 6h1v1h-1z" fill="black" />
</svg>
Side by Side

After

Width:  |  Height:  |  Size: 2.1 KiB

11
style.css
View File

@@ -451,7 +451,8 @@ input[type="checkbox"]:active + label::before {
background: var(--surface);
}
input[type="checkbox"]:checked + label::after {
input[type="checkbox"]:checked + label::after,
input[type="checkbox"]:indeterminate + label::after {
content: "";
display: block;
width: var(--checkmark-width);
@@ -463,6 +464,10 @@ input[type="checkbox"]:checked + label::after {
background: svg-load("./icon/checkmark.svg");
}
input[type="checkbox"]:indeterminate + label::after {
background: svg-load("./icon/checkmark-mixed-value.svg");
}
input[type="checkbox"][disabled] + label::before {
background: var(--surface);
}
@@ -471,6 +476,10 @@ input[type="checkbox"][disabled]:checked + label::after {
background: svg-load("./icon/checkmark-disabled.svg");
}
input[type="checkbox"][disabled]:indeterminate + label::after {
background: svg-load("./icon/checkmark-mixed-value-disabled.svg");
}
input[type="text"],
input[type="password"],
input[type="email"],