crowetic/commerce
1
0
Fork 1
mirror of https://github.com/vercel/commerce.git synced 2025-07-22 12:24:18 +00:00
Code Issues Packages Projects Releases Wiki Activity

🎨 styles: custom shape

Browse Source 
:%s
This commit is contained in:
lytrankieio123
2021-09-10 09:28:38 +07:00
parent d27f20e9f8
commit bd7cf33a51
7 changed files with 127 additions and 3 deletions
Download Patch File Download Diff File Expand all files Collapse all files

20
pages/test.tsx
View File

@@ -44,6 +44,26 @@ export default function Test() {
<RelevantBlogPosts />
<EmptyCommon description="" />
<EmptyCommon description="No product" />
<div className="shape-common-lg" style={{ background: "blue" }}>
<div className="inner">
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.
</div>
</div>
<div className="shape-common-lg-border">
<div className="inner">
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.
</div>
</div>
<div className="shape-common">
Lorem ipsum dolor
</div>
<div className="shape-common-border">
<div className="inner">
Lorem ipsum dolor sit
</div>
</div>
</>
)

21
src/components/common/CustomShapeSvg/CustomShapeSvg.tsx Normal file
View File

@@ -0,0 +1,21 @@
const CustomShapeSvg = () => {
return (
<>
<svg width="0" height="0" viewBox="0 0 1 1" fill="none" xmlns="http://www.w3.org/2000/svg">
<clipPath id="svg-custom-shape" clipPathUnits="objectBoundingBox">
<path
d="M0.0172975 0.136181C0.0343229 -0.030626 0.360144 0.00272041 0.510753 0.00272041C0.640763 0.00272041 0.779987 0.0273237 0.944182 0.0678791C0.966966 0.0735065 0.986 0.126214 0.990073 0.19938C0.994835 0.284918 1 0.404512 1 0.520863C1 0.736726 0.993726 0.834689 0.982222 0.886228C0.943784 1.05844 0.733836 0.983992 0.493833 0.983992C0.30975 0.983992 0.127708 0.957276 0.052872 0.944826C0.0312385 0.941228 0.0126875 0.895116 0.00839312 0.826023C0.00415553 0.757843 0 0.662594 0 0.551233C0 0.345672 0.000272106 0.302988 0.0172975 0.136181Z"
fill="#B5B5B5" />
</clipPath>
</svg>
<svg width="0" height="0" viewBox="0 0 1 1" fill="none" xmlns="http://www.w3.org/2000/svg">
<clipPath id="svg-custom-shape-lg" clipPathUnits="objectBoundingBox">
<path d="M0.00309475 0.648049L0.016817 0.981984H0.165017L0.368106 0.987044C0.428484 0.985357 0.660022 0.997877 0.750058 0.998542C0.845065 0.999243 0.83562 1.00172 0.881179 0.998007C0.938818 0.993313 0.955418 0.966805 0.96914 0.941507C0.982862 0.916209 0.99209 0.790258 0.99384 0.76948C0.995632 0.748196 1.00207 0.572154 0.999329 0.425425C0.996584 0.278696 0.977373 0.0408933 0.96914 0.0257144C0.960907 0.0105355 0.546495 0.000416471 0.532773 0.000416471C0.519051 0.000416471 0.329256 -0.00466047 0.156356 0.0206377C-0.0165445 0.0459358 0.0135012 0.0186561 0.00526778 0.180564C-0.00116735 0.30711 -0.00147933 0.563722 0.00309475 0.648049Z" fill="#C4C4C4" />
</clipPath>
</svg>
</>
)
}
export default CustomShapeSvg

16
src/components/common/CustomShapeSvg/ViewAllItem.module.scss Normal file
View File

@@ -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);
}
}
}

3
src/components/common/Layout/Layout.tsx
View File

@@ -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<Props> = ({ children }) => {
<Header />
<main >{children}</main>
<button onClick={toggle}>toggle card: {visibleCartDrawer.toString()}</button>
<CustomShapeSvg/>
<CartDrawer
visible={visibleCartDrawer}
onClose={closeCartDrawer} />

2
src/components/common/StaticImage/StaticImage.tsx
View File

@@ -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 {

1
src/components/common/index.ts
View File

@@ -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'

67
src/styles/_utilities.scss
View File

@@ -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);
}
}