🎨 styles: button common with shape common

:%s
This commit is contained in:
lytrankieio123
2021-09-13 13:14:43 +07:00
parent 829aeaa847
commit fa84e88212
6 changed files with 104 additions and 71 deletions

View File

@@ -78,6 +78,11 @@ export default function Test() {
} }
return ( return (
<> <>
<div className="shape-common-border">
<div className="inner">
Lorem ipsum dolor sit amet.
</div>
</div>
{/* <BlogDetailPage /> */} {/* <BlogDetailPage /> */}
{/* <RecipeListPage/> */} {/* <RecipeListPage/> */}

View File

@@ -1,102 +1,124 @@
@import "../../../styles/utilities"; @import "../../../styles/utilities";
.buttonCommon { .buttonCommon {
@apply custom-border-radius bg-primary transition-all duration-200 text-white font-bold; @apply shape-common;
display: flex; .inner {
justify-content: center; padding: 1rem 2rem;
align-items: center; @apply bg-primary transition-all duration-200 text-white font-bold;
padding: 1rem 2rem; display: flex;
@screen md { justify-content: center;
padding: 0.8rem 1.6rem; align-items: center;
} @screen md {
@screen lg { padding: 1.6rem 1.6rem;
padding: 0.8rem 3.2rem; }
} @screen lg {
&:disabled { padding: 1.6rem 3.2rem;
filter: brightness(0.9); }
cursor: not-allowed; &:disabled {
color: var(--disabled); filter: brightness(0.9);
} cursor: not-allowed;
&:hover { color: var(--disabled);
@apply shadow-md; }
&:not(:disabled) { &:hover {
@apply shadow-md;
&:not(:disabled) {
filter: brightness(1.05);
}
}
&:focus {
outline: none;
filter: brightness(1.05); 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 { &.loading {
&::before { .inner {
content: ""; &::after {
border-radius: 50%; content: "";
width: 1.6rem; border-radius: 50%;
height: 1.6rem; width: 1.6rem;
border: 3px solid rgba(170, 170, 170, 0.5); height: 1.6rem;
border-top: 3px solid var(--white); border: 3px solid rgba(170, 170, 170, 0.5);
-webkit-animation: spin 2s linear infinite; border-top: 3px solid var(--white);
animation: spin 2s linear infinite; -webkit-animation: spin 2s linear infinite;
margin-right: 0.8rem; animation: spin 2s linear infinite;
margin-right: 0.8rem;
}
} }
} }
&.light { &.light {
@apply text-base bg-white; @apply shape-common-border;
border: 1px solid var(--text-active); &::before {
background-color: var(--text-active);
}
.inner {
@apply text-base bg-white;
}
&.loading { &.loading {
&::before { .inner {
border-top-color: var(--primary); &::after {
border-top-color: var(--primary);
}
} }
} }
} }
&.lightBorderNone { &.lightBorderNone {
@apply bg-white text-primary; .inner {
@apply bg-white text-primary;
}
&.loading { &.loading {
&::before { .inner::after {
border-top-color: var(--primary); border-top-color: var(--primary);
} }
} }
} }
&.ghost { &.ghost {
@apply bg-white text-primary; @apply shape-common-border;
border: 1px solid var(--primary); .inner {
@apply bg-white text-primary;
}
&::before {
background-color: var(--primary);
}
&.loading { &.loading {
&::before { .inner::after {
border-top-color: var(--text-active); border-top-color: var(--text-active);
} }
} }
} }
&.onlyIcon { &.onlyIcon {
padding: 0.8rem; .inner {
.icon { padding: 1.6rem;
margin: 0; .icon {
margin: 0;
}
} }
} }
&.large { &.large {
padding: 1rem 1.5rem; .inner {
&.onlyIcon { padding: 1rem 1.5rem;
padding: 1rem;
}
@screen md {
padding: 1.6rem 3.2rem;
&.onlyIcon { &.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 { &.loading {
&::before { .inner::before {
width: 2.4rem; width: 2.4rem;
height: 2.4rem; height: 2.4rem;
} }
@@ -104,9 +126,11 @@
} }
&.preserve { &.preserve {
flex-direction: row-reverse; .inner {
.icon { flex-direction: row-reverse;
margin: 0 0 0 1.6rem; .icon {
margin: 0 0 0 1.6rem;
}
} }
} }

View File

@@ -27,10 +27,12 @@ const ButtonCommon = memo(({ type = 'primary', size = 'default', loading = false
disabled={disabled} disabled={disabled}
onClick={onClick} onClick={onClick}
> >
{ <div className={s.inner}>
icon && <span className={s.icon}>{icon}</span> {
} icon && <span className={s.icon}>{icon}</span>
<span className={s.label}>{children}</span> }
<span className={s.label}>{children}</span>
</div>
</button> </button>
) )
}) })

View File

@@ -25,9 +25,6 @@ const DATA = [
const option = { const option = {
slidesPerView: 1, slidesPerView: 1,
// mode: "free",
} }
const ProductImgs = ({ }: Props) => { const ProductImgs = ({ }: Props) => {

View File

@@ -64,6 +64,9 @@
margin-left: 0.8rem; margin-left: 0.8rem;
} }
} }
svg path {
fill: currentColor;
}
} }
button { button {
@apply w-full; @apply w-full;

View File

@@ -121,12 +121,13 @@
.shape-common-border { .shape-common-border {
position: relative; position: relative;
$border: 2px; $border: 1px;
margin: $border; margin: $border;
.inner { .inner {
background: var(--white); background: var(--white);
clip-path: url(#svg-custom-shape); clip-path: url(#svg-custom-shape);
margin: 1px;
} }
&::before { &::before {
position: absolute; position: absolute;
@@ -152,6 +153,7 @@
.inner { .inner {
padding: 2rem; padding: 2rem;
margin: 1px;
clip-path: url(#svg-custom-shape-lg); clip-path: url(#svg-custom-shape-lg);
} }
&::before { &::before {