Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

♻️refactor: remove scale down up animation #1017

Merged
merged 1 commit into from
Oct 1, 2024
Merged

♻️refactor: remove scale down up animation #1017

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
1 commit
Select commit
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
7 changes: 5 additions & 2 deletions app/components/button/lineAddFriends.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -10,7 +10,10 @@ export function LineAddFriends({
}: Readonly<{ linkLink: string }>): JSX.Element {
return (
<Bounce>
<Link href={linkLink} className="block mx-auto scale-down-up w-fit">
<Link
href={linkLink}
className="block button-pop duration-200 ease-out mx-auto w-fit"
>
<Image
src="/line_add_friends.avif"
width={116}
Expand All @@ -30,7 +33,7 @@ export function LineApply({
<Bounce>
<Link
href={lineLink}
className={`bg-[#00C300] font-bold gap-2 h-12 inline-flex items-center justify-center px-4 rounded-xl scale-down-up shadow-lg text-lg text-white ${styles.greenShine}`}
className={`bg-[#00C300] button-pop duration-200 ease-out font-bold gap-2 h-12 inline-flex items-center justify-center px-4 rounded-xl shadow-lg text-lg text-white ${styles.greenShine}`}
>
LINEで簡単応募する！
<ArrowRightIcon className={`size-5 ${styles.arrowRight}`} />
Expand Down
4 changes: 2 additions & 2 deletions app/components/layout/heading.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -26,7 +26,7 @@ function Breadcrumb({ menus }: Readonly<{ menus: Menu[] }>): JSX.Element {
<li className="flex items-center">
<Link
href="/"
className="flex items-center gap-1 p-1 rounded-xl scale-down-up underline hover:bg-gray-200"
className="button-pop duration-200 ease-out flex items-center gap-1 p-1 rounded-xl underline hover:bg-gray-200"
>
<HomeIcon className="size-5 text-sky-400" />
ホーム
Expand All @@ -37,7 +37,7 @@ function Breadcrumb({ menus }: Readonly<{ menus: Menu[] }>): JSX.Element {
{menus.length > 1 && index === 0 ? (
<Link
href={menu.pathname}
className="p-1 rounded-xl scale-down-up underline hover:bg-gray-200"
className="button-pop duration-200 ease-out p-1 rounded-xl underline hover:bg-gray-200"
>
{menu.name}
</Link>
Expand Down
2 changes: 1 addition & 1 deletion app/footer.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -12,7 +12,7 @@ export function Footer(): JSX.Element {
<li key={menu.name}>
<Link
href={menu.pathname}
className="block font-bold px-3 py-1 rounded-xl scale-down-up text-orange-400 hover:bg-gray-300"
className="block button-pop duration-200 ease-out font-bold px-3 py-1 rounded-xl text-orange-400 hover:bg-gray-300"
>
{menu.name}
</Link>
Expand Down
26 changes: 9 additions & 17 deletions app/globals.css
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -20,10 +20,19 @@ summary::-webkit-details-marker {
@media (prefers-reduced-motion: no-preference) {
animation: button-pop .25s ease-out;
}
& > img {
@media (prefers-reduced-motion: no-preference) {
animation: button-pop .25s ease-out;
}
}
&:active:hover,
&:active:focus {
animation: button-pop 0s ease-out;
transform: scale(0.95);
& > img {
animation: button-pop 0s ease-out;
transform: scale(0.95);
}
}
}

Expand All @@ -41,13 +50,6 @@ summary::-webkit-details-marker {
animation-range: contain 0% contain 50%;
}

.scale-down-up:focus {
animation: scale-down-up 200ms;
& > img {
animation: scale-down-up 200ms;
}
}

.scale-up-down {
animation: scale-up-down 2s;
&:nth-child(2) {
Expand Down Expand Up @@ -145,16 +147,6 @@ summary::-webkit-details-marker {
}
}

@keyframes scale-down-up {
0%,
100% {
transform: scale(1);
}
50% {
transform: scale(0.9);
}
}

@keyframes scale-up-down {
0%,
100% {
Expand Down
6 changes: 3 additions & 3 deletions app/header.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -89,7 +89,7 @@ function DropdownMenu({

return (
<details ref={ref} className="relative lg:hidden">
<summary className="block h-fit min-h-0 p-1 scale-down-up">
<summary className="block button-pop duration-200 ease-out h-fit min-h-0 p-1">
<Bars3BottomRightIcon className="size-7" />
</summary>
<nav>
Expand All @@ -98,7 +98,7 @@ function DropdownMenu({
<li key={menu.name}>
<Link
href={menu.pathname}
className="block font-bold px-3 py-1 rounded-xl scale-down-up text-nowrap text-orange-400 focus:bg-gray-400 hover:bg-gray-200"
className="block button-pop duration-200 ease-out font-bold px-3 py-1 rounded-xl text-nowrap text-orange-400 focus:bg-gray-400 hover:bg-gray-200"
>
{menu.name}
</Link>
Expand Down Expand Up @@ -151,7 +151,7 @@ function Navigation({
<li key={menu.name}>
<Link
href={menu.pathname}
className="block font-bold px-3 py-1 rounded-xl scale-down-up text-orange-400 hover:bg-gray-200"
className="block button-pop duration-200 ease-out font-bold px-3 py-1 rounded-xl text-orange-400 hover:bg-gray-200"
>
{menu.name}
</Link>
Expand Down
6 changes: 3 additions & 3 deletions app/page.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -13,15 +13,15 @@ export default function Home(): JSX.Element {
{/* block className is necessary for Safari behavior */}
<Link
href={KANTO_EVENT.pathname}
className="block scale-down-up sticky top-0 w-full z-20 sm:inline sm:static"
className="block button-pop duration-200 ease-out sticky top-0 w-full z-20 sm:inline sm:static"
>
<Image
src="/202410_kanto_banner_start.avif"
width={540}
height={162}
alt="こどもテックキャラバン-関東イベントバナー"
priority={true}
className="w-full"
className="duration-200 ease-out w-full"
/>
</Link>
<section>
Expand Down Expand Up @@ -66,7 +66,7 @@ export default function Home(): JSX.Element {
<h2 className="font-bold font-zenMaruGothic text-2xl">
<Link
href={SECRETARIAT.pathname}
className="block scale-down-up text-sky-400 underline"
className="block button-pop duration-200 ease-out text-sky-400 underline"
>
事務局の想い
</Link>
Expand Down
2 changes: 1 addition & 1 deletion app/partner/page.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -51,7 +51,7 @@ export default function SponserPage(): JSX.Element {
<h2 className="font-bold font-zenMaruGothic text-3xl">
<Link
href={PARTNER.pathname + area.menu.pathname}
className={`block mx-auto scale-down-up underline w-fit ${area.color.text}`}
className={`block button-pop duration-200 ease-out mx-auto underline w-fit ${area.color.text}`}
>
{area.menu.name}
</Link>
Expand Down
Loading