mirror/ant-design
1
0
Fork 0
mirror of https://github.com/ant-design/ant-design.git synced 2025-06-11 11:32:52 +08:00
Code Issues Actions 38 Packages Projects Releases Wiki Activity

Add border customization variables (#4734)

Browse Source 
* Add border customization variables (#4712)

* Make border styles customizable (fixes #4712)
This commit is contained in:
Graeme Yeates 2017-01-31 03:05:10 -05:00 committed by 偏右
parent 7381cc95fe
commit 1006015ef0
31 changed files with 87 additions and 85 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

8
components/alert/style/index.less
View File

@ -29,7 +29,7 @@
}
&-success {
border: 1px solid @green-2;
border: @border-width-base @border-style-base @green-2;
background-color: @green-1;
.@{alert-prefix-cls}-icon {
color: @success-color;
@ -37,7 +37,7 @@
}
&-info {
border: 1px solid @primary-2;
border: @border-width-base @border-style-base @primary-2;
background-color: @primary-1;
.@{alert-prefix-cls}-icon {
color: @primary-color;
@ -45,7 +45,7 @@
}
&-warning {
border: 1px solid @yellow-2;
border: @border-width-base @border-style-base @yellow-2;
background-color: @yellow-1;
.@{alert-prefix-cls}-icon {
color: @warning-color;
@ -53,7 +53,7 @@
}
&-error {
border: 1px solid @red-2;
border: @border-width-base @border-style-base @red-2;
background-color: @red-1;
.@{alert-prefix-cls}-icon {
color: @error-color;

2
components/badge/style/index.less
View File

@ -17,7 +17,7 @@
border-radius: 10px;
min-width: 20px;
background: @highlight-color;
border: 1px solid transparent;
border: @border-width-base @border-style-base transparent;
color: #fff;
line-height: 18px;
text-align: center;

2
components/button/style/mixin.less
View File

@ -112,7 +112,7 @@
touch-action: manipulation;
cursor: pointer;
background-image: none;
border: 1px solid transparent;
border: @border-width-base @border-style-base transparent;
white-space: nowrap;
line-height: @line-height-base;
.button-size(@btn-padding-base; @font-size-base; @btn-border-radius-base);

2
components/calendar/style/index.less
View File

@ -6,7 +6,7 @@
font-size: @font-size-base;
line-height: @line-height-base;
outline: none;
border-top: 1px solid @border-color-base;
border-top: @border-width-base @border-style-base @border-color-base;
&-month-select {
margin-left: 5px;

4
components/card/style/index.less
View File

@ -17,13 +17,13 @@
}
&-bordered {
border: 1px solid @border-color-split;
border: @border-width-base @border-style-base @border-color-split;
}
&-head {
height: 48px;
line-height: 48px;
border-bottom: 1px solid @border-color-split;
border-bottom: @border-width-base @border-style-base @border-color-split;
padding: 0 24px;
&-title {

2
components/carousel/style/index.less
View File

@ -83,7 +83,7 @@
.slick-vertical .slick-slide {
display: block;
height: auto;
border: 1px solid transparent;
border: @border-width-base @border-style-base transparent;
}
.slick-arrow.slick-hidden {
display: none;

2
components/cascader/style/index.less
View File

@ -139,7 +139,7 @@
list-style: none;
margin: 0;
padding: 0;
border-right: 1px solid @border-color-split;
border-right: @border-width-base @border-style-base @border-color-split;
overflow: auto;
&:first-child {
border-radius: @border-radius-base 0 0 @border-radius-base;

2
components/checkbox/style/mixin.less
View File

@ -27,7 +27,7 @@
display: inline-block;
width: 14px;
height: 14px;
border: 1px solid @border-color-base;
border: @border-width-base @border-style-base @border-color-base;
border-radius: 3px;
background-color: #fff;
transition: all .3s;

6
components/collapse/style/index.less
View File

@ -13,11 +13,11 @@
.@{collapse-prefix-cls} {
background-color: @background-color-base;
border-radius: 3px;
border: 1px solid @border-color-base;
border: @border-width-base @border-style-base @border-color-base;
border-bottom: 0;
& > &-item {
border-bottom: 1px solid @border-color-base;
border-bottom: @border-width-base @border-style-base @border-color-base;
> .@{collapse-prefix-cls}-header {
height: 38px;
line-height: 38px;
@ -91,7 +91,7 @@
&-borderless > &-item > &-content {
background-color: transparent;
border-top: 1px solid @border-color-base;
border-top: @border-width-base @border-style-base @border-color-base;
}
&-borderless > &-item > &-header {

14
components/date-picker/style/Calendar.less
View File

@ -3,7 +3,7 @@
line-height: 34px;
text-align: center;
user-select: none;
border-bottom: 1px solid @border-color-split;
border-bottom: @border-width-base @border-style-base @border-color-split;
a:hover {
color: @link-hover-color;
@ -86,7 +86,7 @@
position: relative;
outline: none;
width: 231px;
border: 1px solid #fff;
border: @border-width-base @border-style-base #fff;
list-style: none;
font-size: @font-size-base;
text-align: left;
@ -99,7 +99,7 @@
&-input-wrap {
height: 34px;
padding: 6px;
border-bottom: 1px solid @border-color-split;
border-bottom: @border-width-base @border-style-base @border-color-split;
}
&-input {
@ -173,7 +173,7 @@
width: 20px;
height: 20px;
line-height: 18px;
border: 1px solid transparent;
border: @border-width-base @border-style-base transparent;
padding: 0;
background: transparent;
text-align: center;
@ -208,7 +208,7 @@
&-selected-day &-date {
background: @primary-color;
color: #fff;
border: 1px solid transparent;
border: @border-width-base @border-style-base transparent;
&:hover {
background: @primary-color;
@ -221,7 +221,7 @@
background: #f3f3f3;
border-radius: 0;
width: auto;
border: 1px solid transparent;
border: @border-width-base @border-style-base transparent;
&:hover {
background: #f3f3f3;
@ -239,7 +239,7 @@
}
&-footer-btn {
border-top: 1px solid @border-color-split;
border-top: @border-width-base @border-style-base @border-color-split;
text-align: center;
display: block;
line-height: 38px;

6
components/date-picker/style/RangePicker.less
View File

@ -153,7 +153,7 @@
div&-quick-selector {
display: block;
text-align: left;
border-top: 1px solid @border-color-split;
border-top: @border-width-base @border-style-base @border-color-split;
padding: 10.5px 10px;
> a {
@ -168,7 +168,7 @@
border-bottom: 0;
}
&-body {
border-top: 1px solid @border-color-split;
border-top: @border-width-base @border-style-base @border-color-split;
}
}
@ -193,7 +193,7 @@
display: inline-block;
height: 100%;
background-color: white;
border-top: 1px solid @border-color-split;
border-top: @border-width-base @border-style-base @border-color-split;
}
&-select {
height: 100%;

2
components/date-picker/style/TimePicker.less
View File

@ -49,7 +49,7 @@
&-select {
float: left;
font-size: @font-size-base;
border: 1px solid @border-color-split;
border: @border-width-base @border-style-base @border-color-split;
border-width: 0 1px;
margin-left: -1px;
box-sizing: border-box;

2
components/form/style/mixin.less
View File

@ -49,7 +49,7 @@
line-height: inherit;
color: @text-color-secondary;
border: 0;
border-bottom: 1px solid @border-color-base;
border-bottom: @border-width-base @border-style-base @border-color-base;
}
label {

6
components/input-number/style/index.less
View File

@ -17,7 +17,7 @@
font-size: @font-size-base;
height: @input-height-base;
display: inline-block;
border: 1px solid @border-color-base;
border: @border-width-base @border-style-base @border-color-base;
border-radius: @border-radius-base;
width: 80px;
@ -133,7 +133,7 @@
}
&-handler-wrap {
border-left: 1px solid @border-color-base;
border-left: @border-width-base @border-style-base @border-color-base;
width: 22px;
height: 100%;
background: @component-background;
@ -167,7 +167,7 @@
}
&-handler-down {
border-top: 1px solid @border-color-base;
border-top: @border-width-base @border-style-base @border-color-base;
top: -1px;
cursor: pointer;
&-inner {

6
components/input/style/mixin.less
View File

@ -51,7 +51,7 @@
color: @input-color;
background-color: @input-bg;
background-image: none;
border: 1px solid @input-border-color;
border: @border-width-base @border-style-base @input-border-color;
border-radius: @border-radius-base;
.placeholder(); // Reset placeholder
transition: all .3s;
@ -141,7 +141,7 @@
color: @input-color;
text-align: center;
background-color: #eee;
border: 1px solid @input-border-color;
border: @border-width-base @border-style-base @input-border-color;
border-radius: @border-radius-base;
position: relative;
transition: all .3s;
@ -153,7 +153,7 @@
.@{ant-prefix}-select-selection {
background-color: inherit;
margin: -1px;
border: 1px solid transparent;
border: @border-width-base @border-style-base transparent;
box-shadow: none;
}

6
components/menu/style/index.less
View File

@ -108,9 +108,9 @@
&-inline,
&-vertical {
border-right: 1px solid @border-color-split;
border-right: @border-width-base @border-style-base @border-color-split;
.@{menu-prefix-cls}-item {
border-right: 1px solid @border-color-split;
border-right: @border-width-base @border-style-base @border-color-split;
margin-left: -1px;
left: 1px;
position: relative;
@ -234,7 +234,7 @@
&-horizontal {
border: 0;
border-bottom: 1px solid @border-color-split;
border-bottom: @border-width-base @border-style-base @border-color-split;
box-shadow: none;
z-index: 0;

4
components/modal/style/modal.less
View File

@ -81,7 +81,7 @@
border-radius: @border-radius-base @border-radius-base 0 0;
background: @component-background;
color: @text-color;
border-bottom: 1px solid @border-color-split;
border-bottom: @border-width-base @border-style-base @border-color-split;
}
&-body {
@ -91,7 +91,7 @@
}
&-footer {
border-top: 1px solid @border-color-split;
border-top: @border-width-base @border-style-base @border-color-split;
padding: 10px 18px 10px 10px;
text-align: right;
border-radius: 0 0 @border-radius-base @border-radius-base;

6
components/pagination/style/index.less
View File

@ -33,7 +33,7 @@
text-align: center;
list-style: none;
float: left;
border: 1px solid @border-color-base;
border: @border-width-base @border-style-base @border-color-base;
background-color: @component-background;
margin-right: 8px;
font-family: Arial;
@ -126,7 +126,7 @@
&-prev,
&-next {
border: 1px solid @border-color-base;
border: @border-width-base @border-style-base @border-color-base;
background-color: @component-background;
a {
@ -228,7 +228,7 @@
box-sizing: border-box;
background-color: @component-background;
border-radius: @border-radius-base;
border: 1px solid @border-color-base;
border: @border-width-base @border-style-base @border-color-base;
outline: none;
padding: 5px 8px;
width: 30px;

4
components/radio/style/index.less
View File

@ -121,7 +121,7 @@ span.@{radio-prefix-cls} + * {
display: inline-block;
transition: all 0.3s ease;
cursor: pointer;
border: 1px solid @border-color-base;
border: @border-width-base @border-style-base @border-color-base;
border-left: 0;
background: @component-background;
padding: 0 16px;
@ -156,7 +156,7 @@ span.@{radio-prefix-cls} + * {
&:first-child {
border-radius: @border-radius-base 0 0 @border-radius-base;
border-left: 1px solid @border-color-base;
border-left: @border-width-base @border-style-base @border-color-base;
}
&:last-child {

2
components/select/style/index.less
View File

@ -75,7 +75,7 @@
background-color: @component-background;
border-radius: @border-radius-base;
border: 1px solid @border-color-base;
border: @border-width-base @border-style-base @border-color-base;
transition: all .3s @ease-in-out;
&:hover {

4
components/steps/style/index.less
View File

@ -161,7 +161,7 @@
.@{steps-prefix-cls}-head-inner {
display: block;
border: 1px solid @wait-icon-color;
border: @border-width-base @border-style-base @wait-icon-color;
width: @steps-icon-size;
height: @steps-icon-size;
line-height: 23px;
@ -237,7 +237,7 @@
&.@{steps-prefix-cls}-small {
.@{steps-prefix-cls}-head-inner {
border: 1px solid @wait-icon-color;
border: @border-width-base @border-style-base @wait-icon-color;
width: @steps-small-icon-size;
height: @steps-small-icon-size;
line-height: 15px;

2
components/style/core/normalize.less vendored
View File

@ -321,7 +321,7 @@ button:-moz-focusring,
*/
fieldset {
border: 1px solid #c0c0c0;
border: @border-width-base @border-style-base #c0c0c0;
margin: 0 2px;
padding: 0.35em 0.625em 0.75em;
}

2
components/style/themes/default.less
View File

@ -68,6 +68,8 @@
// Border color
@border-color-base : #d9d9d9; // base border outline a component
@border-color-split : #e9e9e9; // split border inside a component
@border-width-base : 1px; // width of the border for a component
@border-style-base : solid; // style of a components border
// Outline
@outline-blur-size : 0;

38
components/table/style/index.less
View File

@ -51,7 +51,7 @@
}
&-tbody > tr > td {
border-bottom: 1px solid @border-color-split;
border-bottom: @border-width-base @border-style-base @border-color-split;
position: relative;
}
@ -85,7 +85,7 @@
}
&.@{table-prefix-cls}-bordered &-footer {
border: 1px solid @border-color-split;
border: @border-width-base @border-style-base @border-color-split;
}
&-title {
@ -96,7 +96,7 @@
}
&.@{table-prefix-cls}-bordered &-title {
border: 1px solid @border-color-split;
border: @border-width-base @border-style-base @border-color-split;
}
&-title + &-content {
@ -183,7 +183,7 @@
}
&-small {
border: 1px solid @border-color-split;
border: @border-width-base @border-style-base @border-color-split;
border-radius: @border-radius-base;
.@{table-prefix-cls}-header > table,
@ -194,7 +194,7 @@
.@{table-prefix-cls}-thead > tr > th {
background: @component-background;
border-bottom: 1px solid @border-color-split;
border-bottom: @border-width-base @border-style-base @border-color-split;
}
.@{table-prefix-cls}-tbody > tr > td {
@ -208,14 +208,14 @@
}
.@{table-prefix-cls}-title {
border-bottom: 1px solid @border-color-split;
border-bottom: @border-width-base @border-style-base @border-color-split;
top: 0;
}
.@{table-prefix-cls}-header {
background: @component-background;
table {
border-bottom: 1px solid @border-color-split;
border-bottom: @border-width-base @border-style-base @border-color-split;
}
.@{table-prefix-cls}-thead > tr > th {
border-bottom: 0;
@ -268,15 +268,15 @@
.@{table-prefix-cls}-body > table,
.@{table-prefix-cls}-fixed-left table,
.@{table-prefix-cls}-fixed-right table {
border: 1px solid @border-color-split;
border: @border-width-base @border-style-base @border-color-split;
border-right: 0;
border-bottom: 0;
}
&.@{table-prefix-cls}-empty {
.@{table-prefix-cls}-placeholder {
border-left: 1px solid @border-color-split;
border-right: 1px solid @border-color-split;
border-left: @border-width-base @border-style-base @border-color-split;
border-right: @border-width-base @border-style-base @border-color-split;
}
}
@ -301,12 +301,12 @@
}
.@{table-prefix-cls}-thead > tr > th {
border-bottom: 1px solid @border-color-split;
border-bottom: @border-width-base @border-style-base @border-color-split;
}
.@{table-prefix-cls}-thead > tr > th,
.@{table-prefix-cls}-tbody > tr > td {
border-right: 1px solid @border-color-split;
border-right: @border-width-base @border-style-base @border-color-split;
}
&.@{table-prefix-cls}-small {
@ -322,14 +322,14 @@
.@{table-prefix-cls}-title {
border: 0;
border-bottom: 1px solid @border-color-split;
border-right: 1px solid @border-color-split;
border-bottom: @border-width-base @border-style-base @border-color-split;
border-right: @border-width-base @border-style-base @border-color-split;
}
.@{table-prefix-cls}-footer {
border: 0;
border-top: 1px solid @border-color-split;
border-right: 1px solid @border-color-split;
border-top: @border-width-base @border-style-base @border-color-split;
border-right: @border-width-base @border-style-base @border-color-split;
&:before {
display: none;
}
@ -340,7 +340,7 @@
&-placeholder {
padding: 16px 8px;
background: @component-background;
border-bottom: 1px solid @border-color-split;
border-bottom: @border-width-base @border-style-base @border-color-split;
text-align: center;
font-size: @font-size-base;
color: @text-color-secondary;
@ -396,7 +396,7 @@
&-btns {
overflow: hidden;
padding: 7px 16px;
border-top: 1px solid @border-color-split;
border-top: @border-width-base @border-style-base @border-color-split;
}
&-link {
@ -424,7 +424,7 @@
height: 17px;
text-align: center;
line-height: 14px;
border: 1px solid @border-color-split;
border: @border-width-base @border-style-base @border-color-split;
user-select: none;
background: @component-background;
&-cell {

6
components/tabs/style/card-style.less
View File

@ -12,7 +12,7 @@
}
&&-card > &-bar &-tab {
margin: 0;
border: 1px solid @border-color-base;
border: @border-width-base @border-style-base @border-color-base;
border-bottom: 0;
border-radius: 6px 6px 0 0;
transition: all 0.3s @ease-in-out;
@ -74,7 +74,7 @@
text-align: center;
cursor: pointer;
border-radius: 3px;
border: 1px solid @border-color-base;
border: @border-width-base @border-style-base @border-color-base;
font-size: @font-size-base;
.iconfont-size-under-12px(10px);
color: @text-color-secondary;
@ -91,7 +91,7 @@
height: auto;
}
.@{tab-prefix-cls}-tab {
border-bottom: 1px solid @border-color-base;
border-bottom: @border-width-base @border-style-base @border-color-base;
margin-bottom: 8px;
&-active {
padding-bottom: 4px;

10
components/tabs/style/index.less
View File

@ -27,7 +27,7 @@
}
&-bar {
border-bottom: 1px solid @border-color-base;
border-bottom: @border-width-base @border-style-base @border-color-base;
margin-bottom: 16px;
}
@ -259,7 +259,7 @@
&-vertical&-left {
> .@{tab-prefix-cls}-bar {
float: left;
border-right: 1px solid @border-color-split;
border-right: @border-width-base @border-style-base @border-color-split;
margin-right: -1px;
margin-bottom: 0;
.@{tab-prefix-cls}-tab {
@ -277,14 +277,14 @@
}
> .@{tab-prefix-cls}-content {
padding-left: 24px;
border-left: 1px solid @border-color-split;
border-left: @border-width-base @border-style-base @border-color-split;
}
}
&-vertical&-right {
> .@{tab-prefix-cls}-bar {
float: right;
border-left: 1px solid @border-color-split;
border-left: @border-width-base @border-style-base @border-color-split;
margin-left: -1px;
margin-bottom: 0;
.@{tab-prefix-cls}-nav-container {
@ -299,7 +299,7 @@
}
> .@{tab-prefix-cls}-content {
padding-right: 24px;
border-right: 1px solid @border-color-split;
border-right: @border-width-base @border-style-base @border-color-split;
}
}

2
components/tag/style/index.less
View File

@ -9,7 +9,7 @@
height: 22px;
padding: 0 8px;
border-radius: @border-radius-base;
border: 1px solid @border-color-split;
border: @border-width-base @border-style-base @border-color-split;
background: @background-color-base;
font-size: @font-size-base;
transition: all 0.3s @ease-in-out-circ;

6
components/time-picker/style/index.less
View File

@ -38,7 +38,7 @@
box-sizing: border-box;
position: relative;
padding: 6px;
border-bottom: 1px solid @border-color-split;
border-bottom: @border-width-base @border-style-base @border-color-split;
}
&-invalid {
@ -80,7 +80,7 @@
&-select {
float: left;
font-size: @font-size-base;
border-left: 1px solid @border-color-split;
border-left: @border-width-base @border-style-base @border-color-split;
box-sizing: border-box;
width: @time-picker-panel-column-width;
overflow: hidden;
@ -150,7 +150,7 @@
&-addon {
padding: 8px;
border-top: 1px solid @border-color-split;
border-top: @border-width-base @border-style-base @border-color-split;
}
&.slide-up-enter.slide-up-enter-active&-placement-topLeft,

6
components/transfer/style/index.less
View File

@ -10,7 +10,7 @@
&-list {
font-size: @font-size-base;
border: 1px solid @border-color-base;
border: @border-width-base @border-style-base @border-color-base;
display: inline-block;
border-radius: @border-radius-base;
vertical-align: middle;
@ -53,7 +53,7 @@
border-radius: @border-radius-base @border-radius-base 0 0;
background: @component-background;
color: @text-color;
border-bottom: 1px solid @border-color-split;
border-bottom: @border-width-base @border-style-base @border-color-split;
overflow: hidden;
position: absolute;
top: 0;
@ -128,7 +128,7 @@
}
&-footer {
border-top: 1px solid @border-color-split;
border-top: @border-width-base @border-style-base @border-color-split;
border-radius: 0 0 @border-radius-base @border-radius-base;
position: absolute;
bottom: 0;

2
components/tree-select/style/index.less
View File

@ -127,7 +127,7 @@
padding: 4px 7px;
width: 100%;
box-sizing: border-box;
border: 1px solid @border-color-base;
border: @border-width-base @border-style-base @border-color-base;
border-radius: 4px;
outline: none;
}

6
components/upload/style/index.less
View File

@ -24,7 +24,7 @@
}
&&-select-picture-card {
border: 1px dashed @border-color-base;
border: @border-width-base dashed @border-color-base;
width: @upload-pictrue-card-size;
height: @upload-pictrue-card-size;
border-radius: @border-radius-base;
@ -50,7 +50,7 @@
}
&&-drag {
border: 1px dashed @border-color-base;
border: @border-width-base dashed @border-color-base;
transition: border-color 0.3s ease;
cursor: pointer;
border-radius: @border-radius-base;
@ -176,7 +176,7 @@
.@{upload-item} {
padding: 8px;
border-radius: @border-radius-base;
border: 1px solid @border-color-base;
border: @border-width-base @border-style-base @border-color-base;
height: 66px;
position: relative;
&:hover {