Improved tabs, added tabs-full
This commit is contained in:
parent
4dad862696
commit
e563cb4fd6
2 changed files with 43 additions and 9 deletions
35
src/tabs.css
35
src/tabs.css
|
@ -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
17
web/App.vue
|
@ -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
|
||||
|
|
Loading…
Reference in a new issue