From 50cd1b73a1821928618a880fde6aba161b596bc7 Mon Sep 17 00:00:00 2001
From: prashant <prashants@mkcl.org>
Date: Mon, 16 Dec 2019 15:04:00 +0530
Subject: [PATCH] Gradient button and background added. To change gradient
color add class to login2 class div. 5 color options availabe with class name
(class names: gradient1, gradient2, gradient3, gradient4) html markup is not
changed only css is modified which need to replace
---
src/views/ApplicantLogin.vue | 395 +++++++++++++++--------------------
1 file changed, 174 insertions(+), 221 deletions(-)
diff --git a/src/views/ApplicantLogin.vue b/src/views/ApplicantLogin.vue
index df79d26..a6e4edc 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>
--
GitLab