1 |
|
2 | @import './helpers/mixin.scss';
|
3 | @import './base/loading.scss';
|
4 |
|
5 | .vxe-select {
|
6 | position: relative;
|
7 | display: inline-block;
|
8 | width: 180px;
|
9 | color: $vxe-font-color;
|
10 | text-align: left;
|
11 | & > .vxe-input {
|
12 | .vxe-input--inner {
|
13 | cursor: pointer;
|
14 | }
|
15 | }
|
16 | &.is--disabled {
|
17 | & > .vxe-input {
|
18 | .vxe-input--inner {
|
19 | cursor: no-drop;
|
20 | }
|
21 | }
|
22 | }
|
23 | &.is--loading {
|
24 | & > .vxe-input {
|
25 | .vxe-input--inner {
|
26 | cursor: progress;
|
27 | }
|
28 | }
|
29 | }
|
30 | & > .vxe-input {
|
31 | width: 100%;
|
32 | .vxe-input--suffix-icon {
|
33 | @include animatTransition(transform, .2s);
|
34 | }
|
35 | }
|
36 | &.is--active {
|
37 | & > .vxe-input {
|
38 | .vxe-input--inner {
|
39 | border: 1px solid $vxe-primary-color;
|
40 | }
|
41 | }
|
42 | }
|
43 | }
|
44 |
|
45 | .vxe-select-slots {
|
46 | display: none;
|
47 | }
|
48 |
|
49 | .vxe-select--panel {
|
50 | display: none;
|
51 | position: absolute;
|
52 | left: 0;
|
53 | padding: 4px 0;
|
54 | color: $vxe-font-color;
|
55 | text-align: left;
|
56 | &:not(.is--transfer) {
|
57 | min-width: 100%;
|
58 | }
|
59 | &.is--transfer {
|
60 | position: fixed;
|
61 | }
|
62 | &.animat--leave {
|
63 | display: block;
|
64 | opacity: 0;
|
65 | transform: scaleY(0.5);
|
66 | transition: transform .3s cubic-bezier(.23,1,.32,1), opacity .3s cubic-bezier(.23,1,.32,1);
|
67 | transform-origin: center top;
|
68 | backface-visibility: hidden;
|
69 | transform-style: preserve-3d;
|
70 | &[placement="top"] {
|
71 | transform-origin: center bottom;
|
72 | }
|
73 | }
|
74 | &.animat--enter {
|
75 | opacity: 1;
|
76 | transform: scaleY(1);
|
77 | }
|
78 | }
|
79 |
|
80 | .vxe-select-option--wrapper {
|
81 | overflow-x: hidden;
|
82 | overflow-y: auto;
|
83 | padding: 4px 0;
|
84 | max-height: 200px;
|
85 | border-radius: $vxe-border-radius;
|
86 | border: 1px solid $vxe-table-popup-border-color;
|
87 | box-shadow: 0 0 6px 2px rgba(0, 0, 0, 0.1);
|
88 | background-color: $vxe-select-panel-background-color;
|
89 | }
|
90 |
|
91 | .vxe-optgroup {
|
92 | .vxe-optgroup--title {
|
93 | padding: 0 6px;
|
94 | color: $vxe-optgroup-title-color;
|
95 | font-size: 12px;
|
96 | }
|
97 | }
|
98 |
|
99 | .vxe-optgroup--wrapper {
|
100 | .vxe-select-option {
|
101 | padding: 0 20px;
|
102 | }
|
103 | }
|
104 |
|
105 | .vxe-select-option {
|
106 | padding: 0 10px;
|
107 | max-width: 400px;
|
108 | white-space: nowrap;
|
109 | overflow: hidden;
|
110 | text-overflow: ellipsis;
|
111 | white-space: nowrap;
|
112 | user-select: none;
|
113 | &.is--selected {
|
114 | font-weight: 700;
|
115 | color: $vxe-primary-color;
|
116 | }
|
117 | &:not(.is--disabled) {
|
118 | cursor: pointer;
|
119 | &.is--hover {
|
120 | background-color: $vxe-select-option-hover-background-color;
|
121 | }
|
122 | }
|
123 | &.is--disabled {
|
124 | color: $vxe-disabled-color;
|
125 | cursor: no-drop;
|
126 | }
|
127 | }
|
128 |
|
129 | .vxe-select--empty-placeholder {
|
130 | padding: 0 10px;
|
131 | text-align: center;
|
132 | color: $vxe-select-empty-color;
|
133 | }
|
134 |
|
135 | .vxe-select,
|
136 | .vxe-select--panel {
|
137 | font-size: $vxe-font-size;
|
138 | &.size--medium {
|
139 | font-size: $vxe-font-size-medium;
|
140 | }
|
141 | &.size--small {
|
142 | font-size: $vxe-font-size-small;
|
143 | }
|
144 | &.size--mini {
|
145 | font-size: $vxe-font-size-mini;
|
146 | }
|
147 | }
|
148 |
|
149 | .vxe-select--panel {
|
150 | .vxe-optgroup--title,
|
151 | .vxe-select-option {
|
152 | height: $vxe-select-option-height-default;
|
153 | }
|
154 | .vxe-optgroup--title,
|
155 | .vxe-select-option,
|
156 | .vxe-select--empty-placeholder {
|
157 | line-height: $vxe-select-option-height-default;
|
158 | }
|
159 | &.size--medium {
|
160 | .vxe-optgroup--title,
|
161 | .vxe-select-option {
|
162 | height: $vxe-select-option-height-medium;
|
163 | }
|
164 | .vxe-optgroup--title,
|
165 | .vxe-select-option,
|
166 | .vxe-select--empty-placeholder {
|
167 | line-height: $vxe-select-option-height-medium;
|
168 | }
|
169 | }
|
170 | &.size--small {
|
171 | .vxe-optgroup--title,
|
172 | .vxe-select-option {
|
173 | height: $vxe-select-option-height-small;
|
174 | }
|
175 | .vxe-optgroup--title,
|
176 | .vxe-select-option,
|
177 | .vxe-select--empty-placeholder {
|
178 | line-height: $vxe-select-option-height-small;
|
179 | }
|
180 | }
|
181 | &.size--mini {
|
182 | .vxe-optgroup--title,
|
183 | .vxe-select-option {
|
184 | height: $vxe-select-option-height-mini;
|
185 | }
|
186 | .vxe-optgroup--title,
|
187 | .vxe-select-option,
|
188 | .vxe-select--empty-placeholder {
|
189 | line-height: $vxe-select-option-height-mini;
|
190 | }
|
191 | }
|
192 | }
|