From 3e3cc6ca45664168e3f1d3f68d37a897ed75c8d6 Mon Sep 17 00:00:00 2001
From: Brandy Carney <brandy@ionic.io>
Date: Tue, 14 Aug 2018 17:15:46 -0400
Subject: [PATCH] fix(checkbox): document and add custom CSS properties

references #14850 references #14808
---
 core/src/components/checkbox/checkbox.scss | 57 ++++++++++++++--------
 1 file changed, 38 insertions(+), 19 deletions(-)

diff --git a/core/src/components/checkbox/checkbox.scss b/core/src/components/checkbox/checkbox.scss
index 8d7370002a4..edb88316acc 100644
--- a/core/src/components/checkbox/checkbox.scss
+++ b/core/src/components/checkbox/checkbox.scss
@@ -4,13 +4,21 @@
 // --------------------------------------------------
 
 :host {
-  --ion-color-base: #{ion-color(primary, base)};
-  --ion-color-contrast: #{ion-color(primary, contrast)};
-
-  // Checked colors
-  --background-checked: #{current-color(base)};
-  --border-color-checked: #{current-color(base)};
-  --checkmark-color: #{current-color(contrast)};
+  /**
+   * @prop --background: Background of the checkbox icon
+   * @prop --border-color: Border color of the checkbox icon
+   * @prop --border-radius: Border radius of the checkbox icon
+   * @prop --border-width: Border width of the checkbox icon
+   * @prop --border-style: Border style of the checkbox icon
+   * @prop --size: Size of the checkbox icon
+   * @prop --transition: Transition of the checkbox icon
+   * @prop --background-checked: Background of the checkbox icon when checked
+   * @prop --border-color-checked: Border color of the checkbox icon when checked
+   * @prop --checkmark-color: Color of the checkbox checkmark when checked
+   */
+  --background-checked: #{ion-color(primary, base)};
+  --border-color-checked: #{ion-color(primary, base)};
+  --checkmark-color: #{ion-color(primary, contrast)};
 
   display: inline-block;
   position: relative;
@@ -18,18 +26,10 @@
   user-select: none;
 }
 
-:host(.checkbox-disabled) {
-  pointer-events: none;
-}
-
-:host(.checkbox-checked) .checkbox-icon {
-  border-color: var(--border-color-checked);
-
-  background: var(--background-checked);
-}
-
-:host(.checkbox-checked) .checkbox-inner {
-  opacity: 1;
+:host(.ion-color) {
+  --background-checked: #{current-color(base)};
+  --border-color-checked: #{current-color(base)};
+  --checkmark-color: #{current-color(contrast)};
 }
 
 input {
@@ -61,3 +61,22 @@ input {
   opacity: 0;
 }
 
+// Checked Checkbox
+// ---------------------------------------------
+
+:host(.checkbox-checked) .checkbox-icon {
+  border-color: var(--border-color-checked);
+
+  background: var(--background-checked);
+}
+
+:host(.checkbox-checked) .checkbox-inner {
+  opacity: 1;
+}
+
+// Disabled Checkbox
+// ---------------------------------------------
+
+:host(.checkbox-disabled) {
+  pointer-events: none;
+}
\ No newline at end of file