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

6
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"
<span class="el-checkbox__input"
:class="{
'is-disabled': disabled,
'is-checked': isChecked,
'is-indeterminate': indeterminate,
'is-focus': focus
}"
></span>
>
<span class="el-checkbox__inner"></span>
<input
v-if="trueLabel || falseLabel"
class="el-checkbox__original"

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

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

@ -19,39 +19,9 @@
line-height: 1;
position: relative;
vertical-align: middle;
}
@e inner {
display: inline-block;
position: relative;
border: var(--checkbox-input-border);
border-radius: var(--checkbox-input-border-radius);
box-sizing: border-box;
rect: var(--checkbox-input-width) var(--checkbox-input-height) var(--checkbox-input-fill);
z-index: var(--index-normal);
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 {
border-color: var(--checkbox-input-border-color-hover);
}
&::after {
box-sizing: content-box;
content: "";
border: 2px solid var(--checkbox-checked-icon-color);
border-left: 0;
border-top: 0;
height: 8px;
left: 5px;
position: absolute;
top: 1px;
transform: rotate(45deg) scaleY(0);
width: 4px;
transition: transform .15s cubic-bezier(.71,-.46,.88,.6) .05s;
transform-origin: center;
}
@when disabled {
.el-checkbox__inner {
background-color: var(--checkbox-disabled-input-fill);
border-color: var(--checkbox-disabled-input-border-color);
cursor: not-allowed;
@ -65,21 +35,8 @@
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 {
&.is-checked {
.el-checkbox__inner {
background-color: var(--checkbox-disabled-checked-input-fill);
border-color: var(--checkbox-disabled-checked-input-border-color);
@ -87,8 +44,39 @@
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);
@ -107,15 +95,38 @@
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 inner {
display: inline-block;
position: relative;
border: var(--checkbox-input-border);
border-radius: var(--checkbox-input-border-radius);
box-sizing: border-box;
rect: var(--checkbox-input-width) var(--checkbox-input-height) var(--checkbox-input-fill);
z-index: var(--index-normal);
transition: border-color .25s cubic-bezier(.71,-.46,.29,1.46),
background-color .25s cubic-bezier(.71,-.46,.29,1.46);
&:hover {
border-color: var(--checkbox-input-border-color-hover);
}
&::after {
box-sizing: content-box;
content: "";
border: 2px solid var(--checkbox-checked-icon-color);
border-left: 0;
border-top: 0;
height: 8px;
left: 5px;
position: absolute;
top: 1px;
transform: rotate(45deg) scaleY(0);
width: 4px;
transition: transform .15s cubic-bezier(.71,-.46,.88,.6) .05s;
transform-origin: center;
}
}
@e original {

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

@ -24,31 +24,9 @@
line-height: 1;
position: relative;
vertical-align: middle;
}
@e inner {
border: var(--radio-input-border);
border-radius: var(--radio-input-border-radius);
circle: var(--radio-input-width) var(--radio-input-fill);
position: relative;
cursor: pointer;
display: inline-block;
box-sizing: border-box;
&:not(.is-disabled):hover {
border-color: var(--radio-input-border-color-hover);
}
&::after {
circle: 6px #fff;
content: "";
position: absolute;
left: 50%;
top: 50%;
transform: translate(-50%, -50%) scale(0);
transition: transform .15s cubic-bezier(.71,-.46,.88,.6);
}
@when disabled {
.el-radio__inner {
background-color: var(--radio-disabled-input-fill);
border-color: var(--radio-disabled-input-border-color);
cursor: not-allowed;
@ -62,8 +40,24 @@
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);
@ -71,18 +65,35 @@
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);
border-radius: var(--radio-input-border-radius);
circle: var(--radio-input-width) var(--radio-input-fill);
position: relative;
cursor: pointer;
display: inline-block;
box-sizing: border-box;
&:hover {
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);
}
circle: 6px #fff;
content: "";
position: absolute;
left: 50%;
top: 50%;
transform: translate(-50%, -50%) scale(0);
transition: transform .15s cubic-bezier(.71,-.46,.88,.6);
}
}

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