1
0
mirror of https://github.com/oceanprotocol/market.git synced 2024-06-17 09:53:26 +02:00

input size modifiers, add large

This commit is contained in:
Matthias Kretschmann 2020-10-31 00:55:00 +01:00
parent a670d3b2f1
commit e95d8044c6
Signed by: m
GPG Key ID: 606EEEF3C479A91F
4 changed files with 49 additions and 24 deletions

View File

@ -240,7 +240,8 @@ input[type='range']::-moz-range-track {
/* Size modifiers */
.small {
.small,
.select.small {
font-size: var(--font-size-small);
height: 34px;
padding: calc(var(--spacer) / 4);
@ -256,9 +257,32 @@ input[type='range']::-moz-range-track {
font-size: var(--font-size-mini);
}
.selectSmall {
composes: small;
height: 34px;
.select.small {
padding-right: 2rem;
/* custom arrow */
background-position: calc(100% - 14px) 1rem, calc(100% - 9px) 1rem, 100% 0;
background-size: 5px 5px, 5px 5px, 2rem 3rem;
}
.large,
.select.large {
font-size: var(--font-size-large);
height: 62px;
padding: calc(var(--spacer) / 1.5);
}
.large::placeholder {
font-size: var(--font-size-large);
}
.prefix.large,
.postfix.large {
height: 62px;
font-size: var(--font-size-base);
}
.select.large {
padding-right: 2rem;
/* custom arrow */

View File

@ -5,16 +5,19 @@ import { InputProps } from '.'
import FilesInput from '../../molecules/FormFields/FilesInput'
import Terms from '../../molecules/FormFields/Terms'
import Datatoken from '../../molecules/FormFields/Datatoken'
import classNames from 'classnames/bind'
const cx = classNames.bind(styles)
const DefaultInput = ({
small,
size,
prefix,
postfix,
additionalComponent,
...props
}: InputProps) => (
<input
className={`${styles.input} ${small ? styles.small : null}`}
className={cx({ input: true, [size]: size })}
id={props.name}
{...props}
/>
@ -26,7 +29,7 @@ export default function InputElement({
name,
prefix,
postfix,
small,
size,
field,
label,
help,
@ -34,14 +37,12 @@ export default function InputElement({
additionalComponent,
...props
}: InputProps): ReactElement {
const styleClasses = cx({ select: true, [size]: size })
switch (type) {
case 'select':
return (
<select
id={name}
className={`${styles.select} ${small && styles.selectSmall}`}
{...props}
>
<select id={name} className={styleClasses} {...props}>
{field !== undefined && field.value === '' && (
<option value="">---</option>
)}
@ -95,27 +96,23 @@ export default function InputElement({
return prefix || postfix ? (
<div className={`${prefix ? styles.prefixGroup : styles.postfixGroup}`}>
{prefix && (
<div className={`${styles.prefix} ${small ? styles.small : ''}`}>
{prefix}
</div>
<div className={cx({ prefix: true, [size]: size })}>{prefix}</div>
)}
<DefaultInput
name={name}
type={type || 'text'}
small={small}
size={size}
{...props}
/>
{postfix && (
<div className={`${styles.postfix} ${small ? styles.small : ''}`}>
{postfix}
</div>
<div className={cx({ postfix: true, [size]: size })}>{postfix}</div>
)}
</div>
) : (
<DefaultInput
name={name}
type={type || 'text'}
small={small}
size={size}
{...props}
/>
)

View File

@ -24,6 +24,10 @@
display: flex;
}
.inputGroup > div {
flex: 1;
}
.inputGroup input {
border-bottom-left-radius: var(--border-radius);
border-top-right-radius: 0;
@ -37,7 +41,7 @@
margin-top: 0;
margin-left: -1px;
width: fit-content;
min-width: 20%;
white-space: nowrap;
}
}

View File

@ -39,7 +39,7 @@ export interface InputProps {
postfix?: string | ReactElement
step?: string
defaultChecked?: boolean
small?: boolean
size?: 'small' | 'large' | 'default'
}
export default function Input(props: Partial<InputProps>): ReactElement {
@ -49,7 +49,7 @@ export default function Input(props: Partial<InputProps>): ReactElement {
label,
help,
additionalComponent,
small,
size,
field
} = props
@ -69,7 +69,7 @@ export default function Input(props: Partial<InputProps>): ReactElement {
<Label htmlFor={name} required={required}>
{label}
</Label>
<InputElement small={small} {...field} {...props} />
<InputElement size={size} {...field} {...props} />
{field && field.name !== 'price' && hasError && (
<div className={styles.error}>