mirror of
https://github.com/vercel/commerce.git
synced 2025-07-22 12:24:18 +00:00
🎨 styles: button common with shape common
:%s
This commit is contained in:
@@ -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/> */}
|
||||||
|
@@ -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;
|
||||||
|
}
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
|
@@ -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>
|
||||||
)
|
)
|
||||||
})
|
})
|
||||||
|
@@ -25,9 +25,6 @@ const DATA = [
|
|||||||
|
|
||||||
const option = {
|
const option = {
|
||||||
slidesPerView: 1,
|
slidesPerView: 1,
|
||||||
// mode: "free",
|
|
||||||
|
|
||||||
|
|
||||||
}
|
}
|
||||||
|
|
||||||
const ProductImgs = ({ }: Props) => {
|
const ProductImgs = ({ }: Props) => {
|
||||||
|
@@ -64,6 +64,9 @@
|
|||||||
margin-left: 0.8rem;
|
margin-left: 0.8rem;
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
svg path {
|
||||||
|
fill: currentColor;
|
||||||
|
}
|
||||||
}
|
}
|
||||||
button {
|
button {
|
||||||
@apply w-full;
|
@apply w-full;
|
||||||
|
@@ -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 {
|
||||||
|
Reference in New Issue
Block a user