frameworks/awesome-bootstrap-checkbox/awesome-bootstrap-checkbox.less

   1 //
   2 // Checkboxes
   3 // --------------------------------------------------
   4
   5 @font-family-icon: 'FontAwesome';
   6 @fa-var-check: "\f00c";
   7 @check-icon: @fa-var-check;
   8
   9 .checkbox-variant(@parent, @color) {
  10   .@{parent} input[type="checkbox"]:checked + label,
  11   .@{parent} input[type="radio"]:checked + label {
  12     &::before {
  13       background-color: @color;
  14       border-color: @color;
  15     }
  16     &::after {
  17       color: #fff;
  18     }
  19   }
  20 }
  21
  22 .checkbox-variant-indeterminate(@parent, @color) {
  23   .@{parent} input[type="checkbox"]:indeterminate + label,
  24   .@{parent} input[type="radio"]:indeterminate + label {
  25     &::before {
  26       background-color: @color;
  27       border-color: @color;
  28     }
  29     &::after {
  30       background-color: #fff;
  31     }
  32   }
  33 }
  34
  35
  36 .checkbox{
  37   padding-left: 20px;
  38
  39   label{
  40     display: inline-block;
  41     vertical-align: middle;
  42     position: relative;
  43     padding-left: 5px;
  44
  45     &::before{
  46       content: "";
  47       display: inline-block;
  48       position: absolute;
  49       width: 17px;
  50       height: 17px;
  51       left: 0;
  52       margin-left: -20px;
  53       border: 1px solid @input-border;
  54       border-radius: 3px;
  55       background-color: #fff;
  56       .transition(~"border 0.15s ease-in-out, color 0.15s ease-in-out");
  57     }
  58
  59     &::after{
  60       display: inline-block;
  61       position: absolute;
  62       width: 16px;
  63       height: 16px;
  64       left: 0;
  65       top: 0;
  66       margin-left: -20px;
  67       padding-left: 3px;
  68       padding-top: 1px;
  69       font-size: 11px;
  70       color: @input-color;
  71     }
  72   }
  73
  74   input[type="checkbox"],
  75   input[type="radio"]{
  76     opacity: 0;
  77     z-index: 1;
  78
  79     &:focus + label::before{
  80       .tab-focus();
  81     }
  82
  83     &:checked + label::after{
  84       font-family: @font-family-icon;
  85       content: @check-icon;
  86     }
  87
  88     &:indeterminate + label::after{
  89       display: block;
  90       content: " ";
  91       width: 10px;
  92       height: 3px;
  93       background-color: #555555;
  94       border-radius: 2px;
  95       margin-left: -16.5px;
  96       margin-top: 7px;
  97     }
  98
  99     &:disabled + label{
 100       opacity: 0.65;
 101
 102       &::before{
 103         background-color: @input-bg-disabled;
 104         cursor: not-allowed;
 105       }
 106     }
 107
 108   }
 109
 110   &.checkbox-circle label::before{
 111     border-radius: 50%;
 112   }
 113
 114   &.checkbox-inline{
 115     margin-top: 0;
 116   }
 117 }
 118
 119 .checkbox-variant(checkbox-primary, @brand-primary);
 120 .checkbox-variant(checkbox-danger, @brand-danger);
 121 .checkbox-variant(checkbox-info, @brand-info);
 122 .checkbox-variant(checkbox-warning, @brand-warning);
 123 .checkbox-variant(checkbox-success, @brand-success);
 124
 125 .checkbox-variant-indeterminate(checkbox-primary, @brand-primary);
 126 .checkbox-variant-indeterminate(checkbox-danger, @brand-danger);
 127 .checkbox-variant-indeterminate(checkbox-info, @brand-info);
 128 .checkbox-variant-indeterminate(checkbox-warning, @brand-warning);
 129 .checkbox-variant-indeterminate(checkbox-success, @brand-success);
 130
 131 //
 132 // Radios
 133 // --------------------------------------------------
 134
 135 .radio-variant(@parent, @color) {
 136   .@{parent} input[type="radio"]{
 137     & + label{
 138       &::after{
 139         background-color: @color;
 140       }
 141     }
 142     &:checked + label{
 143       &::before {
 144         border-color: @color;
 145       }
 146       &::after{
 147         background-color: @color;
 148       }
 149     }
 150   }
 151 }
 152
 153 .radio{
 154   padding-left: 20px;
 155
 156   label{
 157     display: inline-block;
 158     vertical-align: middle;
 159     position: relative;
 160     padding-left: 5px;
 161
 162     &::before{
 163       content: "";
 164       display: inline-block;
 165       position: absolute;
 166       width: 17px;
 167       height: 17px;
 168       left: 0;
 169       margin-left: -20px;
 170       border: 1px solid @input-border;
 171       border-radius: 50%;
 172       background-color: #fff;
 173       .transition(border 0.15s ease-in-out);
 174     }
 175
 176     &::after{
 177       display: inline-block;
 178       position: absolute;
 179       content: " ";
 180       width: 11px;
 181       height: 11px;
 182       left: 3px;
 183       top: 3px;
 184       margin-left: -20px;
 185       border-radius: 50%;
 186       background-color: @input-color;
 187       .scale(0, 0);
 188
 189       .transition-transform(.1s cubic-bezier(.8,-0.33,.2,1.33));
 190       //curve - http://cubic-bezier.com/#.8,-0.33,.2,1.33
 191     }
 192   }
 193
 194   input[type="radio"]{
 195     opacity: 0;
 196     z-index: 1;
 197
 198     &:focus + label::before{
 199       .tab-focus();
 200     }
 201
 202     &:checked + label::after{
 203       .scale(1, 1);
 204     }
 205
 206     &:disabled + label{
 207       opacity: 0.65;
 208
 209       &::before{
 210         cursor: not-allowed;
 211       }
 212     }
 213
 214   }
 215
 216   &.radio-inline{
 217     margin-top: 0;
 218   }
 219 }
 220
 221 .radio-variant(radio-primary, @brand-primary);
 222 .radio-variant(radio-danger, @brand-danger);
 223 .radio-variant(radio-info, @brand-info);
 224 .radio-variant(radio-warning, @brand-warning);
 225 .radio-variant(radio-success, @brand-success);
 226
 227 input[type="checkbox"],
 228 input[type="radio"] {
 229   &.styled:checked + label:after {
 230     font-family: @font-family-icon;
 231     content: @check-icon;
 232   }
 233   & .styled:checked + label {
 234     &::before {
 235       color: #fff;
 236     }
 237     &::after {
 238       color: #fff;
 239     }
 240   }
 241 }