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">
|
<div class="radio-row">
|
||||||
<label class="radio">
|
<label class="radio">
|
||||||
<input type="radio" name="radio-button" value="css" checked />
|
<input type="radio" name="radio-button" checked>
|
||||||
<span>Radio 1</span>
|
<span>Radio 1</span>
|
||||||
</label>
|
</label>
|
||||||
|
|
||||||
<label class="radio">
|
<label class="radio">
|
||||||
<input type="radio" name="radio-button" value="acs" />
|
<input type="radio" name="radio-button">
|
||||||
<span>Radio 2</span>
|
<span>Radio 2</span>
|
||||||
</label>
|
</label>
|
||||||
</div>
|
</div>
|
||||||
|
|
|
@ -7,6 +7,8 @@
|
||||||
--synergy-border-width: 2px;
|
--synergy-border-width: 2px;
|
||||||
--synergy-border-radius: 0.375rem;
|
--synergy-border-radius: 0.375rem;
|
||||||
|
|
||||||
|
--synergy-focus-highlight: rgba(134, 94, 60, 0.25);
|
||||||
|
|
||||||
--synergy-label: rgba(134, 94, 60, 0.8);
|
--synergy-label: rgba(134, 94, 60, 0.8);
|
||||||
--synergy-label-active: rgba(134, 94, 60, 1);
|
--synergy-label-active: rgba(134, 94, 60, 1);
|
||||||
|
|
||||||
|
|
|
@ -15,6 +15,8 @@
|
||||||
border-radius: var(--synergy-border-radius);
|
border-radius: var(--synergy-border-radius);
|
||||||
transition: .2s background-color;
|
transition: .2s background-color;
|
||||||
cursor: pointer;
|
cursor: pointer;
|
||||||
|
outline: none;
|
||||||
|
transition: box-shadow .2s;
|
||||||
}
|
}
|
||||||
|
|
||||||
.btn:hover {
|
.btn:hover {
|
||||||
|
@ -31,3 +33,11 @@
|
||||||
--synergy-btn-bg-hover: var(--synergy-btn-primary-bg-hover);
|
--synergy-btn-bg-hover: var(--synergy-btn-primary-bg-hover);
|
||||||
--synergy-btn-bg-active: var(--synergy-btn-primary-bg-active);
|
--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"] {
|
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"] + * {
|
label.radio > input[type="radio"] + * {
|
||||||
|
@ -18,7 +29,7 @@ label.radio > input[type="radio"] + *::before {
|
||||||
border-radius: 50%;
|
border-radius: 50%;
|
||||||
aspect-ratio: 1 / 1;
|
aspect-ratio: 1 / 1;
|
||||||
border: 2px solid var(--synergy-border);
|
border: 2px solid var(--synergy-border);
|
||||||
transition: background .2s;
|
transition: background .1s, box-shadow .2s;
|
||||||
background: var(--synergy-bg);
|
background: var(--synergy-bg);
|
||||||
box-shadow: 0 1px 2px 0 rgba(0, 0, 0, .1);
|
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);
|
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 {
|
.radio-row {
|
||||||
display: flex; gap: 25px; flex-wrap: wrap;
|
display: flex; gap: 25px; flex-wrap: wrap;
|
||||||
}
|
}
|
|
@ -20,6 +20,7 @@
|
||||||
height: 100%;
|
height: 100%;
|
||||||
cursor: pointer;
|
cursor: pointer;
|
||||||
z-index: 100;
|
z-index: 100;
|
||||||
|
margin: 0;
|
||||||
}
|
}
|
||||||
|
|
||||||
.toggle .indicator {
|
.toggle .indicator {
|
||||||
|
@ -44,9 +45,14 @@
|
||||||
}
|
}
|
||||||
|
|
||||||
.toggle input:checked + .indicator::after {
|
.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 with label */
|
||||||
|
|
||||||
.toggle-text {
|
.toggle-text {
|
||||||
|
|
|
@ -145,6 +145,8 @@ class Theme {
|
||||||
variables.push(this.var("border", this.cArgb(this.main, .4)));
|
variables.push(this.var("border", this.cArgb(this.main, .4)));
|
||||||
variables.push(this.var("border-active", this.cArgb(this.main)));
|
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", this.cArgb(this.main, .8)));
|
||||||
variables.push(this.var("label-active", this.cArgb(this.main)));
|
variables.push(this.var("label-active", this.cArgb(this.main)));
|
||||||
|
|
||||||
|
|
Loading…
Reference in a new issue