1 | $rbt-color-primary: #007bff !default;
|
2 | $rbt-color-disabled: #495057 !default;
|
3 | $rbt-color-white: #fff !default;
|
4 |
|
5 |
|
6 | .rbt .rbt-input-main::-ms-clear {
|
7 | display: none;
|
8 | }
|
9 |
|
10 |
|
11 |
|
12 |
|
13 | .rbt-menu {
|
14 | margin-bottom: 2px;
|
15 |
|
16 | & > .dropdown-item {
|
17 | overflow: hidden;
|
18 | text-overflow: ellipsis;
|
19 |
|
20 | &:focus {
|
21 | outline: none;
|
22 | }
|
23 | }
|
24 |
|
25 | &-pagination-option {
|
26 | text-align: center;
|
27 | }
|
28 | }
|
29 |
|
30 |
|
31 |
|
32 |
|
33 | $rbt-background-color-disabled: #e9ecef !default;
|
34 |
|
35 | $rbt-border-color-focus: #80bdff !default;
|
36 | $rbt-border-color-focus-invalid: #dc3545 !default;
|
37 | $rbt-border-color-focus-valid: #28a745 !default;
|
38 |
|
39 | $rbt-box-shadow-dimensions: 0 0 0 0.2rem;
|
40 | $rbt-box-shadow-color: rgba(0, 123, 255, 0.25) !default;
|
41 | $rbt-box-shadow-color-invalid: rgba(220, 53, 69, 0.25) !default;
|
42 | $rbt-box-shadow-color-valid: rgba(40, 167, 69, 0.25) !default;
|
43 |
|
44 | $rbt-color-focus: #495057 !default;
|
45 | $rbt-placeholder-color: #6c757d !default;
|
46 |
|
47 | .rbt-input-multi {
|
48 | cursor: text;
|
49 | overflow: hidden;
|
50 | position: relative;
|
51 |
|
52 |
|
53 | &.focus {
|
54 | border-color: $rbt-border-color-focus;
|
55 | box-shadow: $rbt-box-shadow-dimensions $rbt-box-shadow-color;
|
56 | color: $rbt-color-focus;
|
57 | outline: 0;
|
58 | }
|
59 |
|
60 | &.form-control {
|
61 | height: auto;
|
62 | }
|
63 |
|
64 |
|
65 | &.disabled {
|
66 | background-color: $rbt-background-color-disabled;
|
67 | opacity: 1;
|
68 | }
|
69 |
|
70 | &.is-invalid.focus {
|
71 | border-color: $rbt-border-color-focus-invalid;
|
72 | box-shadow: $rbt-box-shadow-dimensions $rbt-box-shadow-color-invalid;
|
73 | }
|
74 |
|
75 | &.is-valid.focus {
|
76 | border-color: $rbt-border-color-focus-valid;
|
77 | box-shadow: $rbt-box-shadow-dimensions $rbt-box-shadow-color-valid;
|
78 | }
|
79 |
|
80 |
|
81 | input {
|
82 |
|
83 | &::-moz-placeholder {
|
84 | color: $rbt-placeholder-color;
|
85 | opacity: 1;
|
86 | }
|
87 |
|
88 |
|
89 | &:-ms-input-placeholder {
|
90 | color: $rbt-placeholder-color;
|
91 | }
|
92 |
|
93 |
|
94 | &::-webkit-input-placeholder {
|
95 | color: $rbt-placeholder-color;
|
96 | }
|
97 | }
|
98 |
|
99 | .rbt-input-wrapper {
|
100 | align-items: flex-start;
|
101 | display: flex;
|
102 | flex-wrap: wrap;
|
103 | margin-bottom: -4px;
|
104 | margin-top: -1px;
|
105 | overflow: hidden;
|
106 | }
|
107 |
|
108 | .rbt-input-main {
|
109 | margin: 1px 0 4px;
|
110 | }
|
111 | }
|
112 |
|
113 |
|
114 |
|
115 |
|
116 | .rbt-close {
|
117 | z-index: 1;
|
118 |
|
119 | &-lg {
|
120 | font-size: 1.5rem;
|
121 | }
|
122 | }
|
123 |
|
124 |
|
125 |
|
126 |
|
127 | $rbt-token-background-color: #e7f4ff !default;
|
128 | $rbt-token-color: $rbt-color-primary !default;
|
129 |
|
130 | $rbt-token-disabled-background-color: rgba(0, 0, 0, 0.1) !default;
|
131 | $rbt-token-disabled-color: $rbt-color-disabled !default;
|
132 |
|
133 | $rbt-token-active-background-color: $rbt-color-primary !default;
|
134 | $rbt-token-active-color: $rbt-color-white !default;
|
135 |
|
136 | .rbt-token {
|
137 | background-color: $rbt-token-background-color;
|
138 | border: 0;
|
139 | border-radius: 0.25rem;
|
140 | color: $rbt-token-color;
|
141 | display: inline-flex;
|
142 | line-height: 1rem;
|
143 |
|
144 | margin: 1px 3px 2px 0;
|
145 |
|
146 | .rbt-token-label {
|
147 | padding: 0.25rem 0.5rem;
|
148 |
|
149 | &:not(:last-child) {
|
150 | padding-right: 0.25rem;
|
151 | }
|
152 | }
|
153 |
|
154 | &-disabled {
|
155 | background-color: $rbt-token-disabled-background-color;
|
156 | color: $rbt-token-disabled-color;
|
157 | pointer-events: none;
|
158 | }
|
159 |
|
160 | &-removeable {
|
161 | cursor: pointer;
|
162 | }
|
163 |
|
164 | &-active {
|
165 | background-color: $rbt-token-active-background-color;
|
166 | color: $rbt-token-active-color;
|
167 | outline: none;
|
168 | text-decoration: none;
|
169 | }
|
170 |
|
171 | & &-remove-button {
|
172 |
|
173 | background-image: none;
|
174 | border-bottom-left-radius: 0;
|
175 | border-top-left-radius: 0;
|
176 |
|
177 | box-shadow: none;
|
178 | color: inherit;
|
179 | display: flex;
|
180 | justify-content: center;
|
181 | font-size: inherit;
|
182 | font-weight: normal;
|
183 | opacity: 1;
|
184 | outline: none;
|
185 | padding: 0.25rem 0.5rem;
|
186 | padding-left: 0;
|
187 | text-shadow: none;
|
188 |
|
189 | .rbt-close-content {
|
190 |
|
191 | display: block;
|
192 | }
|
193 | }
|
194 | }
|
195 |
|
196 |
|
197 |
|
198 |
|
199 | .rbt-aux {
|
200 | align-items: center;
|
201 | display: flex;
|
202 | bottom: 0;
|
203 | justify-content: center;
|
204 | pointer-events: none;
|
205 | position: absolute;
|
206 | right: 0;
|
207 | top: 0;
|
208 | width: 2rem;
|
209 |
|
210 | &-lg {
|
211 | width: 3rem;
|
212 | }
|
213 |
|
214 | & .rbt-close {
|
215 | margin-top: -0.25rem;
|
216 | pointer-events: auto;
|
217 | }
|
218 | }
|
219 |
|
220 | .has-aux .form-control {
|
221 | padding-right: 2rem;
|
222 |
|
223 |
|
224 | &.is-valid,
|
225 | &.is-invalid {
|
226 | background-position: right 2rem center;
|
227 | padding-right: 4rem;
|
228 | }
|
229 | }
|
230 |
|
231 |
|
232 | .rbt-highlight-text {
|
233 | background-color: inherit;
|
234 | color: inherit;
|
235 | font-weight: bold;
|
236 | padding: 0;
|
237 | }
|
238 |
|
239 |
|
240 |
|
241 |
|
242 | .input-group > .rbt {
|
243 | flex: 1;
|
244 |
|
245 |
|
246 | & .rbt-input-hint,
|
247 | & .rbt-aux {
|
248 | z-index: 5;
|
249 | }
|
250 |
|
251 | &:not(:first-child) .form-control {
|
252 | border-top-left-radius: 0;
|
253 | border-bottom-left-radius: 0;
|
254 | }
|
255 |
|
256 | &:not(:last-child) .form-control {
|
257 | border-top-right-radius: 0;
|
258 | border-bottom-right-radius: 0;
|
259 | }
|
260 | }
|