github
/
element
mirror of https://github.com/ElemeFE/element
1
0
Fork 0
Code Issues Releases Wiki Activity

Fixed switch custom color with disabled.

pull/1635/head
gogu 2016-12-08 15:23:21 +08:00 committed by 杨奕
parent ec3bb5d3fe
commit 88a5772e91
3 changed files with 7 additions and 7 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

4
examples/docs/en-US/switch.md
View File

@ -12,7 +12,7 @@
## Switch ## Switch
Switch is used for switching between two opposing states. Switch is used for switching between two opposing states.
### Basic usage ### Basic usage
@ -45,7 +45,7 @@ Switch is used for switching between two opposing states.
### Disabled ### Disabled
:::demo Adding the `disabled` attribute disables Switch. :::demo Adding the `disabled` attribute disables Switch.
```html ```html
<el-switch <el-switch

2
packages/switch/src/component.vue
View File

@ -126,7 +126,7 @@
this.coreWidth = this.hasText ? 58 : 46; this.coreWidth = this.hasText ? 58 : 46;
} }
this.handleButtonTransform(); this.handleButtonTransform();
if ((this.onColor || this.offColor) && !this.disabled) { if (this.onColor || this.offColor) {
this.setBackgroundColor(); this.setBackgroundColor();
} }
} }

8
packages/theme-default/src/switch.css
View File

@ -80,15 +80,15 @@
@when disabled { @when disabled {
.el-switch__core { .el-switch__core {
border-color: var(--switch-disabled-color); border-color: var(--switch-disabled-color) !important;
background: var(--switch-disabled-color); background: var(--switch-disabled-color) !important;
& span { & span {
background-color: var(--switch-disabled-text-color); background-color: var(--switch-disabled-text-color) !important;
} }
& ~ .el-switch__label * { & ~ .el-switch__label * {
color: var(--switch-disabled-text-color); color: var(--switch-disabled-text-color) !important;
} }
} }