test/element
1
0
Fork 0
mirror of https://gitee.com/ElemeFE/element.git synced 2024-11-30 11:17:38 +08:00
Code Issues Actions Packages Projects Releases Wiki Activity

update Select and Cascader chalk theme

Browse Source
This commit is contained in:
Leopoldthecoder 2017-09-21 11:50:56 +08:00 committed by 杨奕
parent 31b9429edf
commit cb1d6bebe4
8 changed files with 36 additions and 49 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

5
packages/cascader/src/main.vue
View File

@ -63,6 +63,7 @@ import emitter from 'element-ui/src/mixins/emitter';
import Locale from 'element-ui/src/mixins/locale';
import { t } from 'element-ui/src/locale';
import debounce from 'throttle-debounce/debounce';
import merge from 'element-ui/src/utils/merge';
const popperMixin = {
props: {
@ -76,7 +77,9 @@ const popperMixin = {
popperOptions: Popper.props.popperOptions
},
methods: Popper.methods,
data: Popper.data,
data() {
return merge({ visibleArrow: true }, Popper.data);
},
beforeDestroy: Popper.beforeDestroy
};

10
packages/theme-chalk/src/cascader.scss
View File

@ -92,8 +92,7 @@
border-radius: $--border-radius-small;
box-shadow: $--select-dropdown-shadow;
&.el-popper[x-placement^="bottom"] .popper__arrow {
// dont do that, bro dont do that
&.el-popper .popper__arrow {
left: 24px !important;
}
}
@ -155,12 +154,7 @@
}
@include when(active) {
color: $--color-white;
background-color: $--select-option-selected;
&:hover {
background-color: $--select-option-selected-hover;
}
color: $--select-option-selected;
}
&:hover {

15
packages/theme-chalk/src/common/var.scss
View File

@ -220,7 +220,7 @@ $--select-option-disabled-background: $--color-white;
$--select-option-height: 34px;
$--select-option-hover-background: $--background-color-base;
$--select-option-selected: $--color-primary;
$--select-option-selected-hover: mix($--color-primary, black, 95%);
$--select-option-selected-hover: $--background-color-base;
$--select-group-color: $--color-info;
$--select-group-height: 30px;
@ -601,15 +601,14 @@ $--rate-icon-color: $--color-text-placeholder;
/* DatePicker
--------------------------*/
$--datepicker-color: $--link-color;
$--datepicker-off-color: #ddd;
$--datepicker-header-color: $--border-color-hover;
$--datepicker-icon-color: $--color-text-secondary;
$--datepicker-color: $--color-text-regular;
$--datepicker-off-color: $--color-text-placeholder;
$--datepicker-header-color: $--color-text-regular;
$--datepicker-icon-color: $--color-text-primary;
$--datepicker-border-color: $--disabled-border-base;
$--datepicker-inner-border-color: #e4e4e4;
$--datepicker-cell-hover-color: $--color-text-secondary;
$--datepicker-inrange-color: tint($--color-primary, 0.8);
$--datepicker-inrange-hover-color: tint($--color-primary, 0.64);
$--datepicker-inrange-color: $--border-color-extra-light;
$--datepicker-inrange-hover-color: $--border-color-extra-light;
$--datepicker-active-color: $--color-primary;
$--datepicker-text-hover-color: $--color-primary;

7
packages/theme-chalk/src/option.scss
View File

@ -29,12 +29,7 @@
}
&.selected {
color: $--color-white;
background-color: $--select-option-selected;
&.hover {
background-color: $--select-option-selected-hover;
}
color: $--select-option-selected;
}
& span {

4
packages/theme-chalk/src/select-dropdown.scss
View File

@ -36,8 +36,8 @@
padding: 0;
}
&[x-placement^="bottom"] .popper__arrow {
left: 10% !important;
& .popper__arrow {
left: 24px !important;
}
}

4
packages/theme-chalk/src/select.scss
View File

