src/app/login/LoginComponent.scss

   1 /*
   2  Copyright 2020 TATA ELXSI
   3
   4  Licensed under the Apache License, Version 2.0 (the 'License');
   5  you may not use this file except in compliance with the License.
   6  You may obtain a copy of the License at
   7
   8     http://www.apache.org/licenses/LICENSE-2.0
   9
  10  Unless required by applicable law or agreed to in writing, software
  11  distributed under the License is distributed on an "AS IS" BASIS,
  12  WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
  13  See the License for the specific language governing permissions and
  14  limitations under the License.
  15
  16  Author: KUMARAN M (kumaran.m@tataelxsi.co.in), RAJESH S (rajesh.s@tataelxsi.co.in), BARATH KUMAR R (barath.r@tataelxsi.co.in)
  17 */
  18 @import "../../assets/scss/mixins/mixin";
  19 @import "../../assets/scss/variable";
  20
  21 .login-container {
  22   @include wh-value(100%, 100vh);
  23   @include flexbox(flex, center, null, null, center, null);
  24   @include background(url("../../assets/images/login_background.jpg"), null, cover, no-repeat, center);
  25   background-attachment: fixed;
  26   flex-wrap: wrap;
  27   .wrap-login {
  28     @include background(
  29       linear-gradient(
  30         to left bottom,
  31         #00c0ef,
  32         #00b3f9,
  33         #3ea3fd,
  34         #7190f8,
  35         #9c78e8,
  36         #a86cdd,
  37         #b25fd1,
  38         #bb51c3,
  39         #b151c4,
  40         #a652c6,
  41         #9b53c6,
  42         #9053c7
  43       ),
  44       null,
  45       null,
  46       null,
  47       null
  48     );
  49     @include roundedCorners(15);
  50     @include flexbox(flex, space-between, null, null, null, null);
  51     @include position_value(relative, null, null, null, null);
  52     @include box-shadow(0px, 3px, 10px, 0px, rgba($black, 0.5));
  53     @include padding-value(20, 30, 20, 30);
  54     flex-wrap: wrap;
  55     color: $white;
  56     overflow: visible;
  57     .login-logo {
  58       @include flexbox(flex, center, null, null, center, null);
  59       @include position_value(absolute, -80px, null, null, 95px);
  60       @include box-shadow(1px, 2px, 0px, 0px, $cerise-pink);
  61       @include margin-value(0, 0, 10, 0);
  62       @include wh-value(160px, 150px);
  63       @include background(null, $white, null, null, null);
  64       @include roundedCornersPercentage(50%);
  65       img {
  66         @include wh-value(130px, auto);
  67         @include position_value(null, 50px, null, null, null);
  68       }
  69     }
  70     .login-form {
  71       @include wh-value(290px, null);
  72       @include padding-value(70, 0, 0, 0);
  73       text-align: center;
  74       .wrap-input {
  75         @include position_value(relative, null, null, null, null);
  76         @include wh-value(100%, null);
  77         @include margin-value(0, 0, 10, 0);
  78         z-index: 1;
  79         .input-control {
  80           @include font(null, 15px, null);
  81           @include line-height(1.5);
  82           @include wh-value(100%, 42px);
  83           @include padding-value(0, 30, 0, 65);
  84           @include flexbox(block, null, null, null, null, null);
  85           @include roundedCorners(25);
  86           @include border(all, 0, solid, $gray-80);
  87           @include background(null, $white, null, null, null);
  88           &:focus + .input-icon {
  89             color: $cerise-pink;
  90             @include padding-value(0, 0, 0, 25);
  91           }
  92         }
  93         .input-icon {
  94           @include font(null, 13px, null);
  95           @include flexbox(flex, null, null, null, center, null);
  96           @include position_value(absolute, null, null, 0, 0);
  97           @include wh-value(100%, 100%);
  98           @include padding-value(0, 0, 0, 35);
  99           @include roundedCorners(25);
 100           @include transition(all, 0.5s, null, null);
 101           pointer-events: none;
 102           color: $gray-600;
 103         }
 104       }
 105       .submit-btn {
 106         @include background(null, $white, null, null, null);
 107         @include roundedCornersPercentage(50%);
 108         @include border(all, 0, solid, $gray-80);
 109         @include transition(all, 0.3s, null, null);
 110         @include box-shadow(1px, 5px, 5px, 0px, rgba($black, 0.3), inset);
 111         cursor: pointer;
 112         @include font(null, 25px, null);
 113         @include wh-value(60px, 60px);
 114         @include margin-value(0, 0, 10, 0);
 115         @include padding-value(0, 0, 0, 0);
 116         color: $cerise-pink;
 117         &:hover {
 118           @include box-shadow(1px, 5px, 10px, 0px, rgba($black, 0.3));
 119         }
 120         .fa {
 121           @include transition(all, 0.4s, null, null);
 122           @include flexbox(block, null, null, null, null, null);
 123           @include padding-value(18, 18, 18, 18);
 124           &:hover {
 125             transform: scale(1.2);
 126           }
 127         }
 128       }
 129       .input-validation-msg {
 130         @include roundedCorners(25);
 131         @include background(null, $cerise-pink, null, null, null);
 132         @include margin-value(0, 0, 10, 0);
 133         @include padding-value(1, 0, 1, 15);
 134         @include font(null, 11px, null);
 135         color: $white;
 136         text-align: left;
 137       }
 138     }
 139   }
 140 }
 141 .login-footer {
 142   @include flexbox(flex, space-between, null, null, center, null);
 143   @include position_value(fixed, null, null, 0px, null);
 144   @include background(null, $purple, null, null, null);
 145   @include wh-value(100%, 40px);
 146   @include padding-value(0, 10, 0, 10);
 147   color: $white;
 148   opacity: 0.9;
 149   a {
 150     @include font(null, null, bold);
 151     color: $white;
 152     &:hover {
 153       text-decoration: underline;
 154     }
 155   }
 156 }