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