git.roojs.org Git - roojs1/blob - scss/roojs-bootstrap/checkbox.scss

   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::after {
  18     display: inline-block;
  19     position: absolute;
  20     width: 16px;
  21     height: 16px;
  22     left: 0;
  23     top: 0;
  24     margin-left: -20px;
  25     padding-left: 3px;
  26     padding-top: 1px;
  27     font-size: 11px;
  28     color: $gray; }
  29 .checkbox input[type="checkbox"] {
  30     display: none; }
  31 .checkbox input[type="checkbox"]:checked + label::after {
  32     font-size: 18px;
  33     padding-top: 0px;
  34     font-family: 'Font Awesome 5 Free 400';
  35     font-weight: 900;
  36     color: $brand-success;
  37     content: "\f14a"; }
  38 .checkbox input[type="checkbox"]:not(:checked) + label::after {
  39     font-size: 18px;
  40     padding-top: 0px;
  41     font-family: 'Font Awesome 5 Free 400';
  42     font-weight: 900;
  43     content: "\f0c8"; }
  44
  45 .checkbox input[type="checkbox"]:disabled + label {
  46     opacity: 0.65; }
  47 .checkbox input[type="checkbox"]:disabled + label::before {
  48     background-color: $gray-lighter;
  49     cursor: not-allowed; }
  50 .checkbox.checkbox-circle label::before {
  51     border-radius: 50%; }
  52
  53 .checkbox-primary input[type="checkbox"]:checked + label::before {
  54     background-color: $brand-primary;
  55     border-color: $brand-primary; }
  56 .checkbox-primary input[type="checkbox"]:checked + label::after {
  57     color: $body-bg; }
  58
  59 .checkbox-danger input[type="checkbox"]:checked + label::before {
  60     background-color: $brand-danger;
  61     border-color: $brand-danger; }
  62 .checkbox-danger input[type="checkbox"]:checked + label::after {
  63     color: $body-bg; }
  64
  65 .checkbox-info input[type="checkbox"]:checked + label::before {
  66     background-color: $brand-info;
  67     border-color: $brand-info; }
  68 .checkbox-info input[type="checkbox"]:checked + label::after {
  69     color: $body-bg; }
  70
  71 .checkbox-warning input[type="checkbox"]:checked + label::before {
  72     background-color: $brand-warning;
  73     border-color: $brand-warning; }
  74 .checkbox-warning input[type="checkbox"]:checked + label::after {
  75     color: $body-bg; }
  76
  77 .checkbox-success input[type="checkbox"]:checked + label::before {
  78     background-color: $brand-success;
  79     border-color: $brand-success; }
  80 .checkbox-success input[type="checkbox"]:checked + label::after {
  81     color: $body-bg; }
  82
  83 /* before is the outer cicle */
  84 /* after is the inner circle.. */
  85
  86
  87
  88 .radio label {
  89     display: inline-block;
  90     position: relative;
  91     padding-left: 5px; }
  92 .radio label::before {
  93     content: "";
  94     display: inline-block;
  95     position: absolute;
  96     width: 17px;
  97     height: 17px;
  98     left: 0;
  99     margin-left: -20px;
 100     border: 1px solid $gray-light;
 101     border-radius: 50%;
 102     background-color: $body-bg;
 103     -webkit-transition: border 0.15s ease-in-out;
 104     -o-transition: border 0.15s ease-in-out;
 105     transition: border 0.15s ease-in-out; }
 106 .radio label::after {
 107     display: inline-block;
 108     position: absolute;
 109     content: " ";
 110     width: 11px;
 111     height: 11px;
 112     left: 3px;
 113     top: 3px;
 114     margin-left: -20px;
 115     border-radius: 50%;
 116     background-color: $body-bg;
 117     -webkit-transform: scale(0, 0);
 118     -ms-transform: scale(0, 0);
 119     -o-transform: scale(0, 0);
 120     transform: scale(0, 0);
 121     -webkit-transition: -webkit-transform 0.1s cubic-bezier(0.8, -0.33, 0.2, 1.33);
 122     -moz-transition: -moz-transform 0.1s cubic-bezier(0.8, -0.33, 0.2, 1.33);
 123     -o-transition: -o-transform 0.1s cubic-bezier(0.8, -0.33, 0.2, 1.33);
 124     transition: transform 0.1s cubic-bezier(0.8, -0.33, 0.2, 1.33);
 125 }
 126 .radio input[type="radio"] {
 127     display: none;
 128 }
 129 .radio input[type="radio"]:checked + label::after {
 130     -webkit-transform: scale(1, 1);
 131     -ms-transform: scale(1, 1);
 132     -o-transform: scale(1, 1);
 133     transform: scale(1, 1);
 134     background-color: $gray;
 135 }
 136 .radio input[type="radio"]:disabled + label {
 137     opacity: 0.65; }
 138 .radio input[type="radio"]:disabled + label::before {
 139     cursor: not-allowed; }
 140
 141 .radio-primary input[type="radio"] + label::after {
 142     background-color: $body-bg; }
 143 .radio-primary input[type="radio"]:checked + label::before {
 144     border-color: $brand-primary; }
 145 .radio-primary input[type="radio"]:checked + label::after {
 146     background-color: $brand-primary; }
 147
 148 .radio-danger input[type="radio"] + label::after {
 149     background-color: $brand-danger; }
 150 .radio-danger input[type="radio"]:checked + label::before {
 151     border-color: $brand-danger; }
 152 .radio-danger input[type="radio"]:checked + label::after {
 153     background-color: $brand-danger; }
 154
 155
 156
 157 .radio-info input[type="radio"] + label::after {
 158     background-color: $body-bg;
 159 }
 160 .radio-info input[type="radio"]:checked + label::before {
 161     border-color: $brand-info; }
 162 .radio-info input[type="radio"]:checked + label::after {
 163     background-color: $brand-info; }
 164
 165 .radio-warning input[type="radio"] + label::after {
 166     background-color: $body-bg; }
 167 .radio-warning input[type="radio"]:checked + label::before {
 168     border-color: $brand-warning; }
 169 .radio-warning input[type="radio"]:checked + label::after {
 170     background-color: $brand-warning; }
 171
 172 .radio-success input[type="radio"] + label::after {
 173     background-color: $body-bg; }
 174 .radio-success input[type="radio"]:checked + label::before {
 175     border-color: $brand-success; }
 176 .radio-success input[type="radio"]:checked + label::after {
 177     background-color: $brand-success; }
 178
 179 .checkbox.checkbox-inline,
 180 .radio.radio-inline {
 181     margin-top: 0;
 182 }