mirror of
https://github.com/vercel/commerce.git
synced 2025-03-14 22:42:33 +00:00
UI Changes
This commit is contained in:
parent
e2dd854f10
commit
8de36f7301
@ -1,13 +1,32 @@
|
||||
.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
|
||||
p-0 shadow-none border-gray-200 border box-border text-black;
|
||||
p-0 shadow-none border-gray-200 border box-border;
|
||||
|
||||
& > span {
|
||||
@apply absolute;
|
||||
}
|
||||
|
||||
&:hover {
|
||||
@apply transform scale-110 bg-hover;
|
||||
}
|
||||
}
|
||||
|
||||
.active.size {
|
||||
@apply border-accents-9 border-2;
|
||||
.color {
|
||||
@apply text-black transition duration-100 ease-in-out;
|
||||
|
||||
&:hover {
|
||||
@apply text-black;
|
||||
}
|
||||
|
||||
&.dark,
|
||||
&.dark:hover {
|
||||
color: white !important;
|
||||
}
|
||||
}
|
||||
|
||||
.root:hover {
|
||||
@apply transform scale-110 bg-hover;
|
||||
.active {
|
||||
&.size {
|
||||
@apply border-accents-9 border-2;
|
||||
}
|
||||
}
|
||||
|
@ -15,7 +15,7 @@ interface Props {
|
||||
|
||||
const Swatch: FC<Props & ButtonProps> = ({
|
||||
className,
|
||||
color,
|
||||
color = '',
|
||||
label,
|
||||
variant = 'size',
|
||||
active,
|
||||
@ -23,13 +23,14 @@ const Swatch: FC<Props & ButtonProps> = ({
|
||||
}) => {
|
||||
variant = variant?.toLowerCase()
|
||||
label = label?.toLowerCase()
|
||||
const isDarkBg = isDark(color)
|
||||
|
||||
const rootClassName = cn(
|
||||
s.root,
|
||||
{
|
||||
[s.active]: active,
|
||||
[s.size]: variant === 'size',
|
||||
[s.color]: color,
|
||||
[s.dark]: color ? isDark(color) : false,
|
||||
},
|
||||
className
|
||||
)
|
||||
@ -41,11 +42,7 @@ const Swatch: FC<Props & ButtonProps> = ({
|
||||
{...props}
|
||||
>
|
||||
{variant === 'color' && active && (
|
||||
<span
|
||||
className={cn('absolute', {
|
||||
'text-white': isDarkBg,
|
||||
})}
|
||||
>
|
||||
<span>
|
||||
<Check />
|
||||
</span>
|
||||
)}
|
||||
|
11839
package-lock.json
generated
Normal file
11839
package-lock.json
generated
Normal file
File diff suppressed because it is too large
Load Diff
@ -32,14 +32,14 @@
|
||||
"cookie": "^0.4.1",
|
||||
"js-cookie": "^2.2.1",
|
||||
"lodash.debounce": "^4.0.8",
|
||||
"next": "^9.5.6-canary.4",
|
||||
"next": "^9.5.5",
|
||||
"next-seo": "^4.11.0",
|
||||
"next-themes": "^0.0.4",
|
||||
"nextjs-progressbar": "^0.0.6",
|
||||
"postcss-nesting": "^7.0.1",
|
||||
"react": "^16.13.1",
|
||||
"react": "^16.14.0",
|
||||
"react-aria": "^3.0.0",
|
||||
"react-dom": "^16.13.1",
|
||||
"react-dom": "^16.14.0",
|
||||
"react-icons": "^3.11.0",
|
||||
"react-merge-refs": "^1.1.0",
|
||||
"react-swipeable-views": "^0.13.9",
|
||||
|
64
yarn.lock
64
yarn.lock
@ -1432,20 +1432,20 @@
|
||||
meow "^7.0.0"
|
||||
prettier "^2.0.5"
|
||||
|
||||
"@next/env@9.5.6-canary.4":
|
||||
version "9.5.6-canary.4"
|
||||
resolved "https://registry.yarnpkg.com/@next/env/-/env-9.5.6-canary.4.tgz#785956d1e2d26e25377a2dcafbd3fe785cd88c35"
|
||||
integrity sha512-c+JrotEtdgcaF6m4xSZ6D7eY4NWSDBsqcaLwkKAXh+pSEHfH2eKnZv7cRIaR3s7Ll37gE/RNfXGVC2l43vCcuw==
|
||||
"@next/env@9.5.5":
|
||||
version "9.5.5"
|
||||
resolved "https://registry.yarnpkg.com/@next/env/-/env-9.5.5.tgz#db993649ec6e619e34a36de90dc2baa52fc5280f"
|
||||
integrity sha512-N9wdjU6XoqLqNQWtrGiWtp1SUuJsYK1cNrZ24A6YD+4w5CNV5SkZX6aewKZCCLP5Y8UNfTij2FkJiSYUfBjX8g==
|
||||
|
||||
"@next/polyfill-module@9.5.6-canary.4":
|
||||
version "9.5.6-canary.4"
|
||||
resolved "https://registry.yarnpkg.com/@next/polyfill-module/-/polyfill-module-9.5.6-canary.4.tgz#6144ee81ae42aa44905f6c2b864ff5be19c67c38"
|
||||
integrity sha512-r+kAXpF8AjVZGanJBwveCR5GCqnNIjA0WBsotat4MP+KKQwrptocRYsP+eZZo7gyhHEwSMdMag2NWahqjW+Vlg==
|
||||
"@next/polyfill-module@9.5.5":
|
||||
version "9.5.5"
|
||||
resolved "https://registry.yarnpkg.com/@next/polyfill-module/-/polyfill-module-9.5.5.tgz#d9c65679a66664ab4859078f58997113c9d01f10"
|
||||
integrity sha512-itqYFeHo3yN4ccpHq2uNFC2UVQm12K6DxUVwYdui9MJiiueT0pSGb2laYEjf/G5+vVq7M2vb+DkjkOkPMBVfeg==
|
||||
|
||||
"@next/react-dev-overlay@9.5.6-canary.4":
|
||||
version "9.5.6-canary.4"
|
||||
resolved "https://registry.yarnpkg.com/@next/react-dev-overlay/-/react-dev-overlay-9.5.6-canary.4.tgz#2218f9a9d5874e838d24178f657ec6dd8e1aa961"
|
||||
integrity sha512-zYKkkdWi2rSyWYnOn7BEAQeZwOP2O6wHC4A/nB2YdRBDvD9p3qLawmribuiQ7vspPmAIgv2JgQ8DauC5YQU7DA==
|
||||
"@next/react-dev-overlay@9.5.5":
|
||||
version "9.5.5"
|
||||
resolved "https://registry.yarnpkg.com/@next/react-dev-overlay/-/react-dev-overlay-9.5.5.tgz#11b36813d75c43b7bd9d5e478bded1ed5391d03a"
|
||||
integrity sha512-B1nDANxjXr2oyohv+tX0OXZTmJtO5qEWmisNPGnqQ2Z32IixfaAgyNYVuCVf20ap6EUz5elhgNUwRIFh/e26mQ==
|
||||
dependencies:
|
||||
"@babel/code-frame" "7.10.4"
|
||||
ally.js "1.4.1"
|
||||
@ -1458,10 +1458,10 @@
|
||||
stacktrace-parser "0.1.10"
|
||||
strip-ansi "6.0.0"
|
||||
|
||||
"@next/react-refresh-utils@9.5.6-canary.4":
|
||||
version "9.5.6-canary.4"
|
||||
resolved "https://registry.yarnpkg.com/@next/react-refresh-utils/-/react-refresh-utils-9.5.6-canary.4.tgz#098a55714d906248ef46e9a1c077a1dc6e231331"
|
||||
integrity sha512-hxSF3/lWX/a+6vPLViklLK6DNDzRzd8T/EUJpkUgLdwdHnABKFB6p9m1qvdGuqBQug2RNDcLQy7oKucy42tpVQ==
|
||||
"@next/react-refresh-utils@9.5.5":
|
||||
version "9.5.5"
|
||||
resolved "https://registry.yarnpkg.com/@next/react-refresh-utils/-/react-refresh-utils-9.5.5.tgz#fe559b5ca51c038cb7840e0d669a6d7ef01fe4eb"
|
||||
integrity sha512-Gz5z0+ID+KAGto6Tkgv1a340damEw3HG6ANLKwNi5/QSHqQ3JUAVxMuhz3qnL54505I777evpzL89ofWEMIWKw==
|
||||
|
||||
"@nodelib/fs.scandir@2.1.3":
|
||||
version "2.1.3"
|
||||
@ -5919,10 +5919,10 @@ next-tick@~1.0.0:
|
||||
resolved "https://registry.yarnpkg.com/next-tick/-/next-tick-1.0.0.tgz#ca86d1fe8828169b0120208e3dc8424b9db8342c"
|
||||
integrity sha1-yobR/ogoFpsBICCOPchCS524NCw=
|
||||
|
||||
next@^9.5.6-canary.4:
|
||||
version "9.5.6-canary.4"
|
||||
resolved "https://registry.yarnpkg.com/next/-/next-9.5.6-canary.4.tgz#af3ed55845f6005ac155f7c5d9d21b7493be7141"
|
||||
integrity sha512-sd29wpQer1Ha9EWpvrBvN6XXmLtJnR5JWAyYnlBmrA835BolN0cQw6++sOGcdTJZV5+ZWbhTEzBVOUTKsSLd5w==
|
||||
next@^9.5.5:
|
||||
version "9.5.5"
|
||||
resolved "https://registry.yarnpkg.com/next/-/next-9.5.5.tgz#37a37095e7c877ed6c94ba82e34ab9ed02b4eb33"
|
||||
integrity sha512-KF4MIdTYeI6YIGODNw27w9HGzCll4CXbUpkP6MNvyoHlpsunx8ybkQHm/hYa7lWMozmsn58LwaXJOhe4bSrI0g==
|
||||
dependencies:
|
||||
"@ampproject/toolbox-optimizer" "2.6.0"
|
||||
"@babel/code-frame" "7.10.4"
|
||||
@ -5943,10 +5943,10 @@ next@^9.5.6-canary.4:
|
||||
"@babel/runtime" "7.11.2"
|
||||
"@babel/types" "7.11.5"
|
||||
"@hapi/accept" "5.0.1"
|
||||
"@next/env" "9.5.6-canary.4"
|
||||
"@next/polyfill-module" "9.5.6-canary.4"
|
||||
"@next/react-dev-overlay" "9.5.6-canary.4"
|
||||
"@next/react-refresh-utils" "9.5.6-canary.4"
|
||||
"@next/env" "9.5.5"
|
||||
"@next/polyfill-module" "9.5.5"
|
||||
"@next/react-dev-overlay" "9.5.5"
|
||||
"@next/react-refresh-utils" "9.5.5"
|
||||
ast-types "0.13.2"
|
||||
babel-plugin-transform-define "2.0.0"
|
||||
babel-plugin-transform-react-remove-prop-types "0.4.24"
|
||||
@ -6966,10 +6966,10 @@ react-aria@^3.0.0:
|
||||
"@react-aria/utils" "^3.3.0"
|
||||
"@react-aria/visually-hidden" "^3.2.1"
|
||||
|
||||
react-dom@^16.13.1:
|
||||
version "16.13.1"
|
||||
resolved "https://registry.yarnpkg.com/react-dom/-/react-dom-16.13.1.tgz#c1bd37331a0486c078ee54c4740720993b2e0e7f"
|
||||
integrity sha512-81PIMmVLnCNLO/fFOQxdQkvEq/+Hfpv24XNJfpyZhTRfO0QcmQIF/PgCa1zCOj2w1hrn12MFLyaJ/G0+Mxtfag==
|
||||
react-dom@^16.14.0:
|
||||
version "16.14.0"
|
||||
resolved "https://registry.yarnpkg.com/react-dom/-/react-dom-16.14.0.tgz#7ad838ec29a777fb3c75c3a190f661cf92ab8b89"
|
||||
integrity sha512-1gCeQXDLoIqMgqD3IO2Ah9bnf0w9kzhwN5q4FGnHZ67hBm9yePzB5JJAIQCc8x3pFnNlwFq4RidZggNAAkzWWw==
|
||||
dependencies:
|
||||
loose-envify "^1.1.0"
|
||||
object-assign "^4.1.1"
|
||||
@ -7063,10 +7063,10 @@ react-ticker@^1.2.2:
|
||||
resolved "https://registry.yarnpkg.com/react-ticker/-/react-ticker-1.2.2.tgz#12cda5ff8266c6fe90ffcd8c58e12ba1596ddf24"
|
||||
integrity sha512-PXUujoPJvajxwOfosuuujlrBUrjgGp4FB4haWFOI25ujhMppW4SuLkiOdQ9AylrWN3yTHWdk2kbQWe3n9SjFGA==
|
||||
|
||||
react@^16.13.1:
|
||||
version "16.13.1"
|
||||
resolved "https://registry.yarnpkg.com/react/-/react-16.13.1.tgz#2e818822f1a9743122c063d6410d85c1e3afe48e"
|
||||
integrity sha512-YMZQQq32xHLX0bz5Mnibv1/LHb3Sqzngu7xstSM+vrkE5Kzr9xE0yMByK5kMoTK30YVJE61WfbxIFFvfeDKT1w==
|
||||
react@^16.14.0:
|
||||
version "16.14.0"
|
||||
resolved "https://registry.yarnpkg.com/react/-/react-16.14.0.tgz#94d776ddd0aaa37da3eda8fc5b6b18a4c9a3114d"
|
||||
integrity sha512-0X2CImDkJGApiAlcf0ODKIneSwBPhqJawOa5wCtKbu7ZECrmS26NvtSILynQ66cgkT/RJ4LidJOc3bUESwmU8g==
|
||||
dependencies:
|
||||
loose-envify "^1.1.0"
|
||||
object-assign "^4.1.1"
|
||||
|
Loading…
x
Reference in New Issue
Block a user