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">
|
<div class="cbox-row">
|
||||||
<label class="cbox">
|
<label class="cbox">
|
||||||
<input type="radio" name="radio-button" checked>
|
<input type="radio" name="radios" checked>
|
||||||
<span>Radio 1</span>
|
<span>Radio 1</span>
|
||||||
</label>
|
</label>
|
||||||
|
|
||||||
<label class="cbox">
|
<label class="cbox">
|
||||||
<input type="radio" name="radio-button">
|
<input type="radio" name="radios">
|
||||||
<span>Radio 2</span>
|
<span>Radio 2</span>
|
||||||
</label>
|
</label>
|
||||||
</div>
|
</div>
|
||||||
|
@ -128,18 +128,18 @@
|
||||||
<span>Check me!</span>
|
<span>Check me!</span>
|
||||||
</label>
|
</label>
|
||||||
|
|
||||||
<div class="tabs">
|
<div class="tabs offset">
|
||||||
<label>
|
<label>
|
||||||
<input type="radio" name="tabs-a" checked>
|
<input type="radio" name="tabs" checked>
|
||||||
<div>Ahoj</div>
|
<div>Home</div>
|
||||||
</label>
|
</label>
|
||||||
<label>
|
<label>
|
||||||
<input type="radio" name="tabs-a">
|
<input type="radio" name="tabs">
|
||||||
<div>Ahoj</div>
|
<div>Account</div>
|
||||||
</label>
|
</label>
|
||||||
<label>
|
<label>
|
||||||
<input type="radio" name="tabs-a">
|
<input type="radio" name="tabs">
|
||||||
<div>Ahoj</div>
|
<div>Settings</div>
|
||||||
</label>
|
</label>
|
||||||
</div>
|
</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/input.css");
|
||||||
@import url("src/toggle.css");
|
@import url("src/toggle.css");
|
||||||
@import url("src/checkbox.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: "Fields", file: "input", enabled: true},
|
||||||
{name: "Toggles", file: "toggle", enabled: true},
|
{name: "Toggles", file: "toggle", enabled: true},
|
||||||
{name: "Checkboxes and radios", file: "checkbox", enabled: true},
|
{name: "Checkboxes and radios", file: "checkbox", enabled: true},
|
||||||
|
{name: "Tabs", file: "tabs", enabled: true},
|
||||||
]);
|
]);
|
||||||
|
|
||||||
interface Result {
|
interface Result {
|
||||||
|
@ -175,7 +176,8 @@ export class Theme {
|
||||||
variables.push(this.var("border", this.cAlpha(this.main, .4)));
|
variables.push(this.var("border", this.cAlpha(this.main, .4)));
|
||||||
variables.push(this.var("border-active", this.cAlpha(this.main)));
|
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", this.cMix(this.main, this.bg, .8)));
|
||||||
variables.push(this.var("label-active", this.cMix(this.main, this.bg)));
|
variables.push(this.var("label-active", this.cMix(this.main, this.bg)));
|
||||||
|
|
Loading…
Reference in a new issue