1 files changed, 273 insertions, 0 deletions
diff --git a/src/assets/styles/bmc/_sila/custom/_forms.scss b/src/assets/styles/bmc/_sila/custom/_forms.scss
new file mode 100644
index 00000000..bf69795a
--- /dev/null
+++ b/src/assets/styles/bmc/_sila/custom/_forms.scss
@@ -0,0 +1,273 @@
+// 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;
+}
+
+.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");
+  }
+  &.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;
+}
+
+// .custom-select,
+// .custom-control-label,
+.form-control {
+  border-radius: 8px;
+  border: none;
+  background-color: $faint-secondary-primary-5;
+  &:hover {
+    background-color: $faint-secondary-primary-5-hover;
+  }
+}
+
+.select-per-page {
+  padding: 0 0 0 5px;
+  width: 146px !important;
+  height: 24px;
+  background-color: transparent;
+  border: 1px solid $on-surface-tretiatry;
+  border-radius: 4px;
+  background-image: url('~@/assets/images/_sila/icon-chevron.svg');
+}
+
+// Inverted form colors
+.form-background {
+  background-color: none;
+  .custom-select,
+  .form-control {
+    border-radius: 8px;
+    border: none;
+    background-color: $faint-secondary-primary-5;
+    &:hover {
+      // opacity: 0.1;
+      background-color: $faint-secondary-primary-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 {
+  line-height: 23px;
+}
+
+.custom-radio {
+  line-height: 23px !important;
+}
+
+.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  {
+  border-radius: 3px;
+  background-color: $red-brand-primary;
+  border-color: $red-brand-primary;
+  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 $faint-secondary-primary-20;
+  background: $white;
+}
+
+.custom-control-input:focus:not(:checked) ~ .custom-control-label::before {
+  border-color: $faint-secondary-primary-20;
+}
+
+.custom-control-input:not(:disabled):active ~ .custom-control-label::before {
+  background-color: rgba(4, 10, 15, 0.3);
+  border-color: $faint-secondary-primary-20;
+}
+
+.custom-switch
+.custom-control-input ~ .custom-control-label::before {
+  border: 1px solid $faint-secondary-primary-20;
+  background: rgba(4, 10, 15, 0.3);
+}
+
+.custom-switch
+.custom-control-input:checked ~ .custom-control-label::before {
+  background: $red-brand-primary;
+  border: 1px solid $faint-secondary-primary-20;
+  border-radius: 8px;
+}
+
+.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%;
+  }
+}
+
+// Global style progress bar
+.progress {
+  width: 120px;
+  height: 8px;
+  border-radius: 4px;
+  background-color: $faint-secondary-primary-10;
+}
+
+.progress-bar {
+  background-color: $red-brand-primary;
+  border-radius: 4px;
+}
+
+.progress_bar_percent {
+  color: $red-brand-primary;
+}
+
+.cb label{
+  padding-top: 4px;
+}
+.system-control__radio label {
+  padding-top: 4px;
+}
+
+//radio buttons style
+  .custom-radio ::before {
+    border: 1px solid $red-brand-primary;
+  background-color: #fff;
+  border-radius: 100%;
+}
+
+.custom-radio
+.custom-control-input:checked
+~ .custom-control-label::before {
+  border: 2px solid $red-brand-primary;
+  background-color: $red-brand-primary;
+  box-shadow: 0px 0px 0px 2.4px $white inset;
+  border-radius: 100%;
+}
+
+  .custom-radio
+  .custom-control-input:hover
+  ~ .custom-control-label::before {
+  background-color: $red-brand-primary-hover !important;
+  box-shadow: 0px 0px 0px 2.4px $white inset;
+  border-color: $red-brand-primary-hover;
+}
+
+.custom-radio
+.custom-control-input:checked
+~ .custom-control-label::after {
+  background-image: none !important;
+  border-radius: 100%;
+}
+
+.custom-radio
+.custom-control-input:active
+~ .custom-control-label::before {
+  background-color: $red-brand-primary-active !important;
+  box-shadow: 0px 0px 0px 2.4px $white inset;
+  border-color: $red-brand-primary-active;
+}