You can not select more than 25 topics
Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.
120 lines
3.4 KiB
120 lines
3.4 KiB
@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;
|
|
}
|
|
}
|
|
}
|
|
}
|
|
|
|
// With arrow should provides `padding-right` to show the arrow and the above style overrides this
|
|
&.@{select-prefix-cls}-show-arrow.@{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-right: @control-padding-horizontal + @font-size-sm;
|
|
}
|
|
}
|
|
}
|
|
}
|
|
}
|
|
|