Subversion Repositories Integrator Subversion

// USER LOGIN 5
@import '../global/_variables'; // global variables.
@import '../global/components/_mixins'; // global mixings.

.user-login-5{
        min-height:100vh;

        .bs-reset{
                margin:0;
                padding:0;
        }  

        .text-right{
                text-align: right;
        }

        .login-bg{
                background-position: center;
                background-size: cover;
                background-repeat: no-repeat;
                min-height:100vh;
        }

        .login-logo{
                position: absolute;
                top:2.5em;
                left:2.5em;

                &.login-6{
                        top:80px;
                        left:80px;
                }
        }

        .login-container{
                position:relative;
                min-height:100vh;

                >.login-content, 
                .login-social,
                .login-copyright{
                        padding:0 80px;
                }

                >.login-content{
                        margin-top:35%;

                        >h1{
                                font-size: 30px;
                                font-weight: 300;
                                color:#4e5a64;
                        }

                        p{
                                color:#a0a9b4;
                                font-size: 15px;
                                line-height:22px;
                        }

                        >.login-form{
                                margin-top:80px;
                                color:#a4aab2;
                                font-size: 13px;

                                .form-control {
                                        width:100%;
                                        padding: 10px 0;
                                        border:none;
                                        border-bottom:1px solid;
                                        border-color:#a0a9b4;
                                        color:#868e97;
                                        font-size: 14px;
                                        margin-bottom: 30px;

                                        &:focus{
                                                outline: 0;
                                        }
                                }

                                .forgot-password,
                                .login-button{
                                        display:inline-block;
                                }

                                .rem-password{
                                        margin-top: 10px;

                                        > p{
                                                margin:0;
                                        }

                                        >.rem-checkbox{
                                                border-color:#a4aab2;
                                        }
                                }

                                .forgot-password{
                                        margin-right:1em; 

                                        > a{
                                                color:#a4aab2;

                                                &:hover{
                                                        color:#337ab7;
                                                        text-decoration: none;
                                                }

                                                &:focus{
                                                        color:#a4aab2;
                                                        text-decoration: none;
                                                }
                                        }
                                }

                        }

                }

                >.login-footer{
                        position:absolute;
                        bottom:0;
                        width: 100%;
                        padding-bottom: 10px;

                        .login-social{
                                padding-right:0;

                                li{
                                        display:inline-block;
                                        list-style: none;
                                        margin-right:1em;
                                }

                                a{ 
                                        color:#a9b5be;
                                        font-size: 18px;

                                        &:hover{
                                                color:#337ab7;
                                                text-decoration: none;
                                        }

                                        &:focus{
                                                color: #a9b5be;
                                        }
                                }
                        }

                        .login-copyright{
                                padding-left: 0;
                                margin-top:6px;

                                > p{
                                        margin: 0;
                                        font-size: 13px;
                                        color: #a9b5be;
                                }
                        }
                }
        }


        // ERROR HANDLER
        .alert{
                margin-top: -60px;
        }

        .form-group{

                &.has-error{
                        border-bottom: 2px solid $brand-danger !important;
                }

                &.valid{
                        border-bottom: 1px solid #a0a9b4 !important;
                }
        }
}

// END

// MOBILE

@media (max-width: 1365px) {
        .user-login-5{

                .login-logo{
                        &.login-6{
                                top:40px;
                                left:40px;
                        }
                }

                .login-container{

                        >.login-content,
                        .login-social,
                        .login-copyright{
                                padding:0 40px;
                        }

                        .login-social{
                                padding-right:0;
                        }

                        .login-copyright{
                                padding-left:0;
                        }
                }
        }
}

@media (max-width: 1023px) {

        .user-login-5{
                min-height:50vh;

                .mt-login-5-bsfix{
                        width:100%;
                }

                .login-bg{
                        min-height: 50vh;
                }

                .login-logo{
                        &.login-6{
                                position: relative;
                                margin:0 0 40px 0;
                        }
                }

                .login-container{
                        min-height: 50vh;

                        >.login-content{
                                margin-top:60px;

                                .login-form{
                                        margin-top: 40px;
                                }

                        }

                        .rem-password{
                                margin-bottom: 1em;
                        }

                        >.login-footer{
                                position:relative;
                                margin-top:40px;
                                padding-bottom: 0;

                                .login-social{

                                        li{
                                                margin-right:0.5em;
                                        }
                                }
                        }
                }

                .alert{
                        margin-top:-20px;
                }

        }
} 

@media (max-width: 640px) {

        .user-login-5{

                .login-container{
                
                        >.login-content{

                                .text-right{
                                        text-align: left;
                                }
                        }
                }
        }
}