1 | @import './index';
|
2 |
|
3 | @select-overflow-prefix-cls: ~'@{select-prefix-cls}-selection-overflow';
|
4 | @select-multiple-item-border-width: 1px;
|
5 |
|
6 | @select-multiple-padding: max(
|
7 | @input-padding-vertical-base - @select-multiple-item-border-width -
|
8 | @select-multiple-item-spacing-half,
|
9 | 0
|
10 | );
|
11 |
|
12 |
|
13 |
|
14 |
|
15 |
|
16 |
|
17 |
|
18 | .@{select-overflow-prefix-cls} {
|
19 | position: relative;
|
20 | display: flex;
|
21 | flex: auto;
|
22 | flex-wrap: wrap;
|
23 | max-width: 100%;
|
24 |
|
25 | &-item {
|
26 | flex: none;
|
27 | align-self: center;
|
28 | max-width: 100%;
|
29 | }
|
30 | }
|
31 |
|
32 | .@{select-prefix-cls} {
|
33 | &-multiple {
|
34 |
|
35 | .@{select-prefix-cls}-selector {
|
36 | display: flex;
|
37 | flex-wrap: wrap;
|
38 | align-items: center;
|
39 |
|
40 | padding: @select-multiple-padding @input-padding-vertical-base;
|
41 |
|
42 | .@{select-prefix-cls}-show-search& {
|
43 | cursor: text;
|
44 | }
|
45 |
|
46 | .@{select-prefix-cls}-disabled& {
|
47 | background: @select-multiple-disabled-background;
|
48 | cursor: not-allowed;
|
49 | }
|
50 |
|
51 | &::after {
|
52 | display: inline-block;
|
53 | width: 0;
|
54 | margin: @select-multiple-item-spacing-half 0;
|
55 | line-height: @select-multiple-item-height;
|
56 | content: '\a0';
|
57 | }
|
58 | }
|
59 |
|
60 | &.@{select-prefix-cls}-show-arrow .@{select-prefix-cls}-selector,
|
61 | &.@{select-prefix-cls}-allow-clear .@{select-prefix-cls}-selector {
|
62 | padding-right: @font-size-sm + @control-padding-horizontal;
|
63 | }
|
64 |
|
65 |
|
66 | .@{select-prefix-cls}-selection-item {
|
67 | position: relative;
|
68 | display: flex;
|
69 | flex: none;
|
70 | box-sizing: border-box;
|
71 | max-width: 100%;
|
72 |
|
73 | height: @select-multiple-item-height;
|
74 | margin-top: @select-multiple-item-spacing-half;
|
75 | margin-bottom: @select-multiple-item-spacing-half;
|
76 | line-height: @select-multiple-item-height - @select-multiple-item-border-width * 2;
|
77 | background: @select-selection-item-bg;
|
78 | border: 1px solid @select-selection-item-border-color;
|
79 | border-radius: @border-radius-base;
|
80 | cursor: default;
|
81 | transition: font-size 0.3s, line-height 0.3s, height 0.3s;
|
82 | user-select: none;
|
83 | margin-inline-end: @input-padding-vertical-base;
|
84 | padding-inline-start: @padding-xs;
|
85 | padding-inline-end: (@padding-xs / 2);
|
86 |
|
87 | .@{select-prefix-cls}-disabled& {
|
88 | color: @select-multiple-item-disabled-color;
|
89 | border-color: @select-multiple-item-disabled-border-color;
|
90 | cursor: not-allowed;
|
91 | }
|
92 |
|
93 |
|
94 | &-content {
|
95 | display: inline-block;
|
96 | margin-right: (@padding-xs / 2);
|
97 | overflow: hidden;
|
98 | white-space: pre;
|
99 | text-overflow: ellipsis;
|
100 | }
|
101 |
|
102 | &-remove {
|
103 | .iconfont-mixin();
|
104 | display: inline-block;
|
105 | color: @text-color-secondary;
|
106 | font-weight: bold;
|
107 | font-size: 10px;
|
108 | line-height: inherit;
|
109 | cursor: pointer;
|
110 |
|
111 | > .@{iconfont-css-prefix} {
|
112 | vertical-align: -0.2em;
|
113 | }
|
114 |
|
115 | &:hover {
|
116 | color: @icon-color-hover;
|
117 | }
|
118 | }
|
119 | }
|
120 |
|
121 |
|
122 | .@{select-overflow-prefix-cls}-item + .@{select-overflow-prefix-cls}-item {
|
123 | .@{select-prefix-cls}-selection-search {
|
124 | margin-inline-start: 0;
|
125 | }
|
126 | }
|
127 |
|
128 | .@{select-prefix-cls}-selection-search {
|
129 | position: relative;
|
130 | max-width: 100%;
|
131 | margin-top: @select-multiple-item-spacing-half;
|
132 | margin-bottom: @select-multiple-item-spacing-half;
|
133 | margin-inline-start: @input-padding-horizontal-base - @input-padding-vertical-base;
|
134 |
|
135 | &-input,
|
136 | &-mirror {
|
137 | height: @select-multiple-item-height;
|
138 | font-family: @font-family;
|
139 | line-height: @select-multiple-item-height;
|
140 | transition: all 0.3s;
|
141 | }
|
142 |
|
143 | &-input {
|
144 | width: 100%;
|
145 | min-width: 4.1px;
|
146 | }
|
147 |
|
148 | &-mirror {
|
149 | position: absolute;
|
150 | top: 0;
|
151 | left: 0;
|
152 | z-index: 999;
|
153 | white-space: pre;
|
154 | visibility: hidden;
|
155 | }
|
156 | }
|
157 |
|
158 |
|
159 | .@{select-prefix-cls}-selection-placeholder {
|
160 | position: absolute;
|
161 | top: 50%;
|
162 | right: @input-padding-horizontal;
|
163 | left: @input-padding-horizontal;
|
164 | transform: translateY(-50%);
|
165 | transition: all 0.3s;
|
166 | }
|
167 |
|
168 |
|
169 |
|
170 |
|
171 | .select-size(@suffix, @input-height) {
|
172 | @merged-cls: ~'@{select-prefix-cls}-@{suffix}';
|
173 | &.@{merged-cls} {
|
174 | @select-selection-height: @input-height - @input-padding-vertical-base * 2;
|
175 | @select-height-without-border: @input-height - @border-width-base * 2;
|
176 |
|
177 | .@{select-prefix-cls}-selector::after {
|
178 | line-height: @select-selection-height;
|
179 | }
|
180 |
|
181 | .@{select-prefix-cls}-selection-item {
|
182 | height: @select-selection-height;
|
183 | line-height: @select-selection-height - @border-width-base * 2;
|
184 | }
|
185 |
|
186 | .@{select-prefix-cls}-selection-search {
|
187 | height: @select-selection-height;
|
188 | line-height: @select-selection-height;
|
189 |
|
190 | &-input,
|
191 | &-mirror {
|
192 | height: @select-selection-height;
|
193 | line-height: @select-selection-height - @border-width-base * 2;
|
194 | }
|
195 | }
|
196 | }
|
197 | }
|
198 |
|
199 | .select-size('lg', @input-height-lg);
|
200 | .select-size('sm', @input-height-sm);
|
201 |
|
202 |
|
203 | &.@{select-prefix-cls}-sm {
|
204 | .@{select-prefix-cls}-selection-placeholder {
|
205 | left: @input-padding-horizontal-sm;
|
206 | }
|
207 |
|
208 | .@{select-prefix-cls}-selection-search {
|
209 | margin-inline-start: 3px;
|
210 | }
|
211 | }
|
212 | &.@{select-prefix-cls}-lg {
|
213 | .@{select-prefix-cls}-selection-item {
|
214 | height: @select-multiple-item-height-lg;
|
215 | line-height: @select-multiple-item-height-lg;
|
216 | }
|
217 | }
|
218 | }
|
219 |
|
220 | &-disabled .@{select-prefix-cls}-selection-item-remove {
|
221 | display: none;
|
222 | }
|
223 | }
|