SILABMC-191: Fix login fields

3 files changed, 31 insertions, 35 deletions

diff --git a/src/assets/styles/bmc/_sila/_forms.scss b/src/assets/styles/bmc/_sila/_forms.scss
index 82f7b710..5a5d61c6 100644
--- a/src/assets/styles/bmc/_sila/_forms.scss
+++ b/src/assets/styles/bmc/_sila/_forms.scss
@@ -4,7 +4,7 @@
   line-height: $form-line-height;
   margin-top: -$spacer / 4;
   margin-bottom: $spacer / 2;
-  color: gray("700")!important;
+  color: gray("700") !important;
 }
 
 // Legend label
@@ -45,7 +45,7 @@
 }
 
 .custom-select {
-  background-image: url('~@/assets/images/_sila/chevron-down.svg');
+  background-image: url("~@/assets/images/_sila/chevron-down.svg");
   background-size: 18px;
 }
 
@@ -54,7 +54,7 @@
   -webkit-appearance: none;
   margin: 0;
 }
-.form-control[type='number'] {
+.form-control[type="number"] {
   -moz-appearance: textfield;
 }
 
@@ -116,8 +116,10 @@
 }
 
 .custom-checkbox .custom-control-input:checked ~ .custom-control-label::after,
-.custom-checkbox .custom-control-input:indeterminate ~ .custom-control-label::before,
-.custom-control-input:checked ~ .custom-control-label::before  {
+.custom-checkbox
+  .custom-control-input:indeterminate
+  ~ .custom-control-label::before,
+.custom-control-input:checked ~ .custom-control-label::before {
   border: 1px solid $red !important;
   background-color: $red !important;
   box-shadow: 0px 0px 0px 3px $white inset;
@@ -127,16 +129,16 @@
   }
 }
 
-.custom-radio .custom-control-input:checked ~ .custom-control-label::after{
+.custom-radio .custom-control-input:checked ~ .custom-control-label::after {
   background-image: none;
 }
 
 .custom-control {
-  .custom-control-input[disabled=disabled] {
+  .custom-control-input[disabled="disabled"] {
     & + .custom-control-label {
       // Disabled label for checkbox, radio,
       // switch bootstrap form components
-      color: gray("600")!important;
+      color: gray("600") !important;
     }
   }
 }
@@ -146,13 +148,11 @@
   height: 16px;
 }
 
-.custom-switch
-.custom-control-input:focus ~ .custom-control-label::before {
+.custom-switch .custom-control-input:focus ~ .custom-control-label::before {
   box-shadow: none;
 }
 
-.custom-switch
-.custom-control-input ~ .custom-control-label::after {
+.custom-switch .custom-control-input ~ .custom-control-label::after {
   border: 1px solid $gray-20;
   background: $white;
 }
@@ -166,8 +166,7 @@
   border-color: $gray-20;
 }
 
-.custom-switch
-.custom-control-input ~ .custom-control-label::before {
+.custom-switch .custom-control-input ~ .custom-control-label::before {
   border: 1px solid $gray-20;
   background: rgba(4, 10, 15, 0.3);
 }
@@ -192,10 +191,10 @@
 }
 
 // Form validation icon
-  .form-control.is-invalid,
-  .form-control.is-valid {
-    background-position: right 1rem bottom 50%;
-  }
+.form-control.is-invalid,
+.form-control.is-valid {
+  background-position: right 1rem bottom 50%;
+}
 
 // Form validation icon with datepicker or password toggle icon
 .form-control-with-button {
@@ -208,7 +207,7 @@
 .invisible {
   height: 0;
   margin-bottom: 0;
-}  
+}
 // Global style progress bar
 .progress {
   height: 8px;
@@ -241,4 +240,4 @@
     display: flex;
     flex-direction: column;
   }
-}
\ No newline at end of file
+}
diff --git a/src/assets/styles/bmc/_sila/_modal.scss b/src/assets/styles/bmc/_sila/_modal.scss
index 5f40d5e1..f0fc764f 100644
--- a/src/assets/styles/bmc/_sila/_modal.scss
+++ b/src/assets/styles/bmc/_sila/_modal.scss
@@ -18,7 +18,7 @@
     &:hover {
       background-color: none;
     }
-    }
+  }
   .modal-title {
     font-size: 1.25rem !important;
     font-weight: 500;
@@ -35,13 +35,12 @@
   justify-content: flex-start;
 }
 
-.file-input_container >
-.custom-file {
+.file-input_container > .custom-file {
   height: 100%;
 }
 
-  .custom-file-input ~ .custom-file-label {
-    background-color: transparent;
+.custom-file-input ~ .custom-file-label {
+  background-color: transparent;
   border: 1px dashed $text-tretiatry;
   box-sizing: border-box;
   border-radius: $border-radius;
@@ -53,7 +52,6 @@
   justify-content: center;
 }
 
-
 .custom-file-input ~ .custom-file-label::after {
   display: none;
 }
@@ -74,4 +72,4 @@
       width: 100%;
     }
   }
-} 
+}
diff --git a/src/assets/styles/bmc/_sila/pages/_login.scss b/src/assets/styles/bmc/_sila/pages/_login.scss
index e3abde78..99c6d9ed 100644
--- a/src/assets/styles/bmc/_sila/pages/_login.scss
+++ b/src/assets/styles/bmc/_sila/pages/_login.scss
@@ -1,4 +1,3 @@
-
 //
 // Login Page:
 //
@@ -15,20 +14,20 @@
   margin-bottom: 1.5rem;
   display: flow-root;
 }
-  
+
 .login-form > .form-group > div > input,
-.login-form > .form-group > div > select, 
-.input-password-toggle-container > input {
+.login-form > .form-group > div > select,
+.login-form > .login-form__section .input-password-toggle-container > input {
   margin: -28px 0 0 0;
   padding-top: 28px;
-  height: 56px; 
+  height: 56px;
 }
 
-.login-form > .form-group  > label,
-.login-form__section > label {
+.login-form > .form-group > label,
+.login-form > .login-form__section > label {
   margin-left: 10px;
   margin-bottom: 0.25rem;
-  color: $text-tretiatry 
+  color: $text-tretiatry;
 }
 
 .login-main > h1 {