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
Show whitespace changes
Inline Side-by-side
Showing with 145 additions and 122 deletions
packages/checkbox/src/checkbox.vue
View file @ 631afa92
<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"
......
packages/radio/src/radio.vue
View file @ 631afa92
<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"
......
packages/theme-default/src/checkbox.css
View file @ 631afa92
......@@ -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,8 +35,33 @@
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);
......@@ -74,21 +69,14 @@
transform: rotate(45deg) scaleY(1);
}
}
}
@when focus {
.el-checkbox__inner {
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 {
.el-checkbox__inner {
background-color: var(--checkbox-checked-input-fill);
border-color: var(--checkbox-checked-input-border-color);
......@@ -107,14 +95,37 @@
display: none;
}
}
}
}
@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);
&.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);
&: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;
}
}
......
packages/theme-default/src/radio.css
View file @ 631afa92
......@@ -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;
&.is-disabled.is-checked {
background-color: var(--radio-disabled-checked-input-fill);
border-color: var(--radio-disabled-checked-input-border-color);
&:hover {
border-color: var(--radio-input-border-color-hover);
}
&::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);
}
}
......
test/unit/specs/table.spec.js
View file @ 631afa92
......@@ -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);
......
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