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

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

pull/1898/head
baiyaaaaa 2016-12-23 00:55:24 +08:00 committed by cinwell.li
parent f414049311
commit 631afa92ca
5 changed files with 145 additions and 122 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

18
packages/checkbox/src/checkbox.vue
View File

@ -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"

9
packages/radio/src/radio.vue
View File

@ -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"

145
packages/theme-default/src/checkbox.css
View File

@ -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 {

87
packages/theme-default/src/radio.css
View File

@ -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 {

8
test/unit/specs/table.spec.js
View File

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