UNPKG

ant-design-vue

Version:

An enterprise-class UI design language and Vue-based implementation

122 lines 4.52 kB
import _extends from "@babel/runtime/helpers/esm/extends"; import { initMoveMotion, initSlideMotion, slideDownIn, slideDownOut, slideUpIn, slideUpOut } from '../../style/motion'; import { resetComponent, textEllipsis } from '../../style'; const genItemStyle = token => { const { controlPaddingHorizontal } = token; return { position: 'relative', display: 'block', minHeight: token.controlHeight, padding: `${(token.controlHeight - token.fontSize * token.lineHeight) / 2}px ${controlPaddingHorizontal}px`, color: token.colorText, fontWeight: 'normal', fontSize: token.fontSize, lineHeight: token.lineHeight, boxSizing: 'border-box' }; }; const genSingleStyle = token => { const { antCls, componentCls } = token; const selectItemCls = `${componentCls}-item`; return [{ [`${componentCls}-dropdown`]: _extends(_extends({}, resetComponent(token)), { position: 'absolute', top: -9999, zIndex: token.zIndexPopup, boxSizing: 'border-box', padding: token.paddingXXS, overflow: 'hidden', fontSize: token.fontSize, // Fix select render lag of long text in chrome // https://github.com/ant-design/ant-design/issues/11456 // https://github.com/ant-design/ant-design/issues/11843 fontVariant: 'initial', backgroundColor: token.colorBgElevated, borderRadius: token.borderRadiusLG, outline: 'none', boxShadow: token.boxShadowSecondary, [` &${antCls}-slide-up-enter${antCls}-slide-up-enter-active${componentCls}-dropdown-placement-bottomLeft, &${antCls}-slide-up-appear${antCls}-slide-up-appear-active${componentCls}-dropdown-placement-bottomLeft `]: { animationName: slideUpIn }, [` &${antCls}-slide-up-enter${antCls}-slide-up-enter-active${componentCls}-dropdown-placement-topLeft, &${antCls}-slide-up-appear${antCls}-slide-up-appear-active${componentCls}-dropdown-placement-topLeft `]: { animationName: slideDownIn }, [`&${antCls}-slide-up-leave${antCls}-slide-up-leave-active${componentCls}-dropdown-placement-bottomLeft`]: { animationName: slideUpOut }, [`&${antCls}-slide-up-leave${antCls}-slide-up-leave-active${componentCls}-dropdown-placement-topLeft`]: { animationName: slideDownOut }, '&-hidden': { display: 'none' }, '&-empty': { color: token.colorTextDisabled }, // ========================= Options ========================= [`${selectItemCls}-empty`]: _extends(_extends({}, genItemStyle(token)), { color: token.colorTextDisabled }), [`${selectItemCls}`]: _extends(_extends({}, genItemStyle(token)), { cursor: 'pointer', transition: `background ${token.motionDurationSlow} ease`, borderRadius: token.borderRadiusSM, // =========== Group ============ '&-group': { color: token.colorTextDescription, fontSize: token.fontSizeSM, cursor: 'default' }, // =========== Option =========== '&-option': { display: 'flex', '&-content': _extends({ flex: 'auto' }, textEllipsis), '&-state': { flex: 'none' }, [`&-active:not(${selectItemCls}-option-disabled)`]: { backgroundColor: token.controlItemBgHover }, [`&-selected:not(${selectItemCls}-option-disabled)`]: { color: token.colorText, fontWeight: token.fontWeightStrong, backgroundColor: token.controlItemBgActive, [`${selectItemCls}-option-state`]: { color: token.colorPrimary } }, '&-disabled': { [`&${selectItemCls}-option-selected`]: { backgroundColor: token.colorBgContainerDisabled }, color: token.colorTextDisabled, cursor: 'not-allowed' }, '&-grouped': { paddingInlineStart: token.controlPaddingHorizontal * 2 } } }), // =========================== RTL =========================== '&-rtl': { direction: 'rtl' } }) }, // Follow code may reuse in other components initSlideMotion(token, 'slide-up'), initSlideMotion(token, 'slide-down'), initMoveMotion(token, 'move-up'), initMoveMotion(token, 'move-down')]; }; export default genSingleStyle;