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

Fix styles (#7924)

Browse Source 
* update demo

* Fix styles

* fix snap

* Fix back-top ci
This commit is contained in:
偏右 2017-10-18 17:16:14 +08:00 committed by GitHub
parent d0b08cd2ea
commit ffffd0f4c5
26 changed files with 59 additions and 59 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

17
components/alert/style/index.less
View File

@ -9,23 +9,22 @@
.@{alert-prefix-cls} {
.reset-component;
position: relative;
padding: 8px 16px 8px 38px;
padding: 8px 15px 8px 37px;
border-radius: @border-radius-base;
&&-no-icon {
padding: 8px 16px;
padding: 8px 15px;
}
&-icon {
font-size: @font-size-lg;
top: 8px + @font-size-base * @line-height-base / 2 - @font-size-lg / 2;
top: 8px + @font-size-base * @line-height-base / 2 - @font-size-base / 2 + 1px;
left: 16px;
position: absolute;
}
&-description {
font-size: @font-size-base;
line-height: 21px;
line-height: 22px;
display: none;
}
@ -46,8 +45,8 @@
}
&-warning {
border: @border-width-base @border-style-base @yellow-3;
background-color: @yellow-1;
border: @border-width-base @border-style-base @gold-3;
background-color: @gold-1;
.@{alert-prefix-cls}-icon {
color: @warning-color;
}
@ -85,7 +84,7 @@
}
&-with-description {
padding: 16px 16px 16px 64px;
padding: 15px 15px 15px 64px;
position: relative;
border-radius: @border-radius-base;
color: @text-color;
@ -93,7 +92,7 @@
}
&-with-description&-no-icon {
padding: 16px;
padding: 15px;
}
&-with-description &-icon {

8
components/anchor/style/index.less
View File

@ -25,10 +25,10 @@
&-ball {
display: none;
position: absolute;
width: 10px;
height: 10px;
border-radius: 10px;
border: 3px solid @primary-color;
width: 8px;
height: 8px;
border-radius: 8px;
border: 2px solid @primary-color;
background-color: @component-background;
left: 50%;
transition: top .3s ease-in-out;

6
components/back-top/__tests__/index.test.js
View File

@ -2,7 +2,7 @@ import React from 'react';
import { mount } from 'enzyme';
import BackTop from '..';
const delay = timeout => new Promise(resolve => setTimeout(resolve, timeout));
jest.useFakeTimers();
describe('BackTop', () => {
it('should scroll to top after click it', async () => {
@ -10,9 +10,9 @@ describe('BackTop', () => {
document.documentElement.scrollTop = 400;
// trigger scroll manually
wrapper.instance().handleScroll();
await delay(500);
jest.runAllTimers();
wrapper.find('.ant-back-top').simulate('click');
await delay(500);
jest.runAllTimers();
expect(Math.round(document.documentElement.scrollTop)).toBe(0);
});
});

3
components/back-top/index.tsx
View File

@ -3,7 +3,6 @@ import Animate from 'rc-animate';
import addEventListener from 'rc-util/lib/Dom/addEventListener';
import classNames from 'classnames';
import omit from 'omit.js';
import Icon from '../icon';
import getScroll from '../_util/getScroll';
import getRequestAnimationFrame from '../_util/getRequestAnimationFrame';
@ -109,7 +108,7 @@ export default class BackTop extends React.Component<BackTopProps, any> {
const defaultElement = (
<div className={`${prefixCls}-content`}>
<Icon className={`${prefixCls}-icon`} type="to-top" />
<div className={`${prefixCls}-icon`} />
</div>
);

7
components/back-top/style/index.less
View File

@ -21,6 +21,7 @@
color: @back-top-color;
text-align: center;
transition: all .3s @ease-in-out;
overflow: hidden;
&:hover {
background-color: @back-top-hover-bg;
@ -29,7 +30,9 @@
}
&-icon {
font-size: 20px;
margin-top: 10px;
margin: 12px auto;
width: 14px;
height: 16px;
background: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAACQAAAAoCAYAAACWwljjAAAABGdBTUEAALGPC/xhBQAAAbtJREFUWAntmMtKw0AUhhMvS5cuxILgQlRUpIggIoKIIoigG1eC+AA+jo+i6FIXBfeuXIgoeKVeitVWJX5HWhhDksnUpp3FDPyZk3Nm5nycmZKkXhAEOXSA3lG7muTeRzmfy6HneUvIhnYkQK+Q9NhAA0Opg0vBEhjBKHiyb8iGMyQMOYuK41BcBSypAL+MYXSKjtFAW7EAGEO3qN4uMQbbAkXiSfRQJ1H6a+yhlkKRcAoVFYiweYNjtCVQJJpBz2GCiPt7fBOZQpFgDpUikse5HgnkM4Fi4QX0Fpc5wf9EbLqpUCy4jMoJSXWhFwbMNgWKhVbRhy5jirhs9fy/oFhgHVVTJEs7RLZ8sSEoJm6iz7SZDMbJ+/OKERQTttCXQRLToRUmrKWCYuA2+jbN0MB4OQobYShfdTCgn/sL1K36M7TLrN3n+758aPy2rrpR6+/od5E8tf/A1uLS9aId5T7J3CNYihkQ4D9PiMdMC7mp4rjB9kjFjZp8BlnVHJBuO1yFXIV0FdDF3RlyFdJVQBdv5AxVdIsq8apiZ2PyYO1EVykesGfZEESsCkweyR8MUW+V8uJ1gkYipmpdP1pm2aJVPEGzAAAAAElFTkSuQmCC) ~"100%/100%" no-repeat;
}
}

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

@ -495,7 +495,7 @@ exports[`renders ./components/card/demo/loading.md correctly 1`] = `
exports[`renders ./components/card/demo/meta.md correctly 1`] = `
<div
class="ant-card ant-card-bordered ant-card-hoverable"
class="ant-card ant-card-bordered"
style="width:300px"
>
<div>

1
components/card/demo/meta.md
View File

@ -22,7 +22,6 @@ ReactDOM.render(
style={{ width: 300 }}
cover={<img alt="example" src="https://gw.alipayobjects.com/zos/rmsportal/JiqGstEfoWAOHiTxclqi.png" />}
actions={[<Icon type="setting" />, <Icon type="edit" />, <Icon type="ellipsis" />]}
hoverable
>
<Meta
avatar={<Avatar src="https://zos.alipayobjects.com/rmsportal/ODTLcjxAfvqbxHnVXCYX.png" />}

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

@ -200,6 +200,7 @@
&-title {
padding: @card-inner-head-padding 0;
font-size: @font-size-base;
}
}

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

@ -65,6 +65,7 @@
color: @text-color;
padding: 0 @padding-md;
background-color: @component-background;
border-top: @border-width-base @border-style-base @border-color-base;
& > &-box {
padding-top: @padding-md;
@ -115,7 +116,6 @@
& > .arrow {
cursor: not-allowed;
color: @disabled-color;
background-color: @disabled-bg;
}
}
}

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

@ -659,7 +659,7 @@ exports[`renders ./components/input/demo/presuffix.md correctly 1`] = `
</span>
<input
class="ant-input"
placeholder="Enter your userName"
placeholder="Enter your username"
type="text"
value=""
/>

2
components/input/demo/presuffix.md
View File

@ -35,7 +35,7 @@ class App extends React.Component {
const suffix = userName ? <Icon type="close-circle" onClick={this.emitEmpty} /> : null;
return (
<Input
placeholder="Enter your userName"
placeholder="Enter your username"
prefix={<Icon type="user" />}
suffix={suffix}
value={userName}

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

@ -376,7 +376,7 @@ exports[`renders ./components/list/demo/loadmore.md correctly 1`] = `
/>
</div>
<div
style="text-align:center;margin-top:8px;height:32px"
style="text-align:center;margin-top:12px;height:32px;line-height:32px"
>
<button
class="ant-btn"
@ -856,7 +856,7 @@ exports[`renders ./components/list/demo/simple.md correctly 1`] = `
exports[`renders ./components/list/demo/vertical.md correctly 1`] = `
<div
class="ant-list ant-list-vertical ant-list-split"
class="ant-list ant-list-vertical ant-list-lg ant-list-split"
>
<div>
<div

4
components/list/demo/loadmore.md
View File

@ -66,7 +66,7 @@ class LoadMoreList extends React.Component {
render() {
const { loading, loadingMore, showLoadingMore, data } = this.state;
const loadMore = showLoadingMore ? (
<div style={{ textAlign: 'center', marginTop: 8, height: 32 }}>
<div style={{ textAlign: 'center', marginTop: 12, height: 32, lineHeight: '32px' }}>
{loadingMore && <Spin />}
{!loadingMore && <Button onClick={this.onLoadMore}>loading more</Button>}
</div>
@ -98,6 +98,6 @@ ReactDOM.render(<LoadMoreList />, mountNode);
````css
.demo-loadmore-list {
min-height: 350px;
min-height: 350px;
}
````

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

@ -44,6 +44,7 @@ const IconText = ({ type, text }) => (
ReactDOM.render(
<List
itemLayout="vertical"
size="large"
pagination={pagination}
dataSource={listData}
renderItem={item => (

4
components/modal/style/confirm.less
View File

@ -21,8 +21,8 @@
&-body {
.@{confirm-prefix-cls}-title {
color: @text-color;
font-weight: bold;
color: @heading-color;
font-weight: 500;
font-size: @font-size-lg;
}

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

@ -68,17 +68,17 @@
}
&-inner-content {
padding: 8px @padding-md;
padding: 20px @padding-md;
color: @popover-color;
}
&-message {
padding: 8px 0 @padding-md;
padding: 0 0 @padding-md;
font-size: @font-size-base;
color: @popover-color;
> .@{iconfont-css-prefix} {
color: @warning-color;
line-height: @line-height-base;
line-height: @line-height-base + 0.1;
position: absolute;
}
&-title {
@ -88,7 +88,6 @@
&-buttons {
text-align: right;
margin-bottom: 8px;
button {
margin-left: 8px;
}

2
components/style/mixins/iconfont.less
View File

@ -27,7 +27,7 @@
.iconfont-size-under-12px(@size, @rotate: 0deg) {
display: inline-block;
@font-scale: unit(@size / 12px);
font-size: @font-size-base;
font-size: 12px;
// IE9
font-size: ~"@{size} \9"; // lesshint duplicateProperty: false
transform: scale(@font-scale) rotate(@rotate);

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

@ -279,7 +279,7 @@
//** Popover maximum width
@popover-min-width: 177px;
//** Popover arrow width
@popover-arrow-width: 4px;
@popover-arrow-width: 5px;
//** Popover arrow color
@popover-arrow-color: @popover-bg;
//** Popover outer arrow width
@ -316,7 +316,7 @@
@table-header-sort-bg: @background-color-base;
@table-row-hover-bg: @primary-1;
@table-padding-vertical: 16px;
@table-padding-horizontal: 8px;
@table-padding-horizontal: 16px;
// Tag
// --

2
components/table/demo/expand.md
View File

@ -32,7 +32,7 @@ const data = [
ReactDOM.render(
<Table
columns={columns}
expandedRowRender={record => <p>{record.description}</p>}
expandedRowRender={record => <p style={{ margin: 0 }}>{record.description}</p>}
dataSource={data}
/>
, mountNode);

11
components/table/style/index.less
View File

@ -40,9 +40,10 @@
border-bottom: 0;
}
.@{iconfont-css-prefix}-filter, .@{table-prefix-cls}-filter-icon {
.@{iconfont-css-prefix}-filter,
.@{table-prefix-cls}-filter-icon {
position: relative;
margin-left: 4px;
margin-left: 8px;
font-size: @font-size-base;
cursor: pointer;
color: @table-header-icon-color;
@ -64,6 +65,10 @@
}
}
.@{table-prefix-cls}-column-sorter + .@{iconfont-css-prefix}-filter {
margin-left: 4px;
}
.@{table-prefix-cls}-filter-selected.@{iconfont-css-prefix}-filter {
color: @primary-color;
}
@ -295,7 +300,7 @@
&-column-sorter {
position: relative;
margin-left: 4px;
margin-left: 8px;
display: inline-block;
width: 14px;
vertical-align: middle;

7
components/tabs/style/card-style.less
View File

@ -74,11 +74,10 @@
line-height: 20px;
text-align: center;
cursor: pointer;
border-radius: @border-radius-base;
border-radius: @border-radius-sm;
border: @border-width-base @border-style-base @border-color-base;
font-size: @font-size-base;
.iconfont-size-under-12px(10px);
color: @text-color-secondary;
font-size: 12px;
color: @text-color;
transition: all .3s;
&:hover {
color: @primary-color;

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

@ -165,7 +165,7 @@
margin-right: 0;
}
padding: 12px 20px;
padding: 12px 16px;
transition: color 0.3s @ease-in-out;
cursor: pointer;
text-decoration: none;

8
components/tag/style/index.less
View File

@ -8,7 +8,7 @@
display: inline-block;
line-height: 20px;
height: 22px;
padding: 0 8px;
padding: 0 7px;
border-radius: @border-radius-sm;
border: @border-width-base @border-style-base @border-color-base;
background: @tag-default-bg;
@ -40,15 +40,13 @@
.@{iconfont-css-prefix}-cross {
.iconfont-size-under-12px(10px);
position: relative;
top: .8px;
top: 1px;
cursor: pointer;
font-weight: bold;
margin-left: 3px;
transition: all 0.3s @ease-out;
opacity: 0.66;
&:hover {
opacity: 1;
color: @heading-color;
}
}

3
components/time-picker/style/index.less
View File

@ -37,9 +37,8 @@
&-wrap {
box-sizing: border-box;
position: relative;
padding: 7px @control-padding-horizontal;
padding: 7px @control-padding-horizontal - 3px 7px @control-padding-horizontal;
border-bottom: @border-width-base @border-style-base @border-color-split;
max-width: @time-picker-panel-column-width * 3;
}
&-invalid {

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

@ -40,7 +40,7 @@
// Wrapper for the tooltip content
.@{tooltip-prefix-cls}-inner {
max-width: @tooltip-max-width;
padding: 6px 10px;
padding: 6px 8px;
color: @tooltip-color;
text-align: left;
text-decoration: none;

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

@ -84,7 +84,7 @@
}
span {
&.@{tree-prefix-cls}-checkbox {
margin: 0 4px 0 2px;
margin: 4px 4px 0 2px;
}
&.@{tree-prefix-cls}-switcher,
&.@{tree-prefix-cls}-iconEle {
@ -178,16 +178,14 @@
span {
&.@{tree-prefix-cls}-switcher {
background: @component-background;
color: @text-color;
color: @tree-showline-icon-color;
&.@{tree-prefix-cls}-switcher-noop {
.antTreeShowLineIcon("tree-doc-icon");
}
&.@{tree-prefix-cls}-switcher_open {
color: @tree-showline-icon-color;
.antTreeShowLineIcon("tree-showline-open-icon");
}
&.@{tree-prefix-cls}-switcher_close {
color: @tree-showline-icon-color;
.antTreeShowLineIcon("tree-showline-close-icon");
}
}