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

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