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