Skip to content

E
Element
Commit 631afa92 authored by baiyaaaaa's avatar baiyaaaaa Committed by cinwell.li
Browse files
Options

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

parent f4140493
Hide whitespace changes
Inline Side-by-side
Showing with 145 additions and 122 deletions
packages/checkbox/src/checkbox.vue
View file @ 631afa92
<template> <template>
<label class="el-checkbox"> <label class="el-checkbox">
<span class="el-checkbox__input"> <span class="el-checkbox__input"
<span class="el-checkbox__inner" :class="{
:class="{ 'is-disabled': disabled,
'is-disabled': disabled, 'is-checked': isChecked,
'is-checked': isChecked, 'is-indeterminate': indeterminate,
'is-indeterminate': indeterminate, 'is-focus': focus
'is-focus': focus }"
}" >
></span> <span class="el-checkbox__inner"></span>
<input <input
v-if="trueLabel || falseLabel" v-if="trueLabel || falseLabel"
class="el-checkbox__original" class="el-checkbox__original"
......
packages/radio/src/radio.vue
View file @ 631afa92
<template> <template>
<label class="el-radio"> <label class="el-radio">
<span class="el-radio__input"> <span class="el-radio__input"
<span class="el-radio__inner" :class="{
:class="{
'is-disabled': disabled, 'is-disabled': disabled,
'is-checked': model === label, 'is-checked': model === label,
'is-focus': focus 'is-focus': focus
}"></span> }"
>
<span class="el-radio__inner"></span>
<input <input
class="el-radio__original" class="el-radio__original"
:value="label" :value="label"
......
packages/theme-default/src/checkbox.css
View file @ 631afa92
...@@ -19,6 +19,83 @@ ...@@ -19,6 +19,83 @@
line-height: 1; line-height: 1;
position: relative; position: relative;
vertical-align: middle; 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 { @e inner {
display: inline-block; display: inline-block;
...@@ -31,7 +108,7 @@ ...@@ -31,7 +108,7 @@
transition: border-color .25s cubic-bezier(.71,-.46,.29,1.46), transition: border-color .25s cubic-bezier(.71,-.46,.29,1.46),
background-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); border-color: var(--checkbox-input-border-color-hover);
} }
...@@ -50,72 +127,6 @@ ...@@ -50,72 +127,6 @@
transition: transform .15s cubic-bezier(.71,-.46,.88,.6) .05s; transition: transform .15s cubic-bezier(.71,-.46,.88,.6) .05s;
transform-origin: center; 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 { @e original {
......
packages/theme-default/src/radio.css
View file @ 631afa92
...@@ -24,6 +24,54 @@ ...@@ -24,6 +24,54 @@
line-height: 1; line-height: 1;
position: relative; position: relative;
vertical-align: middle; 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 { @e inner {
border: var(--radio-input-border); border: var(--radio-input-border);
...@@ -34,7 +82,7 @@ ...@@ -34,7 +82,7 @@
display: inline-block; display: inline-block;
box-sizing: border-box; box-sizing: border-box;
&:not(.is-disabled):hover { &:hover {
border-color: var(--radio-input-border-color-hover); border-color: var(--radio-input-border-color-hover);
} }
...@@ -47,43 +95,6 @@ ...@@ -47,43 +95,6 @@
transform: translate(-50%, -50%) scale(0); transform: translate(-50%, -50%) scale(0);
transition: transform .15s cubic-bezier(.71,-.46,.88,.6); 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 { @e original {
......
test/unit/specs/table.spec.js
View file @ 631afa92
...@@ -843,12 +843,12 @@ describe('Table', () => { ...@@ -843,12 +843,12 @@ describe('Table', () => {
vm.$el.querySelectorAll('.el-checkbox')[1].click(); vm.$el.querySelectorAll('.el-checkbox')[1].click();
setTimeout(_ => { 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 // go to second page
vm.testData = getData(1); vm.testData = getData(1);
setTimeout(_ => { setTimeout(_ => {
// expect no checked // 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 // click first checkbox
vm.$el.querySelectorAll('.el-checkbox')[1].click(); vm.$el.querySelectorAll('.el-checkbox')[1].click();
vm.$el.querySelectorAll('.el-checkbox')[2].click(); vm.$el.querySelectorAll('.el-checkbox')[2].click();
...@@ -856,11 +856,11 @@ describe('Table', () => { ...@@ -856,11 +856,11 @@ describe('Table', () => {
// back first page // back first page
vm.testData = getData(); vm.testData = getData();
setTimeout(_ => { 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 // clear
vm.$refs.table.clearSelection(); vm.$refs.table.clearSelection();
setTimeout(_ => { 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); destroyVM(vm);
done(); done();
}, DELAY); }, DELAY);
......
Markdown is supported
0% or
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment