causeway-standard-theme/causeway/components/form-fields/checkbox-input.less

// Checkbox input
// --------------------------------------------------
.checkbox,
.checkbox-inline,
.radio,
.radio-inline,
.tristate,
.tristate-inline {
  margin-bottom: 0;
  margin-top: 0;
  padding-left: 0;
//  .inline;
  &.form-group-inline {
    .inline;
  }

  &.form-group {
    margin-bottom: 15px;
    &.no-label {
      width: auto;
      margin: auto;
      line-height: 0;
    }
    &.form-group-inline {
      margin-bottom: 0;
    }
  }

  + .checkbox,
  + .radio,
  + .tristate {
    margin-bottom: 0;
    margin-top: 0;

    &.form-group {
      margin-bottom: 15px;
    }
  }

  > label {
    color: @black080;
    cursor: pointer;
    font-weight: bold;
    margin-left: @checkbox-icon-width + @checkbox-icon-padding;
    position: relative;
    padding-left: 0;
    width: auto;

    .inline;

    .checkbox-icon,
    .radio-icon {
      background-image: url(../images/icons/checkbox.png);
      background-position: 0 0;
      background-repeat: no-repeat;
      content: '';
      height: @checkbox-icon-height;
      width: @checkbox-icon-width;

      display: block;
      position: absolute;
      overflow: hidden;
      top: -1px;
      left: 0 - @checkbox-icon-width - @checkbox-icon-padding;
    }

    &:before {
      content: '';
      display: none;
    }

    &:after {
      content: '\00a0';
      .inline;
    }

    &.mousedown {
      .checkbox-icon,
      .radio-icon {
        background-position: 0 (-1 * @checkbox-icon-height);
      }
    }

    &.altstate {
      .checkbox-icon,
      .radio-icon {
        background-position: 0 (-2 * @checkbox-icon-height);
      }
    }

    &.checked {
      .checkbox-icon,
      .radio-icon {
        background-position: 0 (-3 * @checkbox-icon-height);
      }
      &.disabled {
        .checkbox-icon,
        .radio-icon {
          background-position: 0 (-5 * @checkbox-icon-height);
        }
      }
    }

    &.disabled {
      .checkbox-icon,
      .radio-icon {
        background-position: 0 (-4 * @checkbox-icon-height);
      }
    }
  }

  &.label-first {
    width: 100%;

    input[type='checkbox'],
    input[type='radio'] {
      float: right;
    }
    .error-message {
      .error-margin-left;
    }
    > label {
      margin-left: 0;
      padding-left: 0;
      text-align: right;
      margin-right: 2*@horizontal-label-input-gap + @checkbox-icon-width;
      .form-label-width;

      .checkbox-icon,
      .radio-icon {
        left: auto;
        right: 0 - @checkbox-icon-width - @form-label-padding;
      }

      &:after {
        content: '';
        display: none;
      }

      &:before {
        content: '\00a0';
        .inline;
      }
    }
    input[type="checkbox"],
    input[type="radio"] {
      width: 18px;
      margin: 0;
    }
  }

  &.left-aligned,
  &.no-label {
    width: 100%;

    > label {
      margin-left: 0;
      margin-right: @form-label-padding + @checkbox-icon-width;
      padding-left: @checkbox-icon-width + @form-label-padding;
      text-align: left;

      .checkbox-icon,
      .radio-icon {
        left: 0;
      }

      &:after {
        content: '';
        display: none;
      }

      &:before {
        content: '\00a0';
        .inline;
      }
    }
  }

  &.no-label {
    position: relative;
    > label {
      height: @checkbox-icon-height;
      margin-right: 0;
      overflow: hidden;
      padding-left: @checkbox-icon-width;
      width: 0;
    }
    input[type="checkbox"],
     input[type="radio"] {
      width: 18px;
      position: absolute;
      margin: 0;
    }
  }

  input[type="checkbox"],
  input[type="radio"] {
    opacity: 0;
    -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=0)";
    width: @checkbox-icon-width;
    height: @checkbox-icon-height;
    position: relative;
    left: @checkbox-icon-width;
  }
  input[type="checkbox"],
  input[type="radio"] {
    float: left;
    margin-left: -20px;
    margin-top: -2px;
    .form-inline & {
      float: left;
      margin-left: -20px;
      margin-top: -2px;
    }
  }
}

.checkbox,
.checkbox-inline,
.radio,
.radio-inline {
  input[type='checkbox']:checked + label,
  input[type='radio']:checked + label {
    .checkbox-icon,
    .radio-icon {
      background-position: 0 (-3 * @checkbox-icon-height);
    }
  }

  input[type='checkbox']:not(:checked) + label.checked,
  input[type='radio']:not(:checked) + label.checked {
    .checkbox-icon,
    .radio-icon {
      background-position: 0 0;
    }
  }

  input[type='checkbox']:disabled + label,
  input[type='radio']:disabled + label {
    .checkbox-icon,
    .radio-icon {
      background-position: 0 (-4 * @checkbox-icon-height);
    }
  }

  input[type='checkbox']:disabled:checked + label,
  input[type='radio']:disabled:checked + label {
    .checkbox-icon,
    .radio-icon {
      background-position: 0 (-5 * @checkbox-icon-height);
    }
  }
}

.radio, .radio-inline {
  > label .radio-icon {
    background-image: url('../images/icons/radio.png');
    top: 0;
  }
}

//.radio-custom-options .radio {
//  > label .radio-icon {
//    top: 3px;
//  }
//
//  &.disabled > label {
//    color: #b4b6b8;
//    font-weight: bold;
//  }
//
//  input[type="radio"] + input[type="text"] {
//    margin-left: 10px;
//  }
//}