git.roojs.org Git - web.Reddit/blob - css-bootstrap/checkbox.css

   1 /*
   2  *
   3  * From https://github.com/flatlogic/awesome-bootstrap-checkbox
   4  *
   5  */
   6 .checkbox label {
   7     display: inline-block;
   8     position: relative;
   9     padding-left: 5px;
  10     -webkit-touch-callout: none;
  11     -webkit-user-select: none;
  12     -khtml-user-select: none;
  13     -moz-user-select: none;
  14     -ms-user-select: none;
  15     user-select: none;
  16 }
  17 .checkbox label::before {
  18     content: "";
  19     display: inline-block;
  20     position: absolute;
  21     width: 17px;
  22     height: 17px;
  23     left: 0;
  24     margin-left: -20px;
  25     border: 1px solid #cccccc;
  26     border-radius: 3px;
  27     background-color: #fff;
  28     -webkit-transition: border 0.15s ease-in-out, color 0.15s ease-in-out;
  29     -o-transition: border 0.15s ease-in-out, color 0.15s ease-in-out;
  30     transition: border 0.15s ease-in-out, color 0.15s ease-in-out; }
  31 .checkbox label::after {
  32     display: inline-block;
  33     position: absolute;
  34     width: 16px;
  35     height: 16px;
  36     left: 0;
  37     top: 0;
  38     margin-left: -20px;
  39     padding-left: 3px;
  40     padding-top: 1px;
  41     font-size: 11px;
  42     color: #555555; }
  43 .checkbox input[type="checkbox"] {
  44     display: none; }
  45 .checkbox input[type="checkbox"]:checked + label::after {
  46     font-family: 'FontAwesome';
  47     content: "\f00c"; }
  48 .checkbox input[type="checkbox"]:disabled + label {
  49     opacity: 0.65; }
  50 .checkbox input[type="checkbox"]:disabled + label::before {
  51     background-color: #eeeeee;
  52     cursor: not-allowed; }
  53 .checkbox.checkbox-circle label::before {
  54     border-radius: 50%; }
  55
  56 .checkbox-primary input[type="checkbox"]:checked + label::before {
  57     background-color: #428bca;
  58     border-color: #428bca; }
  59 .checkbox-primary input[type="checkbox"]:checked + label::after {
  60     color: #fff; }
  61
  62 .checkbox-danger input[type="checkbox"]:checked + label::before {
  63     background-color: #d9534f;
  64     border-color: #d9534f; }
  65 .checkbox-danger input[type="checkbox"]:checked + label::after {
  66     color: #fff; }
  67
  68 .checkbox-info input[type="checkbox"]:checked + label::before {
  69     background-color: #5bc0de;
  70     border-color: #5bc0de; }
  71 .checkbox-info input[type="checkbox"]:checked + label::after {
  72     color: #fff; }
  73
  74 .checkbox-warning input[type="checkbox"]:checked + label::before {
  75     background-color: #f0ad4e;
  76     border-color: #f0ad4e; }
  77 .checkbox-warning input[type="checkbox"]:checked + label::after {
  78     color: #fff; }
  79
  80 .checkbox-success input[type="checkbox"]:checked + label::before {
  81     background-color: #5cb85c;
  82     border-color: #5cb85c; }
  83 .checkbox-success input[type="checkbox"]:checked + label::after {
  84     color: #fff; }
  85
  86 .radio label {
  87     display: inline-block;
  88     position: relative;
  89     padding-left: 5px; }
  90 .radio label::before {
  91     content: "";
  92     display: inline-block;
  93     position: absolute;
  94     width: 17px;
  95     height: 17px;
  96     left: 0;
  97     margin-left: -20px;
  98     border: 1px solid #cccccc;
  99     border-radius: 50%;
 100     background-color: #fff;
 101     -webkit-transition: border 0.15s ease-in-out;
 102     -o-transition: border 0.15s ease-in-out;
 103     transition: border 0.15s ease-in-out; }
 104 .radio label::after {
 105     display: inline-block;
 106     position: absolute;
 107     content: " ";
 108     width: 11px;
 109     height: 11px;
 110     left: 3px;
 111     top: 3px;
 112     margin-left: -20px;
 113     border-radius: 50%;
 114     background-color: #555555;
 115     -webkit-transform: scale(0, 0);
 116     -ms-transform: scale(0, 0);
 117     -o-transform: scale(0, 0);
 118     transform: scale(0, 0);
 119     -webkit-transition: -webkit-transform 0.1s cubic-bezier(0.8, -0.33, 0.2, 1.33);
 120     -moz-transition: -moz-transform 0.1s cubic-bezier(0.8, -0.33, 0.2, 1.33);
 121     -o-transition: -o-transform 0.1s cubic-bezier(0.8, -0.33, 0.2, 1.33);
 122     transition: transform 0.1s cubic-bezier(0.8, -0.33, 0.2, 1.33); }
 123 .radio input[type="radio"] {
 124     display: none; }
 125 .radio input[type="radio"]:checked + label::after {
 126     -webkit-transform: scale(1, 1);
 127     -ms-transform: scale(1, 1);
 128     -o-transform: scale(1, 1);
 129     transform: scale(1, 1); }
 130 .radio input[type="radio"]:disabled + label {
 131     opacity: 0.65; }
 132 .radio input[type="radio"]:disabled + label::before {
 133     cursor: not-allowed; }
 134
 135 .radio-primary input[type="radio"] + label::after {
 136     background-color: #428bca; }
 137 .radio-primary input[type="radio"]:checked + label::before {
 138     border-color: #428bca; }
 139 .radio-primary input[type="radio"]:checked + label::after {
 140     background-color: #428bca; }
 141
 142 .radio-danger input[type="radio"] + label::after {
 143     background-color: #d9534f; }
 144 .radio-danger input[type="radio"]:checked + label::before {
 145     border-color: #d9534f; }
 146 .radio-danger input[type="radio"]:checked + label::after {
 147     background-color: #d9534f; }
 148
 149 .radio-info input[type="radio"] + label::after {
 150     background-color: #5bc0de; }
 151 .radio-info input[type="radio"]:checked + label::before {
 152     border-color: #5bc0de; }
 153 .radio-info input[type="radio"]:checked + label::after {
 154     background-color: #5bc0de; }
 155
 156 .radio-warning input[type="radio"] + label::after {
 157     background-color: #f0ad4e; }
 158 .radio-warning input[type="radio"]:checked + label::before {
 159     border-color: #f0ad4e; }
 160 .radio-warning input[type="radio"]:checked + label::after {
 161     background-color: #f0ad4e; }
 162
 163 .radio-success input[type="radio"] + label::after {
 164     background-color: #5cb85c; }
 165 .radio-success input[type="radio"]:checked + label::before {
 166     border-color: #5cb85c; }
 167 .radio-success input[type="radio"]:checked + label::after {
 168     background-color: #5cb85c; }