From 9e85799d6c9c44f393240c087b6a9dc30bb4882f Mon Sep 17 00:00:00 2001
From: SendilKumar N <sendilkumarn@live.com>
Date: Wed, 1 Jun 2016 15:56:22 +0800
Subject: [PATCH] fix for checkbox opacity issues in safari

---
 src/components/checkbox/checkbox.scss | 19 ++++++++++++-------
 src/core/style/_variables.scss        |  2 +-
 2 files changed, 13 insertions(+), 8 deletions(-)

diff --git a/src/components/checkbox/checkbox.scss b/src/components/checkbox/checkbox.scss
index 4564ab1f1764..e9377a580da2 100644
--- a/src/components/checkbox/checkbox.scss
+++ b/src/components/checkbox/checkbox.scss
@@ -241,7 +241,7 @@ md-checkbox {
   width: $md-checkbox-size;
 
   [dir="rtl"] & {
-    margin:{
+    margin: {
       left: $md-checkbox-item-spacing;
       right: auto;
     }
@@ -265,9 +265,7 @@ md-checkbox {
 .md-checkbox-background {
   @extend %md-checkbox-outer-box;
 
-  align-items: center;
-  background-color: $md-checkbox-background-color;
-  opacity: 0;
+  align-items: center;    
   display: inline-flex;
   justify-content: center;
   transition: background-color $md-checkbox-transition-duration
@@ -333,15 +331,15 @@ md-checkbox {
   .md-checkbox-mixedmark {
     transform: scaleX(1) rotate(-45deg);
   }
-
+  
   .md-checkbox-background {
-    opacity: 1;
+    background-color: $md-checkbox-background-color;
   }
 }
 
 .md-checkbox-indeterminate {
   .md-checkbox-background {
-    opacity: 1;
+    background-color: $md-checkbox-background-color;
   }
 
   .md-checkbox-checkmark {
@@ -359,6 +357,13 @@ md-checkbox {
   }
 }
 
+
+.md-checkbox-unchecked {
+  .md-checkbox-background {
+    background-color: none; 
+  }
+}
+
 .md-checkbox-disabled {
   // NOTE(traviskaufman): While the spec calls for translucent blacks/whites for disabled colors,
   // this does not work well with elements layered on top of one another. To get around this we
diff --git a/src/core/style/_variables.scss b/src/core/style/_variables.scss
index 417a6cd0a0cf..5c08c02909e2 100644
--- a/src/core/style/_variables.scss
+++ b/src/core/style/_variables.scss
@@ -24,7 +24,7 @@ $md-toggle-size: 20px !default;
 // TODO(jelbourn): all of these need to be revisited
 
 // The default animation curves used by material design.
-$md-linear-out-slow-in-timing-function: cubic-bezier(0.0, 0.0, 0.2, 0.1) !default;
+$md-linear-out-slow-in-timing-function: cubic-bezier(0.0, 0.0, 0.2, 1) !default;
 $md-fast-out-slow-in-timing-function: cubic-bezier(0.4, 0.0, 0.2, 1) !default;
 $md-fast-out-linear-in-timing-function: cubic-bezier(0.4, 0.0, 1, 1) !default;