antd/es/timeline/style/index.js

An enterprise-class UI design language and React components implementation

import _defineProperty from "@babel/runtime/helpers/esm/defineProperty";
import _extends from "@babel/runtime/helpers/esm/extends";
import { genComponentStyleHook, mergeToken } from '../../theme';
import { resetComponent } from '../../style';

var genTimelineStyle = function genTimelineStyle(token) {
  var _pending, _last, _$concat, _$concat$concat, _$concat4, _extends2;

  var componentCls = token.componentCls;
  return _defineProperty({}, componentCls, _extends(_extends({}, resetComponent(token)), (_extends2 = {
    margin: 0,
    padding: 0,
    listStyle: 'none'
  }, _defineProperty(_extends2, "".concat(componentCls, "-item"), {
    position: 'relative',
    margin: 0,
    paddingBottom: token.timeLineItemPaddingBottom,
    fontSize: token.fontSize,
    listStyle: 'none',
    '&-tail': {
      position: 'absolute',
      insetBlockStart: token.timeLineItemHeadSize,
      insetInlineStart: (token.timeLineItemHeadSize - token.timeLineItemTailWidth) / 2,
      height: "calc(100% - ".concat(token.timeLineItemHeadSize, "px)"),
      borderInlineStart: "".concat(token.timeLineItemTailWidth, "px ").concat(token.lineType, " ").concat(token.colorSplit)
    },
    '&-pending': (_pending = {}, _defineProperty(_pending, "".concat(componentCls, "-item-head"), {
      fontSize: token.fontSizeSM,
      backgroundColor: 'transparent'
    }), _defineProperty(_pending, "".concat(componentCls, "-item-tail"), {
      display: 'none'
    }), _pending),
    '&-head': {
      position: 'absolute',
      width: token.timeLineItemHeadSize,
      height: token.timeLineItemHeadSize,
      backgroundColor: token.colorBgContainer,
      border: "".concat(token.timeLineHeadBorderWidth, "px ").concat(token.lineType, " transparent"),
      borderRadius: '50%',
      '&-blue': {
        color: token.colorPrimary,
        borderColor: token.colorPrimary
      },
      '&-red': {
        color: token.colorError,
        borderColor: token.colorError
      },
      '&-green': {
        color: token.colorSuccess,
        borderColor: token.colorSuccess
      },
      '&-gray': {
        color: token.colorTextDisabled,
        borderColor: token.colorTextDisabled
      }
    },
    '&-head-custom': {
      position: 'absolute',
      insetBlockStart: token.timeLineItemHeadSize / 2,
      insetInlineStart: token.timeLineItemHeadSize / 2,
      width: 'auto',
      height: 'auto',
      marginBlockStart: 0,
      paddingBlock: token.timeLineItemCustomHeadPaddingVertical,
      lineHeight: 1,
      textAlign: 'center',
      border: 0,
      borderRadius: 0,
      transform: "translate(-50%, -50%)"
    },
    '&-content': {
      position: 'relative',
      insetBlockStart: -(token.fontSize * token.lineHeight - token.fontSize) + token.lineWidth,
      marginInlineStart: token.margin + token.timeLineItemHeadSize,
      marginInlineEnd: 0,
      marginBlockStart: 0,
      marginBlockEnd: 0,
      wordBreak: 'break-word'
    },
    '&-last': (_last = {}, _defineProperty(_last, "> ".concat(componentCls, "-item-tail"), {
      display: 'none'
    }), _defineProperty(_last, "> ".concat(componentCls, "-item-content"), {
      minHeight: token.controlHeightLG * 1.2
    }), _last)
  }), _defineProperty(_extends2, "&".concat(componentCls, "-alternate,\n        &").concat(componentCls, "-right,\n        &").concat(componentCls, "-label"), _defineProperty({}, "".concat(componentCls, "-item"), {
    '&-tail, &-head, &-head-custom': {
      insetInlineStart: '50%'
    },
    '&-head': {
      marginInlineStart: "-".concat(token.marginXXS, "px"),
      '&-custom': {
        marginInlineStart: token.timeLineItemTailWidth / 2
      }
    },
    '&-left': _defineProperty({}, "".concat(componentCls, "-item-content"), {
      insetInlineStart: "calc(50% - ".concat(token.marginXXS, "px)"),
      width: "calc(50% - ".concat(token.marginSM, "px)"),
      textAlign: 'start'
    }),
    '&-right': _defineProperty({}, "".concat(componentCls, "-item-content"), {
      width: "calc(50% - ".concat(token.marginSM, "px)"),
      margin: 0,
      textAlign: 'end'
    })
  })), _defineProperty(_extends2, "&".concat(componentCls, "-right"), _defineProperty({}, "".concat(componentCls, "-item-right"), (_$concat = {}, _defineProperty(_$concat, "".concat(componentCls, "-item-tail,\n            ").concat(componentCls, "-item-head,\n            ").concat(componentCls, "-item-head-custom"), {
    insetInlineStart: "calc(100% - ".concat(token.timeLinePaddingInlineEnd, "px)")
  }), _defineProperty(_$concat, "".concat(componentCls, "-item-content"), {
    width: "calc(100% - ".concat(token.timeLineItemHeadSize + token.marginXS, "px)")
  }), _$concat))), _defineProperty(_extends2, "&".concat(componentCls, "-pending\n        ").concat(componentCls, "-item-last\n        ").concat(componentCls, "-item-tail"), {
    display: 'block',
    height: "calc(100% - ".concat(token.margin, "px)"),
    borderInlineStart: "".concat(token.timeLineItemTailWidth, "px dotted ").concat(token.colorSplit)
  }), _defineProperty(_extends2, "&".concat(componentCls, "-reverse\n        ").concat(componentCls, "-item-last\n        ").concat(componentCls, "-item-tail"), {
    display: 'none'
  }), _defineProperty(_extends2, "&".concat(componentCls, "-reverse ").concat(componentCls, "-item-pending"), (_$concat$concat = {}, _defineProperty(_$concat$concat, "".concat(componentCls, "-item-tail"), {
    insetBlockStart: token.margin,
    display: 'block',
    height: "calc(100% - ".concat(token.margin, "px)"),
    borderInlineStart: "".concat(token.timeLineItemTailWidth, "px dotted ").concat(token.colorSplit)
  }), _defineProperty(_$concat$concat, "".concat(componentCls, "-item-content"), {
    minHeight: token.controlHeightLG * 1.2
  }), _$concat$concat)), _defineProperty(_extends2, "&".concat(componentCls, "-label"), (_$concat4 = {}, _defineProperty(_$concat4, "".concat(componentCls, "-item-label"), {
    position: 'absolute',
    insetBlockStart: -(token.fontSizeBase * token.lineHeight - token.fontSizeBase) + token.timeLineItemTailWidth,
    width: "calc(50% - ".concat(token.marginSM, "px)"),
    textAlign: 'end'
  }), _defineProperty(_$concat4, "".concat(componentCls, "-item-right"), _defineProperty({}, "".concat(componentCls, "-item-label"), {
    insetInlineStart: "calc(50% + ".concat(token.marginSM, "px)"),
    width: "calc(50% - ".concat(token.marginSM, "px)"),
    textAlign: 'start'
  })), _$concat4)), _extends2)));
}; // ============================== Export ==============================


export default genComponentStyleHook('Timeline', function (token) {
  var timeLineToken = mergeToken(token, {
    timeLineItemPaddingBottom: token.padding * 1.25,
    timeLineItemHeadSize: 10,
    timeLineItemCustomHeadPaddingVertical: token.paddingXXS,
    timeLinePaddingInlineEnd: 2,
    timeLineItemTailWidth: token.lineWidthBold,
    timeLineHeadBorderWidth: token.wireframe ? token.lineWidthBold : token.lineWidth * 3
  });
  return [genTimelineStyle(timeLineToken)];
});