mirror/ant-design
1
0
Fork 0
mirror of https://github.com/ant-design/ant-design.git synced 2025-01-18 22:36:31 +08:00
Code Issues Actions 26 Packages Projects Releases Wiki Activity

remove List.Item.Content & change List.Item.Action to List actions props (#7159)

Browse Source
This commit is contained in:
niko 2017-08-09 21:46:48 +08:00 committed by GitHub
parent 5b85d7019c
commit 5836a49899
7 changed files with 460 additions and 456 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

109
components/list/Item.tsx
View File

@ -1,17 +1,15 @@
import React from 'react';
import classNames from 'classnames';
import Icon from '../icon';
export interface ListItemProps {
className?: string;
children?: React.ReactNode;
prefixCls?: string;
style?: React.CSSProperties;
extra: React.ReactNode;
actions?: Array<React.ReactNode>;
Meta: React.ReactNode;
Content: React.ReactNode;
Action: React.ReactNode;
}
export interface ListItemMetaProps {
@ -24,21 +22,6 @@ export interface ListItemMetaProps {
title: React.ReactNode;
}
export interface ListItemContentProps {
className?: string;
children?: React.ReactNode;
prefixCls?: string;
style?: React.CSSProperties;
}
export interface ListItemActionProps {
actions: any[];
className?: string;
children?: React.ReactNode;
prefixCls?: string;
style?: React.CSSProperties;
}
export const Meta = (props: ListItemMetaProps) => {
const {
prefixCls = 'ant-list',
@ -66,56 +49,62 @@ export const Meta = (props: ListItemMetaProps) => {
);
};
export const Content = (props: ListItemContentProps) => {
const { prefixCls = 'ant-list', children, className, ...others } = props;
const classString = classNames(`${prefixCls}-item-content`, className);
return (
<div {...others} className={classString}>
{children}
</div>
);
};
export const Action = (props: ListItemActionProps) => {
const { prefixCls = 'ant-list', children, actions, className, ...others } = props;
const classString = classNames(`${prefixCls}-item-action`, className);
const actionsContent = actions && actions.map((action, i) => (
<span
key={`antd-list-item-action-${action.text}-${i}`}
className={`${prefixCls}-item-action-item`}
onClick={action.onClick || (() => {})}
>
{action.icon && <Icon type={action.icon}/>}
{action.text}
{i !== (actions.length - 1) && <em className={`${prefixCls}-item-action-item-split`}/>}
</span>
));
return (
<div {...others} className={classString}>
{actions ? actionsContent : children}
</div>
);
};
export default class Item extends React.Component<ListItemProps, any> {
static Meta: typeof Meta = Meta;
static Content: typeof Content = Content;
static Action: typeof Action = Action;
_id: number = new Date().getTime();
render() {
const { prefixCls = 'ant-list', children, extra, className, ...others } = this.props;
const { prefixCls = 'ant-list', children, actions, extra, className, ...others } = this.props;
const classString = classNames(`${prefixCls}-item`, className);
const extraContent = <div className={`${prefixCls}-item-extra-wrap`}>
<div className={`${prefixCls}-item-main`}>{children}</div>
<div className={`${prefixCls}-item-extra`}>{extra}</div>
</div>;
const metaContent: React.ReactElement<any>[] = [];
const otherContent: React.ReactElement<any>[] = [];
React.Children.forEach(children, (element: React.ReactElement<any>) => {
if (element && element.type && element.type === Meta) {
metaContent.push(element);
} else {
otherContent.push(element);
}
});
const content = (
<div className={`${prefixCls}-item-content`}>
{otherContent}
</div>
);
let actionsContent;
if (actions && actions.length > 0) {
const actionsContentItem = (action, i) => (
<li key={`${prefixCls}-item-action-${this._id}-${i}`}>
{action}
{i !== (actions.length - 1) && <em className={`${prefixCls}-item-action-split`} />}
</li>
);
actionsContent = (
<ul className={`${prefixCls}-item-action`}>
{actions.map((action, i) => actionsContentItem(action, i))}
</ul>
);
}
const extraContent = (
<div className={`${prefixCls}-item-extra-wrap`}>
<div className={`${prefixCls}-item-main`}>
{metaContent}
{content}
{actionsContent}
</div>
<div className={`${prefixCls}-item-extra`}>{extra}</div>
</div>
);
return (
<div {...others} className={classString}>
{extra ? extraContent : children}
{extra && extraContent}
{!extra && metaContent}
{!extra && content}
{!extra && actionsContent}
</div>
);
}

686
components/list/__tests__/__snapshots__/demo.test.js.snap
View File

@ -45,17 +45,23 @@ exports[`renders ./components/list/demo/basic.md correctly 1`] = `
>
Content
</div>
<div
<ul
class="ant-list-item-action"
>
<a>
edit
</a>
|
<a>
more
</a>
</div>
<li>
<a>
编辑
</a>
<em
class="ant-list-item-action-split"
/>
</li>
<li>
<a>
更多
</a>
</li>
</ul>
</div>
<div
class="ant-list-item"
@ -98,17 +104,23 @@ exports[`renders ./components/list/demo/basic.md correctly 1`] = `
>
Content
</div>
<div
<ul
class="ant-list-item-action"
>
<a>
edit
</a>
|
<a>
more
</a>
</div>
<li>
<a>
编辑
</a>
<em
class="ant-list-item-action-split"
/>
</li>
<li>
<a>
更多
</a>
</li>
</ul>
</div>
<div
class="ant-list-item"
@ -151,17 +163,23 @@ exports[`renders ./components/list/demo/basic.md correctly 1`] = `
>
Content
</div>
<div
<ul
class="ant-list-item-action"
>
<a>
edit
</a>
|
<a>
more
</a>
</div>
<li>
<a>
编辑
</a>
<em
class="ant-list-item-action-split"
/>
</li>
<li>
<a>
更多
</a>
</li>
</ul>
</div>
<div
class="ant-list-item"
@ -204,17 +222,23 @@ exports[`renders ./components/list/demo/basic.md correctly 1`] = `
>
Content
</div>
<div
<ul
class="ant-list-item-action"
>
<a>
edit
</a>
|
<a>
more
</a>
</div>
<li>
<a>
编辑
</a>
<em
class="ant-list-item-action-split"
/>
</li>
<li>
<a>
更多
</a>
</li>
</ul>
</div>
<div
class="ant-list-more"
@ -282,40 +306,43 @@ exports[`renders ./components/list/demo/vertical.md correctly 1`] = `
>
We supply a series of design principles, practical patterns and high quality design resources (Sketch and Axure), to help people create their product prototypes beautifully and efficiently.
</div>
<div
<ul
class="ant-list-item-action"
>
<span
class="ant-list-item-action-item"
>
<i
class="anticon anticon-star-o"
/>
156
<li>
<span>
<i
class="anticon anticon-star-o"
style="margin-right:8px;"
/>
156
</span>
<em
class="ant-list-item-action-item-split"
class="ant-list-item-action-split"
/>
</span>
<span
class="ant-list-item-action-item"
>
<i
class="anticon anticon-like-o"
/>
156
</li>
<li>
<span>
<i
class="anticon anticon-like-o"
style="margin-right:8px;"
/>
156
</span>
<em
class="ant-list-item-action-item-split"
class="ant-list-item-action-split"
/>
</span>
<span
class="ant-list-item-action-item"
>
<i
class="anticon anticon-message"
/>
2
</span>
</div>
</li>
<li>
<span>
<i
class="anticon anticon-message"
style="margin-right:8px;"
/>
2
</span>
</li>
</ul>
</div>
<div
class="ant-list-item-extra"
@ -375,40 +402,43 @@ exports[`renders ./components/list/demo/vertical.md correctly 1`] = `
>
We supply a series of design principles, practical patterns and high quality design resources (Sketch and Axure), to help people create their product prototypes beautifully and efficiently.
</div>
<div
<ul
class="ant-list-item-action"
>
<span
class="ant-list-item-action-item"
>
<i
class="anticon anticon-star-o"
/>
156
<li>
<span>
<i
class="anticon anticon-star-o"
style="margin-right:8px;"
/>
156
</span>
<em
class="ant-list-item-action-item-split"
class="ant-list-item-action-split"
/>
</span>
<span
class="ant-list-item-action-item"
>
<i
class="anticon anticon-like-o"
/>
156
</li>
<li>
<span>
<i
class="anticon anticon-like-o"
style="margin-right:8px;"
/>
156
</span>
<em
class="ant-list-item-action-item-split"
class="ant-list-item-action-split"
/>
</span>
<span
class="ant-list-item-action-item"
>
<i
class="anticon anticon-message"
/>
2
</span>
</div>
</li>
<li>
<span>
<i
class="anticon anticon-message"
style="margin-right:8px;"
/>
2
</span>
</li>
</ul>
</div>
<div
class="ant-list-item-extra"
@ -468,40 +498,43 @@ exports[`renders ./components/list/demo/vertical.md correctly 1`] = `
>
We supply a series of design principles, practical patterns and high quality design resources (Sketch and Axure), to help people create their product prototypes beautifully and efficiently.
</div>
<div
<ul
class="ant-list-item-action"
>
<span
class="ant-list-item-action-item"
>
<i
class="anticon anticon-star-o"
/>
156
<li>
<span>
<i
class="anticon anticon-star-o"
style="margin-right:8px;"
/>
156
</span>
<em
class="ant-list-item-action-item-split"
class="ant-list-item-action-split"
/>
</span>
<span
class="ant-list-item-action-item"
>
<i
class="anticon anticon-like-o"
/>
156
</li>
<li>
<span>
<i
class="anticon anticon-like-o"
style="margin-right:8px;"
/>
156
</span>
<em
class="ant-list-item-action-item-split"
class="ant-list-item-action-split"
/>
</span>
<span
class="ant-list-item-action-item"
>
<i
class="anticon anticon-message"
/>
2
</span>
</div>
</li>
<li>
<span>
<i
class="anticon anticon-message"
style="margin-right:8px;"
/>
2
</span>
</li>
</ul>
</div>
<div
class="ant-list-item-extra"
@ -561,40 +594,43 @@ exports[`renders ./components/list/demo/vertical.md correctly 1`] = `
>
We supply a series of design principles, practical patterns and high quality design resources (Sketch and Axure), to help people create their product prototypes beautifully and efficiently.
</div>
<div
<ul
class="ant-list-item-action"
>
<span
class="ant-list-item-action-item"
>
<i
class="anticon anticon-star-o"
/>
156
<li>
<span>
<i
class="anticon anticon-star-o"
style="margin-right:8px;"
/>
156
</span>
<em
class="ant-list-item-action-item-split"
class="ant-list-item-action-split"
/>
</span>
<span
class="ant-list-item-action-item"
>
<i
class="anticon anticon-like-o"
/>
156
</li>
<li>
<span>
<i
class="anticon anticon-like-o"
style="margin-right:8px;"
/>
156
</span>
<em
class="ant-list-item-action-item-split"
class="ant-list-item-action-split"
/>
</span>
<span
class="ant-list-item-action-item"
>
<i
class="anticon anticon-message"
/>
2
</span>
</div>
</li>
<li>
<span>
<i
class="anticon anticon-message"
style="margin-right:8px;"
/>
2
</span>
</li>
</ul>
</div>
<div
class="ant-list-item-extra"
@ -654,40 +690,43 @@ exports[`renders ./components/list/demo/vertical.md correctly 1`] = `
>
We supply a series of design principles, practical patterns and high quality design resources (Sketch and Axure), to help people create their product prototypes beautifully and efficiently.
</div>
<div
<ul
class="ant-list-item-action"
>
<span
class="ant-list-item-action-item"
>
<i
class="anticon anticon-star-o"
/>
156
<li>
<span>
<i
class="anticon anticon-star-o"
style="margin-right:8px;"
/>
156
</span>
<em
class="ant-list-item-action-item-split"
class="ant-list-item-action-split"
/>
</span>
<span
class="ant-list-item-action-item"
>
<i
class="anticon anticon-like-o"
/>
156
</li>
<li>
<span>
<i
class="anticon anticon-like-o"
style="margin-right:8px;"
/>
156
</span>
<em
class="ant-list-item-action-item-split"
class="ant-list-item-action-split"
/>
</span>
<span
class="ant-list-item-action-item"
>
<i
class="anticon anticon-message"
/>
2
</span>
</div>
</li>
<li>
<span>
<i
class="anticon anticon-message"
style="margin-right:8px;"
/>
2
</span>
</li>
</ul>
</div>
<div
class="ant-list-item-extra"
@ -747,40 +786,43 @@ exports[`renders ./components/list/demo/vertical.md correctly 1`] = `
>
We supply a series of design principles, practical patterns and high quality design resources (Sketch and Axure), to help people create their product prototypes beautifully and efficiently.
</div>
<div
<ul
class="ant-list-item-action"
>
<span
class="ant-list-item-action-item"
>
<i
class="anticon anticon-star-o"
/>
156
<li>
<span>
<i
class="anticon anticon-star-o"
style="margin-right:8px;"
/>
156
</span>
<em
class="ant-list-item-action-item-split"
class="ant-list-item-action-split"
/>
</span>
<span
class="ant-list-item-action-item"
>
<i
class="anticon anticon-like-o"
/>
156
</li>
<li>
<span>
<i
class="anticon anticon-like-o"
style="margin-right:8px;"
/>
156
</span>
<em
class="ant-list-item-action-item-split"
class="ant-list-item-action-split"
/>
</span>
<span
class="ant-list-item-action-item"
>
<i
class="anticon anticon-message"
/>
2
</span>
</div>
</li>
<li>
<span>
<i
class="anticon anticon-message"
style="margin-right:8px;"
/>
2
</span>
</li>
</ul>
</div>
<div
class="ant-list-item-extra"
@ -840,40 +882,43 @@ exports[`renders ./components/list/demo/vertical.md correctly 1`] = `
>
We supply a series of design principles, practical patterns and high quality design resources (Sketch and Axure), to help people create their product prototypes beautifully and efficiently.
</div>
<div
<ul
class="ant-list-item-action"
>
<span
class="ant-list-item-action-item"
>
<i
class="anticon anticon-star-o"
/>
156
<li>
<span>
<i
class="anticon anticon-star-o"
style="margin-right:8px;"
/>
156
</span>
<em
class="ant-list-item-action-item-split"
class="ant-list-item-action-split"
/>
</span>
<span
class="ant-list-item-action-item"
>
<i
class="anticon anticon-like-o"
/>
156
</li>
<li>
<span>
<i
class="anticon anticon-like-o"
style="margin-right:8px;"
/>
156
</span>
<em
class="ant-list-item-action-item-split"
class="ant-list-item-action-split"
/>
</span>
<span
class="ant-list-item-action-item"
>
<i
class="anticon anticon-message"
/>
2
</span>
</div>
</li>
<li>
<span>
<i
class="anticon anticon-message"
style="margin-right:8px;"
/>
2
</span>
</li>
</ul>
</div>
<div
class="ant-list-item-extra"
@ -933,40 +978,43 @@ exports[`renders ./components/list/demo/vertical.md correctly 1`] = `
>
We supply a series of design principles, practical patterns and high quality design resources (Sketch and Axure), to help people create their product prototypes beautifully and efficiently.
</div>
<div
<ul
class="ant-list-item-action"
>
<span
class="ant-list-item-action-item"
>
<i
class="anticon anticon-star-o"
/>
156
<li>
<span>
<i
class="anticon anticon-star-o"
style="margin-right:8px;"
/>
156
</span>
<em
class="ant-list-item-action-item-split"
class="ant-list-item-action-split"
/>
</span>
<span
class="ant-list-item-action-item"
>
<i
class="anticon anticon-like-o"
/>
156
</li>
<li>
<span>
<i
class="anticon anticon-like-o"
style="margin-right:8px;"
/>
156
</span>
<em
class="ant-list-item-action-item-split"
class="ant-list-item-action-split"
/>
</span>
<span
class="ant-list-item-action-item"
>
<i
class="anticon anticon-message"
/>
2
</span>
</div>
</li>
<li>
<span>
<i
class="anticon anticon-message"
style="margin-right:8px;"
/>
2
</span>
</li>
</ul>
</div>
<div
class="ant-list-item-extra"
@ -1026,40 +1074,43 @@ exports[`renders ./components/list/demo/vertical.md correctly 1`] = `
>
We supply a series of design principles, practical patterns and high quality design resources (Sketch and Axure), to help people create their product prototypes beautifully and efficiently.
</div>
<div
<ul
class="ant-list-item-action"
>
<span
class="ant-list-item-action-item"
>
<i
class="anticon anticon-star-o"
/>
156
<li>
<span>
<i
class="anticon anticon-star-o"
style="margin-right:8px;"
/>
156
</span>
<em
class="ant-list-item-action-item-split"
class="ant-list-item-action-split"
/>
</span>
<span
class="ant-list-item-action-item"
>
<i
class="anticon anticon-like-o"
/>
156
</li>
<li>
<span>
<i
class="anticon anticon-like-o"
style="margin-right:8px;"
/>
156
</span>
<em
class="ant-list-item-action-item-split"
class="ant-list-item-action-split"
/>
</span>
<span
class="ant-list-item-action-item"
>
<i
class="anticon anticon-message"
/>
2
</span>
</div>
</li>
<li>
<span>
<i
class="anticon anticon-message"
style="margin-right:8px;"
/>
2
</span>
</li>
</ul>
</div>
<div
class="ant-list-item-extra"
@ -1119,40 +1170,43 @@ exports[`renders ./components/list/demo/vertical.md correctly 1`] = `
>
We supply a series of design principles, practical patterns and high quality design resources (Sketch and Axure), to help people create their product prototypes beautifully and efficiently.
</div>
<div
<ul
class="ant-list-item-action"
>
<span
class="ant-list-item-action-item"
>
<i
class="anticon anticon-star-o"
/>
156
<li>
<span>
<i
class="anticon anticon-star-o"
style="margin-right:8px;"
/>
156
</span>
<em
class="ant-list-item-action-item-split"
class="ant-list-item-action-split"
/>
</span>
<span
class="ant-list-item-action-item"
>
<i
class="anticon anticon-like-o"
/>
156
</li>
<li>
<span>
<i
class="anticon anticon-like-o"
style="margin-right:8px;"
/>
156
</span>
<em
class="ant-list-item-action-item-split"
class="ant-list-item-action-split"
/>
</span>
<span
class="ant-list-item-action-item"
>
<i
class="anticon anticon-message"
/>
2
</span>
</div>
</li>
<li>
<span>
<i
class="anticon anticon-message"
style="margin-right:8px;"
/>
2
</span>
</li>
</ul>
</div>
<div
class="ant-list-item-extra"

36
components/list/demo/basic.md
View File

@ -22,57 +22,37 @@ ReactDOM.render(
showLoadMore
onLoadMore={() => {}}
>
<List.Item>
<List.Item actions={[<a>编辑</a>, <a>更多</a>]}>
<List.Item.Meta
avatar={<Avatar src="https://zos.alipayobjects.com/rmsportal/ODTLcjxAfvqbxHnVXCYX.png" />}
title={<a href="https://ant.design">Ant design</a>}
description="Ant Design, a design language for background applications, is refined by Ant UED Team"
/>
<List.Item.Content>
Content
</List.Item.Content>
<List.Item.Action>
<a>edit</a> | <a>more</a>
</List.Item.Action>
Content
</List.Item>
<List.Item>
<List.Item actions={[<a>编辑</a>, <a>更多</a>]}>
<List.Item.Meta
avatar={<Avatar src="https://zos.alipayobjects.com/rmsportal/ODTLcjxAfvqbxHnVXCYX.png" />}
title={<a href="https://ant.design">Ant design</a>}
description="Ant Design, a design language for background applications, is refined by Ant UED Team"
/>
<List.Item.Content>
Content
</List.Item.Content>
<List.Item.Action>
<a>edit</a> | <a>more</a>
</List.Item.Action>
Content
</List.Item>
<List.Item>
<List.Item actions={[<a>编辑</a>, <a>更多</a>]}>
<List.Item.Meta
avatar={<Avatar src="https://zos.alipayobjects.com/rmsportal/ODTLcjxAfvqbxHnVXCYX.png" />}
title={<a href="https://ant.design">Ant design</a>}
description="Ant Design, a design language for background applications, is refined by Ant UED Team"
/>
<List.Item.Content>
Content
</List.Item.Content>
<List.Item.Action>
<a>edit</a> | <a>more</a>
</List.Item.Action>
Content
</List.Item>
<List.Item>
<List.Item actions={[<a>编辑</a>, <a>更多</a>]}>
<List.Item.Meta
avatar={<Avatar src="https://zos.alipayobjects.com/rmsportal/ODTLcjxAfvqbxHnVXCYX.png" />}
title={<a href="https://ant.design">Ant design</a>}
description="Ant Design, a design language for background applications, is refined by Ant UED Team"
/>
<List.Item.Content>
Content
</List.Item.Content>
<List.Item.Action>
<a>edit</a> | <a>more</a>
</List.Item.Action>
Content
</List.Item>
</List>
, mountNode);

30
components/list/demo/vertical.md
View File

@ -14,7 +14,7 @@ title:
Basic List.
````jsx
import { List, Avatar } from 'antd';
import { List, Avatar, Icon } from 'antd';
const listData = [];
for (let i = 0; i < 10; i++) {
@ -34,12 +34,20 @@ const pagination = {
onChange: (() => {}),
};
const IconText = ({ type, text }) => (
<span>
<Icon type={type} style={{ marginRight: 8 }} />
{text}
</span>
);
ReactDOM.render(
<List itemLayout="vertical" pagination={pagination}>
{
listData.map(item => (
<List.Item
key={item.title}
actions={[<IconText type="star-o" text="156" />, <IconText type="like-o" text="156" />, <IconText type="message" text="2" />]}
extra={<img width={272} alt="logo" src="https://gw.alipayobjects.com/zos/rmsportal/mqaQswcyDLcXyDKnZfES.png" />}
>
<List.Item.Meta
@ -47,25 +55,7 @@ ReactDOM.render(
title={<a href={item.href}>{item.title}</a>}
description={item.description}
/>
<List.Item.Content>
{item.content}
</List.Item.Content>
<List.Item.Action
actions={[
{
icon: 'star-o',
text: 156,
},
{
icon: 'like-o',
text: 156,
},
{
icon: 'message',
text: 2,
},
]}
/>
{item.content}
</List.Item>
))
}

5
components/list/index.en-US.md
View File

@ -30,6 +30,7 @@ A list can be used to display content related to a single subject. The content c
| Property | Description | Type | Default |
---------|-------------|------|---------
| extra | - | string\|ReactNode | - |
| actions | - | Array<ReactNode> | - |
### List.Item.Meta
@ -39,7 +40,3 @@ A list can be used to display content related to a single subject. The content c
| title | - | string\|ReactNode | - |
| description | - | string\|ReactNode | - |
### List.Item.Action
| Property | Description | Type | Default |
---------|-------------|------|---------
| actions | - | Array | - |

14
components/list/index.zh-CN.md
View File

@ -31,6 +31,7 @@ cols: 1
| 参数 | 说明 | 类型 | 默认值 |
---------|-------------|------|---------
| extra | 额外内容, 通常用在 itemLayout 为 vertical 的情况下, 展示右侧内容; horizontal 展示在列表元素最右侧 | string\|ReactNode | - |
| actions | 列表操作组，根据 itemLayout 的不同, 位置在卡片底部或者最右侧 | Array<ReactNode> | - |
### List.Item.Meta
@ -39,16 +40,3 @@ cols: 1
| avatar | 列表元素的图标 | ReactNode | - |
| title | 列表元素的标题 | string\|ReactNode | - |
| description | 列表元素的描述内容 | string\|ReactNode | - |
### List.Item.Action
| 参数 | 说明 | 类型 | 默认值 |
---------|-------------|------|---------
| actions | 如果此参数存在, 那么会将其中的数据转换成符合标准 ant design 设计的 action 样式元素 | Array | - |
### List.Item.Action actions props
| 参数 | 说明 | 类型 | 默认值 |
|----------|----------------|----------|-----------------|
| icon | icon 图标 | string| - |
| text | 文案 | string | - |
| onClick | 点击回掉 | function | - |

36
components/list/style/index.less
View File

@ -63,31 +63,31 @@
justify-content: flex-end;
}
&-action {
font-size: 0;
flex: 0 1 auto;
margin-left: 48px;
&-item {
& > li {
display: inline-block;
color: @text-color-secondary;
cursor: pointer;
padding: 0 16px;
padding: 0 8px;
position: relative;
font-size: @font-size-base;
line-height: 22px;
i {
margin-right: 8px;
}
&-split {
background-color: @border-color-split;
margin-top: -7px;
position: absolute;
top: 50%;
right: 0;
width: 1px;
height: 14px;
}
text-align: center;
}
&-item:first-child {
& > li:first-child {
padding-left: 0;
}
&-split {
background-color: @border-color-split;
margin-top: -7px;
position: absolute;
top: 50%;
right: 0;
width: 1px;
height: 14px;
}
}
&-main {
display: flex;
@ -141,6 +141,12 @@
}
&-action {
margin-left: auto;
& > li {
padding: 0 16px;
}
& > li:first-child {
padding-left: 0;
}
}
}
}