mirror of
https://github.com/ant-design/ant-design.git
synced 2025-06-11 11:32:52 +08:00
Add border customization variables (#4734)
* Add border customization variables (#4712) * Make border styles customizable (fixes #4712)
This commit is contained in:
parent
7381cc95fe
commit
1006015ef0
@ -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;
|
||||||
|
@ -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;
|
||||||
|
@ -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);
|
||||||
|
@ -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;
|
||||||
|
@ -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 {
|
||||||
|
@ -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;
|
||||||
|
@ -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;
|
||||||
|
@ -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;
|
||||||
|
@ -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 {
|
||||||
|
@ -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;
|
||||||
|
@ -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%;
|
||||||
|
@ -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;
|
||||||
|
@ -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 {
|
||||||
|
@ -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 {
|
||||||
|
@ -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;
|
||||||
}
|
}
|
||||||
|
|
||||||
|
@ -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;
|
||||||
|
|
||||||
|
@ -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;
|
||||||
|
@ -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;
|
||||||
|
@ -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 {
|
||||||
|
@ -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 {
|
||||||
|
@ -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;
|
||||||
|
2
components/style/core/normalize.less
vendored
2
components/style/core/normalize.less
vendored
@ -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;
|
||||||
}
|
}
|
||||||
|
@ -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;
|
||||||
|
@ -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 {
|
||||||
|
@ -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;
|
||||||
|
@ -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;
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
|
@ -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;
|
||||||
|
@ -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,
|
||||||
|
@ -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;
|
||||||
|
@ -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;
|
||||||
}
|
}
|
||||||
|
@ -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 {
|
||||||
|
Loading…
Reference in New Issue
Block a user