UNPKG

4.76 kBtext/lessView Raw
1@import '../../style/themes/index';
2@import '../../style/mixins/index';
3@import '../../input/style/mixin';
4
5@select-prefix-cls: ~'@{ant-prefix}-select';
6
7.@{select-prefix-cls} {
8 &-rtl {
9 direction: rtl;
10 }
11
12 // ========================== Arrow ==========================
13 &-arrow {
14 .@{select-prefix-cls}-rtl & {
15 right: initial;
16 left: @control-padding-horizontal - 1px;
17 }
18 }
19
20 // ========================== Clear ==========================
21 &-clear {
22 .@{select-prefix-cls}-rtl & {
23 right: initial;
24 left: @control-padding-horizontal - 1px;
25 }
26 }
27
28 // ========================== Popup ==========================
29 &-dropdown {
30 &-rtl {
31 direction: rtl;
32 }
33 }
34
35 // ========================= Options =========================
36 &-item {
37 &-option {
38 &-grouped {
39 .@{select-prefix-cls}-dropdown-rtl & {
40 padding-right: @control-padding-horizontal * 2;
41 padding-left: @control-padding-horizontal;
42 }
43 }
44 }
45 }
46}
47
48// multiple
49@select-multiple-item-border-width: 1px;
50@select-multiple-item-spacing-half: ceil((@input-padding-vertical-base / 2));
51@select-multiple-padding: max(
52 @input-padding-vertical-base - @select-multiple-item-border-width -
53 @select-multiple-item-spacing-half,
54 0
55);
56
57.@{select-prefix-cls}-multiple {
58 &.@{select-prefix-cls}-show-arrow .@{select-prefix-cls}-selector,
59 &.@{select-prefix-cls}-allow-clear .@{select-prefix-cls}-selector {
60 .@{select-prefix-cls}-rtl& {
61 padding-right: @input-padding-vertical-base;
62 padding-left: @font-size-sm + @control-padding-horizontal;
63 }
64 }
65
66 // ======================== Selections ========================
67 .@{select-prefix-cls}-selection-item {
68 .@{select-prefix-cls}-rtl& {
69 text-align: right;
70 }
71 // It's ok not to do this, but 24px makes bottom narrow in view should adjust
72 &-content {
73 .@{select-prefix-cls}-rtl& {
74 margin-right: 0;
75 margin-left: (@padding-xs / 2);
76 text-align: right;
77 }
78 }
79 }
80
81 // ========================== Input ==========================
82 .@{select-prefix-cls}-selection-search {
83 &-mirror {
84 .@{select-prefix-cls}-rtl& {
85 right: 0;
86 left: auto;
87 }
88 }
89 }
90
91 // ======================= Placeholder =======================
92 .@{select-prefix-cls}-selection-placeholder {
93 .@{select-prefix-cls}-rtl& {
94 right: @input-padding-horizontal;
95 left: auto;
96 }
97 }
98
99 // ============================================================
100 // == Size ==
101 // ============================================================
102
103 // Size small need additional set padding
104 &.@{select-prefix-cls}-sm {
105 .@{select-prefix-cls}-selection-placeholder {
106 .@{select-prefix-cls}-rtl& {
107 right: @input-padding-horizontal-sm;
108 }
109 }
110 }
111}
112
113// single
114@selection-item-padding: ceil(@font-size-base * 1.25);
115
116.@{select-prefix-cls}-single {
117 // ========================= Selector =========================
118 .@{select-prefix-cls}-selector {
119 .@{select-prefix-cls}-selection-item,
120 .@{select-prefix-cls}-selection-placeholder {
121 .@{select-prefix-cls}-rtl& {
122 right: 0;
123 left: 9px;
124 text-align: right;
125 }
126 }
127 }
128
129 // With arrow should provides `padding-right` to show the arrow
130 &.@{select-prefix-cls}-show-arrow .@{select-prefix-cls}-selection-search {
131 .@{select-prefix-cls}-rtl& {
132 right: @input-padding-horizontal-base;
133 left: @input-padding-horizontal-base + @font-size-base;
134 }
135 }
136
137 &.@{select-prefix-cls}-show-arrow .@{select-prefix-cls}-selection-item,
138 &.@{select-prefix-cls}-show-arrow .@{select-prefix-cls}-selection-placeholder {
139 .@{select-prefix-cls}-rtl& {
140 padding-right: 0;
141 padding-left: @selection-item-padding;
142 }
143 }
144
145 // ============================================================
146 // == Size ==
147 // ============================================================
148
149 // Size small need additional set padding
150 &.@{select-prefix-cls}-sm {
151 &:not(.@{select-prefix-cls}-customize-input) {
152 // With arrow should provides `padding-right` to show the arrow
153 &.@{select-prefix-cls}-show-arrow .@{select-prefix-cls}-selection-search {
154 .@{select-prefix-cls}-rtl& {
155 right: @input-padding-horizontal-sm - 1px;
156 }
157 }
158
159 &.@{select-prefix-cls}-show-arrow .@{select-prefix-cls}-selection-item,
160 &.@{select-prefix-cls}-show-arrow .@{select-prefix-cls}-selection-placeholder {
161 .@{select-prefix-cls}-rtl& {
162 padding-right: 0;
163 padding-left: @font-size-base * 1.5;
164 }
165 }
166 }
167 }
168}