<div class="login-wrapper">
        <div class="logo-wrapper">
            <img src="images/logo.jpg" />
        </div>
        <form>
            <div class="form-group">
                <label class="control-label" for="email">Username:</label>
                <input type="email" class="form-control" id="email" placeholder="Enter email">
            </div>
            <div class="form-group">
                <label class="control-label" for="pwd">Password:</label>
                <input type="password" class="form-control" id="pwd" placeholder="Enter password">
            </div>
            <button type="submit" class="btn btn-primary">Submit</button>
        </form>
    </div>


.login {
    position: absolute;
    top: 0;
    bottom: 0;
    right: 0;
    left: 0;
    z-index: 9;
    background-color: @login-dark-bg;
    text-align: center;
    overflow: auto;

    .logo-wrapper {
        margin-bottom: 32px;
    }

    .login-wrapper {
        width: 500px;
        margin: 0 auto;
        padding: 16px;
        position: relative;
        top: 50%;
        -webkit-transform: translateY(-50%);
        -moz-transform: translateY(-50%);
        -ms-transform: translateY(-50%);
        -o-transform: translateY(-50%);
        transform: translateY(-50%);

        img {
            max-width: 100%;
        }

        .form-group {
            text-align: left;

            label {
                color: @login-dark-label-color;
            }
        }

        form {
            button {
                margin-top: 16px;
            }
        }
    }

    &.light {
        background-color: @login-light-bg;
        label {
            color: @login-light-label-color;
        }
    }
}