mirror of
https://github.com/ant-design/ant-design.git
synced 2025-01-18 14:13:37 +08:00
style: optimize select multiple disabled style (#25980)
* style: optimize select multiple disabled style * add var * add dark
This commit is contained in:
xrkffgg
GitHub
parent
de1941fa5b
commit
87555eb5a9
@ -1089,112 +1089,223 @@ exports[`renders ./components/select/demo/label-in-value.md correctly 1`] = `
|
||||
`;
|
||||
|
||||
exports[`renders ./components/select/demo/multiple.md correctly 1`] = `
|
||||
<div
|
||||
class="ant-select ant-select-multiple ant-select-show-search"
|
||||
style="width:100%"
|
||||
>
|
||||
Array [
|
||||
<div
|
||||
class="ant-select-selector"
|
||||
class="ant-select ant-select-multiple ant-select-show-search"
|
||||
style="width:100%"
|
||||
>
|
||||
<span
|
||||
class="ant-select-selection-item"
|
||||
<div
|
||||
class="ant-select-selector"
|
||||
>
|
||||
<span
|
||||
class="ant-select-selection-item-content"
|
||||
>
|
||||
a10
|
||||
</span>
|
||||
<span
|
||||
aria-hidden="true"
|
||||
class="ant-select-selection-item-remove"
|
||||
style="user-select:none;-webkit-user-select:none"
|
||||
unselectable="on"
|
||||
class="ant-select-selection-item"
|
||||
>
|
||||
<span
|
||||
aria-label="close"
|
||||
class="anticon anticon-close"
|
||||
role="img"
|
||||
class="ant-select-selection-item-content"
|
||||
>
|
||||
<svg
|
||||
aria-hidden="true"
|
||||
class=""
|
||||
data-icon="close"
|
||||
fill="currentColor"
|
||||
focusable="false"
|
||||
height="1em"
|
||||
viewBox="64 64 896 896"
|
||||
width="1em"
|
||||
a10
|
||||
</span>
|
||||
<span
|
||||
aria-hidden="true"
|
||||
class="ant-select-selection-item-remove"
|
||||
style="user-select:none;-webkit-user-select:none"
|
||||
unselectable="on"
|
||||
>
|
||||
<span
|
||||
aria-label="close"
|
||||
class="anticon anticon-close"
|
||||
role="img"
|
||||
>
|
||||
<path
|
||||
d="M563.8 512l262.5-312.9c4.4-5.2.7-13.1-6.1-13.1h-79.8c-4.7 0-9.2 2.1-12.3 5.7L511.6 449.8 295.1 191.7c-3-3.6-7.5-5.7-12.3-5.7H203c-6.8 0-10.5 7.9-6.1 13.1L459.4 512 196.9 824.9A7.95 7.95 0 00203 838h79.8c4.7 0 9.2-2.1 12.3-5.7l216.5-258.1 216.5 258.1c3 3.6 7.5 5.7 12.3 5.7h79.8c6.8 0 10.5-7.9 6.1-13.1L563.8 512z"
|
||||
/>
|
||||
</svg>
|
||||
<svg
|
||||
aria-hidden="true"
|
||||
class=""
|
||||
data-icon="close"
|
||||
fill="currentColor"
|
||||
focusable="false"
|
||||
height="1em"
|
||||
viewBox="64 64 896 896"
|
||||
width="1em"
|
||||
>
|
||||
<path
|
||||
d="M563.8 512l262.5-312.9c4.4-5.2.7-13.1-6.1-13.1h-79.8c-4.7 0-9.2 2.1-12.3 5.7L511.6 449.8 295.1 191.7c-3-3.6-7.5-5.7-12.3-5.7H203c-6.8 0-10.5 7.9-6.1 13.1L459.4 512 196.9 824.9A7.95 7.95 0 00203 838h79.8c4.7 0 9.2-2.1 12.3-5.7l216.5-258.1 216.5 258.1c3 3.6 7.5 5.7 12.3 5.7h79.8c6.8 0 10.5-7.9 6.1-13.1L563.8 512z"
|
||||
/>
|
||||
</svg>
|
||||
</span>
|
||||
</span>
|
||||
</span>
|
||||
</span>
|
||||
<span
|
||||
class="ant-select-selection-item"
|
||||
>
|
||||
<span
|
||||
class="ant-select-selection-item-content"
|
||||
>
|
||||
c12
|
||||
</span>
|
||||
<span
|
||||
aria-hidden="true"
|
||||
class="ant-select-selection-item-remove"
|
||||
style="user-select:none;-webkit-user-select:none"
|
||||
unselectable="on"
|
||||
class="ant-select-selection-item"
|
||||
>
|
||||
<span
|
||||
aria-label="close"
|
||||
class="anticon anticon-close"
|
||||
role="img"
|
||||
class="ant-select-selection-item-content"
|
||||
>
|
||||
<svg
|
||||
aria-hidden="true"
|
||||
class=""
|
||||
data-icon="close"
|
||||
fill="currentColor"
|
||||
focusable="false"
|
||||
height="1em"
|
||||
viewBox="64 64 896 896"
|
||||
width="1em"
|
||||
c12
|
||||
</span>
|
||||
<span
|
||||
aria-hidden="true"
|
||||
class="ant-select-selection-item-remove"
|
||||
style="user-select:none;-webkit-user-select:none"
|
||||
unselectable="on"
|
||||
>
|
||||
<span
|
||||
aria-label="close"
|
||||
class="anticon anticon-close"
|
||||
role="img"
|
||||
>
|
||||
<path
|
||||
d="M563.8 512l262.5-312.9c4.4-5.2.7-13.1-6.1-13.1h-79.8c-4.7 0-9.2 2.1-12.3 5.7L511.6 449.8 295.1 191.7c-3-3.6-7.5-5.7-12.3-5.7H203c-6.8 0-10.5 7.9-6.1 13.1L459.4 512 196.9 824.9A7.95 7.95 0 00203 838h79.8c4.7 0 9.2-2.1 12.3-5.7l216.5-258.1 216.5 258.1c3 3.6 7.5 5.7 12.3 5.7h79.8c6.8 0 10.5-7.9 6.1-13.1L563.8 512z"
|
||||
/>
|
||||
</svg>
|
||||
<svg
|
||||
aria-hidden="true"
|
||||
class=""
|
||||
data-icon="close"
|
||||
fill="currentColor"
|
||||
focusable="false"
|
||||
height="1em"
|
||||
viewBox="64 64 896 896"
|
||||
width="1em"
|
||||
>
|
||||
<path
|
||||
d="M563.8 512l262.5-312.9c4.4-5.2.7-13.1-6.1-13.1h-79.8c-4.7 0-9.2 2.1-12.3 5.7L511.6 449.8 295.1 191.7c-3-3.6-7.5-5.7-12.3-5.7H203c-6.8 0-10.5 7.9-6.1 13.1L459.4 512 196.9 824.9A7.95 7.95 0 00203 838h79.8c4.7 0 9.2-2.1 12.3-5.7l216.5-258.1 216.5 258.1c3 3.6 7.5 5.7 12.3 5.7h79.8c6.8 0 10.5-7.9 6.1-13.1L563.8 512z"
|
||||
/>
|
||||
</svg>
|
||||
</span>
|
||||
</span>
|
||||
</span>
|
||||
</span>
|
||||
<span
|
||||
class="ant-select-selection-search"
|
||||
style="width:0"
|
||||
>
|
||||
<input
|
||||
aria-activedescendant="undefined_list_0"
|
||||
aria-autocomplete="list"
|
||||
aria-controls="undefined_list"
|
||||
aria-haspopup="listbox"
|
||||
aria-owns="undefined_list"
|
||||
autocomplete="off"
|
||||
class="ant-select-selection-search-input"
|
||||
readonly=""
|
||||
role="combobox"
|
||||
style="opacity:0"
|
||||
unselectable="on"
|
||||
value=""
|
||||
/>
|
||||
<span
|
||||
aria-hidden="true"
|
||||
class="ant-select-selection-search-mirror"
|
||||
class="ant-select-selection-search"
|
||||
style="width:0"
|
||||
>
|
||||
|
||||
<input
|
||||
aria-activedescendant="undefined_list_0"
|
||||
aria-autocomplete="list"
|
||||
aria-controls="undefined_list"
|
||||
aria-haspopup="listbox"
|
||||
aria-owns="undefined_list"
|
||||
autocomplete="off"
|
||||
class="ant-select-selection-search-input"
|
||||
readonly=""
|
||||
role="combobox"
|
||||
style="opacity:0"
|
||||
unselectable="on"
|
||||
value=""
|
||||
/>
|
||||
<span
|
||||
aria-hidden="true"
|
||||
class="ant-select-selection-search-mirror"
|
||||
>
|
||||
|
||||
</span>
|
||||
</span>
|
||||
</span>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>,
|
||||
<br />,
|
||||
<div
|
||||
class="ant-select ant-select-multiple ant-select-disabled ant-select-show-search"
|
||||
style="width:100%"
|
||||
>
|
||||
<div
|
||||
class="ant-select-selector"
|
||||
>
|
||||
<span
|
||||
class="ant-select-selection-item"
|
||||
>
|
||||
<span
|
||||
class="ant-select-selection-item-content"
|
||||
>
|
||||
a10
|
||||
</span>
|
||||
<span
|
||||
aria-hidden="true"
|
||||
class="ant-select-selection-item-remove"
|
||||
style="user-select:none;-webkit-user-select:none"
|
||||
unselectable="on"
|
||||
>
|
||||
<span
|
||||
aria-label="close"
|
||||
class="anticon anticon-close"
|
||||
role="img"
|
||||
>
|
||||
<svg
|
||||
aria-hidden="true"
|
||||
class=""
|
||||
data-icon="close"
|
||||
fill="currentColor"
|
||||
focusable="false"
|
||||
height="1em"
|
||||
viewBox="64 64 896 896"
|
||||
width="1em"
|
||||
>
|
||||
<path
|
||||
d="M563.8 512l262.5-312.9c4.4-5.2.7-13.1-6.1-13.1h-79.8c-4.7 0-9.2 2.1-12.3 5.7L511.6 449.8 295.1 191.7c-3-3.6-7.5-5.7-12.3-5.7H203c-6.8 0-10.5 7.9-6.1 13.1L459.4 512 196.9 824.9A7.95 7.95 0 00203 838h79.8c4.7 0 9.2-2.1 12.3-5.7l216.5-258.1 216.5 258.1c3 3.6 7.5 5.7 12.3 5.7h79.8c6.8 0 10.5-7.9 6.1-13.1L563.8 512z"
|
||||
/>
|
||||
</svg>
|
||||
</span>
|
||||
</span>
|
||||
</span>
|
||||
<span
|
||||
class="ant-select-selection-item"
|
||||
>
|
||||
<span
|
||||
class="ant-select-selection-item-content"
|
||||
>
|
||||
c12
|
||||
</span>
|
||||
<span
|
||||
aria-hidden="true"
|
||||
class="ant-select-selection-item-remove"
|
||||
style="user-select:none;-webkit-user-select:none"
|
||||
unselectable="on"
|
||||
>
|
||||
<span
|
||||
aria-label="close"
|
||||
class="anticon anticon-close"
|
||||
role="img"
|
||||
>
|
||||
<svg
|
||||
aria-hidden="true"
|
||||
class=""
|
||||
data-icon="close"
|
||||
fill="currentColor"
|
||||
focusable="false"
|
||||
height="1em"
|
||||
viewBox="64 64 896 896"
|
||||
width="1em"
|
||||
>
|
||||
<path
|
||||
d="M563.8 512l262.5-312.9c4.4-5.2.7-13.1-6.1-13.1h-79.8c-4.7 0-9.2 2.1-12.3 5.7L511.6 449.8 295.1 191.7c-3-3.6-7.5-5.7-12.3-5.7H203c-6.8 0-10.5 7.9-6.1 13.1L459.4 512 196.9 824.9A7.95 7.95 0 00203 838h79.8c4.7 0 9.2-2.1 12.3-5.7l216.5-258.1 216.5 258.1c3 3.6 7.5 5.7 12.3 5.7h79.8c6.8 0 10.5-7.9 6.1-13.1L563.8 512z"
|
||||
/>
|
||||
</svg>
|
||||
</span>
|
||||
</span>
|
||||
</span>
|
||||
<span
|
||||
class="ant-select-selection-search"
|
||||
style="width:0"
|
||||
>
|
||||
<input
|
||||
aria-activedescendant="undefined_list_0"
|
||||
aria-autocomplete="list"
|
||||
aria-controls="undefined_list"
|
||||
aria-expanded="false"
|
||||
aria-haspopup="listbox"
|
||||
aria-owns="undefined_list"
|
||||
autocomplete="off"
|
||||
class="ant-select-selection-search-input"
|
||||
disabled=""
|
||||
readonly=""
|
||||
role="combobox"
|
||||
style="opacity:0"
|
||||
unselectable="on"
|
||||
value=""
|
||||
/>
|
||||
<span
|
||||
aria-hidden="true"
|
||||
class="ant-select-selection-search-mirror"
|
||||
>
|
||||
|
||||
</span>
|
||||
</span>
|
||||
</div>
|
||||
</div>,
|
||||
]
|
||||
`;
|
||||
|
||||
exports[`renders ./components/select/demo/optgroup.md correctly 1`] = `
|
||||
|
||||
@ -28,15 +28,28 @@ function handleChange(value) {
|
||||
}
|
||||
|
||||
ReactDOM.render(
|
||||
<Select
|
||||
mode="multiple"
|
||||
style={{ width: '100%' }}
|
||||
placeholder="Please select"
|
||||
defaultValue={['a10', 'c12']}
|
||||
onChange={handleChange}
|
||||
>
|
||||
{children}
|
||||
</Select>,
|
||||
<>
|
||||
<Select
|
||||
mode="multiple"
|
||||
style={{ width: '100%' }}
|
||||
placeholder="Please select"
|
||||
defaultValue={['a10', 'c12']}
|
||||
onChange={handleChange}
|
||||
>
|
||||
{children}
|
||||
</Select>
|
||||
<br />
|
||||
<Select
|
||||
mode="multiple"
|
||||
disabled
|
||||
style={{ width: '100%' }}
|
||||
placeholder="Please select"
|
||||
defaultValue={['a10', 'c12']}
|
||||
onChange={handleChange}
|
||||
>
|
||||
{children}
|
||||
</Select>
|
||||
</>,
|
||||
mountNode,
|
||||
);
|
||||
```
|
||||
|
||||
@ -30,6 +30,11 @@
|
||||
cursor: text;
|
||||
}
|
||||
|
||||
.@{select-prefix-cls}-disabled& {
|
||||
background: @select-multiple-disabled-background;
|
||||
cursor: not-allowed;
|
||||
}
|
||||
|
||||
&::after {
|
||||
display: inline-block;
|
||||
width: 0;
|
||||
@ -64,6 +69,12 @@
|
||||
transition: font-size 0.3s, line-height 0.3s, height 0.3s;
|
||||
user-select: none;
|
||||
|
||||
.@{select-prefix-cls}-disabled& {
|
||||
color: @select-multiple-item-disabled-color;
|
||||
border-color: @select-multiple-item-disabled-border-color;
|
||||
cursor: not-allowed;
|
||||
}
|
||||
|
||||
// It's ok not to do this, but 24px makes bottom narrow in view should adjust
|
||||
&-content {
|
||||
display: inline-block;
|
||||
|
||||
@ -273,6 +273,9 @@
|
||||
@select-clear-background: @component-background;
|
||||
@select-selection-item-bg: fade(@white, 8);
|
||||
@select-selection-item-border-color: @border-color-split;
|
||||
@select-multiple-disabled-background: @component-background;
|
||||
@select-multiple-item-disabled-color: #595959;
|
||||
@select-multiple-item-disabled-border-color: @popover-background;
|
||||
|
||||
// Cascader
|
||||
// ---
|
||||
|
||||
@ -433,6 +433,9 @@
|
||||
@select-multiple-item-height: @input-height-base - @input-padding-vertical-base * 2; // Normal 24px
|
||||
@select-multiple-item-height-lg: 32px;
|
||||
@select-multiple-item-spacing-half: ceil(@input-padding-vertical-base / 2);
|
||||
@select-multiple-disabled-background: @input-disabled-bg;
|
||||
@select-multiple-item-disabled-color: #bfbfbf;
|
||||
@select-multiple-item-disabled-border-color: @select-border-color;
|
||||
|
||||
// Cascader
|
||||
// ---
|
||||
|
||||
Loading…
Reference in New Issue
Block a user