castopod/app/Resources/styles/tabs.css
Yassine Doghri 37c54d2477 feat: build hashed static files to renew browser cache
- replace rollup config with vitejs
- use vite dev server during development to take advantage of
hot module replacement (HMR)
- add vite service using Vite library to load css and js assets
- update package.json scripts and remove unnecessary
dependencies
- update scripts/bundle-prepare.sh

closes #107
2021-07-12 17:47:56 +00:00

38 lines
832 B
CSS

@layer components {
.tabset {
@apply grid grid-cols-2;
}
.tabset > input[type="radio"] {
@apply absolute -left-full;
}
.tabset .tab-panel {
@apply hidden;
}
/* Logic for 2 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) {
@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/2 h-1 mx-auto bg-pine-700;
content: "";
}
.tabset > input:checked + label {
@apply font-semibold opacity-100 text-pine-700;
}
.tabset .tab-panels {
@apply col-span-2 p-6;
}
}