actuel-inactuel/assets/css/src/tabs.css

102 lines
2 KiB
CSS
Raw Normal View History

2024-03-09 11:27:10 +01:00
.toggle-btns {
position: sticky;
}
2024-03-10 19:24:24 +01:00
button.toggle.open:not(.see-more) {
2024-01-26 11:03:42 +01:00
font-weight: bold;
}
2024-04-07 09:57:55 +02:00
#tabs button.toggle {
transition: margin 0.4s var(--curve-sine);
}
#tabs.minimized button.toggle.left {
margin-left: calc(-4px - var(--width));
}
2024-01-26 11:03:42 +01:00
button.toggle.left::after {
margin-left: var(--unit--horizontal);
}
button.toggle.left.close::after {
content: "+";
}
button.toggle.left.open::after {
content: "-";
}
2024-04-07 09:57:55 +02:00
#tabs.minimized button.toggle.right {
margin-right: calc(-4px - var(--width));
}
2024-01-26 11:03:42 +01:00
button.toggle.right::before {
margin-right: var(--unit--horizontal);
}
button.toggle.right.close::before {
content: "+";
}
button.toggle.right.open::before {
content: "-";
}
#tabs {
width: 100%;
2024-04-06 10:08:45 +02:00
z-index: 1;
2024-04-07 09:57:55 +02:00
position: sticky;
top: calc(var(--unit--vertical) * 8);
transform: translateY(calc(0rem - var(--unit--vertical-relative) * 4));
}
2024-03-09 11:27:10 +01:00
.active-tab {
position: absolute;
max-height: calc(var(--unit--vertical-relative) * 17);
2024-03-09 11:27:10 +01:00
overflow: auto;
2024-03-12 17:38:53 +01:00
transition: max-height 0.5s ease-in-out;
padding: var(--unit--vertical) 0;
}
2024-04-06 10:08:45 +02:00
/* ================= SCROLLBAR ================= */
/* Works on Firefox */
.active-tab {
scrollbar-width: thin;
scrollbar-color: #fff transparent;
}
/* Works on Chrome, Edge, and Safari */
.active-tab::-webkit-scrollbar {
width: 3px;
height: auto;
}
.active-tab::-webkit-scrollbar-track {
background: transparent;
}
.active-tab::-webkit-scrollbar-thumb {
background-color: #fff;
border-radius: 1px;
border: none;
}
2024-03-10 19:24:24 +01:00
.texts__year.short .year__edito {
display: -webkit-box;
-webkit-box-orient: vertical;
2024-03-12 17:41:59 +01:00
-webkit-line-clamp: 5;
2024-03-10 19:24:24 +01:00
overflow: hidden;
}
.texts__year .see-more {
width: 100%;
margin-top: calc(var(--unit--vertical) / 2);
}
@media screen and (min-width: 640px) {
#home #tabs {
margin-top: calc(0px - (10 * var(--unit--vertical)));
}
button.toggle.left::after {
margin-left: calc(var(--unit--horizontal) / 2);
}
button.toggle.right::before {
margin-right: calc(var(--unit--horizontal) / 2);
}
}