Adrien/actuel-inactuel
1
0
Fork 0
Code Issues 13 Pull requests Projects Releases Packages Wiki Activity Actions

tabs minimized

Browse source
This commit is contained in:
isUnknown 2024-04-07 09:57:55 +02:00
parent 3c0de1603c
commit 7e21e1ffb7
7 changed files with 128 additions and 49 deletions
Download patch file Download diff file Expand all files Collapse all files

16
assets/css/src/tabs.css
View file

@ -5,6 +5,13 @@ button.toggle.open:not(.see-more) {
font-weight: bold;
}
#tabs button.toggle {
transition: margin 0.4s var(--curve-sine);
}
#tabs.minimized button.toggle.left {
margin-left: calc(-4px - var(--width));
}
button.toggle.left::after {
margin-left: var(--unit--horizontal);
}
@ -15,6 +22,9 @@ button.toggle.left.open::after {
content: "-";
}
#tabs.minimized button.toggle.right {
margin-right: calc(-4px - var(--width));
}
button.toggle.right::before {
margin-right: var(--unit--horizontal);
}
@ -26,10 +36,12 @@ button.toggle.right.open::before {
}
#tabs {
position: absolute;
width: 100%;
z-index: 1;
bottom: calc(var(--unit--vertical-relative) * 4);
position: sticky;
top: calc(var(--unit--vertical) * 8);
transform: translateY(calc(0rem - var(--unit--vertical-relative) * 4));
}
.active-tab {

2
assets/css/src/variables.css
View file

@ -21,6 +21,8 @@
--font-weight-light: 200;
--font-weight-bold: 400;
--font-weight-extra-bold: 550;
--curve-sine: cubic-bezier(0.445, 0.05, 0.55, 0.95);
}
@media screen and (min-width: 640px) {