patchcablemgr/assets/scss/_checkbox-radio.scss

/* =============
   Checkbox and Radios
============= */

.checkbox {
  padding-left: 20px;
  label {
    display: inline-block;
    padding-left: 5px;
    position: relative;
    &::before {
      -o-transition: 0.3s ease-in-out;
      -webkit-transition: 0.3s ease-in-out;
      background-color: transparent;
      border-radius: 3px;
      border: 2px solid rgba($dark,0.5);
      content: "";
      display: inline-block;
      height: 17px;
      left: 0;
      margin-left: -20px;
      position: absolute;
      transition: 0.3s ease-in-out;
      width: 17px;
      outline: none !important;
      margin-top: 2px;
    }
    &::after {
      color: $dark;
      display: inline-block;
      font-size: 11px;
      height: 16px;
      left: 2px;
      margin-left: -20px;
      padding-left: 3px;
      padding-top: 1px;
      position: absolute;
      top: 2px;
      width: 16px;
    }
  }
  input[type="checkbox"] {
    cursor: pointer;
    opacity: 0;
    z-index: 1;
    outline: none !important;

    &:disabled + label {
      opacity: 0.65;
    }
  }
  input[type="checkbox"]:focus + label {
    &::before {
      outline-offset: -2px;
      outline: none;
    }
  }
  input[type="checkbox"]:checked + label {
    &::after {
      content: '\f26b';
      font-family: 'Material-Design-Iconic-Font';
      font-weight: bold;
    }
  }

  input[type="checkbox"]:disabled + label {
    &::before {
      background-color: $gray-light;
      cursor: not-allowed;
    }
  }
}

.checkbox.checkbox-circle {
  label {
    &::before {
      border-radius: 50%;
    }
  }
}

.checkbox.checkbox-inline {
  margin-top: 0;
}

.checkbox.checkbox-single {
  label {
    height: 17px;
  }
}

.checkbox-custom {
  input[type="checkbox"]:checked + label {
    &::before {
      background-color: $custom;
      border-color: $custom;
    }
    &::after {
      color: $white;
    }
  }
}

.checkbox-primary {
  input[type="checkbox"]:checked + label {
    &::before {
      background-color: $brand-primary;
      border-color: $brand-primary;
    }
    &::after {
      color: $white;
    }
  }
}

.checkbox-danger {
  input[type="checkbox"]:checked + label {
    &::before {
      background-color: $brand-danger;
      border-color: $brand-danger;
    }
    &::after {
      color: $white;
    }
  }
}

.checkbox-info {
  input[type="checkbox"]:checked + label {
    &::before {
      background-color: $brand-info;
      border-color: $brand-info;
    }
    &::after {
      color: $white;
    }
  }
}

.checkbox-warning {
  input[type="checkbox"]:checked + label {
    &::before {
      background-color: $brand-warning;
      border-color: $brand-warning;
    }
    &::after {
      color: $white;
    }
  }
}

.checkbox-success {
  input[type="checkbox"]:checked + label {
    &::before {
      background-color: $brand-success;
      border-color: $brand-success;
    }
    &::after {
      color: $white;
    }
  }
}

.checkbox-purple {
  input[type="checkbox"]:checked + label {
    &::before {
      background-color: $purple;
      border-color: $purple;
    }
    &::after {
      color: $white;
    }
  }
}

.checkbox-pink {
  input[type="checkbox"]:checked + label {
    &::before {
      background-color: $pink;
      border-color: $pink;
    }
    &::after {
      color: $white;
    }
  }
}

.checkbox-inverse {
  input[type="checkbox"]:checked + label {
    &::before {
      background-color: $dark;
      border-color: $dark;
    }
    &::after {
      color: $white;
    }
  }
}

/* Radios */

