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 {
|
.tabs {
|
||||||
display: flex;
|
display: flex;
|
||||||
gap: 20px;
|
flex-wrap: wrap;
|
||||||
}
|
}
|
||||||
|
|
||||||
.tabs input {
|
.tabs input {
|
||||||
|
@ -16,7 +16,7 @@
|
||||||
|
|
||||||
.tabs div {
|
.tabs div {
|
||||||
position: relative;
|
position: relative;
|
||||||
padding: 10px 0;
|
padding: 10px 10px;
|
||||||
font-weight: 700;
|
font-weight: 700;
|
||||||
transition: color .2s;
|
transition: color .2s;
|
||||||
}
|
}
|
||||||
|
@ -24,11 +24,11 @@
|
||||||
.tabs div::after {
|
.tabs div::after {
|
||||||
content: "";
|
content: "";
|
||||||
position: absolute;
|
position: absolute;
|
||||||
width: 70%;
|
width: 60%;
|
||||||
height: var(--synergy-tab-bar-height);
|
height: var(--synergy-tab-bar-height);
|
||||||
background-color: var(--synergy-border-active);
|
background-color: var(--synergy-border-active);
|
||||||
bottom: 0;
|
bottom: 0;
|
||||||
left: 15%;
|
left: 20%;
|
||||||
transition: all .2s;
|
transition: all .2s;
|
||||||
opacity: 0;
|
opacity: 0;
|
||||||
transform: scaleX(0);
|
transform: scaleX(0);
|
||||||
|
@ -40,8 +40,8 @@
|
||||||
content: "";
|
content: "";
|
||||||
position: absolute;
|
position: absolute;
|
||||||
top: 13%;
|
top: 13%;
|
||||||
left: -8px;
|
left: 0;
|
||||||
width: calc(100% + 16px);
|
width: 100%;
|
||||||
height: 75%;
|
height: 75%;
|
||||||
opacity: 0;
|
opacity: 0;
|
||||||
border-radius: var(--synergy-border-radius);
|
border-radius: var(--synergy-border-radius);
|
||||||
|
@ -62,6 +62,25 @@
|
||||||
transform: none;
|
transform: none;
|
||||||
}
|
}
|
||||||
|
|
||||||
.tabs.offset {
|
.tabs.tabs-no-padding {
|
||||||
margin: 0 8px;
|
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>
|
<span>Check me!</span>
|
||||||
</label>
|
</label>
|
||||||
|
|
||||||
<div class="tabs offset">
|
<div class="tabs">
|
||||||
<label>
|
<label>
|
||||||
<input type="radio" name="tabs" checked>
|
<input type="radio" name="tabs" checked>
|
||||||
<div>Home</div>
|
<div>Home</div>
|
||||||
|
@ -86,6 +86,21 @@ import Settings from "./components/Settings.vue";
|
||||||
</label>
|
</label>
|
||||||
</div>
|
</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">
|
<div class="btn-row">
|
||||||
<button class="btn btn-primary">
|
<button class="btn btn-primary">
|
||||||
Send
|
Send
|
||||||
|
|
Loading…
Reference in a new issue