rulemgt/src/main/frontend/src/public/thirdparty/css/magic-check.css

   1 @keyframes hover-color {
   2     from {
   3         border-color: #c0c0c0; }
   4     to {
   5         border-color: #3e97eb; } }
   6
   7 .magic-radio,
   8 .magic-checkbox {
   9     position: absolute;
  10     display: none; }
  11
  12 .magic-radio[disabled],
  13 .magic-checkbox[disabled] {
  14     cursor: not-allowed; }
  15
  16 .magic-radio + label,
  17 .magic-checkbox + label {
  18     position: relative;
  19     display: block;
  20     padding-left: 30px;
  21     cursor: pointer;
  22     vertical-align: middle;
  23     font-weight:normal;
  24     text-align: left;}
  25 .magic-radio + label:hover:before,
  26 .magic-checkbox + label:hover:before {
  27     animation-duration: 0.4s;
  28     animation-fill-mode: both;
  29     animation-name: hover-color; }
  30 .magic-radio + label:before,
  31 .magic-checkbox + label:before {
  32     position: absolute;
  33     top: 0;
  34     left: 0;
  35     display: inline-block;
  36     width: 20px;
  37     height: 20px;
  38     content: '';
  39     border: 1px solid #4ac9ff; }
  40 .magic-radio + label:after,
  41 .magic-checkbox + label:after {
  42     position: absolute;
  43     display: none;
  44     content: ''; }
  45
  46 .magic-radio[disabled] + label,
  47 .magic-checkbox[disabled] + label {
  48     cursor: not-allowed;
  49     color: #e4e4e4; }
  50 .magic-radio[disabled] + label:hover, .magic-radio[disabled] + label:before, .magic-radio[disabled] + label:after,
  51 .magic-checkbox[disabled] + label:hover,
  52 .magic-checkbox[disabled] + label:before,
  53 .magic-checkbox[disabled] + label:after {
  54     cursor: not-allowed; }
  55 .magic-radio[disabled] + label:hover:before,
  56 .magic-checkbox[disabled] + label:hover:before {
  57     border: 1px solid #e4e4e4;
  58     animation-name: none; }
  59 .magic-radio[disabled] + label:before,
  60 .magic-checkbox[disabled] + label:before {
  61     border-color: #e4e4e4; }
  62
  63 .magic-radio:checked + label:before,
  64 .magic-checkbox:checked + label:before {
  65     animation-name: none; }
  66
  67 .magic-radio:checked + label:after,
  68 .magic-checkbox:checked + label:after {
  69     display: block; }
  70
  71 .magic-radio + label:before {
  72     border-radius: 50%; }
  73
  74 .magic-radio + label:after {
  75     top: 6px;
  76     left: 6px;
  77     width: 8px;
  78     height: 8px;
  79     border-radius: 50%;
  80     background: #3e97eb; }
  81
  82 .magic-radio:checked + label:before {
  83     border: 1px solid #3e97eb; }
  84
  85 .magic-radio:checked[disabled] + label:before {
  86     border: 1px solid #c9e2f9; }
  87
  88 .magic-radio:checked[disabled] + label:after {
  89     background: #c9e2f9; }
  90
  91 .magic-checkbox + label:before {
  92     border-radius: 3px; }
  93
  94 .magic-checkbox + label:after {
  95     top: 2px;
  96     left: 7px;
  97     box-sizing: border-box;
  98     width: 6px;
  99     height: 12px;
 100     transform: rotate(45deg);
 101     border-width: 2px;
 102     border-style: solid;
 103     border-color: #fff;
 104     border-top: 0;
 105     border-left: 0; }
 106
 107 .magic-checkbox:checked + label:before {
 108     border: #3e97eb;
 109     background: #3e97eb; }
 110
 111 .magic-checkbox:checked[disabled] + label:before {
 112     border: #c9e2f9;
 113     background: #c9e2f9; }
 114
 115 .radio-toolbar label {
 116     background:Red;
 117     border:1px solid green;
 118     padding:2px 10px;
 119 }
 120
 121 .magic-radio:checked + label {
 122     font-weight: bold;
 123 }