.radio {
  padding-left: 20px;

  label {
    display: inline-block;
    padding-left: 5px;
    position: relative;
    &::before {
      -o-transition: border 0.5s ease-in-out;
      -webkit-transition: border 0.5s ease-in-out;
      border-radius: 50%;
      border: 2px solid rgba($dark,0.5);
      content: "";
      display: inline-block;
      height: 17px;
      left: 0;
      margin-left: -20px;
      outline: none !important;
      position: absolute;
      transition: border 0.5s ease-in-out;
      width: 17px;
      margin-top: 2px;
    }
    &::after {
      -moz-transition: -moz-transform 0.1s cubic-bezier(0.8, -0.33, 0.2, 1.33);
      -ms-transform: scale(0, 0);
      -o-transform: scale(0, 0);
      -o-transition: -o-transform 0.1s cubic-bezier(0.8, -0.33, 0.2, 1.33);
      -webkit-transform: scale(0, 0);
      -webkit-transition: -webkit-transform 0.1s cubic-bezier(0.8, -0.33, 0.2, 1.33);
      background-color: $gray-light;
      border-radius: 50%;
      content: " ";
      display: inline-block;
      height: 11px;
      left: 3px;
      margin-left: -20px;
      position: absolute;
      top: 5px;
      transform: scale(0, 0);
      transition: transform 0.1s cubic-bezier(0.8, -0.33, 0.2, 1.33);
      width: 11px;
    }
  }
  input[type="radio"] {
    cursor: pointer;
    opacity: 0;
    z-index: 1;
    outline: none !important;
    &:disabled + label {
      opacity: 0.65;
    }
  }
  input[type="radio"]:focus + label {
    &::before {
      outline-offset: -2px;
      outline: 5px auto -webkit-focus-ring-color;
      outline: thin dotted;
    }
  }
  input[type="radio"]:checked + label {
    &::after {
      -ms-transform: scale(1, 1);
      -o-transform: scale(1, 1);
      -webkit-transform: scale(1, 1);
      transform: scale(1, 1);
    }
  }
  input[type="radio"]:disabled + label {
    &::before {
      cursor: not-allowed;
    }
  }
}

.radio.radio-inline {
  margin-top: 0;
}

.radio.radio-single {
  label {
    height: 17px;
  }
}


.radio-custom {
  input[type="radio"] + label {
    &::after {
      background-color: $custom;
    }
  }
  input[type="radio"]:checked + label {
    &::before {
      border-color: $custom;
    }
    &::after {
      background-color: $custom;
    }
  }
}

.radio-primary {
  input[type="radio"] + label {
    &::after {
      background-color: $brand-primary;
    }
  }
  input[type="radio"]:checked + label {
    &::before {
      border-color: $brand-primary;
    }
    &::after {
      background-color: $brand-primary;
    }
  }
}

.radio-danger {
  input[type="radio"] + label {
    &::after {
      background-color: $brand-danger;
    }
  }
  input[type="radio"]:checked + label {
    &::before {
      border-color: $brand-danger;
    }
    &::after {
      background-color: $brand-danger;
    }
  }
}

.radio-info {
  input[type="radio"] + label {
    &::after {
      background-color: $brand-info;
    }
  }
  input[type="radio"]:checked + label {
    &::before {
      border-color: $brand-info;
    }
    &::after {
      background-color: $brand-info;
    }
  }
}

.radio-warning {
  input[type="radio"] + label {
    &::after {
      background-color: $brand-warning;
    }
  }
  input[type="radio"]:checked + label {
    &::before {
      border-color: $brand-warning;
    }
    &::after {
      background-color: $brand-warning;
    }
  }
}

.radio-success {
  input[type="radio"] + label {
    &::after {
      background-color: $brand-success;
    }
  }
  input[type="radio"]:checked + label {
    &::before {
      border-color: $brand-success;
    }
    &::after {
      background-color: $brand-success;
    }
  }
}

.radio-purple {
  input[type="radio"] + label {
    &::after {
      background-color: $purple;
    }
  }
  input[type="radio"]:checked + label {
    &::before {
      border-color: $purple;
    }
    &::after {
      background-color: $purple;
    }
  }
}

.radio-pink {
  input[type="radio"] + label {
    &::after {
      background-color: $pink;
    }
  }
  input[type="radio"]:checked + label {
    &::before {
      border-color: $pink;
    }
    &::after {
      background-color: $pink;
    }
  }
}