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

Improved tabs, added tabs-full

Browse source
This commit is contained in:
Filip Znachor 2024-05-02 18:02:23 +02:00
parent 4dad862696
commit e563cb4fd6
2 changed files with 43 additions and 9 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

35
src/tabs.css
View file

@ -1,6 +1,6 @@
.tabs {
display: flex;
gap: 20px;
flex-wrap: wrap;
}
.tabs input {
@ -16,7 +16,7 @@
.tabs div {
position: relative;
padding: 10px 0;
padding: 10px 10px;
font-weight: 700;
transition: color .2s;
}
@ -24,11 +24,11 @@
.tabs div::after {
content: "";
position: absolute;
width: 70%;
width: 60%;
height: var(--synergy-tab-bar-height);
background-color: var(--synergy-border-active);
bottom: 0;
left: 15%;
left: 20%;
transition: all .2s;
opacity: 0;
transform: scaleX(0);
@ -40,8 +40,8 @@
content: "";
position: absolute;
top: 13%;
left: -8px;
width: calc(100% + 16px);
left: 0;
width: 100%;
height: 75%;
opacity: 0;
border-radius: var(--synergy-border-radius);
@ -62,6 +62,25 @@
transform: none;
}
.tabs.offset {
margin: 0 8px;
.tabs.tabs-no-padding {
margin: 0 -10px;
}
.tabs.tabs-full div {
transition: background-color .2s;
border-radius: var(--synergy-border-radius);
}
.tabs.tabs-full div::after {
left: 0;
width: 100%;
border-radius: 0;
}
.tabs.tabs-full div::before {
display: none;
}
.tabs.tabs-full :is(input:focus-visible + div, div:hover) {
background-color: var(--synergy-tab-highlight);
}

17
web/App.vue
View file

@ -71,7 +71,7 @@ import Settings from "./components/Settings.vue";
<span>Check me!</span>
</label>
<div class="tabs offset">
<div class="tabs">
<label>
<input type="radio" name="tabs" checked>
<div>Home</div>
@ -86,6 +86,21 @@ import Settings from "./components/Settings.vue";
</label>
</div>
<div class="tabs tabs-full">
<label>
<input type="radio" name="tabs2" checked>
<div>Home</div>
</label>
<label>
<input type="radio" name="tabs2">
<div>Account</div>
</label>
<label>
<input type="radio" name="tabs2">
<div>Settings</div>
</label>
</div>
<div class="btn-row">
<button class="btn btn-primary">
Send