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

fix masses style

pull/635/head
baiyaaaaa 2016-10-25 11:33:39 +08:00 committed by cinwell.li
parent c2a90a4eb3
commit 06b2cabf6b
20 changed files with 103 additions and 107 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

2
examples/docs/zh-cn/badge.md
View File

@ -23,7 +23,7 @@
<el-dropdown trigger="click"> <el-dropdown trigger="click">
<span class="el-dropdown-link"> <span class="el-dropdown-link">
点我查看<i class="el-icon-caret-bottom el-icon-right"></i> 点我查看<i class="el-icon-caret-bottom el-icon--right"></i>
</span> </span>
<el-dropdown-menu slot="dropdown"> <el-dropdown-menu slot="dropdown">
<el-dropdown-item class="clearfix"> <el-dropdown-item class="clearfix">

8
examples/docs/zh-cn/button.md
View File

@ -35,6 +35,10 @@
.el-button + .el-button { .el-button + .el-button {
margin-left: 0; margin-left: 0;
} }
& + .el-button-group {
margin-left: 10px;
}
} }
} }
@ -131,7 +135,7 @@
<el-button type="primary" icon="share"></el-button> <el-button type="primary" icon="share"></el-button>
<el-button type="primary" icon="delete"></el-button> <el-button type="primary" icon="delete"></el-button>
<el-button type="primary" icon="search">搜索</el-button> <el-button type="primary" icon="search">搜索</el-button>
<el-button type="primary">上传<i class="el-icon-upload el-icon-right"></i></el-button> <el-button type="primary">上传<i class="el-icon-upload el-icon--right"></i></el-button>
``` ```
::: :::
@ -144,7 +148,7 @@
```html ```html
<el-button-group> <el-button-group>
<el-button type="primary" icon="arrow-left">上一页</el-button> <el-button type="primary" icon="arrow-left">上一页</el-button>
<el-button type="primary">下一页<i class="el-icon-arrow-right el-icon-right"></i></el-button> <el-button type="primary">下一页<i class="el-icon-arrow-right el-icon--right"></i></el-button>
</el-button-group> </el-button-group>
<el-button-group> <el-button-group>
<el-button type="primary" icon="edit"></el-button> <el-button type="primary" icon="edit"></el-button>

8
examples/docs/zh-cn/dropdown.md
View File

@ -60,7 +60,7 @@
```html ```html
<el-dropdown> <el-dropdown>
<span class="el-dropdown-link"> <span class="el-dropdown-link">
下拉菜单<i class="el-icon-caret-bottom el-icon-right"></i> 下拉菜单<i class="el-icon-caret-bottom el-icon--right"></i>
</span> </span>
<el-dropdown-menu slot="dropdown"> <el-dropdown-menu slot="dropdown">
<el-dropdown-item>黄金糕</el-dropdown-item> <el-dropdown-item>黄金糕</el-dropdown-item>
@ -82,7 +82,7 @@
```html ```html
<el-dropdown> <el-dropdown>
<el-button type="primary"> <el-button type="primary">
更多菜单<i class="el-icon-caret-bottom el-icon-right"></i> 更多菜单<i class="el-icon-caret-bottom el-icon--right"></i>
</el-button> </el-button>
<el-dropdown-menu slot="dropdown"> <el-dropdown-menu slot="dropdown">
<el-dropdown-item>黄金糕</el-dropdown-item> <el-dropdown-item>黄金糕</el-dropdown-item>
@ -117,7 +117,7 @@
<span class="demonstration">hover 激活</span> <span class="demonstration">hover 激活</span>
<el-dropdown> <el-dropdown>
<span class="el-dropdown-link"> <span class="el-dropdown-link">
下拉菜单<i class="el-icon-caret-bottom el-icon-right"></i> 下拉菜单<i class="el-icon-caret-bottom el-icon--right"></i>
</span> </span>
<el-dropdown-menu slot="dropdown"> <el-dropdown-menu slot="dropdown">
<el-dropdown-item>黄金糕</el-dropdown-item> <el-dropdown-item>黄金糕</el-dropdown-item>
@ -132,7 +132,7 @@
<span class="demonstration">click 激活</span> <span class="demonstration">click 激活</span>
<el-dropdown trigger="click"> <el-dropdown trigger="click">
<span class="el-dropdown-link"> <span class="el-dropdown-link">
下拉菜单<i class="el-icon-caret-bottom el-icon-right"></i> 下拉菜单<i class="el-icon-caret-bottom el-icon--right"></i>
</span> </span>
<el-dropdown-menu slot="dropdown"> <el-dropdown-menu slot="dropdown">
<el-dropdown-item>黄金糕</el-dropdown-item> <el-dropdown-item>黄金糕</el-dropdown-item>

