Added tabs component & bugfixes
This commit is contained in:
parent
1144d4b8cd
commit
9479357b06
4 changed files with 80 additions and 10 deletions
18
index.html
18
index.html
|
@ -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
67
src/tabs.css
Normal 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;
|
||||
}
|
|
@ -3,3 +3,4 @@
|
|||
@import url("src/input.css");
|
||||
@import url("src/toggle.css");
|
||||
@import url("src/checkbox.css");
|
||||
@import url("src/tabs.css");
|
||||
|
|
|
@ -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)));
|
||||
|
|
Loading…
Reference in a new issue