CodeSpace/Synergy
2
1
Fork 0
Code Issues Pull requests Packages Projects Releases Wiki Activity

Added tabs component & bugfixes

Browse source
This commit is contained in:
Filip Znachor 2023-10-22 11:26:07 +02:00
parent 1144d4b8cd
commit 9479357b06
4 changed files with 80 additions and 10 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

18
index.html
View file

@ -113,12 +113,12 @@
<div class="cbox-row">
<label class="cbox">
<input type="radio" name="radio-button" checked>
<input type="radio" name="radios" checked>
<span>Radio 1</span>
</label>
<label class="cbox">
<input type="radio" name="radio-button">
<input type="radio" name="radios">
<span>Radio 2</span>
</label>
</div>
@ -128,18 +128,18 @@
<span>Check me!</span>
</label>
<div class="tabs">
<div class="tabs offset">
<label>
<input type="radio" name="tabs-a" checked>
<div>Ahoj</div>
<input type="radio" name="tabs" checked>
<div>Home</div>
</label>
<label>
<input type="radio" name="tabs-a">
<div>Ahoj</div>
<input type="radio" name="tabs">
<div>Account</div>
</label>
<label>
<input type="radio" name="tabs-a">
<div>Ahoj</div>
<input type="radio" name="tabs">
<div>Settings</div>
</label>
</div>

67
src/tabs.css Normal file
View file

@ -0,0 +1,67 @@
.tabs {
display: flex;
gap: 20px;
}
.tabs input {
position: absolute;
opacity: 0;
pointer-events: none;
visibility: none;
}
.tabs label {
cursor: pointer;
}
.tabs div {
position: relative;
padding: 10px 0;
font-weight: 700;
transition: color .2s;
}
.tabs div::after {
content: "";
position: absolute;
width: 70%;
height: var(--synergy-border-width);
background-color: var(--synergy-border-active);
bottom: 0;
left: 15%;
transition: all .2s;
opacity: 0;
transform: scaleX(0);
border-radius: 10px;
}
.tabs div::before {
z-index: -1;
content: "";
position: absolute;
top: 13%;
left: -8px;
width: calc(100% + 16px);
height: 75%;
opacity: 0;
border-radius: var(--synergy-border-radius);
background-color: var(--synergy-tab-highlight);
transition: opacity .2s;
}
.tabs :is(input:focus-visible + div, div:hover)::before {
opacity: 1;
}
.tabs :is(input:checked + div, div:hover) {
color: var(--synergy-border-active);
}
.tabs input:checked + div::after {
opacity: 1;
transform: none;
}
.tabs.offset {
margin: 0 8px;
}

1
style.css
View file

@ -3,3 +3,4 @@
@import url("src/input.css");
@import url("src/toggle.css");
@import url("src/checkbox.css");
@import url("src/tabs.css");

4
web/lib.ts
View file

@ -15,6 +15,7 @@ export namespace Exporter {
{name: "Fields", file: "input", enabled: true},
{name: "Toggles", file: "toggle", enabled: true},
{name: "Checkboxes and radios", file: "checkbox", enabled: true},
{name: "Tabs", file: "tabs", enabled: true},
]);
interface Result {
@ -175,7 +176,8 @@ export class Theme {
variables.push(this.var("border", this.cAlpha(this.main, .4)));
variables.push(this.var("border-active", this.cAlpha(this.main)));
variables.push(this.var("focus-highlight", this.cMix(this.main, this.bg, .25)));
variables.push(this.var("focus-highlight", this.cAlpha(this.main, .25)));
variables.push(this.var("tab-highlight", this.cAlpha(this.main, .1)));
variables.push(this.var("label", this.cMix(this.main, this.bg, .8)));
variables.push(this.var("label-active", this.cMix(this.main, this.bg)));