mirror/ant-design
1
0
Fork 0
mirror of https://github.com/ant-design/ant-design.git synced 2024-11-25 03:29:59 +08:00
Code Issues Actions 35 Packages Projects Releases Wiki Activity

Add less variables about outline

Browse Source
This commit is contained in:
afc163 2016-08-31 17:04:24 +08:00
parent 123b2c1728
commit b798a228e6
4 changed files with 17 additions and 11 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

12
components/form/style/index.less
View File

@ -340,7 +340,7 @@ form {
.ant-select {
&-selection {
border-color: @warning-color;
box-shadow: 0 0 0 2px fade(@warning-color, 20%);
.active(@warning-color);
}
&-arrow {
color: @warning-color;
@ -360,7 +360,7 @@ form {
//input-number
.ant-input-number {
border-color: @warning-color;
box-shadow: 0 0 0 2px fade(@warning-color, 20%);
.active(@warning-color);
&:not([disabled]):hover {
border-color: @warning-color;
}
@ -379,7 +379,7 @@ form {
.ant-select {
&-selection {
border-color: @error-color;
box-shadow: 0 0 0 2px fade(@error-color, 20%);
.active(@error-color);
}
&-arrow {
@ -400,7 +400,7 @@ form {
//input-number
.ant-input-number {
border-color: @error-color;
box-shadow: 0 0 0 2px fade(@error-color, 20%);
.active(@error-color);
&:not([disabled]):hover {
border-color: @error-color;
}
@ -409,11 +409,11 @@ form {
.ant-mention-wrapper.active {
.ant-mention-editor {
border-color: @error-color;
box-shadow: 0 0 0 2px fade(@error-color, 20%);
.active(@error-color);
&:not([disabled]):hover,
&:not([disabled]):focus {
border-color: @error-color;
box-shadow: 0 0 0 2px fade(@error-color, 20%);
.active(@error-color);
}
}
}

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

@ -1,3 +1,5 @@
@import "../../input/style/mixin";
.form-control-validation(@text-color: @input-color; @border-color: @input-border-color; @background-color: @input-bg) {
.ant-form-explain,
.ant-form-split {
@ -6,7 +8,7 @@
// 输入框的不同校验状态
.ant-input {
border-color: @border-color;
box-shadow: 0 0 0 2px fade(@border-color, 20%);
.active(@border-color);
&:not([disabled]):hover {
border-color: @border-color;
@ -14,7 +16,7 @@
}
.ant-calendar-picker-open .ant-calendar-picker-input {
box-shadow: 0 0 0 2px fade(@border-color, 20%);
.active(@border-color);
}
.ant-input-group-addon {

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

@ -15,10 +15,10 @@
// input status
// == when focus or actived
.active(@color: @input-hover-border-color) {
.active(@color: @outline-color) {
border-color: tint(@color, 20%);
outline: 0;
box-shadow: 0 0 0 2px fade(@color, 20%);
box-shadow: 0 0 @outline-blur-size @outline-width fade(@color, 20%);
}
// == when hoverd

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

@ -49,6 +49,11 @@
@border-color-base : #d9d9d9; // base border outline a component
@border-color-split : #e9e9e9; // split border inside a component
// Outline
@outline-blur-size : 0;
@outline-width : 2px;
@outline-color : @primary-color;
// Background color
@background-color-base : #f7f7f7; // basic gray background
@ -157,7 +162,6 @@
@input-bg : #fff;
@input-hover-border-color : @primary-color;
@input-focus-border-color : @primary-color;
@input-disabled-bg : @background-color-base;
@form-item-margin-bottom : 24px;