mirror of
https://github.com/ant-design/ant-design.git
synced 2024-11-25 03:29:59 +08:00
feat: v5 dropdown style (#37491)
* feat: v5 dropdown style * feat: TimePicer item radius
This commit is contained in:
MadCcc
GitHub
parent
68bd866187
commit
0a0f0e8a41
@ -12,7 +12,7 @@ type CascaderToken = FullToken<'Cascader'>;
|
||||
|
||||
// =============================== Base ===============================
|
||||
const genBaseStyle: GenerateStyle<CascaderToken> = token => {
|
||||
const { prefixCls, componentCls } = token;
|
||||
const { prefixCls, componentCls, antCls } = token;
|
||||
const cascaderMenuItemCls = `${componentCls}-menu-item`;
|
||||
const iconCls = `
|
||||
&${cascaderMenuItemCls}-expand ${cascaderMenuItemCls}-expand-icon,
|
||||
@ -40,6 +40,11 @@ const genBaseStyle: GenerateStyle<CascaderToken> = token => {
|
||||
[`${componentCls}-dropdown`]: [
|
||||
// ==================== Checkbox ====================
|
||||
getCheckboxStyle(`${prefixCls}-checkbox`, token),
|
||||
{
|
||||
[`&${antCls}-select-dropdown`]: {
|
||||
padding: 0,
|
||||
},
|
||||
},
|
||||
{
|
||||
[componentCls]: {
|
||||
// ================== Checkbox ==================
|
||||
@ -74,14 +79,16 @@ const genBaseStyle: GenerateStyle<CascaderToken> = token => {
|
||||
flexGrow: 1,
|
||||
minWidth: token.controlItemWidth,
|
||||
height: token.dropdownHeight,
|
||||
margin: `-${token.paddingXS}px 0`,
|
||||
padding: `${token.paddingXS}px 0`,
|
||||
padding: token.paddingXXS,
|
||||
overflow: 'auto',
|
||||
verticalAlign: 'top',
|
||||
listStyle: 'none',
|
||||
borderInlineEnd: `${token.controlLineWidth}px ${token.controlLineType} ${token.colorSplit}`,
|
||||
'-ms-overflow-style': '-ms-autohiding-scrollbar', // https://github.com/ant-design/ant-design/issues/11857
|
||||
|
||||
'&:not(:last-child)': {
|
||||
borderInlineEnd: `${token.controlLineWidth}px ${token.controlLineType} ${token.colorSplit}`,
|
||||
},
|
||||
|
||||
'&-item': {
|
||||
display: 'flex',
|
||||
flexWrap: 'nowrap',
|
||||
@ -93,6 +100,7 @@ const genBaseStyle: GenerateStyle<CascaderToken> = token => {
|
||||
textOverflow: 'ellipsis',
|
||||
cursor: 'pointer',
|
||||
transition: `all ${token.motionDurationFast}`,
|
||||
borderRadius: token.radiusSM,
|
||||
|
||||
'&:hover': {
|
||||
background: token.controlItemBgHover,
|
||||
|
||||
@ -701,6 +701,7 @@ export const genPanelStyle = (token: SharedPickerToken): CSSObject => {
|
||||
textAlign: 'start',
|
||||
listStyle: 'none',
|
||||
transition: `background ${token.motionDurationFast}`,
|
||||
overflowX: 'hidden',
|
||||
|
||||
'&::after': {
|
||||
display: 'block',
|
||||
@ -731,9 +732,10 @@ export const genPanelStyle = (token: SharedPickerToken): CSSObject => {
|
||||
padding: 0,
|
||||
|
||||
[`&${componentCls}-time-panel-cell`]: {
|
||||
marginInline: token.marginXXS,
|
||||
[`${componentCls}-time-panel-cell-inner`]: {
|
||||
display: 'block',
|
||||
width: '100%',
|
||||
width: token.pickerTimePanelColumnWidth - 2 * token.marginXXS,
|
||||
height: token.pickerTimePanelCellHeight,
|
||||
margin: 0,
|
||||
paddingBlock: 0,
|
||||
@ -742,7 +744,7 @@ export const genPanelStyle = (token: SharedPickerToken): CSSObject => {
|
||||
(token.pickerTimePanelColumnWidth - token.pickerTimePanelCellHeight) / 2,
|
||||
color: token.colorText,
|
||||
lineHeight: `${token.pickerTimePanelCellHeight}px`,
|
||||
borderRadius: 0,
|
||||
borderRadius: token.controlRadiusSM,
|
||||
cursor: 'pointer',
|
||||
transition: `background ${token.motionDurationFast}`,
|
||||
|
||||
@ -1095,13 +1097,13 @@ const genPickerStyle: GenerateStyle<PickerToken> = token => {
|
||||
|
||||
// Time picker with additional style
|
||||
[`${componentCls}-panel > ${componentCls}-time-panel`]: {
|
||||
paddingTop: token.paddingXS / 2,
|
||||
paddingTop: token.paddingXXS,
|
||||
},
|
||||
|
||||
// ======================== Ranges ========================
|
||||
[`${componentCls}-ranges`]: {
|
||||
marginBottom: 0,
|
||||
padding: `${token.paddingXS / 2}px ${token.paddingSM}px`,
|
||||
padding: `${token.paddingXXS}px ${token.paddingSM}px`,
|
||||
overflow: 'hidden',
|
||||
lineHeight: `${
|
||||
token.pickerTextHeight - 2 * token.controlLineWidth - token.paddingXS / 2
|
||||
|
||||
@ -21,7 +21,7 @@ export interface DropdownToken extends FullToken<'Dropdown'> {
|
||||
dropdownArrowDistance: number;
|
||||
dropdownArrowOffset: number;
|
||||
dropdownPaddingVertical: number;
|
||||
dropdownEdgeChildVerticalPadding: number;
|
||||
dropdownEdgeChildPadding: number;
|
||||
menuCls: string;
|
||||
}
|
||||
|
||||
@ -37,10 +37,10 @@ const genBaseStyle: GenerateStyle<DropdownToken> = token => {
|
||||
antCls,
|
||||
iconCls,
|
||||
motionDurationMid,
|
||||
motionDurationSlow,
|
||||
motionDurationFast,
|
||||
dropdownPaddingVertical,
|
||||
fontSizeBase,
|
||||
dropdownEdgeChildVerticalPadding,
|
||||
dropdownEdgeChildPadding,
|
||||
radiusBase,
|
||||
colorTextDisabled,
|
||||
fontSizeIcon,
|
||||
@ -260,7 +260,7 @@ const genBaseStyle: GenerateStyle<DropdownToken> = token => {
|
||||
|
||||
[`${componentCls}, ${componentCls}-menu-submenu`]: {
|
||||
[menuCls]: {
|
||||
padding: `${dropdownEdgeChildVerticalPadding}px 0`,
|
||||
padding: dropdownEdgeChildPadding,
|
||||
listStyleType: 'none',
|
||||
backgroundColor: colorBgElevated,
|
||||
backgroundClip: 'padding-box',
|
||||
@ -272,7 +272,7 @@ const genBaseStyle: GenerateStyle<DropdownToken> = token => {
|
||||
[`${menuCls}-item-group-title`]: {
|
||||
padding: `${dropdownPaddingVertical}px ${controlPaddingHorizontal}px`,
|
||||
color: token.colorTextDescription,
|
||||
transition: `all ${motionDurationSlow}`,
|
||||
transition: `all ${motionDurationFast}`,
|
||||
},
|
||||
|
||||
// ======================= Item Content =======================
|
||||
@ -280,6 +280,7 @@ const genBaseStyle: GenerateStyle<DropdownToken> = token => {
|
||||
position: 'relative',
|
||||
display: 'flex',
|
||||
alignItems: 'center',
|
||||
borderRadius: token.radiusSM,
|
||||
},
|
||||
|
||||
[`${menuCls}-item-icon`]: {
|
||||
@ -293,7 +294,7 @@ const genBaseStyle: GenerateStyle<DropdownToken> = token => {
|
||||
|
||||
'> a': {
|
||||
color: 'inherit',
|
||||
transition: `all ${motionDurationSlow}`,
|
||||
transition: `all ${motionDurationFast}`,
|
||||
|
||||
'&:hover': {
|
||||
color: 'inherit',
|
||||
@ -317,15 +318,15 @@ const genBaseStyle: GenerateStyle<DropdownToken> = token => {
|
||||
fontSize: fontSizeBase,
|
||||
lineHeight: token.lineHeight,
|
||||
cursor: 'pointer',
|
||||
transition: `all ${motionDurationSlow}`,
|
||||
transition: `all ${motionDurationFast}`,
|
||||
|
||||
'&:first-child': !dropdownEdgeChildVerticalPadding
|
||||
'&:first-child': !dropdownEdgeChildPadding
|
||||
? {
|
||||
borderRadius: `${radiusBase}px ${radiusBase}px 0 0`,
|
||||
}
|
||||
: [],
|
||||
|
||||
'&:last-child': !dropdownEdgeChildVerticalPadding
|
||||
'&:last-child': !dropdownEdgeChildPadding
|
||||
? {
|
||||
borderRadius: `0 0 ${radiusBase}px ${radiusBase}px`,
|
||||
}
|
||||
@ -443,7 +444,7 @@ export default genComponentStyleHook(
|
||||
dropdownArrowDistance: sizePopupArrow + marginXXS,
|
||||
dropdownArrowOffset: (sizePopupArrow / Math.sqrt(2)) * 2,
|
||||
dropdownPaddingVertical,
|
||||
dropdownEdgeChildVerticalPadding: paddingXXS,
|
||||
dropdownEdgeChildPadding: paddingXXS,
|
||||
});
|
||||
return [
|
||||
genBaseStyle(dropdownToken),
|
||||
|
||||
@ -44,7 +44,7 @@ const genSingleStyle: GenerateStyle<SelectToken> = token => {
|
||||
top: -9999,
|
||||
zIndex: token.zIndexPopup,
|
||||
boxSizing: 'border-box',
|
||||
padding: `${token.paddingXXS}px 0`,
|
||||
padding: token.paddingXXS,
|
||||
overflow: 'hidden',
|
||||
fontSize: token.fontSize,
|
||||
// Fix select render lag of long text in chrome
|
||||
@ -96,6 +96,7 @@ const genSingleStyle: GenerateStyle<SelectToken> = token => {
|
||||
...genItemStyle(token),
|
||||
cursor: 'pointer',
|
||||
transition: `background ${token.motionDurationSlow} ease`,
|
||||
borderRadius: token.radiusSM,
|
||||
|
||||
// =========== Group ============
|
||||
'&-group': {
|
||||
|
||||
Loading…
Reference in New Issue
Block a user