1 files changed, 99 insertions, 25 deletions

diff --git a/src/assets/styles/bmc/custom/_forms.scss b/src/assets/styles/bmc/custom/_forms.scss
index 428a40c2..37ecc214 100644
--- a/src/assets/styles/bmc/custom/_forms.scss
+++ b/src/assets/styles/bmc/custom/_forms.scss
@@ -14,27 +14,15 @@
   line-height: $form-line-height;
 }
 
-.form-group {
-  margin-bottom: $spacer * 2;
-}
-
 .custom-select,
 .form-control,
 .input-group-text {
-  border-color: gray("500") !important;
-  background-color: gray("100");
+  border-radius: $border-radius;
+  background-color: $white;
 }
 
 .custom-select,
 .form-control {
-  &:active {
-    border: 1px solid $primary!important;
-  }
-  &:focus {
-    color: theme-color("dark");
-    background-color: gray("100");
-    box-shadow: inset 0 0 0 3px gray("100"), inset 0 0 0 5px $primary !important;
-  }
   &:disabled {
     background-color: gray("400");
     color: gray("600");
@@ -48,26 +36,52 @@
   }
 }
 
-.custom-select,
-.custom-control-label,
+.form-control::-webkit-outer-spin-button,
+.form-control::-webkit-inner-spin-button {
+  -webkit-appearance: none;
+  margin: 0;
+}
+.form-control[type='number'] {
+  -moz-appearance: textfield;
+}
+
 .form-control {
-  color: theme-color("dark") !important;
-  font-size: 1rem;
+  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;
+  }
 }
 
 // Inverted form colors
 .form-background {
-  background-color: gray("100");
+  background-color: none;
+  padding: 0 !important;
   .custom-select,
   .form-control {
-    background-color: $white;
+    color: #0c1c29e6;
+    border-radius: $border-radius;
+    border: none;
+    background-color: $gray-5;
+    &:hover {
+      background-color: $gray-5-hover;
+    }
     &:focus {
-      background-color: $white;
+      border: 1px solid gray("400");
     }
     &:disabled {
       background-color: gray("400");
       color: gray("600");
     }
+    &.is-valid {
+      border: 1px solid gray("400");
+    }
   }
 }
 
@@ -76,12 +90,22 @@
   line-height: $form-line-height;
 }
 
+.custom-checkbox ::before {
+  box-shadow: none !important;
+  border: 2px solid $on-surface-secondary;
+  background-color: #fff;
+  border-radius: 3px;
+}
+
 .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  {
-  background-color: $black;
-  border-color: $black;
+  background-color: $red;
+  border-color: $red;
   cursor: pointer;
+  &:focus {
+    box-shadow: none !important;
+  }
 }
 
 .custom-control {
@@ -94,8 +118,35 @@
   }
 }
 
-.custom-control-input:focus ~ .custom-control-label::before{
-  box-shadow: 0 0 0 2px  theme-color("primary");
+.custom-switch {
+  width: 28px;
+  height: 16px;
+}
+
+.custom-switch
+.custom-control-input:focus ~ .custom-control-label::before {
+  box-shadow: none;
+}
+
+.custom-switch
+.custom-control-input ~ .custom-control-label::after {
+  border: 1px solid $gray-20;
+  background: $white;
+}
+
+.custom-control-input:focus:not(:checked) ~ .custom-control-label::before {
+  border-color: $gray-20;
+}
+
+.custom-control-input:not(:disabled):active ~ .custom-control-label::before {
+  background-color: rgba(4, 10, 15, 0.3);
+  border-color: $gray-20;
+}
+
+.custom-switch
+.custom-control-input ~ .custom-control-label::before {
+  border: 1px solid $gray-20;
+  background: rgba(4, 10, 15, 0.3);
 }
 
 .custom-control-label::after {
@@ -130,3 +181,26 @@
     background-position: right 3rem bottom 50%;
   }
 }
+// For invisible label of fields
+.invisible {
+  height: 0;
+  margin-bottom: 0;
+}  
+// Global style progress bar
+.progress {
+  height: 8px;
+  background-color: $gray-10;
+}
+
+.progress-bar {
+  background-color: $red;
+  border-radius: 4px;
+}
+
+.progress_bar_percent {
+  color: $red;
+}
+
+.system-control__radio label {
+  padding-top: 4px;
+}