feat: update 3.10.7 style

6 years ago · d59d6ee5ad
53 changed files with 727 additions and 816 deletions
--- a/components/alert/style/index.less
+++ b/components/alert/style/index.less
@ -18,7 +18,7 @@
  }

  &-icon {
-    top: 8px + @font-size-base * @line-height-base / 2 - @font-size-base / 2 + 1px;
+    top: 8px + @font-size-base * @line-height-base / 2 - @font-size-base / 2;
    left: 16px;
    position: absolute;
  }
@ -30,34 +30,34 @@
  }

  &-success {
-    border: @border-width-base @border-style-base ~`colorPalette("@{success-color}", 3)`;
-    background-color: ~`colorPalette("@{success-color}", 1)`;
+    border: @border-width-base @border-style-base @alert-success-border-color;
+    background-color: @alert-success-bg-color;
    .@{alert-prefix-cls}-icon {
-      color: @success-color;
+      color: @alert-success-icon-color;
    }
  }

  &-info {
-    border: @border-width-base @border-style-base ~`colorPalette("@{info-color}", 3)`;
-    background-color: ~`colorPalette("@{info-color}", 1)`;
+    border: @border-width-base @border-style-base @alert-info-border-color;
+    background-color: @alert-info-bg-color;
    .@{alert-prefix-cls}-icon {
-      color: @info-color;
+      color: @alert-info-icon-color;
    }
  }

  &-warning {
-    border: @border-width-base @border-style-base ~`colorPalette("@{warning-color}", 3)`;
-    background-color: ~`colorPalette("@{warning-color}", 1)`;
+    border: @border-width-base @border-style-base @alert-warning-border-color;
+    background-color: @alert-warning-bg-color;
    .@{alert-prefix-cls}-icon {
-      color: @warning-color;
+      color: @alert-warning-icon-color;
    }
  }

  &-error {
-    border: @border-width-base @border-style-base ~`colorPalette("@{error-color}", 3)`;
-    background-color: ~`colorPalette("@{error-color}", 1)`;
+    border: @border-width-base @border-style-base @alert-error-border-color;
+    background-color: @alert-error-bg-color;
    .@{alert-prefix-cls}-icon {
-      color: @error-color;
+      color: @alert-error-icon-color;
    }
  }

@ -70,7 +70,7 @@
    overflow: hidden;
    cursor: pointer;

