switch to a LoginPage wrapper component

>
> as it's much nicer in the CSS to wrap the LoginBox as needed rather than have separate header & footer divs floating above and below it which need to be correctly vertically centered
This commit is contained in:
Matthew Hodgson 2017-10-24 23:42:52 +01:00
parent 190811ac1c
commit b053f08991
2 changed files with 298 additions and 261 deletions

View File

@ -18,304 +18,337 @@ limitations under the License.
// Ideally this would be all Status prefixes for a Status specific version of the component // Ideally this would be all Status prefixes for a Status specific version of the component
// but given we're not doing Status as a dedicated 'skin' yet... // but given we're not doing Status as a dedicated 'skin' yet...
.mx_Login { .mx_StatusLogin {
flex-direction: column;
width: 100%;
height: 100%;
display: flex;
align-items: center; align-items: center;
justify-content: center; justify-content: center;
}
.mx_Login_box { overflow: auto;
width: 350px;
min-height: initial;
padding-top: 20px;
padding-bottom: 10px;
padding-left: 33px;
padding-right: 33px;
border-radius: 8px;
margin: initial;
background-color: $form-bg-color;
box-shadow: 0px 5px 16px 0px rgba(25,12,46,0.16);
position: relative;
}
.mx_Login_logo { .mx_StatusLogin_brand {
background-color: #fff; position: absolute;
width: 74px; top: 30px;
height: 74px; left: 30px;
border-radius: 37px; }
box-shadow: 0px 2px 4px 0px rgba(0,0,0,0.5);
position: absolute;
top: -36px;
left: 50%;
margin-left: -36px;
}
.mx_Login_logo img { .mx_StatusLogin_content {
width: 36px; margin: auto;
height: 36px; }
padding: 19px;
}
.mx_Login_box h2 { .mx_StatusLogin_header {
text-align: center; text-align: center;
color: $form-fg-color; margin-top: 70px;
font-size: 25px; margin-bottom: 50px;
} }
.mx_LoginPageHeader_brand { .mx_StatusLogin_header h1 {
position: absolute; font-size: 29px;
top: 30px; margin-bottom: 3px;
left: 30px; }
}
.mx_LoginPageHeader_title { .mx_StatusLogin_subtitle {
text-align: center; font-size: 18px;
margin-top: 90px; }
margin-bottom: 50px;
}
.mx_LoginPageHeader_title h1 { .mx_StatusLogin_footer {
font-size: 29px; margin-top: 30px;
margin-bottom: 3px; margin-bottom: 30px;
} text-align: center;
font-size: 16px;
color: $footer-color;
}
.mx_LoginPageHeader_subtitle { .mx_StatusLogin_footer p {
font-size: 18px; margin-top: 0.5em;
} margin-bottom: 0.5em;
}
.mx_Login_support { .mx_StatusLogin_footer_cta {
text-align: center; color: $callout-color;
font-size: 13px; font-family: $header-font-family;
margin-top: 0px; letter-spacing: 1px;
opacity: 0.7; font-size: 13px;
} text-transform: uppercase;
text-decoration: none;
}
.mx_Login_field { // overrides of .mx_Login
width: 280px;
border-radius: 3px;
border: 1px solid $strong-input-border-color;
font-weight: 300;
font-size: 13px;
padding: 9px;
margin-bottom: 14px;
}
.mx_Login_field_disabled { .mx_Login_box {
opacity: 0.3; width: 350px;
} min-height: initial;
padding-top: 20px;
padding-bottom: 10px;
padding-left: 33px;
padding-right: 33px;
border-radius: 8px;
background-color: $form-bg-color;
box-shadow: 0px 5px 16px 0px rgba(25,12,46,0.16);
position: relative;
}
.mx_Login_fieldLabel { .mx_Login_logo {
margin-top: -10px; background-color: #fff;
margin-left: 8px; width: 74px;
margin-bottom: 14px; height: 74px;
font-size: 13px; border-radius: 37px;
opacity: 0.8; box-shadow: 0px 2px 4px 0px rgba(0,0,0,0.5);
} position: absolute;
top: -36px;
left: 50%;
margin-left: -36px;
}
.mx_Login_submit { .mx_Login_logo img {
margin-top: 35px; width: 36px;
margin-bottom: 24px; height: 36px;
width: 100%; padding: 19px;
border-radius: 40px; }
height: 40px;
border: 0px;
background-color: $accent-color;
font-size: 15px;
color: $accent-fg-color;
}
.mx_Login_submit:disabled { .mx_Login_box h2 {
opacity: 0.3; text-align: center;
} color: $form-fg-color;
font-size: 25px;
}
.mx_Login_label { .mx_Login_support {
font-size: 13px; text-align: center;
opacity: 0.8; font-size: 13px;
} margin-top: 0px;
opacity: 0.7;
}
.mx_Login_checkbox, .mx_Login_field {
.mx_Login_radio { width: 280px;
margin-right: 10px; border-radius: 3px;
} border: 1px solid $strong-input-border-color;
font-weight: 300;
font-size: 13px;
padding: 9px;
margin-bottom: 14px;
}
.mx_Login_create { .mx_Login_field_disabled {
display: block; opacity: 0.3;
text-align: center; }
width: 100%;
font-size: 13px;
opacity: 0.8;
}
.mx_Login_create:link { .mx_Login_fieldLabel {
color: $primary-fg-color; margin-top: -10px;
} margin-left: 8px;
margin-bottom: 14px;
font-size: 13px;
opacity: 0.8;
}
.mx_Login_links { .mx_Login_submit {
display: block; margin-top: 35px;
text-align: center; margin-bottom: 24px;
margin-top: 15px; width: 100%;
width: 100%; border-radius: 40px;
font-size: 13px; height: 40px;
opacity: 0.8; border: 0px;
} background-color: $accent-color;
font-size: 15px;
color: $accent-fg-color;
}
.mx_Login_links a:link { .mx_Login_submit:disabled {
color: $primary-fg-color; opacity: 0.3;
} }
.mx_Login_prompt { .mx_Login_label {
padding-top: 15px; font-size: 13px;
padding-bottom: 15px; opacity: 0.8;
font-size: 13px; }
}
.mx_Login_forgot { .mx_Login_checkbox,
font-size: 13px; .mx_Login_radio {
opacity: 0.8; margin-right: 10px;
} }
.mx_Login_forgot:link { .mx_Login_create {
color: $primary-fg-color; display: block;
} text-align: center;
width: 100%;
font-size: 13px;
opacity: 0.8;
}
.mx_Login_loader { .mx_Login_create:link {
display: inline; color: $primary-fg-color;
position: relative; }
top: 2px;
left: 8px;
}
.mx_Login_loader .mx_Spinner { .mx_Login_links {
display: inline; display: block;
} text-align: center;
margin-top: 15px;
width: 100%;
font-size: 13px;
opacity: 0.8;
}
.mx_Login_loader .mx_Spinner img { .mx_Login_links a:link {
width: 16px; color: $primary-fg-color;
height: 16px; }
}
.mx_Login_error { .mx_Login_prompt {
color: $warning-color; padding-top: 15px;
font-weight: bold; padding-bottom: 15px;
text-align: center; font-size: 13px;
/* }
height: 24px;
*/
margin-top: 12px;
margin-bottom: 12px;
}
.mx_Login_type_container { .mx_Login_forgot {
display: flex; font-size: 13px;
margin-bottom: 14px; opacity: 0.8;
} }
.mx_Login_type_label { .mx_Login_forgot:link {
flex-grow: 1; color: $primary-fg-color;
line-height: 35px; }
}
.mx_Login_type_dropdown { .mx_Login_loader {
display: inline-block; display: inline;
min-width: 170px; position: relative;
align-self: flex-end; top: 2px;
flex: 1 1 auto; left: 8px;
} }
.mx_Login_field_group { .mx_Login_loader .mx_Spinner {
display: flex; display: inline;
} }
.mx_Login_field_prefix { .mx_Login_loader .mx_Spinner img {
height: 34px; width: 16px;
padding: 0px 5px; height: 16px;
line-height: 33px; }
background-color: #eee; .mx_Login_error {
border: 1px solid #c7c7c7; color: $warning-color;
border-right: 0px; font-weight: bold;
border-radius: 3px 0px 0px 3px; text-align: center;
text-align: center;
}
.mx_Login_field_suffix {
height: 34px;
padding: 0px 5px;
line-height: 33px;
background-color: #eee;
border: 1px solid #c7c7c7;
border-left: 0px;
border-radius: 0px 3px 3px 0px;
text-align: center;
flex-grow: 1;
}
.mx_Login_username {
height: 16px;
flex-shrink: 1;
min-width: 0px;
border-radius: 3px;
}
.mx_Login_phoneNumberField {
height: 16px;
}
.mx_Login_field_has_prefix {
border-top-left-radius: 0px;
border-bottom-left-radius: 0px;
}
.mx_Login_field_has_suffix {
border-top-right-radius: 0px;
border-bottom-right-radius: 0px;
}
.mx_Login_phoneSection {
display:flex;
}
.mx_Login_phoneCountry {
margin-bottom: 14px;
width: 150px;
/* To override mx_Login_field_prefix */
text-align: left;
padding: 0px;
background-color: $primary-bg-color;
}
.mx_Login_field_prefix .mx_Dropdown_input {
/* To use prefix border instead of dropdown border */
border: 0;
}
.mx_Login_phoneCountry .mx_Dropdown_option {
/* /*
To match height of mx_Login_field height: 24px;
33px + 2px border from mx_Dropdown_option = 35px
*/ */
height: 33px; margin-top: 12px;
line-height: 33px; margin-bottom: 12px;
} }
.mx_Login_phoneCountry .mx_Dropdown_option img { .mx_Login_type_container {
margin: 3px; display: flex;
vertical-align: top; margin-bottom: 14px;
} }
.mx_Login_language { .mx_Login_type_label {
margin-left: auto; flex-grow: 1;
margin-right: auto; line-height: 35px;
min-width: 60%; }
}
.mx_Login_language_div { .mx_Login_type_dropdown {
display: flex; display: inline-block;
margin-top: 12px; min-width: 170px;
margin-bottom: 12px; align-self: flex-end;
} flex: 1 1 auto;
}
.mx_Login_field_group {
display: flex;
}
.mx_Login_field_prefix {
height: 34px;
padding: 0px 5px;
line-height: 33px;
background-color: #eee;
border: 1px solid #c7c7c7;
border-right: 0px;
border-radius: 3px 0px 0px 3px;
text-align: center;
}
.mx_Login_field_suffix {
height: 34px;
padding: 0px 5px;
line-height: 33px;
background-color: #eee;
border: 1px solid #c7c7c7;
border-left: 0px;
border-radius: 0px 3px 3px 0px;
text-align: center;
flex-grow: 1;
}
.mx_Login_username {
height: 16px;
flex-shrink: 1;
min-width: 0px;
border-radius: 3px;
}
.mx_Login_phoneNumberField {
height: 16px;
}
.mx_Login_field_has_prefix {
border-top-left-radius: 0px;
border-bottom-left-radius: 0px;
}
.mx_Login_field_has_suffix {
border-top-right-radius: 0px;
border-bottom-right-radius: 0px;
}
.mx_Login_phoneSection {
display:flex;
}
.mx_Login_phoneCountry {
margin-bottom: 14px;
width: 150px;
/* To override mx_Login_field_prefix */
text-align: left;
padding: 0px;
background-color: $primary-bg-color;
}
.mx_Login_field_prefix .mx_Dropdown_input {
/* To use prefix border instead of dropdown border */
border: 0;
}
.mx_Login_phoneCountry .mx_Dropdown_option {
/*
To match height of mx_Login_field
33px + 2px border from mx_Dropdown_option = 35px
*/
height: 33px;
line-height: 33px;
}
.mx_Login_phoneCountry .mx_Dropdown_option img {
margin: 3px;
vertical-align: top;
}
.mx_Login_language {
margin-left: auto;
margin-right: auto;
min-width: 60%;
}
.mx_Login_language_div {
display: flex;
margin-top: 12px;
margin-bottom: 12px;
}
}

View File

@ -29,13 +29,17 @@ $primary-bg-color: #EEF2F5;
$header-color: #49555F; $header-color: #49555F;
$header-font-family: PostGrotesk-Medium, Arial, Helvetica, Sans-Serif; $header-font-family: PostGrotesk-Medium, Arial, Helvetica, Sans-Serif;
$footer-color: #8D99A4;
h1,h2,h3,h4,h5 { h1,h2,h3,h4,h5 {
color: $header-color; color: $header-color;
font-family: $header-font-family; font-family: $header-font-family;
font-weight: 400 ! important; font-weight: 400 ! important;
} }
$form-bg-color: #4360DF; $callout-color: #4360DF; // or #4957b8 from status.im homepage
$form-bg-color: $callout-color;
$form-fg-color: #ffffff; $form-fg-color: #ffffff;
// ***** End of Status theme specifics ****** // ***** End of Status theme specifics ******