2
examples/docs/zh-cn/progress.md
View File

@ -20,7 +20,7 @@
```html ```html
<el-progress :percentage="0"></el-progress> <el-progress :percentage="0"></el-progress>
<el-progress :percentage="70" :show-text="false"></el-progress> <el-progress :percentage="70"></el-progress>
<el-progress :percentage="100" status="success"></el-progress> <el-progress :percentage="100" status="success"></el-progress>
<el-progress :percentage="50" status="exception"></el-progress> <el-progress :percentage="50" status="exception"></el-progress>
``` ```

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

@ -2,8 +2,8 @@
<button :disabled="disabled" class="el-button" <button :disabled="disabled" class="el-button"
:type="nativeType" :type="nativeType"
:class="[ :class="[
type ? 'el-button-' + type : '', type ? 'el-button--' + type : '',
size ? 'el-button-' + size : '', size ? 'el-button--' + size : '',
{ {
'is-disabled': disabled, 'is-disabled': disabled,
'is-loading': loading, 'is-loading': loading,
@ -13,13 +13,10 @@
> >
<i class="el-icon-loading" v-if="loading"></i> <i class="el-icon-loading" v-if="loading"></i>
<i :class="'el-icon-' + icon" v-if="icon && !loading"></i> <i :class="'el-icon-' + icon" v-if="icon && !loading"></i>
<slot></slot> <span v-if="$slots.default"><slot></slot></span>
</button> </button>
</template> </template>
<script> <script>
/**
* button
*/
export default { export default {
name: 'ElButton', name: 'ElButton',

2
packages/input-number/src/input-number.vue
View File

@ -1,7 +1,7 @@
<template> <template>
<div class="el-input-number" <div class="el-input-number"
:class="[ :class="[
size ? 'is-' + size : '', size ? 'el-input-number--' + size : '',
{ 'is-disabled': disabled } { 'is-disabled': disabled }
]" ]"
> >

2
packages/input/src/input.vue
View File

@ -1,7 +1,7 @@
<template> <template>
<div :class="[ <div :class="[
type === 'textarea' ? 'el-textarea' : 'el-input', type === 'textarea' ? 'el-textarea' : 'el-input',
size ? 'el-input-' + size : '', size ? 'el-input--' + size : '',
{ {
'is-disabled': disabled, 'is-disabled': disabled,
'el-input-group': $slots.prepend || $slots.append 'el-input-group': $slots.prepend || $slots.append

6
packages/message-box/src/main.vue
View File

@ -16,7 +16,7 @@
</div> </div>
<div class="el-message-box__btns"> <div class="el-message-box__btns">
<el-button :class="[ cancelButtonClasses ]" v-show="showCancelButton" @click.native="handleAction('cancel')">{{ cancelButtonText }}</el-button> <el-button :class="[ cancelButtonClasses ]" v-show="showCancelButton" @click.native="handleAction('cancel')">{{ cancelButtonText }}</el-button>
<el-button :class="[ confirmButtonClasses ]" v-show="showConfirmButton" @click.native="handleAction('confirm')" type="primary">{{ confirmButtonText }}</el-button> <el-button :class="[ confirmButtonClasses ]" v-show="showConfirmButton" @click.native="handleAction('confirm')">{{ confirmButtonText }}</el-button>
</div> </div>
</div> </div>
</transition> </transition>
@ -71,10 +71,10 @@
}, },
confirmButtonClasses() { confirmButtonClasses() {
return `el-button el-button-primary ${ this.confirmButtonClass }`; return `el-button--primary ${ this.confirmButtonClass }`;
}, },
cancelButtonClasses() { cancelButtonClasses() {
return `el-button el-button-default ${ this.cancelButtonClass }`; return `${ this.cancelButtonClass }`;
} }
}, },

2
packages/radio/src/radio-button.vue
View File

@ -32,7 +32,7 @@
<label <label
class="el-radio-button" class="el-radio-button"
:class="[ :class="[
size ? 'el-radio-button-' + size : '', size ? 'el-radio-button--' + size : '',
{ 'is-active': value === label } { 'is-active': value === label }
]" ]"
> >

70
packages/theme-default/src/button.css
View File

@ -97,44 +97,42 @@
background-color: rgba(255,255,255,.35); background-color: rgba(255,255,255,.35);
} }
} }
} @m primary {
@mixin button-variant var(--button-primary-color), var(--button-primary-fill), var(--button-primary-border);
@b button-primary {
@mixin button-variant var(--button-primary-color), var(--button-primary-fill), var(--button-primary-border);
}
@b button-success {
@mixin button-variant var(--button-success-color), var(--button-success-fill), var(--button-success-border);
}
@b button-warning {
@mixin button-variant var(--button-warning-color), var(--button-warning-fill), var(--button-warning-border);
}
@b button-danger {
@mixin button-variant var(--button-danger-color), var(--button-danger-fill), var(--button-danger-border);
}
@b button-info {
@mixin button-variant var(--button-info-color), var(--button-info-fill), var(--button-info-border);
}
@b button-text {
border: none;
color: var(--color-primary);
background: transparent;
&:hover {
color: tint(var(--color-primary), var(--button-hover-tint-percent));
} }
&:active { @m success {
color: shade(var(--color-primary), var(--button-active-shade-percent)); @mixin button-variant var(--button-success-color), var(--button-success-fill), var(--button-success-border);
} }
} @m warning {
@mixin button-variant var(--button-warning-color), var(--button-warning-fill), var(--button-warning-border);
}
@m danger {
@mixin button-variant var(--button-danger-color), var(--button-danger-fill), var(--button-danger-border);
}
@m info {
@mixin button-variant var(--button-info-color), var(--button-info-fill), var(--button-info-border);
}
@m text {
border: none;
color: var(--color-primary);
background: transparent;
@b button-large { &:hover {
@mixin button-size var(--button-large-padding-vertical), var(--button-large-padding-horizontal), var(--button-large-font-size), var(--button-border-radius); color: tint(var(--color-primary), var(--button-hover-tint-percent));
} }
@b button-small { &:active {
@mixin button-size var(--button-small-padding-vertical), var(--button-small-padding-horizontal), var(--button-small-font-size), var(--button-border-radius); color: shade(var(--color-primary), var(--button-active-shade-percent));
} }
@b button-mini { }
@mixin button-size var(--button-mini-padding-vertical), var(--button-mini-padding-horizontal), var(--button-mini-font-size), var(--button-border-radius); @m large {
@mixin button-size var(--button-large-padding-vertical), var(--button-large-padding-horizontal), var(--button-large-font-size), var(--button-border-radius);
}
@m small {
@mixin button-size var(--button-small-padding-vertical), var(--button-small-padding-horizontal), var(--button-small-font-size), var(--button-border-radius);
}
@m mini {
@mixin button-size var(--button-mini-padding-vertical), var(--button-mini-padding-horizontal), var(--button-mini-font-size), var(--button-border-radius);
}
} }
@b button-group { @b button-group {
@ -171,7 +169,7 @@
} }
@each $type in (primary, success, warning, danger, info) { @each $type in (primary, success, warning, danger, info) {
.el-button-$type { .el-button--$type {
&:first-child { &:first-child {
border-right-color: rgba(#fff, 0.5); border-right-color: rgba(#fff, 0.5);
} }

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

@ -129,5 +129,9 @@
font-size: var(--checkbox-font-size); font-size: var(--checkbox-font-size);
padding-left: 5px; padding-left: 5px;
} }
& + .el-checkbox {
margin-left: 15px;
}
} }
} }

