ant-design-vue
Version:
An enterprise-class UI design language and Vue-based implementation
220 lines (219 loc) • 6.1 kB
CSS
/* stylelint-disable at-rule-empty-line-before,at-rule-name-space-after,at-rule-no-unknown */
/* stylelint-disable no-duplicate-selectors */
/* stylelint-disable declaration-bang-space-before,no-duplicate-selectors */
/* stylelint-disable declaration-bang-space-before,no-duplicate-selectors,string-no-newline */
@-webkit-keyframes antCheckboxEffect {
0% {
-webkit-transform: scale(1);
transform: scale(1);
opacity: 0.5;
}
100% {
-webkit-transform: scale(1.6);
transform: scale(1.6);
opacity: 0;
}
}
@keyframes antCheckboxEffect {
0% {
-webkit-transform: scale(1);
transform: scale(1);
opacity: 0.5;
}
100% {
-webkit-transform: scale(1.6);
transform: scale(1.6);
opacity: 0;
}
}
.ant-checkbox {
font-family: "Chinese Quote", -apple-system, BlinkMacSystemFont, "Segoe UI", "PingFang SC", "Hiragino Sans GB", "Microsoft YaHei", "Helvetica Neue", Helvetica, Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol";
font-size: 14px;
font-variant: tabular-nums;
line-height: 1.5;
color: rgba(0, 0, 0, 0.65);
-webkit-box-sizing: border-box;
box-sizing: border-box;
margin: 0;
padding: 0;
list-style: none;
white-space: nowrap;
cursor: pointer;
outline: none;
display: inline-block;
line-height: 1;
position: relative;
vertical-align: middle;
top: -0.09em;
}
.ant-checkbox-wrapper:hover .ant-checkbox-inner,
.ant-checkbox:hover .ant-checkbox-inner,
.ant-checkbox-input:focus + .ant-checkbox-inner {
border-color: #1890ff;
}
.ant-checkbox-checked:after {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
border-radius: 2px;
border: 1px solid #1890ff;
content: '';
-webkit-animation: antCheckboxEffect 0.36s ease-in-out;
animation: antCheckboxEffect 0.36s ease-in-out;
-webkit-animation-fill-mode: both;
animation-fill-mode: both;
visibility: hidden;
}
.ant-checkbox:hover:after,
.ant-checkbox-wrapper:hover .ant-checkbox:after {
visibility: visible;
}
.ant-checkbox-inner {
position: relative;
top: 0;
left: 0;
display: block;
width: 16px;
height: 16px;
border: 1px solid #d9d9d9;
border-radius: 2px;
background-color: #fff;
-webkit-transition: all .3s;
transition: all .3s;
}
.ant-checkbox-inner:after {
-webkit-transform: rotate(45deg) scale(0);
-ms-transform: rotate(45deg) scale(0);
transform: rotate(45deg) scale(0);
position: absolute;
left: 4.57142857px;
top: 1.14285714px;
display: table;
width: 5.71428571px;
height: 9.14285714px;
border: 2px solid #fff;
border-top: 0;
border-left: 0;
content: ' ';
-webkit-transition: all 0.1s cubic-bezier(0.71, -0.46, 0.88, 0.6), opacity 0.1s;
transition: all 0.1s cubic-bezier(0.71, -0.46, 0.88, 0.6), opacity 0.1s;
opacity: 0;
}
.ant-checkbox-input {
position: absolute;
left: 0;
z-index: 1;
cursor: pointer;
opacity: 0;
top: 0;
bottom: 0;
right: 0;
width: 100%;
height: 100%;
}
.ant-checkbox-indeterminate .ant-checkbox-inner:after {
content: ' ';
-webkit-transform: translate(-50%, -50%) scale(1);
-ms-transform: translate(-50%, -50%) scale(1);
transform: translate(-50%, -50%) scale(1);
border: 0;
left: 50%;
top: 50%;
width: 8px;
height: 8px;
background-color: #1890ff;
opacity: 1;
}
.ant-checkbox-indeterminate.ant-checkbox-disabled .ant-checkbox-inner:after {
border-color: rgba(0, 0, 0, 0.25);
}
.ant-checkbox-checked .ant-checkbox-inner:after {
-webkit-transform: rotate(45deg) scale(1);
-ms-transform: rotate(45deg) scale(1);
transform: rotate(45deg) scale(1);
position: absolute;
display: table;
border: 2px solid #fff;
border-top: 0;
border-left: 0;
content: ' ';
-webkit-transition: all 0.2s cubic-bezier(0.12, 0.4, 0.29, 1.46) 0.1s;
transition: all 0.2s cubic-bezier(0.12, 0.4, 0.29, 1.46) 0.1s;
opacity: 1;
}
.ant-checkbox-checked .ant-checkbox-inner {
background-color: #1890ff;
border-color: #1890ff;
}
.ant-checkbox-disabled {
cursor: not-allowed;
}
.ant-checkbox-disabled.ant-checkbox-checked .ant-checkbox-inner:after {
-webkit-animation-name: none;
animation-name: none;
border-color: rgba(0, 0, 0, 0.25);
}
.ant-checkbox-disabled .ant-checkbox-input {
cursor: not-allowed;
}
.ant-checkbox-disabled .ant-checkbox-inner {
border-color: #d9d9d9 ;
background-color: #f5f5f5;
}
.ant-checkbox-disabled .ant-checkbox-inner:after {
-webkit-animation-name: none;
animation-name: none;
border-color: #f5f5f5;
}
.ant-checkbox-disabled + span {
color: rgba(0, 0, 0, 0.25);
cursor: not-allowed;
}
.ant-checkbox-wrapper {
font-family: "Chinese Quote", -apple-system, BlinkMacSystemFont, "Segoe UI", "PingFang SC", "Hiragino Sans GB", "Microsoft YaHei", "Helvetica Neue", Helvetica, Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol";
font-size: 14px;
font-variant: tabular-nums;
line-height: 1.5;
color: rgba(0, 0, 0, 0.65);
-webkit-box-sizing: border-box;
box-sizing: border-box;
margin: 0;
padding: 0;
list-style: none;
line-height: unset;
cursor: pointer;
display: inline-block;
}
.ant-checkbox-wrapper + .ant-checkbox-wrapper {
margin-left: 8px;
}
.ant-checkbox-wrapper + span,
.ant-checkbox + span {
padding-left: 8px;
padding-right: 8px;
}
.ant-checkbox-group {
font-family: "Chinese Quote", -apple-system, BlinkMacSystemFont, "Segoe UI", "PingFang SC", "Hiragino Sans GB", "Microsoft YaHei", "Helvetica Neue", Helvetica, Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol";
font-size: 14px;
font-variant: tabular-nums;
line-height: 1.5;
color: rgba(0, 0, 0, 0.65);
-webkit-box-sizing: border-box;
box-sizing: border-box;
margin: 0;
padding: 0;
list-style: none;
display: inline-block;
}
.ant-checkbox-group-item {
display: inline-block;
margin-right: 8px;
}
.ant-checkbox-group-item:last-child {
margin-right: 0;
}
.ant-checkbox-group-item + .ant-checkbox-group-item {
margin-left: 0;
}