fix checkbox radio status class && disable style (#1930)

packages/checkbox/src/checkbox.vue

 <template>
   <label class="el-checkbox">
-    <span class="el-checkbox__input">
-      <span class="el-checkbox__inner"
+    <span class="el-checkbox__input"
       :class="{
         'is-disabled': disabled,
         'is-checked': isChecked,
         'is-indeterminate': indeterminate,
         'is-focus': focus
       }"
-      ></span>
+    >
+      <span class="el-checkbox__inner"></span>
       <input
         v-if="trueLabel || falseLabel"
         class="el-checkbox__original"

packages/radio/src/radio.vue

 <template>
   <label class="el-radio">
-    <span class="el-radio__input">
-      <span class="el-radio__inner"
+    <span class="el-radio__input"
       :class="{
         'is-disabled': disabled,
         'is-checked': model === label,
         'is-focus': focus
-      }"></span>
+      }"
+    >
+      <span class="el-radio__inner"></span>
       <input
         class="el-radio__original"
         :value="label"

packages/theme-default/src/checkbox.css

@@ -19,39 +19,9 @@
       line-height: 1;
       position: relative;
       vertical-align: middle;
-    }
-    @e inner {
-      display: inline-block;
-      position: relative;
-      border: var(--checkbox-input-border);
-      border-radius: var(--checkbox-input-border-radius);
-      box-sizing: border-box;
-      rect: var(--checkbox-input-width) var(--checkbox-input-height) var(--checkbox-input-fill);
-      z-index: var(--index-normal);
-      transition: border-color .25s cubic-bezier(.71,-.46,.29,1.46),
-                  background-color .25s cubic-bezier(.71,-.46,.29,1.46);
-
-      &:not(.is-disabled):hover {
-        border-color: var(--checkbox-input-border-color-hover);
-      }
-
-      &::after {
-        box-sizing: content-box;
-        content: "";
-        border: 2px solid var(--checkbox-checked-icon-color);
-        border-left: 0;
-        border-top: 0;
-        height: 8px;
-        left: 5px;
-        position: absolute;
-        top: 1px;
-        transform: rotate(45deg) scaleY(0);
-        width: 4px;
-        transition: transform .15s cubic-bezier(.71,-.46,.88,.6) .05s;
-        transform-origin: center;
-      }
 
       @when disabled {
+        .el-checkbox__inner {
           background-color: var(--checkbox-disabled-input-fill);
           border-color: var(--checkbox-disabled-input-border-color);
           cursor: not-allowed;
@@ -65,8 +35,33 @@
             cursor: not-allowed;
           }
         }
+        &.is-checked {
+          .el-checkbox__inner {
+            background-color: var(--checkbox-disabled-checked-input-fill);
+            border-color: var(--checkbox-disabled-checked-input-border-color);
 
+            &::after {
+              border-color: var(--checkbox-disabled-checked-icon-color);
+            }
+          }
+        }
+        &.is-indeterminate {
+          .el-checkbox__inner {
+            background-color: var(--checkbox-disabled-checked-input-fill);
+            border-color: var(--checkbox-disabled-checked-input-border-color);
+
+            &::before {
+              border-color: var(--checkbox-disabled-checked-icon-color);
+            }
+          }
+        }
+        & + .el-checkbox__label {
+          color: var(--disabled-color-base);
+          cursor: not-allowed;
+        }
+      }
       @when checked {
+        .el-checkbox__inner {
           background-color: var(--checkbox-checked-input-fill);
           border-color: var(--checkbox-checked-input-border-color);
 
@@ -74,21 +69,14 @@
             transform: rotate(45deg) scaleY(1);
           }
         }
