Permalink
Browse files

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

  • Loading branch information...
megawac authored and afc163 committed Jan 12, 2018
1 parent 07fb7f9 commit c9d73978dd2694f9d2bd0111f82a20d237f83621
Showing with 24 additions and 14 deletions.
  1. +24 −14 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;

This comment has been minimized.

@zhang740

zhang740 Jan 18, 2018

Member

margin-right: 32px -> margin-left: 32px? is break change?

This comment has been minimized.

@afc163

afc163 Jan 18, 2018

Member

Fixed in 200d6cb
Thx for reporting that.

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";
}

0 comments on commit c9d7397

Please sign in to comment.