/* Default state */ .rc-checkbox { position: relative; display: inline-block; width: 14px; height: 14px; line-height: 1; white-space: nowrap; vertical-align: middle; background-color: #ffffff; border-color: #d9d9d9; border-style: solid; border-width: 1px; border-radius: 3px; outline: none; cursor: pointer; transition: border-color 0.3s cubic-bezier(0.68, -0.55, 0.27, 1.55), background-color 0.3s cubic-bezier(0.68, -0.55, 0.27, 1.55); } .rc-checkbox:hover, .rc-checkbox-input:focus + .rc-checkbox { border-color: #3dbcf6; } .rc-checkbox:after { position: absolute; top: 1px; left: 4px; display: table; width: 5px; height: 8px; border: 2px solid #ffffff; border-top: 0; border-left: 0; -webkit-transform: rotate(45deg); transform: rotate(45deg); animation-name: amCheckboxOut; animation-duration: 0.3s; animation-timing-function: cubic-bezier(0.68, -0.55, 0.27, 1.55); content: ' '; } .rc-checkbox-input { position: absolute; top: 0; right: 0; bottom: 0; left: 0; z-index: 9999; cursor: pointer; opacity: 0; } /* Checked state */ .rc-checkbox-checked { background-color: #3dbcf6; border-color: #3dbcf6; } .rc-checkbox-checked:hover { border-color: #3dbcf6; } @media print { .rc-checkbox-checked { box-shadow: inset 0 0 0 16px #3dbcf6; } } .rc-checkbox-disabled { background-color: #f3f3f3; border-color: #d9d9d9; } .rc-checkbox-disabled:after { border-color: #f3f3f3; animation-name: none; } .rc-checkbox-disabled.rc-checkbox-checked { background-color: #f3f3f3; border-color: #d9d9d9; } .rc-checkbox-disabled.rc-checkbox-checked:after { border-color: #cccccc; animation-name: none; } @media print { .rc-checkbox-disabled.rc-checkbox-checked { box-shadow: inset 0 0 0 16px #f3f3f3; } } .rc-checkbox-disabled:hover { border-color: #d9d9d9; } .rc-checkbox-disabled .rc-checkbox-input { cursor: default; } @keyframes amCheckboxIn { 0% { transform: scale(0, 0) rotate(45deg); transform-origin: 50% 50%; opacity: 0; } 100% { transform: scale(1, 1) rotate(45deg); transform-origin: 50% 50%; opacity: 1; } } @keyframes amCheckboxOut { 0% { opacity: 1; } 100% { opacity: 0; } }