mirror of
https://code.castopod.org/adaures/castopod.git
synced 2024-07-15 10:01:13 +02:00
39 lines
912 B
CSS
39 lines
912 B
CSS
@layer components {
|
|
.tabset {
|
|
@apply grid grid-cols-3;
|
|
}
|
|
|
|
.tabset > input[type="radio"] {
|
|
@apply absolute -left-full;
|
|
}
|
|
|
|
.tabset .tab-panel {
|
|
@apply hidden;
|
|
}
|
|
|
|
/* Logic for 3 tabs at most */
|
|
.tabset > input:first-child:checked ~ .tab-panels > .tab-panel:first-child,
|
|
.tabset > input:nth-child(3):checked ~ .tab-panels > .tab-panel:nth-child(2),
|
|
.tabset > input:nth-child(5):checked ~ .tab-panels > .tab-panel:nth-child(3) {
|
|
@apply block;
|
|
}
|
|
|
|
/* Styling */
|
|
.tabset > label {
|
|
@apply relative inline-block w-full px-4 py-3 text-center cursor-pointer opacity-70 hover:opacity-100;
|
|
}
|
|
|
|
.tabset > input:checked + label::after {
|
|
@apply absolute inset-x-0 bottom-0 w-1/3 h-1 mx-auto bg-pine-500;
|
|
content: "";
|
|
}
|
|
|
|
.tabset > input:checked + label {
|
|
@apply font-semibold opacity-100 text-pine-700;
|
|
}
|
|
|
|
.tabset .tab-panels {
|
|
@apply col-span-3 p-6;
|
|
}
|
|
}
|