Fix Radio[disabled] style and add label-hovering style, close #3590

ant-design · Oct 31, 2016 · 002f3f5 · 002f3f5
1 parent 44f61ac
commit 002f3f5
Show file tree

Hide file tree

Showing 2 changed files with 56 additions and 95 deletions.
diff --git a/components/checkbox/style/mixin.less b/components/checkbox/style/mixin.less
@@ -12,14 +12,26 @@
     position: relative;
     vertical-align: middle;
 
+    .@{checkbox-prefix-cls}-wrapper:hover &,
     &:hover,
     &-focused {
       .@{checkbox-inner-prefix-cls} {
-        border-color: #bcbcbc;
+        border-color: #bbb;
       }
     }
 
     &-inner {
+      position: relative;
+      top: 0;
+      left: 0;
+      display: inline-block;
+      width: 14px;
+      height: 14px;
+      border: 1px solid @border-color-base;
+      border-radius: 3px;
+      background-color: #fff;
+      transition: all .3s;
+
       &:after {
         transform: rotate(45deg) scale(0);
         position: absolute;
@@ -34,19 +46,6 @@
         content: ' ';
         transition: all .1s @ease-in-back;
       }
-
-      position: relative;
-      top: 0;
-      left: 0;
-      display: inline-block;
-      width: 14px;
-      height: 14px;
-      border-width: 1px;
-      border-style: solid;
-      border-radius: 3px;
-      border-color: @border-color-base;
-      background-color: #fff;
-      transition: border-color 0.1s @ease-in-out-back, background-color 0.1s @ease-in-out-back;
     }
 
     &-input {
@@ -64,94 +63,63 @@
   }
 
   // 半选状态
+  .@{checkbox-prefix-cls}-indeterminate .@{checkbox-inner-prefix-cls}:after {
+    content: ' ';
+    transform: scale(1);
+    position: absolute;
+    left: 2px;
+    top: 5px;
+    width: 8px;
+    height: 1px;
+  }
+
+  // 选中状态
+  .@{checkbox-prefix-cls}-checked .@{checkbox-inner-prefix-cls}:after {
+    transform: rotate(45deg) scale(1);
+    position: absolute;
+    left: 4px;
+    top: 1px;
+    display: table;
+    width: 5px;
+    height: 8px;
+    border: 2px solid #fff;
+    border-top: 0;
+    border-left: 0;
+    content: ' ';
+    transition: all .2s @ease-out-back .1s;
+  }
+
+  .@{checkbox-prefix-cls}-checked,
   .@{checkbox-prefix-cls}-indeterminate {
     .@{checkbox-inner-prefix-cls} {
       border-color: @primary-color;
       background-color: @primary-color;
-      &:after {
-        content: ' ';
-        transform: scale(1);
-        position: absolute;
-        left: 2px;
-        top: 5px;
-        width: 8px;
-        height: 1px;
-      }
     }
+    .@{checkbox-prefix-cls}-wrapper:hover &,
     &:hover {
       .@{checkbox-inner-prefix-cls} {
         border-color: @primary-color;
       }
     }
   }
-  // 选中状态
-  .@{checkbox-prefix-cls}-checked {
-
-    &:hover {
-      .@{checkbox-inner-prefix-cls} {
-        border-color: @primary-color;
-      }
-    }
-
-    .@{checkbox-inner-prefix-cls} {
-      border-color: @primary-color;
-      background-color: @primary-color;
-
-      &:after {
-        transform: rotate(45deg) scale(1);
-        position: absolute;
-        left: 4px;
-        top: 1px;
-        display: table;
-        width: 5px;
-        height: 8px;
-        border: 2px solid #fff;
-        border-top: 0;
-        border-left: 0;
-        content: ' ';
-        transition: all .2s @ease-out-back .1s;
-      }
-    }
-  }
 
   .@{checkbox-prefix-cls}-disabled {
     &.@{checkbox-prefix-cls}-checked {
-      &:hover {
-        .@{checkbox-inner-prefix-cls} {
-          border-color: @border-color-base;
-        }
-      }
-
-      .@{checkbox-inner-prefix-cls} {
-        background-color: #f3f3f3;
-        border-color: @border-color-base;
-
-        &:after {
-          animation-name: none;
-          border-color: #ccc;
-        }
-      }
-    }
-
-    &:hover {
-      .@{checkbox-inner-prefix-cls} {
-        border-color: @border-color-base;
+      .@{checkbox-inner-prefix-cls}:after {
+        animation-name: none;
+        border-color: #ccc;
       }
     }
 
     .@{checkbox-inner-prefix-cls} {
-      border-color: @border-color-base;
+      border-color: @border-color-base!important;
       background-color: #f3f3f3;
       &:after {
         animation-name: none;
         border-color: #f3f3f3;
       }
     }
 
-    .@{checkbox-inner-prefix-cls}-input {
-      cursor: default;
-    }
-
     & + span {
       color: #ccc;
       cursor: @cursor-disabled;
@@ -169,8 +137,8 @@
 
   .@{checkbox-prefix-cls}-wrapper + span,
   .@{checkbox-prefix-cls} + span {
-    margin-left: 8px;
-    margin-right: 8px;
+    padding-left: 8px;
+    padding-right: 8px;
   }
 
   .@{checkbox-prefix-cls}-group {

diff --git a/components/radio/style/index.less b/components/radio/style/index.less
@@ -4,7 +4,7 @@
 @radio-prefix-cls: ~"@{ant-prefix}-radio";
 @radio-group-prefix-cls: ~"@{radio-prefix-cls}-group";
 @radio-inner-prefix-cls: ~"@{radio-prefix-cls}-inner";
-@radio-duration: .2s;
+@radio-duration: .3s;
 
 .@{radio-group-prefix-cls} {
   display: inline-block;
@@ -19,6 +19,7 @@
   position: relative;
   white-space: nowrap;
   margin-right: 8px;
+  cursor: pointer;
 }
 
 .@{radio-prefix-cls} {
@@ -29,10 +30,11 @@
   line-height: 1;
   vertical-align: middle;
   cursor: pointer;
+  .@{radio-prefix-cls}-wrapper:hover &,
   &:hover,
   &-focused {
     .@{radio-inner-prefix-cls} {
-      border-color: #bcbcbc;
+      border-color: #bbb;
     }
   }
   &-inner {
@@ -64,7 +66,7 @@
     border-radius: 14px;
     border-color: @border-color-base;
     background-color: #fff;
-    transition: all @radio-duration @ease-in-out-circ;
+    transition: all @radio-duration;
   }
 
   &-input {
@@ -92,32 +94,23 @@
 }
 
 .@{radio-prefix-cls}-disabled {
-  &:hover {
-    .@{radio-inner-prefix-cls} {
-      border-color: @border-color-base;
-    }
-  }
   .@{radio-inner-prefix-cls} {
-    border-color: @border-color-base;
+    border-color: @border-color-base!important;
     background-color: #f3f3f3;
     &:after {
       background-color: #cccccc;
     }
   }
 
-  .@{radio-inner-prefix-cls}-input {
-    cursor: default;
-  }
-
-  .@{radio-prefix-cls}-disabled + span {
+  & + span {
     color: #ccc;
     cursor: @cursor-disabled;
   }
 }
 
 span.@{radio-prefix-cls} + * {
-  margin-left: 8px;
-  margin-right: 8px;
+  padding-left: 8px;
+  padding-right: 8px;
 }
 
 .@{radio-prefix-cls}-button-wrapper {