From fa84e88212c8e48966add25e68994462cb8850ba Mon Sep 17 00:00:00 2001 From: lytrankieio123 Date: Mon, 13 Sep 2021 13:14:43 +0700 Subject: [PATCH] :art: styles: button common with shape common :%s --- pages/test.tsx | 5 + .../ButtonCommon/ButtonCommon.module.scss | 150 ++++++++++-------- .../common/ButtonCommon/ButtonCommon.tsx | 10 +- .../components/ProductImgs/ProductImgs.tsx | 3 - .../ProductInfo/ProductInfo.module.scss | 3 + src/styles/_utilities.scss | 4 +- 6 files changed, 104 insertions(+), 71 deletions(-) diff --git a/pages/test.tsx b/pages/test.tsx index 644dc08ed..aa3fd1780 100644 --- a/pages/test.tsx +++ b/pages/test.tsx @@ -78,6 +78,11 @@ export default function Test() { } return ( <> +
+
+ Lorem ipsum dolor sit amet. +
+
{/* */} {/* */} diff --git a/src/components/common/ButtonCommon/ButtonCommon.module.scss b/src/components/common/ButtonCommon/ButtonCommon.module.scss index c7b9f1ffa..41ecee010 100644 --- a/src/components/common/ButtonCommon/ButtonCommon.module.scss +++ b/src/components/common/ButtonCommon/ButtonCommon.module.scss @@ -1,102 +1,124 @@ @import "../../../styles/utilities"; .buttonCommon { - @apply custom-border-radius bg-primary transition-all duration-200 text-white font-bold; - display: flex; - justify-content: center; - align-items: center; - padding: 1rem 2rem; - @screen md { - padding: 0.8rem 1.6rem; - } - @screen lg { - padding: 0.8rem 3.2rem; - } - &:disabled { - filter: brightness(0.9); - cursor: not-allowed; - color: var(--disabled); - } - &:hover { - @apply shadow-md; - &:not(:disabled) { + @apply shape-common; + .inner { + padding: 1rem 2rem; + @apply bg-primary transition-all duration-200 text-white font-bold; + display: flex; + justify-content: center; + align-items: center; + @screen md { + padding: 1.6rem 1.6rem; + } + @screen lg { + padding: 1.6rem 3.2rem; + } + &:disabled { + filter: brightness(0.9); + cursor: not-allowed; + color: var(--disabled); + } + &:hover { + @apply shadow-md; + &:not(:disabled) { + filter: brightness(1.05); + } + } + &:focus { + outline: none; filter: brightness(1.05); } + &:focus-visible { + outline: 2px solid var(--text-active); + } } - &:focus { - outline: none; - filter: brightness(1.05); - } - &:focus-visible { - outline: 2px solid var(--text-active); - } - &.loading { - &::before { - content: ""; - border-radius: 50%; - width: 1.6rem; - height: 1.6rem; - border: 3px solid rgba(170, 170, 170, 0.5); - border-top: 3px solid var(--white); - -webkit-animation: spin 2s linear infinite; - animation: spin 2s linear infinite; - margin-right: 0.8rem; + .inner { + &::after { + content: ""; + border-radius: 50%; + width: 1.6rem; + height: 1.6rem; + border: 3px solid rgba(170, 170, 170, 0.5); + border-top: 3px solid var(--white); + -webkit-animation: spin 2s linear infinite; + animation: spin 2s linear infinite; + margin-right: 0.8rem; + } } } &.light { - @apply text-base bg-white; - border: 1px solid var(--text-active); + @apply shape-common-border; + &::before { + background-color: var(--text-active); + } + .inner { + @apply text-base bg-white; + } &.loading { - &::before { - border-top-color: var(--primary); + .inner { + &::after { + border-top-color: var(--primary); + } } } } &.lightBorderNone { - @apply bg-white text-primary; + .inner { + @apply bg-white text-primary; + } &.loading { - &::before { + .inner::after { border-top-color: var(--primary); } } } &.ghost { - @apply bg-white text-primary; - border: 1px solid var(--primary); + @apply shape-common-border; + .inner { + @apply bg-white text-primary; + } + &::before { + background-color: var(--primary); + } &.loading { - &::before { + .inner::after { border-top-color: var(--text-active); } } } &.onlyIcon { - padding: 0.8rem; - .icon { - margin: 0; + .inner { + padding: 1.6rem; + .icon { + margin: 0; + } } } &.large { - padding: 1rem 1.5rem; - &.onlyIcon { - padding: 1rem; - } - @screen md { - padding: 1.6rem 3.2rem; + .inner { + padding: 1rem 1.5rem; &.onlyIcon { - padding: 1.6rem; + padding: 1rem; + } + @screen md { + padding: 1.6rem 3.2rem; + &.onlyIcon { + padding: 1.6rem; + } + } + @screen lg { + padding: 1.6rem 4.8rem; } } - @screen lg { - padding: 1.6rem 4.8rem; - } &.loading { - &::before { + .inner::before { width: 2.4rem; height: 2.4rem; } @@ -104,9 +126,11 @@ } &.preserve { - flex-direction: row-reverse; - .icon { - margin: 0 0 0 1.6rem; + .inner { + flex-direction: row-reverse; + .icon { + margin: 0 0 0 1.6rem; + } } } diff --git a/src/components/common/ButtonCommon/ButtonCommon.tsx b/src/components/common/ButtonCommon/ButtonCommon.tsx index 5b943f65b..965e9519e 100644 --- a/src/components/common/ButtonCommon/ButtonCommon.tsx +++ b/src/components/common/ButtonCommon/ButtonCommon.tsx @@ -27,10 +27,12 @@ const ButtonCommon = memo(({ type = 'primary', size = 'default', loading = false disabled={disabled} onClick={onClick} > - { - icon && {icon} - } - {children} +
+ { + icon && {icon} + } + {children} +
) }) diff --git a/src/components/modules/product-detail/ProductInfoDetail/components/ProductImgs/ProductImgs.tsx b/src/components/modules/product-detail/ProductInfoDetail/components/ProductImgs/ProductImgs.tsx index 9a6d3da75..c300fba38 100644 --- a/src/components/modules/product-detail/ProductInfoDetail/components/ProductImgs/ProductImgs.tsx +++ b/src/components/modules/product-detail/ProductInfoDetail/components/ProductImgs/ProductImgs.tsx @@ -25,9 +25,6 @@ const DATA = [ const option = { slidesPerView: 1, - // mode: "free", - - } const ProductImgs = ({ }: Props) => { diff --git a/src/components/modules/product-detail/ProductInfoDetail/components/ProductInfo/ProductInfo.module.scss b/src/components/modules/product-detail/ProductInfoDetail/components/ProductInfo/ProductInfo.module.scss index 403782c51..2119b3295 100644 --- a/src/components/modules/product-detail/ProductInfoDetail/components/ProductInfo/ProductInfo.module.scss +++ b/src/components/modules/product-detail/ProductInfoDetail/components/ProductInfo/ProductInfo.module.scss @@ -64,6 +64,9 @@ margin-left: 0.8rem; } } + svg path { + fill: currentColor; + } } button { @apply w-full; diff --git a/src/styles/_utilities.scss b/src/styles/_utilities.scss index c73526a27..5ce5f24af 100644 --- a/src/styles/_utilities.scss +++ b/src/styles/_utilities.scss @@ -121,12 +121,13 @@ .shape-common-border { position: relative; - $border: 2px; + $border: 1px; margin: $border; .inner { background: var(--white); clip-path: url(#svg-custom-shape); + margin: 1px; } &::before { position: absolute; @@ -152,6 +153,7 @@ .inner { padding: 2rem; + margin: 1px; clip-path: url(#svg-custom-shape-lg); } &::before {