1// Helper text
2.form-text {
3  font-size: $form-label-font-size;
4  line-height: $form-line-height;
5  margin-top: -$spacer / 4;
6  margin-bottom: $spacer / 2;
7  color: gray("700")!important;
8}
9
10// Legend label
11.col-form-label {
12  color: gray("800");
13  font-size: $form-label-font-size;
14  line-height: $form-line-height;
15}
16
17.form-group {
18  margin-bottom: $spacer * 2;
19}
20
21.custom-select,
22.form-control,
23.input-group-text {
24  border-color: gray("500") !important;
25  background-color: gray("100");
26}
27
28.custom-select,
29.form-control {
30  &:active {
31    border: 1px solid $primary!important;
32  }
33  &:focus {
34    color: theme-color("dark");
35    background-color: gray("100");
36    box-shadow: inset 0 0 0 3px gray("100"), inset 0 0 0 5px theme-color("primary") !important;
37  }
38  &:disabled {
39    background-color: gray("400");
40    color: gray("600");
41  }
42  &::placeholder {
43    color: gray("600");
44  }
45  &.is-invalid,
46  &:invalid {
47    border: 1px solid theme-color("danger") !important;
48  }
49}
50
51.custom-select,
52.custom-control-label,
53.form-control {
54  color: theme-color("dark");
55  font-size: 1rem;
56}
57
58// Inverted form colors
59.form-background {
60  background-color: gray("100");
61  .custom-select,
62  .form-control {
63    background-color: $white;
64    &:focus {
65      background-color: $white;
66    }
67    &:disabled {
68      background-color: gray("400");
69      color: gray("600");
70    }
71  }
72}
73
74.invalid-feedback {
75  font-size: $form-label-font-size;
76  line-height: $form-line-height;
77}
78
79.custom-control {
80  .custom-control-input[disabled=disabled] {
81    & + .custom-control-label {
82      // Disabled label for checkbox, radio,
83      // switch bootstrap form components
84      color: gray("600")!important;
85    }
86  }
87}
88
89.b-form-tag-remove {
90  // X button to remove tag
91  font-weight: normal;
92}
93
94.b-form-tags-button {
95  // Add button inside input field
96  white-space: nowrap;
97  margin-right: -$spacer;
98  &.btn-link-primary {
99    color: theme-color("primary");
100    fill: currentColor;
101  }
102}
103