removing outlines

src/app/login/login.component.html

@@ -29,7 +29,7 @@
                 </div>
             </div>
             <div class="align-middle flex-row">
-                <button mat-raised-button color="primary">Sign In</button>
+                <button mat-raised-button color="primary" >Sign In</button>
             </div>
             <div class="flex-row">
                 <img class="icon-bottom" [src]="bottomImagePath" />

src/app/login/login.component.scss

@@ -83,6 +83,180 @@
     color: red!important;
 }
 
-::ng-deep input.ng-invalid.ng-touched{
-    border: none!important;
+::ng-deep input.ng-invalid.ng-touched{.page-container {
+	 height: 100%;
+	 display: flex;
+	 flex-direction: column;
+	 background-image: linear-gradient(to right bottom, #e2bd2b, #f0a829, #fa9133, #ff7a41, #ff6352, #ff5774, #f55595, #df5db3, #af77d6, #748be2, #3798d8, #229ec2);
+}
+ #login-screen {
+	 background-image: linear-gradient(to right bottom, #e2bd2b, #f0a829, #fa9133, #ff7a41, #ff6352, #ff5774, #f55595, #df5db3, #af77d6, #748be2, #3798d8, #229ec2);
+}
+ #login-screen .content {
+	 padding: 5%;
+}
+ #login-screen .icon {
+	 width: 70%;
+	 height: 70%;
+	 align-items: center;
+	 justify-content: center;
+	 margin: auto;
+	 padding: 30% 5%;
+}
+ #login-screen button {
+	 border-radius: 10px;
+	 font-size: 0.938rem;
+	 width: 100%;
+	 background: #22138b 0 0 no-repeat padding-box !important;
+	 margin: 2%;
+}
+ #login-screen .flex-row {
+	 flex-direction: row;
+	 display: flex;
+	 width: 100%;
+}
+ #login-screen .font-body-medium {
+	 font-size: 1.25rem;
+	 line-height: 1.125rem;
+	 letter-spacing: 1px;
+	 font-family: "Raleway VariableFont";
+	 text-transform: uppercase;
+}
+ #login-screen ::ng-deep .mat-form-field-outline-start {
+	 border-radius: 0.5rem 0 0 0.5rem !important;
+	 min-width: 0.5rem !important;
+}
+ #login-screen ::ng-deep .mat-form-field-outline-end {
+	 border-radius: 0 0.5rem 0.5rem 0 !important;
+}
+ #login-screen ::ng-deep .mat-form-field-appearance-outline .mat-form-field-outline {
+	 background-color: #e0e9f8;
+	 border-radius: 0.5rem;
+}
+ #login-screen .align-middle {
+	 width: 100%;
+	 text-align: center;
+}
+ #login-screen .title {
+	 color: #fff;
+	 font-weight: bold;
+	 font-size: 1.563rem;
+	 margin-bottom: 15%;
+	 font-family: "Raleway VariableFont";
+	 text-transform: uppercase;
+}
+ #login-screen .input-field {
+	 width: 100%;
+	 padding-bottom: 1%;
+}
+ #login-screen .error {
+	 color: #fff;
+	 font-size: 1rem;
+}
+ .bottom-20 {
+	 padding-bottom: 10%;
+}
+ .icon-bottom {
+	 width: 30%;
+	 height: 30%;
+	 align-items: center;
+	 justify-content: center;
+	 margin: auto;
+	 padding: 30% 5%;
+}
+ ::ng-deep .mat-form-field-appearance-outline.mat-form-field-invalid .mat-form-field-outline {
+	 color: red !important;
+}
+ ::ng-deep input.ng-invalid.ng-touched {
+	 border: none !important;
+}
+ 
+    border: none!important;.page-container {
+        height: 100%;
+        display: flex;
+        flex-direction: column;
+        background-image: linear-gradient(to right bottom, #e2bd2b, #f0a829, #fa9133, #ff7a41, #ff6352, #ff5774, #f55595, #df5db3, #af77d6, #748be2, #3798d8, #229ec2);
+   }
+    #login-screen {
+        background-image: linear-gradient(to right bottom, #e2bd2b, #f0a829, #fa9133, #ff7a41, #ff6352, #ff5774, #f55595, #df5db3, #af77d6, #748be2, #3798d8, #229ec2);
+   }
+    #login-screen .content {
+        padding: 5%;
+   }
+    #login-screen .icon {
+        width: 70%;
+        height: 70%;
+        align-items: center;
+        justify-content: center;
+        margin: auto;
+        padding: 30% 5%;
+   }
+    #login-screen button {
+        border-radius: 10px;
+        font-size: 0.938rem;
+        width: 100%;
+        background: #22138b 0 0 no-repeat padding-box !important;
+        margin: 2%;
+   }
+    #login-screen .flex-row {
+        flex-direction: row;
+        display: flex;
+        width: 100%;
+   }
+    #login-screen .font-body-medium {
+        font-size: 1.25rem;
+        line-height: 1.125rem;
+        letter-spacing: 1px;
+        font-family: "Raleway VariableFont";
+        text-transform: uppercase;
+   }
+    #login-screen ::ng-deep .mat-form-field-outline-start {
+        border-radius: 0.5rem 0 0 0.5rem !important;
+        min-width: 0.5rem !important;
+   }
+    #login-screen ::ng-deep .mat-form-field-outline-end {
+        border-radius: 0 0.5rem 0.5rem 0 !important;
+   }
+    #login-screen ::ng-deep .mat-form-field-appearance-outline .mat-form-field-outline {
+        background-color: #e0e9f8;
+        border-radius: 0.5rem;
+   }
+    #login-screen .align-middle {
+        width: 100%;
+        text-align: center;
+   }
+    #login-screen .title {
+        color: #fff;
+        font-weight: bold;
+        font-size: 1.563rem;
+        margin-bottom: 15%;
+        font-family: "Raleway VariableFont";
+        text-transform: uppercase;
+   }
+    #login-screen .input-field {
+        width: 100%;
+        padding-bottom: 1%;
+   }
+    #login-screen .error {
+        color: #fff;
+        font-size: 1rem;
+   }
+    .bottom-20 {
+        padding-bottom: 10%;
+   }
+    .icon-bottom {
+        width: 30%;
+        height: 30%;
+        align-items: center;
+        justify-content: center;
+        margin: auto;
+        padding: 30% 5%;
+   }
+    ::ng-deep .mat-form-field-appearance-outline.mat-form-field-invalid .mat-form-field-outline {
+        color: red !important;
+   }
+    ::ng-deep input.ng-invalid.ng-touched {
+        border: none !important;
+   }
+    
 }