chore: update styles(ant-design 3.10.7) (#2432)

NG-ZORRO · Nov 18, 2018 · d9db523 · d9db523
1 parent a17ea49
commit d9db523
Show file tree

Hide file tree

Showing 20 changed files with 133 additions and 90 deletions.
diff --git 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;
   }

diff --git 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;
   }
@@ -177,6 +181,11 @@
   .christmas&-primary&-sm:before {
     background-size: 56px;
   }
+
+  // https://github.com/ant-design/ant-design/issues/12681
+  &:empty {
+    vertical-align: top;
+  }
 }
 
 a.@{btn-prefix-cls} {

diff --git a/components/button/style/mixin.less b/components/button/style/mixin.less
@@ -25,7 +25,7 @@
 .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, .035);
+  box-shadow: 0 2px 0 rgba(0, 0, 0, .045);
 
   &:hover,
   &:focus {
@@ -118,7 +118,6 @@
   > .@{btnClassName},
   > span > .@{btnClassName} {
     position: relative;
-    line-height: @btn-height-base - 2px;
 
     &:hover,
     &:focus,
@@ -182,7 +181,6 @@
 
   &:not([disabled]):active {
     outline: 0;
-    transition: none;
     box-shadow: none;
   }
 

diff --git a/components/card/style/index.less b/components/card/style/index.less
@@ -39,16 +39,16 @@
 
     &-wrapper {
       display: flex;
+      align-items: center;
     }
 
     &-title {
       padding: @card-head-padding 0;
       text-overflow: ellipsis;
       overflow: hidden;
       white-space: nowrap;
-      display: flex;
-      align-items: center;
       flex: 1;
+      display: inline-block;
     }
 
     .@{ant-prefix}-tabs {

diff --git 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);
@@ -183,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 {

diff --git 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;
   }

diff --git 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,

diff --git a/components/form/style/index.less b/components/form/style/index.less
@@ -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

diff --git a/components/list/style/index.less b/components/list/style/index.less
@@ -164,9 +164,6 @@
     }
     &-meta {
       margin-bottom: @list-item-meta-margin-bottom;
-      &-avatar {
-        display: none;
-      }
       &-title {
         color: @heading-color;
         margin-bottom: @list-item-meta-title-margin-bottom;

diff --git 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

diff --git a/components/modal/style/modal.less b/components/modal/style/modal.less
@@ -77,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;
   }

diff --git a/components/progress/style/index.less b/components/progress/style/index.less
@@ -133,8 +133,8 @@
     left: 0;
     margin: 0;
     color: @progress-text-color;
-    overflow: hidden;
-    text-overflow: ellipsis;
+    white-space: normal;
+    padding: 0 6px;
 
     .@{iconfont-css-prefix} {
       font-size: 14 / 12em;

diff --git 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";

diff --git a/components/select/style/index.less b/components/select/style/index.less
@@ -545,6 +545,7 @@
 
   &&--multiple {
     .@{select-prefix-cls}-dropdown-menu-item {
+      padding-right: @control-padding-horizontal + 20;
       & .@{select-prefix-cls}-selected-icon {
         color: transparent;
         .iconfont-size-under-12px(10px);

diff --git 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();
 

diff --git 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;
@@ -306,6 +307,7 @@
 
 // Modal
 // --
+@modal-header-bg: @component-background;
 @modal-mask-bg: rgba(0, 0, 0, 0.65);
 
 // Progress
@@ -319,7 +321,7 @@
 @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;
@@ -526,5 +528,3 @@
 @list-item-meta-margin-bottom:               @padding-md;
 @list-item-meta-avatar-margin-right:         @padding-md;
 @list-item-meta-title-margin-bottom:         @padding-sm;
-
-@import "./default.deperated.less";