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 $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") !important;
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-checkbox .custom-control-input:checked ~ .custom-control-label::after,
80.custom-checkbox .custom-control-input:indeterminate ~ .custom-control-label::before,
81.custom-control-input:checked ~ .custom-control-label::before  {
82  background-color: $black;
83  border-color: $black;
84  cursor: pointer;
85}
86
87.custom-control {
88  .custom-control-input[disabled=disabled] {
89    & + .custom-control-label {
90      // Disabled label for checkbox, radio,
91      // switch bootstrap form components
92      color: gray("600")!important;
93    }
94  }
95}
96
97.custom-control-input:focus ~ .custom-control-label::before{
98  box-shadow: 0 0 0 2px  theme-color("primary");
99}
100
101.custom-control-label::after {
102  cursor: pointer;
103}
104
105.b-form-tag-remove {
106  // X button to remove tag
107  font-weight: normal;
108}
109
110.b-form-tags-button {
111  // Add button inside input field
112  white-space: nowrap;
113  margin-right: -$spacer;
114  &.btn-link-primary {
115    color: theme-color("primary");
116    fill: currentColor;
117  }
118}
119
120// Form validation icon
121  .form-control.is-invalid,
122  .form-control.is-valid {
123    background-position: right 1rem bottom 50%;
124  }
125
126// Form validation icon with datepicker or password toggle icon
127.form-control-with-button {
128  &.is-invalid,
129  &.is-valid {
130    background-position: right 3rem bottom 50%;
131  }
132}
133