Initial Commit - NG UI

[osm/NG-UI.git] / src / app / login / LoginComponent.scss

diff --git a/src/app/login/LoginComponent.scss b/src/app/login/LoginComponent.scss
new file mode 100644 (file)
index 0000000..28ac159
--- /dev/null
+++ b/src/app/login/LoginComponent.scss
@@ -0,0 +1,156 @@
+/*
+ Copyright 2020 TATA ELXSI
+
+ Licensed under the Apache License, Version 2.0 (the 'License');
+ you may not use this file except in compliance with the License.
+ You may obtain a copy of the License at
+
+    http://www.apache.org/licenses/LICENSE-2.0
+
+ Unless required by applicable law or agreed to in writing, software
+ distributed under the License is distributed on an "AS IS" BASIS,
+ WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ See the License for the specific language governing permissions and
+ limitations under the License.
+
+ Author: KUMARAN M (kumaran.m@tataelxsi.co.in), RAJESH S (rajesh.s@tataelxsi.co.in), BARATH KUMAR R (barath.r@tataelxsi.co.in)
+*/
+@import "../../assets/scss/mixins/mixin";
+@import "../../assets/scss/variable";
+
+.login-container {
+  @include wh-value(100%, 100vh);
+  @include flexbox(flex, center, null, null, center, null);
+  @include background(url("../../assets/images/login_background.jpg"), null, cover, no-repeat, center);
+  background-attachment: fixed;
+  flex-wrap: wrap;
+  .wrap-login {
+    @include background(
+      linear-gradient(
+        to left bottom,
+        #00c0ef,
+        #00b3f9,
+        #3ea3fd,
+        #7190f8,
+        #9c78e8,
+        #a86cdd,
+        #b25fd1,
+        #bb51c3,
+        #b151c4,
+        #a652c6,
+        #9b53c6,
+        #9053c7
+      ),
+      null,
+      null,
+      null,
+      null
+    );
+    @include roundedCorners(15);
+    @include flexbox(flex, space-between, null, null, null, null);
+    @include position_value(relative, null, null, null, null);
+    @include box-shadow(0px, 3px, 10px, 0px, rgba($black, 0.5));
+    @include padding-value(20, 30, 20, 30);
+    flex-wrap: wrap;
+    color: $white;
+    overflow: visible;
+    .login-logo {
+      @include flexbox(flex, center, null, null, center, null);
+      @include position_value(absolute, -80px, null, null, 95px);
+      @include box-shadow(1px, 2px, 0px, 0px, $cerise-pink);
+      @include margin-value(0, 0, 10, 0);
+      @include wh-value(160px, 150px);
+      @include background(null, $white, null, null, null);
+      @include roundedCornersPercentage(50%);
+      img {
+        @include wh-value(130px, auto);
+        @include position_value(null, 50px, null, null, null);
+      }
+    }
+    .login-form {
+      @include wh-value(290px, null);
+      @include padding-value(70, 0, 0, 0);
+      text-align: center;
+      .wrap-input {
+        @include position_value(relative, null, null, null, null);
+        @include wh-value(100%, null);
+        @include margin-value(0, 0, 10, 0);
+        z-index: 1;
+        .input-control {
+          @include font(null, 15px, null);
+          @include line-height(1.5);
+          @include wh-value(100%, 42px);
+          @include padding-value(0, 30, 0, 65);
+          @include flexbox(block, null, null, null, null, null);
+          @include roundedCorners(25);
+          @include border(all, 0, solid, $gray-80);
+          @include background(null, $white, null, null, null);
+          &:focus + .input-icon {
+            color: $cerise-pink;
+            @include padding-value(0, 0, 0, 25);
+          }
+        }
+        .input-icon {
+          @include font(null, 13px, null);
+          @include flexbox(flex, null, null, null, center, null);
+          @include position_value(absolute, null, null, 0, 0);
+          @include wh-value(100%, 100%);
+          @include padding-value(0, 0, 0, 35);
+          @include roundedCorners(25);
+          @include transition(all, 0.5s, null, null);
+          pointer-events: none;
+          color: $gray-600;
+        }
+      }
+      .submit-btn {
+        @include background(null, $white, null, null, null);
+        @include roundedCornersPercentage(50%);
+        @include border(all, 0, solid, $gray-80);
+        @include transition(all, 0.3s, null, null);
+        @include box-shadow(1px, 5px, 5px, 0px, rgba($black, 0.3), inset);
+        cursor: pointer;
+        @include font(null, 25px, null);
+        @include wh-value(60px, 60px);
+        @include margin-value(0, 0, 10, 0);
+        @include padding-value(0, 0, 0, 0);
+        color: $cerise-pink;
+        &:hover {
+          @include box-shadow(1px, 5px, 10px, 0px, rgba($black, 0.3));
+        }
+        .fa {
+          @include transition(all, 0.4s, null, null);
+          @include flexbox(block, null, null, null, null, null);
+          @include padding-value(18, 18, 18, 18);
+          &:hover {
+            transform: scale(1.2);
+          }
+        }
+      }
+      .input-validation-msg {
+        @include roundedCorners(25);
+        @include background(null, $cerise-pink, null, null, null);
+        @include margin-value(0, 0, 10, 0);
+        @include padding-value(1, 0, 1, 15);
+        @include font(null, 11px, null);
+        color: $white;
+        text-align: left;
+      }
+    }
+  }
+}
+.login-footer {
+  @include flexbox(flex, space-between, null, null, center, null);
+  @include position_value(fixed, null, null, 0px, null);
+  @include background(null, $purple, null, null, null);
+  @include wh-value(100%, 40px);
+  @include padding-value(0, 10, 0, 10);
+  color: $white;
+  opacity: 0.9;
+  a {
+    @include font(null, null, bold);
+    color: $white;
+    &:hover {
+      text-decoration: underline;
+    }
+  }
+}
\ No newline at end of file