ant-design/components/select/style/single.less
二货机器人 2ea28af6ed
Virtual select component (#18658)
* init

* fix firefox

* add active style

* adjust arrow style

* update select

* update icon logic

* render empty

* init multiple

* fix ff display style

* sync font size

* adjust padding style

* add padding

* padding it

* hotfix of chrome

* single sm

* multiple size

* update option group style

* update snapshot

* clean up transition

* rm combobox in ts define

* auto complete init

* fix auto option def

* update demo

* update demo

* update uncertain demo

* update demo

* warning if user set `size` on AutoComplete

* add debug demo

* updat demo

* update demo of disabled

* update snapshot

* rm useless test

* fix pagination test

* fix Table test

* fix calendar test case

* fix calendar test case

* adjust style

* add big data demo

* support clean up

* fix ts define

* fix lint

* fix demo lint

* fix style lint fix

* rm useless deps

* update snapshot

* stop mock

* add space
2019-09-12 20:15:17 +08:00

108 lines
3.0 KiB
Plaintext

@import './index';
.@{select-prefix-cls}-single {
// ========================= Selector =========================
.@{select-prefix-cls}-selector {
display: flex;
.@{select-prefix-cls}-selection-search {
width: 100%;
&-input {
width: 100%;
}
}
.@{select-prefix-cls}-selection-item,
.@{select-prefix-cls}-selection-placeholder {
position: absolute;
top: 0;
right: 0;
bottom: 0;
left: 0;
padding: 0 @input-padding-horizontal-base;
line-height: @input-height-base;
transition: all 0.3s;
pointer-events: none;
// Firefox inline-block position calculation is not same as Chrome & Safari. Patch this:
@supports (-moz-appearance: meterbar) {
& {
line-height: @select-height-without-border;
}
}
}
}
// With arrow should provides `padding-right` to show the arrow
&.@{select-prefix-cls}-show-arrow .@{select-prefix-cls}-selector,
&.@{select-prefix-cls}-show-arrow .@{select-prefix-cls}-selection-item {
padding-right: @control-padding-horizontal + @font-size-sm;
}
// Opacity selection if open
&.@{select-prefix-cls}-open .@{select-prefix-cls}-selection-item {
opacity: 0.4;
}
// ========================== Input ==========================
// We only change the style of non-customize input which is only support by `combobox` mode.
// Not customize
&:not(.@{select-prefix-cls}-customize-input) {
.@{select-prefix-cls}-selector {
.select-selector();
.select-search-input-without-border();
width: 100%;
height: @input-height-base;
padding: 0 @input-padding-horizontal-base;
.@{select-prefix-cls}-selection-search-input {
height: @select-height-without-border;
}
}
}
// ============================================================
// == Size ==
// ============================================================
.select-size(@suffix, @input-height) {
@merged-cls: ~'@{select-prefix-cls}-@{suffix}';
&.@{merged-cls}:not(.@{select-prefix-cls}-customize-input) {
.@{select-prefix-cls}-selector {
height: @input-height;
.@{select-prefix-cls}-selection-item,
.@{select-prefix-cls}-selection-placeholder {
line-height: @input-height;
}
}
// Not customize
&:not(.@{select-prefix-cls}-customize-input) {
.@{select-prefix-cls}-selection-search-input {
height: @input-height - 2 * @border-width-base;
}
}
}
}
.select-size('lg', @input-height-lg);
.select-size('sm', @input-height-sm);
// Size small need additional set padding
&.@{select-prefix-cls}-sm {
&:not(.@{select-prefix-cls}-customize-input) {
.@{select-prefix-cls}-selector {
&,
.@{select-prefix-cls}-selection-item,
.@{select-prefix-cls}-selection-placeholder {
padding: 0 @input-padding-horizontal-sm;
}
}
}
}
}