sergio/saladeaula.digital
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

improve accordtion

Browse Source
This commit is contained in:
Sérgio Rafael Siqueira
2025-04-29 12:42:52 -03:00
parent f535e1aa25
commit 52d0e4755f
5 changed files with 14 additions and 9 deletions
Download Patch File Download Diff File Expand all files Collapse all files

4
superpage/src/components/Accordion/Header.astro
View File

@@ -4,12 +4,12 @@ import { Icon } from "astro-icon/components";
<div
class="cursor-pointer flex items-center justify-between px-5 gap-3 py-3"
x-on:click="open = !open"
x-on:click="open = ! open"
>
<slot />
<Icon
name="chevron-down"
class="size-4 fill-white/60 group-data-[hover]:fill-white/50 shrink-0"
class="size-4 fill-white/60 group-data-[hover]:fill-white/50 shrink-0 transition duration-300"
:class="{'-rotate-180': open === true}"
/>
</div>

3
superpage/src/components/Accordion/Item.astro
View File

@@ -1,7 +1,8 @@
<div
x-data="{ open: false }"
class="bg-white/10 rounded-lg w-full"
class="bg-white/10 w-full [&:not([aria-expanded='true']):hover]:outline rounded-lg outline-white/15"
:class="{'bg-white/15': open === true}"
x-bind:aria-expanded="open"
>
<slot />
</div>

8
superpage/src/components/Course/Plans.astro
View File

@@ -3,13 +3,13 @@ import Container from "~/components/Container.astro";
---
<Container id="planos">
<section class="space-y-5 lg:space-y-10 lg:w-4/6 mx-auto">
<section class="space-y-5 lg:space-y-10 xl:w-4/6 mx-auto">
<h1 class="text-pretty text-4xl lg:text-6xl">
Modelos de contratação para sua empresa
</h1>
<div class="grid lg:grid-cols-3 gap-5">
<div
class="bg-white/5 border border-white/15 p-4 lg:p-10 rounded-xl flex flex-col space-y-5 hover:scale-105 hover:bg-white/10 transform transition duration-200"
class="bg-white/5 hover:scale-105 hover:bg-white/10 border border-white/15 p-4 lg:p-10 rounded-xl flex flex-col space-y-5 transform transition duration-200"
>
<h1
class="text-lime-400 border border-lime-400 rounded-lg text-center p-0.5 uppercase"
@@ -36,7 +36,7 @@ import Container from "~/components/Container.astro";
</a>
</div>
<div
class="bg-white/5 border border-white/15 p-4 lg:p-10 rounded-xl flex flex-col space-y-5 hover:scale-105 hover:bg-white/10 transform transition duration-200"
class="bg-white/5 hover:scale-105 hover:bg-white/10 border border-white/15 p-4 lg:p-10 rounded-xl flex flex-col space-y-5 transform transition duration-200"
>
<h1
class="text-lime-400 border border-lime-400 rounded-lg text-center p-0.5 uppercase"
@@ -62,7 +62,7 @@ import Container from "~/components/Container.astro";
</a>
</div>
<div
class="bg-white/5 border border-white/15 p-4 lg:p-10 rounded-xl flex flex-col space-y-5 hover:scale-105 hover:bg-white/10 transform transition duration-200"
class="bg-white/5 hover:scale-105 hover:bg-white/10 border border-white/15 p-4 lg:p-10 rounded-xl flex flex-col space-y-5 transform transition duration-200"
>
<h1
class="text-lime-400 border border-lime-400 rounded-lg text-center p-0.5 uppercase"

6
superpage/src/layouts/Layout.astro
View File

@@ -24,7 +24,11 @@ const year = new Date().getFullYear();
<body>
<header>
<Container class="flex items-center py-3">
<a href="/" aria-label="Página inicial">
<a
href="/"
aria-label="Página inicial"
class="hover:outline rounded-xs outline-offset-2"
>
<Icon name="logos/eduseg" class="w-28 h-auto" />
</a>

2
superpage/src/pages/[slug].astro
View File

@@ -122,7 +122,7 @@ const { Content } = await render(course);
</div>
<a
href="http://bit.ly/3RlROu6"
class="flex flex-col hover:outline rounded outline-offset-2"
class="flex flex-col hover:outline rounded-xs outline-offset-2"
target="_blank"
>
<div class="flex items-center gap-1">