fix for checkbox opacity issues in safari

Author: sendilkumarn

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

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;