RadioButton: move radio-button css to radio-button.css file, fixed #3276 (#3723)

packages/theme-default/src/radio-button.css

@@ -0,0 +1,100 @@
+@charset "UTF-8";
+@import "./common/var.css";
+
+@component-namespace el {
+  @b radio-button {
+    position: relative;
+    display: inline-block;
+
+    @e inner {
+      display: inline-block;
+      line-height: 1;
+      white-space: nowrap;
+      vertical-align: middle;
+      cursor: pointer;
+      background: var(--button-default-fill);
+      border: var(--border-base);
+      border-left: 0;
+      color: var(--button-default-color);
+      -webkit-appearance: none;
+      text-align: center;
+      box-sizing: border-box;
+      outline: none;
+      margin: 0;
+      position: relative;
+      cursor: pointer;
+      transition: var(--all-transition);
+      @utils-user-select none;
+
+      @mixin button-size var(--button-padding-vertical), var(--button-padding-horizontal), var(--button-font-size), 0;
+
+      &:hover {
+        color: var(--color-primary);
+      }
+
+      & [class*="el-icon-"] {
+        line-height: 0.9;
+
+        & + span {
+          margin-left: 5px;
+        }
+      }
+    }
+
+    @e orig-radio {
+      opacity: 0;
+      outline: none;
+      position: absolute;
+      z-index: -1;
+      left: -999px;
+
+      &:checked {
+        & + .el-radio-button__inner {
+          color: var(--radio-button-checked-color);
+          background-color: var(--radio-button-checked-fill);
+          border-color: var(--radio-button-checked-border-color);
+          box-shadow: -1px 0 0 0 var(--radio-button-checked-border-color);
+        }
+      }
+
+      &:disabled {
+        & + .el-radio-button__inner {
+          color: var(--button-disabled-color);
+          cursor: not-allowed;
+          background-image: none;
+          background-color: var(--button-disabled-fill);
+          border-color: var(--button-disabled-border);
+          box-shadow: none;
+        }
+      }
+    }
+
+    &:first-child {
+      .el-radio-button__inner {
+        border-left: var(--border-base);
+        border-radius: var(--border-radius-base) 0 0 var(--border-radius-base);
+        box-shadow: none !important;
+      }
+    }
+    &:last-child {
+      .el-radio-button__inner {
+        border-radius: 0 var(--border-radius-base) var(--border-radius-base) 0;
+      }
+    }
+    @m large {
+      & .el-radio-button__inner {
+        @mixin button-size var(--button-large-padding-vertical), var(--button-large-padding-horizontal), var(--button-large-font-size), 0;
+      }
+    }
+    @m small {
+      & .el-radio-button__inner {
+        @mixin button-size var(--button-small-padding-vertical), var(--button-small-padding-horizontal), var(--button-small-font-size), 0;
+      }
+    }
+    @m mini {
+      & .el-radio-button__inner {
+        @mixin button-size var(--button-mini-padding-vertical), var(--button-mini-padding-horizontal), var(--button-mini-font-size), 0;
+      }
+    }
+  }
+}

packages/theme-default/src/radio-group.css

@@ -0,0 +1,15 @@
+@charset "UTF-8";
+@import "./common/var.css";
+
+@component-namespace el {
+  @b radio-group {
+    display: inline-block;
+    font-size: 0;
+    line-height: 1;
+
+    & .el-radio {
+      font-size: var(--radio-font-size);
+    }
+
+  }
+}

packages/theme-default/src/radio.css

@@ -3,7 +3,6 @@
 @import './mixins/button';
 
 @component-namespace el {
-
   @b radio {
     color: var(--radio-color);
     position: relative;
@@ -15,7 +14,7 @@
     & + .el-radio {
       margin-left: 15px;
     }
-    
+
     @e input {
       white-space: nowrap;
       cursor: pointer;
@@ -114,110 +113,4 @@
       padding-left: 5px;
     }
   }
-
-  @b radio-group {
-    display: inline-block;
-    font-size: 0;
-    line-height: 1;
-
-    & .el-radio {
-      font-size: var(--radio-font-size);
-    }
-
-  }
-  @b radio-button {
-    position: relative;
-    display: inline-block;
-
-    @e inner {
-      display: inline-block;
-      line-height: 1;
-      white-space: nowrap;
-      vertical-align: middle;
-      cursor: pointer;
-      background: var(--button-default-fill);
-      border: var(--border-base);
-      border-left: 0;
-      color: var(--button-default-color);
-      -webkit-appearance: none;
-      text-align: center;
-      box-sizing: border-box;
-      outline: none;
-      margin: 0;
-      position: relative;
-      cursor: pointer;
-      transition: var(--all-transition);
-      @utils-user-select none;
-
-      @mixin button-size var(--button-padding-vertical), var(--button-padding-horizontal), var(--button-font-size), 0;
-
-      &:hover {
-        color: var(--color-primary);
-      }
-
-      & [class*="el-icon-"] {
-        line-height: 0.9;
-
-        & + span {
-          margin-left: 5px;
-        }
-      }
-    }
-
-    @e orig-radio {
-      opacity: 0;
-      outline: none;
-      position: absolute;
-      z-index: -1;
-      left: -999px;
-
-      &:checked {
-        & + .el-radio-button__inner {
-          color: var(--radio-button-checked-color);
-          background-color: var(--radio-button-checked-fill);
-          border-color: var(--radio-button-checked-border-color);
-          box-shadow: -1px 0 0 0 var(--radio-button-checked-border-color);
-        }
-      }
-
-      &:disabled {
-        & + .el-radio-button__inner {
-          color: var(--button-disabled-color);
-          cursor: not-allowed;
-          background-image: none;
-          background-color: var(--button-disabled-fill);
-          border-color: var(--button-disabled-border);
-          box-shadow: none;
-        }
-      }
-    }
-
-    &:first-child {
-      .el-radio-button__inner {
-        border-left: var(--border-base);
-        border-radius: var(--border-radius-base) 0 0 var(--border-radius-base);
-        box-shadow: none !important;
-      }
-    }
-    &:last-child {
-      .el-radio-button__inner {
-        border-radius: 0 var(--border-radius-base) var(--border-radius-base) 0;
-      }
-    }
-    @m large {
-      & .el-radio-button__inner {
-        @mixin button-size var(--button-large-padding-vertical), var(--button-large-padding-horizontal), var(--button-large-font-size), 0;
-      }
-    }
-    @m small {
-      & .el-radio-button__inner {
-        @mixin button-size var(--button-small-padding-vertical), var(--button-small-padding-horizontal), var(--button-small-font-size), 0;
-      }
-    }
-    @m mini {
-      & .el-radio-button__inner {
-        @mixin button-size var(--button-mini-padding-vertical), var(--button-mini-padding-horizontal), var(--button-mini-font-size), 0;
-      }
-    }
-  }
 }