-
+      }
       @when focus {
+        .el-checkbox__inner {
           border-color: var(--checkbox-input-border-color-hover);
         }
-
-      &.is-disabled.is-checked {
-        background-color: var(--checkbox-disabled-checked-input-fill);
-        border-color: var(--checkbox-disabled-checked-input-border-color);
-
-        &::after {
-          border-color: var(--checkbox-disabled-checked-icon-color);
-        }
       }
-
       @when indeterminate {
+        .el-checkbox__inner {
           background-color: var(--checkbox-checked-input-fill);
           border-color: var(--checkbox-checked-input-border-color);
 
@@ -107,14 +95,37 @@
             display: none;
           }
         }
+      }
+    }
+    @e inner {
+      display: inline-block;
+      position: relative;
+      border: var(--checkbox-input-border);
+      border-radius: var(--checkbox-input-border-radius);
+      box-sizing: border-box;
+      rect: var(--checkbox-input-width) var(--checkbox-input-height) var(--checkbox-input-fill);
+      z-index: var(--index-normal);
+      transition: border-color .25s cubic-bezier(.71,-.46,.29,1.46),
+                  background-color .25s cubic-bezier(.71,-.46,.29,1.46);
 
-      &.is-disabled.is-indeterminate {
-        background-color: var(--checkbox-disabled-checked-input-fill);
-        border-color: var(--checkbox-disabled-checked-input-border-color);
-
-        &::before {
-          border-color: var(--checkbox-disabled-checked-icon-color);
+      &:hover {
+        border-color: var(--checkbox-input-border-color-hover);
       }
+
+      &::after {
+        box-sizing: content-box;
+        content: "";
+        border: 2px solid var(--checkbox-checked-icon-color);
+        border-left: 0;
+        border-top: 0;
+        height: 8px;
+        left: 5px;
+        position: absolute;
+        top: 1px;
+        transform: rotate(45deg) scaleY(0);
+        width: 4px;
+        transition: transform .15s cubic-bezier(.71,-.46,.88,.6) .05s;
+        transform-origin: center;
       }
     }
 

packages/theme-default/src/radio.css

@@ -24,31 +24,9 @@
       line-height: 1;
       position: relative;
       vertical-align: middle;
-    }
-    @e inner {
-      border: var(--radio-input-border);
-      border-radius: var(--radio-input-border-radius);
-      circle: var(--radio-input-width) var(--radio-input-fill);
-      position: relative;
-      cursor: pointer;
-      display: inline-block;
-      box-sizing: border-box;
-
-      &:not(.is-disabled):hover {
-        border-color: var(--radio-input-border-color-hover);
-      }
-
-      &::after {
-        circle: 6px #fff;
-        content: "";
-        position: absolute;
-        left: 50%;
-        top: 50%;
-        transform: translate(-50%, -50%) scale(0);
-        transition: transform .15s cubic-bezier(.71,-.46,.88,.6);
-      }
 
       @when disabled {
+        .el-radio__inner {
           background-color: var(--radio-disabled-input-fill);
           border-color: var(--radio-disabled-input-border-color);
           cursor: not-allowed;
@@ -62,8 +40,24 @@
             cursor: not-allowed;
           }
         }
+        &.is-checked {
+          .el-radio__inner {
+            background-color: var(--radio-disabled-checked-input-fill);
+            border-color: var(--radio-disabled-checked-input-border-color);
+
+            &::after {
+              background-color: var(--radio-disabled-checked-icon-color);
+            }
+          }
+        }
+        & + .el-radio__label {
+          color: var(--disabled-color-base);
+          cursor: not-allowed;
+        }
+      }
 
       @when checked {
+        .el-radio__inner {
           border-color: var(--radio-checked-input-border-color);
           background: var(--radio-checked-icon-color);
 
@@ -71,18 +65,35 @@
             transform: translate(-50%, -50%) scale(1);
           }
         }
+      }
 
       @when focus {
+        .el-radio__inner {
           border-color: var(--radio-input-border-color-hover);
         }
+      }
+    }
+    @e inner {
+      border: var(--radio-input-border);
+      border-radius: var(--radio-input-border-radius);
+      circle: var(--radio-input-width) var(--radio-input-fill);
+      position: relative;
+      cursor: pointer;
+      display: inline-block;
+      box-sizing: border-box;
 
-      &.is-disabled.is-checked {
-        background-color: var(--radio-disabled-checked-input-fill);
-        border-color: var(--radio-disabled-checked-input-border-color);
+      &:hover {
+        border-color: var(--radio-input-border-color-hover);
+      }
 
       &::after {
-          background-color: var(--radio-disabled-checked-icon-color);
-        }
+        circle: 6px #fff;
+        content: "";
+        position: absolute;
+        left: 50%;
+        top: 50%;
+        transform: translate(-50%, -50%) scale(0);
+        transition: transform .15s cubic-bezier(.71,-.46,.88,.6);
       }
     }
 

test/unit/specs/table.spec.js

@@ -843,12 +843,12 @@ describe('Table', () => {
         vm.$el.querySelectorAll('.el-checkbox')[1].click();
 
         setTimeout(_ => {
-          expect(vm.$el.querySelectorAll('.el-checkbox__inner.is-checked')).to.length(1);
+          expect(vm.$el.querySelectorAll('.el-checkbox__input.is-checked')).to.length(1);
           // go to second page
           vm.testData = getData(1);
           setTimeout(_ => {
              // expect no checked
-            expect(vm.$el.querySelectorAll('.el-checkbox__inner.is-checked')).to.length(0);
+            expect(vm.$el.querySelectorAll('.el-checkbox__input.is-checked')).to.length(0);
             // click first checkbox
             vm.$el.querySelectorAll('.el-checkbox')[1].click();
             vm.$el.querySelectorAll('.el-checkbox')[2].click();
@@ -856,11 +856,11 @@ describe('Table', () => {
               // back first page
               vm.testData = getData();
               setTimeout(_ => {
-                expect(vm.$el.querySelectorAll('.el-checkbox__inner.is-checked')).to.length(1);
+                expect(vm.$el.querySelectorAll('.el-checkbox__input.is-checked')).to.length(1);
                 // clear
                 vm.$refs.table.clearSelection();
                 setTimeout(_ => {
-                  expect(vm.$el.querySelectorAll('.el-checkbox__inner.is-checked')).to.length(0);
+                  expect(vm.$el.querySelectorAll('.el-checkbox__input.is-checked')).to.length(0);
                   destroyVM(vm);
                   done();
                 }, DELAY);