Fixed switch custom color with disabled.

litswu · Dec 8, 2016 · 88a5772 · 88a5772
1 parent ec3bb5d
commit 88a5772
Show file tree

Hide file tree

Showing 3 changed files with 7 additions and 7 deletions.
diff --git a/examples/docs/en-US/switch.md b/examples/docs/en-US/switch.md
@@ -12,7 +12,7 @@
 
 ## Switch
 
-Switch is used for switching between two opposing states. 
+Switch is used for switching between two opposing states.
 
 ### Basic usage
 
@@ -45,7 +45,7 @@ Switch is used for switching between two opposing states.
 
 ### Disabled
 
-:::demo Adding the `disabled` attribute disables Switch. 
+:::demo Adding the `disabled` attribute disables Switch.
 
 ```html
 <el-switch

diff --git a/packages/switch/src/component.vue b/packages/switch/src/component.vue
@@ -126,7 +126,7 @@
         this.coreWidth = this.hasText ? 58 : 46;
       }
       this.handleButtonTransform();
-      if ((this.onColor || this.offColor) && !this.disabled) {
+      if (this.onColor || this.offColor) {
         this.setBackgroundColor();
       }
     }

diff --git a/packages/theme-default/src/switch.css b/packages/theme-default/src/switch.css
@@ -80,15 +80,15 @@
 
     @when disabled {
       .el-switch__core {
-        border-color: var(--switch-disabled-color);
-        background: var(--switch-disabled-color);
+        border-color: var(--switch-disabled-color) !important;
+        background: var(--switch-disabled-color) !important;
 
         & span {
-          background-color: var(--switch-disabled-text-color);
+          background-color: var(--switch-disabled-text-color) !important;
         }
 
         & ~ .el-switch__label * {
-          color: var(--switch-disabled-text-color);
+          color: var(--switch-disabled-text-color) !important;
         }
       }