@ant-design/pro-list/lib/style/index.js

🏆 Use Ant Design List like a Pro!

"use strict";

var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault").default;
Object.defineProperty(exports, "__esModule", {
  value: true
});
exports.techUiListActive = void 0;
exports.useStyle = useStyle;
var _objectSpread2 = _interopRequireDefault(require("@babel/runtime/helpers/objectSpread2"));
var _defineProperty2 = _interopRequireDefault(require("@babel/runtime/helpers/defineProperty"));
var _cssinjs = require("@ant-design/cssinjs");
var _proProvider = require("@ant-design/pro-provider");
var techUiListActive = exports.techUiListActive = new _cssinjs.Keyframes('techUiListActive', {
  '0%': {
    backgroundColor: 'unset'
  },
  '30%': {
    background: '#fefbe6'
  },
  '100%': {
    backgroundColor: 'unset'
  }
});
var genProListStyle = function genProListStyle(token) {
  var _row;
  return (0, _defineProperty2.default)({}, token.componentCls, (0, _defineProperty2.default)((0, _defineProperty2.default)({
    backgroundColor: 'transparent'
  }, "".concat(token.proComponentsCls, "-table-alert"), {
    marginBlockEnd: '16px'
  }), '&-row', (_row = {
    borderBlockEnd: "1px solid ".concat(token.colorSplit)
  }, (0, _defineProperty2.default)((0, _defineProperty2.default)((0, _defineProperty2.default)((0, _defineProperty2.default)((0, _defineProperty2.default)((0, _defineProperty2.default)((0, _defineProperty2.default)((0, _defineProperty2.default)((0, _defineProperty2.default)((0, _defineProperty2.default)(_row, "".concat(token.antCls, "-list-item-meta-title"), {
    borderBlockEnd: 'none',
    margin: 0
  }), '&:last-child', (0, _defineProperty2.default)({
    borderBlockEnd: 'none'
  }, "".concat(token.antCls, "-list-item"), {
    borderBlockEnd: 'none'
  })), '&:hover', (0, _defineProperty2.default)((0, _defineProperty2.default)((0, _defineProperty2.default)((0, _defineProperty2.default)({
    backgroundColor: 'rgba(0, 0, 0, 0.02)',
    transition: 'background-color 0.3s'
  }, "".concat(token.antCls, "-list-item-action"), {
    display: 'block'
  }), "".concat(token.antCls, "-list-item-extra"), {
    display: 'flex'
  }), "".concat(token.componentCls, "-row-extra"), {
    display: 'block'
  }), "".concat(token.componentCls, "-row-subheader-actions"), {
    display: 'block'
  })), '&-card', (0, _defineProperty2.default)({
    marginBlock: 8,
    marginInline: 0,
    paddingBlock: 0,
    paddingInline: 8,
    '&:hover': {
      backgroundColor: 'transparent'
    }
  }, "".concat(token.antCls, "-list-item-meta-title"), {
    flexShrink: 9,
    marginBlock: 0,
    marginInline: 0,
    lineHeight: '22px'
  })), "&".concat(token.componentCls, "-row-editable"), (0, _defineProperty2.default)({}, "".concat(token.componentCls, "-list-item"), {
    '&-meta': {
      '&-avatar,&-description,&-title': {
        paddingBlock: 6,
        paddingInline: 0,
        '&-editable': {
          paddingBlock: 0
        }
      }
    },
    '&-action': {
      display: 'block'
    }
  })), "&".concat(token.componentCls, "-row-selected"), {
    backgroundColor: token.colorPrimaryBgHover,
    '&:hover': {
      backgroundColor: token.colorPrimaryBgHover
    }
  }), "&".concat(token.componentCls, "-row-type-new"), {
    animationName: techUiListActive,
    animationDuration: '3s'
  }), "&".concat(token.componentCls, "-row-type-inline"), (0, _defineProperty2.default)({}, "".concat(token.componentCls, "-row-title"), {
    fontWeight: 'normal'
  })), "&".concat(token.componentCls, "-row-type-top"), {
    backgroundImage: "url('https://gw.alipayobjects.com/zos/antfincdn/DehQfMbOJb/icon.svg')",
    backgroundRepeat: 'no-repeat',
    backgroundPosition: 'left top',
    backgroundSize: '12px 12px'
  }), '&-show-action-hover', (0, _defineProperty2.default)({}, "".concat(token.antCls, "-list-item-action,\n            ").concat(token.proComponentsCls, "-card-extra,\n            ").concat(token.proComponentsCls, "-card-actions"), {
    display: 'flex'
  })), (0, _defineProperty2.default)((0, _defineProperty2.default)((0, _defineProperty2.default)((0, _defineProperty2.default)((0, _defineProperty2.default)((0, _defineProperty2.default)((0, _defineProperty2.default)((0, _defineProperty2.default)((0, _defineProperty2.default)((0, _defineProperty2.default)(_row, '&-show-extra-hover', (0, _defineProperty2.default)({}, "".concat(token.antCls, "-list-item-extra"), {
    display: 'none'
  })), '&-extra', {
    display: 'none'
  }), '&-subheader', {
    display: 'flex',
    alignItems: 'center',
    justifyContent: 'space-between',
    height: '44px',
    paddingInline: 24,
    paddingBlock: 0,
    color: token.colorTextSecondary,
    lineHeight: '44px',
    background: 'rgba(0, 0, 0, 0.02)',
    '&-actions': {
      display: 'none'
    },
    '&-actions *': {
      marginInlineEnd: 8,
      '&:last-child': {
        marginInlineEnd: 0
      }
    }
  }), '&-expand-icon', {
    marginInlineEnd: 8,
    display: 'flex',
    fontSize: 12,
    cursor: 'pointer',
    height: '24px',
    marginRight: 4,
    color: token.colorTextSecondary,
    '> .anticon > svg': {
      transition: '0.3s'
    }
  }), '&-expanded', {
    ' > .anticon > svg': {
      transform: 'rotate(90deg)'
    }
  }), '&-title', {
    marginInlineEnd: '16px',
    wordBreak: 'break-all',
    cursor: 'pointer',
    '&-editable': {
      paddingBlock: 8
    },
    '&:hover': {
      color: token.colorPrimary
    }
  }), '&-content', {
    position: 'relative',
    display: 'flex',
    flex: '1',
    flexDirection: 'column',
    marginBlock: 0,
    marginInline: 32
  }), '&-subTitle', {
    color: 'rgba(0, 0, 0, 0.45)',
    '&-editable': {
      paddingBlock: 8
    }
  }), '&-description', {
    marginBlockStart: '4px',
    wordBreak: 'break-all'
  }), '&-avatar', {
    display: 'flex'
  }), (0, _defineProperty2.default)((0, _defineProperty2.default)((0, _defineProperty2.default)((0, _defineProperty2.default)((0, _defineProperty2.default)((0, _defineProperty2.default)((0, _defineProperty2.default)((0, _defineProperty2.default)((0, _defineProperty2.default)((0, _defineProperty2.default)(_row, '&-header', {
    display: 'flex',
    flex: '1',
    justifyContent: 'flex-start',
    h4: {
      margin: 0,
      padding: 0
    }
  }), '&-header-container', {
    display: 'flex',
    alignItems: 'center',
    justifyContent: 'flex-start'
  }), '&-header-option', {
    display: 'flex'
  }), '&-checkbox', {
    width: '16px',
    marginInlineEnd: '12px'
  }), '&-no-split', (0, _defineProperty2.default)((0, _defineProperty2.default)({}, "".concat(token.componentCls, "-row"), {
    borderBlockEnd: 'none'
  }), "".concat(token.antCls, "-list ").concat(token.antCls, "-list-item"), {
    borderBlockEnd: 'none'
  })), '&-bordered', (0, _defineProperty2.default)({}, "".concat(token.componentCls, "-toolbar"), {
    borderBlockEnd: "1px solid ".concat(token.colorSplit)
  })), "".concat(token.antCls, "-list-vertical"), (0, _defineProperty2.default)((0, _defineProperty2.default)((0, _defineProperty2.default)((0, _defineProperty2.default)((0, _defineProperty2.default)((0, _defineProperty2.default)((0, _defineProperty2.default)({}, "".concat(token.componentCls, "-row"), {
    borderBlockEnd: '12px 18px 12px 24px'
  }), '&-header-title', {
    display: 'flex',
    flexDirection: 'column',
    alignItems: 'flex-start',
    justifyContent: 'center'
  }), '&-content', {
    marginBlock: 0,
    marginInline: 0
  }), '&-subTitle', {
    marginBlockStart: 8
  }), "".concat(token.antCls, "-list-item-extra"), (0, _defineProperty2.default)({
    display: 'flex',
    alignItems: 'center',
    marginInlineStart: '32px'
  }, "".concat(token.componentCls, "-row-description"), {
    marginBlockStart: 16
  })), "".concat(token.antCls, "-list-bordered ").concat(token.antCls, "-list-item"), {
    paddingInline: 0
  }), "".concat(token.componentCls, "-row-show-extra-hover"), (0, _defineProperty2.default)({}, "".concat(token.antCls, "-list-item-extra "), {
    display: 'none'
  }))), "".concat(token.antCls, "-list-pagination"), {
    marginBlockStart: token.margin,
    marginBlockEnd: token.margin
  }), "".concat(token.antCls, "-list-list"), {
    '&-item': {
      cursor: 'pointer',
      paddingBlock: 12,
      paddingInline: 12
    }
  }), "".concat(token.antCls, "-list-vertical ").concat(token.proComponentsCls, "-list-row"), (0, _defineProperty2.default)({
    '&-header': {
      paddingBlock: 0,
      paddingInline: 0,
      borderBlockEnd: 'none'
    }
  }, "".concat(token.antCls, "-list-item"), (0, _defineProperty2.default)((0, _defineProperty2.default)((0, _defineProperty2.default)({
    width: '100%',
    paddingBlock: 12,
    paddingInlineStart: 24,
    paddingInlineEnd: 18
  }, "".concat(token.antCls, "-list-item-meta-avatar"), {
    display: 'flex',
    alignItems: 'center',
    marginInlineEnd: 8
  }), "".concat(token.antCls, "-list-item-action-split"), {
    display: 'none'
  }), "".concat(token.antCls, "-list-item-meta-title"), {
    marginBlock: 0,
    marginInline: 0
  }))))));
};
function useStyle(prefixCls) {
  return (0, _proProvider.useStyle)('ProList', function (token) {
    var proListToken = (0, _objectSpread2.default)((0, _objectSpread2.default)({}, token), {}, {
      componentCls: ".".concat(prefixCls)
    });
    return [genProListStyle(proListToken)];
  });
}