com.phloxui/styles/lib/theme/material/component/dataview/input/MaterialRadioButtons.less

PhloxUI Ng2+ Framework

material-radio-buttons {
  .material-radio-buttons {
    // .mat-radio-button.mat-accent .mat-radio-inner-circle {
    //   background-color: @CLR_BRAND;
    // }

    .mat-radio-label {
      margin-right: 7pt;
    }

    .mat-radio-label-content {
      font-weight: 400;
    }
    
    // .mat-radio-outer-circle {
    //   border-color: @CLR_BRAND;
    // }
    //
    // .mat-radio-button.mat-accent.mat-radio-checked .mat-radio-outer-circle {
    //   border-color: @CLR_BRAND;
    // }

    .mat-radio-button.mat-accent .mat-radio-ripple .mat-ripple-element {
      background-color:rgba(red(@CLR_BRAND), green(@CLR_BRAND), blue(@CLR_BRAND), @MATERIAL_RIPPLE_ALPHA);
    }

    .vertical {
      display: flex;
      flex-direction: column;
      flex-wrap: wrap;
      height: 23pt;
    }

    .help {
        width: 100%;
        padding-top: @MATERIAL_DROPDOWN_HELP_PADDING;
    }
  }

  &.normal {
    .mat-radio-button.mat-accent .mat-radio-outer-circle {
      border-color: @CLR_BRAND;
    }

    .mat-radio-button.mat-accent.mat-radio-checked .mat-radio-outer-circle {
      border-color: @CLR_BRAND;
    }

    .mat-radio-button.mat-accent.mat-radio-checked .mat-radio-inner-circle {
      background-color: @CLR_BRAND;
    }

    .mat-radio-button.mat-accent .mat-radio-ripple .mat-ripple-element {
      background-color:rgba(red(@CLR_BRAND), green(@CLR_BRAND), blue(@CLR_BRAND), @MATERIAL_RIPPLE_ALPHA);
    }
  }

  &.warning {
    .mat-radio-button.mat-accent .mat-radio-outer-circle {
      border-color: @MATERIAL_FORM_CONTROL_FONT_COLOR_WARNING;
    }

    .mat-radio-button.mat-accent.mat-radio-checked .mat-radio-outer-circle {
      border-color: @MATERIAL_FORM_CONTROL_FONT_COLOR_WARNING;
    }

    .mat-radio-button.mat-accent.mat-radio-checked .mat-radio-inner-circle {
      background-color: @MATERIAL_FORM_CONTROL_FONT_COLOR_WARNING;
    }

    .mat-radio-button.mat-accent .mat-radio-ripple .mat-ripple-element {
      background-color:rgba(red(@MATERIAL_FORM_CONTROL_FONT_COLOR_WARNING), green(@MATERIAL_FORM_CONTROL_FONT_COLOR_WARNING), blue(@MATERIAL_FORM_CONTROL_FONT_COLOR_WARNING), @MATERIAL_RIPPLE_ALPHA);
    }
  }

  &.error {
    .mat-radio-button.mat-accent .mat-radio-outer-circle {
      border-color: @MATERIAL_FORM_CONTROL_FONT_COLOR_ERROR;
    }

    .mat-radio-button.mat-accent.mat-radio-checked .mat-radio-outer-circle {
      border-color: @MATERIAL_FORM_CONTROL_FONT_COLOR_ERROR;
    }

    .mat-radio-button.mat-accent.mat-radio-checked .mat-radio-inner-circle {
      background-color: @MATERIAL_FORM_CONTROL_FONT_COLOR_ERROR;
    }

    .mat-radio-button.mat-accent .mat-radio-ripple .mat-ripple-element {
      background-color:rgba(red(@MATERIAL_FORM_CONTROL_FONT_COLOR_ERROR), green(@MATERIAL_FORM_CONTROL_FONT_COLOR_ERROR), blue(@MATERIAL_FORM_CONTROL_FONT_COLOR_ERROR), @MATERIAL_RIPPLE_ALPHA);
    }
  }

  &.success {
    .mat-radio-button.mat-accent .mat-radio-outer-circle {
      border-color: @MATERIAL_FORM_CONTROL_FONT_COLOR_SUCCESS;
    }

    .mat-radio-button.mat-accent.mat-radio-checked .mat-radio-outer-circle {
      border-color: @MATERIAL_FORM_CONTROL_FONT_COLOR_SUCCESS;
    }

    .mat-radio-button.mat-accent.mat-radio-checked .mat-radio-inner-circle{
      background-color: @MATERIAL_FORM_CONTROL_FONT_COLOR_SUCCESS;
    }

    .mat-radio-button.mat-accent .mat-radio-ripple .mat-ripple-element {
      background-color:rgba(red(@MATERIAL_FORM_CONTROL_FONT_COLOR_SUCCESS), green(@MATERIAL_FORM_CONTROL_FONT_COLOR_SUCCESS), blue(@MATERIAL_FORM_CONTROL_FONT_COLOR_SUCCESS), @MATERIAL_RIPPLE_ALPHA);
    }
  }
}