mirror of
https://github.com/vercel/commerce.git
synced 2025-07-22 12:24:18 +00:00
🎨 styles: fix shape input common
:%s
This commit is contained in:
@@ -15,10 +15,10 @@
|
|||||||
.icon + .inputCommon {
|
.icon + .inputCommon {
|
||||||
padding-left: 4.8rem;
|
padding-left: 4.8rem;
|
||||||
}
|
}
|
||||||
|
|
||||||
.inputCommon {
|
.inputCommon {
|
||||||
@apply block w-full transition-all duration-200 rounded bg-white;
|
@apply block w-full transition-all duration-200 rounded bg-white;
|
||||||
padding: 1.2rem 1.6rem;
|
padding: 1.6rem;
|
||||||
border: 1px solid var(--border-line);
|
border: 1px solid var(--border-line);
|
||||||
&:hover,
|
&:hover,
|
||||||
&:focus,
|
&:focus,
|
||||||
@@ -31,24 +31,6 @@
|
|||||||
&::placeholder {
|
&::placeholder {
|
||||||
@apply text-label;
|
@apply text-label;
|
||||||
}
|
}
|
||||||
|
|
||||||
&.custom {
|
|
||||||
@apply custom-border-radius;
|
|
||||||
border: 1px solid transparent;
|
|
||||||
background: var(--gray);
|
|
||||||
&:hover,
|
|
||||||
&:focus,
|
|
||||||
&:active {
|
|
||||||
border: 1px solid var(--primary);
|
|
||||||
}
|
|
||||||
}
|
|
||||||
&.bgTransparent {
|
|
||||||
background: rgb(227, 242, 233, 0.3);
|
|
||||||
color: var(--white);
|
|
||||||
&::placeholder {
|
|
||||||
color: var(--white);
|
|
||||||
}
|
|
||||||
}
|
|
||||||
}
|
}
|
||||||
|
|
||||||
&.preserve {
|
&.preserve {
|
||||||
@@ -91,4 +73,27 @@
|
|||||||
color: var(--negative);
|
color: var(--negative);
|
||||||
margin-top: 0.4rem;
|
margin-top: 0.4rem;
|
||||||
}
|
}
|
||||||
|
|
||||||
|
&.custom {
|
||||||
|
@apply shape-common;
|
||||||
|
.inputCommon {
|
||||||
|
border: none;
|
||||||
|
background: var(--background-gray);
|
||||||
|
&:hover,
|
||||||
|
&:focus,
|
||||||
|
&:active {
|
||||||
|
@apply shadow-md;
|
||||||
|
border: none;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
&.bgTransparent {
|
||||||
|
.inputCommon {
|
||||||
|
background: rgb(227, 242, 233, 0.3);
|
||||||
|
color: var(--white);
|
||||||
|
&::placeholder {
|
||||||
|
color: var(--white);
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
}
|
}
|
||||||
|
@@ -6,7 +6,7 @@ import s from './InputCommon.module.scss';
|
|||||||
|
|
||||||
type Ref = {
|
type Ref = {
|
||||||
focus: () => void
|
focus: () => void
|
||||||
getValue: () => string | number
|
getValue: () => string | number
|
||||||
} | null;
|
} | null;
|
||||||
interface Props {
|
interface Props {
|
||||||
children?: React.ReactNode,
|
children?: React.ReactNode,
|
||||||
@@ -63,6 +63,9 @@ const InputCommon = forwardRef<Ref, Props>(({ value, placeholder, type, styleTyp
|
|||||||
return (
|
return (
|
||||||
<div className={classNames({
|
<div className={classNames({
|
||||||
[s.inputWrap]: true,
|
[s.inputWrap]: true,
|
||||||
|
[s[styleType]]: true,
|
||||||
|
[s.bgTransparent]: backgroundTransparent
|
||||||
|
|
||||||
})}>
|
})}>
|
||||||
<div className={classNames({
|
<div className={classNames({
|
||||||
[s.inputInner]: true,
|
[s.inputInner]: true,
|
||||||
@@ -80,8 +83,6 @@ const InputCommon = forwardRef<Ref, Props>(({ value, placeholder, type, styleTyp
|
|||||||
onKeyDown={handleKeyDown}
|
onKeyDown={handleKeyDown}
|
||||||
className={classNames({
|
className={classNames({
|
||||||
[s.inputCommon]: true,
|
[s.inputCommon]: true,
|
||||||
[s[styleType]]: true,
|
|
||||||
[s.bgTransparent]: backgroundTransparent
|
|
||||||
})}
|
})}
|
||||||
/>
|
/>
|
||||||
</div>
|
</div>
|
||||||
|
Reference in New Issue
Block a user