responsivewebframework/src/less/radio-button.less

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

// Radio Button

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

.click-area{
  position: absolute;
  left: (@base-size-radio-button - 48);
  top: (@base-size-radio-button - 21);
  cursor: pointer;
  width: @area-selectable-radio-button;
  height: @area-selectable-radio-button;
  margin: (@base-size-radio-button - 5);
}

input[type="radio"][class="radio"]+label {
  display: inline-block;
  cursor: pointer;
  position: relative;
  left: (@base-size-radio-button + 4);
  font-family: @font-family-base-component;
  font-size: @font-size-base-component;
  color: @body-color;
  margin: (@base-size-radio-button - 0.5) (@base-size-radio-button - 10) (@base-size-radio-button - 0.7) (@base-size-radio-button + 5);
  top: 1.5px;
}

input[type="radio"][class="radio"]+label:before {
  position: absolute;
  content: "";
  width: @external-size-radio-button;
  height: @external-size-radio-button;
  border: @stroke-radio-button solid @secondary-color;
  border-radius: @base-size-radio-button;
  background-color: #fff;
  left: (@base-size-radio-button - 36);
  top: (@base-size-radio-button - 9);
}

input[type="radio"][class="radio"]+label:after {
  background-color: transparent;
}

input[type="radio"][class="radio"]:checked+label:after {
  position: absolute;
  content: "";
  width: @inner-size-radio-button;
  height: @inner-size-radio-button;
  top: (@base-size-radio-button - 4);
  left: (@base-size-radio-button - 31);
  border-radius: @base-size-radio-button;
  background-color: @secondary-color;
}