move log in button into fields and use icon instead of text

This commit is contained in:
Jan-Christoph Borchardt 2015-08-26 19:00:42 +02:00
parent 46978b616c
commit 2a935f1b47
2 changed files with 31 additions and 8 deletions

View file

@ -456,11 +456,30 @@ input[type="submit"].enabled {
padding: 13px;
margin: -13px;
}
/* quick fix for log in button not being aligned with input fields, should be properly fixed by input field width later */
/* position log in button as confirm icon in right of password field */
#body-login #submit.login {
margin-right: 7px;
position: absolute;
right: 0;
top: 49px;
border: none;
background-color: transparent;
-ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=30)";
opacity: .3;
}
#body-login #submit.login:hover,
#body-login #submit.login:focus {
-ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=70)";
opacity: .7;
}
#body-login input[type="password"] {
padding-right: 40px;
box-sizing: border-box;
min-width: 269px;
}
#body-login form {
position: relative;
width: 22em;
margin: 2em auto 2em;
padding: 0;
@ -539,10 +558,8 @@ input[name='password-clone'] {
/* General new input field look */
#body-login input[type="text"],
#body-login input[type="password"],
#body-login input[type="email"],
#body-login input[type="submit"] {
#body-login input[type="email"] {
border: none;
border-radius: 5px;
}
/* Nicely grouping input field sets */
@ -783,6 +800,9 @@ label.infield {
margin: 24px 5px 0 16px !important;
vertical-align: text-bottom;
}
#body-login .remember-login-container {
text-align: center;
}
/* Sticky footer */
#body-login .wrapper {

View file

@ -56,19 +56,22 @@ script('core', [
<img class="svg" id="password-icon" src="<?php print_unescaped(image_path('', 'actions/password.svg')); ?>" alt=""/>
</p>
<input type="submit" id="submit" class="login primary icon-confirm" value="" disabled="disabled"/>
<?php if (isset($_['invalidpassword']) && ($_['invalidpassword'])): ?>
<a id="lost-password" class="warning" href="">
<?php p($l->t('Wrong password. Reset it?')); ?>
</a>
<?php endif; ?>
<?php if ($_['rememberLoginAllowed'] === true) : ?>
<input type="checkbox" name="remember_login" value="1" id="remember_login">
<label for="remember_login"><?php p($l->t('remember')); ?></label>
<div class="remember-login-container">
<input type="checkbox" name="remember_login" value="1" id="remember_login">
<label for="remember_login"><?php p($l->t('remember')); ?></label>
</div>
<?php endif; ?>
<input type="hidden" name="timezone-offset" id="timezone-offset"/>
<input type="hidden" name="timezone" id="timezone"/>
<input type="hidden" name="requesttoken" value="<?php p($_['requesttoken']) ?>">
<input type="submit" id="submit" class="login primary" value="<?php p($l->t('Log in')); ?>" disabled="disabled"/>
</fieldset>
</form>
<?php if (!empty($_['alt_login'])) { ?>