293 lines
9.8 KiB
Plaintext
293 lines
9.8 KiB
Plaintext
@import (reference) '../../style/themes/index';
|
|
|
|
@select-prefix-cls: ~'@{ant-prefix}-select';
|
|
|
|
@select-overflow-prefix-cls: ~'@{select-prefix-cls}-selection-overflow';
|
|
|
|
// Multiple select specific variables
|
|
@select-internal-fixed-item-margin: calc(@padding-xss / 2);
|
|
@select-multiple-base-padding: max(calc(@padding-xss - @line-width), 0px);
|
|
@select-multiple-container-padding: max(calc(@select-multiple-base-padding - @select-internal-fixed-item-margin), 0px);
|
|
@select-item-dist: calc(calc(@select-height - @select-multiple-item-height) / 2 - @line-width);
|
|
@select-multiple-selector-bg-disabled: @input-disabled-bg;
|
|
|
|
/**
|
|
* Get multiple selector needed style. The calculation:
|
|
*
|
|
* ContainerPadding = BasePadding - ItemMargin
|
|
*
|
|
* Border: ╔═══════════════════════════╗ ┬
|
|
* ContainerPadding: ║ ║ │
|
|
* ╟───────────────────────────╢ ┬ │
|
|
* Item Margin: ║ ║ │ │
|
|
* ║ ┌──────────┐ ║ │ │
|
|
* Item(multipleItemHeight): ║ BasePadding │ Item │ ║ Overflow Container(ControlHeight)
|
|
* ║ └──────────┘ ║ │ │
|
|
* Item Margin: ║ ║ │ │
|
|
* ╟───────────────────────────╢ ┴ │
|
|
* ContainerPadding: ║ ║ │
|
|
* Border: ╚═══════════════════════════╝ ┴
|
|
*/
|
|
|
|
// Multiple selector utilities based on CSS-in-JS getMultipleSelectorUnit function
|
|
.getMultipleSelectorUnit(@item-height, @base-padding, @container-padding) {
|
|
@result-item-height: @item-height;
|
|
@result-item-line-height: calc(@item-height - @line-width * 2);
|
|
@result-base-padding: @base-padding;
|
|
@result-container-padding: @container-padding;
|
|
}
|
|
|
|
// Utility to calculate select item distance
|
|
.getSelectItemStyle(@select-height, @multiple-item-height) {
|
|
@select-item-dist: calc(calc(@select-height - @multiple-item-height) / 2 - @line-width);
|
|
}
|
|
|
|
// Overflow styles
|
|
.genOverflowStyle() {
|
|
// Overflow container
|
|
.@{select-overflow-prefix-cls} {
|
|
position: relative;
|
|
display: flex;
|
|
flex: auto;
|
|
flex-wrap: wrap;
|
|
max-width: 100%;
|
|
|
|
&-item {
|
|
display: inline-flex;
|
|
flex: none;
|
|
align-self: center;
|
|
// https://github.com/ant-design/ant-design/issues/54179
|
|
max-width: calc(100% - 4px);
|
|
}
|
|
}
|
|
|
|
// Selection items
|
|
.@{select-prefix-cls}-selection-item {
|
|
display: flex;
|
|
flex: none;
|
|
align-self: center;
|
|
box-sizing: border-box;
|
|
max-width: 100%;
|
|
background: @select-selection-item-bg;
|
|
border: @line-width @border-style-base @select-selection-item-border-color;
|
|
border-radius: @border-radius-sm;
|
|
cursor: default;
|
|
transition:
|
|
font-size @animation-duration-slow,
|
|
line-height @animation-duration-slow,
|
|
height @animation-duration-slow;
|
|
margin-block: @select-internal-fixed-item-margin;
|
|
margin-inline-end: calc(@select-internal-fixed-item-margin * 2);
|
|
padding-inline-start: @padding-xs;
|
|
padding-inline-end: calc(@padding-xs / 2);
|
|
|
|
.@{select-prefix-cls}-disabled& {
|
|
color: @select-multiple-item-disabled-color;
|
|
border-color: @select-multiple-item-disabled-border-color;
|
|
cursor: not-allowed;
|
|
}
|
|
|
|
// Content
|
|
&-content {
|
|
display: inline-block;
|
|
overflow: hidden;
|
|
white-space: pre; // fix whitespace wrapping. custom tags display all whitespace within.
|
|
text-overflow: ellipsis;
|
|
margin-inline-end: calc(@padding-xs / 2);
|
|
}
|
|
|
|
&-remove {
|
|
.iconfont-mixin();
|
|
display: inline-flex;
|
|
align-items: center;
|
|
color: @text-color-secondary;
|
|
font-weight: bold;
|
|
font-size: 10px;
|
|
line-height: inherit;
|
|
cursor: pointer;
|
|
|
|
> .@{iconfont-css-prefix} {
|
|
vertical-align: -0.2em;
|
|
}
|
|
|
|
&:hover {
|
|
color: @icon-color-hover;
|
|
}
|
|
}
|
|
}
|
|
}
|
|
|
|
// Selection styles
|
|
.genSelectionStyle(@select-height, @multiple-item-height, @base-padding, @container-padding, @border-radius) {
|
|
.getSelectItemStyle(@select-height, @multiple-item-height);
|
|
.getMultipleSelectorUnit(@multiple-item-height, @base-padding, @container-padding);
|
|
|
|
// Selector container
|
|
.@{select-prefix-cls}-selector {
|
|
display: flex;
|
|
align-items: center;
|
|
width: 100%;
|
|
height: 100%;
|
|
// Multiple is little different that horizontal is follow the vertical
|
|
padding-inline: @base-padding;
|
|
padding-block: @container-padding;
|
|
border-radius: @border-radius;
|
|
|
|
.@{select-prefix-cls}-disabled& {
|
|
background: @select-multiple-selector-bg-disabled;
|
|
cursor: not-allowed;
|
|
}
|
|
|
|
&::after {
|
|
display: inline-block;
|
|
width: 0;
|
|
margin: @select-internal-fixed-item-margin 0;
|
|
line-height: @multiple-item-height;
|
|
visibility: hidden;
|
|
content: '\a0';
|
|
}
|
|
}
|
|
|
|
// Selection items with calculated height
|
|
.@{select-prefix-cls}-selection-item {
|
|
height: @multiple-item-height;
|
|
line-height: calc(@multiple-item-height - @line-width * 2);
|
|
}
|
|
|
|
// Selection wrap
|
|
.@{select-prefix-cls}-selection-wrap {
|
|
align-self: flex-start;
|
|
|
|
&::after {
|
|
line-height: @multiple-item-height;
|
|
margin-block: @select-internal-fixed-item-margin;
|
|
}
|
|
}
|
|
|
|
// Prefix adjustments
|
|
.@{select-prefix-cls}-prefix {
|
|
margin-inline-start: calc(@input-padding-horizontal-base - @base-padding);
|
|
}
|
|
|
|
// Overflow item spacing
|
|
.@{select-overflow-prefix-cls}-item + .@{select-overflow-prefix-cls}-item,
|
|
.@{select-prefix-cls}-prefix + .@{select-prefix-cls}-selection-wrap {
|
|
.@{select-prefix-cls}-selection-search {
|
|
margin-inline-start: 0;
|
|
}
|
|
.@{select-prefix-cls}-selection-placeholder {
|
|
inset-inline-start: 0;
|
|
}
|
|
}
|
|
|
|
// https://github.com/ant-design/ant-design/issues/44754
|
|
// Same as `wrap:after`
|
|
.@{select-overflow-prefix-cls}-item-suffix {
|
|
min-height: @multiple-item-height;
|
|
margin-block: @select-internal-fixed-item-margin;
|
|
}
|
|
|
|
// Search input
|
|
.@{select-prefix-cls}-selection-search {
|
|
position: relative;
|
|
display: inline-flex;
|
|
max-width: 100%;
|
|
margin-inline-start: calc(@input-padding-horizontal-base - @select-item-dist);
|
|
|
|
&-input,
|
|
&-mirror {
|
|
height: @multiple-item-height;
|
|
font-family: @font-family;
|
|
line-height: @multiple-item-height;
|
|
transition: all @animation-duration-slow;
|
|
}
|
|
|
|
&-input {
|
|
width: 100%;
|
|
min-width: 4.1px; // fix search cursor missing
|
|
}
|
|
|
|
&-mirror {
|
|
position: absolute;
|
|
top: 0;
|
|
z-index: 999;
|
|
white-space: pre; // fix whitespace wrapping caused width calculation bug
|
|
visibility: hidden;
|
|
inset-inline-start: 0;
|
|
inset-inline-end: auto;
|
|
}
|
|
}
|
|
|
|
// Placeholder
|
|
.@{select-prefix-cls}-selection-placeholder {
|
|
position: absolute;
|
|
top: 50%;
|
|
inset-inline-start: calc(@input-padding-horizontal-base - @base-padding);
|
|
inset-inline-end: @input-padding-horizontal-base;
|
|
transform: translateY(-50%);
|
|
transition: all @animation-duration-slow;
|
|
}
|
|
}
|
|
|
|
// ============================================================
|
|
// == Size ==
|
|
// ============================================================
|
|
.genSizeStyle(@suffix, @multiple-item-height, @border-radius, @border-radius-sm, @select-height, @font-size: @font-size-base) {
|
|
@merged-cls: ~'@{select-prefix-cls}@{suffix}';
|
|
|
|
// Calculate padding values
|
|
@base-padding: max(calc(@padding-xss - @line-width), 0px);
|
|
@container-padding: max(calc(@base-padding - @select-internal-fixed-item-margin), 0px);
|
|
|
|
.@{select-prefix-cls}-multiple.@{merged-cls} {
|
|
font-size: @font-size;
|
|
|
|
// Include overflow styles
|
|
.genOverflowStyle();
|
|
|
|
// Include selection styles with calculated values
|
|
.genSelectionStyle(@select-height, @multiple-item-height, @base-padding, @container-padding, @border-radius);
|
|
|
|
// Selector specific styles
|
|
.@{select-prefix-cls}-selector {
|
|
.@{select-prefix-cls}-show-search& {
|
|
cursor: text;
|
|
}
|
|
}
|
|
|
|
// Show arrow and allow clear states
|
|
&.@{select-prefix-cls}-show-arrow .@{select-prefix-cls}-selector,
|
|
&.@{select-prefix-cls}-allow-clear .@{select-prefix-cls}-selector {
|
|
padding-inline-end: calc(@font-size-icon + @control-padding-horizontal);
|
|
}
|
|
}
|
|
}
|
|
|
|
// Main multiple style generation - equivalent to genMultipleStyle function
|
|
.genMultipleStyle() {
|
|
// ======================== Default ========================
|
|
.genSizeStyle('', @select-multiple-item-height, @border-radius-base, @border-radius-sm, @select-height);
|
|
|
|
// ======================== Large ========================
|
|
// stylelint-disable-next-line less/no-duplicate-variables
|
|
.genSizeStyle('-sm', @select-multiple-item-height-sm, @border-radius-sm, @border-radius-sm, @input-height-sm);
|
|
|
|
// Size small need additional set padding
|
|
.@{select-prefix-cls}-multiple.@{select-prefix-cls}-sm {
|
|
.@{select-prefix-cls}-selection-placeholder {
|
|
inset-inline: calc(@control-padding-horizontal-sm - @line-width);
|
|
}
|
|
|
|
// https://github.com/ant-design/ant-design/issues/29559
|
|
.@{select-prefix-cls}-selection-search {
|
|
margin-inline-start: 2px; // magic number
|
|
}
|
|
}
|
|
|
|
// ======================== Large ========================
|
|
// stylelint-disable-next-line less/no-duplicate-variables
|
|
.genSizeStyle('-lg', @select-multiple-item-height-lg, @border-radius-lg, @border-radius-base, @input-height-lg, @font-size-lg);
|
|
}
|
|
|
|
.genMultipleStyle();
|