gaja-group
/
matrix-bot
2
0
Fork 0
Code Issues Pull Requests Releases Wiki Activity

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
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

249
src/skins/vector/themes/status/css/_StatusLogin.scss
View File

@ -18,13 +18,67 @@ limitations under the License.
// 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...
.mx_Login {
flex-direction: column;
.mx_StatusLogin {
width: 100%;
height: 100%;
display: flex;
align-items: center;
justify-content: center;
}
.mx_Login_box {
overflow: auto;
.mx_StatusLogin_brand {
position: absolute;
top: 30px;
left: 30px;
}
.mx_StatusLogin_content {
margin: auto;
}
.mx_StatusLogin_header {
text-align: center;
margin-top: 70px;
margin-bottom: 50px;
}
.mx_StatusLogin_header h1 {
font-size: 29px;
margin-bottom: 3px;
}
.mx_StatusLogin_subtitle {
font-size: 18px;
}
.mx_StatusLogin_footer {
margin-top: 30px;
margin-bottom: 30px;
text-align: center;
font-size: 16px;
color: $footer-color;
}
.mx_StatusLogin_footer p {
margin-top: 0.5em;
margin-bottom: 0.5em;
}
.mx_StatusLogin_footer_cta {
color: $callout-color;
font-family: $header-font-family;
letter-spacing: 1px;
font-size: 13px;
text-transform: uppercase;
text-decoration: none;
}
// overrides of .mx_Login
.mx_Login_box {
width: 350px;
min-height: initial;
padding-top: 20px;
@ -32,13 +86,12 @@ limitations under the License.
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_Login_logo {
background-color: #fff;
width: 74px;
height: 74px;
@ -48,49 +101,28 @@ limitations under the License.
top: -36px;
left: 50%;
margin-left: -36px;
}
}
.mx_Login_logo img {
.mx_Login_logo img {
width: 36px;
height: 36px;
padding: 19px;
}
}
.mx_Login_box h2 {
.mx_Login_box h2 {
text-align: center;
color: $form-fg-color;
font-size: 25px;
}
}
.mx_LoginPageHeader_brand {
position: absolute;
top: 30px;
left: 30px;
}
.mx_LoginPageHeader_title {
text-align: center;
margin-top: 90px;
margin-bottom: 50px;
}
.mx_LoginPageHeader_title h1 {
font-size: 29px;
margin-bottom: 3px;
}
.mx_LoginPageHeader_subtitle {
font-size: 18px;
}
.mx_Login_support {
.mx_Login_support {
text-align: center;
font-size: 13px;
margin-top: 0px;
opacity: 0.7;
}
}
.mx_Login_field {
.mx_Login_field {
width: 280px;
border-radius: 3px;
border: 1px solid $strong-input-border-color;
@ -98,21 +130,21 @@ limitations under the License.
font-size: 13px;
padding: 9px;
margin-bottom: 14px;
}
}
.mx_Login_field_disabled {
.mx_Login_field_disabled {
opacity: 0.3;
}
}
.mx_Login_fieldLabel {
.mx_Login_fieldLabel {
margin-top: -10px;
margin-left: 8px;
margin-bottom: 14px;
font-size: 13px;
opacity: 0.8;
}
}
.mx_Login_submit {
.mx_Login_submit {
margin-top: 35px;
margin-bottom: 24px;
width: 100%;
@ -122,111 +154,111 @@ limitations under the License.
background-color: $accent-color;
font-size: 15px;
color: $accent-fg-color;
}
}
.mx_Login_submit:disabled {
.mx_Login_submit:disabled {
opacity: 0.3;
}
}
.mx_Login_label {
.mx_Login_label {
font-size: 13px;
opacity: 0.8;
}
}
.mx_Login_checkbox,
.mx_Login_radio {
.mx_Login_checkbox,
.mx_Login_radio {
margin-right: 10px;
}
}
.mx_Login_create {
.mx_Login_create {
display: block;
text-align: center;
width: 100%;
font-size: 13px;
opacity: 0.8;
}
}
.mx_Login_create:link {
.mx_Login_create:link {
color: $primary-fg-color;
}
}
.mx_Login_links {
.mx_Login_links {
display: block;
text-align: center;
margin-top: 15px;
width: 100%;
font-size: 13px;
opacity: 0.8;
}
}
.mx_Login_links a:link {
.mx_Login_links a:link {
color: $primary-fg-color;
}
}
.mx_Login_prompt {
.mx_Login_prompt {
padding-top: 15px;
padding-bottom: 15px;
font-size: 13px;
}
}
.mx_Login_forgot {
.mx_Login_forgot {
font-size: 13px;
opacity: 0.8;
}
}
.mx_Login_forgot:link {
.mx_Login_forgot:link {
color: $primary-fg-color;
}
}
.mx_Login_loader {
.mx_Login_loader {
display: inline;
position: relative;
top: 2px;
left: 8px;
}
}
.mx_Login_loader .mx_Spinner {
.mx_Login_loader .mx_Spinner {
display: inline;
}
}
.mx_Login_loader .mx_Spinner img {
.mx_Login_loader .mx_Spinner img {
width: 16px;
height: 16px;
}
}
.mx_Login_error {
.mx_Login_error {
color: $warning-color;
font-weight: bold;
text-align: center;
/*
/*
height: 24px;
*/
*/
margin-top: 12px;
margin-bottom: 12px;
}
}
.mx_Login_type_container {
.mx_Login_type_container {
display: flex;
margin-bottom: 14px;
}
}
.mx_Login_type_label {
.mx_Login_type_label {
flex-grow: 1;
line-height: 35px;
}
}
.mx_Login_type_dropdown {
.mx_Login_type_dropdown {
display: inline-block;
min-width: 170px;
align-self: flex-end;
flex: 1 1 auto;
}
}
.mx_Login_field_group {
.mx_Login_field_group {
display: flex;
}
}
.mx_Login_field_prefix {
.mx_Login_field_prefix {
height: 34px;
padding: 0px 5px;
line-height: 33px;
@ -237,9 +269,9 @@ limitations under the License.
border-radius: 3px 0px 0px 3px;
text-align: center;
}
}
.mx_Login_field_suffix {
.mx_Login_field_suffix {
height: 34px;
padding: 0px 5px;
line-height: 33px;
@ -251,34 +283,34 @@ limitations under the License.
text-align: center;
flex-grow: 1;
}
}
.mx_Login_username {
.mx_Login_username {
height: 16px;
flex-shrink: 1;
min-width: 0px;
border-radius: 3px;
}
}
.mx_Login_phoneNumberField {
.mx_Login_phoneNumberField {
height: 16px;
}
}
.mx_Login_field_has_prefix {
.mx_Login_field_has_prefix {
border-top-left-radius: 0px;
border-bottom-left-radius: 0px;
}
}
.mx_Login_field_has_suffix {
.mx_Login_field_has_suffix {
border-top-right-radius: 0px;
border-bottom-right-radius: 0px;
}
}
.mx_Login_phoneSection {
.mx_Login_phoneSection {
display:flex;
}
}
.mx_Login_phoneCountry {
.mx_Login_phoneCountry {
margin-bottom: 14px;
width: 150px;
@ -286,36 +318,37 @@ limitations under the License.
text-align: left;
padding: 0px;
background-color: $primary-bg-color;
}
}
.mx_Login_field_prefix .mx_Dropdown_input {
.mx_Login_field_prefix .mx_Dropdown_input {
/* To use prefix border instead of dropdown border */
border: 0;
}
}
.mx_Login_phoneCountry .mx_Dropdown_option {
.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 {
.mx_Login_phoneCountry .mx_Dropdown_option img {
margin: 3px;
vertical-align: top;
}
}
.mx_Login_language {
.mx_Login_language {
margin-left: auto;
margin-right: auto;
min-width: 60%;
}
}
.mx_Login_language_div {
.mx_Login_language_div {
display: flex;
margin-top: 12px;
margin-bottom: 12px;
}
}
}

6
src/skins/vector/themes/status/css/_status.scss
View File

@ -29,13 +29,17 @@ $primary-bg-color: #EEF2F5;
$header-color: #49555F;
$header-font-family: PostGrotesk-Medium, Arial, Helvetica, Sans-Serif;
$footer-color: #8D99A4;
h1,h2,h3,h4,h5 {
color: $header-color;
font-family: $header-font-family;
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;
// ***** End of Status theme specifics ******