forked from crowetic/commerce
Decrese size
This commit is contained in:
parent
7d48c22c23
commit
6b4d32a7d3
@ -98,3 +98,37 @@ body {
|
||||
a {
|
||||
-webkit-tap-highlight-color: rgba(0, 0, 0, 0);
|
||||
}
|
||||
|
||||
.animated {
|
||||
-webkit-animation-duration: 1s;
|
||||
animation-duration: 1s;
|
||||
-webkit-animation-duration: 1s;
|
||||
animation-duration: 1s;
|
||||
-webkit-animation-fill-mode: both;
|
||||
animation-fill-mode: both;
|
||||
}
|
||||
|
||||
.fadeIn {
|
||||
-webkit-animation-name: fadeIn;
|
||||
animation-name: fadeIn;
|
||||
}
|
||||
|
||||
@-webkit-keyframes fadeIn {
|
||||
from {
|
||||
opacity: 0;
|
||||
}
|
||||
|
||||
to {
|
||||
opacity: 1;
|
||||
}
|
||||
}
|
||||
|
||||
@keyframes fadeIn {
|
||||
from {
|
||||
opacity: 0;
|
||||
}
|
||||
|
||||
to {
|
||||
opacity: 1;
|
||||
}
|
||||
}
|
||||
|
@ -1,6 +1,6 @@
|
||||
import React, { FC } from 'react'
|
||||
import { Switch } from '@headlessui/react'
|
||||
import { HiSun, HiMoon } from 'react-icons/hi'
|
||||
import { Moon, Sun } from '@components/icon'
|
||||
interface Props {
|
||||
className?: string
|
||||
checked: boolean
|
||||
@ -35,7 +35,7 @@ const Toggle: FC<Props> = ({ className, checked, onChange }) => {
|
||||
: 'opacity-100 ease-in duration-150'
|
||||
} absolute inset-0 h-full w-full flex items-center justify-center transition-opacity`}
|
||||
>
|
||||
<HiSun className="h-3 w-3 text-gray-400" />
|
||||
<Sun className="h-3 w-3 text-gray-400" />
|
||||
</span>
|
||||
<span
|
||||
className={`${
|
||||
@ -44,7 +44,7 @@ const Toggle: FC<Props> = ({ className, checked, onChange }) => {
|
||||
: 'opacity-0 ease-out duration-150'
|
||||
} opacity-0 ease-out duration-150 absolute inset-0 h-full w-full flex items-center justify-center transition-opacity`}
|
||||
>
|
||||
<HiMoon className="h-3 w-3 text-yellow-400" />
|
||||
<Moon className="h-3 w-3 text-yellow-400" />
|
||||
</span>
|
||||
</span>
|
||||
</span>
|
||||
|
11
package.json
11
package.json
@ -22,10 +22,7 @@
|
||||
"@headlessui/react": "^0.2.0",
|
||||
"@react-aria/overlays": "^3.4.0",
|
||||
"@tailwindcss/ui": "^0.6.2",
|
||||
"animate.css": "^4.1.1",
|
||||
"bowser": "^2.11.0",
|
||||
"bunyan": "^1.8.14",
|
||||
"bunyan-prettystream": "^0.1.3",
|
||||
"classnames": "^2.2.6",
|
||||
"cookie": "^0.4.1",
|
||||
"js-cookie": "^2.2.1",
|
||||
@ -35,16 +32,12 @@
|
||||
"next": "^9.5.6-canary.14",
|
||||
"next-seo": "^4.11.0",
|
||||
"next-themes": "^0.0.4",
|
||||
"nextjs-progressbar": "^0.0.6",
|
||||
"postcss-import": "^13.0.0",
|
||||
"postcss-nesting": "^7.0.1",
|
||||
"react": "^16.14.0",
|
||||
"react-aria": "^3.0.0",
|
||||
"react-dom": "^16.14.0",
|
||||
"react-icons": "^3.11.0",
|
||||
"react-merge-refs": "^1.1.0",
|
||||
"react-swipeable-views": "^0.13.9",
|
||||
"react-swipeable-views-utils": "^0.14.0-alpha.0",
|
||||
"react-ticker": "^1.2.2",
|
||||
"swr": "^0.3.3",
|
||||
"tailwindcss": "^1.9"
|
||||
@ -69,7 +62,9 @@
|
||||
"postcss-flexbugs-fixes": "^4.2.1",
|
||||
"postcss-preset-env": "^6.7.0",
|
||||
"prettier": "^2.1.2",
|
||||
"typescript": "^4.0.3"
|
||||
"typescript": "^4.0.3",
|
||||
"bunyan": "^1.8.14",
|
||||
"bunyan-prettystream": "^0.1.3"
|
||||
},
|
||||
"resolutions": {
|
||||
"webpack": "^5.0.0-beta.30"
|
||||
|
@ -111,12 +111,12 @@ export default function Search({
|
||||
</ul>
|
||||
</div>
|
||||
<div className="col-span-8">
|
||||
<div className="mb-12 animate__animated animate__fadeIn">
|
||||
<div className="mb-12 transition ease-in duration-75">
|
||||
{data ? (
|
||||
<>
|
||||
<span
|
||||
className={cn('animate__animated', {
|
||||
animate__fadeIn: data.found,
|
||||
className={cn('animated', {
|
||||
fadeIn: data.found,
|
||||
hidden: !data.found,
|
||||
})}
|
||||
>
|
||||
@ -124,8 +124,8 @@ export default function Search({
|
||||
<strong>{q}</strong>"
|
||||
</span>
|
||||
<span
|
||||
className={cn('animate__animated', {
|
||||
animate__fadeIn: !data.found,
|
||||
className={cn('animated', {
|
||||
fadeIn: !data.found,
|
||||
hidden: data.found,
|
||||
})}
|
||||
>
|
||||
@ -145,7 +145,7 @@ export default function Search({
|
||||
<ProductCard
|
||||
variant="simple"
|
||||
key={node.path}
|
||||
className="animate__animated animate__fadeIn"
|
||||
className="animated fadeIn"
|
||||
product={node}
|
||||
imgWidth={480}
|
||||
imgHeight={480}
|
||||
@ -157,7 +157,7 @@ export default function Search({
|
||||
{rangeMap(12, (i) => (
|
||||
<Skeleton
|
||||
key={i}
|
||||
className="w-full animate__animated animate__fadeIn"
|
||||
className="w-full animated fadeIn"
|
||||
height={325}
|
||||
/>
|
||||
))}
|
||||
|
Loading…
x
Reference in New Issue
Block a user