mirror of
https://gitee.com/ant-design/ant-design.git
synced 2024-12-02 03:59:01 +08:00
fix: dark background in different container (#21299)
* fix: comment and input * fix: add @pagination-item-input-bg * feat: add @list-customize-card-bg for dark hook component * feat: add dark hook * fix: checkbox color * fix: popover-customize-border-color * fix: table * fix: style lint * fix: debug * fix: color * fix: update colors * fix: demo * feat: popover container bg use mixins utils * fix: less dark * fix: table bg in dark * fix: fixed table * fix: lint * fix: lint * feat: add @table-expand-icon-bg * fix: notification bg * fix: remove dark.md * fix: dropdown * fix: table * fix: data lint * fix: style * fix: dark less style * fix: @steps-background * fix: add thead dark style * fix: unused styles
This commit is contained in:
信鑫-King
GitHub
parent
b35498aa73
commit
c17b40ae70
@ -183,7 +183,7 @@
|
||||
// 半选状态
|
||||
.@{checkbox-prefix-cls}-indeterminate {
|
||||
.@{checkbox-inner-prefix-cls} {
|
||||
background-color: @component-background;
|
||||
background-color: @checkbox-check-bg;
|
||||
border-color: @border-color-base;
|
||||
}
|
||||
.@{checkbox-inner-prefix-cls}::after {
|
||||
|
||||
3
components/drawer/style/customize.less
Normal file
3
components/drawer/style/customize.less
Normal file
@ -0,0 +1,3 @@
|
||||
@import './index.less';
|
||||
|
||||
.popover-customize-bg(@drawer-prefix-cls, @popover-background);
|
||||
@ -1,3 +1,4 @@
|
||||
@import '../../style/themes/index';
|
||||
@import '../../style/mixins/index';
|
||||
@import './drawer';
|
||||
@import './customize';
|
||||
|
||||
@ -180,6 +180,6 @@ ReactDOM.render(<CompactDemo />, mountNode);
|
||||
|
||||
<style>
|
||||
[data-theme="dark"] .site-input-group-wrapper .site-input-split {
|
||||
background-color: #141414;
|
||||
background-color: transparent;
|
||||
}
|
||||
</style>
|
||||
|
||||
12
components/list/style/customize.less
Normal file
12
components/list/style/customize.less
Normal file
@ -0,0 +1,12 @@
|
||||
@import './index.less';
|
||||
|
||||
@card-prefix-cls: ~'@{ant-prefix}-card';
|
||||
|
||||
.@{list-prefix-cls} {
|
||||
// =================== Dard Hook Components ===================
|
||||
.@{card-prefix-cls} {
|
||||
& when (@theme = dark) {
|
||||
background: @list-customize-card-bg;
|
||||
}
|
||||
}
|
||||
}
|
||||
@ -1,5 +1,6 @@
|
||||
@import '../../style/themes/index';
|
||||
@import '../../style/mixins/index';
|
||||
@import './customize.less';
|
||||
|
||||
@list-prefix-cls: ~'@{ant-prefix}-list';
|
||||
|
||||
|
||||
592
components/modal/demo/dark.md
Normal file
592
components/modal/demo/dark.md
Normal file
@ -0,0 +1,592 @@
|
||||
---
|
||||
order: 10
|
||||
title:
|
||||
zh-CN: 暗背景
|
||||
en-US: Dark Bg
|
||||
debug: true
|
||||
---
|
||||
|
||||
## zh-CN
|
||||
|
||||
第一个对话框。
|
||||
|
||||
## en-US
|
||||
|
||||
Basic modal.
|
||||
|
||||
```jsx
|
||||
import { Modal, DatePicker, Slider, Tree, Badge, Collapse, Timeline, Tabs, Anchor, Table, Card, Button, Calendar, Transfer, Switch, Typography, Dropdown } from 'antd';
|
||||
import moment from 'moment';
|
||||
import difference from 'lodash/difference';
|
||||
import { DownOutlined, ClockCircleOutlined } from '@ant-design/icons';
|
||||
|
||||
const { Panel } = Collapse;
|
||||
const { TreeNode } = Tree;
|
||||
const { TabPane } = Tabs;
|
||||
const { Meta } = Card;
|
||||
const { Link } = Anchor;
|
||||
const { Text } = Typography;
|
||||
|
||||
const text = `
|
||||
A dog is a type of domesticated animal.
|
||||
Known for its loyalty and faithfulness,
|
||||
it can be found as a welcome guest in many households across the world.
|
||||
`;
|
||||
|
||||
const mockData = [];
|
||||
for (let i = 0; i < 20; i++) {
|
||||
mockData.push({
|
||||
key: i.toString(),
|
||||
title: `content${i + 1}`,
|
||||
description: `description of content${i + 1}`,
|
||||
disabled: i % 3 < 1,
|
||||
});
|
||||
}
|
||||
|
||||
const oriTargetKeys = mockData.filter(item => +item.key % 3 > 1).map(item => item.key);
|
||||
|
||||
const data = [
|
||||
{
|
||||
key: '1',
|
||||
name: 'John Brown',
|
||||
age: 32,
|
||||
address: 'New York No. 1 Lake Park',
|
||||
},
|
||||
{
|
||||
key: '2',
|
||||
name: 'Jim Green',
|
||||
age: 42,
|
||||
address: 'London No. 1 Lake Park',
|
||||
},
|
||||
{
|
||||
key: '3',
|
||||
name: 'Joe Black',
|
||||
age: 32,
|
||||
address: 'Sidney No. 1 Lake Park',
|
||||
},
|
||||
{
|
||||
key: '4',
|
||||
name: 'Jim Red',
|
||||
age: 32,
|
||||
address: 'London No. 2 Lake Park',
|
||||
},
|
||||
];
|
||||
|
||||
const columnsTable = [
|
||||
{
|
||||
title: 'Name',
|
||||
dataIndex: 'name',
|
||||
},
|
||||
{
|
||||
title: 'Borrow',
|
||||
dataIndex: 'borrow',
|
||||
},
|
||||
{
|
||||
title: 'Repayment',
|
||||
dataIndex: 'repayment',
|
||||
},
|
||||
];
|
||||
|
||||
const dataTable = [
|
||||
{
|
||||
key: '1',
|
||||
name: 'John Brown',
|
||||
borrow: 10,
|
||||
repayment: 33,
|
||||
},
|
||||
{
|
||||
key: '2',
|
||||
name: 'Jim Green',
|
||||
borrow: 100,
|
||||
repayment: 0,
|
||||
},
|
||||
{
|
||||
key: '3',
|
||||
name: 'Joe Black',
|
||||
borrow: 10,
|
||||
repayment: 10,
|
||||
},
|
||||
{
|
||||
key: '4',
|
||||
name: 'Jim Red',
|
||||
borrow: 75,
|
||||
repayment: 45,
|
||||
},
|
||||
];
|
||||
|
||||
const expandedRowRender = () => {
|
||||
const columnsExpand = [
|
||||
{ title: 'Date', dataIndex: 'date', key: 'date' },
|
||||
{ title: 'Name', dataIndex: 'name', key: 'name' },
|
||||
{
|
||||
title: 'Status',
|
||||
key: 'state',
|
||||
render: () => (
|
||||
<span>
|
||||
<Badge status="success" />
|
||||
Finished
|
||||
</span>
|
||||
),
|
||||
},
|
||||
{ title: 'Upgrade Status', dataIndex: 'upgradeNum', key: 'upgradeNum' },
|
||||
{
|
||||
title: 'Action',
|
||||
dataIndex: 'operation',
|
||||
key: 'operation',
|
||||
render: () => (
|
||||
<span className="table-operation">
|
||||
<a>Pause</a>
|
||||
<a>Stop</a>
|
||||
<Dropdown>
|
||||
<a>
|
||||
More <DownOutlined />
|
||||
</a>
|
||||
</Dropdown>
|
||||
</span>
|
||||
),
|
||||
},
|
||||
];
|
||||
|
||||
const dataExpand = [];
|
||||
for (let i = 0; i < 3; ++i) {
|
||||
data.push({
|
||||
key: i,
|
||||
date: '2014-12-24 23:12:00',
|
||||
name: 'This is production name',
|
||||
upgradeNum: 'Upgraded: 56',
|
||||
});
|
||||
}
|
||||
return <Table columns={columnsExpand} dataSource={dataExpand} pagination={false} />;
|
||||
};
|
||||
|
||||
const columnsNest = [
|
||||
{ title: 'Name', dataIndex: 'name', key: 'name' },
|
||||
{ title: 'Platform', dataIndex: 'platform', key: 'platform' },
|
||||
{ title: 'Version', dataIndex: 'version', key: 'version' },
|
||||
{ title: 'Upgraded', dataIndex: 'upgradeNum', key: 'upgradeNum' },
|
||||
{ title: 'Creator', dataIndex: 'creator', key: 'creator' },
|
||||
{ title: 'Date', dataIndex: 'createdAt', key: 'createdAt' },
|
||||
{ title: 'Action', key: 'operation', render: () => <a>Publish</a> },
|
||||
];
|
||||
|
||||
const dataNest = [];
|
||||
for (let i = 0; i < 3; ++i) {
|
||||
dataNest.push({
|
||||
key: i,
|
||||
name: 'Screem',
|
||||
platform: 'iOS',
|
||||
version: '10.3.4.5654',
|
||||
upgradeNum: 500,
|
||||
creator: 'Jack',
|
||||
createdAt: '2014-12-24 23:12:00',
|
||||
});
|
||||
}
|
||||
|
||||
const columnsFixed = [
|
||||
{
|
||||
title: 'Full Name',
|
||||
width: 100,
|
||||
dataIndex: 'name',
|
||||
key: 'name',
|
||||
fixed: 'left',
|
||||
},
|
||||
{
|
||||
title: 'Age',
|
||||
width: 100,
|
||||
dataIndex: 'age',
|
||||
key: 'age',
|
||||
fixed: 'left',
|
||||
},
|
||||
{ title: 'Column 1', dataIndex: 'address', key: '1' },
|
||||
{ title: 'Column 2', dataIndex: 'address', key: '2' },
|
||||
{ title: 'Column 3', dataIndex: 'address', key: '3' },
|
||||
{ title: 'Column 4', dataIndex: 'address', key: '4' },
|
||||
{ title: 'Column 5', dataIndex: 'address', key: '5' },
|
||||
{ title: 'Column 6', dataIndex: 'address', key: '6' },
|
||||
{ title: 'Column 7', dataIndex: 'address', key: '7' },
|
||||
{ title: 'Column 8', dataIndex: 'address', key: '8' },
|
||||
{
|
||||
title: 'Action',
|
||||
key: 'operation',
|
||||
fixed: 'right',
|
||||
width: 100,
|
||||
render: () => <a>action</a>,
|
||||
},
|
||||
];
|
||||
|
||||
const dataFixed = [
|
||||
{
|
||||
key: '1',
|
||||
name: 'John Brown',
|
||||
age: 32,
|
||||
address: 'New York Park',
|
||||
},
|
||||
{
|
||||
key: '2',
|
||||
name: 'Jim Green',
|
||||
age: 40,
|
||||
address: 'London Park',
|
||||
},
|
||||
];
|
||||
|
||||
const TableTransfer = ({ leftColumns, rightColumns, ...restProps }) => (
|
||||
<Transfer {...restProps} showSelectAll={false}>
|
||||
{({
|
||||
direction,
|
||||
filteredItems,
|
||||
onItemSelectAll,
|
||||
onItemSelect,
|
||||
selectedKeys: listSelectedKeys,
|
||||
disabled: listDisabled,
|
||||
}) => {
|
||||
const columns = direction === 'left' ? leftColumns : rightColumns;
|
||||
|
||||
const rowSelection = {
|
||||
getCheckboxProps: item => ({ disabled: listDisabled || item.disabled }),
|
||||
onSelectAll(selected, selectedRows) {
|
||||
const treeSelectedKeys = selectedRows
|
||||
.filter(item => !item.disabled)
|
||||
.map(({ key }) => key);
|
||||
const diffKeys = selected
|
||||
? difference(treeSelectedKeys, listSelectedKeys)
|
||||
: difference(listSelectedKeys, treeSelectedKeys);
|
||||
onItemSelectAll(diffKeys, selected);
|
||||
},
|
||||
onSelect({ key }, selected) {
|
||||
onItemSelect(key, selected);
|
||||
},
|
||||
selectedRowKeys: listSelectedKeys,
|
||||
};
|
||||
|
||||
return (
|
||||
<Table
|
||||
id="components-transfer-table"
|
||||
rowSelection={rowSelection}
|
||||
columns={columns}
|
||||
dataSource={filteredItems}
|
||||
size="small"
|
||||
style={{ pointerEvents: listDisabled ? 'none' : null }}
|
||||
onRow={({ key, disabled: itemDisabled }) => ({
|
||||
onClick: () => {
|
||||
if (itemDisabled || listDisabled) return;
|
||||
onItemSelect(key, !listSelectedKeys.includes(key));
|
||||
},
|
||||
})}
|
||||
/>
|
||||
);
|
||||
}}
|
||||
</Transfer>
|
||||
);
|
||||
|
||||
class App extends React.Component {
|
||||
state = {
|
||||
visible: false,
|
||||
targetKeys: oriTargetKeys,
|
||||
selectedKeys: [],
|
||||
disabled: false,
|
||||
showSearch: false,
|
||||
};
|
||||
|
||||
handleDisable = (disabled) => {
|
||||
this.setState({
|
||||
disabled,
|
||||
})
|
||||
}
|
||||
|
||||
handleTableTransferChange = nextTargetKeys => {
|
||||
this.setState({ targetKeys: nextTargetKeys });
|
||||
}
|
||||
|
||||
triggerDisable = disabled => {
|
||||
this.setState({ disabled });
|
||||
};
|
||||
|
||||
triggerShowSearch = showSearch => {
|
||||
this.setState({ showSearch });
|
||||
};
|
||||
|
||||
handleTransferChange = (nextTargetKeys) => {
|
||||
this.setState({ targetKeys: nextTargetKeys });
|
||||
};
|
||||
|
||||
handleTransferSelectChange = (sourceSelectedKeys, targetSelectedKeys) => {
|
||||
this.setState({ selectedKeys: [...sourceSelectedKeys, ...targetSelectedKeys] });
|
||||
};
|
||||
|
||||
showModal = () => {
|
||||
this.setState({
|
||||
visible: true,
|
||||
});
|
||||
};
|
||||
|
||||
handleOk = e => {
|
||||
console.log(e);
|
||||
this.setState({
|
||||
visible: false,
|
||||
});
|
||||
};
|
||||
|
||||
handleCancel = e => {
|
||||
console.log(e);
|
||||
this.setState({
|
||||
visible: false,
|
||||
});
|
||||
};
|
||||
|
||||
render() {
|
||||
const { disabled, selectedKeys, targetKeys, showSearch } = this.state;
|
||||
const columns = [
|
||||
{
|
||||
title: 'Name',
|
||||
dataIndex: 'name',
|
||||
key: 'name',
|
||||
filters: [
|
||||
{ text: 'Joe', value: 'Joe' },
|
||||
{ text: 'Jim', value: 'Jim' },
|
||||
],
|
||||
filteredValue: null,
|
||||
onFilter: (value, record) => record.name.includes(value),
|
||||
sorter: (a, b) => a.name.length - b.name.length,
|
||||
sortOrder: true,
|
||||
ellipsis: true,
|
||||
},
|
||||
{
|
||||
title: 'Age',
|
||||
dataIndex: 'age',
|
||||
key: 'age',
|
||||
sorter: false,
|
||||
sortOrder: true,
|
||||
ellipsis: true,
|
||||
},
|
||||
{
|
||||
title: 'Address',
|
||||
dataIndex: 'address',
|
||||
key: 'address',
|
||||
filters: [
|
||||
{ text: 'London', value: 'London' },
|
||||
{ text: 'New York', value: 'New York' },
|
||||
],
|
||||
filteredValue: null,
|
||||
onFilter: (value, record) => record.address.includes(value),
|
||||
sorter: false,
|
||||
sortOrder: true,
|
||||
ellipsis: true,
|
||||
},
|
||||
];
|
||||
return (
|
||||
<div>
|
||||
<Button type="primary" onClick={this.showModal}>
|
||||
Open Modal
|
||||
</Button>
|
||||
<Modal
|
||||
title="Basic Modal"
|
||||
visible={this.state.visible}
|
||||
onOk={this.handleOk}
|
||||
onCancel={this.handleCancel}
|
||||
>
|
||||
<Switch
|
||||
unCheckedChildren="disabled"
|
||||
checkedChildren="disabled"
|
||||
checked={disabled}
|
||||
onChange={this.handleDisable}
|
||||
style={{ marginBottom: 16 }}
|
||||
/>
|
||||
<Card title="Card Title">
|
||||
<Card.Grid>Content</Card.Grid>
|
||||
<Card.Grid hoverable={false}>
|
||||
Content
|
||||
</Card.Grid>
|
||||
<Card.Grid>Content</Card.Grid>
|
||||
<Card.Grid>Content</Card.Grid>
|
||||
<Card.Grid>Content</Card.Grid>
|
||||
<Card.Grid>Content</Card.Grid>
|
||||
<Card.Grid>Content</Card.Grid>
|
||||
</Card>
|
||||
<Collapse>
|
||||
<Panel header="This is panel header 1" key="1">
|
||||
<Collapse defaultActiveKey="1">
|
||||
<Panel header="This is panel nest panel" key="1">
|
||||
<p>{text}</p>
|
||||
</Panel>
|
||||
</Collapse>
|
||||
</Panel>
|
||||
<Panel header="This is panel header 2" key="2">
|
||||
<p>{text}</p>
|
||||
</Panel>
|
||||
<Panel header="This is panel header 3" key="3">
|
||||
<p>{text}</p>
|
||||
</Panel>
|
||||
</Collapse>
|
||||
<Transfer
|
||||
dataSource={mockData}
|
||||
titles={['Source', 'Target']}
|
||||
targetKeys={targetKeys}
|
||||
selectedKeys={selectedKeys}
|
||||
onChange={this.handleTransferChange}
|
||||
onSelectChange={this.handleTransferSelectChange}
|
||||
render={item => item.title}
|
||||
disabled={disabled}
|
||||
/>
|
||||
<TableTransfer
|
||||
dataSource={mockData}
|
||||
targetKeys={targetKeys}
|
||||
disabled={disabled}
|
||||
showSearch={showSearch}
|
||||
onChange={this.handleTableTransferChange}
|
||||
filterOption={(inputValue, item) =>
|
||||
item.title.indexOf(inputValue) !== -1 || item.tag.indexOf(inputValue) !== -1
|
||||
}
|
||||
leftColumns={[
|
||||
{
|
||||
dataIndex: 'title',
|
||||
title: 'Name',
|
||||
},
|
||||
{
|
||||
dataIndex: 'description',
|
||||
title: 'Description',
|
||||
},
|
||||
]}
|
||||
rightColumns={[
|
||||
{
|
||||
dataIndex: 'title',
|
||||
title: 'Name',
|
||||
},
|
||||
]}
|
||||
/>
|
||||
<Switch
|
||||
unCheckedChildren="disabled"
|
||||
checkedChildren="disabled"
|
||||
checked={disabled}
|
||||
onChange={this.triggerDisable}
|
||||
style={{ marginTop: 16 }}
|
||||
/>
|
||||
<Switch
|
||||
unCheckedChildren="showSearch"
|
||||
checkedChildren="showSearch"
|
||||
checked={showSearch}
|
||||
onChange={this.triggerShowSearch}
|
||||
style={{ marginTop: 16 }}
|
||||
/>
|
||||
<Anchor>
|
||||
<Link href="#components-anchor-demo-basic" title="Basic demo" />
|
||||
<Link href="#components-anchor-demo-static" title="Static demo" />
|
||||
<Link href="#components-anchor-demo-basic" title="Basic demo with Target" target="_blank" />
|
||||
<Link href="#API" title="API">
|
||||
<Link href="#Anchor-Props" title="Anchor Props" />
|
||||
<Link href="#Link-Props" title="Link Props" />
|
||||
</Link>
|
||||
</Anchor>
|
||||
<Tabs type="card">
|
||||
<TabPane tab="Tab 1" key="1">
|
||||
Content of Tab Pane 1
|
||||
</TabPane>
|
||||
<TabPane tab="Tab 2" key="2">
|
||||
Content of Tab Pane 2
|
||||
</TabPane>
|
||||
<TabPane tab="Tab 3" key="3">
|
||||
Content of Tab Pane 3
|
||||
</TabPane>
|
||||
</Tabs>
|
||||
<Timeline>
|
||||
<Timeline.Item>Create a services site 2015-09-01</Timeline.Item>
|
||||
<Timeline.Item>Solve initial network problems 2015-09-01</Timeline.Item>
|
||||
<Timeline.Item dot={<ClockCircleOutlined style={{ fontSize: '16px' }} />} color="red">
|
||||
Technical testing 2015-09-01
|
||||
</Timeline.Item>
|
||||
<Timeline.Item>Network problems being solved 2015-09-01</Timeline.Item>
|
||||
</Timeline>
|
||||
<Calendar />
|
||||
<Tree
|
||||
showLine
|
||||
switcherIcon={<DownOutlined />}
|
||||
defaultExpandedKeys={['0-0-0']}
|
||||
>
|
||||
<TreeNode title="parent 1" key="0-0">
|
||||
<TreeNode title="parent 1-0" key="0-0-0">
|
||||
<TreeNode title="leaf" key="0-0-0-0" />
|
||||
<TreeNode title="leaf" key="0-0-0-1" />
|
||||
<TreeNode title="leaf" key="0-0-0-2" />
|
||||
</TreeNode>
|
||||
<TreeNode title="parent 1-1" key="0-0-1">
|
||||
<TreeNode title="leaf" key="0-0-1-0" />
|
||||
</TreeNode>
|
||||
<TreeNode title="parent 1-2" key="0-0-2">
|
||||
<TreeNode title="leaf" key="0-0-2-0" />
|
||||
<TreeNode title="leaf" key="0-0-2-1" />
|
||||
</TreeNode>
|
||||
</TreeNode>
|
||||
</Tree>
|
||||
<Table columns={columns} dataSource={data} footer={() => 'Footer'} />
|
||||
<Table
|
||||
columns={columnsTable}
|
||||
dataSource={dataTable}
|
||||
pagination={false}
|
||||
id="table-demo-summary"
|
||||
bordered
|
||||
summary={pageData => {
|
||||
let totalBorrow = 0;
|
||||
let totalRepayment = 0;
|
||||
|
||||
pageData.forEach(({ borrow, repayment }) => {
|
||||
totalBorrow += borrow;
|
||||
totalRepayment += repayment;
|
||||
});
|
||||
|
||||
return (
|
||||
<>
|
||||
<tr>
|
||||
<th>Total</th>
|
||||
<td>
|
||||
<Text type="danger">{totalBorrow}</Text>
|
||||
</td>
|
||||
<td>
|
||||
<Text>{totalRepayment}</Text>
|
||||
</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<th>Balance</th>
|
||||
<td colSpan={2}>
|
||||
<Text type="danger">{totalBorrow - totalRepayment}</Text>
|
||||
</td>
|
||||
</tr>
|
||||
</>
|
||||
);
|
||||
}}
|
||||
/>
|
||||
<br />
|
||||
<Table
|
||||
columns={columnsNest}
|
||||
expandable={{ expandedRowRender }}
|
||||
dataSource={dataNest}
|
||||
/>
|
||||
<Table columns={columnsFixed} dataSource={dataFixed} scroll={{ x: 1300, y: 100 }} />
|
||||
<Card
|
||||
hoverable
|
||||
style={{ width: 240 }}
|
||||
cover={<img alt="example" src="https://os.alipayobjects.com/rmsportal/QBnOOoLaAfKPirc.png" />}
|
||||
>
|
||||
<Meta title="Europe Street beat" description="www.instagram.com" />
|
||||
</Card>
|
||||
<Slider defaultValue={30} />
|
||||
<DatePicker defaultValue={moment('2015/01/01', 'YYYY/MM/DD')} format="YYYY/MM/DD" />
|
||||
<Badge count={5}>
|
||||
<a href="#" className="head-example" />
|
||||
</Badge>
|
||||
</Modal>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
}
|
||||
|
||||
ReactDOM.render(<App />, mountNode);
|
||||
```
|
||||
|
||||
<style>
|
||||
[data-theme="dark"] #table-demo-summary tfoot th,
|
||||
[data-theme="dark"] #table-demo-summary tfoot td {
|
||||
background: #272727;
|
||||
}
|
||||
[data-theme="dark"] #components-transfer-table.ant-table td {
|
||||
background: transparent;
|
||||
}
|
||||
</style>
|
||||
3
components/modal/style/customize.less
Normal file
3
components/modal/style/customize.less
Normal file
@ -0,0 +1,3 @@
|
||||
@import './index.less';
|
||||
|
||||
.popover-customize-bg(@dialog-prefix-cls, @popover-background);
|
||||
@ -2,3 +2,4 @@
|
||||
@import '../../style/mixins/index';
|
||||
@import './modal';
|
||||
@import './confirm';
|
||||
@import './customize.less';
|
||||
|
||||
3
components/notification/style/customize.less
Normal file
3
components/notification/style/customize.less
Normal file
@ -0,0 +1,3 @@
|
||||
@import './index.less';
|
||||
|
||||
.popover-customize-bg(@notification-prefix-cls, @popover-background);
|
||||
@ -1,5 +1,6 @@
|
||||
@import '../../style/themes/index';
|
||||
@import '../../style/mixins/index';
|
||||
@import './customize.less';
|
||||
|
||||
@notification-prefix-cls: ~'@{ant-prefix}-notification';
|
||||
@notification-width: 384px;
|
||||
|
||||
@ -297,7 +297,7 @@
|
||||
margin-right: 8px;
|
||||
padding: 0 6px;
|
||||
text-align: center;
|
||||
background-color: @component-background;
|
||||
background-color: @pagination-item-input-bg;
|
||||
border: @border-width-base @border-style-base @border-color-base;
|
||||
border-radius: @border-radius-base;
|
||||
outline: none;
|
||||
|
||||
3
components/popover/style/customize.less
Normal file
3
components/popover/style/customize.less
Normal file
@ -0,0 +1,3 @@
|
||||
@import './index.less';
|
||||
|
||||
.popover-customize-bg(@popover-prefix-cls, @popover-background);
|
||||
@ -18,7 +18,6 @@
|
||||
@error-title-color: @error-color;
|
||||
@error-description-color: @error-color;
|
||||
@error-tail-color: @wait-tail-color;
|
||||
@steps-background: @component-background;
|
||||
@steps-nav-active-color: @primary-color;
|
||||
|
||||
@steps-icon-size: 32px;
|
||||
|
||||
170
components/style/mixins/customize.less
Normal file
170
components/style/mixins/customize.less
Normal file
@ -0,0 +1,170 @@
|
||||
// customize dark components background in popover containers(like Modal, Drawer, Card, Popover, Popconfirm, Notification, ...)
|
||||
// for dark theme
|
||||
.popover-customize-bg(@containerClass, @background: @popover-background, @prefix: @ant-prefix) when (@theme = dark) {
|
||||
@picker-prefix-cls: ~'@{prefix}-picker';
|
||||
@slider-prefix-cls: ~'@{prefix}-slider';
|
||||
@anchor-prefix-cls: ~'@{prefix}-anchor';
|
||||
@collapse-prefix-cls: ~'@{prefix}-collapse';
|
||||
@tab-prefix-cls: ~'@{prefix}-tabs';
|
||||
@timeline-prefix-cls: ~'@{prefix}-timeline';
|
||||
@tree-prefix-cls: ~'@{prefix}-tree';
|
||||
@card-prefix-cls: ~'@{prefix}-card';
|
||||
@badge-prefix-cls: ~'@{prefix}-badge';
|
||||
@transfer-prefix-cls: ~'@{prefix}-transfer';
|
||||
@calendar-prefix-cls: ~'@{prefix}-picker-calendar';
|
||||
@calendar-picker-prefix-cls: ~'@{prefix}-picker';
|
||||
@table-prefix-cls: ~'@{prefix}-table';
|
||||
|
||||
@popover-border: @border-width-base @border-style-base @popover-customize-border-color;
|
||||
|
||||
.@{containerClass} {
|
||||
.@{picker-prefix-cls}-clear, .@{slider-prefix-cls}-handle, .@{anchor-prefix-cls}-wrapper, .@{collapse-prefix-cls}-content, .@{timeline-prefix-cls}-item-head, .@{card-prefix-cls} {
|
||||
background-color: @background;
|
||||
}
|
||||
|
||||
.@{transfer-prefix-cls} {
|
||||
&-list {
|
||||
&-header {
|
||||
background: @background;
|
||||
border-bottom: @popover-border;
|
||||
}
|
||||
&-content-item:not(.@{transfer-prefix-cls}-list-content-item-disabled):hover {
|
||||
background-color: @item-hover-bg;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
tr.@{table-prefix-cls}-expanded-row {
|
||||
&,
|
||||
&:hover {
|
||||
> td {
|
||||
background: #272727;
|
||||
}
|
||||
}
|
||||
}
|
||||
.@{table-prefix-cls}.@{table-prefix-cls}-small {
|
||||
thead {
|
||||
> tr {
|
||||
> th {
|
||||
background-color: @background;
|
||||
border-bottom: @popover-border;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
.@{table-prefix-cls} {
|
||||
background-color: @background;
|
||||
.@{table-prefix-cls}-row-expand-icon {
|
||||
border: @popover-border;
|
||||
}
|
||||
tfoot {
|
||||
> tr {
|
||||
> th,
|
||||
> td {
|
||||
border-bottom: @popover-border;
|
||||
}
|
||||
}
|
||||
}
|
||||
thead {
|
||||
> tr {
|
||||
> th {
|
||||
background-color: #272727;
|
||||
border-bottom: @popover-border;
|
||||
}
|
||||
}
|
||||
}
|
||||
tbody {
|
||||
> tr {
|
||||
> td {
|
||||
border-bottom: @popover-border;
|
||||
&.@{table-prefix-cls}-cell-fix-left, &.@{table-prefix-cls}-cell-fix-right {
|
||||
background-color: @background;
|
||||
}
|
||||
}
|
||||
&.@{table-prefix-cls}-row:hover {
|
||||
> td {
|
||||
background: @table-header-sort-active-bg;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
&.@{table-prefix-cls}-bordered {
|
||||
.@{table-prefix-cls}-title {
|
||||
border: @popover-border;
|
||||
}
|
||||
|
||||
// ============================= Cell =============================
|
||||
thead > tr > th,
|
||||
tbody > tr > td,
|
||||
tfoot > tr > th,
|
||||
tfoot > tr > td {
|
||||
border-right: @popover-border;
|
||||
}
|
||||
|
||||
// Fixed right should provides additional border
|
||||
.@{table-prefix-cls}-cell-fix-right-first::after {
|
||||
border-right: @popover-border;
|
||||
}
|
||||
|
||||
// ============================ Header ============================
|
||||
table > {
|
||||
thead {
|
||||
> tr:not(:last-child) > th {
|
||||
border-bottom: @border-width-base @border-style-base @border-color-split;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
// =========================== Content ============================
|
||||
.@{table-prefix-cls}-container {
|
||||
border: @popover-border;
|
||||
}
|
||||
|
||||
// ========================== Expandable ==========================
|
||||
.@{table-prefix-cls}-expanded-row-fixed {
|
||||
&::after {
|
||||
border-right: @popover-border;
|
||||
}
|
||||
}
|
||||
|
||||
.@{table-prefix-cls}-footer {
|
||||
border: @popover-border;
|
||||
}
|
||||
}
|
||||
.@{table-prefix-cls}-filter-trigger-container-open {
|
||||
background-color: #525252;
|
||||
}
|
||||
}
|
||||
|
||||
.@{calendar-prefix-cls}-full {
|
||||
background-color: @background;
|
||||
.@{calendar-picker-prefix-cls}-panel {
|
||||
background-color: @background;
|
||||
.@{calendar-prefix-cls}-date {
|
||||
border-top: 2px solid @popover-customize-border-color;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.@{tab-prefix-cls} {
|
||||
&.@{tab-prefix-cls}-card .@{tab-prefix-cls}-card-bar .@{tab-prefix-cls}-tab-active {
|
||||
background-color: @background;
|
||||
border-bottom: @border-width-base solid @background;
|
||||
}
|
||||
}
|
||||
|
||||
.@{badge-prefix-cls} {
|
||||
&-count {
|
||||
box-shadow: 0 0 0 1px @background;
|
||||
}
|
||||
}
|
||||
|
||||
.@{tree-prefix-cls} {
|
||||
&-show-line {
|
||||
.@{tree-prefix-cls}-switcher {
|
||||
background: @background;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
@ -8,3 +8,4 @@
|
||||
@import 'reset';
|
||||
@import 'operation-unit';
|
||||
@import 'typography';
|
||||
@import 'customize';
|
||||
|
||||
@ -8,10 +8,10 @@
|
||||
@blue-4: mix(@blue-base, @component-background, 45%);
|
||||
@blue-5: mix(@blue-base, @component-background, 65%);
|
||||
@blue-6: mix(@blue-base, @component-background, 85%);
|
||||
@blue-7: mix(color(~`colorPalette('@{blue-base}', 5) `), @component-background, 85%);
|
||||
@blue-7: mix(color(~`colorPalette('@{blue-base}', 5) `), @component-background, 90%);
|
||||
@blue-8: mix(color(~`colorPalette('@{blue-base}', 4) `), @component-background, 95%);
|
||||
@blue-9: mix(color(~`colorPalette('@{blue-base}', 3) `), @component-background, 95%);
|
||||
@blue-10: mix(color(~`colorPalette('@{blue-base}', 2) `), @component-background, 95%);
|
||||
@blue-9: mix(color(~`colorPalette('@{blue-base}', 3) `), @component-background, 97%);
|
||||
@blue-10: mix(color(~`colorPalette('@{blue-base}', 2) `), @component-background, 98%);
|
||||
|
||||
@purple-1: mix(color(~`colorPalette('@{purple-base}', 8) `), @component-background, 15%);
|
||||
@purple-2: mix(color(~`colorPalette('@{purple-base}', 7) `), @component-background, 25%);
|
||||
@ -19,10 +19,10 @@
|
||||
@purple-4: mix(@purple-base, @component-background, 45%);
|
||||
@purple-5: mix(@purple-base, @component-background, 65%);
|
||||
@purple-6: mix(@purple-base, @component-background, 85%);
|
||||
@purple-7: mix(color(~`colorPalette('@{purple-base}', 5) `), @component-background, 85%);
|
||||
@purple-7: mix(color(~`colorPalette('@{purple-base}', 5) `), @component-background, 90%);
|
||||
@purple-8: mix(color(~`colorPalette('@{purple-base}', 4) `), @component-background, 95%);
|
||||
@purple-9: mix(color(~`colorPalette('@{purple-base}', 3) `), @component-background, 95%);
|
||||
@purple-10: mix(color(~`colorPalette('@{purple-base}', 2) `), @component-background, 95%);
|
||||
@purple-9: mix(color(~`colorPalette('@{purple-base}', 3) `), @component-background, 97%);
|
||||
@purple-10: mix(color(~`colorPalette('@{purple-base}', 2) `), @component-background, 98%);
|
||||
|
||||
@cyan-1: mix(color(~`colorPalette('@{cyan-base}', 8) `), @component-background, 15%);
|
||||
@cyan-2: mix(color(~`colorPalette('@{cyan-base}', 7) `), @component-background, 25%);
|
||||
@ -30,10 +30,10 @@
|
||||
@cyan-4: mix(@cyan-base, @component-background, 45%);
|
||||
@cyan-5: mix(@cyan-base, @component-background, 65%);
|
||||
@cyan-6: mix(@cyan-base, @component-background, 85%);
|
||||
@cyan-7: mix(color(~`colorPalette('@{cyan-base}', 5) `), @component-background, 85%);
|
||||
@cyan-7: mix(color(~`colorPalette('@{cyan-base}', 5) `), @component-background, 90%);
|
||||
@cyan-8: mix(color(~`colorPalette('@{cyan-base}', 4) `), @component-background, 95%);
|
||||
@cyan-9: mix(color(~`colorPalette('@{cyan-base}', 3) `), @component-background, 95%);
|
||||
@cyan-10: mix(color(~`colorPalette('@{cyan-base}', 2) `), @component-background, 95%);
|
||||
@cyan-9: mix(color(~`colorPalette('@{cyan-base}', 3) `), @component-background, 97%);
|
||||
@cyan-10: mix(color(~`colorPalette('@{cyan-base}', 2) `), @component-background, 98%);
|
||||
|
||||
@green-1: mix(color(~`colorPalette('@{green-base}', 8) `), @component-background, 15%);
|
||||
@green-2: mix(color(~`colorPalette('@{green-base}', 7) `), @component-background, 25%);
|
||||
@ -41,10 +41,10 @@
|
||||
@green-4: mix(@green-base, @component-background, 45%);
|
||||
@green-5: mix(@green-base, @component-background, 65%);
|
||||
@green-6: mix(@green-base, @component-background, 85%);
|
||||
@green-7: mix(color(~`colorPalette('@{green-base}', 5) `), @component-background, 85%);
|
||||
@green-7: mix(color(~`colorPalette('@{green-base}', 5) `), @component-background, 90%);
|
||||
@green-8: mix(color(~`colorPalette('@{green-base}', 4) `), @component-background, 95%);
|
||||
@green-9: mix(color(~`colorPalette('@{green-base}', 3) `), @component-background, 95%);
|
||||
@green-10: mix(color(~`colorPalette('@{green-base}', 2) `), @component-background, 95%);
|
||||
@green-9: mix(color(~`colorPalette('@{green-base}', 3) `), @component-background, 97%);
|
||||
@green-10: mix(color(~`colorPalette('@{green-base}', 2) `), @component-background, 98%);
|
||||
|
||||
@magenta-1: mix(color(~`colorPalette('@{magenta-base}', 8) `), @component-background, 15%);
|
||||
@magenta-2: mix(color(~`colorPalette('@{magenta-base}', 7) `), @component-background, 25%);
|
||||
@ -52,10 +52,10 @@
|
||||
@magenta-4: mix(@magenta-base, @component-background, 45%);
|
||||
@magenta-5: mix(@magenta-base, @component-background, 65%);
|
||||
@magenta-6: mix(@magenta-base, @component-background, 85%);
|
||||
@magenta-7: mix(color(~`colorPalette('@{magenta-base}', 5) `), @component-background, 85%);
|
||||
@magenta-7: mix(color(~`colorPalette('@{magenta-base}', 5) `), @component-background, 90%);
|
||||
@magenta-8: mix(color(~`colorPalette('@{magenta-base}', 4) `), @component-background, 95%);
|
||||
@magenta-9: mix(color(~`colorPalette('@{magenta-base}', 3) `), @component-background, 95%);
|
||||
@magenta-10: mix(color(~`colorPalette('@{magenta-base}', 2) `), @component-background, 95%);
|
||||
@magenta-9: mix(color(~`colorPalette('@{magenta-base}', 3) `), @component-background, 97%);
|
||||
@magenta-10: mix(color(~`colorPalette('@{magenta-base}', 2) `), @component-background, 98%);
|
||||
|
||||
@pink-1: mix(color(~`colorPalette('@{pink-base}', 8) `), @component-background, 15%);
|
||||
@pink-2: mix(color(~`colorPalette('@{pink-base}', 7) `), @component-background, 25%);
|
||||
@ -63,10 +63,10 @@
|
||||
@pink-4: mix(@pink-base, @component-background, 45%);
|
||||
@pink-5: mix(@pink-base, @component-background, 65%);
|
||||
@pink-6: mix(@pink-base, @component-background, 85%);
|
||||
@pink-7: mix(color(~`colorPalette('@{pink-base}', 5) `), @component-background, 85%);
|
||||
@pink-7: mix(color(~`colorPalette('@{pink-base}', 5) `), @component-background, 90%);
|
||||
@pink-8: mix(color(~`colorPalette('@{pink-base}', 4) `), @component-background, 95%);
|
||||
@pink-9: mix(color(~`colorPalette('@{pink-base}', 3) `), @component-background, 95%);
|
||||
@pink-10: mix(color(~`colorPalette('@{pink-base}', 2) `), @component-background, 95%);
|
||||
@pink-9: mix(color(~`colorPalette('@{pink-base}', 3) `), @component-background, 97%);
|
||||
@pink-10: mix(color(~`colorPalette('@{pink-base}', 2) `), @component-background, 98%);
|
||||
|
||||
@red-1: mix(color(~`colorPalette('@{red-base}', 8) `), @component-background, 15%);
|
||||
@red-2: mix(color(~`colorPalette('@{red-base}', 7) `), @component-background, 25%);
|
||||
@ -74,10 +74,10 @@
|
||||
@red-4: mix(@red-base, @component-background, 45%);
|
||||
@red-5: mix(@red-base, @component-background, 65%);
|
||||
@red-6: mix(@red-base, @component-background, 85%);
|
||||
@red-7: mix(color(~`colorPalette('@{red-base}', 5) `), @component-background, 85%);
|
||||
@red-7: mix(color(~`colorPalette('@{red-base}', 5) `), @component-background, 90%);
|
||||
@red-8: mix(color(~`colorPalette('@{red-base}', 4) `), @component-background, 95%);
|
||||
@red-9: mix(color(~`colorPalette('@{red-base}', 3) `), @component-background, 95%);
|
||||
@red-10: mix(color(~`colorPalette('@{red-base}', 2) `), @component-background, 95%);
|
||||
@red-9: mix(color(~`colorPalette('@{red-base}', 3) `), @component-background, 97%);
|
||||
@red-10: mix(color(~`colorPalette('@{red-base}', 2) `), @component-background, 98%);
|
||||
|
||||
@orange-1: mix(color(~`colorPalette('@{orange-base}', 8) `), @component-background, 15%);
|
||||
@orange-2: mix(color(~`colorPalette('@{orange-base}', 7) `), @component-background, 25%);
|
||||
@ -85,10 +85,10 @@
|
||||
@orange-4: mix(@orange-base, @component-background, 45%);
|
||||
@orange-5: mix(@orange-base, @component-background, 65%);
|
||||
@orange-6: mix(@orange-base, @component-background, 85%);
|
||||
@orange-7: mix(color(~`colorPalette('@{orange-base}', 5) `), @component-background, 85%);
|
||||
@orange-7: mix(color(~`colorPalette('@{orange-base}', 5) `), @component-background, 90%);
|
||||
@orange-8: mix(color(~`colorPalette('@{orange-base}', 4) `), @component-background, 95%);
|
||||
@orange-9: mix(color(~`colorPalette('@{orange-base}', 3) `), @component-background, 95%);
|
||||
@orange-10: mix(color(~`colorPalette('@{orange-base}', 2) `), @component-background, 95%);
|
||||
@orange-9: mix(color(~`colorPalette('@{orange-base}', 3) `), @component-background, 97%);
|
||||
@orange-10: mix(color(~`colorPalette('@{orange-base}', 2) `), @component-background, 98%);
|
||||
|
||||
@yellow-1: mix(color(~`colorPalette('@{yellow-base}', 8) `), @component-background, 15%);
|
||||
@yellow-2: mix(color(~`colorPalette('@{yellow-base}', 7) `), @component-background, 25%);
|
||||
@ -96,10 +96,10 @@
|
||||
@yellow-4: mix(@yellow-base, @component-background, 45%);
|
||||
@yellow-5: mix(@yellow-base, @component-background, 65%);
|
||||
@yellow-6: mix(@yellow-base, @component-background, 85%);
|
||||
@yellow-7: mix(color(~`colorPalette('@{yellow-base}', 5) `), @component-background, 85%);
|
||||
@yellow-7: mix(color(~`colorPalette('@{yellow-base}', 5) `), @component-background, 90%);
|
||||
@yellow-8: mix(color(~`colorPalette('@{yellow-base}', 4) `), @component-background, 95%);
|
||||
@yellow-9: mix(color(~`colorPalette('@{yellow-base}', 3) `), @component-background, 95%);
|
||||
@yellow-10: mix(color(~`colorPalette('@{yellow-base}', 2) `), @component-background, 95%);
|
||||
@yellow-9: mix(color(~`colorPalette('@{yellow-base}', 3) `), @component-background, 97%);
|
||||
@yellow-10: mix(color(~`colorPalette('@{yellow-base}', 2) `), @component-background, 98%);
|
||||
|
||||
@volcano-1: mix(color(~`colorPalette('@{volcano-base}', 8) `), @component-background, 15%);
|
||||
@volcano-2: mix(color(~`colorPalette('@{volcano-base}', 7) `), @component-background, 25%);
|
||||
@ -107,10 +107,10 @@
|
||||
@volcano-4: mix(@volcano-base, @component-background, 45%);
|
||||
@volcano-5: mix(@volcano-base, @component-background, 65%);
|
||||
@volcano-6: mix(@volcano-base, @component-background, 85%);
|
||||
@volcano-7: mix(color(~`colorPalette('@{volcano-base}', 5) `), @component-background, 85%);
|
||||
@volcano-7: mix(color(~`colorPalette('@{volcano-base}', 5) `), @component-background, 90%);
|
||||
@volcano-8: mix(color(~`colorPalette('@{volcano-base}', 4) `), @component-background, 95%);
|
||||
@volcano-9: mix(color(~`colorPalette('@{volcano-base}', 3) `), @component-background, 95%);
|
||||
@volcano-10: mix(color(~`colorPalette('@{volcano-base}', 2) `), @component-background, 95%);
|
||||
@volcano-9: mix(color(~`colorPalette('@{volcano-base}', 3) `), @component-background, 97%);
|
||||
@volcano-10: mix(color(~`colorPalette('@{volcano-base}', 2) `), @component-background, 98%);
|
||||
|
||||
@geekblue-1: mix(color(~`colorPalette('@{geekblue-base}', 8) `), @component-background, 15%);
|
||||
@geekblue-2: mix(color(~`colorPalette('@{geekblue-base}', 7) `), @component-background, 25%);
|
||||
@ -118,10 +118,10 @@
|
||||
@geekblue-4: mix(@geekblue-base, @component-background, 45%);
|
||||
@geekblue-5: mix(@geekblue-base, @component-background, 65%);
|
||||
@geekblue-6: mix(@geekblue-base, @component-background, 85%);
|
||||
@geekblue-7: mix(color(~`colorPalette('@{geekblue-base}', 5) `), @component-background, 85%);
|
||||
@geekblue-7: mix(color(~`colorPalette('@{geekblue-base}', 5) `), @component-background, 90%);
|
||||
@geekblue-8: mix(color(~`colorPalette('@{geekblue-base}', 4) `), @component-background, 95%);
|
||||
@geekblue-9: mix(color(~`colorPalette('@{geekblue-base}', 3) `), @component-background, 95%);
|
||||
@geekblue-10: mix(color(~`colorPalette('@{geekblue-base}', 2) `), @component-background, 95%);
|
||||
@geekblue-9: mix(color(~`colorPalette('@{geekblue-base}', 3) `), @component-background, 97%);
|
||||
@geekblue-10: mix(color(~`colorPalette('@{geekblue-base}', 2) `), @component-background, 98%);
|
||||
|
||||
@lime-1: mix(color(~`colorPalette('@{lime-base}', 8) `), @component-background, 15%);
|
||||
@lime-2: mix(color(~`colorPalette('@{lime-base}', 7) `), @component-background, 25%);
|
||||
@ -129,10 +129,10 @@
|
||||
@lime-4: mix(@lime-base, @component-background, 45%);
|
||||
@lime-5: mix(@lime-base, @component-background, 65%);
|
||||
@lime-6: mix(@lime-base, @component-background, 85%);
|
||||
@lime-7: mix(color(~`colorPalette('@{lime-base}', 5) `), @component-background, 85%);
|
||||
@lime-7: mix(color(~`colorPalette('@{lime-base}', 5) `), @component-background, 90%);
|
||||
@lime-8: mix(color(~`colorPalette('@{lime-base}', 4) `), @component-background, 95%);
|
||||
@lime-9: mix(color(~`colorPalette('@{lime-base}', 3) `), @component-background, 95%);
|
||||
@lime-10: mix(color(~`colorPalette('@{lime-base}', 2) `), @component-background, 95%);
|
||||
@lime-9: mix(color(~`colorPalette('@{lime-base}', 3) `), @component-background, 97%);
|
||||
@lime-10: mix(color(~`colorPalette('@{lime-base}', 2) `), @component-background, 98%);
|
||||
|
||||
@gold-1: mix(color(~`colorPalette('@{gold-base}', 8) `), @component-background, 15%);
|
||||
@gold-2: mix(color(~`colorPalette('@{gold-base}', 7) `), @component-background, 25%);
|
||||
@ -140,10 +140,10 @@
|
||||
@gold-4: mix(@gold-base, @component-background, 45%);
|
||||
@gold-5: mix(@gold-base, @component-background, 65%);
|
||||
@gold-6: mix(@gold-base, @component-background, 85%);
|
||||
@gold-7: mix(color(~`colorPalette('@{gold-base}', 5) `), @component-background, 85%);
|
||||
@gold-7: mix(color(~`colorPalette('@{gold-base}', 5) `), @component-background, 90%);
|
||||
@gold-8: mix(color(~`colorPalette('@{gold-base}', 4) `), @component-background, 95%);
|
||||
@gold-9: mix(color(~`colorPalette('@{gold-base}', 3) `), @component-background, 95%);
|
||||
@gold-10: mix(color(~`colorPalette('@{gold-base}', 2) `), @component-background, 95%);
|
||||
@gold-9: mix(color(~`colorPalette('@{gold-base}', 3) `), @component-background, 97%);
|
||||
@gold-10: mix(color(~`colorPalette('@{gold-base}', 2) `), @component-background, 98%);
|
||||
|
||||
// Color used by default to control hover and active backgrounds and for
|
||||
// alert info backgrounds.
|
||||
@ -153,13 +153,14 @@
|
||||
@primary-4: mix(@primary-color, @component-background, 45%);
|
||||
@primary-5: mix(@primary-color, @component-background, 65%);
|
||||
@primary-6: @primary-color;
|
||||
@primary-7: mix(color(~`colorPalette('@{primary-color}', 5) `), @component-background, 85%);
|
||||
@primary-7: mix(color(~`colorPalette('@{primary-color}', 5) `), @component-background, 90%);
|
||||
@primary-8: mix(color(~`colorPalette('@{primary-color}', 4) `), @component-background, 95%);
|
||||
@primary-9: mix(color(~`colorPalette('@{primary-color}', 3) `), @component-background, 95%);
|
||||
@primary-10: mix(color(~`colorPalette('@{primary-color}', 2) `), @component-background, 95%);
|
||||
@primary-9: mix(color(~`colorPalette('@{primary-color}', 3) `), @component-background, 97%);
|
||||
@primary-10: mix(color(~`colorPalette('@{primary-color}', 2) `), @component-background, 98%);
|
||||
|
||||
// Layer background
|
||||
@popover-background: #1f1f1f;
|
||||
@popover-customize-border-color: #3a3a3a;
|
||||
@body-background: @black;
|
||||
@component-background: #141414;
|
||||
|
||||
@ -190,6 +191,10 @@
|
||||
// ---
|
||||
@tree-bg: transparent;
|
||||
|
||||
// List
|
||||
// ---
|
||||
@list-customize-card-bg: transparent;
|
||||
|
||||
// Shadow
|
||||
// ---
|
||||
@shadow-color: rgba(0, 0, 0, 0.45);
|
||||
@ -305,6 +310,7 @@
|
||||
@table-filter-btns-bg: @popover-background;
|
||||
@table-expanded-row-bg: @table-header-bg;
|
||||
@table-filter-dropdown-bg: @popover-background;
|
||||
@table-expand-icon-bg: transparent;
|
||||
|
||||
// TimePicker
|
||||
// ---
|
||||
@ -322,6 +328,7 @@
|
||||
// Steps
|
||||
// ---
|
||||
@steps-nav-arrow-color: fade(@white, 20%);
|
||||
@steps-background: transparent;
|
||||
|
||||
// Avatar
|
||||
// ---
|
||||
@ -361,7 +368,7 @@
|
||||
|
||||
// Comment
|
||||
// ---
|
||||
@comment-bg: @component-background;
|
||||
@comment-bg: transparent;
|
||||
@comment-author-time-color: fade(@white, 30%);
|
||||
@comment-action-hover-color: fade(@white, 65%);
|
||||
|
||||
@ -380,6 +387,7 @@
|
||||
@pagination-item-link-bg: transparent;
|
||||
@pagination-item-disabled-bg-active: fade(@white, 25%);
|
||||
@pagination-item-disabled-color-active: @black;
|
||||
@pagination-item-input-bg: @pagination-item-bg;
|
||||
|
||||
// PageHeader
|
||||
// ---
|
||||
|
||||
@ -45,6 +45,7 @@
|
||||
@component-background: #fff;
|
||||
// Popover background color
|
||||
@popover-background: @component-background;
|
||||
@popover-customize-border-color: @border-color-split;
|
||||
@font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, 'Helvetica Neue', Arial,
|
||||
'Noto Sans', sans-serif, 'Apple Color Emoji', 'Segoe UI Emoji', 'Segoe UI Symbol',
|
||||
'Noto Color Emoji';
|
||||
@ -519,6 +520,7 @@
|
||||
@table-header-filter-active-bg: darken(@table-header-sort-active-bg, 5%);
|
||||
@table-filter-btns-bg: inherit;
|
||||
@table-filter-dropdown-bg: @component-background;
|
||||
@table-expand-icon-bg: @component-background;
|
||||
|
||||
// Tag
|
||||
// --
|
||||
@ -657,6 +659,7 @@
|
||||
@pagination-item-link-bg: @component-background;
|
||||
@pagination-item-disabled-color-active: @white;
|
||||
@pagination-item-disabled-bg-active: darken(@disabled-bg, 10%);
|
||||
@pagination-item-input-bg: @component-background;
|
||||
|
||||
// PageHeader
|
||||
// ---
|
||||
@ -763,6 +766,7 @@
|
||||
@list-item-meta-margin-bottom: @padding-md;
|
||||
@list-item-meta-avatar-margin-right: @padding-md;
|
||||
@list-item-meta-title-margin-bottom: @padding-sm;
|
||||
@list-customize-card-bg: @component-background;
|
||||
|
||||
// Statistic
|
||||
// ---
|
||||
@ -802,6 +806,7 @@
|
||||
// ---
|
||||
@process-tail-color: @border-color-split;
|
||||
@steps-nav-arrow-color: fade(@black, 25%);
|
||||
@steps-background: @component-background;
|
||||
|
||||
// Notification
|
||||
// ---
|
||||
|
||||
@ -423,7 +423,7 @@
|
||||
color: inherit;
|
||||
line-height: @font-size-sm;
|
||||
vertical-align: floor((@font-size-base - ceil(@font-size-sm * 1.4)) / 2);
|
||||
background: @component-background;
|
||||
background: @table-expand-icon-bg;
|
||||
border: @border-width-base @border-style-base @border-color-split;
|
||||
border-radius: @border-radius-base;
|
||||
outline: none;
|
||||
|
||||
@ -139,7 +139,7 @@
|
||||
},
|
||||
"devDependencies": {
|
||||
"@ant-design/bisheng-plugin": "^2.3.0",
|
||||
"@ant-design/colors": "^4.0.0-alpha.0",
|
||||
"@ant-design/colors": "^4.0.0-alpha.1",
|
||||
"@ant-design/hitu": "^0.0.0-alpha.13",
|
||||
"@ant-design/tools": "^8.0.4",
|
||||
"@packtracker/webpack-plugin": "^2.0.1",
|
||||
|
||||
@ -169,6 +169,9 @@ a {
|
||||
|
||||
.drawer-content {
|
||||
padding: 40px 0;
|
||||
&-wrapper {
|
||||
background-color: @component-background;
|
||||
}
|
||||
}
|
||||
|
||||
.drawer {
|
||||
|
||||
Loading…
Reference in New Issue
Block a user