@keyframes check1 {
0% { width: 0; } 50% { width: 5px; }
} @keyframes check2 {
0% { width: 0; } 50% { width: 0; } 100% { width: 8px; }
}
.label-checkbox {
padding: 6px 0; cursor: pointer; margin-right: 25px; vertical-align: middle; color: #3c4257; font-size: 14px; .checkbox + span { position: relative; margin-left: 4px; }
}
.label-checkbox .checkbox .icon-checkbox {
transform: translateY(-1px);
} label.checkbox {
margin-bottom: initial;
} .checkbox {
transform: translateY(3px); &.focus { @include focus-outline; } $size: 14px; @include size($size); cursor: pointer; position: relative; display: inline-block; input[type="checkbox"] { @include size($size); cursor: pointer; z-index: 1; opacity: 0; position: absolute; display: block; bottom: 0; &:checked ~ .icon-checkbox { background-color: #6772e5; box-shadow: none; &:before { animation: .3s check1; width: 5px; transform: rotate(45deg) translate(7px, 2px); transform-origin: left top; } &:after { animation: .3s check2; width: 9px; transform: rotate(-50deg) translate(-5px, 10px); transform-origin: left top; } } } .icon-checkbox { background-color: #fff; transform: translateY(-2px); transition: .3s background-color; box-shadow: 0 1px 1px 0 rgba(0, 0, 0, 0.12), 0 0 0 1px rgba(60, 66, 87, 0.16), 0 2px 5px 0 rgba(60, 66, 87, 0.12); border-radius: 3px; @include size(100%); display: inline-block; &:before, &:after { position: absolute; content: ''; display: block; background-color: #fff; height: 2px; } } @include ripple(34px, -10px, -9px); &.disabled { @extend %checkbox-disabled; }
}