mirror_css/98.css
1
0
Fork 0
mirror of https://github.com/jdan/98.css.git synced 2025-01-17 12:48:32 +01:00
Code Issues Releases Wiki Activity

radio buttons

Browse Source
This commit is contained in:
Jordan Scales 2020-04-17 14:36:38 -04:00
parent b464479c37
commit 38e958620b
6 changed files with 87 additions and 2 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

29
docs/index.html
View File

@ -33,15 +33,20 @@
<fieldset>
<legend>I think it's</legend>
<div class="field-row">
<input id="cool" type="radio" name="answer" value="cool">
<input id="cool" type="radio" value="cool" name="answer">
<label for="cool">Cool</label>
</div>
<div class="field-row">
<input id="meh" type="radio" name="answer" value="meh">
<input id="meh" type="radio" value="meh" name="answer">
<label for="meh">Meh</label>
</div>
<div class="field-row">
<input checked disabled id="idk" type="radio" value="idk" name="answer">
<label for="idk">Idk</label>
</div>
<div class="field-row-stacked">
<label for="reason">Reason:</label>
<select>
@ -53,6 +58,26 @@
</div>
</fieldset>
<fieldset>
<legend>Checkboxes</legend>
<div class="field-row">
<input checked id="option1" type="checkbox">
<label for="option1">Option 1</label>
</div>
<div class="field-row">
<input id="option2" type="checkbox">
<label for="option2">Option 2</label>
</div>
<div class="field-row">
<input checked disabled id="option2" type="checkbox">
<label for="option2">Option 2</label>
</div>
<div class="field-row">
<input disabled id="option2" type="checkbox">
<label for="option2">Option 2</label>
</div>
</fieldset>
<section class="align-right">
<button>OK</button>
<button>Cancel</button>

7
radio-border-disabled.svg Normal file
View File

@ -0,0 +1,7 @@
<svg width="12" height="12" viewBox="0 0 12 12" fill="none" xmlns="http://www.w3.org/2000/svg">
<path fill-rule="evenodd" clip-rule="evenodd" d="M8 0H4V1H2V2H1V4H0V8H1V10H2V8H1V4H2V2H4V1H8V2H10V1H8V0Z" fill="#808080"/>
<path fill-rule="evenodd" clip-rule="evenodd" d="M8 1H4V2H2V3V4H1V8H2V9H3V8H2V4H3V3H4V2H8V3H10V2H8V1Z" fill="black"/>
<path fill-rule="evenodd" clip-rule="evenodd" d="M9 3H10V4H9V3ZM10 8V4H11V8H10ZM8 10V9H9V8H10V9V10H8ZM4 10V11H8V10H4ZM4 10V9H2V10H4Z" fill="#DFDFDF"/>
<path fill-rule="evenodd" clip-rule="evenodd" d="M11 2H10V4H11V8H10V10H8V11H4V10H2V11H4V12H8V11H10V10H11V8H12V4H11V2Z" fill="white"/>
<path fill-rule="evenodd" clip-rule="evenodd" d="M4 2H8V3H9V4H10V8H9V9H8V10H4V9H3V8H2V4H3V3H4V2Z" fill="#C0C0C0"/>
</svg>
Side by Side

After

Width:  |  Height:  |  Size: 744 B

8
radio-border.svg Normal file
View File

@ -0,0 +1,8 @@
<svg width="12" height="12" viewBox="0 0 12 12" fill="none" xmlns="http://www.w3.org/2000/svg">
<path fill-rule="evenodd" clip-rule="evenodd" d="M8 0H4V1H2V2H1V4H0V8H1V10H2V8H1V4H2V2H4V1H8V2H10V1H8V0Z" fill="#808080"/>
<path fill-rule="evenodd" clip-rule="evenodd" d="M8 1H4V2H2V3V4H1V8H2V9H3V8H2V4H3V3H4V2H8V3H10V2H8V1Z" fill="black"/>
<path fill-rule="evenodd" clip-rule="evenodd" d="M9 3H10V4H9V3ZM10 8V4H11V8H10ZM8 10V9H9V8H10V9V10H8ZM4 10V11H8V10H4ZM4 10V9H2V10H4Z" fill="#DFDFDF"/>
<path fill-rule="evenodd" clip-rule="evenodd" d="M11 2H10V4H11V8H10V10H8V11H4V10H2V11H4V12H8V11H10V10H11V8H12V4H11V2Z" fill="white"/>
<path fill-rule="evenodd" clip-rule="evenodd" d="M4 2H8V3H9V4H10V8H9V9H8V10H4V9H3V8H2V4H3V3H4V2Z" fill="white"/>
</svg>
Side by Side

After

Width:  |  Height:  |  Size: 743 B

3
radio-dot-disabled.svg Normal file
View File

@ -0,0 +1,3 @@
<svg width="4" height="4" viewBox="0 0 4 4" fill="none" xmlns="http://www.w3.org/2000/svg">
<path fill-rule="evenodd" clip-rule="evenodd" d="M3 0H1V1H0V2V3H1V4H3V3H4V2V1H3V0Z" fill="#808080"/>
</svg>
Side by Side

After

Width:  |  Height:  |  Size: 200 B

3
radio-dot.svg Normal file
View File

@ -0,0 +1,3 @@
<svg width="4" height="4" viewBox="0 0 4 4" fill="none" xmlns="http://www.w3.org/2000/svg">
<path fill-rule="evenodd" clip-rule="evenodd" d="M3 0H1V1H0V2V3H1V4H3V3H4V2V1H3V0Z" fill="black"/>
</svg>
Side by Side

After

Width:  |  Height:  |  Size: 198 B

39
style.css
View File

@ -11,6 +11,7 @@
/* Spacing */
--element-spacing: 8px;
--grouped-element-spacing: 4px;
--radio-label-spacing: 6px;
/* Borders */
--border-width: 1px;
@ -169,3 +170,41 @@ legend {
.field-row-stacked * + * {
margin-top: var(--grouped-element-spacing);
}
label {
display: flex;
align-items: center;
}
input[type="radio"]:focus + label {
outline: 1px dotted #000000;
}
input[type="radio"] {
display: none;
}
input[type="radio"] + label {
position: relative;
}
input[type="radio"] + label::before {
content: "";
display: inline-block;
width: 12px;
height: 12px;
margin-right: var(--radio-label-spacing);
background: url("./radio-border.svg");
}
input[type="radio"]:checked + label::after {
content: "";
display: block;
width: 4px;
height: 4px;
top: 4px;
left: 4px;
position: absolute;
background: url("./radio-dot.svg");
}
input[type="radio"][disabled] + label::before {
background: url("./radio-border-disabled.svg");
}
input[type="radio"][disabled]:checked + label::after {
background: url("./radio-dot-disabled.svg");
}