1 files changed, 132 insertions, 0 deletions
diff --git a/src/assets/styles/bmc/_sila/_forms.scss b/src/assets/styles/bmc/_sila/_forms.scss
new file mode 100644
index 00000000..428a40c2
--- /dev/null
+++ b/src/assets/styles/bmc/_sila/_forms.scss
@@ -0,0 +1,132 @@
+// Helper text
+.form-text {
+  font-size: $form-label-font-size;
+  line-height: $form-line-height;
+  margin-top: -$spacer / 4;
+  margin-bottom: $spacer / 2;
+  color: gray("700")!important;
+}
+
+// Legend label
+.col-form-label {
+  color: gray("800");
+  font-size: $form-label-font-size;
+  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");
+}
+
+.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");
+  }
+  &::placeholder {
+    color: gray("600");
+  }
+  &.is-invalid,
+  &:invalid {
+    border: 1px solid theme-color("danger") !important;
+  }
+}
+
+.custom-select,
+.custom-control-label,
+.form-control {
+  color: theme-color("dark") !important;
+  font-size: 1rem;
+}
+
+// Inverted form colors
+.form-background {
+  background-color: gray("100");
+  .custom-select,
+  .form-control {
+    background-color: $white;
+    &:focus {
+      background-color: $white;
+    }
+    &:disabled {
+      background-color: gray("400");
+      color: gray("600");
+    }
+  }
+}
+
+.invalid-feedback {
+  font-size: $form-label-font-size;
+  line-height: $form-line-height;
+}
+
+.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;
+  cursor: pointer;
+}
+
+.custom-control {
+  .custom-control-input[disabled=disabled] {
+    & + .custom-control-label {
+      // Disabled label for checkbox, radio,
+      // switch bootstrap form components
+      color: gray("600")!important;
+    }
+  }
+}
+
+.custom-control-input:focus ~ .custom-control-label::before{
+  box-shadow: 0 0 0 2px  theme-color("primary");
+}
+
+.custom-control-label::after {
+  cursor: pointer;
+}
+
+.b-form-tag-remove {
+  // X button to remove tag
+  font-weight: normal;
+}
+
+.b-form-tags-button {
+  // Add button inside input field
+  white-space: nowrap;
+  margin-right: -$spacer;
+  &.btn-link-primary {
+    color: theme-color("primary");
+    fill: currentColor;
+  }
+}
+
+// Form validation icon
+  .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 {
+  &.is-invalid,
+  &.is-valid {
+    background-position: right 3rem bottom 50%;
+  }
+}