responsivewebframework/src/less/check-box.less

Jalasoft Foundation Front End Framework ========================================

// Check box

input[type=checkbox][class="check"] {
  display: none;
}

.text-unselectable {
  -moz-user-select: none;
  -khtml-user-select: none;
  -webkit-user-select: none;
  -o-user-select: none;
  user-select: none;
}

input[type=checkbox][class="check"] + label {
  position: relative;
  cursor: pointer;
  margin-left: 36px;
  margin-top: 9px;
  margin-bottom: 9px;
  font-family: @font-family-base-component;
  display: inline-block;
  .text-unselectable;
  color: @body-color;
  font-size: @font-size-base-component;
}

input[type=checkbox][class="check"] + label:after {
  position: absolute;
  left: @checkbox-padding;
  top: 2px !important;
  line-height: 12px;
  content: '';
  width: @checkbox-boxsize !important;
  height: @checkbox-boxsize;
  background-color: white;
  border: @checkbox-border solid @secondary-color;
  font-family: jala-icons;
  font-size: @font-size-base;
  text-align: center;
  color: @secondary-color;
}

input[type=checkbox][class="check"] + label:before {
  position: absolute;
  content: '';
  left: -31px;
  top: -6px;
  width: 30px;
  height: 30px;
}

input[type=checkbox][class="check"]:checked + label:after {
  content: "\d408";
}