test/ant-design
1
0
Fork 0
mirror of https://gitee.com/ant-design/ant-design.git synced 2024-12-02 03:59:01 +08:00
Code Issues Actions 84 Packages Projects Releases Wiki Activity

Tweak style

Browse Source
This commit is contained in:
afc163 2017-10-16 19:53:46 +08:00
parent fe44e33689
commit 26e416c364
13 changed files with 155 additions and 110 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

2
components/badge/__tests__/__snapshots__/demo.test.js.snap
View File

@ -1108,7 +1108,7 @@ exports[`renders ./components/badge/demo/no-wrapper.md correctly 1`] = `
<sup
class="ant-scroll-number ant-badge-count"
data-show="true"
style="background-color:#87d068"
style="background-color:#52c41a"
title="109"
>
99+

2
components/badge/demo/no-wrapper.md
View File

@ -22,7 +22,7 @@ ReactDOM.render(
<div>
<Badge count={25} />
<Badge count={4} style={{ backgroundColor: '#fff', color: '#999', boxShadow: '0 0 0 1px #d9d9d9 inset' }} />
<Badge count={109} style={{ backgroundColor: '#87d068' }} />
<Badge count={109} style={{ backgroundColor: '#52c41a' }} />
</div>
, mountNode);
````

2
components/card/style/index.less
View File

@ -68,7 +68,7 @@
}
&-body {
padding: 20px @card-padding-base;
padding: @card-padding-base;
.clearfix;
}

6
components/collapse/style/index.less
View File

@ -94,7 +94,7 @@
}
&-borderless > &-item {
border: 0;
border-bottom: 1px solid @border-color-base;
}
&-borderless > &-item:last-child,
@ -102,10 +102,6 @@
border-radius: 0;
}
&-borderless > &-item-active {
border: 0;
}
&-borderless > &-item > &-content {
background-color: transparent;
}

5
components/popconfirm/demo/placement.md
View File

@ -73,6 +73,9 @@ ReactDOM.render(
````
<style>
.code-box-demo .demo {
overflow: auto;
}
.code-box-demo .ant-popover-wrap > a {
margin-right: 8px;
}
@ -82,5 +85,7 @@ ReactDOM.render(
}
#components-popconfirm-demo-placement .ant-btn {
width: 70px;
text-align: center;
padding: 0;
}
</style>

5
components/popover/demo/placement.md
View File

@ -77,11 +77,16 @@ ReactDOM.render(
````
<style>
.code-box-demo .demo {
overflow: auto;
}
.code-box-demo .ant-btn {
margin-right: 8px;
margin-bottom: 8px;
}
#components-popover-demo-placement .ant-btn {
width: 70px;
text-align: center;
padding: 0;
}
</style>

2
components/popover/style/index.less
View File

@ -60,7 +60,7 @@
&-title {
min-width: @popover-min-width;
margin: 0; // reset heading margin
padding: 8px @padding-md;
padding: 5px @padding-md 4px;
min-height: 32px;
border-bottom: 1px solid @border-color-split;
color: @heading-color;

22
components/slider/style/index.less
View File

@ -38,7 +38,7 @@
position: absolute;
height: 4px;
border-radius: @border-radius-base;
background-color: tint(@primary-color, 60%);
background-color: @primary-3;
transition: background-color 0.3s ease;
}
@ -50,18 +50,12 @@
height: 14px;
cursor: pointer;
border-radius: 50%;
border: solid 2px tint(@primary-color, 50%);
border: solid 2px @primary-3;
background-color: @component-background;
transition: border-color 0.3s ease, transform .3s cubic-bezier(0.18, 0.89, 0.32, 1.28);
transition: border-color .3s, transform .3s cubic-bezier(0.18, 0.89, 0.32, 1.28);
&:hover {
border-color: @primary-5;
transform: scale(1.2);
transform-origin: center center;
}
&:active {
box-shadow: 0 0 0 2px fadeout(@primary-color, 80%);
&.@{ant-prefix}-tooltip-open {
border-color: @primary-color;
}
}
@ -70,10 +64,10 @@
background-color: #e1e1e1;
}
.@{slider-prefix-cls}-track {
background-color: tint(@primary-color, 40%);
background-color: @primary-4;
}
.@{slider-prefix-cls}-handle {
border-color: @primary-5;
.@{slider-prefix-cls}-handle:not(.@{ant-prefix}-tooltip-open) {
border-color: @primary-4;
}
}

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

@ -339,7 +339,7 @@
// Badge
// ---
@badge-height: 20px;
@badge-dot-size: 8px;
@badge-dot-size: 6px;
@badge-font-size: @font-size-sm;
@badge-status-size: 6px;

144
components/tooltip/__tests__/__snapshots__/demo.test.js.snap
View File

@ -52,82 +52,120 @@ exports[`renders ./components/tooltip/demo/basic.md correctly 1`] = `
`;
exports[`renders ./components/tooltip/demo/placement.md correctly 1`] = `
<div>
<div
class="demo"
>
<div
style="margin-left:60px"
style="margin-left:70px;white-space:nowrap"
>
<a
href="#"
<button
class="ant-btn"
type="button"
>
TL
</a>
<a
href="#"
<span>
TL
</span>
</button>
<button
class="ant-btn"
type="button"
>
Top
</a>
<a
href="#"
<span>
Top
</span>
</button>
<button
class="ant-btn"
type="button"
>
TR
</a>
<span>
TR
</span>
</button>
</div>
<div
style="width:60px;float:left"
style="width:70px;float:left"
>
<a
href="#"
<button
class="ant-btn"
type="button"
>
LT
</a>
<a
href="#"
<span>
LT
</span>
</button>
<button
class="ant-btn"
type="button"
>
Left
</a>
<a
href="#"
<span>
Left
</span>
</button>
<button
class="ant-btn"
type="button"
>
LB
</a>
<span>
LB
</span>
</button>
</div>
<div
style="width:60px;margin-left:270px"
style="width:70px;margin-left:304px"
>
<a
href="#"
<button
class="ant-btn"
type="button"
>
RT
</a>
<a
href="#"
<span>
RT
</span>
</button>
<button
class="ant-btn"
type="button"
>
Right
</a>
<a
href="#"
<span>
Right
</span>
</button>
<button
class="ant-btn"
type="button"
>
RB
</a>
<span>
RB
</span>
</button>
</div>
<div
style="margin-left:60px;clear:both"
style="margin-left:70px;clear:both;white-space:nowrap"
>
<a
href="#"
<button
class="ant-btn"
type="button"
>
BL
</a>
<a
href="#"
<span>
BL
</span>
</button>
<button
class="ant-btn"
type="button"
>
Bottom
</a>
<a
href="#"
<span>
Bottom
</span>
</button>
<button
class="ant-btn"
type="button"
>
BR
</a>
<span>
BR
</span>
</button>
</div>
</div>
`;

63
components/tooltip/demo/placement.md
View File

@ -1,6 +1,6 @@
---
order: 1
title:
title:
zh-CN: 位置
en-US: Placement
---
@ -9,58 +9,61 @@ title:
位置有 12 个方向。
## en-US
## en-US
The ToolTip has 12 placements choice.
````jsx
import { Tooltip } from 'antd';
import { Tooltip, Button } from 'antd';
const text = <span>prompt text</span>;
const buttonWidth = 70;
ReactDOM.render(
<div>
<div style={{ marginLeft: 60 }}>
<div className="demo">
<div style={{ marginLeft: buttonWidth, whiteSpace: 'nowrap' }}>
<Tooltip placement="topLeft" title={text}>
<a href="#">TL</a>
<Button>TL</Button>
</Tooltip>
<Tooltip placement="top" title={text}>
<a href="#">Top</a>
<Button>Top</Button>
</Tooltip>
<Tooltip placement="topRight" title={text}>
<a href="#">TR</a>
<Button>TR</Button>
</Tooltip>
</div>
<div style={{ width: 60, float: 'left' }}>
<div style={{ width: buttonWidth, float: 'left' }}>
<Tooltip placement="leftTop" title={text}>
<a href="#">LT</a>
<Button>LT</Button>
</Tooltip>
<Tooltip placement="left" title={text}>
<a href="#">Left</a>
<Button>Left</Button>
</Tooltip>
<Tooltip placement="leftBottom" title={text}>
<a href="#">LB</a>
<Button>LB</Button>
</Tooltip>
</div>
<div style={{ width: 60, marginLeft: 270 }}>
<div style={{ width: buttonWidth, marginLeft: (buttonWidth * 4) + 24 }}>
<Tooltip placement="rightTop" title={text}>
<a href="#">RT</a>
<Button>RT</Button>
</Tooltip>
<Tooltip placement="right" title={text}>
<a href="#">Right</a>
<Button>Right</Button>
</Tooltip>
<Tooltip placement="rightBottom" title={text}>
<a href="#">RB</a>
<Button>RB</Button>
</Tooltip>
</div>
<div style={{ marginLeft: 60, clear: 'both' }}>
<div style={{ marginLeft: buttonWidth, clear: 'both', whiteSpace: 'nowrap' }}>
<Tooltip placement="bottomLeft" title={text}>
<a href="#">BL</a>
<Button>BL</Button>
</Tooltip>
<Tooltip placement="bottom" title={text}>
<a href="#">Bottom</a>
<Button>Bottom</Button>
</Tooltip>
<Tooltip placement="bottomRight" title={text}>
<a href="#">BR</a>
<Button>BR</Button>
</Tooltip>
</div>
</div>
@ -68,16 +71,16 @@ ReactDOM.render(
````
<style>
#components-tooltip-demo-placement .code-box-demo a {
display: inline-block;
line-height: 32px;
height: 32px;
width: 60px;
font-size: 14px;
.code-box-demo .demo {
overflow: auto;
}
.code-box-demo .ant-btn {
margin-right: 8px;
margin-bottom: 8px;
}
#components-tooltip-demo-placement .ant-btn {
width: 70px;
text-align: center;
background: #f5f5f5;
margin-right: 1em;
margin-bottom: 1em;
border-radius: 6px;
padding: 0;
}
</style>

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

@ -16,10 +16,10 @@
position: relative;
width: 180px;
height: 200px;
padding-top: 33px;
padding-top: 34px;
&-with-footer {
padding-bottom: 33px;
padding-bottom: 34px;
}
&-search {
@ -79,7 +79,7 @@
}
&-body-with-search {
padding-top: 34px;
padding-top: @input-height-base + 8px;
}
&-content {

4
components/upload/demo/avatar.md
View File

@ -84,6 +84,10 @@ ReactDOM.render(<Avatar />, mountNode);
border: 1px dashed #d9d9d9;
border-radius: 6px;
cursor: pointer;
transition: all .3s;
}
.avatar-uploader:hover {
border: 1px dashed #1890ff;
}
.avatar-uploader-trigger {
display: table-cell;