1 files changed, 210 insertions, 0 deletions
diff --git a/src/assets/styles/bmc/_ibs/_forms.scss b/src/assets/styles/bmc/_ibs/_forms.scss
new file mode 100644
index 00000000..914bf379
--- /dev/null
+++ b/src/assets/styles/bmc/_ibs/_forms.scss
@@ -0,0 +1,210 @@
+// 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-radius: $border-radius;
+  background-color: $white;
+}
+
+.custom-select,
+.form-control {
+  &:disabled {
+    background-color: gray("400");
+    color: gray("600");
+  }
+  &::placeholder {
+    color: gray("600");
+  }
+  &.is-invalid,
+  &:invalid {
+    border: 1px solid theme-color("danger") !important;
+  }
+}
+
+.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: $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: none;
+  padding: 0 !important;
+  .custom-select,
+  .form-control {
+    color: #0c1c29e6;
+    border-radius: $border-radius;
+    border: none;
+    background-color: $gray-5;
+    &:hover {
+      background-color: $gray-5-hover;
+    }
+    &:focus {
+      border: 1px solid gray("400");
+    }
+    &:disabled {
+      background-color: gray("400");
+      color: gray("600");
+    }
+    &.is-valid {
+      border: 1px solid gray("400");
+    }
+  }
+}
+
+.invalid-feedback {
+  font-size: $form-label-font-size;
+  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: $red;
+  border-color: $red;
+  cursor: pointer;
+  &:focus {
+    box-shadow: none !important;
+  }
+}
+
+.custom-control {
+  .custom-control-input[disabled=disabled] {
+    & + .custom-control-label {
+      // Disabled label for checkbox, radio,
+      // switch bootstrap form components
+      color: gray("600")!important;
+    }
+  }
+}
+
+.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 {
+  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%;
+  }
+}
+// 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;
+}