1 | @import './index';
|
2 |
|
3 | @selection-item-padding: ceil(@font-size-base * 1.25);
|
4 |
|
5 | .@{select-prefix-cls}-single {
|
6 |
|
7 | .@{select-prefix-cls}-selector {
|
8 | display: flex;
|
9 |
|
10 | .@{select-prefix-cls}-selection-search {
|
11 | position: absolute;
|
12 | top: 0;
|
13 | right: @input-padding-horizontal-base;
|
14 | bottom: 0;
|
15 | left: @input-padding-horizontal-base;
|
16 |
|
17 | &-input {
|
18 | width: 100%;
|
19 | }
|
20 | }
|
21 |
|
22 | .@{select-prefix-cls}-selection-item,
|
23 | .@{select-prefix-cls}-selection-placeholder {
|
24 | padding: 0;
|
25 | line-height: @select-height-without-border;
|
26 | transition: all 0.3s;
|
27 |
|
28 |
|
29 | @supports (-moz-appearance: meterbar) {
|
30 | & {
|
31 | line-height: @select-height-without-border;
|
32 | }
|
33 | }
|
34 | }
|
35 |
|
36 | .@{select-prefix-cls}-selection-item {
|
37 | position: relative;
|
38 | user-select: none;
|
39 | }
|
40 |
|
41 | .@{select-prefix-cls}-selection-placeholder {
|
42 | pointer-events: none;
|
43 | }
|
44 |
|
45 |
|
46 | &::after,
|
47 |
|
48 | .@{select-prefix-cls}-selection-item::after,
|
49 |
|
50 | .@{select-prefix-cls}-selection-placeholder::after {
|
51 | display: inline-block;
|
52 | width: 0;
|
53 | visibility: hidden;
|
54 | content: '\a0';
|
55 | }
|
56 | }
|
57 |
|
58 |
|
59 | &.@{select-prefix-cls}-show-arrow .@{select-prefix-cls}-selection-search {
|
60 | right: @input-padding-horizontal-base + @font-size-base;
|
61 | }
|
62 |
|
63 | &.@{select-prefix-cls}-show-arrow .@{select-prefix-cls}-selection-item,
|
64 | &.@{select-prefix-cls}-show-arrow .@{select-prefix-cls}-selection-placeholder {
|
65 | padding-right: @selection-item-padding;
|
66 | }
|
67 |
|
68 |
|
69 | &.@{select-prefix-cls}-open .@{select-prefix-cls}-selection-item {
|
70 | color: @input-placeholder-color;
|
71 | }
|
72 |
|
73 |
|
74 |
|
75 |
|
76 |
|
77 | &:not(.@{select-prefix-cls}-customize-input) {
|
78 | .@{select-prefix-cls}-selector {
|
79 | width: 100%;
|
80 | height: @input-height-base;
|
81 | padding: 0 @input-padding-horizontal-base;
|
82 |
|
83 | .@{select-prefix-cls}-selection-search-input {
|
84 | height: @select-height-without-border;
|
85 | }
|
86 |
|
87 | &::after {
|
88 | line-height: @select-height-without-border;
|
89 | }
|
90 | }
|
91 | }
|
92 |
|
93 | &.@{select-prefix-cls}-customize-input {
|
94 | .@{select-prefix-cls}-selector {
|
95 | &::after {
|
96 | display: none;
|
97 | }
|
98 |
|
99 | .@{select-prefix-cls}-selection-search {
|
100 | position: static;
|
101 | width: 100%;
|
102 | }
|
103 |
|
104 | .@{select-prefix-cls}-selection-placeholder {
|
105 | position: absolute;
|
106 | right: 0;
|
107 | left: 0;
|
108 | padding: 0 @input-padding-horizontal-base;
|
109 |
|
110 | &::after {
|
111 | display: none;
|
112 | }
|
113 | }
|
114 | }
|
115 | }
|
116 |
|
117 |
|
118 |
|
119 |
|
120 | .select-size(@suffix, @input-height) {
|
121 | @merged-cls: ~'@{select-prefix-cls}-@{suffix}';
|
122 |
|
123 | &.@{merged-cls}:not(.@{select-prefix-cls}-customize-input) {
|
124 | .@{select-prefix-cls}-selector {
|
125 | height: @input-height;
|
126 |
|
127 | &::after,
|
128 | .@{select-prefix-cls}-selection-item,
|
129 | .@{select-prefix-cls}-selection-placeholder {
|
130 | line-height: @input-height - 2 * @border-width-base;
|
131 | }
|
132 | }
|
133 |
|
134 |
|
135 | &:not(.@{select-prefix-cls}-customize-input) {
|
136 | .@{select-prefix-cls}-selection-search-input {
|
137 | height: @input-height - 2 * @border-width-base;
|
138 | }
|
139 | }
|
140 | }
|
141 | }
|
142 |
|
143 | .select-size('lg', @select-single-item-height-lg);
|
144 | .select-size('sm', @input-height-sm);
|
145 |
|
146 |
|
147 | &.@{select-prefix-cls}-sm {
|
148 | &:not(.@{select-prefix-cls}-customize-input) {
|
149 | .@{select-prefix-cls}-selection-search {
|
150 | right: @input-padding-horizontal-sm;
|
151 | left: @input-padding-horizontal-sm;
|
152 | }
|
153 |
|
154 | .@{select-prefix-cls}-selector {
|
155 | padding: 0 @input-padding-horizontal-sm;
|
156 | }
|
157 |
|
158 |
|
159 | &.@{select-prefix-cls}-show-arrow .@{select-prefix-cls}-selection-search {
|
160 | right: @input-padding-horizontal-sm + @font-size-base * 1.5;
|
161 | }
|
162 |
|
163 | &.@{select-prefix-cls}-show-arrow .@{select-prefix-cls}-selection-item,
|
164 | &.@{select-prefix-cls}-show-arrow .@{select-prefix-cls}-selection-placeholder {
|
165 | padding-right: @font-size-base * 1.5;
|
166 | }
|
167 | }
|
168 | }
|
169 |
|
170 | &.@{select-prefix-cls}-lg {
|
171 | &:not(.@{select-prefix-cls}-customize-input) {
|
172 | .@{select-prefix-cls}-selector {
|
173 | padding: 0 @input-padding-horizontal-lg;
|
174 | }
|
175 | }
|
176 | }
|
177 | }
|