🎨 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 (
<>
<div className="shape-common-border">
<div className="inner">
Lorem ipsum dolor sit amet.
</div>
</div>
{/* <BlogDetailPage /> */}
{/* <RecipeListPage/> */}

View File

@@ -1,16 +1,18 @@
@import "../../../styles/utilities";
.buttonCommon {
@apply custom-border-radius bg-primary transition-all duration-200 text-white font-bold;
@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;
padding: 1rem 2rem;
@screen md {
padding: 0.8rem 1.6rem;
padding: 1.6rem 1.6rem;
}
@screen lg {
padding: 0.8rem 3.2rem;
padding: 1.6rem 3.2rem;
}
&:disabled {
filter: brightness(0.9);
@@ -30,9 +32,10 @@
&:focus-visible {
outline: 2px solid var(--text-active);
}
}
&.loading {
&::before {
.inner {
&::after {
content: "";
border-radius: 50%;
width: 1.6rem;
@@ -44,44 +47,62 @@
margin-right: 0.8rem;
}
}
}
&.light {
@apply text-base bg-white;
border: 1px solid var(--text-active);
&.loading {
@apply shape-common-border;
&::before {
background-color: var(--text-active);
}
.inner {
@apply text-base bg-white;
}
&.loading {
.inner {
&::after {
border-top-color: var(--primary);
}
}
}
}
&.lightBorderNone {
.inner {
@apply bg-white text-primary;
}
&.loading {
&::before {
.inner::after {
border-top-color: var(--primary);
}
}
}
&.ghost {
@apply shape-common-border;
.inner {
@apply bg-white text-primary;
border: 1px solid var(--primary);
&.loading {
}
&::before {
background-color: var(--primary);
}
&.loading {
.inner::after {
border-top-color: var(--text-active);
}
}
}
&.onlyIcon {
padding: 0.8rem;
.inner {
padding: 1.6rem;
.icon {
margin: 0;
}
}
}
&.large {
.inner {
padding: 1rem 1.5rem;
&.onlyIcon {
padding: 1rem;
@@ -95,8 +116,9 @@
@screen lg {
padding: 1.6rem 4.8rem;
}
}
&.loading {
&::before {
.inner::before {
width: 2.4rem;
height: 2.4rem;
}
@@ -104,11 +126,13 @@
}
&.preserve {
.inner {
flex-direction: row-reverse;
.icon {
margin: 0 0 0 1.6rem;
}
}
}
.icon {
margin: 0 1.6rem 0 0;

View File

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

View File

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

View File

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

View File

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