Merge pull request #17697 from ant-design/improve-less-variables

style: Improve less variables

components/button/style/mixin.less

@@ -66,26 +66,6 @@
   }
   .button-disabled();
 }
-.button-variant-danger(@color; @background; @border) {
-  .button-color(@color; @background; @border);
-  &:hover {
-    .button-color(
-      @btn-primary-color; ~`colorPalette('@{color}', 5) `; ~`colorPalette('@{color}', 5) `
-    );
-  }
-  &:focus {
-    .button-color(
-      ~`colorPalette('@{color}', 5) `; @component-background; ~`colorPalette('@{color}', 5) `
-    );
-  }
-  &:active,
-  &.active {
-    .button-color(
-      @btn-primary-color; ~`colorPalette('@{color}', 7) `; ~`colorPalette('@{color}', 7) `
-    );
-  }
-  .button-disabled();
-}
 .button-variant-ghost(@color; @border: @color) {
   .button-color(@color; transparent; @border);
   text-shadow: none;
@@ -230,7 +210,7 @@
 }
 // danger button style
 .btn-danger() {
-  .button-variant-danger(@btn-danger-color, @btn-danger-bg, @btn-danger-border);
+  .button-variant-primary(@btn-danger-color, @btn-danger-bg);
 }
 // link button style
 .btn-link() {

components/config-provider/__tests__/__snapshots__/components.test.js.snap

@@ -9607,7 +9607,7 @@ exports[`ConfigProvider components Progress configProvider 1`] = `
       >
         <div
           class="config-progress-bg"
-          style="width:0%;height:8px;border-radius:100px"
+          style="width:0%;height:8px;border-radius:"
         />
       </div>
     </div>
@@ -9634,7 +9634,7 @@ exports[`ConfigProvider components Progress normal 1`] = `
       >
         <div
           class="ant-progress-bg"
-          style="width:0%;height:8px;border-radius:100px"
+          style="width:0%;height:8px;border-radius:"
         />
       </div>
     </div>
@@ -9661,7 +9661,7 @@ exports[`ConfigProvider components Progress prefixCls 1`] = `
       >
         <div
           class="prefix-Progress-bg"
-          style="width:0%;height:8px;border-radius:100px"
+          style="width:0%;height:8px;border-radius:"
         />
       </div>
     </div>

components/progress/Line.tsx

@@ -78,13 +78,13 @@ const Line: React.SFC<LineProps> = props => {
   const percentStyle = {
     width: `${validProgress(percent)}%`,
     height: strokeWidth || (size === 'small' ? 6 : 8),
-    borderRadius: strokeLinecap === 'square' ? 0 : '100px',
+    borderRadius: strokeLinecap === 'square' ? 0 : '',
     ...backgroundProps,
   };
   const successPercentStyle = {
     width: `${validProgress(successPercent)}%`,
     height: strokeWidth || (size === 'small' ? 6 : 8),
-    borderRadius: strokeLinecap === 'square' ? 0 : '100px',
+    borderRadius: strokeLinecap === 'square' ? 0 : '',
   };
   const successSegment =
     successPercent !== undefined ? (

components/progress/__tests__/__snapshots__/demo.test.js.snap

@@ -491,7 +491,7 @@ exports[`renders ./components/progress/demo/dynamic.md correctly 1`] = `
         >
           <div
             class="ant-progress-bg"
-            style="width:0%;height:8px;border-radius:100px"
+            style="width:0%;height:8px;border-radius:"
           />
         </div>
       </div>
@@ -664,7 +664,7 @@ exports[`renders ./components/progress/demo/gradient-line.md correctly 1`] = `
         >
           <div
             class="ant-progress-bg"
-            style="width:99.9%;height:8px;border-radius:100px;background-image:linear-gradient(to right, #108ee9 0%, #87d068 100%)"
+            style="width:99.9%;height:8px;border-radius:;background-image:linear-gradient(to right, #108ee9 0%, #87d068 100%)"
           />
         </div>
       </div>
@@ -688,7 +688,7 @@ exports[`renders ./components/progress/demo/gradient-line.md correctly 1`] = `
         >
           <div
             class="ant-progress-bg"
-            style="width:99.9%;height:8px;border-radius:100px;background-image:linear-gradient(to right, #108ee9, #87d068)"
+            style="width:99.9%;height:8px;border-radius:;background-image:linear-gradient(to right, #108ee9, #87d068)"
           />
         </div>
       </div>
@@ -854,7 +854,7 @@ exports[`renders ./components/progress/demo/line.md correctly 1`] = `
         >
           <div
             class="ant-progress-bg"
-            style="width:30%;height:8px;border-radius:100px"
+            style="width:30%;height:8px;border-radius:"
           />
         </div>
       </div>
@@ -878,7 +878,7 @@ exports[`renders ./components/progress/demo/line.md correctly 1`] = `
         >
           <div
             class="ant-progress-bg"
-            style="width:50%;height:8px;border-radius:100px"
+            style="width:50%;height:8px;border-radius:"
           />
         </div>
       </div>
@@ -902,7 +902,7 @@ exports[`renders ./components/progress/demo/line.md correctly 1`] = `
         >
           <div
             class="ant-progress-bg"
-            style="width:70%;height:8px;border-radius:100px"
+            style="width:70%;height:8px;border-radius:"
           />
         </div>
       </div>
@@ -943,7 +943,7 @@ exports[`renders ./components/progress/demo/line.md correctly 1`] = `
         >
           <div
             class="ant-progress-bg"
-            style="width:100%;height:8px;border-radius:100px"
+            style="width:100%;height:8px;border-radius:"
           />
         </div>
       </div>
@@ -984,7 +984,7 @@ exports[`renders ./components/progress/demo/line.md correctly 1`] = `
         >
           <div
             class="ant-progress-bg"
-            style="width:50%;height:8px;border-radius:100px"
+            style="width:50%;height:8px;border-radius:"
           />
         </div>
       </div>
@@ -1009,7 +1009,7 @@ exports[`renders ./components/progress/demo/line-mini.md correctly 1`] = `
         >
           <div
             class="ant-progress-bg"
-            style="width:30%;height:6px;border-radius:100px"
+            style="width:30%;height:6px;border-radius:"
           />
         </div>
       </div>
@@ -1033,7 +1033,7 @@ exports[`renders ./components/progress/demo/line-mini.md correctly 1`] = `
         >
           <div
             class="ant-progress-bg"
-            style="width:50%;height:6px;border-radius:100px"
+            style="width:50%;height:6px;border-radius:"
           />
         </div>
       </div>
@@ -1057,7 +1057,7 @@ exports[`renders ./components/progress/demo/line-mini.md correctly 1`] = `
         >
           <div
             class="ant-progress-bg"
-            style="width:70%;height:6px;border-radius:100px"
+            style="width:70%;height:6px;border-radius:"
           />
         </div>
       </div>
@@ -1098,7 +1098,7 @@ exports[`renders ./components/progress/demo/line-mini.md correctly 1`] = `
         >
           <div
             class="ant-progress-bg"
-            style="width:100%;height:6px;border-radius:100px"
+            style="width:100%;height:6px;border-radius:"
           />
         </div>
       </div>
@@ -1257,11 +1257,11 @@ exports[`renders ./components/progress/demo/segment.md correctly 1`] = `
         >
           <div
             class="ant-progress-bg"
-            style="width:60%;height:8px;border-radius:100px"
+            style="width:60%;height:8px;border-radius:"
           />
           <div
             class="ant-progress-success-bg"
-            style="width:30%;height:8px;border-radius:100px"
+            style="width:30%;height:8px;border-radius:"
           />
         </div>
       </div>

components/progress/__tests__/__snapshots__/index.test.js.snap

@@ -13,11 +13,11 @@ exports[`Progress render format 1`] = `
       >
         <div
           class="ant-progress-bg"
-          style="width: 50%; height: 8px; border-radius: 100px;"
+          style="width: 50%; height: 8px;"
         />
         <div
           class="ant-progress-success-bg"
-          style="width: 10%; height: 8px; border-radius: 100px;"
+          style="width: 10%; height: 8px;"
         />
       </div>
     </div>
@@ -44,7 +44,7 @@ exports[`Progress render negetive progress 1`] = `
       >
         <div
           class="ant-progress-bg"
-          style="width: 0%; height: 8px; border-radius: 100px;"
+          style="width: 0%; height: 8px;"
         />
       </div>
     </div>
@@ -71,11 +71,11 @@ exports[`Progress render negetive successPercent 1`] = `
       >
         <div
           class="ant-progress-bg"
-          style="width: 50%; height: 8px; border-radius: 100px;"
+          style="width: 50%; height: 8px;"
         />
         <div
           class="ant-progress-success-bg"
-          style="width: 0%; height: 8px; border-radius: 100px;"
+          style="width: 0%; height: 8px;"
         />
       </div>
     </div>
@@ -102,7 +102,7 @@ exports[`Progress render normal progress 1`] = `
       >
         <div
           class="ant-progress-bg"
-          style="width: 0%; height: 8px; border-radius: 100px;"
+          style="width: 0%; height: 8px;"
         />
       </div>
     </div>
@@ -129,7 +129,7 @@ exports[`Progress render out-of-range progress 1`] = `
       >
         <div
           class="ant-progress-bg"
-          style="width: 100%; height: 8px; border-radius: 100px;"
+          style="width: 100%; height: 8px;"
         />
       </div>
     </div>
@@ -173,7 +173,7 @@ exports[`Progress render out-of-range progress with info 1`] = `
       >
         <div
           class="ant-progress-bg"
-          style="width: 100%; height: 8px; border-radius: 100px;"
+          style="width: 100%; height: 8px;"
         />
       </div>
     </div>
@@ -296,7 +296,7 @@ exports[`Progress render strokeColor 2`] = `
               style={
                 Object {
                   "backgroundImage": "linear-gradient(to right, #108ee9, #87d068)",
-                  "borderRadius": "100px",
+                  "borderRadius": "",
                   "height": 8,
                   "width": "50%",
                 }
@@ -363,7 +363,7 @@ exports[`Progress render strokeColor 3`] = `
               style={
                 Object {
                   "backgroundImage": "linear-gradient(to right, #108ee9 0%, #87d068 100%)",
-                  "borderRadius": "100px",
+                  "borderRadius": "",
                   "height": 8,
                   "width": "50%",
                 }

components/progress/style/index.less

@@ -36,7 +36,7 @@
     width: 100%;
     vertical-align: middle;
     background-color: @progress-remaining-color;
-    border-radius: 100px;
+    border-radius: @progress-radius;
   }
 
   &-circle-trail {
@@ -52,6 +52,7 @@
   &-bg {
     position: relative;
     background-color: @progress-default-color;
+    border-radius: @progress-radius;
     transition: all 0.4s @ease-out-circ 0s;
   }
 

components/slider/style/index.less

@@ -24,7 +24,7 @@
     width: 100%;
     height: 4px;
     background-color: @slider-rail-background-color;
-    border-radius: 2px;
+    border-radius: @border-radius-sm;
     transition: background-color 0.3s;
   }
 
@@ -33,7 +33,7 @@
     height: 4px;
     background-color: @slider-track-background-color;
     border-radius: @border-radius-base;
-    transition: background-color 0.3s ease;
+    transition: background-color 0.3s;
   }
 
   &-handle {
@@ -42,10 +42,10 @@
     height: 14px;
     margin-top: -5px;
     margin-left: -7px;
-    background-color: @component-background;
-    border: solid 2px @slider-handle-color;
+    background-color: @slider-handle-background-color;
+    border: solid @slider-handle-border-width @slider-handle-color;
     border-radius: 50%;
-    box-shadow: 0;
+    box-shadow: @slider-handle-shadow;
     cursor: pointer;
     transition: border-color 0.3s, box-shadow 0.6s,
       transform 0.3s cubic-bezier(0.18, 0.89, 0.32, 1.28);

components/style/themes/default.less

@@ -156,9 +156,9 @@
 @btn-default-bg: @component-background;
 @btn-default-border: @border-color-base;
 
-@btn-danger-color: @error-color;
-@btn-danger-bg: @background-color-base;
-@btn-danger-border: @border-color-base;
+@btn-danger-color: #fff;
+@btn-danger-bg: color(~`colorPalette('@{error-color}', 5) `);
+@btn-danger-border: color(~`colorPalette('@{error-color}', 5) `);
 
 @btn-disable-color: @disabled-color;
 @btn-disable-bg: @disabled-bg;
@@ -370,6 +370,7 @@
 @progress-default-color: @processing-color;
 @progress-remaining-color: @background-color-base;
 @progress-text-color: @text-color;
+@progress-radius: 100px;
 
 // Menu
 // ---
@@ -489,6 +490,8 @@
 @tabs-highlight-color: @primary-color;
 @tabs-hover-color: @primary-5;
 @tabs-active-color: @primary-7;
+@tabs-card-gutter: 2px;
+@tabs-card-tab-active-border-top: 2px solid transparent;
 
 // BackTop
 // ---
@@ -548,11 +551,14 @@
 @slider-rail-background-color-hover: #e1e1e1;
 @slider-track-background-color: @primary-3;
 @slider-track-background-color-hover: @primary-4;
+@slider-handle-border-width: 2px;
+@slider-handle-background-color: @component-background;
 @slider-handle-color: @primary-3;
 @slider-handle-color-hover: @primary-4;
 @slider-handle-color-focus: tint(@primary-color, 20%);
 @slider-handle-color-focus-shadow: fade(@primary-color, 20%);
 @slider-handle-color-tooltip-open: @primary-color;
+@slider-handle-shadow: 0;
 @slider-dot-border-color: @border-color-split;
 @slider-dot-border-color-active: tint(@primary-color, 50%);
 @slider-disabled-color: @disabled-color;
@@ -627,3 +633,11 @@
 // ---
 @drawer-header-padding: 16px 24px;
 @drawer-body-padding: 24px;
+
+// Timeline
+// ---
+@timeline-width: 2px;
+@timeline-color: @border-color-split;
+@timeline-dot-border-width: 2px;
+@timeline-dot-color: @primary-color;
+@timeline-dot-bg: @component-background;

components/tabs/style/card-style.less

@@ -14,7 +14,7 @@
   &&-card &-card-bar &-tab {
     height: @tabs-card-height;
     margin: 0;
-    margin-right: 2px;
+    margin-right: @tabs-card-gutter;
     padding: 0 16px;
     line-height: @tabs-card-height - 2px;
     background: @tabs-card-head-background;
@@ -28,6 +28,10 @@
     background: @component-background;
     border-color: @border-color-split;
     border-bottom: @border-width-base solid @component-background;
+
+    &::before {
+      border-top: @tabs-card-tab-active-border-top;
+    }
   }
   &&-card &-card-bar &-tab-disabled {
     color: @tabs-card-active-color;

components/tabs/style/index.less

@@ -181,6 +181,18 @@
       cursor: pointer;
       transition: color 0.3s @ease-in-out;
 
+      &::before {
+        position: absolute;
+        top: -1px;
+        left: 0;
+        width: 100%;
+        border-top: 2px solid transparent;
+        border-radius: @border-radius-base @border-radius-base 0 0;
+        transition: all 0.3s;
+        content: '';
+        pointer-events: none;
+      }
+
       &:last-child {
         margin-right: 0;
       }

components/timeline/style/index.less

@@ -2,7 +2,6 @@
 @import '../../style/mixins/index';
 
 @timeline-prefix-cls: ~'@{ant-prefix}-timeline';
-@timeline-color: @border-color-split;
 
 .@{timeline-prefix-cls} {
   .reset-component;
@@ -23,7 +22,7 @@
       top: 0.75em;
       left: 4px;
       height: 100%;
-      border-left: 2px solid @timeline-color;
+      border-left: @timeline-width solid @timeline-color;
     }
 
     &-pending &-head {
@@ -38,18 +37,20 @@
       position: absolute;
       width: 10px;
       height: 10px;
-      background-color: @component-background;
-      border: 2px solid transparent;
+      background-color: @timeline-dot-bg;
+      border: @timeline-dot-border-width solid transparent;
       border-radius: 100px;
 
       &-blue {
         color: @primary-color;
         border-color: @primary-color;
       }
+
       &-red {
         color: @error-color;
         border-color: @error-color;
       }
+
       &-green {
         color: @success-color;
         border-color: @success-color;

components/tree-select/style/index.less

@@ -36,7 +36,7 @@
       padding: 3px 5px;
       color: @text-color;
       text-decoration: none;
-      border-radius: 2px;
+      border-radius: @border-radius-sm;
       cursor: pointer;
       transition: all 0.3s;
       &:hover {

components/upload/__tests__/__snapshots__/uploadlist.test.js.snap

@@ -97,7 +97,7 @@ exports[`Upload List handle error 1`] = `
               >
                 <div
                   class="ant-progress-bg"
-                  style="width: 0%; height: 2px; border-radius: 100px;"
+                  style="width: 0%; height: 2px;"
                 />
               </div>
             </div>
@@ -206,7 +206,7 @@ exports[`Upload List should be uploading when upload a file 1`] = `
               >
                 <div
                   class="ant-progress-bg"
-                  style="width: 0%; height: 2px; border-radius: 100px;"
+                  style="width: 0%; height: 2px;"
                 />
               </div>
             </div>
@@ -315,7 +315,7 @@ exports[`Upload List should be uploading when upload a file 2`] = `
               >
                 <div
                   class="ant-progress-bg"
-                  style="width: 0%; height: 2px; border-radius: 100px;"
+                  style="width: 0%; height: 2px;"
                 />
               </div>
             </div>