Add less variables to control the paddings and margins of tabs (#8954)

ant-design · Jan 12, 2018 · c9d7397 · zhang740 · Jan 18, 2018 · afc163
1 parent 07fb7f9
commit c9d7397
Showing 1 changed file with 24 additions and 14 deletions.
diff --git a/components/tabs/style/index.less b/components/tabs/style/index.less
@@ -4,6 +4,17 @@
 
 @import "./card-style";
 
+@tabs-bar-margin: 0 0 16px 0;
+
+@tab-horizontal-margin: 0 0 0 32px;
+@tab-vertical-margin: 0 0 16px 0;
+
+@tab-horizontal-padding: 12px 16px;
+@tab-vertical-padding: 8px 24px;
+
+// The width (or height for vertical) of the scrolling arrow
+@tab-scrolling-size: 32px;
+
 .@{tab-prefix-cls} {
   .reset-component;
   position: relative;
@@ -23,7 +34,7 @@
 
   &-bar {
     border-bottom: @border-width-base @border-style-base @border-color-split;
-    margin-bottom: 16px;
+    margin: @tab-bar-margin;
     outline: none;
     transition: padding .3s @ease-in-out;
   }
@@ -40,8 +51,8 @@
     .clearfix;
 
     &-scrolling {
-      padding-left: 32px;
-      padding-right: 32px;
+      padding-left: @tab-scrolling-size;
+      padding-right: @tab-scrolling-size;
     }
   }
 
@@ -63,7 +74,7 @@
 
     &.@{tab-prefix-cls}-tab-arrow-show {
       opacity: 1;
-      width: 32px;
+      width: @tab-scrolling-size;
       height: 100%;
       pointer-events: auto;
     }
@@ -157,15 +168,15 @@
     .@{tab-prefix-cls}-tab {
       display: inline-block;
       height: 100%;
-      margin-right: 32px;
+      margin: @tab-horizontal-margin;
+      padding: @tab-horizontal-padding;
       box-sizing: border-box;
       position: relative;
 
       &:last-child {
         margin-right: 0;
       }
 
-      padding: 12px 16px;
       transition: color 0.3s @ease-in-out;
       cursor: pointer;
       text-decoration: none;
@@ -236,22 +247,21 @@
       border-bottom: 0;
       height: 100%;
       &-tab-prev, &-tab-next {
-        width: 32px;
+        width: @tab-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: 32px;
+        height: @tab-scrolling-size;
       }
 
       .@{tab-prefix-cls}-tab {
         float: none;
-        margin-right: 0;
-        margin-bottom: 16px;
+        margin: @tab-vertical-margin;
+        padding: @tab-vertical-padding;
         display: block;
-        padding: 8px 24px;
 
         &:last-child {
           margin-bottom: 0;
@@ -275,7 +285,7 @@
         margin-bottom: 0;
 
         &.@{tab-prefix-cls}-nav-container-scrolling {
-          padding: 32px 0;
+          padding: @tab-scrolling-size 0;
         }
       }
 
@@ -297,7 +307,7 @@
       .@{tab-prefix-cls}-tab-next {
         width: 100%;
         bottom: 0;
-        height: 32px;
+        height: @tab-scrolling-size;
         &-icon:before {
           content: "\e61d";
         }
@@ -306,7 +316,7 @@
       .@{tab-prefix-cls}-tab-prev {
         top: 0;
         width: 100%;
-        height: 32px;
+        height: @tab-scrolling-size;
         &-icon:before {
           content: "\e61e";
         }