UNPKG

ant-design-vue

Version:

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

266 lines 8.91 kB
import _extends from "@babel/runtime/helpers/esm/extends"; import { genComponentStyleHook, mergeToken } from '../../theme/internal'; import genDropdownStyle from './dropdown'; import genMultipleStyle from './multiple'; import genSingleStyle from './single'; import { resetComponent, resetIcon, textEllipsis } from '../../style'; import { genCompactItemStyle } from '../../style/compact-item'; // ============================= Selector ============================= const genSelectorStyle = token => { const { componentCls } = token; return { position: 'relative', backgroundColor: token.colorBgContainer, border: `${token.lineWidth}px ${token.lineType} ${token.colorBorder}`, transition: `all ${token.motionDurationMid} ${token.motionEaseInOut}`, input: { cursor: 'pointer' }, [`${componentCls}-show-search&`]: { cursor: 'text', input: { cursor: 'auto', color: 'inherit' } }, [`${componentCls}-disabled&`]: { color: token.colorTextDisabled, background: token.colorBgContainerDisabled, cursor: 'not-allowed', [`${componentCls}-multiple&`]: { background: token.colorBgContainerDisabled }, input: { cursor: 'not-allowed' } } }; }; // ============================== Status ============================== const genStatusStyle = function (rootSelectCls, token) { let overwriteDefaultBorder = arguments.length > 2 && arguments[2] !== undefined ? arguments[2] : false; const { componentCls, borderHoverColor, outlineColor, antCls } = token; const overwriteStyle = overwriteDefaultBorder ? { [`${componentCls}-selector`]: { borderColor: borderHoverColor } } : {}; return { [rootSelectCls]: { [`&:not(${componentCls}-disabled):not(${componentCls}-customize-input):not(${antCls}-pagination-size-changer)`]: _extends(_extends({}, overwriteStyle), { [`${componentCls}-focused& ${componentCls}-selector`]: { borderColor: borderHoverColor, boxShadow: `0 0 0 ${token.controlOutlineWidth}px ${outlineColor}`, borderInlineEndWidth: `${token.controlLineWidth}px !important`, outline: 0 }, [`&:hover ${componentCls}-selector`]: { borderColor: borderHoverColor, borderInlineEndWidth: `${token.controlLineWidth}px !important` } }) } }; }; // ============================== Styles ============================== // /* Reset search input style */ const getSearchInputWithoutBorderStyle = token => { const { componentCls } = token; return { [`${componentCls}-selection-search-input`]: { margin: 0, padding: 0, background: 'transparent', border: 'none', outline: 'none', appearance: 'none', '&::-webkit-search-cancel-button': { display: 'none', '-webkit-appearance': 'none' } } }; }; // =============================== Base =============================== const genBaseStyle = token => { const { componentCls, inputPaddingHorizontalBase, iconCls } = token; return { [componentCls]: _extends(_extends({}, resetComponent(token)), { position: 'relative', display: 'inline-block', cursor: 'pointer', [`&:not(${componentCls}-customize-input) ${componentCls}-selector`]: _extends(_extends({}, genSelectorStyle(token)), getSearchInputWithoutBorderStyle(token)), // [`&:not(&-disabled):hover ${selectCls}-selector`]: { // ...genHoverStyle(token), // }, // ======================== Selection ======================== [`${componentCls}-selection-item`]: _extends({ flex: 1, fontWeight: 'normal' }, textEllipsis), // ======================= Placeholder ======================= [`${componentCls}-selection-placeholder`]: _extends(_extends({}, textEllipsis), { flex: 1, color: token.colorTextPlaceholder, pointerEvents: 'none' }), // ========================== Arrow ========================== [`${componentCls}-arrow`]: _extends(_extends({}, resetIcon()), { position: 'absolute', top: '50%', insetInlineStart: 'auto', insetInlineEnd: inputPaddingHorizontalBase, height: token.fontSizeIcon, marginTop: -token.fontSizeIcon / 2, color: token.colorTextQuaternary, fontSize: token.fontSizeIcon, lineHeight: 1, textAlign: 'center', pointerEvents: 'none', display: 'flex', alignItems: 'center', [iconCls]: { verticalAlign: 'top', transition: `transform ${token.motionDurationSlow}`, '> svg': { verticalAlign: 'top' }, [`&:not(${componentCls}-suffix)`]: { pointerEvents: 'auto' } }, [`${componentCls}-disabled &`]: { cursor: 'not-allowed' }, '> *:not(:last-child)': { marginInlineEnd: 8 // FIXME: magic } }), // ========================== Clear ========================== [`${componentCls}-clear`]: { position: 'absolute', top: '50%', insetInlineStart: 'auto', insetInlineEnd: inputPaddingHorizontalBase, zIndex: 1, display: 'inline-block', width: token.fontSizeIcon, height: token.fontSizeIcon, marginTop: -token.fontSizeIcon / 2, color: token.colorTextQuaternary, fontSize: token.fontSizeIcon, fontStyle: 'normal', lineHeight: 1, textAlign: 'center', textTransform: 'none', background: token.colorBgContainer, cursor: 'pointer', opacity: 0, transition: `color ${token.motionDurationMid} ease, opacity ${token.motionDurationSlow} ease`, textRendering: 'auto', '&:before': { display: 'block' }, '&:hover': { color: token.colorTextTertiary } }, '&:hover': { [`${componentCls}-clear`]: { opacity: 1 } } }), // ========================= Feedback ========================== [`${componentCls}-has-feedback`]: { [`${componentCls}-clear`]: { insetInlineEnd: inputPaddingHorizontalBase + token.fontSize + token.paddingXXS } } }; }; // ============================== Styles ============================== const genSelectStyle = token => { const { componentCls } = token; return [{ [componentCls]: { // ==================== BorderLess ==================== [`&-borderless ${componentCls}-selector`]: { backgroundColor: `transparent !important`, borderColor: `transparent !important`, boxShadow: `none !important` }, // ==================== In Form ==================== [`&${componentCls}-in-form-item`]: { width: '100%' } } }, // ===================================================== // == LTR == // ===================================================== // Base genBaseStyle(token), // Single genSingleStyle(token), // Multiple genMultipleStyle(token), // Dropdown genDropdownStyle(token), // ===================================================== // == RTL == // ===================================================== { [`${componentCls}-rtl`]: { direction: 'rtl' } }, // ===================================================== // == Status == // ===================================================== genStatusStyle(componentCls, mergeToken(token, { borderHoverColor: token.colorPrimaryHover, outlineColor: token.controlOutline })), genStatusStyle(`${componentCls}-status-error`, mergeToken(token, { borderHoverColor: token.colorErrorHover, outlineColor: token.colorErrorOutline }), true), genStatusStyle(`${componentCls}-status-warning`, mergeToken(token, { borderHoverColor: token.colorWarningHover, outlineColor: token.colorWarningOutline }), true), // ===================================================== // == Space Compact == // ===================================================== genCompactItemStyle(token, { borderElCls: `${componentCls}-selector`, focusElCls: `${componentCls}-focused` })]; }; // ============================== Export ============================== export default genComponentStyleHook('Select', (token, _ref) => { let { rootPrefixCls } = _ref; const selectToken = mergeToken(token, { rootPrefixCls, inputPaddingHorizontalBase: token.paddingSM - 1 }); return [genSelectStyle(selectToken)]; }, token => ({ zIndexPopup: token.zIndexPopupBase + 50 }));