Add border customization variables (#4734)

* 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

View File

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

View File

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

View File

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

View File

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

View File

@ -17,13 +17,13 @@
} }
&-bordered { &-bordered {
border: 1px solid @border-color-split; border: @border-width-base @border-style-base @border-color-split;
} }
&-head { &-head {
height: 48px; height: 48px;
line-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; padding: 0 24px;
&-title { &-title {

View File

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

View File

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

View File

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

View File

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

View File

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

View File

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

View File

@ -49,7 +49,7 @@
&-select { &-select {
float: left; float: left;
font-size: @font-size-base; 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; border-width: 0 1px;
margin-left: -1px; margin-left: -1px;
box-sizing: border-box; box-sizing: border-box;

View File

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

View File

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

View File

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

View File

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

View File

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

View File

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

View File

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

View File

@ -75,7 +75,7 @@
background-color: @component-background; background-color: @component-background;
border-radius: @border-radius-base; 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; transition: all .3s @ease-in-out;
&:hover { &:hover {

View File

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

View File

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

View File

@ -68,6 +68,8 @@
// Border color // Border color
@border-color-base : #d9d9d9; // base border outline a component @border-color-base : #d9d9d9; // base border outline a component
@border-color-split : #e9e9e9; // split border inside 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
@outline-blur-size : 0; @outline-blur-size : 0;

View File

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

View File

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

View File

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

View File

@ -9,7 +9,7 @@
height: 22px; height: 22px;
padding: 0 8px; padding: 0 8px;
border-radius: @border-radius-base; 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; background: @background-color-base;
font-size: @font-size-base; font-size: @font-size-base;
transition: all 0.3s @ease-in-out-circ; transition: all 0.3s @ease-in-out-circ;

View File

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

View File

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

View File

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

View File

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