2
packages/theme-default/src/dropdown.css
View File

@ -57,7 +57,7 @@
margin: 0 3px; margin: 0 3px;
} }
@m text { @m text {
.el-button-text { .el-button--text {
padding: 0; padding: 0;
} }
} }

4
packages/theme-default/src/icon.css
View File

@ -69,10 +69,10 @@
animation: rotating 1s linear infinite; animation: rotating 1s linear infinite;
} }
.el-icon-right { .el-icon--right {
margin-left: 5px; margin-left: 5px;
} }
.el-icon-left { .el-icon--left {
margin-right: 5px; margin-right: 5px;
} }

4
packages/theme-default/src/input-number.css
View File

@ -51,7 +51,7 @@
} }
} }
} }
@when large { @m large {
width: 200px; width: 200px;
& .el-input-number__increase, .el-input-number__decrease { & .el-input-number__increase, .el-input-number__decrease {
@ -63,7 +63,7 @@
right: calc(var(--input-large-height) + 1px); right: calc(var(--input-large-height) + 1px);
} }
} }
@when small { @m small {
width: 130px; width: 130px;
& .el-input-number__increase, .el-input-number__decrease { & .el-input-number__increase, .el-input-number__decrease {

31
packages/theme-default/src/input.css
View File

@ -78,27 +78,26 @@
.el-icon-loading { .el-icon-loading {
animation: validating-rotating 1s linear infinite; animation: validating-rotating 1s linear infinite;
} }
} @m large {
font-size: var(--input-large-font-size);
@b input-large { & .el-input__inner {
font-size: var(--input-large-font-size); height: var(--input-large-height);
}
& .el-input__inner {
height: var(--input-large-height);
} }
} @m small {
@b input-small { font-size: var(--input-small-font-size);
font-size: var(--input-small-font-size);
& .el-input__inner { & .el-input__inner {
height: var(--input-small-height); height: var(--input-small-height);
}
} }
} @m mini {
@b input-mini { font-size: var(--input-mini-font-size);
font-size: var(--input-mini-font-size);
& .el-input__inner { & .el-input__inner {
height: var(--input-mini-height); height: var(--input-mini-height);
}
} }
} }

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

@ -13,7 +13,7 @@
@utils-user-select none; @utils-user-select none;
& + .el-radio { & + .el-radio {
margin-left: 30px; margin-left: 15px;
} }
@e input { @e input {
@ -143,13 +143,6 @@
color: var(--color-primary); color: var(--color-primary);
} }
& .el-icon-right {
margin-left: 5px;
}
& .el-icon-left {
margin-right: 5px;
}
& [class*="el-icon-"] { & [class*="el-icon-"] {
line-height: 0.9; line-height: 0.9;
@ -199,20 +192,20 @@
border-radius: 0 var(--border-radius-base) var(--border-radius-base) 0; border-radius: 0 var(--border-radius-base) var(--border-radius-base) 0;
} }
} }
} @m large {
@b radio-button-large { & .el-radio-button__inner {
& .el-radio-button__inner { @mixin button-size var(--button-large-padding-vertical), var(--button-large-padding-horizontal), var(--button-large-font-size), 0;
@mixin button-size var(--button-large-padding-vertical), var(--button-large-padding-horizontal), var(--button-large-font-size), 0; }
} }
} @m small {
@b radio-button-small { & .el-radio-button__inner {
& .el-radio-button__inner { @mixin button-size var(--button-small-padding-vertical), var(--button-small-padding-horizontal), var(--button-small-font-size), 0;
@mixin button-size var(--button-small-padding-vertical), var(--button-small-padding-horizontal), var(--button-small-font-size), 0; }
} }
} @m mini {
@b radio-button-mini { & .el-radio-button__inner {
& .el-radio-button__inner { @mixin button-size var(--button-mini-padding-vertical), var(--button-mini-padding-horizontal), var(--button-mini-font-size), 0;
@mixin button-size var(--button-mini-padding-vertical), var(--button-mini-padding-horizontal), var(--button-mini-font-size), 0; }
} }
} }
} }

