improve top and bottom positioning for multiple steps

This commit is contained in:
Ben Wheeler 2019-08-21 03:57:07 +02:00
parent ae8f5a1e90
commit 01941b16de
2 changed files with 12 additions and 3 deletions

View file

@ -68,6 +68,7 @@ class CountryStep extends React.Component {
return ( return (
<JoinFlowStep <JoinFlowStep
description={this.props.intl.formatMessage({id: 'registration.countryStepDescription'})} description={this.props.intl.formatMessage({id: 'registration.countryStepDescription'})}
descriptionClassName="join-flow-country-description"
headerImgSrc="/images/join-flow/country-header.png" headerImgSrc="/images/join-flow/country-header.png"
innerClassName="join-flow-inner-country-step" innerClassName="join-flow-inner-country-step"
title={this.props.intl.formatMessage({id: 'registration.countryStepTitle'})} title={this.props.intl.formatMessage({id: 'registration.countryStepTitle'})}

View file

@ -79,7 +79,8 @@
} }
.join-flow-inner-birthdate-step { .join-flow-inner-birthdate-step {
padding-top: 3.5rem; padding-top: 1rem;
padding-bottom: 2.25rem;
} }
.join-flow-inner-gender-step { .join-flow-inner-gender-step {
@ -90,7 +91,8 @@
} }
.join-flow-inner-country-step { .join-flow-inner-country-step {
padding-top: 3.25rem; padding-top: 1rem;
padding-bottom: 2rem;
} }
.join-flow-inner-email-step { .join-flow-inner-email-step {
@ -102,8 +104,10 @@
} }
.join-flow-birthdate-description { .join-flow-birthdate-description {
margin-left: -.5rem; margin-top: 1.25rem;
margin-right: -.5rem; margin-right: -.5rem;
margin-bottom: 2rem;
margin-left: -.5rem;
} }
.join-flow-gender-description { .join-flow-gender-description {
@ -111,6 +115,10 @@
margin-bottom: 1.25rem; margin-bottom: 1.25rem;
} }
.join-flow-country-description {
margin-top: 1rem;
}
.gender-radio-row { .gender-radio-row {
transition: all .125s ease; transition: all .125s ease;
width: 20.875rem; width: 20.875rem;