You can not select more than 25 topics
Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.
115 lines
2.7 KiB
115 lines
2.7 KiB
6 years ago
|
@keyframes hover-color {
|
||
|
|
from {
|
||
|
|
border-color: #c0c0c0; }
|
||
|
|
to {
|
||
|
|
border-color: #ff7500; } }
|
||
|
|
|
||
|
|
.magic-radio,
|
||
|
|
.magic-checkbox {
|
||
|
|
position: absolute;
|
||
|
|
display: none; }
|
||
|
|
|
||
|
|
.magic-radio[disabled],
|
||
|
|
.magic-checkbox[disabled] {
|
||
|
|
cursor: not-allowed; }
|
||
|
|
|
||
|
|
.magic-radio + label,
|
||
|
|
.magic-checkbox + label {
|
||
|
|
position: relative;
|
||
|
|
display: block;
|
||
|
|
padding-left: 25px;
|
||
|
|
cursor: pointer;
|
||
|
|
vertical-align: middle; }
|
||
|
|
.magic-checkbox + label{}
|
||
|
|
.magic-radio + label:hover:before,
|
||
|
|
.magic-checkbox + label:hover:before {
|
||
|
|
animation-duration: 0.4s;
|
||
|
|
animation-fill-mode: both;
|
||
|
|
animation-name: hover-color; }
|
||
|
|
.magic-radio + label:before,
|
||
|
|
.magic-checkbox + label:before {
|
||
|
|
position: absolute;
|
||
|
|
top: 6px;
|
||
|
|
left: 0;
|
||
|
|
display: inline-block;
|
||
|
|
width: 14px;
|
||
|
|
height: 14px;
|
||
|
|
content: '';
|
||
|
|
border: 1px solid #c0c0c0; }
|
||
|
|
.magic-radio + label:after,
|
||
|
|
.magic-checkbox + label:after {
|
||
|
|
position: absolute;
|
||
|
|
display: none;
|
||
|
|
content: ''; }
|
||
|
|
.magic-checkbox + label,.magic-radio + label{
|
||
|
|
top: 4px;
|
||
|
|
}
|
||
|
|
|
||
|
|
.magic-radio[disabled] + label,
|
||
|
|
.magic-checkbox[disabled] + label {
|
||
|
|
cursor: not-allowed;
|
||
|
|
color: #888; }
|
||
|
|
.magic-radio[disabled] + label:hover, .magic-radio[disabled] + label:before, .magic-radio[disabled] + label:after,
|
||
|
|
.magic-checkbox[disabled] + label:hover,
|
||
|
|
.magic-checkbox[disabled] + label:before,
|
||
|
|
.magic-checkbox[disabled] + label:after {
|
||
|
|
cursor: not-allowed; }
|
||
|
|
.magic-radio[disabled] + label:hover:before,
|
||
|
|
.magic-checkbox[disabled] + label:hover:before {
|
||
|
|
border: 1px solid #e4e4e4;
|
||
|
|
animation-name: none; }
|
||
|
|
.magic-radio[disabled] + label:before,
|
||
|
|
.magic-checkbox[disabled] + label:before {
|
||
|
|
border-color: #e4e4e4; }
|
||
|
|
|
||
|
|
.magic-radio:checked + label:before,
|
||
|
|
.magic-checkbox:checked + label:before {
|
||
|
|
animation-name: none; }
|
||
|
|
|
||
|
|
.magic-radio:checked + label:after,
|
||
|
|
.magic-checkbox:checked + label:after {
|
||
|
|
display: block; }
|
||
|
|
|
||
|
|
.magic-radio + label:before {
|
||
|
|
border-radius: 50%; }
|
||
|
|
|
||
|
|
.magic-radio + label:after {
|
||
|
|
top: 10px;
|
||
|
|
left: 4px;
|
||
|
|
width: 8px;
|
||
|
|
height: 8px;
|
||
|
|
border-radius: 50%;
|
||
|
|
background: #FF7500; }
|
||
|
|
|
||
|
|
.magic-radio:checked + label:before {
|
||
|
|
border: 1px solid #FF7500; }
|
||
|
|
|
||
|
|
.magic-radio:checked[disabled] + label:before {
|
||
|
|
border: 1px solid #ffbd87; }
|
||
|
|
|
||
|
|
.magic-radio:checked[disabled] + label:after {
|
||
|
|
background: #ffbd87; }
|
||
|
|
|
||
|
|
.magic-checkbox + label:before {
|
||
|
|
border-radius: 3px; }
|
||
|
|
|
||
|
|
.magic-checkbox + label:after {
|
||
|
|
top: 6px;
|
||
|
|
left: 6px;
|
||
|
|
box-sizing: border-box;
|
||
|
|
width: 6px;
|
||
|
|
height: 12px;
|
||
|
|
transform: rotate(45deg);
|
||
|
|
border-width: 2px;
|
||
|
|
border-style: solid;
|
||
|
|
border-color: #fff;
|
||
|
|
border-top: 0px;
|
||
|
|
border-left: 0;}
|
||
|
|
|
||
|
|
.magic-checkbox:checked + label:before {
|
||
|
|
border:1px solid #459be5;
|
||
|
|
background: #459be5; }
|
||
|
|
.magic-checkbox:checked[disabled] + label:before {
|
||
|
|
border: #92ccff;
|
||
|
|
background: #92ccff; }
|