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

packages/checkbox/src/checkbox.vue

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

packages/radio/src/radio.vue

@@ -1,12 +1,13 @@
 <template>
   <label class="el-radio">
-    <span class="el-radio__input">
-      <span class="el-radio__inner"
-        :class="{
+    <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,6 +19,83 @@
       line-height: 1;
       position: relative;
       vertical-align: middle;
+
+      @when disabled {
+        .el-checkbox__inner {
+          background-color: var(--checkbox-disabled-input-fill);
+          border-color: var(--checkbox-disabled-input-border-color);
+          cursor: not-allowed;
+
+          &::after {
+            cursor: not-allowed;
+            border-color: var(--checkbox-disabled-icon-color);
+          }
+
+          & + .el-checkbox__label {
+            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);
+
+          &::after {
+            transform: rotate(45deg) scaleY(1);
+          }
+        }
+      }
+      @when focus {
+        .el-checkbox__inner {
+          border-color: var(--checkbox-input-border-color-hover);
+        }
+      }
+      @when indeterminate {
+        .el-checkbox__inner {
+          background-color: var(--checkbox-checked-input-fill);
+          border-color: var(--checkbox-checked-input-border-color);
+
+          &::before {
+            content: '';
+            position: absolute;
+            display: block;
+            border: 1px solid var(--checkbox-checked-icon-color);
+            margin-top: -1px;
+            left: 3px;
+            right: 3px;
+            top: 50%;
+          }
+
+          &::after {
+            display: none;
+          }
+        }
+      }
     }
     @e inner {
       display: inline-block;
@@ -31,7 +108,7 @@
       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 {
+      &:hover {
         border-color: var(--checkbox-input-border-color-hover);
       }
 
@@ -50,72 +127,6 @@
         transition: transform .15s cubic-bezier(.71,-.46,.88,.6) .05s;
         transform-origin: center;
       }
-
-      @when disabled {
-        background-color: var(--checkbox-disabled-input-fill);
-        border-color: var(--checkbox-disabled-input-border-color);
-        cursor: not-allowed;
-
-        &::after {
-          cursor: not-allowed;
-          border-color: var(--checkbox-disabled-icon-color);
-        }
-
-        & + .el-checkbox__label {
-          cursor: not-allowed;
-        }
-      }
-
-      @when checked {
-        background-color: var(--checkbox-checked-input-fill);
-        border-color: var(--checkbox-checked-input-border-color);
-
-        &::after {
-          transform: rotate(45deg) scaleY(1);
-        }
-      }
-
-      @when focus {
-        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 {
-        background-color: var(--checkbox-checked-input-fill);
-        border-color: var(--checkbox-checked-input-border-color);
-
-        &::before {
-          content: '';
-          position: absolute;
-          display: block;
-          border: 1px solid var(--checkbox-checked-icon-color);
-          margin-top: -1px;
-          left: 3px;
-          right: 3px;
-          top: 50%;
-        }
-
-        &::after {
-          display: none;
-        }
-      }
-
-      &.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);
-        }
-      }
     }
 
     @e original {

packages/theme-default/src/radio.css

@@ -24,6 +24,54 @@
       line-height: 1;
       position: relative;
       vertical-align: middle;
+
+      @when disabled {
+        .el-radio__inner {
+          background-color: var(--radio-disabled-input-fill);
+          border-color: var(--radio-disabled-input-border-color);
+          cursor: not-allowed;
+
+          &::after {
+            cursor: not-allowed;
+            background-color: var(--radio-disabled-icon-color);
+          }
+
+          & + .el-radio__label {
+            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);
+
+          &::after {
+            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);
@@ -34,7 +82,7 @@
       display: inline-block;
       box-sizing: border-box;
 
-      &:not(.is-disabled):hover {
+      &:hover {
         border-color: var(--radio-input-border-color-hover);
       }
 
@@ -47,43 +95,6 @@
         transform: translate(-50%, -50%) scale(0);
         transition: transform .15s cubic-bezier(.71,-.46,.88,.6);
       }
-
-      @when disabled {
-        background-color: var(--radio-disabled-input-fill);
-        border-color: var(--radio-disabled-input-border-color);
-        cursor: not-allowed;
-
-        &::after {
-          cursor: not-allowed;
-          background-color: var(--radio-disabled-icon-color);
-        }
-
-        & + .el-radio__label {
-          cursor: not-allowed;
-        }
-      }
-
-      @when checked {
-        border-color: var(--radio-checked-input-border-color);
-        background: var(--radio-checked-icon-color);
-
-        &::after {
-          transform: translate(-50%, -50%) scale(1);
-        }
-      }
-
-      @when focus {
-        border-color: var(--radio-input-border-color-hover);
-      }
-      
-      &.is-disabled.is-checked {
-        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);
-        }
-      }
     }
 
     @e original {

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);