UNPKG

react-bootstrap-typeahead/css/Typeahead.bs5.scss

Version:

rbt-close {
font-size: 1rem;
3
&-sm {
  font-size: 0.75rem;
}
7
&-content {
  display: none;
}
11}
12
rbt-aux {
width: 2.5rem;
15
&-lg {
  width: 3rem;
}
19
& .rbt-close {
  // Overrides `margin-top: -4px` in BS4 styles
  margin-top: 0;
}
24}
25
rbt .form-floating {
flex: 1;
28}
29
form-floating > .rbt-input-multi {
&:not(:placeholder-shown) ~ label {
  opacity: inherit;
  transform: inherit;
}
35
// Hide the placeholder
.rbt-input-main::placeholder {
  color: transparent;
}
40
// Shrink the label when multi-selector is focused or there are selections.
&.focus ~ label {
  opacity: 0.65;
  transform: scale(0.85) translateY(-0.5rem) translateX(0.15rem);
}
46}

1	`.rbt-close {`
2	`font-size: 1rem;`
3
4	`&-sm {`
5	`font-size: 0.75rem;`
6	`}`
7
8	`&-content {`
9	`display: none;`
10	`}`
11	`}`
12
13	`.rbt-aux {`
14	`width: 2.5rem;`
15
16	`&-lg {`
17	`width: 3rem;`
18	`}`
19
20	`& .rbt-close {`
21	// Overrides `margin-top: -4px` in BS4 styles
22	`margin-top: 0;`
23	`}`
24	`}`
25
26	`.rbt .form-floating {`
27	`flex: 1;`
28	`}`
29
30	`.form-floating > .rbt-input-multi {`
31	`&:not(:placeholder-shown) ~ label {`
32	`opacity: inherit;`
33	`transform: inherit;`
34	`}`
35
36	`// Hide the placeholder`
37	`.rbt-input-main::placeholder {`
38	`color: transparent;`
39	`}`
40
41	`// Shrink the label when multi-selector is focused or there are selections.`
42	`&.focus ~ label {`
43	`opacity: 0.65;`
44	`transform: scale(0.85) translateY(-0.5rem) translateX(0.15rem);`
45	`}`
46	`}`