antd/es/cascader/style/index.js

An enterprise-class UI design language and React components implementation

import _defineProperty from "@babel/runtime/helpers/esm/defineProperty";
import { getStyle as getCheckboxStyle } from '../../checkbox/style';
import { genComponentStyleHook } from '../../theme'; // =============================== Base ===============================

var genBaseStyle = function genBaseStyle(token) {
  var _item;

  var prefixCls = token.prefixCls,
      componentCls = token.componentCls,
      antCls = token.antCls;
  var cascaderMenuItemCls = "".concat(componentCls, "-menu-item");
  var iconCls = "\n    &".concat(cascaderMenuItemCls, "-expand ").concat(cascaderMenuItemCls, "-expand-icon,\n    ").concat(cascaderMenuItemCls, "-loading-icon\n  ");
  var itemPaddingVertical = Math.round((token.controlHeight - token.fontSize * token.lineHeight) / 2);
  return [// =====================================================
  // ==                     Control                     ==
  // =====================================================
  _defineProperty({}, componentCls, {
    width: token.controlWidth
  }), // =====================================================
  // ==                      Popup                      ==
  // =====================================================
  _defineProperty({}, "".concat(componentCls, "-dropdown"), [// ==================== Checkbox ====================
  getCheckboxStyle("".concat(prefixCls, "-checkbox"), token), _defineProperty({}, "&".concat(antCls, "-select-dropdown"), {
    padding: 0
  }), _defineProperty({}, componentCls, {
    // ================== Checkbox ==================
    '&-checkbox': {
      top: 0,
      marginInlineEnd: token.paddingXS
    },
    // ==================== Menu ====================
    // >>> Menus
    '&-menus': _defineProperty({
      display: 'flex',
      flexWrap: 'nowrap',
      alignItems: 'flex-start'
    }, "&".concat(componentCls, "-menu-empty"), _defineProperty({}, "".concat(componentCls, "-menu"), _defineProperty({
      width: '100%',
      height: 'auto'
    }, cascaderMenuItemCls, {
      color: token.colorTextDisabled,
      cursor: 'default',
      pointerEvents: 'none'
    }))),
    // >>> Menu
    '&-menu': {
      flexGrow: 1,
      minWidth: token.controlItemWidth,
      height: token.dropdownHeight,
      padding: token.paddingXXS,
      overflow: 'auto',
      verticalAlign: 'top',
      listStyle: 'none',
      '-ms-overflow-style': '-ms-autohiding-scrollbar',
      '&:not(:last-child)': {
        borderInlineEnd: "".concat(token.controlLineWidth, "px ").concat(token.controlLineType, " ").concat(token.colorSplit)
      },
      '&-item': (_item = {
        display: 'flex',
        flexWrap: 'nowrap',
        alignItems: 'center',
        padding: "".concat(itemPaddingVertical, "px ").concat(token.paddingSM, "px"),
        overflow: 'hidden',
        lineHeight: token.lineHeight,
        whiteSpace: 'nowrap',
        textOverflow: 'ellipsis',
        cursor: 'pointer',
        transition: "all ".concat(token.motionDurationFast),
        borderRadius: token.radiusSM,
        '&:hover': {
          background: token.controlItemBgHover
        },
        ' &-disabled': _defineProperty({
          color: token.colorTextDisabled,
          cursor: 'not-allowed',
          '&:hover': {
            background: 'transparent'
          }
        }, iconCls, {
          color: token.colorTextDisabled
        })
      }, _defineProperty(_item, "&-active:not(".concat(cascaderMenuItemCls, "-disabled)"), _defineProperty({}, "&, &:hover", {
        fontWeight: token.fontWeightStrong,
        backgroundColor: token.controlItemBgActive
      })), _defineProperty(_item, '&-content', {
        flex: 'auto'
      }), _defineProperty(_item, iconCls, {
        marginInlineStart: token.paddingXXS,
        color: token.colorTextDescription,
        fontSize: token.fontSizeIcon
      }), _defineProperty(_item, '&-keyword', {
        color: token.colorHighlight
      }), _item)
    }
  })]), // =====================================================
  // ==                       RTL                       ==
  // =====================================================
  _defineProperty({}, "".concat(componentCls, "-dropdown-rtl"), {
    direction: 'rtl'
  })];
}; // ============================== Export ==============================


export default genComponentStyleHook('Cascader', function (token) {
  return [genBaseStyle(token)];
}, {
  controlWidth: 184,
  controlItemWidth: 111,
  dropdownHeight: 180
});