Added checkboxes
This commit is contained in:
parent
3a163531b9
commit
43d4f32049
4 changed files with 77 additions and 51 deletions
11
index.html
11
index.html
|
@ -72,18 +72,23 @@
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
<div class="radio-row">
|
<div class="cbox-row">
|
||||||
<label class="radio">
|
<label class="cbox">
|
||||||
<input type="radio" name="radio-button" checked>
|
<input type="radio" name="radio-button" checked>
|
||||||
<span>Radio 1</span>
|
<span>Radio 1</span>
|
||||||
</label>
|
</label>
|
||||||
|
|
||||||
<label class="radio">
|
<label class="cbox">
|
||||||
<input type="radio" name="radio-button">
|
<input type="radio" name="radio-button">
|
||||||
<span>Radio 2</span>
|
<span>Radio 2</span>
|
||||||
</label>
|
</label>
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
|
<label class="cbox">
|
||||||
|
<input type="checkbox">
|
||||||
|
<span>Check me!</span>
|
||||||
|
</label>
|
||||||
|
|
||||||
<div class="btn-row">
|
<div class="btn-row">
|
||||||
<button class="btn btn-primary">
|
<button class="btn btn-primary">
|
||||||
Send
|
Send
|
||||||
|
|
68
src/checkbox.css
Normal file
68
src/checkbox.css
Normal 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;
|
||||||
|
}
|
|
@ -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,4 +2,4 @@
|
||||||
@import url("src/button.css");
|
@import url("src/button.css");
|
||||||
@import url("src/input.css");
|
@import url("src/input.css");
|
||||||
@import url("src/toggle.css");
|
@import url("src/toggle.css");
|
||||||
@import url("src/radio.css");
|
@import url("src/checkbox.css");
|
||||||
|
|
Loading…
Reference in a new issue