CodeSpace/Synergy-Legacy
3
1
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity

Added checkboxes

Browse source
This commit is contained in:
Filip Znachor 2023-10-06 10:34:01 +02:00
parent 3a163531b9
commit 43d4f32049
4 changed files with 77 additions and 51 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

11
index.html
View file

@ -72,18 +72,23 @@
</div>
</div>
<div class="radio-row">
<label class="radio">
<div class="cbox-row">
<label class="cbox">
<input type="radio" name="radio-button" checked>
<span>Radio 1</span>
</label>
<label class="radio">
<label class="cbox">
<input type="radio" name="radio-button">
<span>Radio 2</span>
</label>
</div>
<label class="cbox">
<input type="checkbox">
<span>Check me!</span>
</label>
<div class="btn-row">
<button class="btn btn-primary">
Send

68
src/checkbox.css Normal file
View file

@ -0,0 +1,68 @@
label.cbox {position: relative;}
label.cbox > input {
opacity: 0;
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
cursor: pointer;
z-index: 100;
margin: 0;
pointer-events: none;
}
label.cbox > input + * {
display: grid;
grid-template-columns: min-content max-content;
grid-template-areas: "box .";
align-items: center;
cursor: pointer;
gap: 10px;
}
label.cbox > input + *::before {
content: "";
display: block;
width: 1rem;
height: 1rem;
border-radius: 50%;
aspect-ratio: 1 / 1;
border: 2px solid var(--synergy-border);
transition: background .1s, box-shadow .2s;
background: var(--synergy-bg);
box-shadow: 0 1px 2px 0 rgba(0, 0, 0, .1);
grid-area: box;
}
label.cbox > input:checked + *::before {
background: var(--synergy-border-active);
}
label.cbox > input:focus-visible + *::before {
box-shadow: 0 1px 2px 0 rgba(0, 0, 0, .1), 0 0 0 8px var(--synergy-focus-highlight);
}
label.cbox > input[type=checkbox] + *::before {
border-radius: var(--synergy-border-radius);
}
label.cbox > input[type=checkbox] + *::after {
content: "";
grid-area: box;
width: 25%;
height: 50%;
border: 0 solid var(--synergy-bg);
border-width: 0 2px 2px 0;
margin: auto;
transform: rotate(45deg);
z-index: 10;
top: -3.5%;
left: 1.5%;
position: relative;
}
.cbox-row {
display: flex; gap: 25px; flex-wrap: wrap;
}

47
src/radio.css
View file

@ -1,47 +0,0 @@
label.radio {position: relative;}
label.radio > input[type="radio"] {
opacity: 0;
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
cursor: pointer;
z-index: 100;
margin: 0;
pointer-events: none;
}
label.radio > input[type="radio"] + * {
display: flex;
flex-wrap: nowrap;
align-items: center;
cursor: pointer;
gap: 10px;
}
label.radio > input[type="radio"] + *::before {
content: "";
display: block;
width: 1rem;
height: 1rem;
border-radius: 50%;
aspect-ratio: 1 / 1;
border: 2px solid var(--synergy-border);
transition: background .1s, box-shadow .2s;
background: var(--synergy-bg);
box-shadow: 0 1px 2px 0 rgba(0, 0, 0, .1);
}
label.radio > input[type="radio"]:checked + *::before {
background: var(--synergy-border-active);
}
label.radio > input[type="radio"]:focus-visible + *::before {
box-shadow: 0 1px 2px 0 rgba(0, 0, 0, .1), 0 0 0 8px var(--synergy-focus-highlight);
}
.radio-row {
display: flex; gap: 25px; flex-wrap: wrap;
}

2
style.css
View file

@ -2,4 +2,4 @@
@import url("src/button.css");
@import url("src/input.css");
@import url("src/toggle.css");
@import url("src/radio.css");
@import url("src/checkbox.css");