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

PhloxUI Ng2+ Framework

material-checkbox {
  .material-checkbox {
    .mat-checkbox.mat-accent .mat-checkbox-frame {
      border: @CHECKBOX_BORDER_THICKNESS solid @CLR_BORDER_COLOR;
    }

    .mat-checkbox-checked.mat-accent .mat-checkbox-background, .mat-checkbox-indeterminate.mat-accent .mat-checkbox-background {
       background-color: @CLR_BRAND;
    }

    .mat-checkbox:not(.mat-checkbox-disabled) .mat-checkbox-ripple .mat-ripple-element {
       background-color: @CLR_BRAND;
       opacity: @MATERIAL_CHECKBOX_ALPHA;
    }

    .mat-checkbox-disabled.mat-checkbox-checked .mat-checkbox-background, .mat-checkbox-disabled.mat-checkbox-indeterminate .mat-checkbox-background {
			background-color: @CLR_DISABLED_BG;

      .mat-checkbox-checkmark-path {
        stroke: @CLR_DISABLED_FONT!important;
      }
    }

    .mat-checkbox-disabled.mat-checkbox-checked .mat-checkbox-frame, .mat-checkbox-disabled.mat-checkbox-indeterminate .mat-checkbox-frame {
      border-color: @CLR_DISABLED_BG;
    }

    .mat-checkbox-label {
      font-weight: 400;
    }
    
    .mat-checkbox-disabled .mat-checkbox-label {
      color: @CLR_DISABLED_FONT;
    }

    label.mat-checkbox-layout {
      display: inline-flex;
    }
  }
}

material-checkbox.read-only {
  .material-checkbox {
    .mat-checkbox:not(.mat-checkbox-disabled) .mat-checkbox-ripple .mat-ripple-element {
       background-color: transparent;
    }

    .mat-checkbox-checked.mat-checkbox {
      cursor: default;
    }
    .mat-checkbox {
      cursor: default;
    }
  }
}