4
0
forked from crowetic/commerce

normalize transition durations

This commit is contained in:
Julián Benegas 2020-10-21 19:22:27 -03:00
parent c22789176d
commit 5ef510c364
12 changed files with 24 additions and 18 deletions

View File

@ -12,7 +12,7 @@ const Avatar: FC<Props> = ({}) => {
return ( return (
<div <div
className="inline-block h-8 w-8 rounded-full border-2 border-accents-2" className="inline-block h-8 w-8 rounded-full border-2 border-accents-2 transition-colors duration-150"
style={{ style={{
backgroundImage: `linear-gradient(140deg, ${bg[0]}, ${bg[1]} 100%)`, backgroundImage: `linear-gradient(140deg, ${bg[0]}, ${bg[1]} 100%)`,
}} }}

View File

@ -18,7 +18,7 @@ const Featurebar: FC<Props> = ({
hide, hide,
}) => { }) => {
const rootClassName = cn( const rootClassName = cn(
'transition-transform transform duration-500 ease-out p-6 bg-primary text-base text-sm md:flex flex-row justify-center items-center font-medium fixed bottom-0 w-full z-10', 'transition-all transform duration-150 ease-out p-6 bg-primary text-base text-sm md:flex flex-row justify-center items-center font-medium fixed bottom-0 w-full z-10',
{ 'translate-y-full': hide }, { 'translate-y-full': hide },
className className
) )

View File

@ -0,0 +1,3 @@
.copyright {
font-size: 16px;
}

View File

@ -4,6 +4,7 @@ import Link from 'next/link'
import type { Page } from '@lib/bigcommerce/api/operations/get-all-pages' import type { Page } from '@lib/bigcommerce/api/operations/get-all-pages'
import getSlug from '@utils/get-slug' import getSlug from '@utils/get-slug'
import { Logo } from '@components/ui' import { Logo } from '@components/ui'
import s from './Footer.module.css'
interface Props { interface Props {
className?: string className?: string
@ -36,7 +37,7 @@ const Footer: FC<Props> = ({ className, pages }) => {
{sitePages.map((page) => ( {sitePages.map((page) => (
<li key={page.url} className="py-3 md:py-0 md:pb-4"> <li key={page.url} className="py-3 md:py-0 md:pb-4">
<Link href={page.url!}> <Link href={page.url!}>
<a className="text-gray-400 hover:text-white transition ease-in-out duration-100"> <a className="text-gray-400 hover:text-white transition ease-in-out duration-150">
{page.name} {page.name}
</a> </a>
</Link> </Link>
@ -48,7 +49,7 @@ const Footer: FC<Props> = ({ className, pages }) => {
{legalPages.map((page) => ( {legalPages.map((page) => (
<li key={page.url} className="py-3 md:py-0 md:pb-4"> <li key={page.url} className="py-3 md:py-0 md:pb-4">
<Link href={page.url!}> <Link href={page.url!}>
<a className="text-gray-400 hover:text-white transition ease-in-out duration-100"> <a className="text-gray-400 hover:text-white transition ease-in-out duration-150">
{page.name} {page.name}
</a> </a>
</Link> </Link>
@ -56,7 +57,7 @@ const Footer: FC<Props> = ({ className, pages }) => {
))} ))}
</ul> </ul>
<small className="text-base"> <small className={cn('text-white', s.copyright)}>
&copy; 2020 ACME, Inc. All rights reserved. &copy; 2020 ACME, Inc. All rights reserved.
</small> </small>
</footer> </footer>

View File

@ -39,10 +39,8 @@ const Layout: FC<Props> = ({ children, pageProps }) => {
<div className={cn(s.root)}> <div className={cn(s.root)}>
<header <header
className={cn( className={cn(
'sticky top-0 bg-primary z-40 transition-shadow duration-200', 'sticky top-0 bg-primary z-40 transition-all duration-150',
{ { 'shadow-magical': hasScrolled }
'shadow-magical': hasScrolled,
}
)} )}
> >
<Container> <Container>

View File

@ -1,3 +1,3 @@
.link { .link {
@apply group text-base inline-flex items-center text-base leading-6 font-medium hover:text-accents-8 focus:outline-none focus:text-accents-8 transition ease-in-out duration-100 cursor-pointer; @apply group inline-flex items-center text-base leading-6 font-medium hover:text-accents-8 focus:outline-none focus:text-accents-8 transition ease-in-out duration-150 cursor-pointer;
} }

View File

@ -17,7 +17,7 @@ const Searchbar: FC<Props> = ({ className }) => {
return ( return (
<div <div
className={cn( className={cn(
'relative text-sm bg-accents-1 text-base w-full', 'relative text-sm bg-accents-1 text-base w-full transition-colors duration-150',
className className
)} )}
> >

View File

@ -9,7 +9,11 @@ interface Props {
const Toggle: FC<Props> = ({ className, checked, onChange }) => { const Toggle: FC<Props> = ({ className, checked, onChange }) => {
return ( return (
<Switch checked={checked} onChange={onChange}> <Switch
checked={checked}
onChange={onChange}
className="focus:outline-none"
>
<span <span
role="checkbox" role="checkbox"
aria-checked="false" aria-checked="false"

View File

@ -7,7 +7,7 @@
} }
.item { .item {
@apply mr-6 cursor-pointer relative transition ease-in-out duration-100 text-base flex items-center; @apply mr-6 cursor-pointer relative transition ease-in-out duration-150 text-base flex items-center;
&:hover { &:hover {
@apply text-accents-8; @apply text-accents-8;
} }

View File

@ -58,7 +58,7 @@
.productTitle > span, .productTitle > span,
.productPrice, .productPrice,
.wishlistButton { .wishlistButton {
@apply transition ease-in-out duration-300; @apply transition ease-in-out duration-150;
} }
.squareBg { .squareBg {

View File

@ -1,6 +1,6 @@
.root { .root {
@apply h-12 w-12 bg-primary text-primary rounded-full mr-3 inline-flex @apply h-12 w-12 bg-primary text-primary rounded-full mr-3 inline-flex
items-center justify-center cursor-pointer transition duration-100 ease-in-out items-center justify-center cursor-pointer transition duration-150 ease-in-out
p-0 shadow-none border-gray-200 border box-border; p-0 shadow-none border-gray-200 border box-border;
& > span { & > span {
@ -13,7 +13,7 @@
} }
.color { .color {
@apply text-black transition duration-100 ease-in-out; @apply text-black transition duration-150 ease-in-out;
&:hover { &:hover {
@apply text-black; @apply text-black;

View File

@ -63,7 +63,7 @@ export default function Home({
}, []) }, [])
return ( return (
<div className="mt-3"> <div>
<Grid> <Grid>
{featured.slice(0, 3).map(({ node }) => ( {featured.slice(0, 3).map(({ node }) => (
<ProductCard key={node.path} product={node} /> <ProductCard key={node.path} product={node} />
@ -96,7 +96,7 @@ export default function Home({
</Marquee> </Marquee>
<div className="py-12 flex flex-row w-full px-12"> <div className="py-12 flex flex-row w-full px-12">
<div className="pr-3 w-48 relative"> <div className="pr-3 w-48 relative">
<div className="sticky top-2"> <div className="sticky top-32">
<ul className="mb-10"> <ul className="mb-10">
<li className="py-1 text-base font-bold tracking-wide"> <li className="py-1 text-base font-bold tracking-wide">
All Categories All Categories