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'; /* change the font - uses the filled one */
  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
  51 .checkbox input[type="checkbox"]:disabled + label::after {
  52     color: @gray-lighter;
  53     cursor: not-allowed;
  54 }
  55
  56 .checkbox.checkbox-circle label::before {
  57     border-radius: 50%; }
  58
  59
  60 .checkbox-primary input[type="checkbox"]:checked + label::after {
  61     color: @brand-primary; }
  62
  63
  64 .checkbox-danger input[type="checkbox"]:checked + label::after {
  65     color:  @brand-danger; }
  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 }
 178
 179 .form-group.checkbox {
 180     padding-bottom:25px;
 181     margin-top: 0;
 182
 183 }