chore: update styles(ant-design 3.7.3) (NG-ZORRO#1894)

hsuanxyz · Aug 3, 2018 · e82ac47 · e82ac47
1 parent 7abe16d
commit e82ac47
Show file tree

Hide file tree

Showing 31 changed files with 289 additions and 114 deletions.
diff --git a/components/alert/style/index.less b/components/alert/style/index.less
@@ -5,6 +5,7 @@
 
 @alert-message-color: @heading-color;
 @alert-text-color: @text-color;
+@alert-close-color: @text-color-secondary;
 
 .@{alert-prefix-cls} {
   .reset-component;
@@ -70,7 +71,7 @@
     cursor: pointer;
 
     .@{iconfont-css-prefix}-cross {
-      color: @text-color-secondary;
+      color: @alert-close-color;
       transition: color .3s;
       &:hover {
         color: #404040;
@@ -87,7 +88,7 @@
     padding: 15px 15px 15px 64px;
     position: relative;
     border-radius: @border-radius-base;
-    color: @text-color;
+    color: @alert-text-color;
     line-height: @line-height-base;
   }
 

diff --git a/components/avatar/style/index.less b/components/avatar/style/index.less
@@ -43,7 +43,7 @@
   width: @size;
   height: @size;
   line-height: @size;
-  border-radius: @size / 2;
+  border-radius: 50%;
 
   & > * {
     line-height: @size;

diff --git a/components/button/style/index.less b/components/button/style/index.less
@@ -4,7 +4,7 @@
 
 @btn-prefix-cls: ~"@{ant-prefix}-btn";
 
-// for compatibile
+// for compatible
 @btn-ghost-color: @text-color;
 @btn-ghost-bg: transparent;
 @btn-ghost-border: @border-color-base;

diff --git a/components/button/style/mixin.less b/components/button/style/mixin.less
@@ -109,7 +109,8 @@
 .button-group-base(@btnClassName) {
   position: relative;
   display: inline-block;
-  > .@{btnClassName} {
+  > .@{btnClassName},
+  > span > .@{btnClassName} {
     position: relative;
     line-height: @btn-height-base - 2px;
 
@@ -126,13 +127,15 @@
   }
 
   // size
-  &-lg > .@{btnClassName} {
-    .button-size(@btn-height-lg; @btn-padding-lg; @btn-font-size-lg; @btn-border-radius-base);
+  &-lg > .@{btnClassName},
+  &-lg > span > .@{btnClassName} {
+    .button-size(@btn-height-lg; @btn-padding-lg; @btn-font-size-lg; 0);
     line-height: @btn-height-lg - 2px;
   }
 
-  &-sm > .@{btnClassName} {
-    .button-size(@btn-height-sm; @btn-padding-sm; @font-size-base; @btn-border-radius-sm);
+  &-sm > .@{btnClassName},
+  &-sm > span > .@{btnClassName} {
+    .button-size(@btn-height-sm; @btn-padding-sm; @font-size-base; 0);
     line-height: @btn-height-sm - 2px;
     > .@{iconfont-css-prefix} {
       font-size: @font-size-base;
@@ -260,25 +263,50 @@
     border-left-color: transparent;
   }
 
-  .@{btnClassName}:not(:first-child):not(:last-child) {
+  .@{btnClassName} {
     border-radius: 0;
   }
 
   > .@{btnClassName}:first-child,
   > span:first-child > .@{btnClassName} {
     margin-left: 0;
   }
+  > .@{btnClassName}:only-child {
+    border-radius: @btn-border-radius-base;
+  }
+  > span:only-child > .@{btnClassName} {
+    border-radius: @btn-border-radius-base;
+  }
 
   > .@{btnClassName}:first-child:not(:last-child),
   > span:first-child:not(:last-child) > .@{btnClassName} {
-    border-bottom-right-radius: 0;
-    border-top-right-radius: 0;
+    border-bottom-left-radius: @btn-border-radius-base;
+    border-top-left-radius: @btn-border-radius-base;
   }
 
   > .@{btnClassName}:last-child:not(:first-child),
   > span:last-child:not(:first-child) > .@{btnClassName} {
-    border-bottom-left-radius: 0;
-    border-top-left-radius: 0;
+    border-bottom-right-radius: @btn-border-radius-base;
+    border-top-right-radius: @btn-border-radius-base;
+  }
+
+  &-sm {
+    > .@{btnClassName}:only-child {
+      border-radius: @btn-border-radius-sm;
+    }
+    > span:only-child > .@{btnClassName} {
+      border-radius: @btn-border-radius-sm;
+    }
+    > .@{btnClassName}:first-child:not(:last-child),
+    > span:first-child:not(:last-child) > .@{btnClassName} {
+      border-bottom-left-radius: @btn-border-radius-sm;
+      border-top-left-radius: @btn-border-radius-sm;
+    }
+    > .@{btnClassName}:last-child:not(:first-child),
+    > span:last-child:not(:first-child) > .@{btnClassName} {
+      border-bottom-right-radius: @btn-border-radius-sm;
+      border-top-right-radius: @btn-border-radius-sm;
+    }
   }
 
   & > & {

diff --git a/components/cascader/style/index.less b/components/cascader/style/index.less
@@ -13,18 +13,13 @@
     background-color: transparent !important;
     cursor: pointer;
     width: 100%;
-    display: block;
     position: static;
   }
 
   &-picker-show-search &-input.@{ant-prefix}-input {
     position: relative;
   }
 
-  &-show-search&-focused {
-    color: @disabled-color;
-  }
-
   &-picker {
     .reset-component;
     position: relative;
@@ -52,6 +47,10 @@
       .active;
     }
 
+    &-show-search&-focused {
+      color: @disabled-color;
+    }
+
     &-label {
       position: absolute;
       left: 0;

diff --git a/components/checkbox/style/mixin.less b/components/checkbox/style/mixin.less
@@ -48,7 +48,7 @@
       height: @checkbox-size;
       border: @border-width-base @border-style-base @border-color-base;
       border-radius: @border-radius-sm;
-      background-color: #fff;
+      background-color: @checkbox-check-color;
       transition: all .3s;
 
       &:after {
@@ -61,7 +61,7 @@
         display: table;
         width: @check-width;
         height: @check-height;
-        border: 2px solid #fff;
+        border: 2px solid @checkbox-check-color;
         border-top: 0;
         border-left: 0;
         content: ' ';
@@ -105,7 +105,7 @@
     transform: rotate(45deg) scale(1);
     position: absolute;
     display: table;
-    border: 2px solid #fff;
+    border: 2px solid @checkbox-check-color;
     border-top: 0;
     border-left: 0;
     content: ' ';

diff --git a/components/date-picker/style/Calendar.less b/components/date-picker/style/Calendar.less
@@ -211,12 +211,18 @@
   }
 
   &-selected-day &-date {
-    background: @primary-color;
-    color: #fff;
-    border: @border-width-base @border-style-base transparent;
+    background: tint(@primary-color, 80%);
+  }
 
-    &:hover {
+  &-selected-date, &-selected-start-date, &-selected-end-date {
+    .@{calendar-prefix-cls}-date {
       background: @primary-color;
+      color: #fff;
+      border: @border-width-base @border-style-base transparent;
+
+      &:hover {
+        background: @primary-color;
+      }
     }
   }
 

diff --git a/components/date-picker/style/Picker.less b/components/date-picker/style/Picker.less
@@ -39,7 +39,6 @@
 
   &-input {
     outline: none;
-    display: block;
   }
 
   &:hover &-input:not(.@{ant-prefix}-input-disabled) {

diff --git a/components/divider/style/index.less b/components/divider/style/index.less
@@ -50,7 +50,6 @@
 
   &-horizontal&-with-text-left,
   &-horizontal&-with-text-right {
-    font-size: @font-size-base;
     .@{divider-prefix-cls}-inner-text {
       display: inline-block;
       padding: 0 10px;

diff --git a/components/drawer/style/drawer.less b/components/drawer/style/drawer.less
@@ -8,10 +8,10 @@
   width: 100%;
   height: 100%;
   pointer-events: none;
-  z-index: 99999;
-  transition: transform .3s @ease-in-out-circ;
-  >* {
-    transition: transform .3s @ease-in-out-circ;
+  z-index: @zindex-modal;
+  transition: transform 0.3s @ease-in-out-circ;
+  > * {
+    transition: transform 0.3s @ease-in-out-circ;
   }
 
   &-content-wrapper {
@@ -27,10 +27,8 @@
   }
   &-left {
     &.@{dawer-prefix-cls}-open {
-      .@{dawer-prefix-cls} {
-        &-wrapper {
-          box-shadow: 2px 0 8px rgba(0, 0, 0, 0.15);
-        }
+      .@{dawer-prefix-cls}-content-wrapper {
+        box-shadow: @shadow-1-right;
       }
     }
   }
@@ -41,10 +39,8 @@
       }
     }
     &.@{dawer-prefix-cls}-open {
-      & .@{dawer-prefix-cls} {
-        &-wrapper {
-          box-shadow: -2px 0 8px rgba(0, 0, 0, 0.15);
-        }
+      .@{dawer-prefix-cls}-content-wrapper {
+        box-shadow: @shadow-1-left;
       }
     }
   }
@@ -72,7 +68,6 @@
     background-color: @component-background;
     border: 0;
     background-clip: padding-box;
-    box-shadow: @shadow-2;
     z-index: 1;
   }
 
@@ -141,18 +136,14 @@
     opacity: 0;
     background-color: @modal-mask-bg;
     height: 100%;
-    transition: opacity .3s  @ease-in-out-circ;
+    transition: opacity 0.3s @ease-in-out-circ;
     filter: ~"alpha(opacity=50)";
   }
 
   &-open {
     overflow: hidden;
-  }
-}
-
-@media (max-width: @screen-md) {
-  .@{dawer-prefix-cls} {
-    width: auto !important;
-    margin: 10px;
+    &-content {
+      box-shadow: @shadow-2;
+    }
   }
 }
diff --git a/components/drawer/style/index.less b/components/drawer/style/index.less
diff --git a/components/dropdown/style/index.less b/components/dropdown/style/index.less
@@ -70,6 +70,11 @@
       transition: all .3s;
       line-height: 22px;
 
+      > .anticon:first-child {
+        min-width: 12px;
+        margin-right: 8px;
+      }
+
       > a {
         color: @text-color;
         display: block;

diff --git a/components/form/style/index.less b/components/form/style/index.less
@@ -236,8 +236,13 @@ form {
     margin-left: 0;
   }
 
-  .@{ant-prefix}-input-number + .@{form-prefix-cls}-text {
-    margin-left: 8px;
+  .@{ant-prefix}-input-number {
+    + .@{form-prefix-cls}-text {
+      margin-left: 8px;
+    }
+    &-handler-wrap {
+      z-index: 2; // https://github.com/ant-design/ant-design/issues/6289
+    }
   }
 
   .@{ant-prefix}-select,

diff --git a/components/input-number/style/index.less b/components/input-number/style/index.less
@@ -77,7 +77,6 @@
     border: 0;
     border-radius: @border-radius-base;
     padding: 0 @control-padding-horizontal - 1px;
-    display: block;
     .placeholder();
   }
 
@@ -103,14 +102,13 @@
     border-left: @border-width-base @border-style-base @border-color-base;
     width: 22px;
     height: 100%;
-    background: transparent;
+    background: @component-background;
     position: absolute;
     top: 0;
     right: 0;
     opacity: 0;
     border-radius: 0 @border-radius-base @border-radius-base 0;
     transition: opacity 0.24s linear 0.1s;
-    z-index: 2; // https://github.com/ant-design/ant-design/issues/6289
   }
 
   &-handler-wrap:hover &-handler {

diff --git a/components/input/style/mixin.less b/components/input/style/mixin.less
@@ -20,7 +20,7 @@
 .active(@color: @outline-color) {
   border-color: ~`colorPalette("@{color}", 5)`;
   outline: 0;
-  box-shadow: 0 0 @outline-blur-size @outline-width fade(@color, 20%);
+  box-shadow: @input-outline-offset @outline-blur-size @outline-width fade(@color, 20%);
   border-right-width: 1px !important;
 }
 

diff --git a/components/layout/style/light.less b/components/layout/style/light.less
@@ -3,7 +3,11 @@
     &-light {
       background: @layout-sider-background-light;
     }
-    &-light > &-trigger {
+    &-light &-trigger {
+      color: @layout-trigger-color-light;
+      background: @layout-trigger-background-light;
+    }
+    &-light &-zero-width-trigger {
       color: @layout-trigger-color-light;
       background: @layout-trigger-background-light;
     }

diff --git a/components/menu/style/dark.less b/components/menu/style/dark.less
@@ -24,13 +24,15 @@
   }
 
   &-dark&-horizontal {
-    border-bottom-color: @menu-dark-bg;
+    border-bottom: 0;
   }
 
   &-dark&-horizontal > &-item,
   &-dark&-horizontal > &-submenu {
     border-color: @menu-dark-bg;
     border-bottom: 0;
+    top: 0;
+    margin-top: 0;
   }
 
   &-dark&-horizontal > &-item > a:before {

diff --git a/components/message/style/index.less b/components/message/style/index.less
@@ -21,7 +21,7 @@
   }
 
   &-notice-content {
-    padding: 10px 16px;
+    padding: @message-notice-content-padding;
     border-radius: @border-radius-base;
     box-shadow: @shadow-2;
     background: @component-background;