mirror/ant-design
1
0
Fork 0
mirror of https://github.com/ant-design/ant-design.git synced 2024-11-27 20:49:53 +08:00
Code Issues Actions 39 Packages Projects Releases Wiki Activity

Vars for checkbox and radio (#9003)

Browse Source 
* vars for radio component

* add @checkbox-color var
This commit is contained in:
George Gray 2018-01-18 02:22:03 +00:00 committed by 偏右
parent a2b6d0a23e
commit a9abe14122
3 changed files with 26 additions and 22 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

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

@ -17,7 +17,7 @@
.@{checkbox-prefix-cls}-wrapper:hover &-inner,
&:hover &-inner,
&-input:focus + &-inner {
border-color: @primary-color;
border-color: @checkbox-color;
}
&-checked:after {
@ -27,7 +27,7 @@
width: 100%;
height: 100%;
border-radius: @border-radius-sm;
border: 1px solid @primary-color;
border: 1px solid @checkbox-color;
content: '';
animation: antCheckboxEffect 0.36s ease-in-out;
animation-fill-mode: both;
@ -115,8 +115,8 @@
.@{checkbox-prefix-cls}-checked,
.@{checkbox-prefix-cls}-indeterminate {
.@{checkbox-inner-prefix-cls} {
background-color: @primary-color;
border-color: @primary-color;
background-color: @checkbox-color;
border-color: @checkbox-color;
}
}

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

@ -36,7 +36,7 @@
&:hover,
&-focused {
.@{radio-inner-prefix-cls} {
border-color: @primary-color;
border-color: @radio-dot-color;
}
}
&-checked:after {
@ -46,7 +46,7 @@
width: 100%;
height: 100%;
border-radius: 50%;
border: 1px solid @primary-color;
border: 1px solid @radio-dot-color;
content: '';
animation: antRadioEffect 0.36s ease-in-out;
animation-fill-mode: both;
@ -69,7 +69,7 @@
border-top: 0;
border-left: 0;
content: ' ';
background-color: @primary-color;
background-color: @radio-dot-color;
opacity: 0;
transform: scale(0);
transition: all @radio-duration @ease-in-out-circ;
@ -104,7 +104,7 @@
// 选中状态
.@{radio-prefix-cls}-checked {
.@{radio-inner-prefix-cls} {
border-color: @primary-color;
border-color: @radio-dot-color;
&:after {
transform: scale(.875);
opacity: 1;
@ -204,7 +204,7 @@ span.@{radio-prefix-cls} + * {
&:hover,
&-focused {
color: @primary-color;
color: @radio-dot-color;
position: relative;
}
@ -218,29 +218,29 @@ span.@{radio-prefix-cls} + * {
&-checked {
background: @radio-button-bg;
border-color: @primary-color;
color: @primary-color;
box-shadow: -1px 0 0 0 @primary-color;
border-color: @radio-dot-color;
color: @radio-dot-color;
box-shadow: -1px 0 0 0 @radio-dot-color;
z-index: 1;
&::before {
background-color: @primary-color !important;
background-color: @radio-dot-color !important;
opacity: 0.1;
}
&:first-child {
border-color: @primary-color;
border-color: @radio-dot-color;
box-shadow: none !important;
}
&:hover {
border-color: @primary-5;
box-shadow: -1px 0 0 0 @primary-5;
color: @primary-5;
border-color: @radio-button-hover-color;
box-shadow: -1px 0 0 0 @radio-button-hover-color;
color: @radio-button-hover-color;
}
&:active {
border-color: @primary-7;
box-shadow: -1px 0 0 0 @primary-7;
color: @primary-7;
border-color: @radio-button-active-color;
box-shadow: -1px 0 0 0 @radio-button-active-color;
color: @radio-button-active-color;
}
}

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

@ -156,13 +156,17 @@
// Checkbox
@checkbox-size : 16px;
@checkbox-color : @primary-color;
// Radio
@radio-size : 16px;
@radio-dot-color : @primary-color;
// Radio buttons
@radio-button-bg : @btn-default-bg;
@radio-button-color : @btn-default-color;
@radio-button-bg : @btn-default-bg;
@radio-button-color : @btn-default-color;
@radio-button-hover-color : @primary-5;
@radio-button-active-color : @primary-7;
// Media queries breakpoints
// Extra small screen / phone