@ -107,10 +107,6 @@
z-index: $--index-normal;
top: 50%;
transform: translateY(-50%);
.el-tag {
}
}
& .el-tag__close {

38
test/unit/specs/cascader.spec.js
View File

@ -64,17 +64,17 @@ describe('Cascader', () => {
item1.click();
menu.$nextTick(_ => {
expect(menuElm.children.length).to.be.equal(2);
expect(menuElm.children.length).to.be.equal(3); // two menus and an arrow
expect(item1.classList.contains('is-active')).to.be.true;
const item2 = menuElm.children[1].querySelector('.el-cascader-menu__item');
const item2 = menuElm.children[2].querySelector('.el-cascader-menu__item');
item2.click();
menu.$nextTick(_ => {
expect(menuElm.children.length).to.be.equal(3);
expect(menuElm.children.length).to.be.equal(4);
expect(item2.classList.contains('is-active')).to.be.true;
const item3 = menuElm.children[2].querySelector('.el-cascader-menu__item');
const item3 = menuElm.children[3].querySelector('.el-cascader-menu__item');
item3.click();
setTimeout(_ => {
@ -155,17 +155,17 @@ describe('Cascader', () => {
item1.click();
menu.$nextTick(_ => {
expect(menuElm.children.length).to.be.equal(2);
expect(menuElm.children.length).to.be.equal(3);
expect(item1.classList.contains('is-active')).to.be.true;
const item2 = menuElm.children[1].querySelector('.el-cascader-menu__item');
const item2 = menuElm.children[2].querySelector('.el-cascader-menu__item');
item2.click();
menu.$nextTick(_ => {
expect(menuElm.children.length).to.be.equal(3);
expect(menuElm.children.length).to.be.equal(4);
expect(item2.classList.contains('is-active')).to.be.true;
const item3 = menuElm.children[2].querySelector('.el-cascader-menu__item');
const item3 = menuElm.children[3].querySelector('.el-cascader-menu__item');
item3.click();
setTimeout(_ => {
@ -299,7 +299,7 @@ describe('Cascader', () => {
item1.click();
menu.$nextTick(_ => {
expect(menuElm.children.length).to.be.equal(1);
expect(menuElm.children.length).to.be.equal(2);
expect(item1.classList.contains('is-active')).to.be.false;
done();
});
@ -362,7 +362,7 @@ describe('Cascader', () => {
const item2 = menuElm.children[1].querySelector('.el-cascader-menu__item');
const item3 = menuElm.children[2].querySelector('.el-cascader-menu__item');
expect(menuElm.children.length).to.be.equal(3);
expect(menuElm.children.length).to.be.equal(4);
expect(item1.classList.contains('is-active')).to.be.true;
expect(item2.classList.contains('is-active')).to.be.true;
expect(item3.classList.contains('is-active')).to.be.true;
@ -432,17 +432,17 @@ describe('Cascader', () => {
triggerEvent(item1, 'mouseenter');
menu.$nextTick(_ => {
expect(menuElm.children.length).to.be.equal(2);
expect(menuElm.children.length).to.be.equal(3);
expect(item1.classList.contains('is-active')).to.be.true;
const item2 = menuElm.children[1].querySelector('.el-cascader-menu__item');
const item2 = menuElm.children[2].querySelector('.el-cascader-menu__item');
triggerEvent(item2, 'mouseenter');
menu.$nextTick(_ => {
expect(menuElm.children.length).to.be.equal(3);
expect(menuElm.children.length).to.be.equal(4);
expect(item2.classList.contains('is-active')).to.be.true;
const item3 = menuElm.children[2].querySelector('.el-cascader-menu__item');
const item3 = menuElm.children[3].querySelector('.el-cascader-menu__item');
item3.click();
setTimeout(_ => {
@ -514,19 +514,19 @@ describe('Cascader', () => {
item1.click();
menu.$nextTick(_ => {
expect(menuElm.children.length).to.be.equal(2);
expect(menuElm.children.length).to.be.equal(3);
expect(item1.classList.contains('is-active')).to.be.true;
expect(vm.selectedOptions[0]).to.be.equal('zhejiang');
const item2 = menuElm.children[1].querySelector('.el-cascader-menu__item');
const item2 = menuElm.children[2].querySelector('.el-cascader-menu__item');
item2.click();
menu.$nextTick(_ => {
expect(menuElm.children.length).to.be.equal(3);
expect(menuElm.children.length).to.be.equal(4);
expect(item2.classList.contains('is-active')).to.be.true;
expect(vm.selectedOptions[1]).to.be.equal('hangzhou');
const item3 = menuElm.children[2].querySelector('.el-cascader-menu__item');
const item3 = menuElm.children[3].querySelector('.el-cascader-menu__item');
item3.click();
setTimeout(_ => {
@ -599,7 +599,7 @@ describe('Cascader', () => {
const menuElm = menu.$el;
const item1 = menuElm.querySelector('.el-cascader-menu__item');
expect(menuElm.children.length).to.be.equal(1);
expect(menuElm.children.length).to.be.equal(2);
expect(menuElm.children[0].children.length).to.be.equal(3);
item1.click();

2
test/unit/specs/color-picker.spec.js
View File

@ -232,7 +232,7 @@ describe('ColorPicker', () => {
alphaBar.__vue__.handleClick({ target: null, clientX: 50, clientY: 0 });
vm.$nextTick(() => {
const picker = vm.$children[0];
expect(picker.color._alpha < 1).to.true;
expect(picker.color._alpha < 100).to.true;
done();
});
}, ANIMATION_TIME);