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