From 4e269602f9572c60e7313867d09fbdaa06cb6fe9 Mon Sep 17 00:00:00 2001
From: afc163 <afc163@gmail.com>
Date: Thu, 16 Jul 2015 22:48:53 +0800
Subject: [PATCH] fix checkbox and radio style

---
 style/components/checkbox.less | 39 +++++++---------------------------
 style/components/radio.less    | 14 +++++-------
 2 files changed, 13 insertions(+), 40 deletions(-)

diff --git a/style/components/checkbox.less b/style/components/checkbox.less
index 73f3644d7a..145552cd57 100644
--- a/style/components/checkbox.less
+++ b/style/components/checkbox.less
@@ -19,7 +19,6 @@
 
   &-inner {
     &:after {
-      -webkit-transform: rotate(45deg);
       transform: rotate(45deg);
       position: absolute;
       left: 4px;
@@ -31,9 +30,9 @@
       border-top: 0;
       border-left: 0;
       content: ' ';
-      animation-timing-function: cubic-bezier(0.68, -0.55, 0.27, 1.55);
+      animation-timing-function: @ease-in-out-back;
       animation-duration: 0.3s;
-      animation-name: amCheckboxOut;
+      animation-name: fadeOut;
     }
 
     position: relative;
@@ -47,7 +46,7 @@
     border-radius: 3px;
     border-color: #d9d9d9;
     background-color: #ffffff;
-    transition: border-color 0.3s cubic-bezier(0.68, -0.55, 0.27, 1.55), background-color 0.3s cubic-bezier(0.68, -0.55, 0.27, 1.55);
+    transition: border-color 0.3s @ease-in-out-back, background-color 0.3s @ease-in-out-back;
   }
 
   &-input {
@@ -67,13 +66,13 @@
 
   &:hover {
     .@{checkboxInnerPrefixCls} {
-      border-color: #3dbcf6;
+      border-color: @primary-color;
     }
   }
 
   .@{checkboxInnerPrefixCls} {
-    border-color: #3dbcf6;
-    background-color: #3dbcf6;
+    border-color: @primary-color;
+    background-color: @primary-color;
 
     &:after {
       transform: rotate(45deg);
@@ -87,9 +86,9 @@
       border-top: 0;
       border-left: 0;
       content: ' ';
-      animation-timing-function: cubic-bezier(0.68, -0.55, 0.27, 1.55);
+      animation-timing-function: @ease-in-out-back;
       animation-duration: 0.3s;
-      animation-name: amCheckboxOut;
+      animation-name: fadeOut;
     }
   }
 }
@@ -134,25 +133,3 @@
     cursor: default;
   }
 }
-
-@keyframes amCheckboxIn {
-  0% {
-    opacity: 0;
-    transform-origin: 50% 50%;
-    transform: scale(0, 0) rotate(45deg);
-  }
-  100% {
-    opacity: 1;
-    transform-origin: 50% 50%;
-    transform: scale(1, 1) rotate(45deg);
-  }
-}
-
-@keyframes amCheckboxOut {
-  0% {
-    opacity: 1;
-  }
-  100% {
-    opacity: 0;
-  }
-}
diff --git a/style/components/radio.less b/style/components/radio.less
index 314ea53b1d..f0584d6757 100644
--- a/style/components/radio.less
+++ b/style/components/radio.less
@@ -1,6 +1,6 @@
 @radioWarpPrefixCls: ant-radio;
 @radioInnerPrefixCls: ~"@{radioWarpPrefixCls}-inner";
-@duration:.3s;
+@radioDuration: .3s;
 
 /* 一般状态 */
 .@{radioWarpPrefixCls} {
@@ -27,12 +27,10 @@
       border-top: 0;
       border-left: 0;
       content: ' ';
-      background-color: #3dbcf6;
+      background-color: @primary-color;
       transform: scale(0);
-      -webkit-transform: scale(0);
       opacity: 0;
-      transition: transform @duration @ease-in-out-circ,opacity @duration @ease-in-out-circ,background-color @duration @ease-in-out-circ;
-      -webkit-transition: -webkit-transform @duration @ease-in-out-circ,opacity @duration @ease-in-out-circ,background-color @duration @ease-in-out-circ;
+      transition: transform @radioDuration @ease-in-out-circ,opacity @radioDuration @ease-in-out-circ,background-color @radioDuration @ease-in-out-circ;
     }
 
     position: relative;
@@ -46,7 +44,7 @@
     border-radius: 14px;
     border-color: #d9d9d9;
     background-color: #ffffff;
-    transition: border-color @duration @ease-in-out-circ, background-color @duration @ease-in-out-circ;
+    transition: border-color @radioDuration @ease-in-out-circ, background-color @radioDuration @ease-in-out-circ;
   }
 
   &-input {
@@ -68,10 +66,8 @@
     border-color: #d9d9d9;
     &:after {
       transform: scale(1);
-      -webkit-transform: scale(1);
       opacity: 1;
-      transition: transform @duration @ease-out-back,opacity @duration @ease-in-out-circ,background-color @duration @ease-in-out-circ;
-      -webkit-transition: -webkit-transform @duration @ease-out-back,opacity @duration @ease-in-out-circ,background-color @duration @ease-in-out-circ;
+      transition: transform @radioDuration @ease-out-back,opacity @radioDuration @ease-in-out-circ,background-color @radioDuration @ease-in-out-circ;
     }
   }
 }