Added radio, toggle and button tab support & more improvements
This commit is contained in:
parent
06bcb6443f
commit
3a163531b9
6 changed files with 40 additions and 5 deletions
|
@ -74,12 +74,12 @@
|
|||
|
||||
<div class="radio-row">
|
||||
<label class="radio">
|
||||
<input type="radio" name="radio-button" value="css" checked />
|
||||
<input type="radio" name="radio-button" checked>
|
||||
<span>Radio 1</span>
|
||||
</label>
|
||||
|
||||
<label class="radio">
|
||||
<input type="radio" name="radio-button" value="acs" />
|
||||
<input type="radio" name="radio-button">
|
||||
<span>Radio 2</span>
|
||||
</label>
|
||||
</div>
|
||||
|
|
|
@ -7,6 +7,8 @@
|
|||
--synergy-border-width: 2px;
|
||||
--synergy-border-radius: 0.375rem;
|
||||
|
||||
--synergy-focus-highlight: rgba(134, 94, 60, 0.25);
|
||||
|
||||
--synergy-label: rgba(134, 94, 60, 0.8);
|
||||
--synergy-label-active: rgba(134, 94, 60, 1);
|
||||
|
||||
|
|
|
@ -15,6 +15,8 @@
|
|||
border-radius: var(--synergy-border-radius);
|
||||
transition: .2s background-color;
|
||||
cursor: pointer;
|
||||
outline: none;
|
||||
transition: box-shadow .2s;
|
||||
}
|
||||
|
||||
.btn:hover {
|
||||
|
@ -31,3 +33,11 @@
|
|||
--synergy-btn-bg-hover: var(--synergy-btn-primary-bg-hover);
|
||||
--synergy-btn-bg-active: var(--synergy-btn-primary-bg-active);
|
||||
}
|
||||
|
||||
.btn:focus-visible {
|
||||
box-shadow: 0 0 0 5px var(--synergy-btn-bg);
|
||||
}
|
||||
|
||||
.btn.btn-primary:focus-visible {
|
||||
box-shadow: 0 0 0 5px var(--synergy-focus-highlight);
|
||||
}
|
|
@ -1,5 +1,16 @@
|
|||
label.radio {position: relative;}
|
||||
|
||||
label.radio > input[type="radio"] {
|
||||
display: none;
|
||||
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"] + * {
|
||||
|
@ -18,7 +29,7 @@ label.radio > input[type="radio"] + *::before {
|
|||
border-radius: 50%;
|
||||
aspect-ratio: 1 / 1;
|
||||
border: 2px solid var(--synergy-border);
|
||||
transition: background .2s;
|
||||
transition: background .1s, box-shadow .2s;
|
||||
background: var(--synergy-bg);
|
||||
box-shadow: 0 1px 2px 0 rgba(0, 0, 0, .1);
|
||||
}
|
||||
|
@ -27,6 +38,10 @@ 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;
|
||||
}
|
|
@ -20,6 +20,7 @@
|
|||
height: 100%;
|
||||
cursor: pointer;
|
||||
z-index: 100;
|
||||
margin: 0;
|
||||
}
|
||||
|
||||
.toggle .indicator {
|
||||
|
@ -44,9 +45,14 @@
|
|||
}
|
||||
|
||||
.toggle input:checked + .indicator::after {
|
||||
background-color: var(--synergy-border-active);
|
||||
background: var(--synergy-border-active);
|
||||
}
|
||||
|
||||
.toggle input:focus-visible + .indicator::after {
|
||||
box-shadow: 0 0 10px 0 var(--synergy-bg), 0 0 0 10px var(--synergy-focus-highlight);
|
||||
}
|
||||
|
||||
|
||||
/* Toggle with label */
|
||||
|
||||
.toggle-text {
|
||||
|
|
|
@ -144,6 +144,8 @@ class Theme {
|
|||
|
||||
variables.push(this.var("border", this.cArgb(this.main, .4)));
|
||||
variables.push(this.var("border-active", this.cArgb(this.main)));
|
||||
|
||||
variables.push(this.var("focus-highlight", this.cArgb(this.main, .25)));
|
||||
|
||||
variables.push(this.var("label", this.cArgb(this.main, .8)));
|
||||
variables.push(this.var("label-active", this.cArgb(this.main)));
|
||||
|
|
Loading…
Reference in a new issue