From 07ec765ed756e5e8f5e6edf289aee2cd808fc239 Mon Sep 17 00:00:00 2001
From: Kristiyan Kostadinov <crisbeto@users.noreply.github.com>
Date: Fri, 10 Feb 2017 22:29:32 +0100
Subject: [PATCH] fix(checkbox, radio): not using theme border color (#2744)

* fix(checkbox, radio): not using theme border color

Fixes the checkbox and radio button not using the border color from the theme. The cause of the issue was that both components used the shorthand `border`, which ended up overriding the `border-color` from the theme.

* chore: fix leaking test
---
 src/lib/checkbox/checkbox.scss | 10 +++++++---
 src/lib/radio/radio.scss       |  7 +++++--
 2 files changed, 12 insertions(+), 5 deletions(-)

diff --git a/src/lib/checkbox/checkbox.scss b/src/lib/checkbox/checkbox.scss
index 2e6be339d862..66ba03b216eb 100644
--- a/src/lib/checkbox/checkbox.scss
+++ b/src/lib/checkbox/checkbox.scss
@@ -196,7 +196,7 @@ $_mat-checkbox-mark-stroke-size: 2 / 15 * $mat-checkbox-size !default;
 }
 
 .mat-checkbox-layout {
-  // `cursor: inherit` ensures that the wrapper element gets the same cursor as the md-checkbox
+  // `cursor: inherit` ensures that the wrapper element gets the same cursor as the mat-checkbox
   // (e.g. pointer by default, regular when disabled), instead of the browser default.
   cursor: inherit;
   align-items: baseline;
@@ -234,8 +234,12 @@ $_mat-checkbox-mark-stroke-size: 2 / 15 * $mat-checkbox-size !default;
   @extend %mat-checkbox-outer-box;
 
   background-color: transparent;
-  border: $mat-checkbox-border-width solid;
-  transition: border-color $mat-checkbox-transition-duration $mat-linear-out-slow-in-timing-function;
+  transition:
+      border-color $mat-checkbox-transition-duration $mat-linear-out-slow-in-timing-function;
+  border: {
+    width: $mat-checkbox-border-width;
+    style: solid;
+  }
 }
 
 .mat-checkbox-background {
diff --git a/src/lib/radio/radio.scss b/src/lib/radio/radio.scss
index ab80c77cdb64..a1a1283a08b5 100644
--- a/src/lib/radio/radio.scss
+++ b/src/lib/radio/radio.scss
@@ -32,8 +32,6 @@ $mat-radio-ripple-size: $mat-radio-size * 0.75;
 
 // The outer circle for the radio, always present.
 .mat-radio-outer-circle {
-  border: solid 2px;
-  border-radius: 50%;
   box-sizing: border-box;
   height: $mat-radio-size;
   left: 0;
@@ -41,6 +39,11 @@ $mat-radio-ripple-size: $mat-radio-size * 0.75;
   top: 0;
   transition: border-color ease 280ms;
   width: $mat-radio-size;
+  border: {
+    width: 2px;
+    style: solid;
+    radius: 50%;
+  }
 }
 
 // The inner circle for the radio, shown when checked.