1 |
|
2 |
|
3 |
|
4 |
|
5 |
|
6 |
|
7 | @import '../../styles/core/mixins';
|
8 |
|
9 | :host {
|
10 | display: inline-block;
|
11 | max-width: 100%;
|
12 |
|
13 | .select-button {
|
14 | @include nb-ltr(text-align, left) {
|
15 | nb-icon {
|
16 | right: 0.2em;
|
17 | }
|
18 | }
|
19 | @include nb-rtl(text-align, right) {
|
20 | nb-icon {
|
21 | left: 0.2em;
|
22 | }
|
23 | }
|
24 | }
|
25 | }
|
26 |
|
27 | :host(.full-width) {
|
28 | width: 100%;
|
29 | }
|
30 |
|
31 | :host(.nb-transition) {
|
32 | .select-button {
|
33 | @include nb-component-animation(background-color, border-color, border-radius, box-shadow, color);
|
34 | }
|
35 | }
|
36 |
|
37 | .select-button {
|
38 | position: relative;
|
39 | width: 100%;
|
40 | overflow: hidden;
|
41 | text-overflow: ellipsis;
|
42 | text-transform: none;
|
43 | white-space: nowrap;
|
44 | }
|
45 |
|
46 | nb-icon {
|
47 | font-size: 1.5em;
|
48 | position: absolute;
|
49 | top: 50%;
|
50 | transform: translateY(-50%);
|
51 | @include nb-ltr(right, 0.5rem);
|
52 | @include nb-rtl(left, 0.5rem);
|
53 | @include nb-component-animation(transform);
|
54 | }
|
55 |
|
56 | :host(.open) nb-icon {
|
57 | transform: translateY(-50%) rotate(180deg);
|
58 | }
|