forked from crowetic/commerce
normalize transition durations
This commit is contained in:
Julián Benegas
parent
c22789176d
commit
5ef510c364
@ -12,7 +12,7 @@ const Avatar: FC<Props> = ({}) => {
|
||||
|
||||
return (
|
||||
<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={{
|
||||
backgroundImage: `linear-gradient(140deg, ${bg[0]}, ${bg[1]} 100%)`,
|
||||
}}
|
||||
|
||||
@ -18,7 +18,7 @@ const Featurebar: FC<Props> = ({
|
||||
hide,
|
||||
}) => {
|
||||
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 },
|
||||
className
|
||||
)
|
||||
|
||||
3
components/core/Footer/Footer.module.css
Normal file
3
components/core/Footer/Footer.module.css
Normal file
@ -0,0 +1,3 @@
|
||||
.copyright {
|
||||
font-size: 16px;
|
||||
}
|
||||
@ -4,6 +4,7 @@ import Link from 'next/link'
|
||||
import type { Page } from '@lib/bigcommerce/api/operations/get-all-pages'
|
||||
import getSlug from '@utils/get-slug'
|
||||
import { Logo } from '@components/ui'
|
||||
import s from './Footer.module.css'
|
||||
|
||||
interface Props {
|
||||
className?: string
|
||||
@ -36,7 +37,7 @@ const Footer: FC<Props> = ({ className, pages }) => {
|
||||
{sitePages.map((page) => (
|
||||
<li key={page.url} className="py-3 md:py-0 md:pb-4">
|
||||
<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}
|
||||
</a>
|
||||
</Link>
|
||||
@ -48,7 +49,7 @@ const Footer: FC<Props> = ({ className, pages }) => {
|
||||
{legalPages.map((page) => (
|
||||
<li key={page.url} className="py-3 md:py-0 md:pb-4">
|
||||
<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}
|
||||
</a>
|
||||
</Link>
|
||||
@ -56,7 +57,7 @@ const Footer: FC<Props> = ({ className, pages }) => {
|
||||
))}
|
||||
</ul>
|
||||
|
||||
<small className="text-base">
|
||||
<small className={cn('text-white', s.copyright)}>
|
||||
© 2020 ACME, Inc. All rights reserved.
|
||||
</small>
|
||||
</footer>
|
||||
|
||||
@ -39,10 +39,8 @@ const Layout: FC<Props> = ({ children, pageProps }) => {
|
||||
<div className={cn(s.root)}>
|
||||
<header
|
||||
className={cn(
|
||||
'sticky top-0 bg-primary z-40 transition-shadow duration-200',
|
||||
{
|
||||
'shadow-magical': hasScrolled,
|
||||
}
|
||||
'sticky top-0 bg-primary z-40 transition-all duration-150',
|
||||
{ 'shadow-magical': hasScrolled }
|
||||
)}
|
||||
>
|
||||
<Container>
|
||||
|
||||
@ -1,3 +1,3 @@
|
||||
.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;
|
||||
}
|
||||
|
||||
@ -17,7 +17,7 @@ const Searchbar: FC<Props> = ({ className }) => {
|
||||
return (
|
||||
<div
|
||||
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
|
||||
)}
|
||||
>
|
||||
|
||||
@ -9,7 +9,11 @@ interface Props {
|
||||
|
||||
const Toggle: FC<Props> = ({ className, checked, onChange }) => {
|
||||
return (
|
||||
<Switch checked={checked} onChange={onChange}>
|
||||
<Switch
|
||||
checked={checked}
|
||||
onChange={onChange}
|
||||
className="focus:outline-none"
|
||||
>
|
||||
<span
|
||||
role="checkbox"
|
||||
aria-checked="false"
|
||||
|
||||
@ -7,7 +7,7 @@
|
||||
}
|
||||
|
||||
.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 {
|
||||
@apply text-accents-8;
|
||||
}
|
||||
|
||||
@ -58,7 +58,7 @@
|
||||
.productTitle > span,
|
||||
.productPrice,
|
||||
.wishlistButton {
|
||||
@apply transition ease-in-out duration-300;
|
||||
@apply transition ease-in-out duration-150;
|
||||
}
|
||||
|
||||
.squareBg {
|
||||
|
||||
@ -1,6 +1,6 @@
|
||||
.root {
|
||||
@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;
|
||||
|
||||
& > span {
|
||||
@ -13,7 +13,7 @@
|
||||
}
|
||||
|
||||
.color {
|
||||
@apply text-black transition duration-100 ease-in-out;
|
||||
@apply text-black transition duration-150 ease-in-out;
|
||||
|
||||
&:hover {
|
||||
@apply text-black;
|
||||
|
||||
@ -63,7 +63,7 @@ export default function Home({
|
||||
}, [])
|
||||
|
||||
return (
|
||||
<div className="mt-3">
|
||||
<div>
|
||||
<Grid>
|
||||
{featured.slice(0, 3).map(({ node }) => (
|
||||
<ProductCard key={node.path} product={node} />
|
||||
@ -96,7 +96,7 @@ export default function Home({
|
||||
</Marquee>
|
||||
<div className="py-12 flex flex-row w-full px-12">
|
||||
<div className="pr-3 w-48 relative">
|
||||
<div className="sticky top-2">
|
||||
<div className="sticky top-32">
|
||||
<ul className="mb-10">
|
||||
<li className="py-1 text-base font-bold tracking-wide">
|
||||
All Categories
|
||||
|
||||
Loading…
x
Reference in New Issue
Block a user