fix(checkbox): get css variable customization working better

also fixes a bug where transition wasn’t working
ionic-team · Jul 23, 2018 · 3e7aa4b · 3e7aa4b
1 parent c3b5dc7
commit 3e7aa4b
Show file tree

Hide file tree

Showing 4 changed files with 107 additions and 29 deletions.
diff --git a/core/src/components/checkbox/checkbox.ios.scss b/core/src/components/checkbox/checkbox.ios.scss
@@ -6,22 +6,22 @@
 
 :host {
   --size: #{$checkbox-ios-icon-size};
+
+  // Border
   --border-radius: #{$checkbox-ios-icon-border-radius};
   --border-width: #{$checkbox-ios-icon-border-width};
   --border-style: #{$checkbox-ios-icon-border-style};
-  --unchecked-border-color: #{$checkbox-ios-icon-border-color-off};
-  --unchecked-background: #{$checkbox-ios-background-color-off};
+  --border-color: #{$checkbox-ios-icon-border-color-off};
+
+  // Background
+  --background: #{$checkbox-ios-background-color-off};
 }
 
 // iOS Checkbox Inner Checkmark: Checked
 // -----------------------------------------
 
 .checkbox-inner {
-  @include position(
-    calc(var(--size) / 6),
-    null, null,
-    calc(var(--size) / 2.5 - 1px)
-  );
+  @include position(calc(var(--size) / 6), null, null, calc(var(--size) / 2.5 - 1px));
 
   position: absolute;
 

diff --git a/core/src/components/checkbox/checkbox.md.scss b/core/src/components/checkbox/checkbox.md.scss
@@ -6,23 +6,23 @@
 
 :host {
   --size: #{$checkbox-md-icon-size};
+
+  // Border
   --border-radius: calc(var(--size) * .125);
   --border-width: #{$checkbox-md-icon-border-width};
   --border-style: #{$checkbox-md-icon-border-style};
-  --unchecked-border-color: #{$checkbox-md-icon-border-color-off};
-  --unchecked-background: #{$checkbox-md-icon-background-color-off};
+  --border-color: #{$checkbox-md-icon-border-color-off};
+
+  // Background
+  --background: #{$checkbox-md-icon-background-color-off};
   --transition: #{background $checkbox-md-transition-duration $checkbox-md-transition-easing};
 }
 
 // Material Design Checkbox Inner Checkmark: Checked
 // -----------------------------------------
 
 :host(.checkbox-checked) .checkbox-inner {
-  @include position(
-    calc(var(--size) * .05),
-    null, null,
-    calc(var(--size) * .3)
-  );
+  @include position(calc(var(--size) * .05), null, null, calc(var(--size) * .3));
 
   position: absolute;
 

diff --git a/core/src/components/checkbox/checkbox.scss b/core/src/components/checkbox/checkbox.scss
@@ -6,18 +6,20 @@
 :host {
   --ion-color-base: #{ion-color(primary, base)};
   --ion-color-contrast: #{ion-color(primary, contrast)};
-  --background: var(--unchecked-backgroud);
-  --border-color: var(--unchecked-border-color);
-  --checked-border-color: #{current-color(base)};
-  --checked-background: #{current-color(base)};
+
+  // Checked colors
+  --background-checked: #{current-color(base)};
+  --border-color-checked: #{current-color(base)};
+  --checkmark-color: #{current-color(contrast)};
 
   display: inline-block;
   position: relative;
 }
 
-:host(.checkbox-checked) {
-  --background: var(--checked-background);
-  --border-color: var(--checked-border-color);
+:host(.checkbox-checked) .checkbox-icon {
+  border-color: var(--border-color-checked);
+
+  background: var(--background-checked);
 }
 
 :host(.checkbox-checked) .checkbox-inner {
@@ -36,17 +38,19 @@ input {
   width: var(--size);
   height: var(--size);
 
+  transition: var(--transition);
+
   border-width: var(--border-width);
   border-style: var(--border-style);
   border-color: var(--border-color);
 
-  background-color: var(--background);
+  background: var(--background);
 
   contain: strict;
 }
 
 .checkbox-inner {
-  border-color: #{current-color(contrast)};
+  border-color: var(--checkmark-color);
 
   opacity: 0;
 }

diff --git a/core/src/components/checkbox/test/standalone/index.html b/core/src/components/checkbox/test/standalone/index.html
@@ -9,11 +9,26 @@
   <link rel="stylesheet" type="text/css" href="/css/ionic.min.css">
 </head>
 
-<body>
-  <!-- Default -->
+<body padding>
+  <h1>Default</h1>
+  <ion-checkbox></ion-checkbox>
   <ion-checkbox checked></ion-checkbox>
+  <ion-checkbox disabled></ion-checkbox>
+  <ion-checkbox disabled checked></ion-checkbox>
+
+  <h1>Colors</h1>
+  <ion-checkbox color="primary"></ion-checkbox>
+  <ion-checkbox color="secondary"></ion-checkbox>
+  <ion-checkbox color="tertiary"></ion-checkbox>
+  <ion-checkbox color="success"></ion-checkbox>
+  <ion-checkbox color="warning"></ion-checkbox>
+  <ion-checkbox color="danger"></ion-checkbox>
+  <ion-checkbox color="light"></ion-checkbox>
+  <ion-checkbox color="medium"></ion-checkbox>
+  <ion-checkbox color="dark"></ion-checkbox>
+
+  <hr>
 
-  <!-- Colors -->
   <ion-checkbox checked color="primary"></ion-checkbox>
   <ion-checkbox checked color="secondary"></ion-checkbox>
   <ion-checkbox checked color="tertiary"></ion-checkbox>
@@ -24,8 +39,67 @@
   <ion-checkbox checked color="medium"></ion-checkbox>
   <ion-checkbox checked color="dark"></ion-checkbox>
 
-  <!-- Disabled -->
-  <ion-checkbox disabled></ion-checkbox>
-  <ion-checkbox disabled checked></ion-checkbox>
+  <hr>
+
+  <ion-checkbox checked disabled color="primary"></ion-checkbox>
+  <ion-checkbox checked disabled color="secondary"></ion-checkbox>
+  <ion-checkbox checked disabled color="tertiary"></ion-checkbox>
+  <ion-checkbox checked disabled color="success"></ion-checkbox>
+  <ion-checkbox checked disabled color="warning"></ion-checkbox>
+  <ion-checkbox checked disabled color="danger"></ion-checkbox>
+  <ion-checkbox checked disabled color="light"></ion-checkbox>
+  <ion-checkbox checked disabled color="medium"></ion-checkbox>
+  <ion-checkbox checked disabled color="dark"></ion-checkbox>
+
+  <h1>Custom</h1>
+  <ion-checkbox class="custom"></ion-checkbox>
+  <ion-checkbox class="custom" checked></ion-checkbox>
+  <ion-checkbox class="custom" disabled></ion-checkbox>
+  <ion-checkbox class="custom" disabled checked></ion-checkbox>
+
+  <h1>Custom: checked</h1>
+  <ion-checkbox class="custom-checked"></ion-checkbox>
+  <ion-checkbox class="custom-checked" checked></ion-checkbox>
+  <ion-checkbox class="custom-checked" disabled></ion-checkbox>
+  <ion-checkbox class="custom-checked" disabled checked></ion-checkbox>
+
+  <h1>Custom: light</h1>
+  <ion-checkbox class="custom-light"></ion-checkbox>
+  <ion-checkbox class="custom-light" checked></ion-checkbox>
+  <ion-checkbox class="custom-light" disabled></ion-checkbox>
+  <ion-checkbox class="custom-light" disabled checked></ion-checkbox>
+
+  <h1>Custom: transition</h1>
+  <ion-checkbox class="custom-transition"></ion-checkbox>
+  <ion-checkbox class="custom-transition" checked></ion-checkbox>
+
+  <style>
+    .custom {
+      --background: #444;
+      --border-color: #000;
+    }
+
+    .custom-checked {
+      --background: lightblue;
+      --border-color: lightpink;
+
+      --background-checked: lightpink;
+      --border-color-checked: lightblue;
+    }
+
+    .custom-light {
+      --background: lightgrey;
+      --border-color: darkgrey;
+
+      --background-checked: darkgrey;
+      --border-color-checked: transparent;
+
+      --checkmark-color: #000;
+    }
+
+    .custom-transition {
+      --transition: all 5s ease-out;
+    }
+  </style>
 </body>
 </html>