diff --git a/src/views/ApplicantLogin.vue b/src/views/ApplicantLogin.vue index df79d26f71e8e75d6d79103d7863cc2be8398dcd..a6e4edc6991d01a51f0d5507c20426943dfad794 100644 --- a/src/views/ApplicantLogin.vue +++ b/src/views/ApplicantLogin.vue @@ -1,6 +1,6 @@ <template> <div - class="login-2" + class="login-2 gradient1" style="background-image: linear-gradient(150deg, rgba(0, 0, 0, 0.6)15%, rgba(0, 0, 0, 0.6)70%, rgba(0, 0, 0, 0.6)94%), url(assets/images/login-bg.jpg);" > <div class="container"> @@ -51,23 +51,31 @@ </div> <div class="form-group row m-t-20"> - <div class="col-12 mb-3"> - <div class="custom-control custom-checkbox"> - <input type="checkbox" id="customControlInline" class="custom-control-input" /> - <label for="customControlInline" class="custom-control-label">Remember me</label> - </div> - </div> - <div class="col-12 text-center"> - <button type="submit" class="btn btn-block btn-primary" @click="abx">Submit Email</button> - </div> - </div> - <div class="form-group m-t-10 mb-0 row"> - <div class="col-12 m-t-20"> - <a href="pages-recoverpw.html" class="text-muted"> - <i class="mdi mdi-lock"></i> Forgot your password? - </a> - </div> - </div> + <div class="col-12 mb-3"> + <div class="custom-control custom-checkbox"> + <input + type="checkbox" + id="customControlInline" + class="custom-control-input" + /> + <label for="customControlInline" class="custom-control-label">Remember me</label> + </div> + </div> + <div class="col-12 text-center"> + <button + type="submit" + class="btn btn-block btn-primary" + @click="abx" + >Submit Email</button> + </div> + </div> + <div class="form-group m-t-10 mb-0 row"> + <div class="col-12 m-t-20"> + <a href="pages-recoverpw.html" class="text-muted"> + <i class="mdi mdi-lock"></i> Forgot your password? + </a> + </div> + </div> </form> <p> Don't have an account? @@ -186,213 +194,113 @@ export default { background: #f5f5f5; min-height: 100vh; position: relative; - - display: -webkit-box; - display: -moz-box; - display: -ms-flexbox; - display: -webkit-flex; display: flex; justify-content: center; align-items: center; padding: 30px 0; -} -.login-2 a > h4 { - font-size: 24px; - color: #fff; -} -.login-2 .login-inner-form { - color: #717171; - - padding: 20px 0; -} - -.login-2 .col-pad-0 { - padding: 0; -} - -.login-box-2 { - margin: 0 150px 0 200px; - max-width: 700px; - border-radius: 10px; - box-shadow: 0 0 35px rgba(0, 0, 0, 0.1); - background: #fff; -} - -.login-2 .login-inner-form .details p a { - margin-left: 3px; - color: #3afe; -} - -.login-2 .login-inner-form .details p { - margin-bottom: 0; - font-size: 14px; -} - -.login-2 .login-inner-form .details { - padding: 30px 60px 30px 0; -} - -.login-2 .bg-img { - background-size: cover; - width: 100%; - bottom: 0; - text-align: center; - border-radius: 10px; - padding: 50px 30px; - background: #0284fe; - // background-image: linear-gradient( - // -225deg, - // #01c0c8 0%, - // #6b8dd6 48%, - // #8e37d7 100% - // ); - margin: 30px 0; - left: -60px; - z-index: 999; -} - -.login-2 .none-2 { - display: none; -} - -.login-2 .btn-outline:hover { - background: #fff; - text-decoration: none; - color: #1b548c; -} - -.login-2 .login-inner-form h3 { - margin: 0 0 25px; - font-size: 22px; - font-weight: 400; - - color: #352a3a; -} - -.login-2 .login-inner-form .form-group { - margin-bottom: 20px; -} - -.login-2 .login-inner-form .btn-md { - cursor: pointer; - padding: 10px 50px 8px 50px; - letter-spacing: 1px; - font-size: 15px; - font-weight: 400; - height: 45px; - - border-radius: 3px; - text-transform: uppercase; -} - -.login-2 .bg-img .social-list li { - display: inline-block; - font-size: 16px; -} - -.login-2 .bg-img .logo { - width: 100px; - margin-bottom: 10px; -} - -.login-2 .bg-img h3 { - font-size: 28px; - color: #e8e8e8; - letter-spacing: 1px; - font-weight: 500; - -} - - - - - -.login-2 .login-inner-form input[type="checkbox"], -input[type="radio"] { - margin-right: 3px; -} - - -.login-2 .login-inner-form .terms { - margin-left: 3px; -} - -.login-2 .login-inner-form .checkbox { - margin-bottom: 20px; - font-size: 14px; -} - -.login-2 .login-inner-form .form-check { - float: left; - margin-bottom: 0; - padding-left: 2px; -} - -.login-2 .login-inner-form .form-check a { - color: #717171; - float: right; -} - -.login-2 .login-inner-form .form-check-input { - position: absolute; - margin-left: 0; -} - -.login-2 .login-inner-form .form-check label::before { - content: ""; - display: inline-block; - position: absolute; - width: 17px; - height: 17px; - margin-left: -25px; - border: 1px solid #cccccc; - border-radius: 3px; - background-color: #fff; -} - -.login-2 .login-inner-form .form-check-label { - padding-left: 25px; - margin-bottom: 0; - font-size: 14px; -} - -.login-2 - .login-inner-form - .checkbox-theme - input[type="checkbox"]:checked - + label::before { - background-color: #1db2cb; - border-color: #1b548c; -} - -.login-2 .login-inner-form input[type="checkbox"]:checked + label:before { - font-weight: 300; - color: #f3f3f3; - line-height: 15px; - font-size: 14px; - content: "\2713"; -} - -.login-2 .login-inner-form input[type="checkbox"], -input[type="radio"] { - margin-top: 4px; -} + .login-inner-form { + color: #717171; + padding: 20px 0; + } + .col-pad-0 { + padding: 0; + } + .login-box-2 { + margin: 0 150px 0 200px; + max-width: 700px; + border-radius: 10px; + box-shadow: 0 0 35px rgba(0, 0, 0, 0.1); + background: #fff; + } + .login-inner-form .details p a { + margin-left: 3px; + color: #3afe; + } + .login-inner-form .details p { + margin-bottom: 0; + font-size: 14px; + } + .login-inner-form .details { + padding: 30px 60px 30px 0; + } + .bg-img { + background-size: cover; + width: 100%; + bottom: 0; + text-align: center; + border-radius: 10px; + padding: 50px 30px; + background: #0284fe; + margin: 30px 0; + left: -60px; + z-index: 999; + .logo { + width: 100px; + margin-bottom: 10px; + } + h3 { + font-size: 28px; + color: #e8e8e8; + letter-spacing: 1px; + font-weight: 500; + } + } + .none-2 { + display: none; + } + .login-inner-form { + h3 { + margin: 0 0 25px; + font-size: 22px; + font-weight: 400; -.login-2 .login-inner-form .checkbox a { - font-size: 14px; - color: #3afe; - float: right; -} -.btn-gradient { - background-image: linear-gradient( - -225deg, - #01c0c8 0%, - #6b8dd6 48%, - #8e37d7 100% - ); - color: #fff; + color: #352a3a; + } + input[type="checkbox"], + input[type="radio"] { + margin-right: 3px; + } + .checkbox { + margin-bottom: 20px; + font-size: 14px; + } + .terms { + margin-left: 3px; + } + } + .form-group { + margin-bottom: 20px; + } + .form-check { + float: left; + margin-bottom: 0; + padding-left: 2px; + a { + color: #717171; + float: right; + } + } + .form-check-input { + position: absolute; + margin-left: 0; + } + .form-check label::before { + content: ""; + display: inline-block; + position: absolute; + width: 17px; + height: 17px; + margin-left: -25px; + border: 1px solid #cccccc; + border-radius: 3px; + background-color: #fff; + } + .form-check-label { + padding-left: 25px; + margin-bottom: 0; + font-size: 14px; + } } - /** MEDIA **/ @media (max-width: 1200px) { .login-box-2 { @@ -418,7 +326,52 @@ input[type="radio"] { padding: 0; } } -.toast-header { - padding: 0.25rem 0.75rem; +.gradient1 .bg-img { + background-image: linear-gradient( + -225deg, + #01c0c8 0%, + #6b8dd6 48%, + #8e37d7 100% + ); +} +.gradient1 .btn-primary { + background-image: linear-gradient( + -225deg, + #01c0c8 0%, + #6b8dd6 48%, + #8e37d7 100% + ); + color: #fff; + border: none; +} +.gradient2 { + bg-img { + background-image: linear-gradient(to right, #4facfe 0%, #00f2fe 100%); + } + .btn-primary { + background-image: linear-gradient(to right, #4facfe 0%, #00f2fe 100%); + color: #fff; + border: none; + } +} +.gradient3 { + .bg-img { + background-image: linear-gradient(135deg, #667eea 0%, #764ba2 100%); + } + .btn-primary { + background-image: linear-gradient(135deg, #667eea 0%, #764ba2 100%); + color: #fff; + border: none; + } +} +.gradient4 { + .bg-img { + background-image: linear-gradient(to right, #6a11cb 0%, #2575fc 100%); + } + .btn-primary { + background-image: linear-gradient(to right, #6a11cb 0%, #2575fc 100%); + color: #fff; + border: none; + } } </style>