Design popup form

This commit is contained in:
cyril lopez 2017-08-08 18:12:23 +02:00
parent 6acb764603
commit 5a77a003bd
8 changed files with 32 additions and 9 deletions

View File

@ -1,10 +1,16 @@
.inputSelect { /* stylelint-disable */
margin-top: 1.8rem;
font-size: 1.3rem;
font-family: Lato;
> label {
text-transform: capitalize;
margin-bottom: .7rem;
margin-bottom: .8rem;
}
> select {
font-size: 1.3rem;
font-family: Lato;
color: #333740;
height: 3.5rem!important;
border-radius: 0rem!important;
}
}

View File

@ -129,6 +129,7 @@ class List extends React.Component { // eslint-disable-line react/prefer-statele
<form onSubmit={this.handleSubmit}>
<ModalBody className={styles.modalBody}>
<div className={styles.spacerSmall} />
<PopUpForm {...this.props} />
</ModalBody>
<ModalFooter className={`${styles.noBorder} ${styles.modalFooter}`}>

View File

@ -131,7 +131,7 @@
.modalPosition {
margin-top: 48rem ;
margin-top: 22rem ;
margin-left: 25%;
width: 50%!important;
max-width: none;
@ -140,13 +140,13 @@
.modalBody {
padding: 0;
padding-top: .5rem;
padding-top: 2rem;
}
.modalFooter {
margin-top: 4.5rem;
margin-top: 1.1rem;
margin-bottom: 3.5rem;
padding-left: 3.1rem !important;
> input {
@ -160,6 +160,8 @@
}
.mHeader {
padding-top: 1.6rem;
padding-bottom: 1rem;
> h4 {
font-family: Lato;
font-weight: bold!important;
@ -205,3 +207,7 @@
margin-bottom: 1.6rem;
border-bottom: 1px solid rgba(14,22,34,0.04);
}
.spacerSmall {
margin-bottom: 0rem;
}

View File

@ -8,7 +8,7 @@
.defaultConnection {
position: absolute;
bottom: -9rem;
bottom: -5.4rem;
left: 3rem;
display: flex;

View File

@ -68,9 +68,11 @@ class RowDatabase extends React.Component { // eslint-disable-line react/prefer-
Databases
</ModalHeader>
<div className={styles.bordered} />
<form>
<ModalBody className={styles.modalBody}>
<div className={styles.spacerSmall} />
<PopUpForm {...this.props} />
</ModalBody>
<ModalFooter className={`${styles.noBorder} ${styles.modalFooter}`}>

View File

@ -13,6 +13,7 @@
> input {
margin-top: 4px;
margin-bottom: 1.1rem;
border-radius: 0.25rem;
height: 3.4rem;
line-height: 1.6rem;
font-family: Lato!important;
@ -35,6 +36,7 @@
margin-top: 4px;
margin-bottom: 1.1rem;
height: 3.4rem;
border-radius: 0.25rem;
line-height: 1.6rem;
font-family: Lato!important;
}
@ -42,7 +44,7 @@
.insideInput {
position: absolute;
top: 4.7rem;
top: 3.5rem;
right: 2.7rem;
color: #9EA7B8;
}

View File

@ -290,7 +290,9 @@ export class Home extends React.Component { // eslint-disable-line react/prefer-
return (
<div className={`col-md-6`}>
<FormattedMessage {...{id: item.name}} />
<div className={styles.modalLanguageLabel}>
<FormattedMessage {...{id: item.name}} />
</div>
<Select
name={item.target}
value={value}
@ -299,7 +301,7 @@ export class Home extends React.Component { // eslint-disable-line react/prefer-
valueComponent={this.valueComponent}
optionComponent={this.optionComponent}
clearable={false}
/>
</div>
)

View File

@ -30,3 +30,7 @@
margin-left: 3rem;
}
}
.modalLanguageLabel {
padding-bottom: 10px;
}