1 files changed, 80 insertions, 34 deletions

diff --git a/src/assets/styles/bmc/_sila/_forms.scss b/src/assets/styles/bmc/_sila/_forms.scss
index f993804f..4bc8f626 100644
--- a/src/assets/styles/bmc/_sila/_forms.scss
+++ b/src/assets/styles/bmc/_sila/_forms.scss
@@ -4,14 +4,34 @@
   line-height: $form-line-height;
   margin-top: -$spacer / 4;
   margin-bottom: $spacer / 2;
-  color: gray("700") !important;
+  @include themify($themes) {
+    color: themed("text-tretiatry") !important;
+  }
 }
 
 // Legend label
 .col-form-label {
-  color: gray("800");
   font-size: $form-label-font-size;
   line-height: $form-line-height;
+  @include themify($themes) {
+    color: themed("text-secondary");
+  }
+}
+
+input:-webkit-autofill,
+input:-webkit-autofill:focus {
+  @include themify($themes) {
+    -webkit-box-shadow: 0 0 0 50px themed("gray-passwordfield") inset; /*your box-shadow*/
+    -webkit-text-fill-color: themed("text-secondary");
+  }
+}
+
+input:-webkit-autofill:focus {
+  @include themify($themes) {
+    -webkit-box-shadow: 0 0 0 50px themed("gray-passwordfield") inset; /*your box-shadow*/
+    -webkit-text-fill-color: themed("text-secondary");
+    border: 1px solid theme-color("danger") !important;
+  }
 }
 
 div:not(.search-global) > .form-group {
@@ -33,7 +53,7 @@ div:not(.search-global) > .form-group {
     right: 10px;
     top: 0;
     margin-right: 0;
-    @include media-breakpoint-down(sm) { 
+    @include media-breakpoint-down(sm) {
       top: -25px;
     }
   }
@@ -50,16 +70,12 @@ div:not(.search-global) > .form-group {
     }
   }
   .custom-select {
-    background-color: $gray-5;
     border: none;
   }
   .custom-select:disabled,
   .form-control:disabled {
     position: initial;
   }
-  .form-control:disabled:hover {
-    background-color: #cccccc;
-  }
   .input-group-text {
     border: none;
     background-color: $gray-5;
@@ -84,33 +100,49 @@ div:not(.search-global) > .form-group {
   }
   label {
     position: relative;
-    color: $text-tretiatry;
     margin-left: 10px;
     margin-bottom: $spacer / 4;
+    @include themify($themes) {
+      color: themed("text-tretiatry");
+    }
     span {
       display: block;
     }
   }
 }
 .b-form-datepicker label {
-    margin-left: 0px !important;
+  margin-left: 0px !important;
 }
 
 .custom-select,
 .form-control,
 .input-group-text {
   border-radius: $border-radius;
-  background-color: $white;
+  @include themify($themes) {
+    color: themed("text-secondary");
+    background-color: themed("gray-5") !important;
+    option {
+      height: 18px;
+      color: themed("text-secondary");
+      background-color: themed("gray-20");
+    }
+    option[disabled="disabled"] {
+      color: themed("text-primary");
+      background-color: themed("gray-20");
+    }
+  }
 }
 
 .custom-select,
 .form-control {
-  &:disabled {
-    background-color: gray("400");
-    color: gray("600");
-  }
-  &::placeholder {
-    color: gray("600");
+  @include themify($themes) {
+    &:disabled {
+      color: themed("text-quaternary") !important;
+      background-color: themed("gray-20") !important;
+    }
+    &::placeholder {
+      color: themed("text-quaternary");
+    }
   }
   &.is-invalid,
   &:invalid {
@@ -128,16 +160,19 @@ div:not(.search-global) > .form-group {
 }
 
 .form-control {
-  color: $text-secondary;
   border-radius: $border-radius;
   border: none;
-  background-color: $gray-5;
-  font-size: 0.875rem;
-  &:focus {
-    color: $text-secondary;
-  }
-  &:hover {
-    background-color: $gray-5-hover;
+  @include themify($themes) {
+    color: themed("text-secondary");
+    background-color: themed("gray-5");
+    font-size: 0.875rem;
+
+    &:focus {
+      color: themed("text-secondary");
+    }
+    ul > li > div > input {
+      color: themed("text-secondary") !important;
+    }
   }
 }
 
@@ -200,9 +235,11 @@ div:not(.search-global) > .form-group {
   .custom-control-label::before,
   .custom-control-label::after {
     border-radius: $border-radius / 2;
-    background-color: #fff;
-    border: 2px solid $on-surface-secondary;
     box-shadow: none;
+    @include themify($themes) {
+      border: 2px solid themed("on-surface-secondary");
+      background-color: themed("surface-primary");
+    }
   }
 }
 
@@ -211,20 +248,29 @@ div:not(.search-global) > .form-group {
     background-image: none;
   }
   .custom-control-input:checked ~ .custom-control-label::before {
-    box-shadow: 0px 0px 0px 3px $white inset;
+    @include themify($themes) {
+      box-shadow: 0px 0px 0px 3px themed("surface-primary") inset;
+    }
+  }
+  .custom-control-label::before {
+    @include themify($themes) {
+      background-color: themed("surface-primary");
+    }
   }
 }
 
 .custom-switch {
   width: 28px;
   height: 16px;
-  .custom-control-input ~ .custom-control-label::after {
-    border: 1px solid $gray-20;
-    background: $white;
-  }
-  .custom-control-input ~ .custom-control-label::before {
-    border: 1px solid $gray-20;
-    background: rgba(4, 10, 15, 0.3);
+  @include themify($themes) {
+    .custom-control-input ~ .custom-control-label::after {
+      border: 1px solid themed("gray-30");
+      background: themed("custom-switch-back");
+    }
+    .custom-control-input ~ .custom-control-label::before {
+      border: 1px solid themed("gray-30");
+      background: themed("gray-30");
+    }
   }
 }