portal-common/src/main/webapp/framework/browser/thirdparty/css/magic-check.css

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