1
0
mirror of https://github.com/oceanprotocol/commons.git synced 2023-03-15 18:03:00 +01:00

row & label splitup

This commit is contained in:
Matthias Kretschmann 2019-01-24 14:52:50 +01:00
parent 32f737dca7
commit eb90543677
Signed by: m
GPG Key ID: 606EEEF3C479A91F
6 changed files with 63 additions and 33 deletions

View File

@ -1,9 +1,5 @@
@import '../../../styles/variables';
.formGroup {
margin-bottom: $spacer;
}
.inputWrap {
background: $brand-gradient;
border-radius: $border-radius;
@ -95,27 +91,6 @@
// }
}
.label {
color: $brand-grey;
font-size: $font-size-base;
font-family: $font-family-title;
line-height: 1.2;
display: block;
margin-bottom: $spacer / 6;
}
.required {
composes: label;
&:after {
content: '*';
font-size: $font-size-base;
color: $brand-grey-light;
display: inline-block;
margin-left: .1rem;
}
}
.select {
composes: input;
height: 43px;

View File

@ -2,6 +2,8 @@ import React, { PureComponent } from 'react'
// import { ReactComponent as SearchIcon } from '../../../svg/search.svg'
import Help from './Help'
import styles from './Input.module.scss'
import Label from './Label'
import Row from './Row'
interface IInputProps {
name: string
@ -63,14 +65,10 @@ export default class Input extends PureComponent<IInputProps, IInputState> {
} = this.props
return (
<div className={styles.formGroup}>
<label
htmlFor={name}
className={required ? styles.required : styles.label}
title={required ? 'Required' : ''}
>
<Row>
<Label htmlFor={name} required={required}>
{label}
</label>
</Label>
<div className={this.inputWrapClasses()}>
<Tag
id={name}
@ -89,7 +87,7 @@ export default class Input extends PureComponent<IInputProps, IInputState> {
{help && <Help>{help}</Help>}
{additionalComponent && additionalComponent}
</div>
</Row>
)
}
}

View File

@ -0,0 +1,22 @@
@import '../../../styles/variables';
.label {
color: $brand-grey;
font-size: $font-size-base;
font-family: $font-family-title;
line-height: 1.2;
display: block;
margin-bottom: $spacer / 6;
}
.required {
composes: label;
&:after {
content: '*';
font-size: $font-size-base;
color: $brand-grey-light;
display: inline-block;
margin-left: .1rem;
}
}

View File

@ -0,0 +1,22 @@
import React from 'react'
import styles from './Label.module.scss'
const Label = ({
required,
children,
...props
}: {
required?: boolean
children: string
htmlFor: string
}) => (
<label
className={required ? styles.required : styles.label}
{...props}
title={required ? 'Required' : ''}
>
{children}
</label>
)
export default Label

View File

@ -0,0 +1,5 @@
@import '../../../styles/variables';
.row {
margin-bottom: $spacer;
}

View File

@ -0,0 +1,8 @@
import React from 'react'
import styles from './Row.module.scss'
const Row = ({ children }: { children: any }) => (
<div className={styles.row}>{children}</div>
)
export default Row