116 lines
2.6 KiB
CSS
116 lines
2.6 KiB
CSS
.index-panel {
|
|
@apply m-0 border-primary border mb-2;
|
|
/* max-height: 80vh;
|
|
overflow-y: auto; */
|
|
|
|
&__header {
|
|
@apply p-4 md:p-6 !pb-0 flex gap-4 border-b border-gray-300;
|
|
|
|
button {
|
|
@apply pb-6 text-base md:text-lg text-carhop-gray opacity-60 relative hidden;
|
|
box-sizing: border-box;
|
|
@apply flex items-center gap-2;
|
|
.icon {
|
|
@apply w-7 h-7 block;
|
|
}
|
|
}
|
|
button#mobile-open-toggle {
|
|
@apply ml-auto !opacity-100;
|
|
.icon {
|
|
transition: transform 0.3s ease-in-out;
|
|
@apply h-10 w-10;
|
|
}
|
|
}
|
|
button[aria-selected='true'] {
|
|
@apply text-primary opacity-100;
|
|
.icon {
|
|
@apply filter-primary;
|
|
}
|
|
&:after {
|
|
@apply bg-primary;
|
|
content: '';
|
|
display: block;
|
|
width: 100%;
|
|
height: 3px;
|
|
position: absolute;
|
|
bottom: -1px;
|
|
left: 0;
|
|
}
|
|
}
|
|
}
|
|
|
|
&__content {
|
|
@apply p-4;
|
|
|
|
overflow-wrap: anywhere;
|
|
ul[aria-hidden='true'] {
|
|
@apply hidden;
|
|
}
|
|
ul.sommaire-index,
|
|
ul.footnotes-index {
|
|
@apply bg-white overflow-y-auto max-h-[200px] lg:max-h-[calc(80vh-80px)] p-6 mb-0;
|
|
}
|
|
}
|
|
|
|
.sommaire-index a:hover,
|
|
.footnotes-index a:hover {
|
|
@apply text-carhop-green-800 underline-offset-8 underline decoration-neutral-400;
|
|
text-decoration-thickness: 1px;
|
|
}
|
|
|
|
@media (max-width: 1024px) {
|
|
@apply bg-red-700 relative z-50;
|
|
|
|
.index-panel__header {
|
|
border-bottom: 0.25px solid rgba(255, 255, 255, 0.4);
|
|
button {
|
|
@apply text-white;
|
|
|
|
img {
|
|
@apply filter-white;
|
|
}
|
|
&[aria-selected='true'] {
|
|
@apply text-white opacity-100;
|
|
.icon {
|
|
@apply filter-white opacity-100;
|
|
}
|
|
&:after {
|
|
@apply bg-white;
|
|
}
|
|
}
|
|
}
|
|
}
|
|
}
|
|
}
|
|
|
|
@media (max-width: 1024px) {
|
|
button#mobile-open-toggle {
|
|
display: block !important;
|
|
}
|
|
.index-panel__content {
|
|
transition: height 0.3s ease-in-out;
|
|
}
|
|
|
|
.index-panel[data-mobile-open='false'] .index-panel__content {
|
|
@apply h-0 py-2;
|
|
ul.sommaire-index,
|
|
ul.footnotes-index {
|
|
@apply hidden;
|
|
}
|
|
}
|
|
|
|
.index-panel[data-mobile-open='true'] .index-panel__header {
|
|
@apply h-fit py-4;
|
|
button#mobile-open-toggle {
|
|
img {
|
|
transition: transform 0.3s ease-in-out;
|
|
@apply rotate-180;
|
|
}
|
|
}
|
|
ul.sommaire-index,
|
|
ul.footnotes-index {
|
|
@apply block;
|
|
}
|
|
}
|
|
}
|