1 files changed, 244 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..82f7b710
--- /dev/null
+++ b/src/assets/styles/bmc/_sila/_forms.scss
@@ -0,0 +1,244 @@
+// 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;
+  & > label {
+    color: $text-tretiatry;
+    margin-bottom: $spacer / 4;
+  }
+}
+
+.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;
+  }
+}
+
+.custom-select {
+  background-image: url('~@/assets/images/_sila/chevron-down.svg');
+  background-size: 18px;
+}
+
+.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;
+  width: 100%;
+  .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-control-label > span {
+  vertical-align: sub;
+}
+
+.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: 1px solid $red !important;
+  background-color: $red !important;
+  box-shadow: 0px 0px 0px 3px $white inset;
+  cursor: pointer;
+  &:focus {
+    box-shadow: none !important;
+  }
+}
+
+.custom-radio .custom-control-input:checked ~ .custom-control-label::after{
+  background-image: none;
+}
+
+.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;
+}
+
+@media (min-width: 768px) {
+  .search-block {
+    position: absolute;
+    top: 4.3rem;
+    right: $spacer;
+    justify-content: end;
+  }
+}
+@media (max-width: 768px) {
+  .date-filter {
+    display: flex;
+    flex-direction: column;
+  }
+}
\ No newline at end of file