From 4f905b1558d0485bedcb2472972bb751ef2e8a5b Mon Sep 17 00:00:00 2001 From: lytrankieio123 Date: Thu, 9 Sep 2021 11:03:14 +0700 Subject: [PATCH 01/13] :art: styles: tab common :%s --- pages/test.tsx | 6 +++- .../EmptyCommon/EmptyCommon.module.scss | 15 +++++++++ .../common/EmptyCommon/EmptyCommon.tsx | 25 ++++++++++++++ src/components/common/EmptyCommon/empty.svg | 33 +++++++++++++++++++ .../StaticImage/StaticImage.module.scss | 5 +++ .../common/StaticImage/StaticImage.tsx | 16 +++++++++ src/components/common/index.ts | 2 ++ 7 files changed, 101 insertions(+), 1 deletion(-) create mode 100644 src/components/common/EmptyCommon/EmptyCommon.module.scss create mode 100644 src/components/common/EmptyCommon/EmptyCommon.tsx create mode 100644 src/components/common/EmptyCommon/empty.svg create mode 100644 src/components/common/StaticImage/StaticImage.module.scss create mode 100644 src/components/common/StaticImage/StaticImage.tsx diff --git a/pages/test.tsx b/pages/test.tsx index f9296f786..29f41437a 100644 --- a/pages/test.tsx +++ b/pages/test.tsx @@ -1,5 +1,5 @@ import { - CollapseCommon, Layout, RelevantBlogPosts + CollapseCommon, EmptyCommon, Layout, RelevantBlogPosts } from 'src/components/common' const COLLAPSE_DATA = [ @@ -39,8 +39,12 @@ const COLLAPSE_DATA = [ export default function Test() { return ( <> + + + + ) } diff --git a/src/components/common/EmptyCommon/EmptyCommon.module.scss b/src/components/common/EmptyCommon/EmptyCommon.module.scss new file mode 100644 index 000000000..e866ce699 --- /dev/null +++ b/src/components/common/EmptyCommon/EmptyCommon.module.scss @@ -0,0 +1,15 @@ +@import "../../../styles/utilities"; + +.empty { + padding: 4rem 1.6rem; + margin: auto; + .imgWrap { + min-width: 10rem; + } + + .description { + color: var(--disabled); + text-align: center; + margin-top: 2.4rem; + } +} diff --git a/src/components/common/EmptyCommon/EmptyCommon.tsx b/src/components/common/EmptyCommon/EmptyCommon.tsx new file mode 100644 index 000000000..6e4fc79a8 --- /dev/null +++ b/src/components/common/EmptyCommon/EmptyCommon.tsx @@ -0,0 +1,25 @@ +import { StaticImage } from '..'; +import EmptyImg from './empty.svg'; +import s from './EmptyCommon.module.scss'; + + +interface Props { + description?: string +} + +const EmptyCommon = ({ description = "No data to display" }: Props) => { + return ( +
+
+ +
+ { + description &&
+ {description} +
+ } +
+ ) +} + +export default EmptyCommon \ No newline at end of file diff --git a/src/components/common/EmptyCommon/empty.svg b/src/components/common/EmptyCommon/empty.svg new file mode 100644 index 000000000..c62a71ab3 --- /dev/null +++ b/src/components/common/EmptyCommon/empty.svg @@ -0,0 +1,33 @@ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + diff --git a/src/components/common/StaticImage/StaticImage.module.scss b/src/components/common/StaticImage/StaticImage.module.scss new file mode 100644 index 000000000..4700c71cc --- /dev/null +++ b/src/components/common/StaticImage/StaticImage.module.scss @@ -0,0 +1,5 @@ +.staticImage { + img { + @apply w-full h-full; + } +} diff --git a/src/components/common/StaticImage/StaticImage.tsx b/src/components/common/StaticImage/StaticImage.tsx new file mode 100644 index 000000000..abc27912a --- /dev/null +++ b/src/components/common/StaticImage/StaticImage.tsx @@ -0,0 +1,16 @@ +import React from 'react' +import s from './ImgWithLink.module.scss' +import Image from 'next/image' + +export interface Props { + src: StaticImageData, + alt?: string, +} + +const StaticImage = ({ src, alt }: Props) => { + return ( + {alt} + ) +} + +export default StaticImage \ No newline at end of file diff --git a/src/components/common/index.ts b/src/components/common/index.ts index 56896f790..d124b0578 100644 --- a/src/components/common/index.ts +++ b/src/components/common/index.ts @@ -39,3 +39,5 @@ export { default as ImgWithLink} from './ImgWithLink/ImgWithLink' export { default as RecipeDetail} from './RecipeDetail/RecipeDetail' export { default as DrawerCommon} from './DrawerCommon/DrawerCommon' export { default as CartDrawer} from './CartDrawer/CartDrawer' +export { default as StaticImage} from './StaticImage/StaticImage' +export { default as EmptyCommon} from './EmptyCommon/EmptyCommon' From 985f8861c802fd0a9f79fc48a780ace19706d977 Mon Sep 17 00:00:00 2001 From: lytrankieio123 Date: Thu, 9 Sep 2021 14:33:52 +0700 Subject: [PATCH 02/13] :bug: bug: fix header animation :%s --- .../common/Header/Header.module.scss | 21 ++++++++- src/components/common/Header/Header.tsx | 44 ++++++++++++------- .../HeaderHighLight.module.scss | 42 ++++++------------ .../HeaderHighLight/HeaderHighLight.tsx | 12 ++--- .../HeaderMenu/HeaderMenu.module.scss | 4 ++ .../HeaderSubMenu/HeaderSubMenu.tsx | 8 +--- 6 files changed, 71 insertions(+), 60 deletions(-) diff --git a/src/components/common/Header/Header.module.scss b/src/components/common/Header/Header.module.scss index 3e40e067d..15bcd9b72 100644 --- a/src/components/common/Header/Header.module.scss +++ b/src/components/common/Header/Header.module.scss @@ -4,7 +4,7 @@ @apply sticky bg-white shadow-md; top: 0; z-index: 9999; - margin-bottom: 3.2rem; + margin-bottom: 3.2rem; &.full { @apply shadow-none; border: 1px solid var(--border-line); @@ -17,3 +17,22 @@ @apply font-logo; } } + +.headerSticky { + position: sticky; + top: 0; + display: none; + &.show { + display: block; + } +} + +// @keyframes showHeaderHightlight { +// 0% { +// transform: translateY(-4rem); +// } +// 100% { +// transform: none; +// } +// } + diff --git a/src/components/common/Header/Header.tsx b/src/components/common/Header/Header.tsx index a9926f765..588bf68d1 100644 --- a/src/components/common/Header/Header.tsx +++ b/src/components/common/Header/Header.tsx @@ -1,5 +1,5 @@ import classNames from 'classnames' -import React, { memo, useEffect, useState } from 'react' +import React, { memo, useEffect, useMemo, useRef, useState } from 'react' import { useModalCommon } from 'src/components/hooks' import { isMobile } from 'src/utils/funtion.utils' import ModalAuthenticate from '../ModalAuthenticate/ModalAuthenticate' @@ -12,40 +12,54 @@ import s from './Header.module.scss' const Header = memo(() => { + const headeFullRef = useRef(null) const [isFullHeader, setIsFullHeader] = useState(true) const { visible: visibleModalAuthen, closeModal: closeModalAuthen, openModal: openModalAuthen } = useModalCommon({ initialValue: false }) const { visible: visibleModalInfo, closeModal: closeModalInfo, openModal: openModalInfo } = useModalCommon({ initialValue: false }) + const headerHeight = useMemo(() => { + return headeFullRef.current?.offsetHeight + }, [headeFullRef]) + useEffect(() => { + const handleScroll = () => { + if (!isMobile()) { + if (!headerHeight || window.scrollY > headerHeight) { + setIsFullHeader(false) + } else { + setIsFullHeader(true) + } + } + } window.addEventListener('scroll', handleScroll) return () => { window.removeEventListener('scroll', handleScroll) } - }, []) + }, [headerHeight]) - const handleScroll = () => { - if (!isMobile()) { - if (window.scrollY === 0) { - setIsFullHeader(true) - } else { - setIsFullHeader(false) - } - } - } return ( <> -
- +
+
- +
+
+ +
+ - + ) }) diff --git a/src/components/common/Header/components/HeaderHighLight/HeaderHighLight.module.scss b/src/components/common/Header/components/HeaderHighLight/HeaderHighLight.module.scss index 9717fd29d..77e6aee82 100644 --- a/src/components/common/Header/components/HeaderHighLight/HeaderHighLight.module.scss +++ b/src/components/common/Header/components/HeaderHighLight/HeaderHighLight.module.scss @@ -3,37 +3,21 @@ .headerHighLight { @apply hidden; @screen md { - transform: translateY(-10rem); - height: 0; - &.show { - @apply flex justify-between items-center spacing-horizontal bg-primary caption; - animation: showHeaderHightlight 0.2s; - height: unset; - transform: none; - padding-top: 0.8rem; - padding-bottom: 0.8rem; - color: var(--white); - .menu { - @apply flex items-center list-none; - padding: 0.8rem 0; - li { - &:not(:last-child) { - margin-right: 3.2rem; - } - a { - @appy no-underline; - } + @apply flex justify-between items-center spacing-horizontal bg-primary caption; + padding-top: 0.8rem; + padding-bottom: 0.8rem; + color: var(--white); + .menu { + @apply flex items-center list-none; + padding: 0.8rem 0; + li { + &:not(:last-child) { + margin-right: 3.2rem; + } + a { + @appy no-underline; } } } } } - -@keyframes showHeaderHightlight { - 0% { - transform: translateY(-4rem); - } - 100% { - transform: none; - } -} diff --git a/src/components/common/Header/components/HeaderHighLight/HeaderHighLight.tsx b/src/components/common/Header/components/HeaderHighLight/HeaderHighLight.tsx index a1759eede..d0d4eede7 100644 --- a/src/components/common/Header/components/HeaderHighLight/HeaderHighLight.tsx +++ b/src/components/common/Header/components/HeaderHighLight/HeaderHighLight.tsx @@ -1,6 +1,5 @@ -import classNames from 'classnames' import Link from 'next/link' -import { memo, useEffect, useRef } from 'react' +import { memo } from 'react' import { ROUTE } from 'src/utils/constanst.utils' import s from './HeaderHighLight.module.scss' @@ -19,14 +18,9 @@ const MENU = [ }, ] -interface Props { - children?: any, - isShow: boolean, -} - -const HeaderHighLight = memo(({ isShow }: Props) => { +const HeaderHighLight = memo(() => { return ( -
+
Free Shipping on order $49+ / Express $99+
diff --git a/src/components/common/Header/components/HeaderMenu/HeaderMenu.module.scss b/src/components/common/Header/components/HeaderMenu/HeaderMenu.module.scss index eaaabca70..8327f5523 100644 --- a/src/components/common/Header/components/HeaderMenu/HeaderMenu.module.scss +++ b/src/components/common/Header/components/HeaderMenu/HeaderMenu.module.scss @@ -62,6 +62,10 @@ } } .btnCart { + all: unset; + &:focus-visible { + outline: 2px solid #000; + } &:hover { svg path { fill: var(--primary); diff --git a/src/components/common/Header/components/HeaderSubMenu/HeaderSubMenu.tsx b/src/components/common/Header/components/HeaderSubMenu/HeaderSubMenu.tsx index 6a02259b5..eb7d0a18a 100644 --- a/src/components/common/Header/components/HeaderSubMenu/HeaderSubMenu.tsx +++ b/src/components/common/Header/components/HeaderSubMenu/HeaderSubMenu.tsx @@ -53,16 +53,12 @@ const CATEGORY = [ link: `${ROUTE.PRODUCTS}/?${QUERY_KEY.BRAND}=sauce`, }, ] -interface Props { - children?: any, - isShow: boolean, -} -const HeaderSubMenu = memo(({ isShow }: Props) => { +const HeaderSubMenu = memo(() => { const router = useRouter() return ( -
+
    {/* todo: handle active item */}
  • From 1a4392eacc5d5c5c6eb268f7e5fe266a84a1ca29 Mon Sep 17 00:00:00 2001 From: lytrankieio123 Date: Thu, 9 Sep 2021 16:48:54 +0700 Subject: [PATCH 03/13] :sparkles: feat: add blur img :%s --- src/components/common/ImgWithLink/ImgWithLink.tsx | 8 +++++++- src/utils/constanst.utils.ts | 2 ++ 2 files changed, 9 insertions(+), 1 deletion(-) diff --git a/src/components/common/ImgWithLink/ImgWithLink.tsx b/src/components/common/ImgWithLink/ImgWithLink.tsx index 092322085..62a30fa45 100644 --- a/src/components/common/ImgWithLink/ImgWithLink.tsx +++ b/src/components/common/ImgWithLink/ImgWithLink.tsx @@ -1,6 +1,7 @@ import React from 'react' import s from './ImgWithLink.module.scss' import Image from 'next/image' +import { BLUR_DATA_IMG } from 'src/utils/constanst.utils' export interface ImgWithLinkProps { src: string, @@ -10,7 +11,12 @@ export interface ImgWithLinkProps { const ImgWithLink = ({ src, alt }: ImgWithLinkProps) => { return (
    - {alt} + {alt}
    ) } diff --git a/src/utils/constanst.utils.ts b/src/utils/constanst.utils.ts index 1522e477f..bc46f6ca6 100644 --- a/src/utils/constanst.utils.ts +++ b/src/utils/constanst.utils.ts @@ -1,3 +1,5 @@ +export const BLUR_DATA_IMG = 'data:image/png;base64,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' + export const SOCIAL_LINKS = { FB: 'FB', TWITTER: 'TWITTER', From 2e3947a1baa289adeac9beae075440666c8f92ba Mon Sep 17 00:00:00 2001 From: lytrankieio123 Date: Thu, 9 Sep 2021 16:49:27 +0700 Subject: [PATCH 04/13] style: blur bg img --- src/components/common/ImgWithLink/ImgWithLink.module.scss | 3 +++ 1 file changed, 3 insertions(+) diff --git a/src/components/common/ImgWithLink/ImgWithLink.module.scss b/src/components/common/ImgWithLink/ImgWithLink.module.scss index 413f96cdb..c454aaa4a 100644 --- a/src/components/common/ImgWithLink/ImgWithLink.module.scss +++ b/src/components/common/ImgWithLink/ImgWithLink.module.scss @@ -5,5 +5,8 @@ height: 100%; img { object-fit: cover; + background-size: contain !important; + background-position: center !important; + background-repeat: no-repeat; } } From d27f20e9f8a7bc1e74eb9ab46176e993fc1cb845 Mon Sep 17 00:00:00 2001 From: lytrankieio123 Date: Thu, 9 Sep 2021 17:13:27 +0700 Subject: [PATCH 05/13] :art: styles: empty common :%s --- src/components/common/EmptyCommon/EmptyCommon.module.scss | 5 +++-- src/components/common/EmptyCommon/EmptyCommon.tsx | 2 +- 2 files changed, 4 insertions(+), 3 deletions(-) diff --git a/src/components/common/EmptyCommon/EmptyCommon.module.scss b/src/components/common/EmptyCommon/EmptyCommon.module.scss index e866ce699..a31ba4374 100644 --- a/src/components/common/EmptyCommon/EmptyCommon.module.scss +++ b/src/components/common/EmptyCommon/EmptyCommon.module.scss @@ -1,15 +1,16 @@ @import "../../../styles/utilities"; .empty { - padding: 4rem 1.6rem; + padding: 1.6rem; margin: auto; .imgWrap { min-width: 10rem; + text-align: center; } .description { color: var(--disabled); text-align: center; - margin-top: 2.4rem; + margin-top: .8rem; } } diff --git a/src/components/common/EmptyCommon/EmptyCommon.tsx b/src/components/common/EmptyCommon/EmptyCommon.tsx index 6e4fc79a8..cc462e6af 100644 --- a/src/components/common/EmptyCommon/EmptyCommon.tsx +++ b/src/components/common/EmptyCommon/EmptyCommon.tsx @@ -10,7 +10,7 @@ interface Props { const EmptyCommon = ({ description = "No data to display" }: Props) => { return (
    -
    +
    { From bd7cf33a5140b24a5b94d527f77b95dfa2e078c8 Mon Sep 17 00:00:00 2001 From: lytrankieio123 Date: Fri, 10 Sep 2021 09:28:38 +0700 Subject: [PATCH 06/13] :art: styles: custom shape :%s --- pages/test.tsx | 20 ++++++ .../common/CustomShapeSvg/CustomShapeSvg.tsx | 21 ++++++ .../CustomShapeSvg/ViewAllItem.module.scss | 16 +++++ src/components/common/Layout/Layout.tsx | 3 +- .../common/StaticImage/StaticImage.tsx | 2 +- src/components/common/index.ts | 1 + src/styles/_utilities.scss | 67 ++++++++++++++++++- 7 files changed, 127 insertions(+), 3 deletions(-) create mode 100644 src/components/common/CustomShapeSvg/CustomShapeSvg.tsx create mode 100644 src/components/common/CustomShapeSvg/ViewAllItem.module.scss diff --git a/pages/test.tsx b/pages/test.tsx index 29f41437a..ddaceab57 100644 --- a/pages/test.tsx +++ b/pages/test.tsx @@ -44,6 +44,26 @@ export default function Test() { +
    +
    + Lorem ipsum dolor sit, amet consectetur adipisicing elit. Praesentium delectus incidunt et cupiditate soluta, deleniti dolorem tempora officia atque earum recusandae vitae libero molestiae quas officiis ducimus voluptas exercitationem. Dolor non illo distinctio, nemo numquam quo nihil debitis magni ullam quasi optio, commodi at! Error, asperiores sint. Labore, at ipsum. +
    +
    +
    +
    + Lorem ipsum dolor sit, amet consectetur adipisicing elit. Praesentium delectus incidunt et cupiditate soluta, deleniti dolorem tempora officia atque earum recusandae vitae libero molestiae quas officiis ducimus voluptas exercitationem. Dolor non illo distinctio, nemo numquam quo nihil debitis magni ullam quasi optio, commodi at! Error, asperiores sint. Labore, at ipsum. +
    +
    + +
    + Lorem ipsum dolor +
    + +
    +
    + Lorem ipsum dolor sit +
    +
    ) diff --git a/src/components/common/CustomShapeSvg/CustomShapeSvg.tsx b/src/components/common/CustomShapeSvg/CustomShapeSvg.tsx new file mode 100644 index 000000000..573160b70 --- /dev/null +++ b/src/components/common/CustomShapeSvg/CustomShapeSvg.tsx @@ -0,0 +1,21 @@ + +const CustomShapeSvg = () => { + return ( + <> + + + + + + + + + + + + ) +} + +export default CustomShapeSvg \ No newline at end of file diff --git a/src/components/common/CustomShapeSvg/ViewAllItem.module.scss b/src/components/common/CustomShapeSvg/ViewAllItem.module.scss new file mode 100644 index 000000000..b4ec26872 --- /dev/null +++ b/src/components/common/CustomShapeSvg/ViewAllItem.module.scss @@ -0,0 +1,16 @@ +@import "../../../styles/utilities"; + +.viewAll { + display: flex; + .content { + color: var(--primary); + margin: 0.8rem 0.8rem 0.8rem 0; + font-weight: bold; + } + .vector { + margin: 0.8rem 0rem 0.8rem 0rem; + svg path { + fill: var(--primary); + } + } +} diff --git a/src/components/common/Layout/Layout.tsx b/src/components/common/Layout/Layout.tsx index 17f520185..a808c33ff 100644 --- a/src/components/common/Layout/Layout.tsx +++ b/src/components/common/Layout/Layout.tsx @@ -2,7 +2,7 @@ import { CommerceProvider } from '@framework' import { useRouter } from 'next/router' import { FC } from 'react' import { useModalCommon } from 'src/components/hooks' -import { CartDrawer } from '..' +import { CartDrawer, CustomShapeSvg } from '..' import Footer from '../Footer/Footer' import Header from '../Header/Header' import s from './Layout.module.scss' @@ -30,6 +30,7 @@ const Layout: FC = ({ children }) => {
    {children}
    + diff --git a/src/components/common/StaticImage/StaticImage.tsx b/src/components/common/StaticImage/StaticImage.tsx index abc27912a..f744e492d 100644 --- a/src/components/common/StaticImage/StaticImage.tsx +++ b/src/components/common/StaticImage/StaticImage.tsx @@ -1,5 +1,5 @@ import React from 'react' -import s from './ImgWithLink.module.scss' +import s from './StaticImage.module.scss' import Image from 'next/image' export interface Props { diff --git a/src/components/common/index.ts b/src/components/common/index.ts index d124b0578..52c372a83 100644 --- a/src/components/common/index.ts +++ b/src/components/common/index.ts @@ -41,3 +41,4 @@ export { default as DrawerCommon} from './DrawerCommon/DrawerCommon' export { default as CartDrawer} from './CartDrawer/CartDrawer' export { default as StaticImage} from './StaticImage/StaticImage' export { default as EmptyCommon} from './EmptyCommon/EmptyCommon' +export { default as CustomShapeSvg} from './CustomShapeSvg/CustomShapeSvg' diff --git a/src/styles/_utilities.scss b/src/styles/_utilities.scss index 6b919de76..fd604735b 100644 --- a/src/styles/_utilities.scss +++ b/src/styles/_utilities.scss @@ -112,6 +112,71 @@ border-radius: 60% 2% 2% 2%/ 6% 50% 50% 50%; } + .shape-common { + all: unset; + position: relative; + $border: 2px; + margin: $border; + color: white; + background: palevioletred; + background-size: cover; + clip-path: url(#svg-custom-shape); + } + + .shape-common-border { + all: unset; + position: relative; + $border: 2px; + margin: $border; + + .inner { + color: red; + background: papayawhip; + background-size: cover; + clip-path: url(#svg-custom-shape); + } + &::before { + position: absolute; + content: ""; + width: calc(100% + #{$border} * 2); + height: calc(100% + #{$border} * 2); + background-color: var(--primary); + top: calc(#{$border} * -1); + left: calc(#{$border} * -1); + clip-path: url(#svg-custom-shape); + z-index: -1; + } + } + + .shape-common-lg { + background-size: cover; + clip-path: url(#svgClip3); + padding: 2rem; + } + + .shape-common-lg-border { + position: relative; + $border: 2px; + margin: $border; + + .inner { + padding: 2rem; + background-size: cover; + clip-path: url(#svg-custom-shape-lg); + } + &::before { + position: absolute; + content: ""; + width: calc(100% + #{$border} * 2); + height: calc(100% + #{$border} * 2); + background-color: wheat; + top: calc(#{$border} * -1); + left: calc(#{$border} * -1); + clip-path: url(#svg-custom-shape-lg); + z-index: -1; + } + } + .font-heading { font-family: var(--font-heading); } @@ -135,7 +200,7 @@ &::-webkit-scrollbar-thumb { border-radius: 10px; - background-color: var(--primary) + background-color: var(--primary); } } From c508ad09313332656e2d80663d83cc4d322d7c0a Mon Sep 17 00:00:00 2001 From: lytrankieio123 Date: Fri, 10 Sep 2021 09:52:02 +0700 Subject: [PATCH 07/13] test: components in test.tsx --- pages/test.tsx | 8 +++++++- 1 file changed, 7 insertions(+), 1 deletion(-) diff --git a/pages/test.tsx b/pages/test.tsx index ddaceab57..df79aa089 100644 --- a/pages/test.tsx +++ b/pages/test.tsx @@ -1,6 +1,7 @@ import { - CollapseCommon, EmptyCommon, Layout, RelevantBlogPosts + CollapseCommon, EmptyCommon, ImgWithLink, Layout, RelevantBlogPosts, StaticImage } from 'src/components/common' +import TestImg from '../public/assets/bannerrecipes.png' const COLLAPSE_DATA = [ { @@ -65,6 +66,11 @@ export default function Test() {
    + + + + + ) } From 6e44c53e93c8cf2ce422ff5df94817ab14ee7483 Mon Sep 17 00:00:00 2001 From: lytrankieio123 Date: Fri, 10 Sep 2021 09:56:42 +0700 Subject: [PATCH 08/13] :bug: bug: empty img :%s --- pages/test.tsx | 2 -- .../common/EmptyCommon/EmptyCommon.tsx | 2 +- src/components/common/EmptyCommon/empty.png | Bin 0 -> 1534 bytes 3 files changed, 1 insertion(+), 3 deletions(-) create mode 100644 src/components/common/EmptyCommon/empty.png diff --git a/pages/test.tsx b/pages/test.tsx index df79aa089..5406d165a 100644 --- a/pages/test.tsx +++ b/pages/test.tsx @@ -69,8 +69,6 @@ export default function Test() { - - ) } diff --git a/src/components/common/EmptyCommon/EmptyCommon.tsx b/src/components/common/EmptyCommon/EmptyCommon.tsx index cc462e6af..8b5b3a132 100644 --- a/src/components/common/EmptyCommon/EmptyCommon.tsx +++ b/src/components/common/EmptyCommon/EmptyCommon.tsx @@ -1,5 +1,5 @@ import { StaticImage } from '..'; -import EmptyImg from './empty.svg'; +import EmptyImg from './empty.png'; import s from './EmptyCommon.module.scss'; diff --git a/src/components/common/EmptyCommon/empty.png b/src/components/common/EmptyCommon/empty.png new file mode 100644 index 0000000000000000000000000000000000000000..68d392d862225e693ee833604130dafba4e58e77 GIT binary patch literal 1534 zcmV0{{R3YIj|k0001EP)t-s0002Y z%*@Qp%*@Qp&CSin$H&jl&&|!v%gf8l%gfBn%*@Qp%*@Qp%*@Qp%*x8j&CSiu&d&e; z|IEzH)6>)W`T5z|+4A!8?Ck8&(9q`Q=HK7n;^N}z>FM0u-1YVK_V)G*eZKbq000tn zQchC<@4tZGAP}EGaA2>`kWes>9}uar^8f$^I7vi7RA}DqncaGuFbswXGO22h#|BS8>@U1$*WLohh5FNfPIwHxF3R;kNuZM7GmMziU zoG+lsLO8e*h_DFp9k4vjyTaSBI=WXwcq|0XBP_{;umxMZS52nFFn|@P$J^HsYjjKq z;uH?6DhuIZN+1;WUoyOpR=5Cq^kG6hn#QL?DTAOT2yuvR{L}!}_34y>P|#%%KdLWP z1D=OoRLhvuzZ$|W<&Mn`fHDMc#xL4*|9Gs_ymFr7#OQqFCBL0 z_4-^l+XUkTk>cx1N#?eN5bKHHd#u=+1Oo5`WnyenkM?W}q)|&RH2?}mGhaGjlf(+w zavZCe;^hzxV8h(3e>BA<f5(Z%-=Aa8?L4NPicqtSav zDGQ~E2p}S_CVh4kq@-*0MuLGEWl0?zLUPTf{vmUoHyfVQw^fJ&1?ir8gp) zA$+ui;8{?T{uZ|Z2T9{MD|n3Z57nK<^s|8>C7%MJlp@fb-NRiq063E=)()B4Mu}69 zRYn{Pu=A?!CkS=3guZgn%`tn&5h4jJ0Bp~{QSxoZ-G_%rhSA9v7d`7&pU|zc!$+JB z(I*frLo&G1z~>?4;x{2aK&|OMBx2qrwTw;xmF20?;f0=l@%Y;frjUbhxP3Je zs!~nc@ffNIM#6VtO(Q{H_hRH==}SYr*R%8RH6RD{FM;S}r%mDRCox23by$B90wxO# zGw;z~vnj)tWpX#Pd6y(r{=lM!=j&`5CQ1JU%bMVd3oF@8v*~ihU6ReCH!zD6Nm`uN zSb=i8X^S799oMjH-T1|kB8UQ)7gjyY!tOM#PabbUywd})1gESit?pv7DF8eOgiRI&pZRp!{REXKx{z>g%B~+ zN%`1p5A}MNKRkMak}Zl2fbDt!0bm25FFrP7km`e10P5%o`3$OC6M`WO@|r-3SOQit zgvJzf>cjwPjp;7j5q6s$K!(695f`TP#LA%eI33@%)uI}R>fzDNdL)`F09^>7VB9rd zEo*;Tuj}K@ESBf&qZr^4Ll7_it0C_pP%&`%l31lJy7nVmJ}i3(blle4XAQyH%iH-> zvFsu9p0`k|wM@sldP4gZjD)x{oty38<`!tGXLNuy!2*Y>RGSl4&6DrevSQz>7ijzZ ko5x+Vum0=5{_7v=C&XaDbp?|47ytkO07*qoM6N<$f?Uq@mH+?% literal 0 HcmV?d00001 From 14dd99c051c966a16ebd617652ff88ee55970bd4 Mon Sep 17 00:00:00 2001 From: quangnhankie Date: Fri, 10 Sep 2021 10:08:57 +0700 Subject: [PATCH 09/13] test --- pages/test.tsx | 4 ++-- 1 file changed, 2 insertions(+), 2 deletions(-) diff --git a/pages/test.tsx b/pages/test.tsx index 9dc9892be..dda0bc32e 100644 --- a/pages/test.tsx +++ b/pages/test.tsx @@ -12,12 +12,12 @@ export default function Test() {
    - Lorem ipsum dolor sit, amet consectetur adipisicing elit. Praesentium delectus incidunt et cupiditate soluta, deleniti dolorem tempora officia atque earum recusandae vitae libero molestiae quas officiis ducimus voluptas exercitationem. Dolor non illo distinctio, nemo numquam quo nihil debitis magni ullam quasi optio, commodi at! Error, asperiores sint. Labore, at ipsum. + Lorem ipsum dolor sit amet consectetur adipisicing elit. Nam vel optio fuga nobis nostrum! Magnam tenetur, et doloremque unde enim dolorem aspernatur nobis vitae impedit iste iure distinctio labore, quidem illo itaque necessitatibus eligendi magni architecto illum cumque corrupti esse a. Eius tenetur voluptas autem corrupti, amet porro beatae ratione maiores! Dolorum earum placeat totam corporis sint quae quam at vero eos magni amet, nisi eum qui natus exercitationem ea eveniet esse aut in. Ipsa hic saepe veritatis quas dignissimos corrupti sapiente quis, mollitia ducimus, ipsum ratione quos doloribus quidem, dolor neque! Eligendi quibusdam aspernatur, maxime vitae incidunt ipsam itaque ab distinctio? Architecto ratione deserunt saepe sequi alias accusantium harum quae itaque aut odit voluptates, hic beatae similique expedita! Modi, sunt exercitationem! Mollitia, eius! Molestiae nostrum, quas, ratione deleniti, adipisci pariatur omnis veniam blanditiis iste quia laboriosam est labore doloribus officiis repellendus consequatur. Ducimus impedit voluptate doloribus repellendus exercitationem mollitia labore ab totam reiciendis distinctio. Nesciunt dolor officiis reiciendis esse nostrum modi inventore, cum, veritatis placeat doloribus iure perspiciatis tempora a mollitia soluta fugit! Aspernatur necessitatibus provident, reiciendis sapiente temporibus labore. Optio tempora ipsam blanditiis fugiat sint reiciendis, deleniti itaque fuga omnis aut architecto animi, aliquam quis aliquid ipsum necessitatibus dolorem sequi aperiam magni non! Atque deserunt autem nihil, in voluptatem, natus quibusdam fugiat velit aspernatur ullam quam quo consequuntur eius. Pariatur dolor obcaecati quam reprehenderit, est corporis ea beatae quia numquam nemo in eum voluptatem ullam sequi atque? Quos neque voluptatem maxime, repellat cupiditate accusantium, maiores in aperiam, eveniet asperiores eligendi velit iusto voluptates dolores. Nostrum officia commodi dolore asperiores sequi, molestiae quasi. Deserunt, molestiae voluptate. Perferendis earum consectetur adipisci ratione nisi nihil minus. Ipsum voluptas dolorum voluptates dolores reprehenderit nemo, exercitationem labore, quas voluptatibus officiis fuga ullam ab, eius quae. Quibusdam perferendis iusto nobis, cupiditate officiis sapiente molestiae distinctio magnam dolore voluptatum quos ratione fugiat autem corporis rerum esse possimus perspiciatis ex officia eos numquam blanditiis assumenda natus. At nihil excepturi et consectetur nobis dicta tempora dolorum neque, saepe minima mollitia, officiis ex atque reprehenderit blanditiis animi dolore ratione quam. Id animi facere repudiandae eos facilis? Dolorum quae illo nam tempora, quasi ut placeat beatae minus consequatur libero maiores repudiandae, voluptates sed natus animi a. Cum numquam atque explicabo temporibus consequatur odit voluptates tenetur pariatur optio nihil eligendi ab veniam nisi velit quaerat natus, ea facere eveniet corrupti! Iste temporibus placeat tenetur incidunt obcaecati quam nulla nemo cum accusantium quo velit, maiores, esse illum ipsam dolore enim sunt, aspernatur illo provident delectus officia sit officiis qui! Ullam quam numquam mollitia reprehenderit? Facere, quos amet praesentium officia nostrum veritatis, autem laborum quidem architecto eveniet voluptatum, nisi voluptate totam saepe. Obcaecati non vitae accusantium voluptates iure voluptatem nulla, quaerat culpa officia quasi mollitia doloremque. Deserunt officia aliquid totam quibusdam, doloribus quos porro sit alias, perspiciatis facilis exercitationem inventore adipisci aliquam saepe ipsam dignissimos. Minima iste dolorem esse optio necessitatibus voluptas deserunt sint quam, veniam nulla vitae eaque omnis alias! Natus ut, doloribus quia laboriosam id voluptates? Quibusdam aliquid ea nemo.
    - Lorem ipsum dolor sit, amet consectetur adipisicing elit. Praesentium delectus incidunt et cupiditate soluta, deleniti dolorem tempora officia atque earum recusandae vitae libero molestiae quas officiis ducimus voluptas exercitationem. Dolor non illo distinctio, nemo numquam quo nihil debitis magni ullam quasi optio, commodi at! Error, asperiores sint. Labore, at ipsum. + Lorem ipsum dolor sit amet consectetur, adipisicing elit. Voluptate, maiores cum quam odit quia est magni aut reiciendis deleniti, ea quae, dolorem vero fuga veritatis culpa? Eum sunt quia et consequatur tenetur, atque eius illo quibusdam laudantium iusto quo cumque, ad dolor dicta eos inventore ipsa fugit voluptates similique incidunt doloribus? Dicta, ipsa? Suscipit porro dicta dolorum rem. Placeat provident quisquam excepturi obcaecati tempora, eaque incidunt accusantium suscipit velit ex quo, voluptatem eum inventore illum exercitationem beatae sint temporibus aliquid, unde expedita recusandae. Repudiandae, nesciunt natus adipisci, error consectetur, fugit magni ducimus est delectus voluptates cupiditate explicabo dolorem maxime hic. Natus, quidem beatae rem aliquam nobis illo reprehenderit, distinctio qui adipisci quaerat sapiente hic nisi ad. Voluptatem dolore eius eos doloribus quam repudiandae cum, culpa expedita error fugiat. Labore eius voluptatum reiciendis repellendus. Enim sapiente dolore tenetur totam esse laboriosam labore aperiam aspernatur! Magnam voluptas iure recusandae delectus, in impedit nobis aliquam debitis laudantium, explicabo quas molestiae quos rem quibusdam nemo placeat nam, dolore doloribus quaerat eum! Quam nesciunt architecto debitis consequuntur sint culpa exercitationem dicta numquam dolorum eius illum similique fuga magni veritatis sequi, et excepturi distinctio laborum quidem. Tempore debitis natus iure, enim molestiae provident? Sed dignissimos velit dolores quia recusandae quam? Beatae, officia dolor. Repellendus dicta provident veniam itaque beatae, eius labore sapiente aspernatur exercitationem ducimus quam est quas quaerat officia consequatur temporibus tempore! Iusto, voluptatum maxime provident, voluptatem ullam recusandae facere error, animi sequi quidem modi illo accusamus non consequuntur deserunt fuga sit labore cum dolorem delectus unde architecto! Mollitia consequuntur veniam sit nihil itaque praesentium temporibus inventore nemo odio necessitatibus eum corporis at et consequatur alias deserunt eligendi aliquid voluptatem quasi exercitationem, voluptatum quos aut voluptate ipsum? Error provident repellat fuga temporibus delectus rem, exercitationem doloremque voluptatem dignissimos, quod amet neque sed quidem nostrum deserunt est debitis obcaecati. Aspernatur veniam vel soluta labore expedita cum quo debitis ab exercitationem, saepe aliquam officia praesentium optio voluptatem atque. Voluptatem ullam et voluptas eligendi omnis fugiat? Ipsam laudantium beatae perspiciatis quis! Nemo optio, quia esse perspiciatis iste et veniam illum qui praesentium, expedita assumenda? Quae distinctio repellendus excepturi ut eos enim optio earum, laborum aperiam, sed sit alias incidunt voluptatibus? Officia, quos. Labore porro repellendus, suscipit praesentium possimus adipisci, quidem illum consequuntur ut id quae quas cum corrupti laboriosam nesciunt nisi dolorum ullam dolor nobis debitis, ipsam inventore? Doloribus dignissimos ipsa aliquid? Dolores nemo ab hic ipsum expedita maxime corporis recusandae inventore, aliquam voluptate voluptatibus dolor dignissimos suscipit explicabo, officia consequuntur officiis ipsam cumque debitis odio qui? Earum minus quaerat possimus ea laudantium laboriosam enim omnis molestias quod nesciunt vel vero officia, ad inventore voluptatem dicta dolorem rem voluptates ab quasi nisi, esse quis. Fuga ad animi reiciendis nulla officiis possimus adipisci ducimus eum, molestias neque enim doloremque nam recusandae labore commodi, quia sed illo fugit molestiae qui hic voluptate facere dignissimos. Dolor porro ab modi nam vitae architecto delectus quo et velit pariatur omnis quae in ullam ex quis rerum, corporis alias, nobis veritatis aperiam commodi hic!
    From e6d8d42ede62f83c22672973affe9bb0b5fdba5c Mon Sep 17 00:00:00 2001 From: lytrankieio123 Date: Fri, 10 Sep 2021 11:37:17 +0700 Subject: [PATCH 10/13] :bug: bug: fix header animation :%s --- .../common/Header/Header.module.scss | 33 +++++++----- src/components/common/Header/Header.tsx | 13 +++-- .../HeaderSubMenu/HeaderSubMenu.module.scss | 54 +++++++++---------- 3 files changed, 54 insertions(+), 46 deletions(-) diff --git a/src/components/common/Header/Header.module.scss b/src/components/common/Header/Header.module.scss index 15bcd9b72..99cd29fe0 100644 --- a/src/components/common/Header/Header.module.scss +++ b/src/components/common/Header/Header.module.scss @@ -1,10 +1,14 @@ @import "../../../styles/utilities"; .header { - @apply sticky bg-white shadow-md; + @apply sticky bg-white; top: 0; + left: 0; z-index: 9999; margin-bottom: 3.2rem; + @screen md { + @apply relative; + } &.full { @apply shadow-none; border: 1px solid var(--border-line); @@ -19,20 +23,25 @@ } .headerSticky { - position: sticky; - top: 0; + @apply sticky bg-white shadow-md; display: none; + padding-left: 3.2rem; + padding-right: 3.2rem; + top: 0; + left: 0; + z-index: 10000; + transition: all 0.2s; &.show { display: block; + animation: showHeaderSticky 0.2s; } } -// @keyframes showHeaderHightlight { -// 0% { -// transform: translateY(-4rem); -// } -// 100% { -// transform: none; -// } -// } - +@keyframes showHeaderSticky { + 0% { + transform: translateY(-7rem); + } + 100% { + transform: none; + } +} diff --git a/src/components/common/Header/Header.tsx b/src/components/common/Header/Header.tsx index 588bf68d1..8bb16a10f 100644 --- a/src/components/common/Header/Header.tsx +++ b/src/components/common/Header/Header.tsx @@ -19,7 +19,7 @@ const Header = memo(() => { const headerHeight = useMemo(() => { return headeFullRef.current?.offsetHeight - }, [headeFullRef]) + }, [headeFullRef.current]) useEffect(() => { const handleScroll = () => { @@ -42,15 +42,18 @@ const Header = memo(() => {
    - - +
    + +
    Date: Fri, 10 Sep 2021 11:42:50 +0700 Subject: [PATCH 11/13] :art: styles: cursor pointer btn cart in header :%s --- .../common/Header/components/HeaderMenu/HeaderMenu.module.scss | 1 + 1 file changed, 1 insertion(+) diff --git a/src/components/common/Header/components/HeaderMenu/HeaderMenu.module.scss b/src/components/common/Header/components/HeaderMenu/HeaderMenu.module.scss index 8327f5523..35387094b 100644 --- a/src/components/common/Header/components/HeaderMenu/HeaderMenu.module.scss +++ b/src/components/common/Header/components/HeaderMenu/HeaderMenu.module.scss @@ -63,6 +63,7 @@ } .btnCart { all: unset; + cursor: pointer; &:focus-visible { outline: 2px solid #000; } From 5d98948de4c5d32ed8671ea019048dbfea29141e Mon Sep 17 00:00:00 2001 From: lytrankieio123 Date: Fri, 10 Sep 2021 13:42:49 +0700 Subject: [PATCH 12/13] :art: styles: shape common :%s --- pages/test.tsx | 31 ++++++++++++++----------------- src/styles/_utilities.scss | 21 +++++---------------- 2 files changed, 19 insertions(+), 33 deletions(-) diff --git a/pages/test.tsx b/pages/test.tsx index dda0bc32e..5d4724c97 100644 --- a/pages/test.tsx +++ b/pages/test.tsx @@ -7,33 +7,30 @@ export default function Test() { return ( <> - - - + + + + + +
    Lorem ipsum dolor sit amet consectetur adipisicing elit. Nam vel optio fuga nobis nostrum! Magnam tenetur, et doloremque unde enim dolorem aspernatur nobis vitae impedit iste iure distinctio labore, quidem illo itaque necessitatibus eligendi magni architecto illum cumque corrupti esse a. Eius tenetur voluptas autem corrupti, amet porro beatae ratione maiores! Dolorum earum placeat totam corporis sint quae quam at vero eos magni amet, nisi eum qui natus exercitationem ea eveniet esse aut in. Ipsa hic saepe veritatis quas dignissimos corrupti sapiente quis, mollitia ducimus, ipsum ratione quos doloribus quidem, dolor neque! Eligendi quibusdam aspernatur, maxime vitae incidunt ipsam itaque ab distinctio? Architecto ratione deserunt saepe sequi alias accusantium harum quae itaque aut odit voluptates, hic beatae similique expedita! Modi, sunt exercitationem! Mollitia, eius! Molestiae nostrum, quas, ratione deleniti, adipisci pariatur omnis veniam blanditiis iste quia laboriosam est labore doloribus officiis repellendus consequatur. Ducimus impedit voluptate doloribus repellendus exercitationem mollitia labore ab totam reiciendis distinctio. Nesciunt dolor officiis reiciendis esse nostrum modi inventore, cum, veritatis placeat doloribus iure perspiciatis tempora a mollitia soluta fugit! Aspernatur necessitatibus provident, reiciendis sapiente temporibus labore. Optio tempora ipsam blanditiis fugiat sint reiciendis, deleniti itaque fuga omnis aut architecto animi, aliquam quis aliquid ipsum necessitatibus dolorem sequi aperiam magni non! Atque deserunt autem nihil, in voluptatem, natus quibusdam fugiat velit aspernatur ullam quam quo consequuntur eius. Pariatur dolor obcaecati quam reprehenderit, est corporis ea beatae quia numquam nemo in eum voluptatem ullam sequi atque? Quos neque voluptatem maxime, repellat cupiditate accusantium, maiores in aperiam, eveniet asperiores eligendi velit iusto voluptates dolores. Nostrum officia commodi dolore asperiores sequi, molestiae quasi. Deserunt, molestiae voluptate. Perferendis earum consectetur adipisci ratione nisi nihil minus. Ipsum voluptas dolorum voluptates dolores reprehenderit nemo, exercitationem labore, quas voluptatibus officiis fuga ullam ab, eius quae. Quibusdam perferendis iusto nobis, cupiditate officiis sapiente molestiae distinctio magnam dolore voluptatum quos ratione fugiat autem corporis rerum esse possimus perspiciatis ex officia eos numquam blanditiis assumenda natus. At nihil excepturi et consectetur nobis dicta tempora dolorum neque, saepe minima mollitia, officiis ex atque reprehenderit blanditiis animi dolore ratione quam. Id animi facere repudiandae eos facilis? Dolorum quae illo nam tempora, quasi ut placeat beatae minus consequatur libero maiores repudiandae, voluptates sed natus animi a. Cum numquam atque explicabo temporibus consequatur odit voluptates tenetur pariatur optio nihil eligendi ab veniam nisi velit quaerat natus, ea facere eveniet corrupti! Iste temporibus placeat tenetur incidunt obcaecati quam nulla nemo cum accusantium quo velit, maiores, esse illum ipsam dolore enim sunt, aspernatur illo provident delectus officia sit officiis qui! Ullam quam numquam mollitia reprehenderit? Facere, quos amet praesentium officia nostrum veritatis, autem laborum quidem architecto eveniet voluptatum, nisi voluptate totam saepe. Obcaecati non vitae accusantium voluptates iure voluptatem nulla, quaerat culpa officia quasi mollitia doloremque. Deserunt officia aliquid totam quibusdam, doloribus quos porro sit alias, perspiciatis facilis exercitationem inventore adipisci aliquam saepe ipsam dignissimos. Minima iste dolorem esse optio necessitatibus voluptas deserunt sint quam, veniam nulla vitae eaque omnis alias! Natus ut, doloribus quia laboriosam id voluptates? Quibusdam aliquid ea nemo.
    -
    -
    +
    +
    Lorem ipsum dolor sit amet consectetur, adipisicing elit. Voluptate, maiores cum quam odit quia est magni aut reiciendis deleniti, ea quae, dolorem vero fuga veritatis culpa? Eum sunt quia et consequatur tenetur, atque eius illo quibusdam laudantium iusto quo cumque, ad dolor dicta eos inventore ipsa fugit voluptates similique incidunt doloribus? Dicta, ipsa? Suscipit porro dicta dolorum rem. Placeat provident quisquam excepturi obcaecati tempora, eaque incidunt accusantium suscipit velit ex quo, voluptatem eum inventore illum exercitationem beatae sint temporibus aliquid, unde expedita recusandae. Repudiandae, nesciunt natus adipisci, error consectetur, fugit magni ducimus est delectus voluptates cupiditate explicabo dolorem maxime hic. Natus, quidem beatae rem aliquam nobis illo reprehenderit, distinctio qui adipisci quaerat sapiente hic nisi ad. Voluptatem dolore eius eos doloribus quam repudiandae cum, culpa expedita error fugiat. Labore eius voluptatum reiciendis repellendus. Enim sapiente dolore tenetur totam esse laboriosam labore aperiam aspernatur! Magnam voluptas iure recusandae delectus, in impedit nobis aliquam debitis laudantium, explicabo quas molestiae quos rem quibusdam nemo placeat nam, dolore doloribus quaerat eum! Quam nesciunt architecto debitis consequuntur sint culpa exercitationem dicta numquam dolorum eius illum similique fuga magni veritatis sequi, et excepturi distinctio laborum quidem. Tempore debitis natus iure, enim molestiae provident? Sed dignissimos velit dolores quia recusandae quam? Beatae, officia dolor. Repellendus dicta provident veniam itaque beatae, eius labore sapiente aspernatur exercitationem ducimus quam est quas quaerat officia consequatur temporibus tempore! Iusto, voluptatum maxime provident, voluptatem ullam recusandae facere error, animi sequi quidem modi illo accusamus non consequuntur deserunt fuga sit labore cum dolorem delectus unde architecto! Mollitia consequuntur veniam sit nihil itaque praesentium temporibus inventore nemo odio necessitatibus eum corporis at et consequatur alias deserunt eligendi aliquid voluptatem quasi exercitationem, voluptatum quos aut voluptate ipsum? Error provident repellat fuga temporibus delectus rem, exercitationem doloremque voluptatem dignissimos, quod amet neque sed quidem nostrum deserunt est debitis obcaecati. Aspernatur veniam vel soluta labore expedita cum quo debitis ab exercitationem, saepe aliquam officia praesentium optio voluptatem atque. Voluptatem ullam et voluptas eligendi omnis fugiat? Ipsam laudantium beatae perspiciatis quis! Nemo optio, quia esse perspiciatis iste et veniam illum qui praesentium, expedita assumenda? Quae distinctio repellendus excepturi ut eos enim optio earum, laborum aperiam, sed sit alias incidunt voluptatibus? Officia, quos. Labore porro repellendus, suscipit praesentium possimus adipisci, quidem illum consequuntur ut id quae quas cum corrupti laboriosam nesciunt nisi dolorum ullam dolor nobis debitis, ipsam inventore? Doloribus dignissimos ipsa aliquid? Dolores nemo ab hic ipsum expedita maxime corporis recusandae inventore, aliquam voluptate voluptatibus dolor dignissimos suscipit explicabo, officia consequuntur officiis ipsam cumque debitis odio qui? Earum minus quaerat possimus ea laudantium laboriosam enim omnis molestias quod nesciunt vel vero officia, ad inventore voluptatem dicta dolorem rem voluptates ab quasi nisi, esse quis. Fuga ad animi reiciendis nulla officiis possimus adipisci ducimus eum, molestias neque enim doloremque nam recusandae labore commodi, quia sed illo fugit molestiae qui hic voluptate facere dignissimos. Dolor porro ab modi nam vitae architecto delectus quo et velit pariatur omnis quae in ullam ex quis rerum, corporis alias, nobis veritatis aperiam commodi hic!
    -
    - Lorem ipsum dolor -
    -
    -
    - Lorem ipsum dolor sit -
    -
    - - - - ) } diff --git a/src/styles/_utilities.scss b/src/styles/_utilities.scss index fd604735b..c73526a27 100644 --- a/src/styles/_utilities.scss +++ b/src/styles/_utilities.scss @@ -113,26 +113,19 @@ } .shape-common { - all: unset; position: relative; $border: 2px; margin: $border; - color: white; - background: palevioletred; - background-size: cover; clip-path: url(#svg-custom-shape); } .shape-common-border { - all: unset; position: relative; $border: 2px; margin: $border; .inner { - color: red; - background: papayawhip; - background-size: cover; + background: var(--white); clip-path: url(#svg-custom-shape); } &::before { @@ -144,24 +137,21 @@ top: calc(#{$border} * -1); left: calc(#{$border} * -1); clip-path: url(#svg-custom-shape); - z-index: -1; } } .shape-common-lg { - background-size: cover; - clip-path: url(#svgClip3); + clip-path: url(#svg-custom-shape-lg); padding: 2rem; } - + .shape-common-lg-border { position: relative; $border: 2px; margin: $border; - + .inner { padding: 2rem; - background-size: cover; clip-path: url(#svg-custom-shape-lg); } &::before { @@ -169,11 +159,10 @@ content: ""; width: calc(100% + #{$border} * 2); height: calc(100% + #{$border} * 2); - background-color: wheat; + background-color: var(--primary); top: calc(#{$border} * -1); left: calc(#{$border} * -1); clip-path: url(#svg-custom-shape-lg); - z-index: -1; } } From b1d60a45cc16fb439df6041793fbe1d94014ff26 Mon Sep 17 00:00:00 2001 From: lytrankieio123 Date: Fri, 10 Sep 2021 13:50:02 +0700 Subject: [PATCH 13/13] test: shape common --- pages/test.tsx | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/pages/test.tsx b/pages/test.tsx index 5d4724c97..d5ec16ded 100644 --- a/pages/test.tsx +++ b/pages/test.tsx @@ -9,7 +9,7 @@ export default function Test() { <> -