Fix styles (#7924)

* update demo * Fix styles * fix snap * Fix back-top ci
7 years ago · ffffd0f4c5
parent d0b08cd2ea
commit ffffd0f4c5
26 changed files with 59 additions and 59 deletions
--- a/components/alert/style/index.less
+++ b/components/alert/style/index.less
@ -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 {
--- a/components/anchor/style/index.less
+++ b/components/anchor/style/index.less
@ -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;
--- a/components/back-top/tests/index.test.js
+++ b/components/back-top/tests/index.test.js
@ -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);
  });
 });
--- a/components/back-top/index.tsx
+++ b/components/back-top/index.tsx
@ -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>
    );

--- a/components/back-top/style/index.less
+++ b/components/back-top/style/index.less
@ -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;
  }
 }
--- a/components/card/tests/snapshots/demo.test.js.snap
+++ b/components/card/tests/snapshots/demo.test.js.snap
@ -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>
--- a/components/card/demo/meta.md
+++ b/components/card/demo/meta.md
@ -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" />}
--- a/components/card/style/index.less
+++ b/components/card/style/index.less
@ -200,6 +200,7 @@

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

--- a/components/collapse/style/index.less
+++ b/components/collapse/style/index.less
@ -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;
    }
  }
 }
--- a/components/input/tests/snapshots/demo.test.js.snap
+++ b/components/input/tests/snapshots/demo.test.js.snap
@ -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=""
  />
--- a/components/input/demo/presuffix.md
+++ b/components/input/demo/presuffix.md
@ -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}
--- a/components/list/tests/snapshots/demo.test.js.snap
+++ b/components/list/tests/snapshots/demo.test.js.snap
@ -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
--- a/components/list/demo/loadmore.md
+++ b/components/list/demo/loadmore.md
@ -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;
 }
 ````
--- a/components/list/demo/vertical.md
+++ b/components/list/demo/vertical.md
@ -44,6 +44,7 @@ const IconText = ({ type, text }) => (
 ReactDOM.render(
  <List
    itemLayout="vertical"
+    size="large"
    pagination={pagination}
    dataSource={listData}
    renderItem={item => (
--- a/components/modal/style/confirm.less
+++ b/components/modal/style/confirm.less
@ -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;
    }

--- a/components/popover/style/index.less
+++ b/components/popover/style/index.less
@ -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;
    }
--- a/components/style/mixins/iconfont.less
+++ b/components/style/mixins/iconfont.less
@ -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);
--- a/components/style/themes/default.less
+++ b/components/style/themes/default.less
@ -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
 // --
--- a/components/table/demo/expand.md
+++ b/components/table/demo/expand.md
@ -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);
--- a/components/table/style/index.less
+++ b/components/table/style/index.less
@ -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;
--- a/components/tabs/style/card-style.less
+++ b/components/tabs/style/card-style.less
@ -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;
--- a/components/tabs/style/index.less
+++ b/components/tabs/style/index.less
@ -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;
--- a/components/tag/style/index.less
+++ b/components/tag/style/index.less
@ -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;
    }
  }

--- a/components/time-picker/style/index.less
+++ b/components/time-picker/style/index.less
@ -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 {
--- a/components/tooltip/style/index.less
+++ b/components/tooltip/style/index.less
@ -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;
--- a/components/tree/style/index.less
+++ b/components/tree/style/index.less
@ -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");
          }
        }