forked from crowetic/commerce
normalize transition durations
This commit is contained in:
parent
c22789176d
commit
5ef510c364
@ -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%)`,
|
||||||
}}
|
}}
|
||||||
|
@ -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
|
||||||
)
|
)
|
||||||
|
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 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)}>
|
||||||
© 2020 ACME, Inc. All rights reserved.
|
© 2020 ACME, Inc. All rights reserved.
|
||||||
</small>
|
</small>
|
||||||
</footer>
|
</footer>
|
||||||
|
@ -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>
|
||||||
|
@ -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;
|
||||||
}
|
}
|
||||||
|
@ -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
|
||||||
)}
|
)}
|
||||||
>
|
>
|
||||||
|
@ -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"
|
||||||
|
@ -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;
|
||||||
}
|
}
|
||||||
|
@ -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 {
|
||||||
|
@ -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;
|
||||||
|
@ -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
|
||||||
|
Loading…
x
Reference in New Issue
Block a user