mirror/ant-design
1
0
Fork 0
mirror of https://github.com/ant-design/ant-design.git synced 2024-11-28 21:19:37 +08:00
Code Issues Actions 50 Packages Projects Releases Wiki Activity

Merge pull request #20555 from ant-design/fix-dark-component

Browse Source 
fix: site dark tweak style
This commit is contained in:
信鑫-King 2019-12-31 17:49:04 +08:00 committed by GitHub
commit f69b656a04
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
14 changed files with 69 additions and 35 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

2
components/button/index.en-US.md
View File

@ -38,7 +38,7 @@ It accepts all props which native buttons support.
Following the Ant Design specification, we will add one space between if Button contains two Chinese characters only. If you don't need that, you can use [ConfigProvider](/components/config-provider/#API) to set `autoInsertSpaceInButton` as `false`.
![Button with two Chinese characters](https://gw.alipayobjects.com/zos/antfincdn/Hz5HL9gsT4/f29f170d-b78d-4d2b-aa71-0da6a9ead4d9.png)
<img src="http://alipay-rmsdeploy-image.cn-hangzhou.alipay.aliyun-inc.com/antfincdn/NstpRYFrCr/f29f170d-b78d-4d2b-aa71-0da6a9ead4d9.png" style="box-shadow: none" alt="Button with two Chinese characters" />
<style>
[id^=components-button-demo-] .ant-btn {

2
components/button/index.zh-CN.md
View File

@ -41,7 +41,7 @@ subtitle: 按钮
根据 Ant Design 设计规范要求，我们会在按钮内只有两个汉字时自动添加空格，如果你不需要这个特性，可以设置 [ConfigProvider](/components/config-provider/#API) 的 `autoInsertSpaceInButton` 为 `false`。
![](https://gw.alipayobjects.com/zos/antfincdn/Hz5HL9gsT4/f29f170d-b78d-4d2b-aa71-0da6a9ead4d9.png)
<img src="http://alipay-rmsdeploy-image.cn-hangzhou.alipay.aliyun-inc.com/antfincdn/NstpRYFrCr/f29f170d-b78d-4d2b-aa71-0da6a9ead4d9.png" style="box-shadow: none" alt="移除两个汉字之间的空格" />
<style>
[id^="components-button-demo-"] .ant-btn {

44
components/button/style/mixin.less
View File

@ -281,15 +281,33 @@
.button-color(@error-color, @btn-default-bg, @error-color);
&:hover,
&:focus {
.button-color(
~`colorPalette('@{error-color}', 5) `; @btn-default-bg; ~`colorPalette('@{error-color}', 5) `
);
& when (@theme = dark) {
.button-color(
~`colorPalette('@{error-color}', 7) `; @btn-default-bg; ~`colorPalette('@{error-color}', 7)
`
);
}
& when not (@theme = dark) {
.button-color(
~`colorPalette('@{error-color}', 5) `; @btn-default-bg; ~`colorPalette('@{error-color}', 5)
`
);
}
}
&:active,
&.active {
.button-color(
~`colorPalette('@{error-color}', 7) `; @btn-default-bg; ~`colorPalette('@{error-color}', 7) `
);
& when (@theme = dark) {
.button-color(
~`colorPalette('@{error-color}', 5) `; @btn-default-bg; ~`colorPalette('@{error-color}', 5)
`
);
}
& when not (@theme = dark) {
.button-color(
~`colorPalette('@{error-color}', 7) `; @btn-default-bg; ~`colorPalette('@{error-color}', 7)
`
);
}
}
.button-disabled();
}
@ -299,10 +317,20 @@
box-shadow: none;
&:hover,
&:focus {
.button-color(~`colorPalette('@{error-color}', 5) `; transparent; transparent);
& when (@theme = dark) {
.button-color(~`colorPalette('@{error-color}', 7) `; transparent; transparent);
}
& when not (@theme = dark) {
.button-color(~`colorPalette('@{error-color}', 5) `; transparent; transparent);
}
}
&:active {
.button-color(~`colorPalette('@{error-color}', 7) `; transparent; transparent);
& when (@theme = dark) {
.button-color(~`colorPalette('@{error-color}', 5) `; transparent; transparent);
}
& when not (@theme = dark) {
.button-color(~`colorPalette('@{error-color}', 7) `; transparent; transparent);
}
}
.button-disabled(@disabled-color; transparent; transparent);
}

1
components/date-picker/style/index.less
View File

@ -204,6 +204,7 @@
// ======================== Ranges ========================
&-ranges {
margin-bottom: 0;
padding: @padding-xs / 2 @padding-sm;
overflow: hidden;
line-height: @picker-text-height - 2 * @border-width-base - @padding-xs / 2;

10
components/style/themes/dark.less
View File

@ -254,7 +254,7 @@
@input-bg: transparent;
@input-placeholder-color: fade(@white, 30%);
@input-number-handler-bg: transparent;
@input-number-handler-active-bg: @popover-background;
@input-number-handler-active-bg: @item-hover-bg;
@input-icon-hover-color: fade(@white, 85%);
// Select
@ -301,7 +301,6 @@
// Table
// --
@table-header-bg: #1d1d1d;
@table-header-bg-sm: @table-header-bg;
@table-body-sort-bg: fade(@white, 1%);
@table-row-hover-bg: #262626;
@table-header-sort-bg: #262626;
@ -313,12 +312,6 @@
// TimePicker
// ---
@time-picker-bg: @popover-background;
@time-picker-inner-bg: @popover-background;
@time-picker-panel-inner-bg: @popover-background;
@month-panel-bg: @popover-background;
@year-panel-bg: @popover-background;
@picker-basic-cell-hover-color: @background-color-light;
@picker-basic-cell-hover-with-range-color: #303030;
@picker-basic-cell-disabled-bg: #303030;
@picker-border-color: @border-color-split;
@ -428,7 +421,6 @@
// ---
@timeline-color: @border-color-split;
@timeline-dot-color: @primary-color;
@timeline-dot-bg: transparent;
// Mentions
// ---

8
components/style/themes/default.less
View File

@ -516,14 +516,6 @@
// TimePicker
// ---
@time-picker-bg: @component-background;
@time-picker-panel-column-width: 56px;
@time-picker-panel-width: @time-picker-panel-column-width * 3;
@time-picker-selected-bg: @item-active-bg;
@time-picker-inner-bg: @component-background;
@time-picker-panel-inner-bg: @component-background;
@month-panel-bg: @component-background;
@year-panel-bg: @component-background;
@picker-bg: @component-background;
@picker-basic-cell-hover-color: @item-hover-bg;
@picker-basic-cell-hover-with-range-color: lighten(@primary-color, 35%);

4
components/table/demo/summary.md
View File

@ -105,8 +105,8 @@ ReactDOM.render(
#components-table-demo-summary tfoot td {
background: #fafafa;
}
[data-theme="dark"] #components-table-demo-summary tfoot th,
#components-table-demo-summary tfoot td {
[data-theme="dark"] #components-table-demo-summary tfoot th,
[data-theme="dark"] #components-table-demo-summary tfoot td {
background: #1d1d1d;
}
</style>

6
components/tag/demo/colorful.md
View File

@ -49,3 +49,9 @@ ReactDOM.render(
margin-bottom: 8px;
}
```
<style>
.code-box-demo .ant-tag {
margin-bottom: 8px;
}
<style>

6
components/transfer/style/customize.less
View File

@ -1,6 +1,7 @@
@import './index.less';
@table-prefix-cls: ~'@{ant-prefix}-table';
@input-prefix-cls: ~'@{ant-prefix}-input';
.@{transfer-prefix-cls}-customize-list {
display: flex;
@ -59,4 +60,9 @@
margin: 16px 0 4px;
}
}
.@{input-prefix-cls} {
&[disabled] {
background-color: transparent;
}
}
}

2
package.json
View File

@ -157,7 +157,7 @@
"@types/warning": "^3.0.0",
"@typescript-eslint/eslint-plugin": "^2.0.0",
"@typescript-eslint/parser": "^2.10.0",
"antd-pro-merge-less": "^2.0.26",
"antd-pro-merge-less": "^2.0.28",
"antd-theme-generator": "^1.1.6",
"babel-eslint": "^10.0.1",
"babel-plugin-add-react-displayname": "^0.0.5",

5
site/theme/static/common.less
View File

@ -182,6 +182,11 @@ a {
bottom: 102px;
z-index: 2147483640;
cursor: pointer;
&-tooltip {
.ant-tooltip-inner {
min-width: 100px;
}
}
& > div {
display: block;
}

6
site/theme/template/Content/MainContent.jsx
View File

@ -369,7 +369,11 @@ class MainContent extends Component {
</section>
{componentPage && (
<div className="fixed-widgets">
<Tooltip title={formatMessage({ id: `app.theme.switch.${theme}` })}>
<Tooltip
getPopupContainer={node => node.parentNode}
title={formatMessage({ id: `app.theme.switch.${theme}` })}
overlayClassName="fixed-widgets-tooltip"
>
<Avatar
className={classNames('fixed-widgets-avatar', `fixed-widgets-avatar-${theme}`)}
size={44}

4
site/theme/template/Home/Banner/index.less
View File

@ -43,9 +43,9 @@
button {
height: auto;
padding: 8px 24px;
color: @home-color;
font-size: 14px;
border-color: @home-color;
color: @home-color;
&:hover {
color: tint(@home-color, 20%);
@ -53,8 +53,8 @@
}
&.ant-btn-primary {
background: @home-color;
color: #fff;
background: @home-color;
&:hover {
background-color: tint(@home-color, 20%);

4
site/theme/template/Home/index.less
View File

@ -28,11 +28,11 @@
}
.home-link-arrow {
margin-left: 0.3em;
position: relative;
margin-left: 0.3em;
font-size: 0.85em;
transition: all 0.2s;
opacity: 0.75;
transition: all 0.2s;
}
a:hover .home-link-arrow {