-    .@{iconfont-css-prefix}-cross {
+    .@{iconfont-css-prefix}-close {
      color: @alert-close-color;
      transition: color .3s;
      &:hover {
--- a/components/anchor/style/index.less
+++ b/components/anchor/style/index.less
@ -51,8 +51,8 @@
  }

  &-link {
-    padding: 8px 0 8px 16px;
-    line-height: 1;
+    padding: 7px 0 7px 16px;
+    line-height: 1.143;

    &-title {
      display: block;
@ -62,7 +62,7 @@
      white-space: nowrap;
      overflow: hidden;
      text-overflow: ellipsis;
-      margin-bottom: 8px;
+      margin-bottom: 6px;

      &:only-child {
        margin-bottom: 0;
@ -75,7 +75,7 @@
  }

  &-link &-link {
-    padding-top: 6px;
-    padding-bottom: 6px;
+    padding-top: 5px;
+    padding-bottom: 5px;
  }
 }
--- a/components/auto-complete/style/index.less
+++ b/components/auto-complete/style/index.less
@ -52,6 +52,9 @@
      &:hover {
        .hover;
      }
+      &[disabled] {
+        .disabled;
+      }
    }

    &-lg {
--- a/components/avatar/style/index.less
+++ b/components/avatar/style/index.less
@ -49,6 +49,12 @@
    line-height: @size;
  }

+  &-string {
+    position: absolute;
+    left: 50%;
+    transform-origin: 0 center;
+  }
+
  &.@{avatar-prefix-cls}-icon {
    font-size: @font-size;
  }
--- a/components/badge/style/index.less
+++ b/components/badge/style/index.less
@ -9,7 +9,6 @@
  position: relative;
  display: inline-block;
  line-height: 1;
-  vertical-align: middle;
  color: unset;

  &-count {
@ -112,14 +111,18 @@
    animation-fill-mode: both;
  }

-  &-not-a-wrapper .@{ant-prefix}-scroll-number {
-    top: auto;
-    display: block;
-    position: relative;
-  }
+  &-not-a-wrapper {
+    vertical-align: middle;

-  &-not-a-wrapper .@{badge-prefix-cls}-count {
-    transform: none;
+    .@{ant-prefix}-scroll-number {
+      top: auto;
+      display: block;
+      position: relative;
+    }
+
+    .@{badge-prefix-cls}-count {
+      transform: none;
+    }
  }
 }

--- a/components/button/style/index.less
+++ b/components/button/style/index.less
@ -12,7 +12,10 @@
 // Button styles
 // -----------------------------
 .@{btn-prefix-cls} {
-  line-height: @line-height-base;
+  // Fixing https://github.com/ant-design/ant-design/issues/12978
+  // It is a render problem of chrome, which is only happened in the codesandbox demo
+  // 0.001px solution works and I don't why
+  line-height: @line-height-base - 0.001;
  .btn;
  .btn-default;

@ -21,6 +24,7 @@
  > i,
  > span {
    pointer-events: none;
+    display: inline-block;
  }

  &-primary {
@ -149,7 +153,7 @@
    letter-spacing: .34em;
  }

-  &-two-chinese-chars > * {
+  &-two-chinese-chars > *:not(.@{iconfont-css-prefix}) {
    letter-spacing: .34em;
    margin-right: -.34em;
  }
@ -157,6 +161,31 @@
  &-block {
    width: 100%;
  }
+
+  .christmas&-primary:before {
+    content: '';
+    display: block;
+    position: absolute;
+    top: -6px;
+    left: 0;
+    right: 0;
+    background: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAE0AAAAXCAYAAABOHMIhAAAAGXRFWHRTb2Z0d2FyZQBBZG9iZSBJbWFnZVJlYWR5ccllPAAABiZJREFUeNrsWMtPlFcUvzPMwIDysLyRR4uATDHWCiVgSmRlios2DeiiXUFs0nRBd6arxqQhJDapkYXhP4BqDKTQhZaFNQSCaBEVJjwdHsNr5DUMDDPDzPT3u7nTDEgRKrKgc5KT+z3uufec33de99P4fD4RpL2RNgjB3kn35MkTeRERESFiYmLkGBoaKnQ6nWSNRvPPZFxr+vv7k6KioiIdDsfa8vLyQkFBgcP3Bnel3MDAQArWI0eFhISE87nb7bZ7PJ4VvLYuLi5O5+fnu9+kMNfq6+tLjIyMzMY6KeBEbK/XarXReI3lPDZMWcc4v7GxYV1dXR3Jy8ub2E5HPvJ6vRSSDH0ku1wuAfsEZOV1IEFHoeNFdHS0yMrK2knR0Lm5uR+hxLdQMjbwHTZbB41h8RGwCdc9MzMzneHh4bGJiYlf4SN8ijkfwqiIncCAAR7Iz2GPSShudjqdfeCeqampvwBQfFxc3JdYqwTv8gB8/F48A8BgKecE14V+L7ju2tpae05OzkuCCZvkPOj8mizmC6vVKtmPu+bx48cC3qI1mUyFUOyywWD4SHlELBaLJmCHNcwAghuAOujtuF4FqHO4nsX4EsAS3I4TJ04ME1h8PDE9PS09TYZoY2Pj1729vd6lpSVfkDYTPG0UkfNDRUWFgQ5Gb2Mh0N29e9eG/GQfHh4W8/PzwUy/ObQ/gMfVVlZW1iAiZdQxp3nv3LljRoL/5erVq1UIxzSiiVD9X4EDYATynCwAzGO858hCQRoaGmJFZNJz8YIcBc4BF966dau6sLAwBxVSJCUlCSThQwuU3W6XkYUok1Vzm5znQx5bbm9v77p+/frPeNSNRzZ/ISBwrG4ZR48eLamtrf2+uLjYSEG9Xi/wTISFhQlWGXohyzO/CJlVl23KQRLbABoaHx+/Z1lUZ/Hq1SsJFj3JT3hmHx8fnydPTEzMj46OziHPW2w22wxeD4Kfgadh/4YEzU8Az4DhffAn5eXlX1y6dKkEoCTspAQ9Mjs7+0BBo8Fms1lkZGTsOo0QLLRNkvnR+fEJzIMHD0xtbW39CL8JTFtSbAOvBIyLHIGVm9VzE2gKuDAMSSpcT6KXyT137lx2cnLyMXhcGDb3wq3XuWF3d/fCzZs3P0c4v5eSknJQbYLo7Ox0gC2lpaVZ3Be67Th/dnZWoAJKsJC3XA8fPhxoamp6hMb+BaaMgWcUMGtszZjiFDNmvcDI91pzG0iY4ARwkwrxkcHBwUdgNrRMbnrqoRbkVzDcvn3bl5qaWsmcgFH4G8XdEGUWFhak51AuISFBnkoCTyFbyWKxCJwIxlC0fq2rq7tcVFRkRKskjh8/Lr0+kBjCCDV/knfdv3//WX19/R8IRRNemxlu4AXwKqM+EJwdj1HbPYSwh3sCPAJDABm2LLchCjS+5/kirKGhwWk0GrMuXrxYQuX9hm/XXTMXMY+srKwI5ApZrbYmZh7deEJhAUKjLe/pLTzSsCuHrK+1tbUJVe3P6upq87Vr174rKysrYHVj/uW+OH3IfEuw4F3ee/fuPQfAvwOs5yyE4CnlFOu7BWrTCWlreO6FACpBZGwUw4BvkANLobReHb3kGZYGsGzTq/zlO8AT1ru6uoZbWlqeA6gINJAfnz59OlVLoX8Jtebm5raampqfcMvQYgTknz9//sKVK1c+y83NTdIEuCnaKMuNGzd+6+np6cCtSTkAw9D9X8Dyh+dbgaaAC1XAnUlPTy+qqqq6cPbs2UzkmWjNljiDJzpwHFnCkW2yo6NjCKW8H54wjlezKvRT09LSTsJrz5w6dSoN+Yp51ADAPUj8VoDbDq9pxrwuJcNIYQllJTIi/xopBw/VA7DJp0+f9hA78CgL5F5C8J2CpoCj8sfA6WCe/FPRhsRlZmbGIs8Y4FFO5CJgtrSsvrRVGW1V93b1myoGnKAKEcHgnwsWpg1lNI0fphwrmdqbckeU18WrnlOjqp5/j7W3BWvfQVPKa5SBkcrYCNVB65TRTlWZ1lXiXVU5xbtlDb2SPaLWYwrgHIcqPg6Vc7fbX69Yoyqfa7/AeiegbWOEVhmsVcWDwPn224iDJgla8Hd38Hd3ELQgaIeI/hZgAIPEp0vmQJdoAAAAAElFTkSuQmCC) no-repeat 50% 0;
+    background-size: 64px;
+    opacity: 1;
+  }
+
+  .christmas&-primary&-lg:before {
+    background-size: 72px;
+  }
+
+  .christmas&-primary&-sm:before {
+    background-size: 56px;
+  }
+
+  // https://github.com/ant-design/ant-design/issues/12681
+  &:empty {
+    vertical-align: top;
+  }
 }

 a.@{btn-prefix-cls} {
--- a/components/button/style/mixin.less
+++ b/components/button/style/mixin.less
@ -16,12 +16,17 @@
    &:active,
    &.active {
      .button-color(@btn-disable-color; @btn-disable-bg; @btn-disable-border);
+      text-shadow: none;
+      box-shadow: none;
    }
  }
 }

 .button-variant-primary(@color; @background) {
  .button-color(@color; @background; @background);
+  text-shadow: 0 -1px 0 rgba(0, 0, 0, .12);
+  box-shadow: 0 2px 0 rgba(0, 0, 0, .045);
+
  &:hover,
  &:focus {
    .button-color(@color; ~`colorPalette("@{background}", 5)`; ~`colorPalette("@{background}", 5)`);
@ -72,6 +77,7 @@

 .button-variant-ghost(@color) {
  .button-color(@color; transparent; @color);
+  text-shadow: none;

  &:hover,
  &:focus {
@ -112,7 +118,6 @@
  > .@{btnClassName},
  > span > .@{btnClassName} {
    position: relative;
-    line-height: @btn-height-base - 2px;

    &:hover,
    &:focus,
@ -158,6 +163,7 @@
  user-select: none;
  transition: all .3s @ease-in-out;
  position: relative;
+  box-shadow: 0 2px 0 rgba(0, 0, 0, .015);

  > .@{iconfont-css-prefix} {
    line-height: 1;
@ -175,7 +181,7 @@

  &:not([disabled]):active {
    outline: 0;
-    transition: none;
+    box-shadow: none;
  }

  &.disabled,
--- a/components/card/style/index.less
+++ b/components/card/style/index.less
@ -33,26 +33,30 @@
    .clearfix;
    margin-bottom: -1px; // Fix card grid overflow bug: https://gw.alipayobjects.com/zos/rmsportal/XonYxBikwpgbqIQBeuhk.png
    min-height: @card-head-height;
+    font-size: @font-size-lg;
+    color: @card-head-color;
+    font-weight: 500;

    &-wrapper {
      display: flex;
+      align-items: center;
    }

    &-title {
-      font-size: @font-size-lg;
      padding: @card-head-padding 0;
      text-overflow: ellipsis;
      overflow: hidden;
      white-space: nowrap;
-      color: @card-head-color;
-      font-weight: 500;
-      display: inline-block;
      flex: 1;
+      display: inline-block;
    }

    .@{ant-prefix}-tabs {
      margin-bottom: -17px;
      clear: both;
+      font-size: @font-size-base;
+      color: @text-color;
+      font-weight: normal;

      &-bar {
        border-bottom: @border-width-base @border-style-base @border-color-split;
@ -63,6 +67,9 @@
  &-extra {
    float: right;
    padding: @card-head-padding + 1.5px 0;
+    font-size: @font-size-base;
+    color: @text-color;
+    font-weight: normal;
    text-align: right;
    // https://stackoverflow.com/a/22429853/3040605
    margin-left: auto;
@ -73,7 +80,7 @@
    .clearfix;
  }

-  &-contain-grid:not(&-loading) {
+  &-contain-grid:not(&-loading) &-body {
    margin: -1px 0 0 -1px;
    padding: 0;
  }
@ -93,7 +100,7 @@
    }
  }

-  &-contain-tabs &-head-title {
+  &-contain-tabs > &-head &-head-title {
    padding-bottom: 0;
    min-height: @card-head-height - @card-head-padding;
  }
@ -142,8 +149,6 @@
        & > .anticon {
          font-size: 16px;
          line-height: 22px;
-          display: block;
-          width: 100%;
        }

        a {
--- a/components/cascader/style/index.less
+++ b/components/cascader/style/index.less
@ -13,7 +13,7 @@
    background-color: transparent !important;
    cursor: pointer;
    width: 100%;
-    position: static;
+    position: relative;
  }

  &-picker-show-search &-input.@{ant-prefix}-input {
@ -101,13 +101,9 @@
      margin-top: -6px;
      line-height: 12px;
      color: @disabled-color;
-      &:before {
-        transition: transform .2s;
-      }
+      transition: transform .2s;
      &&-expand {
-        &:before {
-          transform: rotate(180deg);
-        }
+        transform: rotate(180deg);
      }
    }
  }
@ -205,17 +201,14 @@
    &-expand {
      position: relative;
      padding-right: 24px;
-      &:after {
-        .iconfont-font("\e61f");
-        .iconfont-size-under-12px(8px);
-        color: @text-color-secondary;
-        position: absolute;
-        right: @control-padding-horizontal;
-      }
    }
-    &-loading:after {
-      .iconfont-font("\e64d");
-      animation: loadingCircle 1s infinite linear;
+
+    &-expand &-expand-icon,
+    &-expand &-loading-icon {
+      .iconfont-size-under-12px(10px);
+      color: @text-color-secondary;
+      position: absolute;
+      right: @control-padding-horizontal;
    }

    & &-keyword {
--- a/components/checkbox/style/mixin.less
+++ b/components/checkbox/style/mixin.less
@ -50,6 +50,9 @@
      border-radius: @border-radius-sm;
      background-color: @checkbox-check-color;
      transition: all .3s;
+      // Fix IE checked style
+      // https://github.com/ant-design/ant-design/issues/12597
+      border-collapse: separate;

      &:after {
        @check-width: (@checkbox-size / 14) * 5px;
@ -84,25 +87,6 @@
    }
  }

-  // 半选状态
-  .@{checkbox-prefix-cls}-indeterminate .@{checkbox-inner-prefix-cls}:after {
-    @indeterminate-width: @checkbox-size - 8px;
-    @indeterminate-height: @checkbox-size - 8px;
-    content: ' ';
-    transform: translate(-50%, -50%) scale(1);
-    border: 0;
-    left: 50%;
-    top: 50%;
-    width: @indeterminate-width;
-    height: @indeterminate-height;
-    background-color: @checkbox-color;
-    opacity: 1;
-  }
-
-  .@{checkbox-prefix-cls}-indeterminate.@{checkbox-prefix-cls}-disabled .@{checkbox-inner-prefix-cls}:after {
-    border-color: @disabled-color;
-  }
-
  // 选中状态
  .@{checkbox-prefix-cls}-checked .@{checkbox-inner-prefix-cls}:after {
    transform: rotate(45deg) scale(1);
@ -143,6 +127,7 @@
      &:after {
        animation-name: none;
        border-color: @input-disabled-bg;
+        border-collapse: separate;
      }
    }

@ -182,6 +167,32 @@
      margin-left: 0;
    }
  }
+
+  // 半选状态
+  .@{checkbox-prefix-cls}-indeterminate {
+    .@{checkbox-inner-prefix-cls} {
+      background-color: #fff;
+      border-color: @border-color-base;
+    }
+    .@{checkbox-inner-prefix-cls}:after {
+      @indeterminate-width: @checkbox-size - 8px;
+      @indeterminate-height: @checkbox-size - 8px;
+      content: ' ';
+      transform: translate(-50%, -50%) scale(1);
+      border: 0;
+      left: 50%;
+      top: 50%;
+      width: @indeterminate-width;
+      height: @indeterminate-height;
+      background-color: @checkbox-color;
+      opacity: 1;
+    }
+
+    &.@{checkbox-prefix-cls}-disabled .@{checkbox-inner-prefix-cls}:after {
+      border-color: @disabled-color;
+      background-color: @disabled-color;
+    }
+  }
 }

@keyframes antCheckboxEffect {
--- a/components/collapse/style/index.less
+++ b/components/collapse/style/index.less
@ -37,17 +37,17 @@

      .arrow {
        .iconfont-mixin();
-        .collapse-close();
        font-size: @font-size-sm;
        position: absolute;
        display: inline-block;
        line-height: 46px;
        vertical-align: top;
-        transition: transform 0.24s;
-        top: 0;
+        top: 50%;
+        transform: translateY(-50%);
        left: @padding-md;
-        &:before {
-          content: "\E61F";
+        & svg {
+          .collapse-close();
+          transition: transform 0.24s;
        }
      }

@ -89,7 +89,7 @@
  }

  & > &-item > &-header[aria-expanded="true"] {
-    .arrow {
+    .anticon-right svg {
      .collapse-open();
    }
  }
--- a/components/date-picker/style/Calendar.less
+++ b/components/date-picker/style/Calendar.less
@ -275,10 +275,8 @@
      text-align: center;
      display: block;
    }
-    &-extra + &-btn {
-      border-top: @border-width-base @border-style-base @border-color-split;
-      margin: 0 -12px;
-      padding: 0 12px;
+    &-extra {
+      text-align: left;
    }
  }

@ -311,7 +309,6 @@
  }

  .@{calendar-prefix-cls}-clear-btn:after {
-    .iconfont-font("\e62e");
    font-size: @font-size-base;
    color: @disabled-color;
    display: inline-block;
--- a/components/date-picker/style/Picker.less
+++ b/components/date-picker/style/Picker.less
@ -62,11 +62,13 @@
    font-size: @font-size-sm;
    transition: all .3s;
    user-select: none;
+    z-index: 1;
  }

  &-clear {
    opacity: 0;
-    z-index: 1;
+    z-index: 2;
+    font-size: @font-size-base;
    color: @disabled-color;
    background: @input-bg;
    pointer-events: none;
@ -82,15 +84,11 @@
  }

  &-icon {
+    font-family: "anticon";
+    font-size: @font-size-base;
    color: @disabled-color;
-    &:after {
-      content: "\e6bb";
-      font-family: "anticon";
-      font-size: @font-size-base;
-      color: @disabled-color;
-      display: inline-block;
-      line-height: 1;
-    }
+    display: inline-block;
+    line-height: 1;
  }

  &-small &-clear,
--- a/components/date-picker/style/RangePicker.less
+++ b/components/date-picker/style/RangePicker.less
@ -147,6 +147,10 @@
    }
  }

+  .@{calendar-prefix-cls}-footer-extra {
+    float: left;
+  }
+
  // `div` for selector specificity
  div&-quick-selector {
    text-align: left;
--- a/components/divider/style/index.less
+++ b/components/divider/style/index.less
@ -21,6 +21,7 @@
    display: block;
    height: 1px;
    width: 100%;
+    min-width: 100%; // Fix https://github.com/ant-design/ant-design/issues/10914
    margin: 24px 0;
    clear: both;
  }
--- a/components/drawer/style/drawer.less
+++ b/components/drawer/style/drawer.less
@ -6,6 +6,7 @@
  position: fixed;
  top: 0;
  width: 0%;
+  height: 100%;
  z-index: @zindex-modal;
  > * {
    transition: transform @animation-duration-slow @ease-base-in;
@ -28,6 +29,9 @@
    &.@{dawer-prefix-cls}-open {
      width: 100%;
    }
+    &.@{dawer-prefix-cls}-open.no-mask {
+      width: 0%;
+    }
  }
  &-left {
    &.@{dawer-prefix-cls}-open {
@ -51,10 +55,17 @@

  &-top,
  &-bottom {
-    .@{dawer-prefix-cls}-content-wrapper,
-    .@{dawer-prefix-cls}-content {
+    width: 100%;
+    height: 0%;
+    .@{dawer-prefix-cls}-content-wrapper {
      width: 100%;
    }
+    &.@{dawer-prefix-cls}-open {
+      height: 100%;
+    }
+    &.@{dawer-prefix-cls}-open.no-mask {
+      height: 0%;
+    }
  }
  &-top {
    &.@{dawer-prefix-cls}-open {
@ -75,13 +86,12 @@
      }
    }
  }
-
  &.@{dawer-prefix-cls}-open {
    .@{dawer-prefix-cls} {
      &-mask {
        opacity: 0.3;
        height: 100%;
-        animation: antdDrawerFadeIn @animation-duration-slow  @ease-base-out;
+        animation: antdDrawerFadeIn @animation-duration-slow @ease-base-out;
        transition: none;
      }
    }
@ -129,12 +139,6 @@
      height: 56px;
      line-height: 56px;
      font-size: @font-size-lg;
-
-      &:before {
-        content: "\e633";
-        display: block;
-        font-family: "anticon" !important;
-      }
    }

    &:focus,
@ -170,9 +174,6 @@
  }
  &-open {
    transition: transform @animation-duration-slow @ease-base-out;
-    > * {
-      transition: transform @animation-duration-slow @ease-base-out;
-    }
    &-content {
      box-shadow: @shadow-2;
    }
--- a/components/drawer/style/index.less
+++ b/components/drawer/style/index.less
@ -1,4 +1,3 @@
@import "../../style/themes/default";
@import "../../style/mixins/index";
@import "./drawer";
-
--- a/components/dropdown/style/index.less
+++ b/components/dropdown/style/index.less
@ -55,6 +55,10 @@
    &-submenu-popup {
      position: absolute;
      z-index: @zindex-dropdown;
+
+      > .@{dropdown-prefix-cls}-menu {
+        transform-origin: 0 0;
+      }
    }

    &-item,
@ -117,10 +121,8 @@
      .@{dropdown-prefix-cls}-menu-submenu-arrow {
        position: absolute;
        right: @padding-xs;
-        &:after {
-          font-family: "anticon" !important;
+        &-icon {
          font-style: normal;
-          content: "\e61f";
          color: @text-color-secondary;
          .iconfont-size-under-12px(10px);
        }
@ -146,7 +148,7 @@

    &-submenu&-submenu-disabled .@{dropdown-prefix-cls}-menu-submenu-title {
      &,
-      .@{dropdown-prefix-cls}-menu-submenu-arrow:after {
+      .@{dropdown-prefix-cls}-menu-submenu-arrow-icon {
        color: @disabled-color;
      }
    }
@ -185,12 +187,9 @@

 .@{dropdown-prefix-cls}-trigger,
 .@{dropdown-prefix-cls}-link {
-  .@{iconfont-css-prefix}-down {
+  .@{iconfont-css-prefix}:not(.@{iconfont-css-prefix}-ellipsis) {
    .iconfont-size-under-12px(10px);
  }
-  .@{iconfont-css-prefix}-ellipsis {
-    text-shadow: 0 0 currentColor;
-  }
 }

 .@{dropdown-prefix-cls}-button {
@ -200,7 +199,7 @@
    padding-left: @padding-xs;
    padding-right: @padding-xs;
  }
-  .@{iconfont-css-prefix}-down {
+  .@{iconfont-css-prefix}:not(.@{iconfont-css-prefix}-ellipsis) {
    .iconfont-size-under-12px(10px);
  }
 }
--- a/components/form/style/index.less
+++ b/components/form/style/index.less
@ -8,7 +8,7 @@
@form-prefix-cls: ~"@{ant-prefix}-form";
@form-component-height: @input-height-base;
@form-component-max-height: @input-height-lg;
-@form-feedback-icon-size: 14px;
+@form-feedback-icon-size: @font-size-base;
@form-help-margin-top: (@form-component-height - @form-component-max-height) / 2 + 2px;

 .@{form-prefix-cls} {
@ -131,7 +131,9 @@ input[type="checkbox"] {
 .@{form-prefix-cls}-explain,
 .@{form-prefix-cls}-extra {
  color: @text-color-secondary;
-  line-height: @line-height-base;
+  // Magic tweak pixel number to float line-height diff in windows
+  // Fix https://github.com/ant-design/ant-design/issues/12803
+  line-height: @line-height-base + 0.024;
  transition: color .3s @ease-out; // sync input color transition
  margin-top: @form-help-margin-top;
  clear: both;
@ -381,9 +383,10 @@ form {
      margin-bottom: 24px;
    }

-    > .@{form-prefix-cls}-item-control-wrapper, > .@{form-prefix-cls}-item-label {
+    > .@{form-prefix-cls}-item-control-wrapper,
+    > .@{form-prefix-cls}-item-label {
      display: inline-block;
-      vertical-align: middle;
+      vertical-align: top;
    }
  }

@ -394,11 +397,6 @@ form {
  .has-feedback {
    display: inline-block;
  }
-
-  // Fix https://github.com/ant-design/ant-design/issues/1040
-  .@{form-prefix-cls}-explain {
-    position: absolute;
-  }
 }

 // Validation state
@ -406,7 +404,7 @@ form {
 .has-warning,
 .has-error,
 .is-validating {
-  &.has-feedback .@{form-prefix-cls}-item-children:after {
+  &.has-feedback .@{form-prefix-cls}-item-children-icon {
    position: absolute;
    top: 50%;
    right: 0;
@ -419,15 +417,22 @@ form {
    text-align: center;
    font-size: @form-feedback-icon-size;
    animation: zoomIn .3s @ease-out-back;
-    .iconfont-font("");
    z-index: 1;
+
+    & svg {
+      position: absolute;
+      top: 0;
+      right: 0;
+      bottom: 0;
+      left: 0;
+      margin: auto;
+    }
  }
 }

 .has-success {
-  &.has-feedback .@{form-prefix-cls}-item-children:after {
+  &.has-feedback .@{form-prefix-cls}-item-children-icon {
    animation-name: diffZoomIn1 !important;
-    content: '\e630';
    color: @success-color;
  }
 }
@ -435,8 +440,7 @@ form {
 .has-warning {
  .form-control-validation(@warning-color; @warning-color;);

-  &.has-feedback .@{form-prefix-cls}-item-children:after {
-    content: '\e62c';
+  &.has-feedback .@{form-prefix-cls}-item-children-icon {
    color: @warning-color;
    animation-name: diffZoomIn3 !important;
  }
@ -482,8 +486,7 @@ form {
 .has-error {
  .form-control-validation(@error-color; @error-color;);

-  &.has-feedback .@{form-prefix-cls}-item-children:after {
-    content: '\e62e';
+  &.has-feedback .@{form-prefix-cls}-item-children-icon {
    color: @error-color;
    animation-name: diffZoomIn2 !important;
  }
@ -552,10 +555,8 @@ form {
 }

 .is-validating {
-  &.has-feedback .@{form-prefix-cls}-item-children:after {
+  &.has-feedback .@{form-prefix-cls}-item-children-icon {
    display: inline-block;
-    animation: loadingCircle 1s infinite linear;
-    content: "\e64d";
    color: @primary-color;
  }
 }
--- a/components/icon/style/index.js
+++ b/components/icon/style/index.js
@ -1 +1,2 @@
 import '../../style/index.less';
+import './index.less';
--- a/components/input-number/style/index.less
+++ b/components/input-number/style/index.less
@ -124,10 +124,7 @@
    &-inner {
      top: 50%;
      margin-top: -5px;
-      &:before {
-        text-align: center;
-        content: "\e61e";
-      }
+      text-align: center;
    }
    &:hover {
      height: 60% !important;
@ -141,10 +138,7 @@
    &-inner {
      top: 50%;
      margin-top: -6px;
-      &:before {
-        text-align: center;
-        content: "\e61d";
-      }
+      text-align: center;
    }
    &:hover {
      height: 60% !important;
--- a/components/input/style/mixin.less
+++ b/components/input/style/mixin.less
@ -263,6 +263,21 @@
    display: block;
    .clearfix;

+    &-addon,
+    &-wrap,
+    > .@{inputClass} {
+      &:not(:first-child):not(:last-child) {
+        border-right-width: 1px;
+        border-right-color: transparent;
+        &:hover {
+          .hover();
+        }
+        &:focus {
+          .active();
+        }
+      }
+    }
+
    & > * {
      border-radius: 0;
      border-right-width: 0;
@ -272,7 +287,7 @@
    }

    // https://github.com/ant-design/ant-design/issues/11863
-    & > span > .@{inputClass} {
+    & > span:not(:last-child) > .@{inputClass} {
      border-right-width: 0;
    }

@ -289,7 +304,14 @@
    & > .@{ant-prefix}-mention-wrapper .@{ant-prefix}-mention-editor,
    & > .@{ant-prefix}-time-picker .@{ant-prefix}-time-picker-input {
      border-radius: 0;
-      border-right-width: 0;
+      border-right-width: 1px;
+      border-right-color: transparent;
+      &:hover {
+        .hover();
+      }
+      &:focus {
+        .active();
+      }
    }

    & > *:first-child,
@ -308,11 +330,27 @@
    & > .@{ant-prefix}-calendar-picker:last-child .@{ant-prefix}-input,
    & > .@{ant-prefix}-select-auto-complete:last-child .@{ant-prefix}-input,
    & > .@{ant-prefix}-cascader-picker:last-child .@{ant-prefix}-input,
+    & > .@{ant-prefix}-cascader-picker-focused:last-child .@{ant-prefix}-input,
    & > .@{ant-prefix}-mention-wrapper:last-child .@{ant-prefix}-mention-editor,
    & > .@{ant-prefix}-time-picker:last-child .@{ant-prefix}-time-picker-input {
      border-top-right-radius: @border-radius-base;
      border-bottom-right-radius: @border-radius-base;
      border-right-width: 1px;
+      border-right-color: @input-border-color;
+      &:hover {
+        .hover();
+      }
+      &:focus {
+        .active();
+        .@{ant-prefix}-cascader-input {
+          .active();
+        }
+      }
+    }
+
+    // https://github.com/ant-design/ant-design/issues/12493
+    & > .@{ant-prefix}-select-auto-complete .@{ant-prefix}-input {
+      vertical-align: top;
    }
  }
 }
--- a/components/layout/style/index.less
+++ b/components/layout/style/index.less
@ -8,6 +8,8 @@
  flex-direction: column;
  flex: auto;
  background: @layout-body-background;
+  /* fix firefox can't set height smaller than content on flex item */
+  min-height: 0;

  &,
  * {
@ -43,6 +45,8 @@

  &-content {
    flex: auto;
+    /* fix firefox can't set height smaller than content on flex item */
+    min-height: 0;
  }

  &-sider {
--- a/components/list/style/index.less
+++ b/components/list/style/index.less
@ -28,21 +28,20 @@
  &-empty-text {
    color: @text-color-secondary;
    font-size: @font-size-base;
-    padding: 16px;
+    padding: @list-empty-text-padding;
    text-align: center;
  }
  &-item {
    align-items: center;
    display: flex;
-    padding-top: 12px;
-    padding-bottom: 12px;
+    padding: @list-item-padding;
    &-meta {
      align-items: flex-start;
      display: flex;
      flex: 1;
      font-size: 0;
      &-avatar {
-        margin-right: 16px;
+        margin-right: @list-item-meta-avatar-margin-right;
      }
      &-content {
        flex: 1 0;
@ -164,13 +163,10 @@
      margin-left: 58px;
    }
    &-meta {
-      margin-bottom: 16px;
-      &-avatar {
-        display: none;
-      }
+      margin-bottom: @list-item-meta-margin-bottom;
      &-title {
        color: @heading-color;
-        margin-bottom: 12px;
+        margin-bottom: @list-item-meta-title-margin-bottom;
        font-size: @font-size-lg;
        line-height: 24px;
      }
@ -179,7 +175,7 @@
      display: block;
      color: @text-color;
      font-size: @font-size-base;
-      margin-bottom: 16px;
+      margin: @list-item-content-margin;
    }
    &-action {
      margin-left: auto;
--- a/components/menu/style/dark.less
+++ b/components/menu/style/dark.less
@ -106,7 +106,7 @@

  &&-dark &-item-selected,
  &-submenu-popup&-dark &-item-selected {
-    background-color: @menu-dark-item-selected-bg;
+    background-color: @menu-dark-item-active-bg;
  }

  // Disabled state sets text to dark gray and nukes hover/tab effects
--- a/components/menu/style/index.less
+++ b/components/menu/style/index.less
@ -157,6 +157,7 @@
    .@{iconfont-css-prefix} {
      min-width: 14px;
      margin-right: 10px;
+      font-size: @font-size-base;
      transition: font-size .15s @ease-out, margin .3s @ease-in-out;
      + span {
        transition: opacity .3s @ease-in-out, width .3s @ease-in-out;
@ -180,11 +181,15 @@
      border-radius: @border-radius-base;
      z-index: @zindex-dropdown;

+      .submenu-title-wrapper {
+        padding-right: 20px;
+      }
+
      &:before {
        position: absolute;
        top: -7px;
-        left: -6px;
-        right: -6px;
+        left: 0;
+        right: 0;
        bottom: 0;
        content: ' ';
        opacity: .0001;
@ -272,12 +277,14 @@
    border-bottom: @border-width-base @border-style-base @border-color-split;
    box-shadow: none;
    line-height: 46px;
+    white-space: nowrap;

    > .@{menu-prefix-cls}-item,
    > .@{menu-prefix-cls}-submenu {
      position: relative;
      top: 1px;
-      float: left;
+      display: inline-block;
+      vertical-align: bottom;
      border-bottom: 2px solid transparent;

      &:hover,
@ -325,7 +332,7 @@
        right: 0;
        top: 0;
        bottom: 0;
-        border-right: 3px solid @menu-highlight-color;
+        border-right: @menu-item-active-border-width solid @menu-highlight-color;
        transform: scaleY(.0001);
        opacity: 0;
        transition: transform .15s @ease-out, opacity .15s @ease-out;
--- a/components/modal/style/confirm.less
+++ b/components/modal/style/confirm.less
@ -1,6 +1,6 @@
@import "../../style/mixins/index";

-@confirm-prefix-cls: ~"@{ant-prefix}-confirm";
+@confirm-prefix-cls: ~"@{ant-prefix}-modal-confirm";

 .@{confirm-prefix-cls} {
  .@{ant-prefix}-modal-header {
@ -72,20 +72,3 @@
    color: @success-color;
  }
 }
-
-.@{confirm-prefix-cls}-centered {
-  text-align: center;
-  &:before {
-    content: '';
-    display: inline-block;
-    height: 100%;
-    vertical-align: middle;
-    width: 0;
-  }
-  .@{confirm-prefix-cls} {
-    display: inline-block;
-    vertical-align: middle;
-    top: 0;
-    text-align: left;
-  }
-}
--- a/components/modal/style/modal.less
+++ b/components/modal/style/modal.less
@ -65,12 +65,6 @@
      height: 56px;
      line-height: 56px;
      font-size: @font-size-lg;
-
-      &:before {
-        content: "\e633";
-        display: block;
-        font-family: "anticon" !important;
-      }
    }

    &:focus,
@ -83,7 +77,7 @@
  &-header {
    padding: 16px 24px;
    border-radius: @border-radius-base @border-radius-base 0 0;
-    background: @component-background;
+    background: @modal-header-bg;
    color: @text-color;
    border-bottom: @border-width-base @border-style-base @border-color-split;
  }
@ -150,12 +144,6 @@
    top: 0;
    text-align: left;
  }
-  .@{table-prefix-cls} {
-    &-body {
-      white-space: nowrap;
-      overflow-x: auto;
-    }
-  }
 }

@media (max-width: @screen-sm-max) {
--- a/components/notification/style/index.less
+++ b/components/notification/style/index.less
@ -28,6 +28,11 @@
    }
  }

+  &-close-icon {
+    font-size: @font-size-base;
+    cursor: pointer;
+  }
+
  &-notice {
    padding: @notification-padding;
    border-radius: @border-radius-base;
@ -55,7 +60,6 @@
        &:before {
          content: '';
          display: block;
-          padding-bottom: 100%;
        }
      }
    }
@ -99,13 +103,6 @@
      }
    }

-    &-close-x:after {
-      font-size: @font-size-base;
-      content: "\e633";
-      font-family: "anticon";
-      cursor: pointer;
-    }
-
    &-close {
      position: absolute;
      right: 22px;
--- a/components/pagination/style/index.less
+++ b/components/pagination/style/index.less
@ -87,40 +87,47 @@
  &-jump-prev,
  &-jump-next {
    outline: 0;
+    .@{pagination-prefix-cls}-item-container {
+      position: relative;

-    &:after {
-      content: "•••";
-      display: block;
-      letter-spacing: 2px;
-      color: @disabled-color;
-      text-align: center;
-    }
-
-    &:focus,
-    &:hover {
-      &:after {
+      .@{pagination-prefix-cls}-item-link-icon {
+        .iconfont-size-under-12px(12px);
        color: @primary-color;
-        .iconfont-size-under-12px(8px);
        letter-spacing: -1px;
-        font-family: "anticon";
+        opacity: 0;
+        transition: all .2s;
+        &-svg {
+          top: 0;
+          right: 0;
+          bottom: 0;
+          left: 0;
+          margin: auto;
+        }
      }
-    }
-  }

-  &-jump-prev {
-    &:focus,
-    &:hover {
-      &:after {
-        content: "\e620\e620";
+      .@{pagination-prefix-cls}-item-ellipsis {
+        position: absolute;
+        display: block;
+        letter-spacing: 2px;
+        color: @disabled-color;
+        text-align: center;
+        opacity: 1;
+        transition: all .2s;
+        top: 0;
+        right: 0;
+        bottom: 0;
+        left: 0;
+        margin: auto;
      }
    }
-  }

-  &-jump-next {
    &:focus,
    &:hover {
-      &:after {
-        content: "\e61f\e61f";
+      .@{pagination-prefix-cls}-item-link-icon {
+        opacity: 1;
+      }
+      .@{pagination-prefix-cls}-item-ellipsis {
+        opacity: 0;
      }
    }
  }
@ -168,15 +175,9 @@
      outline: none;
      display: block;
      transition: all .3s;
-
-      &:after {
-        font-size: 12px;
-        display: block;
-        height: @pagination-item-size - 2px;
-        font-family: "anticon";
-        text-align: center;
-        font-weight: 500;
-      }
+      font-size: 12px;
+      height: 100%;
+      text-align: center;
    }

    &:focus .@{pagination-prefix-cls}-item-link,
@ -186,20 +187,6 @@
    }
  }

-  &-prev {
-    .@{pagination-prefix-cls}-item-link:after {
-      content: "\e620";
-      display: block;
-    }
-  }
-
-  &-next {
-    .@{pagination-prefix-cls}-item-link:after {
-      content: "\e61f";
-      display: block;
-    }
-  }
-
  &-disabled {
    &,
    &:hover,
@ -225,6 +212,7 @@

    &-size-changer.@{ant-prefix}-select {
      display: inline-block;
+      width: auto;
      margin-right: 8px;
    }

--- a/components/popover/style/index.less
+++ b/components/popover/style/index.less
@ -76,10 +76,12 @@
    padding: 4px 0 12px;
    font-size: @font-size-base;
    color: @popover-color;
+    position: relative;
    > .@{iconfont-css-prefix} {
-      color: @warning-color;
-      line-height: @line-height-base + 0.1;
      position: absolute;
+      top: 8px; // 4px for padding-top, 4px for vertical middle;
+      color: @warning-color;
+      font-size: @font-size-base;
    }
    &-title {
      padding-left: @font-size-base + 8px;
--- a/components/progress/style/index.less
+++ b/components/progress/style/index.less
@ -132,7 +132,9 @@
    transform: translateY(-50%);
    left: 0;
    margin: 0;
-    color: @text-color;
+    color: @progress-text-color;
+    white-space: normal;
+    padding: 0 6px;

    .@{iconfont-css-prefix} {
      font-size: 14 / 12em;
--- a/components/radio/style/index.less
+++ b/components/radio/style/index.less
@ -1,6 +1,5 @@
@import "../../style/themes/default";
@import "../../style/mixins/index";
-@import "../../style/mixins/index";

@radio-prefix-cls: ~"@{ant-prefix}-radio";
@radio-group-prefix-cls: ~"@{radio-prefix-cls}-group";
--- a/components/rate/style/index.less
+++ b/components/rate/style/index.less
@ -40,6 +40,9 @@
      user-select: none;
      transition: all .3s;
      color: @rate-star-bg;
+      .@{iconfont-css-prefix} {
+        vertical-align: middle;
+      }
    }

    &:hover,
--- a/components/select/style/index.less
+++ b/components/select/style/index.less
@ -27,7 +27,6 @@
  transition: color 0.3s ease, opacity 0.15s ease;
  &:before {
    display: block;
-    .iconfont-font("\e62e");
  }
  &:hover {
    color: @text-color-secondary;
@ -64,12 +63,7 @@
    color: @disabled-color;
    font-size: @font-size-sm;

-    * {
-      display: none;
-    }
-
-    &:before {
-      content: '\e61d';
+    & &-icon svg {
      transition: transform .3s;
    }
  }
@ -257,10 +251,11 @@

  &-search__field__mirror {
    position: absolute;
-    top: -9999px;
-    left: -9999px;
+    top: 0;
+    left: 0;
    white-space: pre;
    pointer-events: none;
+    opacity: 0;
  }

  &-search--inline {
@ -366,9 +361,6 @@
      &:hover {
        color: #404040;
      }
-      &:before {
-        content: "\e633";
-      }
    }

    .@{select-prefix-cls}-selection__clear {
@ -385,8 +377,10 @@
  }

  &-open {
-    .@{select-prefix-cls}-arrow:before {
-      transform: rotate(180deg);
+    .@{select-prefix-cls}-arrow {
+      &-icon svg {
+        transform: rotate(180deg);
+      }
    }
    .@{select-prefix-cls}-selection {
      .active();
@ -411,7 +405,7 @@
      height: 100%;
      position: relative;
      z-index: 1;
-      transition: all .3s @ease-in-out;
+      transition: all .3s @ease-in-out, height 0s;
      box-shadow: none;
    }
  }
@ -422,6 +416,10 @@

 .@{select-prefix-cls}-dropdown {
  .reset-component;
+  // Fix select render lag of long text in chrome
+  // https://github.com/ant-design/ant-design/issues/11456
+  // https://github.com/ant-design/ant-design/issues/11843
+  font-variant: initial;

  &.slide-up-enter.slide-up-enter-active&-placement-bottomLeft,
  &.slide-up-appear.slide-up-appear-active&-placement-bottomLeft {
@ -547,8 +545,8 @@

  &&--multiple {
    .@{select-prefix-cls}-dropdown-menu-item {
-      &:after {
-        .iconfont-font("\e632");
+      padding-right: @control-padding-horizontal + 20;
+      & .@{select-prefix-cls}-selected-icon {
        color: transparent;
        .iconfont-size-under-12px(10px);
        transition: all 0.2s ease;
@ -560,16 +558,16 @@
        text-shadow: 0 0.1px 0, 0.1px 0 0, 0 -0.1px 0, -0.1px 0;
      }

-      &:hover:after {
+      &:hover .@{select-prefix-cls}-selected-icon {
        color: #ddd;
      }

-      &-disabled:after {
+      &-disabled .@{select-prefix-cls}-selected-icon {
        display: none;
      }

-      &-selected:after,
-      &-selected:hover:after {
+      &-selected .@{select-prefix-cls}-selected-icon,
+      &-selected:hover .@{select-prefix-cls}-selected-icon {
        color: @primary-color;
        display: inline-block;
      }
--- a/components/slider/style/index.less
+++ b/components/slider/style/index.less
@ -10,6 +10,7 @@
  padding: 4px 0;
  height: 12px;
  cursor: pointer;
+  touch-action: none;

  .vertical();

--- a/components/style/color/bezierEasing.less
+++ b/components/style/color/bezierEasing.less
@ -1,4 +1,4 @@
-/* stylelint-disable declaration-bang-space-before,no-duplicate-selectors */
+/* stylelint-disable */
 .bezierEasingMixin() {
@functions: ~`(function() {
  var NEWTON_ITERATIONS = 4;
--- a/components/style/core/iconfont.less
+++ b/components/style/core/iconfont.less
@ -1,339 +1,15 @@
@import '../themes/default';
@import "../mixins/iconfont";

-// font-face
-@font-face {
-  font-family: 'anticon';
-  font-display: fallback;
-  src: url('@{icon-url}.eot'); /* IE9*/
-  src:
-  /* chrome、firefox */
-  url('@{icon-url}.woff') format('woff'),
-  /* chrome、firefox、opera、Safari, Android, iOS 4.2+*/
-  url('@{icon-url}.ttf') format('truetype'),
-  /* iOS 4.1- */
-  url('@{icon-url}.svg#iconfont') format('svg');
-}
-
 .@{iconfont-css-prefix} {
 .iconfont-mixin();
 }

-.@{iconfont-css-prefix}-step-forward:before { content: "\e600"; }
-.@{iconfont-css-prefix}-step-backward:before { content: "\e601"; }
-.@{iconfont-css-prefix}-forward:before { content: "\e602"; }
-.@{iconfont-css-prefix}-backward:before { content: "\e603"; }
-.@{iconfont-css-prefix}-caret-right:before { content: "\e604"; }
-.@{iconfont-css-prefix}-caret-left:before { content: "\e605"; }
-.@{iconfont-css-prefix}-caret-down:before { content: "\e606"; }
-.@{iconfont-css-prefix}-caret-up:before { content: "\e607"; }
-.@{iconfont-css-prefix}-right-circle:before { content: "\e608"; }
-.@{iconfont-css-prefix}-circle-right:before { content: "\e608"; } // antd@1.x compatibility alias: right-circle
-.@{iconfont-css-prefix}-caret-circle-right:before { content: "\e608"; } // antd@1.x compatibility alias: right-circle
-.@{iconfont-css-prefix}-left-circle:before { content: "\e609"; }
-.@{iconfont-css-prefix}-circle-left:before { content: "\e609"; } // antd@1.x compatibility alias: left-circle
-.@{iconfont-css-prefix}-caret-circle-left:before { content: "\e609"; } // antd@1.x compatibility alias: left-circle
-.@{iconfont-css-prefix}-up-circle:before { content: "\e60a"; }
-.@{iconfont-css-prefix}-circle-up:before { content: "\e60a"; } // antd@1.x compatibility alias: up-circle
-.@{iconfont-css-prefix}-caret-circle-up:before { content: "\e60a"; } // antd@1.x compatibility alias: up-circle
-.@{iconfont-css-prefix}-down-circle:before { content: "\e60b"; }
-.@{iconfont-css-prefix}-circle-down:before { content: "\e60b"; } // antd@1.x compatibility alias: down-circle
-.@{iconfont-css-prefix}-caret-circle-down:before { content: "\e60b"; } // antd@1.x compatibility alias: down-circle
-.@{iconfont-css-prefix}-right-circle-o:before { content: "\e60c"; }
-.@{iconfont-css-prefix}-circle-o-right:before { content: "\e60c"; } // antd@1.x compatibility alias: right-circle-o
-.@{iconfont-css-prefix}-caret-circle-o-right:before { content: "\e60c"; } // antd@1.x compatibility alias: right-circle-o
-.@{iconfont-css-prefix}-left-circle-o:before { content: "\e60d"; }
-.@{iconfont-css-prefix}-circle-o-left:before { content: "\e60d"; } // antd@1.x compatibility alias: left-circle-o
-.@{iconfont-css-prefix}-caret-circle-o-left:before { content: "\e60d"; } // antd@1.x compatibility alias: left-circle-o
-.@{iconfont-css-prefix}-up-circle-o:before { content: "\e60e"; }
-.@{iconfont-css-prefix}-circle-o-up:before { content: "\e60e"; } // antd@1.x compatibility alias: up-circle-o
-.@{iconfont-css-prefix}-caret-circle-o-up:before { content: "\e60e"; } // antd@1.x compatibility alias: up-circle-o
-.@{iconfont-css-prefix}-down-circle-o:before { content: "\e60f"; }
-.@{iconfont-css-prefix}-circle-o-down:before { content: "\e60f"; } // antd@1.x compatibility alias: down-circle-o
-.@{iconfont-css-prefix}-caret-circle-o-down:before { content: "\e60f"; } // antd@1.x compatibility alias: down-circle-o
-.@{iconfont-css-prefix}-verticle-left:before { content: "\e610"; }
-.@{iconfont-css-prefix}-verticle-right:before { content: "\e611"; }
-.@{iconfont-css-prefix}-rollback:before { content: "\e612"; }
-.@{iconfont-css-prefix}-retweet:before { content: "\e613"; }
-.@{iconfont-css-prefix}-shrink:before { content: "\e614"; }
-.@{iconfont-css-prefix}-arrows-alt:before { content: "\e615"; }
-.@{iconfont-css-prefix}-arrow-salt:before { content: "\e615"; } // antd@1.x compatibility alias: arrows-alt
-.@{iconfont-css-prefix}-reload:before { content: "\e616"; }
-.@{iconfont-css-prefix}-double-right:before { content: "\e617"; }
-.@{iconfont-css-prefix}-double-left:before { content: "\e618"; }
-.@{iconfont-css-prefix}-arrow-down:before { content: "\e619"; }
-.@{iconfont-css-prefix}-arrow-up:before { content: "\e61a"; }
-.@{iconfont-css-prefix}-arrow-right:before { content: "\e61b"; }
-.@{iconfont-css-prefix}-arrow-left:before { content: "\e61c"; }
-.@{iconfont-css-prefix}-down:before { content: "\e61d"; }
-.@{iconfont-css-prefix}-up:before { content: "\e61e"; }
-.@{iconfont-css-prefix}-right:before { content: "\e61f"; }
-.@{iconfont-css-prefix}-left:before { content: "\e620"; }
-.@{iconfont-css-prefix}-minus-square-o:before { content: "\e621"; }
-.@{iconfont-css-prefix}-minus-circle:before { content: "\e622"; }
-.@{iconfont-css-prefix}-minus-circle-o:before { content: "\e623"; }
-.@{iconfont-css-prefix}-minus:before { content: "\e624"; }
-.@{iconfont-css-prefix}-plus-circle-o:before { content: "\e625"; }
-.@{iconfont-css-prefix}-plus-circle:before { content: "\e626"; }
-.@{iconfont-css-prefix}-plus:before { content: "\e627"; }
-.@{iconfont-css-prefix}-info-circle:before { content: "\e628"; }
-.@{iconfont-css-prefix}-info-circle-o:before { content: "\e629"; }
-.@{iconfont-css-prefix}-info:before { content: "\e62a"; }
-.@{iconfont-css-prefix}-exclamation:before { content: "\e62b"; }
-.@{iconfont-css-prefix}-exclamation-circle:before { content: "\e62c"; }
-.@{iconfont-css-prefix}-exclamation-circle-o:before { content: "\e62d"; }
-.@{iconfont-css-prefix}-close-circle:before { content: "\e62e"; }
-.@{iconfont-css-prefix}-cross-circle:before { content: "\e62e"; } // antd@1.x compatibility alias: close-circle
-.@{iconfont-css-prefix}-close-circle-o:before { content: "\e62f"; }
-.@{iconfont-css-prefix}-cross-circle-o:before { content: "\e62f"; } // antd@1.x compatibility alias: close-circle-o
-.@{iconfont-css-prefix}-check-circle:before { content: "\e630"; }
-.@{iconfont-css-prefix}-check-circle-o:before { content: "\e631"; }
-.@{iconfont-css-prefix}-check:before { content: "\e632"; }
-.@{iconfont-css-prefix}-close:before { content: "\e633"; }
-.@{iconfont-css-prefix}-cross:before { content: "\e633"; } // antd@1.x compatibility alias: close
-.@{iconfont-css-prefix}-customer-service:before { content: "\e634"; }
-.@{iconfont-css-prefix}-customerservice:before { content: "\e634"; } // antd@1.x compatibility alias: customer-service
-.@{iconfont-css-prefix}-credit-card:before { content: "\e635"; }
-.@{iconfont-css-prefix}-code-o:before { content: "\e636"; }
-.@{iconfont-css-prefix}-book:before { content: "\e637"; }
-.@{iconfont-css-prefix}-bars:before { content: "\e639"; }
-.@{iconfont-css-prefix}-question:before { content: "\e63a"; }
-.@{iconfont-css-prefix}-question-circle:before { content: "\e63b"; }
-.@{iconfont-css-prefix}-question-circle-o:before { content: "\e63c"; }
-.@{iconfont-css-prefix}-pause:before { content: "\e63d"; }
-.@{iconfont-css-prefix}-pause-circle:before { content: "\e63e"; }
-.@{iconfont-css-prefix}-pause-circle-o:before { content: "\e63f"; }
-.@{iconfont-css-prefix}-clock-circle:before { content: "\e640"; }
-.@{iconfont-css-prefix}-clock-circle-o:before { content: "\e641"; }
-.@{iconfont-css-prefix}-swap:before { content: "\e642"; }
-.@{iconfont-css-prefix}-swap-left:before { content: "\e643"; }
-.@{iconfont-css-prefix}-swap-right:before { content: "\e644"; }
-.@{iconfont-css-prefix}-plus-square-o:before { content: "\e645"; }
-.@{iconfont-css-prefix}-frown:before { content: "\e646"; }
-.@{iconfont-css-prefix}-frown-circle:before { content: "\e646"; } // antd@1.x compatibility alias: frown
-.@{iconfont-css-prefix}-ellipsis:before { content: "\e647"; }
-.@{iconfont-css-prefix}-copy:before { content: "\e648"; }
-.@{iconfont-css-prefix}-menu-fold:before { content: "\e9ac"; }
-.@{iconfont-css-prefix}-mail:before { content: "\e659"; }
-.@{iconfont-css-prefix}-logout:before { content: "\e65a"; }
-.@{iconfont-css-prefix}-link:before { content: "\e65b"; }
-.@{iconfont-css-prefix}-area-chart:before { content: "\e65c"; }
-.@{iconfont-css-prefix}-line-chart:before { content: "\e65d"; }
-.@{iconfont-css-prefix}-home:before { content: "\e65e"; }
-.@{iconfont-css-prefix}-laptop:before { content: "\e65f"; }
-.@{iconfont-css-prefix}-star:before { content: "\e660"; }
-.@{iconfont-css-prefix}-star-o:before { content: "\e661"; }
-.@{iconfont-css-prefix}-folder:before { content: "\e662"; }
-.@{iconfont-css-prefix}-filter:before { content: "\e663"; }
-.@{iconfont-css-prefix}-file:before { content: "\e664"; }
-.@{iconfont-css-prefix}-exception:before { content: "\e665"; }
-.@{iconfont-css-prefix}-meh:before { content: "\e666"; }
-.@{iconfont-css-prefix}-meh-circle:before { content: "\e666"; } // antd@1.x compatibility alias: meh
-.@{iconfont-css-prefix}-meh-o:before { content: "\e667"; }
-.@{iconfont-css-prefix}-shopping-cart:before { content: "\e668"; }
-.@{iconfont-css-prefix}-save:before { content: "\e669"; }
-.@{iconfont-css-prefix}-user:before { content: "\e66a"; }
-.@{iconfont-css-prefix}-video-camera:before { content: "\e66b"; }
-.@{iconfont-css-prefix}-to-top:before { content: "\e66c"; }
-.@{iconfont-css-prefix}-team:before { content: "\e66d"; }
-.@{iconfont-css-prefix}-tablet:before { content: "\e66e"; }
-.@{iconfont-css-prefix}-solution:before { content: "\e66f"; }
-.@{iconfont-css-prefix}-search:before { content: "\e670"; }
-.@{iconfont-css-prefix}-share-alt:before { content: "\e671"; }
-.@{iconfont-css-prefix}-setting:before { content: "\e672"; }
-.@{iconfont-css-prefix}-poweroff:before { content: "\e6d5"; }
-.@{iconfont-css-prefix}-picture:before { content: "\e674"; }
-.@{iconfont-css-prefix}-phone:before { content: "\e675"; }
-.@{iconfont-css-prefix}-paper-clip:before { content: "\e676"; }
-.@{iconfont-css-prefix}-notification:before { content: "\e677"; }
-.@{iconfont-css-prefix}-mobile:before { content: "\e678"; }
-.@{iconfont-css-prefix}-menu-unfold:before { content: "\e9ad"; }
-.@{iconfont-css-prefix}-inbox:before { content: "\e67a"; }
-.@{iconfont-css-prefix}-lock:before { content: "\e67b"; }
-.@{iconfont-css-prefix}-qrcode:before { content: "\e67c"; }
-.@{iconfont-css-prefix}-play-circle:before { content: "\e6d0"; }
-.@{iconfont-css-prefix}-play-circle-o:before { content: "\e6d1"; }
-.@{iconfont-css-prefix}-tag:before { content: "\e6d2"; }
-.@{iconfont-css-prefix}-tag-o:before { content: "\e6d3"; }
-.@{iconfont-css-prefix}-tags:before { content: "\e67d"; }
-.@{iconfont-css-prefix}-tags-o:before { content: "\e67e"; }
-.@{iconfont-css-prefix}-cloud-o:before { content: "\e67f"; }
-.@{iconfont-css-prefix}-cloud:before { content: "\e680"; }
-.@{iconfont-css-prefix}-cloud-upload:before { content: "\e681"; }
-.@{iconfont-css-prefix}-cloud-download:before { content: "\e682"; }
-.@{iconfont-css-prefix}-cloud-download-o:before { content: "\e683"; }
-.@{iconfont-css-prefix}-cloud-upload-o:before { content: "\e684"; }
-.@{iconfont-css-prefix}-environment:before { content: "\e685"; }
-.@{iconfont-css-prefix}-environment-o:before { content: "\e686"; }
-.@{iconfont-css-prefix}-eye:before { content: "\e687"; }
-.@{iconfont-css-prefix}-eye-o:before { content: "\e688"; }
-.@{iconfont-css-prefix}-camera:before { content: "\e689"; }
-.@{iconfont-css-prefix}-camera-o:before { content: "\e68a"; }
-.@{iconfont-css-prefix}-windows:before { content: "\e68b"; }
-.@{iconfont-css-prefix}-apple:before { content: "\e68c"; }
-.@{iconfont-css-prefix}-apple-o:before { content: "\e6d4"; }
-.@{iconfont-css-prefix}-android:before { content: "\e938"; }
-.@{iconfont-css-prefix}-android-o:before { content: "\e68d"; }
-.@{iconfont-css-prefix}-aliwangwang:before { content: "\e68e"; }
-.@{iconfont-css-prefix}-aliwangwang-o:before { content: "\e68f"; }
-.@{iconfont-css-prefix}-export:before { content: "\e691"; }
-.@{iconfont-css-prefix}-edit:before { content: "\e692"; }
-.@{iconfont-css-prefix}-appstore-o:before { content: "\e695"; }
-.@{iconfont-css-prefix}-appstore:before { content: "\e696"; }
-.@{iconfont-css-prefix}-scan:before { content: "\e697"; }
-.@{iconfont-css-prefix}-file-text:before { content: "\e698"; }
-.@{iconfont-css-prefix}-folder-open:before { content: "\e699"; }
-.@{iconfont-css-prefix}-hdd:before { content: "\e69a"; }
-.@{iconfont-css-prefix}-ie:before { content: "\e69b"; }
-.@{iconfont-css-prefix}-file-jpg:before { content: "\e69c"; }
-.@{iconfont-css-prefix}-like:before { content: "\e64c"; }
-.@{iconfont-css-prefix}-like-o:before { content: "\e69d"; }
-.@{iconfont-css-prefix}-dislike:before { content: "\e64b"; }
-.@{iconfont-css-prefix}-dislike-o:before { content: "\e69e"; }
-.@{iconfont-css-prefix}-delete:before { content: "\e69f"; }
-.@{iconfont-css-prefix}-enter:before { content: "\e6a0"; }
-.@{iconfont-css-prefix}-pushpin-o:before { content: "\e6a1"; }
-.@{iconfont-css-prefix}-pushpin:before { content: "\e6a2"; }
-.@{iconfont-css-prefix}-heart:before { content: "\e6a3"; }
-.@{iconfont-css-prefix}-heart-o:before { content: "\e6a4"; }
-.@{iconfont-css-prefix}-pay-circle:before { content: "\e6a5"; }
-.@{iconfont-css-prefix}-pay-circle-o:before { content: "\e6a6"; }
-.@{iconfont-css-prefix}-smile:before { content: "\e6a7"; }
-.@{iconfont-css-prefix}-smile-circle:before { content: "\e6a7"; }  // antd@1.x compatibility alias: smile
-.@{iconfont-css-prefix}-smile-o:before { content: "\e6a8"; }
-.@{iconfont-css-prefix}-frown-o:before { content: "\e6a9"; }
-.@{iconfont-css-prefix}-calculator:before { content: "\e6aa"; }
-.@{iconfont-css-prefix}-message:before { content: "\e6ab"; }
-.@{iconfont-css-prefix}-chrome:before { content: "\e6ac"; }
-.@{iconfont-css-prefix}-github:before { content: "\e6ad"; }
-.@{iconfont-css-prefix}-file-unknown:before { content: "\e6af"; }
-.@{iconfont-css-prefix}-file-excel:before { content: "\e6b0"; }
-.@{iconfont-css-prefix}-file-ppt:before { content: "\e6b1"; }
-.@{iconfont-css-prefix}-file-word:before { content: "\e6b2"; }
-.@{iconfont-css-prefix}-file-pdf:before { content: "\e6b3"; }
-.@{iconfont-css-prefix}-desktop:before { content: "\e6b4"; }
-.@{iconfont-css-prefix}-upload:before { content: "\e6b6"; }
-.@{iconfont-css-prefix}-download:before { content: "\e6b7"; }
-.@{iconfont-css-prefix}-pie-chart:before { content: "\e6b8"; }
-.@{iconfont-css-prefix}-unlock:before { content: "\e6ba"; }
-.@{iconfont-css-prefix}-calendar:before { content: "\e6bb"; }
-.@{iconfont-css-prefix}-windows-o:before { content: "\e6bc"; }
-.@{iconfont-css-prefix}-dot-chart:before { content: "\e6bd"; }
-.@{iconfont-css-prefix}-bar-chart:before { content: "\e6be"; }
-.@{iconfont-css-prefix}-code:before { content: "\e6bf"; }
-.@{iconfont-css-prefix}-api:before { content: "\e951"; }
-.@{iconfont-css-prefix}-plus-square:before { content: "\e6c0"; }
-.@{iconfont-css-prefix}-minus-square:before { content: "\e6c1"; }
-.@{iconfont-css-prefix}-close-square:before { content: "\e6c2"; }
-.@{iconfont-css-prefix}-close-square-o:before { content: "\e6c3"; }
-.@{iconfont-css-prefix}-check-square:before { content: "\e6c4"; }
-.@{iconfont-css-prefix}-check-square-o:before { content: "\e6c5"; }
-.@{iconfont-css-prefix}-fast-backward:before { content: "\e6c6"; }
-.@{iconfont-css-prefix}-fast-forward:before { content: "\e6c7"; }
-.@{iconfont-css-prefix}-up-square:before { content: "\e6c8"; }
-.@{iconfont-css-prefix}-down-square:before { content: "\e6c9"; }
-.@{iconfont-css-prefix}-left-square:before { content: "\e6ca"; }
-.@{iconfont-css-prefix}-right-square:before { content: "\e6cb"; }
-.@{iconfont-css-prefix}-right-square-o:before { content: "\e6cc"; }
-.@{iconfont-css-prefix}-left-square-o:before { content: "\e6cd"; }
-.@{iconfont-css-prefix}-down-square-o:before { content: "\e6ce"; }
-.@{iconfont-css-prefix}-up-square-o:before { content: "\e6cf"; }
-.@{iconfont-css-prefix}-loading:before { content: "\e64d"; }
-.@{iconfont-css-prefix}-loading-3-quarters:before { content: "\e6ae"; }
-.@{iconfont-css-prefix}-bulb:before { content: "\e649"; }
-.@{iconfont-css-prefix}-select:before { content: "\e64a"; }
-.@{iconfont-css-prefix}-addfile:before,
-.@{iconfont-css-prefix}-file-add:before { content: "\e910"; }
-.@{iconfont-css-prefix}-addfolder:before,
-.@{iconfont-css-prefix}-folder-add:before { content: "\e914"; }
-.@{iconfont-css-prefix}-switcher:before { content: "\e913"; }
-.@{iconfont-css-prefix}-rocket:before { content: "\e90f"; }
-.@{iconfont-css-prefix}-dingding:before { content: "\e923"; }
-.@{iconfont-css-prefix}-dingding-o:before { content: "\e925"; }
-.@{iconfont-css-prefix}-bell:before { content: "\e64e"; }
-.@{iconfont-css-prefix}-disconnect:before { content: "\e64f"; }
-.@{iconfont-css-prefix}-database:before { content: "\e650"; }
-.@{iconfont-css-prefix}-compass:before { content: "\e6db"; }
-.@{iconfont-css-prefix}-barcode:before { content: "\e652"; }
-.@{iconfont-css-prefix}-hourglass:before { content: "\e653"; }
-.@{iconfont-css-prefix}-key:before { content: "\e654"; }
-.@{iconfont-css-prefix}-flag:before { content: "\e655"; }
-.@{iconfont-css-prefix}-layout:before { content: "\e656"; }
-.@{iconfont-css-prefix}-login:before { content: "\e657"; }
-.@{iconfont-css-prefix}-printer:before { content: "\e673"; }
-.@{iconfont-css-prefix}-sound:before { content: "\e6e9"; }
-.@{iconfont-css-prefix}-usb:before { content: "\e6d7"; }
-.@{iconfont-css-prefix}-skin:before { content: "\e6d8"; }
-.@{iconfont-css-prefix}-tool:before { content: "\e6d9"; }
-.@{iconfont-css-prefix}-sync:before { content: "\e6da"; }
-.@{iconfont-css-prefix}-wifi:before { content: "\e6d6"; }
-.@{iconfont-css-prefix}-car:before { content: "\e6dc"; }
-.@{iconfont-css-prefix}-copyright:before { content: "\e6de"; }
-.@{iconfont-css-prefix}-schedule:before { content: "\e6df"; }
-.@{iconfont-css-prefix}-user-add:before { content: "\e6ed"; }
-.@{iconfont-css-prefix}-user-delete:before { content: "\e6e0"; }
-.@{iconfont-css-prefix}-usergroup-add:before { content: "\e6dd"; }
-.@{iconfont-css-prefix}-usergroup-delete:before { content: "\e6e1"; }
-.@{iconfont-css-prefix}-man:before { content: "\e6e2"; }
-.@{iconfont-css-prefix}-woman:before { content: "\e6ec"; }
-.@{iconfont-css-prefix}-shop:before { content: "\e6e3"; }
-.@{iconfont-css-prefix}-gift:before { content: "\e6e4"; }
-.@{iconfont-css-prefix}-idcard:before { content: "\e6e5"; }
-.@{iconfont-css-prefix}-medicine-box:before { content: "\e6e6"; }
-.@{iconfont-css-prefix}-red-envelope:before { content: "\e6e7"; }
-.@{iconfont-css-prefix}-coffee:before { content: "\e6e8"; }
-.@{iconfont-css-prefix}-trademark:before { content: "\e651"; }
-.@{iconfont-css-prefix}-safety:before { content: "\e6ea"; }
-.@{iconfont-css-prefix}-wallet:before { content: "\e6eb"; }
-.@{iconfont-css-prefix}-bank:before { content: "\e6ee"; }
-.@{iconfont-css-prefix}-trophy:before { content: "\e6ef"; }
-.@{iconfont-css-prefix}-contacts:before { content: "\e6f0"; }
-.@{iconfont-css-prefix}-global:before { content: "\e6f1"; }
-.@{iconfont-css-prefix}-shake:before { content: "\e94f"; }
-.@{iconfont-css-prefix}-fork:before { content: "\e6f2"; }
-.@{iconfont-css-prefix}-dashboard:before { content: "\e99a"; }
-.@{iconfont-css-prefix}-profile:before { content: "\e999"; }
-.@{iconfont-css-prefix}-table:before { content: "\e998"; }
-.@{iconfont-css-prefix}-warning:before { content: "\e997"; }
-.@{iconfont-css-prefix}-form:before { content: "\e996"; }
 .@{iconfont-css-prefix}-spin:before {
  display: inline-block;
  animation: loadingCircle 1s infinite linear;
 }
-
-.@{iconfont-css-prefix}-weibo-square:before { content: "\e6f5"; }
-.@{iconfont-css-prefix}-weibo-circle:before { content: "\e6f4"; }
-.@{iconfont-css-prefix}-taobao-circle:before { content: "\e6f3"; }
-.@{iconfont-css-prefix}-html5:before { content: "\e9c7"; }
-.@{iconfont-css-prefix}-weibo:before { content: "\e9c6"; }
-.@{iconfont-css-prefix}-twitter:before { content: "\e9c5"; }
-.@{iconfont-css-prefix}-wechat:before { content: "\e9c4"; }
-.@{iconfont-css-prefix}-youtube:before { content: "\e9c3"; }
-.@{iconfont-css-prefix}-alipay-circle:before { content: "\e9c2"; }
-.@{iconfont-css-prefix}-taobao:before { content: "\e9c1"; }
-.@{iconfont-css-prefix}-skype:before { content: "\e9c0"; }
-.@{iconfont-css-prefix}-qq:before { content: "\e9bf"; }
-.@{iconfont-css-prefix}-medium-workmark:before { content: "\e9be"; }
-.@{iconfont-css-prefix}-gitlab:before { content: "\e9bd"; }
-.@{iconfont-css-prefix}-medium:before { content: "\e9bc"; }
-.@{iconfont-css-prefix}-linkedin:before { content: "\e9bb"; }
-.@{iconfont-css-prefix}-google-plus:before { content: "\e9ba"; }
-.@{iconfont-css-prefix}-dropbox:before { content: "\e9b9"; }
-.@{iconfont-css-prefix}-facebook:before { content: "\e9b8"; }
-.@{iconfont-css-prefix}-codepen:before { content: "\e9b7"; }
-.@{iconfont-css-prefix}-amazon:before { content: "\e9b6"; }
-.@{iconfont-css-prefix}-google:before { content: "\e9b5"; }
-.@{iconfont-css-prefix}-codepen-circle:before { content: "\e9b4"; }
-.@{iconfont-css-prefix}-alipay:before { content: "\e9b3"; }
-.@{iconfont-css-prefix}-ant-design:before { content: "\e9b2"; }
-.@{iconfont-css-prefix}-aliyun:before { content: "\e9f4"; }
-.@{iconfont-css-prefix}-zhihu:before { content: "\e703"; }
-.@{iconfont-css-prefix}-file-markdown:before { content: "\e704"; }
-.@{iconfont-css-prefix}-slack:before { content: "\e705"; }
-.@{iconfont-css-prefix}-slack-square:before { content: "\e706"; }
-.@{iconfont-css-prefix}-behance:before { content: "\e707"; }
-.@{iconfont-css-prefix}-behance-square:before { content: "\e708"; }
-.@{iconfont-css-prefix}-dribbble:before { content: "\e709"; }
-.@{iconfont-css-prefix}-dribbble-square:before { content: "\e70a"; }
-.@{iconfont-css-prefix}-instagram:before { content: "\e70b"; }
-.@{iconfont-css-prefix}-yuque:before { content: "\e70c"; }
+.@{iconfont-css-prefix}-spin {
+  display: inline-block;
+  animation: loadingCircle 1s infinite linear;
+}
--- a/components/style/mixins/iconfont.less
+++ b/components/style/mixins/iconfont.less
@ -1,25 +1,29 @@
 .iconfont-mixin() {
  display: inline-block;
  font-style: normal;
-  vertical-align: baseline;
+  vertical-align: -0.125em; // for SVG icon, see https://blog.prototypr.io/align-svg-icons-to-text-and-say-goodbye-to-font-icons-d44b3d7b26b4
  text-align: center;
  text-transform: none;
-  line-height: 1;
+  line-height: 0;
  text-rendering: optimizeLegibility;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
+
+  > * {
+    line-height: 1;
+  }
+
+  svg {
+    display: inline-block;
+  }
+
  &:before {
-    display: block;
-    font-family: "anticon" !important;
+    display: none; // dont display old icon.
  }
-}

-.iconfont-font(@content) {
-  font-family: 'anticon';
-  text-rendering: optimizeLegibility;
-  -webkit-font-smoothing: antialiased;
-  -moz-osx-font-smoothing: grayscale;
-  content: @content;
+  & &-icon {
+    display: block;
+  }
 }

 // for iconfont font size
--- a/components/style/themes/default.less
+++ b/components/style/themes/default.less
@ -43,6 +43,7 @@
@heading-color-dark     : fade(#fff, 100%);
@text-color-dark        : fade(#fff, 85%);
@text-color-secondary-dark: fade(#fff, 65%);
+@font-variant-base      : tabular-nums;
@font-size-base         : 14px;
@font-size-lg           : @font-size-base + 2px;
@font-size-sm           : 12px;
@ -67,7 +68,6 @@

 // ICONFONT
@iconfont-css-prefix    : anticon;
-@icon-url               : "https://at.alicdn.com/t/font_148784_v4ggb6wrjmkotj4i";

 // LINK
@link-color             : @primary-color;
@ -307,22 +307,25 @@

 // Modal
 // --
+@modal-header-bg: @component-background;
@modal-mask-bg: rgba(0, 0, 0, 0.65);

 // Progress
 // --
@progress-default-color: @processing-color;
@progress-remaining-color: @background-color-base;
+@progress-text-color: @text-color;

 // Menu
 // ---
@menu-inline-toplevel-item-height: 40px;
@menu-item-height: 40px;
@menu-collapsed-width: 80px;
-@menu-bg: @component-background;
+@menu-bg: transparent;
@menu-item-color: @text-color;
@menu-highlight-color: @primary-color;
@menu-item-active-bg: @item-active-bg;
+@menu-item-active-border-width: 3px;
@menu-item-group-title-color: @text-color-secondary;
 // dark theme
@menu-dark-color: @text-color-secondary-dark;
@ -341,7 +344,9 @@
 // Table
 // --
@table-header-bg: @background-color-light;
+@table-header-color: @heading-color;
@table-header-sort-bg: @background-color-base;
+@table-body-sort-bg: rgba(0, 0, 0, .01);
@table-row-hover-bg: @primary-1;
@table-selected-row-bg: #fafafa;
@table-expanded-row-bg: #fbfbfb;
@ -447,7 +452,7 @@
@breadcrumb-base-color:        @text-color-secondary;
@breadcrumb-last-item-color:   @text-color;
@breadcrumb-font-size:         @font-size-base;
-@breadcrumb-icon-font-size:    @font-size-sm;
+@breadcrumb-icon-font-size:    @font-size-base;
@breadcrumb-link-color:        @text-color-secondary;
@breadcrumb-link-color-hover:  @primary-5;
@breadcrumb-separator-color:   @text-color-secondary;
@ -484,6 +489,14 @@
@collapse-content-padding:            @padding-md;
@collapse-content-bg:                 @component-background;

+// Skeleton
+// ---
+@skeleton-color:                      #f2f2f2;
+
+// Transfer
+// ---
+@transfer-disabled-bg:                @disabled-bg;
+
 // Message
 // ---
@message-notice-content-padding:      10px 16px;
@ -492,4 +505,26 @@
 // ---
@wave-animation-width: 6px;

-@import "./default.deperated.less";
+// Alert
+// ---
+@alert-success-border-color: ~`colorPalette("@{success-color}", 3)`;
+@alert-success-bg-color: ~`colorPalette("@{success-color}", 1)`;
+@alert-success-icon-color: @success-color;
+@alert-info-border-color: ~`colorPalette("@{info-color}", 3)`;
+@alert-info-bg-color: ~`colorPalette("@{info-color}", 1)`;
+@alert-info-icon-color: @info-color;
+@alert-warning-border-color: ~`colorPalette("@{warning-color}", 3)`;
+@alert-warning-bg-color: ~`colorPalette("@{warning-color}", 1)`;
+@alert-warning-icon-color: @warning-color;
+@alert-error-border-color: ~`colorPalette("@{error-color}", 3)`;
+@alert-error-bg-color: ~`colorPalette("@{error-color}", 1)`;
+@alert-error-icon-color: @error-color;
+
+// List
+// ---
+@list-empty-text-padding:                    @padding-md;
+@list-item-padding:                          @padding-sm 0;
+@list-item-content-margin:                   0 0 @padding-md 0;
+@list-item-meta-margin-bottom:               @padding-md;
+@list-item-meta-avatar-margin-right:         @padding-md;
+@list-item-meta-title-margin-bottom:         @padding-sm;
--- a/components/switch/style/index.less
+++ b/components/switch/style/index.less
@ -28,7 +28,7 @@
    display: block;
  }

-  &:before,
+  &-loading-icon,
  &:after {
    position: absolute;
    width: @switch-height - 4px;
@ -51,23 +51,29 @@
    width: 24px;
  }

-  &:before {
-    content: "\e64d";
-    font-family: anticon;
-    animation: loadingCircle 1s infinite linear;
-    text-align: center;
+  &-loading-icon {
+    // loading default use animation
+    // animation: loadingCircle 1s infinite linear;
    background: transparent;
    z-index: 1;
    display: none;
    font-size: 12px;
+    svg {
+      position: absolute;
+      left: 0;
+      top: 0;
+      right: 0;
+      bottom: 0;
+      margin: auto;
+    }
  }

-  &-loading:before {
+  &-loading &-loading-icon {
    display: inline-block;
    color: @text-color;
  }

-  &-checked&-loading:before {
+  &-checked&-loading &-loading-icon {
    color: @switch-color;
  }

@ -91,7 +97,6 @@
      font-size: @font-size-sm;
    }

-    &:before,
    &:after {
      width: @switch-sm-height - 4px;
      height: @switch-sm-height - 4px;
@ -103,19 +108,26 @@
    }
  }

+  &-small &-loading-icon {
+    width: @switch-sm-height - 4px;
+    height: @switch-sm-height - 4px;
+  }
+
  &-small&-checked {
-    &:before {
-      left: 100%;
-      margin-left: @switch-sm-checked-margin-left;
-    }
    .@{switch-prefix-cls}-inner {
      margin-left: 3px;
      margin-right: 18px;
    }
  }

-  &-small&-loading:before {
-    animation: AntSwitchSmallLoadingCircle 1s infinite linear;
+  &-small&-checked &-loading-icon {
+    left: 100%;
+    margin-left: @switch-sm-checked-margin-left;
+  }
+
+  &-small&-loading &-loading-icon {
+    // animation: AntSwitchSmallLoadingCircle 1s infinite linear;
+    transform: scale(0.66667);
    font-weight: bold;
  }

@ -127,11 +139,6 @@
      margin-right: 24px;
    }

-    &:before {
-      left: 100%;
-      margin-left: -19px;
-    }
-
    &:after {
      left: 100%;
      transform: translateX(-100%);
@ -139,6 +146,11 @@
    }
  }

+  &-checked &-loading-icon {
+    left: 100%;
+    margin-left: -19px;
+  }
+
  &-loading,
  &-disabled {
    pointer-events: none;
--- a/components/table/style/index.less
+++ b/components/table/style/index.less
@ -2,7 +2,9 @@
@import "../../style/mixins/index";

@table-prefix-cls: ~"@{ant-prefix}-table";
-@table-header-icon-color: @text-color-secondary;
+@table-header-icon-color: #bfbfbf;
+@table-header-sort-active-bg: darken(@table-header-bg, 3%);
+@table-header-filter-active-bg: darken(@table-header-sort-active-bg, 5%);

 .@{table-prefix-cls}-wrapper {
  .clearfix;
@ -23,8 +25,7 @@

  table {
    width: 100%;
-    border-collapse: separate;
-    border-spacing: 0;
+    border-collapse: collapse;
    text-align: left;
    border-radius: @border-radius-base @border-radius-base 0 0;
  }
@ -33,7 +34,7 @@
    background: @table-header-bg;
    transition: background .3s ease;
    text-align: left;
-    color: @heading-color;
+    color: @table-header-color;
    font-weight: 500;
    border-bottom: @border-width-base @border-style-base @border-color-split;

@ -43,32 +44,135 @@

    .@{iconfont-css-prefix}-filter,
    .@{table-prefix-cls}-filter-icon {
-      position: relative;
-      margin-left: 8px;
-      font-size: @font-size-base;
+      font-size: @font-size-sm;
      cursor: pointer;
      color: @table-header-icon-color;
      transition: all .3s;
+      width: 28px;
+      position: absolute;
+      top: 0;
+      right: 0;
+      height: 100%;
+      text-align: center;
+
+      > svg {
+        position: absolute;
+        top: 50%;
+        left: 50%;
+        margin-top: -@font-size-sm / 2 + 1px;
+        margin-left: -@font-size-sm / 2;
+      }
+    }
+
+    .@{table-prefix-cls}-filter-selected.@{iconfont-css-prefix}-filter {
+      color: @primary-color;
+    }
+
+    .@{table-prefix-cls}-column-sorter {
+      position: absolute;
+      right: 6px;
+      top: 50%;
      width: 14px;
-      font-weight: normal;
-      vertical-align: text-bottom;
+      height: @font-size-lg + 1px;
+      margin-top: -(@font-size-lg + 1px) / 2;
+      text-align: center;
+      color: @table-header-icon-color;
+      transition: all .3s;

-      &:hover {
-        color: @text-color;
+      &-up,
+      &-down {
+        .iconfont-size-under-12px(11px);
+        line-height: 4px;
+        height: 4px;
+        transition: all .3s;
+        display: block;
+        &.on {
+          color: @primary-color;
+        }
+      }
+
+      &-down {
+        margin-top: 4px;
      }
    }

-    .@{table-prefix-cls}-column-sorter + .@{iconfont-css-prefix}-filter {
-      margin-left: 4px;
+    &.@{table-prefix-cls}-column-has-actions {
+      position: relative;
+      background-clip: padding-box; // For Firefox background bug, https://github.com/ant-design/ant-design/issues/12628
+
+      &.@{table-prefix-cls}-column-has-filters {
+        .@{iconfont-css-prefix}-filter,
+        .@{table-prefix-cls}-filter-icon {
+          &.@{table-prefix-cls}-filter-open {
+            color: @text-color-secondary;
+            background: @table-header-filter-active-bg;
+          }
+        }
+        // Very complicated styles logic but neccessary
+        &:hover {
+          .@{iconfont-css-prefix}-filter,
+          .@{table-prefix-cls}-filter-icon {
+            &:hover {
+              color: @text-color-secondary;
+              background: @table-header-filter-active-bg;
+            }
+            &:active {
+              color: @text-color;
+            }
+          }
+        }
+      }
+
+      &.@{table-prefix-cls}-column-has-sorters {
+        cursor: pointer;
+        &:hover {
+          background: @table-header-sort-active-bg;
+          .@{iconfont-css-prefix}-filter,
+          .@{table-prefix-cls}-filter-icon {
+            background: @table-header-sort-active-bg;
+          }
+        }
+        &:active {
+          .@{table-prefix-cls}-column-sorter-up:not(.on),
+          .@{table-prefix-cls}-column-sorter-down:not(.on) {
+            color: @text-color-secondary;
+          }
+        }
+      }
+
+      // https://github.com/ant-design/ant-design/issues/12650
+      &.@{table-prefix-cls}-column-has-sorters,
+      &.@{table-prefix-cls}-column-has-filters {
+        padding-right: 30px !important;
+      }
+
+      &.@{table-prefix-cls}-column-has-sorters.@{table-prefix-cls}-column-has-filters {
+        padding-right: 54px !important;
+      }
    }

-    .@{table-prefix-cls}-filter-selected.@{iconfont-css-prefix}-filter {
-      color: @primary-color;
+    .@{table-prefix-cls}-column-sorters {
+      &:before {
+        position: absolute;
+        content: '';
+        top: 0;
+        left: 0;
+        right: 0;
+        bottom: 0;
+        background: transparent;
+        transition: all .3s;
+      }
+      &:hover:before {
+        background: rgba(0, 0, 0, .04);
+      }
    }

-    // https://github.com/ant-design/ant-design/issues/8979
-    &.@{table-prefix-cls}-column-has-filters {
-      overflow: hidden;
+    &.@{table-prefix-cls}-column-has-filters .@{table-prefix-cls}-column-sorter {
+      right: 28px + 6px;
+    }
+
+    &.@{table-prefix-cls}-column-has-sorters {
+      user-select: none;
    }
  }

@ -90,15 +194,15 @@

  &-tbody > tr > td {
    border-bottom: @border-width-base @border-style-base @border-color-split;
-    transition: all .3s;
+    transition: all .3s, border 0s;
  }

  &-thead > tr,
  &-tbody > tr {
-    transition: all .3s;
+    transition: all .3s, height 0s;
    &.@{table-prefix-cls}-row-hover,
    &:hover {
-      & > td {
+      &:not(.@{table-prefix-cls}-expanded-row) > td {
        background: @table-row-hover-bg;
      }
    }
@ -169,6 +273,10 @@
    background: @table-header-sort-bg;
  }

+  &-tbody > tr > td.@{table-prefix-cls}-column-sort {
+    background: @table-body-sort-bg;
+  }
+
  &-thead > tr > th,
  &-tbody > tr > td {
    padding: @table-padding-vertical @table-padding-horizontal;
@ -177,8 +285,9 @@
  }

  &-thead > tr > th.@{table-prefix-cls}-selection-column-custom {
-    padding-left: 16px;
-    padding-right: 0;
+    .@{table-prefix-cls}-selection {
+      margin-right: -15px;
+    }
  }

  &-thead > tr > th.@{table-prefix-cls}-selection-column,
@ -229,71 +338,6 @@
    }
  }

-  &-column-sorter {
-    position: relative;
-    margin-left: 8px;
-    display: inline-block;
-    width: 14px;
-    height: @font-size-base;
-    vertical-align: middle;
-    text-align: center;
-    font-weight: normal;
-    color: @table-header-icon-color;
-
-    &-up,
-    &-down {
-      display: block;
-      width: 14px;
-      height: @font-size-base / 2 - 1px;
-      line-height: @font-size-base / 2 - 1px;
-      cursor: pointer;
-      position: relative;
-      &:hover .@{iconfont-css-prefix} {
-        color: @primary-4;
-      }
-      &.on {
-        .@{iconfont-css-prefix}-caret-up,
-        .@{iconfont-css-prefix}-caret-down {
-          color: @primary-color;
-        }
-      }
-
-      &:after {
-        position: absolute;
-        content: '';
-        height: 30px;
-        width: 14px;
-        left: 0;
-      }
-    }
-
-    &-up:after {
-      bottom: 0;
-    }
-
-    &-down:after {
-      top: 0;
-    }
-
-    .@{iconfont-css-prefix}-caret-up,
-    .@{iconfont-css-prefix}-caret-down {
-      .iconfont-size-under-12px(8px);
-      line-height: 4px;
-      height: 4px;
-      transition: all .3s;
-      position: relative;
-      display: block;
-    }
-
-    &-down {
-      margin-top: 1.5px;
-    }
-
-    .@{iconfont-css-prefix}-caret-up {
-      margin-top: 0.5px;
-    }
-  }
-
  &-bordered {
    .@{table-prefix-cls}-header > table,
    .@{table-prefix-cls}-body > table,
@ -500,6 +544,10 @@
    &:hover {
      background: @table-expanded-row-bg;
    }
+
+    td > .@{table-prefix-cls}-wrapper {
+      margin: -@table-padding-vertical -@table-padding-horizontal -@table-padding-vertical - 1px;
+    }
  }

  .@{table-prefix-cls}-row-indent + .@{table-prefix-cls}-row-expand-icon {
@ -532,6 +580,9 @@
    overflow: scroll;
    padding-bottom: 20px;
    margin-bottom: -20px;
+    // Workaround for additional scroll bar on the table header
+    // https://github.com/ant-design/ant-design/issues/6515#issuecomment-419634369
+    opacity: 0.9999;
  }

  &-fixed-left,
--- a/components/table/style/size.less
+++ b/components/table/style/size.less
@ -1,7 +1,12 @@
+@table-padding-vertical-md: @table-padding-vertical * 3 / 4;
+@table-padding-horizontal-md: @table-padding-horizontal / 2;
+@table-padding-vertical-sm: @table-padding-vertical / 2;
+@table-padding-horizontal-sm: @table-padding-horizontal / 2;
+
 .@{table-prefix-cls}-middle {
  > .@{table-prefix-cls}-title,
  > .@{table-prefix-cls}-footer {
-    padding: @table-padding-vertical*3/4 @table-padding-horizontal/2;
+    padding: @table-padding-vertical-md @table-padding-horizontal-md;
  }
  > .@{table-prefix-cls}-content {
    > .@{table-prefix-cls}-header > table,
@ -14,10 +19,14 @@
    > .@{table-prefix-cls}-fixed-right > .@{table-prefix-cls}-body-outer > .@{table-prefix-cls}-body-inner > table {
      > .@{table-prefix-cls}-thead > tr > th,
      > .@{table-prefix-cls}-tbody > tr > td {
-        padding: @table-padding-vertical*3/4 @table-padding-horizontal/2;
+        padding: @table-padding-vertical-md @table-padding-horizontal-md;
      }
    }
  }
+
+  tr.@{table-prefix-cls}-expanded-row td > .@{table-prefix-cls}-wrapper {
+    margin: -@table-padding-vertical-md -@table-padding-horizontal -@table-padding-vertical-md - 1px;
+  }
 }

 .@{table-prefix-cls}-small {
@ -26,7 +35,7 @@

  > .@{table-prefix-cls}-title,
  > .@{table-prefix-cls}-footer {
-    padding: @table-padding-vertical/2 @table-padding-horizontal/2;
+    padding: @table-padding-vertical-sm @table-padding-horizontal-sm;
  }

  > .@{table-prefix-cls}-title {
@ -35,6 +44,10 @@
  }

  > .@{table-prefix-cls}-content {
+    > .@{table-prefix-cls}-body {
+      margin: 0 @table-padding-horizontal-sm;
+    }
+
    > .@{table-prefix-cls}-header > table,
    > .@{table-prefix-cls}-body > table,
    > .@{table-prefix-cls}-scroll > .@{table-prefix-cls}-header > table,
@ -44,15 +57,17 @@
    > .@{table-prefix-cls}-fixed-left > .@{table-prefix-cls}-body-outer > .@{table-prefix-cls}-body-inner > table,
    > .@{table-prefix-cls}-fixed-right > .@{table-prefix-cls}-body-outer > .@{table-prefix-cls}-body-inner > table {
      border: 0;
-      padding: 0 @table-padding-horizontal/2;
      > .@{table-prefix-cls}-thead > tr > th,
      > .@{table-prefix-cls}-tbody > tr > td {
-        padding: @table-padding-vertical/2 @table-padding-horizontal/2;
+        padding: @table-padding-vertical-sm @table-padding-horizontal-sm;
      }
      > .@{table-prefix-cls}-thead > tr > th {
-        background: @component-background;
+        background-color: @component-background;
        border-bottom: @border-width-base @border-style-base @border-color-split;
      }
+      > .@{table-prefix-cls}-thead > tr > th.@{table-prefix-cls}-column-sort {
+        background-color: @table-body-sort-bg;
+      }
    }

    > .@{table-prefix-cls}-scroll > .@{table-prefix-cls}-header > table,
@ -65,7 +80,7 @@
    }

    .@{table-prefix-cls}-header {
-      background: @component-background;
+      background-color: @component-background;
    }

    .@{table-prefix-cls}-placeholder,
@ -99,6 +114,7 @@
    .@{table-prefix-cls}-placeholder {
      border-left: 0;
      border-bottom: 0;
+      border-right: 0;
    }

    .@{table-prefix-cls}-thead > tr > th:last-child,
@ -114,7 +130,12 @@
    }

    .@{table-prefix-cls}-fixed-right {
+      border-left: @border-width-base @border-style-base @border-color-split;
      border-right: @border-width-base @border-style-base @border-color-split;
    }
  }
+
+  tr.@{table-prefix-cls}-expanded-row td > .@{table-prefix-cls}-wrapper {
+    margin: -@table-padding-vertical-sm -@table-padding-horizontal -@table-padding-vertical-sm - 1px;
+  }
 }
--- a/components/tabs/style/card-style.less
+++ b/components/tabs/style/card-style.less
@ -34,7 +34,7 @@
  &&-card > &-bar &-nav-wrap {
    margin-bottom: 0;
  }
-  &&-card > &-bar &-tab .@{iconfont-css-prefix}-close {
+  &&-card > &-bar &-tab &-close-x {
    color: @text-color-secondary;
    transition: all .3s;
    font-size: @font-size-sm;
@ -66,6 +66,7 @@
    line-height: @tabs-card-height;

    .@{tab-prefix-cls}-new-tab {
+      position: relative;
      width: 20px;
      height: 20px;
      line-height: 20px;
@ -80,6 +81,14 @@
        color: @tabs-card-active-color;
        border-color: @tabs-card-active-color;
      }
+      svg {
+        position: absolute;
+        top: 0;
+        right: 0;
+        bottom: 0;
+        left: 0;
+        margin: auto;
+      }
    }
  }

--- a/components/tabs/style/index.less
+++ b/components/tabs/style/index.less
@ -1,6 +1,5 @@
@import "../../style/themes/default";
@import "../../style/mixins/index";
-
@import "./card-style";

@tab-prefix-cls: ~"@{ant-prefix}-tabs";
@ -18,13 +17,13 @@
    bottom: 1px;
    box-sizing: border-box;
    height: 2px;
-    background-color: @tabs-ink-bar-bg-color;
+    background-color: @tabs-ink-bar-color;
    transform-origin: 0 0;
  }

  &-bar {
    border-bottom: @border-width-base @border-style-base @border-color-split;
-    margin: @tab-bar-margin;
+    margin: @tabs-bar-margin;
    outline: none;
    transition: padding .3s @ease-in-out;
  }
@ -41,8 +40,8 @@
    .clearfix;

    &-scrolling {
-      padding-left: @tab-scrolling-size;
-      padding-right: @tab-scrolling-size;
+      padding-left: @tabs-scrolling-size;
+      padding-right: @tabs-scrolling-size;
    }
  }

@ -80,7 +79,7 @@

    &.@{tab-prefix-cls}-tab-arrow-show {
      opacity: 1;
-      width: @tab-scrolling-size;
+      width: @tabs-scrolling-size;
      height: 100%;
      pointer-events: auto;
    }
@ -102,9 +101,8 @@
      text-align: center;
      text-transform: none;

-      &:before {
+      &-target {
        display: block;
-        font-family: "anticon" !important;
        .iconfont-size-under-12px(10px);
      }
    }
@ -120,17 +118,10 @@

  &-tab-next {
    right: 2px;
-
-    &-icon:before {
-      content: "\e61f";
-    }
  }

  &-tab-prev {
    left: 0;
-    &-icon:before {
-      content: "\e620";
-    }
    :root & {
      filter: none;
    }
@ -174,8 +165,8 @@
    .@{tab-prefix-cls}-tab {
      display: inline-block;
      height: 100%;
-      margin: @tab-horizontal-margin;
-      padding: @tab-horizontal-padding;
+      margin: @tabs-horizontal-margin;
+      padding: @tabs-horizontal-padding;
      box-sizing: border-box;
      position: relative;

@ -188,11 +179,11 @@
      text-decoration: none;

      &:hover {
-        color: @tab-hover-color;
+        color: @tabs-hover-color;
      }

      &:active {
-        color: @tab-active-color;
+        color: @tabs-active-color;
      }

      .@{iconfont-css-prefix} {
@ -201,10 +192,11 @@
    }

    .@{tab-prefix-cls}-tab-active {
-      color: @tab-highlight-color;
+      color: @tabs-highlight-color;
      font-weight: 500;
    }
  }
+
  &-large {
    > .@{tab-prefix-cls}-bar {
        .@{tab-prefix-cls}-nav-container {
@ -261,20 +253,20 @@
      border-bottom: 0;
      height: 100%;
      &-tab-prev, &-tab-next {
-        width: @tab-scrolling-size;
+        width: @tabs-scrolling-size;
        height: 0;
        transition: height .3s @ease-in-out, opacity .3s @ease-in-out, color .3s @ease-in-out;
      }
      &-tab-prev.@{tab-prefix-cls}-tab-arrow-show,
      &-tab-next.@{tab-prefix-cls}-tab-arrow-show {
        width: 100%;
-        height: @tab-scrolling-size;
+        height: @tabs-scrolling-size;
      }

      .@{tab-prefix-cls}-tab {
        float: none;
-        margin: @tab-vertical-margin;
-        padding: @tab-vertical-padding;
+        margin: @tabs-vertical-margin;
+        padding: @tabs-vertical-padding;
        display: block;

        &:last-child {
@ -299,7 +291,7 @@
        margin-bottom: 0;

        &.@{tab-prefix-cls}-nav-container-scrolling {
-          padding: @tab-scrolling-size 0;
+          padding: @tabs-scrolling-size 0;
        }
      }

@ -315,25 +307,19 @@
        width: 2px;
        left: auto;
        height: auto;
-        top: 0;
+        bottom: auto;
      }

      .@{tab-prefix-cls}-tab-next {
        width: 100%;
        bottom: 0;
-        height: @tab-scrolling-size;
-        &-icon:before {
-          content: "\e61d";
-        }
+        height: @tabs-scrolling-size;
      }

      .@{tab-prefix-cls}-tab-prev {
        top: 0;
        width: 100%;
-        height: @tab-scrolling-size;
-        &-icon:before {
-          content: "\e61e";
-        }
+        height: @tabs-scrolling-size;
      }
    }

--- a/components/tag/style/index.less
+++ b/components/tag/style/index.less
@ -35,7 +35,7 @@
    padding: 0 8px;
  }

-  .@{iconfont-css-prefix}-cross {
+  .@{iconfont-css-prefix}-close {
    .iconfont-size-under-12px(10px);
    cursor: pointer;
    margin-left: 3px;
@ -53,8 +53,8 @@
    &,
    a,
    a:hover,
-    .@{iconfont-css-prefix}-cross,
-    .@{iconfont-css-prefix}-cross:hover {
+    .@{iconfont-css-prefix}-close,
+    .@{iconfont-css-prefix}-close:hover {
      color: #fff;
    }
  }
--- a/components/time-picker/style/index.less
+++ b/components/time-picker/style/index.less
@ -21,7 +21,6 @@
    border-radius: @border-radius-base;
    box-shadow: @box-shadow-base;
    background-clip: padding-box;
-    overflow: hidden;
    left: -2px;
  }

@ -32,6 +31,7 @@
    max-width: @time-picker-panel-column-width * 3 - @control-padding-horizontal - 2px;
    cursor: auto;
    outline: 0;
+    line-height: normal;

    .placeholder;

@ -58,20 +58,23 @@
    line-height: 20px;
    top: 7px;
    margin: 0;
-  }

-  &-clear-btn:after {
-    font-size: @font-size-base - 2px;
-    color: @disabled-color;
-    display: inline-block;
-    line-height: 1;
-    width: 20px;
-    transition: color 0.3s ease;
-    .iconfont-font("\e62e");
-  }
+    &-icon svg {
+      position: absolute;
+      top: 0;
+      right: 0;
+      bottom: 0;
+      left: 0;
+      margin: auto;
+      font-size: @font-size-base;
+      color: @disabled-color;
+      display: inline-block;
+      transition: color 0.3s ease;

-  &-clear-btn:hover:after {
-    color: @text-color-secondary;
+      &:hover {
+        color: @text-color-secondary;
+      }
+    }
  }

  &-narrow &-input-wrap {
@ -212,9 +215,7 @@
    color: @disabled-color;
    top: 50%;
    margin-top: -7px;
-    &:after {
-      content: "\e641";
-      font-family: "anticon";
+    .@{timepicker-prefix-cls}-clock-icon {
      color: @disabled-color;
      display: block;
      line-height: 1;
--- a/components/transfer/style/index.less
+++ b/components/transfer/style/index.less
@ -8,6 +8,12 @@
  .reset-component;
  position: relative;

+  &-disabled {
+    .@{transfer-prefix-cls}-list {
+      background: @transfer-disabled-bg;
+    }
+  }
+
  &-list {
    border: @border-width-base @border-style-base @border-color-base;
    display: inline-block;
--- a/components/tree-select/style/index.less
+++ b/components/tree-select/style/index.less
@ -65,15 +65,26 @@
        outline: none;
        text-align: center;
      }
-      &.@{select-tree-prefix-cls}-icon_loading {
-        &:after {
+      &.@{select-prefix-cls}-icon_loading {
+        .@{select-prefix-cls}-switcher-loading-icon {
          display: inline-block;
-          .iconfont-font("\e6ae");
-          animation: loadingCircle 1s infinite linear;
+          position: absolute;
+          left: 0;
          color: @primary-color;
+          transform: none;
+          font-size: 14px;
+          svg {
+            position: absolute;
+            top: 0;
+            right: 0;
+            bottom: 0;
+            left: 0;
+            margin: auto;
+          }
        }
      }
      &.@{select-tree-prefix-cls}-switcher {
+        position: relative;
        &.@{select-tree-prefix-cls}-switcher-noop {
          cursor: auto;
        }
@ -82,13 +93,43 @@
        }
        &.@{select-tree-prefix-cls}-switcher_close {
          .antTreeSwitcherIcon();
-          &:after {
-            transform: rotate(270deg) scale(0.59);
+          .@{select-prefix-cls}-switcher-icon {
+            svg {
+              transform: rotate(-90deg);
+            }
          }
        }
+
+        &.@{select-tree-prefix-cls}-switcher_open,
+          &.@{select-tree-prefix-cls}-switcher_close {
+            .@{select-prefix-cls}-switcher-loading-icon {
+              display: inline-block;
+              position: absolute;
+              left: 0;
+              width: 24px;
+              height: 24px;
+              color: @primary-color;
+              transform: none;
+              font-size: 14px;
+              svg {
+                position: absolute;
+                top: 0;
+                right: 0;
+                bottom: 0;
+                left: 0;
+                margin: auto;
+              }
+            }
+          }
      }
    }
  }
+
+  .@{select-tree-prefix-cls}-treenode-loading {
+    .@{select-tree-prefix-cls}-iconEle {
+      display: none;
+    }
+  }
  &-child-tree {
    display: none;
    &-open {
--- a/components/tree/style/index.less
+++ b/components/tree/style/index.less
@ -67,17 +67,23 @@
        &.@{tree-prefix-cls}-switcher {
          &.@{tree-prefix-cls}-switcher_open,
          &.@{tree-prefix-cls}-switcher_close {
-            &:before {
+            .@{tree-prefix-cls}-switcher-loading-icon {
              display: inline-block;
              position: absolute;
              left: 0;
              width: 24px;
              height: 24px;
-              .iconfont-font("\E64D");
-              animation: loadingCircle 1s infinite linear;
              color: @primary-color;
              transform: none;
              font-size: 14px;
+              svg {
+                position: absolute;
+                top: 0;
+                right: 0;
+                bottom: 0;
+                left: 0;
+                margin: auto;
+              }
            }

            :root &:after {
@ -140,8 +146,10 @@
        }
        &.@{tree-prefix-cls}-switcher_close {
          .antTreeSwitcherIcon();
-          &:after {
-            transform: rotate(270deg) scale(0.59);
+          .@{tree-prefix-cls}-switcher-icon {
+            svg {
+              transform: rotate(-90deg);
+            }
          }
        }
      }
--- a/components/tree/style/mixin.less
+++ b/components/tree/style/mixin.less
@ -1,27 +1,28 @@
@import "../../style/mixins/index";

-@tree-default-open-icon: "\e606";
-@tree-showline-open-icon: "\e621";
-@tree-showline-close-icon: "\e645";
-@tree-doc-icon: "\e664";
+@tree-prefix-cls: ~"@{ant-prefix}-tree";
+@tree-select-prefix-cls: ~"@{ant-prefix}-select";

 .antTreeSwitcherIcon(@type: "tree-default-open-icon") {
-  &:after {
+  .@{tree-prefix-cls}-switcher-icon,
+  .@{tree-select-prefix-cls}-switcher-icon {
    .iconfont-size-under-12px(7px);
    display: inline-block;
-    .iconfont-font(@@type);
    font-weight: bold;
-    transition: transform .3s;
+    svg {
+      transition: transform .3s;
+    }
  }
 }

 .antTreeShowLineIcon(@type) {
-  &:after {
+  .@{tree-prefix-cls}-switcher-icon,
+  .@{tree-select-prefix-cls}-switcher-icon {
    .iconfont-size-under-12px(12px);
    display: inline-block;
-    .iconfont-font(@@type);
-    vertical-align: baseline;
    font-weight: normal;
-    transition: transform .3s;
+    svg {
+      transition: transform .3s;
+    }
  }
 }
--- a/components/upload/style/index.less
+++ b/components/upload/style/index.less
@ -157,16 +157,16 @@
      }
    }

-    .@{iconfont-css-prefix}-cross {
+    .@{iconfont-css-prefix}-close {
      .iconfont-size-under-12px(10px);
      transition: all .3s;
      opacity: 0;
      cursor: pointer;
      position: absolute;
-      top: 0;
+      top: 6px;
      right: 4px;
      color: @text-color-secondary;
-      line-height: 22px;
+      line-height: 0;
      &:hover {
        color: @text-color;
      }
@ -176,7 +176,7 @@
      background-color: @item-hover-bg;
    }

-    &:hover .@{iconfont-css-prefix}-cross {
+    &:hover .@{iconfont-css-prefix}-close {
      opacity: 1;
    }

@ -186,7 +186,7 @@
      color: @error-color;
    }

-    &-error .@{iconfont-css-prefix}-cross {
+    &-error .@{iconfont-css-prefix}-close {
      opacity: 1;
      color: @error-color !important;
    }
@ -286,7 +286,7 @@
      width: ~"calc(100% - 24px)";
    }

-    .@{iconfont-css-prefix}-cross {
+    .@{iconfont-css-prefix}-close {
      position: absolute;
      right: 8px;
      top: 8px;
@ -296,6 +296,9 @@
  }

  &-picture-card {
+    // https://github.com/ant-design/ant-design/issues/11183
+    float: left;
+
    &.@{upload-prefix-cls}-list:after {
      display: none;
    }
--- a/scripts/syncStyleFromAntd.js
+++ b/scripts/syncStyleFromAntd.js
@ -6,7 +6,7 @@ const path = require('path')

 const owner = 'ant-design'
 const repo = 'ant-design'
-const tag = '3.8.4'
+const tag = '3.10.7'
 const clientId = '5f6ccfdc4cdc69f8ba12'
 const clientSecret = process.env.CLIENT_SECRET