mirror of
https://gitlink.org.cn/Gitlink/forgeplus.git
synced 2026-05-03 19:53:05 +08:00
init project
This commit is contained in:
114
public/stylesheets/css/magic-check.css
Normal file
114
public/stylesheets/css/magic-check.css
Normal file
@@ -0,0 +1,114 @@
|
||||
@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; }
|
||||
Reference in New Issue
Block a user