style: radio

components/radio/Radio.tsx

@@ -16,7 +16,6 @@ export const radioProps = {
   name: PropTypes.string,
   id: PropTypes.string,
   autofocus: PropTypes.looseBool,
-  type: PropTypes.string.def('radio'),
   onChange: PropTypes.func,
   onFocus: PropTypes.func,
   onBlur: PropTypes.func,
@@ -92,7 +91,7 @@ export default defineComponent({
 
       return (
         <label class={wrapperClassString} onClick={onClick}>
-          <VcCheckbox {...rProps} ref={vcCheckbox} />
+          <VcCheckbox {...rProps} type="radio" ref={vcCheckbox} />
           {slots.default && <span>{slots.default()}</span>}
         </label>
       );

components/radio/style/index.less

@@ -28,12 +28,14 @@
   .reset-component();
   position: relative;
   display: inline-flex;
-  align-items: center;
+  align-items: baseline;
   margin-right: @radio-wrapper-margin-right;
   cursor: pointer;
+
   &-disabled {
     cursor: not-allowed;
   }
+
   &::after {
     display: inline-block;
     width: 0;
@@ -83,15 +85,17 @@
   &-inner {
     &::after {
       position: absolute;
-      top: ((@radio-size - @radio-dot-size) / 2) - @radio-border-width;
+      top: 50%;
-      left: ((@radio-size - @radio-dot-size) / 2) - @radio-border-width;
+      left: 50%;
       display: block;
-      width: @radio-dot-size;
+      width: @radio-size;
-      height: @radio-dot-size;
+      height: @radio-size;
+      margin-top: -(@radio-size / 2);
+      margin-left: -(@radio-size / 2);
       background-color: @radio-dot-color;
       border-top: 0;
       border-left: 0;
-      border-radius: @radio-dot-size;
+      border-radius: @radio-size;
       transform: scale(0);
       opacity: 0;
       transition: all @radio-duration @ease-in-out-circ;
@@ -128,8 +132,9 @@
 .@{radio-prefix-cls}-checked {
   .@{radio-inner-prefix-cls} {
     border-color: @radio-dot-color;
+
     &::after {
-      transform: scale(1);
+      transform: scale((unit(@radio-dot-size) / unit(@radio-size)));
       opacity: 1;
       transition: all @radio-duration @ease-in-out-circ;
     }
@@ -143,6 +148,7 @@
     background-color: @input-disabled-bg;
     border-color: @border-color-base !important;
     cursor: not-allowed;
+
     &::after {
       background-color: @radio-dot-disabled-color;
     }
@@ -270,6 +276,7 @@ span.@{radio-prefix-cls} + * {
     &:hover {
       color: @radio-button-hover-color;
       border-color: @radio-button-hover-color;
+
       &::before {
         background-color: @radio-button-hover-color;
       }
@@ -278,6 +285,7 @@ span.@{radio-prefix-cls} + * {
     &:active {
       color: @radio-button-active-color;
       border-color: @radio-button-active-color;
+
       &::before {
         background-color: @radio-button-active-color;
       }
@@ -292,16 +300,19 @@ span.@{radio-prefix-cls} + * {
     color: @radio-solid-checked-color;
     background: @radio-dot-color;
     border-color: @radio-dot-color;
+
     &:hover {
       color: @radio-solid-checked-color;
       background: @radio-button-hover-color;
       border-color: @radio-button-hover-color;
     }
+
     &:active {
       color: @radio-solid-checked-color;
       background: @radio-button-active-color;
       border-color: @radio-button-active-color;
     }
+
     &:focus-within {
       box-shadow: @radio-button-focus-shadow;
     }
@@ -319,6 +330,7 @@ span.@{radio-prefix-cls} + * {
       background-color: @input-disabled-bg;
       border-color: @border-color-base;
     }
+
     &:first-child {
       border-left-color: @border-color-base;
     }
@@ -337,6 +349,7 @@ span.@{radio-prefix-cls} + * {
     transform: scale(1);
     opacity: 0.5;
   }
+
   100% {
     transform: scale(1.6);
     opacity: 0;

components/style/themes/default.less

@@ -166,6 +166,7 @@
 // Disabled states
 @disabled-color: fade(#000, 25%);
 @disabled-bg: @background-color-base;
+@disabled-active-bg: tint(@black, 90%);
 @disabled-color-dark: fade(#fff, 35%);
 
 // Shadow
@@ -270,7 +271,7 @@
 
 // Radio
 @radio-size: 16px;
-@radio-top: 0px;
+@radio-top: 0.2em;
 @radio-border-width: 1px;
 @radio-dot-size: @radio-size - 8px;
 @radio-dot-color: @primary-color;
@@ -283,7 +284,7 @@
 @radio-button-color: @btn-default-color;
 @radio-button-hover-color: @primary-5;
 @radio-button-active-color: @primary-7;
-@radio-disabled-button-checked-bg: tint(@black, 90%);
+@radio-disabled-button-checked-bg: @disabled-active-bg;
 @radio-disabled-button-checked-color: @disabled-color;
 @radio-wrapper-margin-right: 8px;