2019-01-02 13:01:56 +00:00
|
|
|
@import '../../style/mixins/index';
|
2017-10-26 07:18:08 +00:00
|
|
|
|
2019-01-02 13:01:56 +00:00
|
|
|
.antCheckboxFn(@checkbox-prefix-cls: ~'@{ant-prefix}-checkbox') {
|
|
|
|
@checkbox-inner-prefix-cls: ~'@{checkbox-prefix-cls}-inner';
|
2017-10-26 07:18:08 +00:00
|
|
|
// 一般状态
|
|
|
|
.@{checkbox-prefix-cls} {
|
2020-12-27 06:50:32 +00:00
|
|
|
.reset-component();
|
2020-03-07 11:45:13 +00:00
|
|
|
|
2019-03-05 05:16:32 +00:00
|
|
|
position: relative;
|
2021-12-28 08:47:52 +00:00
|
|
|
top: 0.2em;
|
2017-10-26 07:18:08 +00:00
|
|
|
line-height: 1;
|
2019-03-05 05:16:32 +00:00
|
|
|
white-space: nowrap;
|
|
|
|
outline: none;
|
|
|
|
cursor: pointer;
|
2017-10-26 07:18:08 +00:00
|
|
|
|
|
|
|
.@{checkbox-prefix-cls}-wrapper:hover &-inner,
|
|
|
|
&:hover &-inner,
|
|
|
|
&-input:focus + &-inner {
|
2018-09-05 13:28:54 +00:00
|
|
|
border-color: @checkbox-color;
|
2017-10-26 07:18:08 +00:00
|
|
|
}
|
|
|
|
|
2019-03-05 05:16:32 +00:00
|
|
|
&-checked::after {
|
2017-10-26 07:18:08 +00:00
|
|
|
position: absolute;
|
|
|
|
top: 0;
|
|
|
|
left: 0;
|
|
|
|
width: 100%;
|
|
|
|
height: 100%;
|
2018-09-05 13:28:54 +00:00
|
|
|
border: 1px solid @checkbox-color;
|
2021-12-28 08:47:52 +00:00
|
|
|
border-radius: @border-radius-base;
|
2019-03-05 05:16:32 +00:00
|
|
|
visibility: hidden;
|
2017-10-26 07:18:08 +00:00
|
|
|
animation: antCheckboxEffect 0.36s ease-in-out;
|
2020-03-07 11:45:13 +00:00
|
|
|
animation-fill-mode: backwards;
|
2019-03-05 05:16:32 +00:00
|
|
|
content: '';
|
2017-10-26 07:18:08 +00:00
|
|
|
}
|
|
|
|
|
2019-03-05 05:16:32 +00:00
|
|
|
&:hover::after,
|
|
|
|
.@{checkbox-prefix-cls}-wrapper:hover &::after {
|
2017-10-26 07:18:08 +00:00
|
|
|
visibility: visible;
|
|
|
|
}
|
|
|
|
|
|
|
|
&-inner {
|
|
|
|
position: relative;
|
|
|
|
top: 0;
|
|
|
|
left: 0;
|
|
|
|
display: block;
|
|
|
|
width: @checkbox-size;
|
|
|
|
height: @checkbox-size;
|
2021-12-28 08:47:52 +00:00
|
|
|
direction: ltr;
|
2021-01-14 09:33:17 +00:00
|
|
|
background-color: @checkbox-check-bg;
|
2018-12-09 11:30:35 +00:00
|
|
|
border: @checkbox-border-width @border-style-base @border-color-base;
|
2021-12-28 08:47:52 +00:00
|
|
|
border-radius: @checkbox-border-radius;
|
2018-11-14 13:33:56 +00:00
|
|
|
// Fix IE checked style
|
|
|
|
// https://github.com/ant-design/ant-design/issues/12597
|
|
|
|
border-collapse: separate;
|
2019-03-05 05:16:32 +00:00
|
|
|
transition: all 0.3s;
|
2017-10-26 07:18:08 +00:00
|
|
|
|
2019-03-05 05:16:32 +00:00
|
|
|
&::after {
|
2017-10-26 07:18:08 +00:00
|
|
|
@check-width: (@checkbox-size / 14) * 5px;
|
|
|
|
@check-height: (@checkbox-size / 14) * 8px;
|
2020-03-07 11:45:13 +00:00
|
|
|
|
2017-10-26 07:18:08 +00:00
|
|
|
position: absolute;
|
2019-03-05 05:16:32 +00:00
|
|
|
top: 50%;
|
2021-12-28 08:47:52 +00:00
|
|
|
// https://github.com/ant-design/ant-design/pull/19452
|
|
|
|
// https://github.com/ant-design/ant-design/pull/31726
|
2021-11-05 01:21:40 +00:00
|
|
|
left: 21.5%;
|
2017-10-26 07:18:08 +00:00
|
|
|
display: table;
|
|
|
|
width: @check-width;
|
|
|
|
height: @check-height;
|
2018-09-05 13:28:54 +00:00
|
|
|
border: 2px solid @checkbox-check-color;
|
2017-10-26 07:18:08 +00:00
|
|
|
border-top: 0;
|
|
|
|
border-left: 0;
|
2019-03-05 05:16:32 +00:00
|
|
|
transform: rotate(45deg) scale(0) translate(-50%, -50%);
|
2018-09-05 13:28:54 +00:00
|
|
|
opacity: 0;
|
2019-03-05 05:16:32 +00:00
|
|
|
transition: all 0.1s @ease-in-back, opacity 0.1s;
|
|
|
|
content: ' ';
|
2017-10-26 07:18:08 +00:00
|
|
|
}
|
|
|
|
}
|
|
|
|
|
|
|
|
&-input {
|
|
|
|
position: absolute;
|
|
|
|
top: 0;
|
|
|
|
right: 0;
|
2019-03-05 05:16:32 +00:00
|
|
|
bottom: 0;
|
|
|
|
left: 0;
|
|
|
|
z-index: 1;
|
2017-10-26 07:18:08 +00:00
|
|
|
width: 100%;
|
|
|
|
height: 100%;
|
2019-03-05 05:16:32 +00:00
|
|
|
cursor: pointer;
|
|
|
|
opacity: 0;
|
2017-10-26 07:18:08 +00:00
|
|
|
}
|
|
|
|
}
|
|
|
|
|
|
|
|
// 选中状态
|
2019-03-05 05:16:32 +00:00
|
|
|
.@{checkbox-prefix-cls}-checked .@{checkbox-inner-prefix-cls}::after {
|
2017-10-26 07:18:08 +00:00
|
|
|
position: absolute;
|
|
|
|
display: table;
|
2018-09-05 13:28:54 +00:00
|
|
|
border: 2px solid @checkbox-check-color;
|
2017-10-26 07:18:08 +00:00
|
|
|
border-top: 0;
|
|
|
|
border-left: 0;
|
2019-03-05 05:16:32 +00:00
|
|
|
transform: rotate(45deg) scale(1) translate(-50%, -50%);
|
2018-09-05 13:28:54 +00:00
|
|
|
opacity: 1;
|
2019-03-05 05:16:32 +00:00
|
|
|
transition: all 0.2s @ease-out-back 0.1s;
|
|
|
|
content: ' ';
|
2017-10-26 07:18:08 +00:00
|
|
|
}
|
|
|
|
|
2018-09-05 13:28:54 +00:00
|
|
|
.@{checkbox-prefix-cls}-checked {
|
2017-10-26 07:18:08 +00:00
|
|
|
.@{checkbox-inner-prefix-cls} {
|
2018-09-05 13:28:54 +00:00
|
|
|
background-color: @checkbox-color;
|
|
|
|
border-color: @checkbox-color;
|
2017-10-26 07:18:08 +00:00
|
|
|
}
|
|
|
|
}
|
|
|
|
|
|
|
|
.@{checkbox-prefix-cls}-disabled {
|
|
|
|
cursor: not-allowed;
|
|
|
|
|
|
|
|
&.@{checkbox-prefix-cls}-checked {
|
2019-03-05 05:16:32 +00:00
|
|
|
.@{checkbox-inner-prefix-cls}::after {
|
2017-10-26 07:18:08 +00:00
|
|
|
border-color: @disabled-color;
|
2019-03-05 05:16:32 +00:00
|
|
|
animation-name: none;
|
2017-10-26 07:18:08 +00:00
|
|
|
}
|
|
|
|
}
|
|
|
|
|
|
|
|
.@{checkbox-prefix-cls}-input {
|
|
|
|
cursor: not-allowed;
|
|
|
|
}
|
|
|
|
|
|
|
|
.@{checkbox-inner-prefix-cls} {
|
|
|
|
background-color: @input-disabled-bg;
|
2019-03-05 05:16:32 +00:00
|
|
|
border-color: @border-color-base !important;
|
2021-12-28 08:47:52 +00:00
|
|
|
|
2019-03-05 05:16:32 +00:00
|
|
|
&::after {
|
2017-10-26 07:18:08 +00:00
|
|
|
border-color: @input-disabled-bg;
|
2018-11-14 13:33:56 +00:00
|
|
|
border-collapse: separate;
|
2019-03-05 05:16:32 +00:00
|
|
|
animation-name: none;
|
2017-10-26 07:18:08 +00:00
|
|
|
}
|
|
|
|
}
|
|
|
|
|
|
|
|
& + span {
|
|
|
|
color: @disabled-color;
|
|
|
|
cursor: not-allowed;
|
|
|
|
}
|
2020-03-07 11:45:13 +00:00
|
|
|
|
|
|
|
// Not show highlight border of checkbox when disabled
|
|
|
|
&:hover::after,
|
|
|
|
.@{checkbox-prefix-cls}-wrapper:hover &::after {
|
|
|
|
visibility: hidden;
|
|
|
|
}
|
2017-10-26 07:18:08 +00:00
|
|
|
}
|
|
|
|
|
|
|
|
.@{checkbox-prefix-cls}-wrapper {
|
2020-12-27 06:50:32 +00:00
|
|
|
.reset-component();
|
2021-12-28 08:47:52 +00:00
|
|
|
display: inline-flex;
|
|
|
|
align-items: baseline;
|
2018-01-15 10:54:26 +00:00
|
|
|
line-height: unset;
|
2017-10-26 07:18:08 +00:00
|
|
|
cursor: pointer;
|
2021-12-28 08:47:52 +00:00
|
|
|
|
|
|
|
&::after {
|
|
|
|
display: inline-block;
|
|
|
|
width: 0;
|
|
|
|
overflow: hidden;
|
|
|
|
content: '\a0';
|
|
|
|
}
|
|
|
|
|
2020-03-07 11:45:13 +00:00
|
|
|
&.@{checkbox-prefix-cls}-wrapper-disabled {
|
|
|
|
cursor: not-allowed;
|
|
|
|
}
|
2021-12-28 08:47:52 +00:00
|
|
|
|
2017-10-26 07:18:08 +00:00
|
|
|
& + & {
|
|
|
|
margin-left: 8px;
|
|
|
|
}
|
|
|
|
}
|
|
|
|
|
|
|
|
.@{checkbox-prefix-cls} + span {
|
|
|
|
padding-right: 8px;
|
2019-03-05 05:16:32 +00:00
|
|
|
padding-left: 8px;
|
2017-10-26 07:18:08 +00:00
|
|
|
}
|
|
|
|
|
|
|
|
.@{checkbox-prefix-cls}-group {
|
2020-12-27 06:50:32 +00:00
|
|
|
.reset-component();
|
2018-01-15 10:54:26 +00:00
|
|
|
display: inline-block;
|
2021-12-28 08:47:52 +00:00
|
|
|
|
2017-10-26 07:18:08 +00:00
|
|
|
&-item {
|
2021-12-28 08:47:52 +00:00
|
|
|
margin-right: @checkbox-group-item-margin-right;
|
|
|
|
|
2017-10-26 07:18:08 +00:00
|
|
|
&:last-child {
|
|
|
|
margin-right: 0;
|
|
|
|
}
|
|
|
|
}
|
2021-12-28 08:47:52 +00:00
|
|
|
|
2017-10-26 07:18:08 +00:00
|
|
|
&-item + &-item {
|
|
|
|
margin-left: 0;
|
|
|
|
}
|
|
|
|
}
|
2018-11-14 13:33:56 +00:00
|
|
|
|
|
|
|
// 半选状态
|
|
|
|
.@{checkbox-prefix-cls}-indeterminate {
|
|
|
|
.@{checkbox-inner-prefix-cls} {
|
2021-12-28 08:47:52 +00:00
|
|
|
background-color: @checkbox-check-bg;
|
2018-11-14 13:33:56 +00:00
|
|
|
border-color: @border-color-base;
|
|
|
|
}
|
2019-03-05 05:16:32 +00:00
|
|
|
.@{checkbox-inner-prefix-cls}::after {
|
2018-11-14 13:33:56 +00:00
|
|
|
@indeterminate-width: @checkbox-size - 8px;
|
|
|
|
@indeterminate-height: @checkbox-size - 8px;
|
2020-03-07 11:45:13 +00:00
|
|
|
|
2018-11-14 13:33:56 +00:00
|
|
|
top: 50%;
|
2019-03-05 05:16:32 +00:00
|
|
|
left: 50%;
|
2018-11-14 13:33:56 +00:00
|
|
|
width: @indeterminate-width;
|
|
|
|
height: @indeterminate-height;
|
|
|
|
background-color: @checkbox-color;
|
2019-03-05 05:16:32 +00:00
|
|
|
border: 0;
|
|
|
|
transform: translate(-50%, -50%) scale(1);
|
2018-11-14 13:33:56 +00:00
|
|
|
opacity: 1;
|
2019-03-05 05:16:32 +00:00
|
|
|
content: ' ';
|
2018-11-14 13:33:56 +00:00
|
|
|
}
|
|
|
|
|
2019-03-05 05:16:32 +00:00
|
|
|
&.@{checkbox-prefix-cls}-disabled .@{checkbox-inner-prefix-cls}::after {
|
2018-11-14 13:33:56 +00:00
|
|
|
background-color: @disabled-color;
|
2019-03-05 05:16:32 +00:00
|
|
|
border-color: @disabled-color;
|
2018-11-14 13:33:56 +00:00
|
|
|
}
|
|
|
|
}
|
2017-10-26 07:18:08 +00:00
|
|
|
}
|
|
|
|
|
|
|
|
@keyframes antCheckboxEffect {
|
|
|
|
0% {
|
|
|
|
transform: scale(1);
|
|
|
|
opacity: 0.5;
|
|
|
|
}
|
2021-12-28 08:47:52 +00:00
|
|
|
|
2017-10-26 07:18:08 +00:00
|
|
|
100% {
|
|
|
|
transform: scale(1.6);
|
|
|
|
opacity: 0;
|
|
|
|
}
|
|
|
|
}
|