9
packages/theme-default/src/tree.css
View File

@ -16,11 +16,12 @@
height: 36px; height: 36px;
cursor: pointer; cursor: pointer;
& > input { & > .el-checkbox,
vertical-align: middle; & > .el-tree-node__expand-icon {
margin-right: 8px;
} }
& > * { & > .el-checkbox {
margin-right: 3px; vertical-align: middle;
} }
&:hover { &:hover {
background: #e5e9f2; background: #e5e9f2;

4
test/unit/specs/button.spec.js
View File

@ -7,7 +7,7 @@ describe('Button', () => {
type: 'primary' type: 'primary'
}, true); }, true);
let buttonElm = vm.$el; let buttonElm = vm.$el;
expect(buttonElm.classList.contains('el-button-primary')).to.be.true; expect(buttonElm.classList.contains('el-button--primary')).to.be.true;
}); });
it('icon', () => { it('icon', () => {
const vm = createTest(Button, { const vm = createTest(Button, {
@ -43,7 +43,7 @@ describe('Button', () => {
size: 'large' size: 'large'
}, true); }, true);
let buttonElm = vm.$el; let buttonElm = vm.$el;
expect(buttonElm.classList.contains('el-button-large')).to.be.true; expect(buttonElm.classList.contains('el-button--large')).to.be.true;
}); });
it('plain', () => { it('plain', () => {
const vm = createTest(Button, { const vm = createTest(Button, {

2
test/unit/specs/input.spec.js
View File

@ -76,7 +76,7 @@ describe('Input', () => {
` `
}, true); }, true);
expect(vm.$el.classList.contains('el-input-large')).to.true; expect(vm.$el.classList.contains('el-input--large')).to.true;
}); });
it('type', () => { it('type', () => {

6
test/unit/specs/message-box.spec.js
View File

@ -72,7 +72,7 @@ describe('MessageBox', () => {
}); });
setTimeout(() => { setTimeout(() => {
document.querySelector('.el-message-box__wrapper') document.querySelector('.el-message-box__wrapper')
.querySelector('.el-button-primary').click(); .querySelector('.el-button--primary').click();
expect(document.querySelector('.el-message-box__wrapper') expect(document.querySelector('.el-message-box__wrapper')
.__vue__.value).to.false; .__vue__.value).to.false;
done(); done();
@ -163,7 +163,7 @@ describe('MessageBox', () => {
}); });
setTimeout(() => { setTimeout(() => {
document.querySelector('.el-message-box__wrapper') document.querySelector('.el-message-box__wrapper')
.querySelector('.el-button-primary').click(); .querySelector('.el-button--primary').click();
}, 300); }, 300);
}); });
@ -175,7 +175,7 @@ describe('MessageBox', () => {
}); });
setTimeout(() => { setTimeout(() => {
document.querySelector('.el-message-box__wrapper') document.querySelector('.el-message-box__wrapper')
.querySelector('.el-button-default').click(); .querySelector('.el-button').click();
}, 300); }, 300);
}); });
}); });