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

Breadcrumb: add chalk theme (#7203) 

* Breadcrumb: add chalk theme

* Breadcrumb: fix bugs

* fix pagination sizes' arrow
pull/7256/head
Black Wayne 2017-09-27 23:22:30 -05:00 committed by 杨奕
parent e768eca7a2
commit 8774311c76
21 changed files with 273 additions and 110 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

15
examples/docs/en-US/breadcrumb.md
View File

@ -17,10 +17,25 @@ Displays the location of the current page, making it easier to browser back.
``` ```
::: :::
### Icon separator
:::demo Set `separator-class` to use `iconfont` as the separator，it will cover `separator`
```html
<el-breadcrumb separator-class="el-icon-arrow-right">
<el-breadcrumb-item :to="{ path: '/' }">homepage</el-breadcrumb-item>
<el-breadcrumb-item>promotion management</el-breadcrumb-item>
<el-breadcrumb-item>promotion list</el-breadcrumb-item>
<el-breadcrumb-item>promotion detail</el-breadcrumb-item>
</el-breadcrumb>
```
:::
### Breadcrumb Attributes ### Breadcrumb Attributes
| Attribute | Description | Type | Accepted Values | Default| | Attribute | Description | Type | Accepted Values | Default|
|---------- |-------------- |---------- |-------------------------------- |-------- | |---------- |-------------- |---------- |-------------------------------- |-------- |
| separator | separator character | string | — | / | | separator | separator character | string | — | / |
| separator-class | iconfont-separator's class | string | — | - |
### Breadcrumb Item Attributes ### Breadcrumb Item Attributes
| Attribute | Description | Type | Accepted Values | Default| | Attribute | Description | Type | Accepted Values | Default|

2
examples/docs/en-US/button.md
View File

@ -166,7 +166,7 @@ Besides default size, Button component provides three additional sizes for you t
### Attributes ### Attributes
| Attribute | Description | Type | Accepted values | Default | | Attribute | Description | Type | Accepted values | Default |
|---------- |-------- |---------- |------------- |-------- | |---------- |-------- |---------- |------------- |-------- |
| size | button size | string | large / small / mini | — | | size | button size | string | medium / small / mini | — |
| type | button type | string | primary / success / warning / danger / info / text | — | | type | button type | string | primary / success / warning / danger / info / text | — |
| plain | determine whether it's a plain button | boolean | — | false | | plain | determine whether it's a plain button | boolean | — | false |
| round | determine whether it's a round button | boolean | — | false | | round | determine whether it's a round button | boolean | — | false |

36
examples/docs/en-US/tag.md
View File

@ -45,18 +45,14 @@
} }
.button-new-tag { .button-new-tag {
margin-left: 10px; margin-left: 10px;
height: 30px; height: 32px;
line-height: 28px; line-height: 30px;
padding: 0 *; padding: 0 *;
} }
.input-new-tag { .input-new-tag {
width: 90px; width: 90px;
margin-left: 10px; margin-left: 10px;
vertical-align: bottom; vertical-align: bottom;
.el-input__inner {
height: 30px;
}
} }
} }
</style> </style>
@ -80,7 +76,7 @@ Used for marking and selection.
### Removable Tag ### Removable Tag
:::demo `closable` attribute can be used to define a removable tag. It accepts a `Boolean`. By default the removal of Tag has a fading animation. If you don't want to use it, you can set the `close-transition` attribute, which accepts a `Boolean`, to `true`. `close` event triggers when Tag is removed. :::demo `closable` attribute can be used to define a removable tag. It accepts a `Boolean`. By default the removal of Tag has a fading animation. If you don't want to use it, you can set the `disable-transitions` attribute, which accepts a `Boolean`, to `true`. `close` event triggers when Tag is removed.
```html ```html
<el-tag <el-tag
@ -119,7 +115,7 @@ You can use the `close` event to add and remove tag dynamically.
:key="tag" :key="tag"
v-for="tag in dynamicTags" v-for="tag in dynamicTags"
closable closable
:close-transition="false" :disable-transitions="false"
@close="handleClose(tag)"> @close="handleClose(tag)">
{{tag}} {{tag}}
</el-tag> </el-tag>
@ -141,8 +137,8 @@ You can use the `close` event to add and remove tag dynamically.
} }
.button-new-tag { .button-new-tag {
margin-left: 10px; margin-left: 10px;
height: 30px; height: 32px;
line-height: 28px; line-height: 30px;
padding-top: 0; padding-top: 0;
padding-bottom: 0; padding-bottom: 0;
} }
@ -151,9 +147,6 @@ You can use the `close` event to add and remove tag dynamically.
margin-left: 10px; margin-left: 10px;
vertical-align: bottom; vertical-align: bottom;
} }
.el-input__inner {
height: 30px;
}
</style> </style>
<script> <script>
@ -191,14 +184,29 @@ You can use the `close` event to add and remove tag dynamically.
``` ```
::: :::
### Sizes
Besides default size, Tag component provides three additional sizes for you to choose among different scenarios.
:::demo Use attribute `size` to set additional sizes with `medium`, `small` or `mini`.
```html
<el-tag>Default</el-tag>
<el-tag size="medium">Medium</el-tag>
<el-tag size="small">Small</el-tag>
<el-tag size="mini">Mini</el-tag>
```
:::
### Attributes ### Attributes
| Attribute | Description | Type | Accepted Values | Default | | Attribute | Description | Type | Accepted Values | Default |
|---------- |-------------- |---------- |-------------------------------- |-------- | |---------- |-------------- |---------- |-------------------------------- |-------- |
| type | theme | string | success/info/warning/danger | — | | type | theme | string | success/info/warning/danger | — |
| closable | whether Tag can be removed | boolean | — | false | | closable | whether Tag can be removed | boolean | — | false |
| close-transition | whether to disable animations | boolean | — | false | | disable-transitions | whether to disable animations | boolean | — | false |
| hit | whether Tag has a highlighted border | boolean | — | false | | hit | whether Tag has a highlighted border | boolean | — | false |
| color | background color of the Tag | string | — | — | | color | background color of the Tag | string | — | — |
| size | tag size | string | medium / small / mini | — |
### Events ### Events

15
examples/docs/zh-CN/breadcrumb.md
View File

@ -17,10 +17,25 @@
``` ```
::: :::
### 图标分隔符
:::demo 通过设置 `separator-class` 可使用相应的 `iconfont` 作为分隔符，注意这将使 `separator` 设置失效
```html
<el-breadcrumb separator-class="el-icon-arrow-right">
<el-breadcrumb-item :to="{ path: '/' }">首页</el-breadcrumb-item>
<el-breadcrumb-item>活动管理</el-breadcrumb-item>
<el-breadcrumb-item>活动列表</el-breadcrumb-item>
<el-breadcrumb-item>活动详情</el-breadcrumb-item>
</el-breadcrumb>
```
:::
### Breadcrumb Attributes ### Breadcrumb Attributes
| 参数 | 说明 | 类型 | 可选值 | 默认值 | | 参数 | 说明 | 类型 | 可选值 | 默认值 |
|---------- |-------------- |---------- |-------------------------------- |-------- | |---------- |-------------- |---------- |-------------------------------- |-------- |
| separator | 分隔符 | string | — | 斜杠'/' | | separator | 分隔符 | string | — | 斜杠'/' |
| separator-class | 图标分隔符 class | string | — | - |
### Breadcrumb Item Attributes ### Breadcrumb Item Attributes
| 参数 | 说明 | 类型 | 可选值 | 默认值 | | 参数 | 说明 | 类型 | 可选值 | 默认值 |

38
examples/docs/zh-CN/tag.md
View File

@ -45,18 +45,14 @@
} }
.button-new-tag { .button-new-tag {
margin-left: 10px; margin-left: 10px;
height: 30px; height: 32px;
line-height: 28px; line-height: 30px;
padding: 0 *; padding: 0 *;
} }
.input-new-tag { .input-new-tag {
width: 90px; width: 90px;
margin-left: 10px; margin-left: 10px;
vertical-align: bottom; vertical-align: bottom;
.el-input__inner {
height: 30px;
}
} }
} }
</style> </style>
@ -80,7 +76,7 @@
### 可移除标签 ### 可移除标签
:::demo 设置`closable`属性可以定义一个标签是否可移除。默认的标签移除时会附带渐变动画，如果不想使用，可以设置`close-transition`属性，它接受一个`Boolean`，true 为关闭。 :::demo 设置`closable`属性可以定义一个标签是否可移除。默认的标签移除时会附带渐变动画，如果不想使用，可以设置`disable-transitions`属性，它接受一个`Boolean`，true 为关闭。
```html ```html
<el-tag <el-tag
@ -119,7 +115,7 @@
:key="tag" :key="tag"
v-for="tag in dynamicTags" v-for="tag in dynamicTags"
closable closable
:close-transition="false" :disable-transitions="false"
@close="handleClose(tag)"> @close="handleClose(tag)">
{{tag}} {{tag}}
</el-tag> </el-tag>
@ -128,7 +124,7 @@
v-if="inputVisible" v-if="inputVisible"
v-model="inputValue" v-model="inputValue"
ref="saveTagInput" ref="saveTagInput"
size="mini" size="small"
@keyup.enter.native="handleInputConfirm" @keyup.enter.native="handleInputConfirm"
@blur="handleInputConfirm" @blur="handleInputConfirm"
> >
@ -141,8 +137,8 @@
} }
.button-new-tag { .button-new-tag {
margin-left: 10px; margin-left: 10px;
height: 30px; height: 32px;
line-height: 28px; line-height: 30px;
padding-top: 0; padding-top: 0;
padding-bottom: 0; padding-bottom: 0;
} }
@ -151,9 +147,6 @@
margin-left: 10px; margin-left: 10px;
vertical-align: bottom; vertical-align: bottom;
} }
.el-input__inner {
height: 30px;
}
</style> </style>
<script> <script>
@ -191,14 +184,29 @@
``` ```
::: :::
### 不同尺寸
Tag 组件提供除了默认值以外的三种尺寸，可以在不同场景下选择合适的按钮尺寸。
:::demo 额外的尺寸：`medium`、`small`、`mini`，通过设置`size`属性来配置它们。
```html
<el-tag closable>默认标签</el-tag>
<el-tag size="medium" closable>中等标签</el-tag>
<el-tag size="small" closable>小型标签</el-tag>
<el-tag size="mini" closable>超小标签</el-tag>
```
:::
### Attributes ### Attributes
| 参数 | 说明 | 类型 | 可选值 | 默认值 | | 参数 | 说明 | 类型 | 可选值 | 默认值 |
|---------- |-------------- |---------- |-------------------------------- |-------- | |---------- |-------------- |---------- |-------------------------------- |-------- |
| type | 主题 | string | success/info/warning/danger | — | | type | 主题 | string | success/info/warning/danger | — |
| closable | 是否可关闭 | boolean | — | false | | closable | 是否可关闭 | boolean | — | false |
| close-transition | 是否禁用渐变动画 | boolean | — | false | | disable-transitions | 是否禁用渐变动画 | boolean | — | false |
| hit | 是否有边框描边 | boolean | — | false | | hit | 是否有边框描边 | boolean | — | false |
| color | 背景色 | string | — | — | | color | 背景色 | string | — | — |
| size | 尺寸 | string | medium / small / mini | — |
### Events ### Events

12
packages/breadcrumb/src/breadcrumb-item.vue
View File

@ -1,6 +1,10 @@
<template> <template>
<span class="el-breadcrumb__item"> <span class="el-breadcrumb__item">
<span class="el-breadcrumb__inner" ref="link" role="link"><slot></slot></span><span class="el-breadcrumb__separator" role="presentation">{{separator}}</span> <span class="el-breadcrumb__inner" ref="link" role="link">
<slot></slot>
</span>
<i v-if="separatorClass" class="el-breadcrumb__separator" :class="separatorClass"></i>
<span v-else class="el-breadcrumb__separator" role="presentation">{{separator}}</span>
</span> </span>
</template> </template>
<script> <script>
@ -12,12 +16,14 @@
}, },
data() { data() {
return { return {
separator: '' separator: '',
separatorClass: ''
}; };
}, },
mounted() { mounted() {
this.separator = this.$parent.separator; this.separator = this.$parent.separator;
var self = this; this.separatorClass = this.$parent.separatorClass;
let self = this;
if (this.to) { if (this.to) {
let link = this.$refs.link; let link = this.$refs.link;
link.setAttribute('role', 'link'); link.setAttribute('role', 'link');

4
packages/breadcrumb/src/breadcrumb.vue
View File

@ -11,6 +11,10 @@
separator: { separator: {
type: String, type: String,
default: '/' default: '/'
},
separatorClass: {
type: String,
default: ''
} }
}, },
mounted() { mounted() {

4
packages/pagination/src/pagination.js
View File

@ -162,13 +162,13 @@ export default {
<span class="el-pagination__sizes"> <span class="el-pagination__sizes">
<el-select <el-select
value={ this.$parent.internalPageSize } value={ this.$parent.internalPageSize }
popperClass={ this.$parent.popperClass } popperClass={ `${this.$parent.popperClass || ''} is-arrow-fixed` }
on-input={ this.handleChange }> on-input={ this.handleChange }>
{ {
this.pageSizes.map(item => this.pageSizes.map(item =>
<el-option <el-option
value={ item } value={ item }
label={ item + ' ' + this.t('el.pagination.pagesize') }> label={ item + this.t('el.pagination.pagesize') }>
</el-option> </el-option>
) )
} }

1
packages/select/src/select.vue
View File

@ -14,6 +14,7 @@
v-for="item in selected" v-for="item in selected"
:key="getValueKey(item)" :key="getValueKey(item)"
:closable="!disabled" :closable="!disabled"
size="small"
:hit="item.hitState" :hit="item.hitState"
type="info" type="info"
@close="deleteTag($event, item)" @close="deleteTag($event, item)"

13
packages/tag/src/tag.vue
View File

@ -1,8 +1,12 @@
<template> <template>
<transition :name="closeTransition ? '' : 'el-zoom-in-center'"> <transition :name="disableTransitions ? '' : 'el-zoom-in-center'">
<span <span
class="el-tag" class="el-tag"
:class="[type ? 'el-tag--' + type : '', {'is-hit': hit}]" :class="[
type ? 'el-tag--' + type : '',
size && `el-tag--${size}`,
{'is-hit': hit}
]"
:style="{backgroundColor: color}"> :style="{backgroundColor: color}">
<slot></slot> <slot></slot>
<i class="el-tag__close el-icon-close" <i class="el-tag__close el-icon-close"
@ -19,8 +23,9 @@
closable: Boolean, closable: Boolean,
type: String, type: String,
hit: Boolean, hit: Boolean,
closeTransition: Boolean, disableTransitions: Boolean,
color: String color: String,
size: String
}, },
methods: { methods: {
handleClose(event) { handleClose(event) {

22
packages/theme-chalk/src/breadcrumb.scss
View File

@ -3,21 +3,30 @@
@import "common/var"; @import "common/var";
@include b(breadcrumb) { @include b(breadcrumb) {
font-size: 13px; font-size: 14px;
line-height: 1; line-height: 1;
@include utils-clearfix; @include utils-clearfix;
@include e(separator) { @include e(separator) {
margin: 0 8px; margin: 0 9px;
color: $--color-black; font-weight: bold;
color: $--color-text-placeholder;
&[class*=el-icon] {
margin: 0 6px;
font-weight: normal;
transform: scale(.8);
} }
}
@include e(item) { @include e(item) {
float: left; float: left;
@include e(inner) { @include e(inner) {
&, & a { &, & a {
transition: color .15s linear; font-weight: bold;
color: $--color-black; transition: $--color-transition-base;
color: $--color-text-primary;
&:hover { &:hover {
color: $--color-primary; color: $--color-primary;
@ -30,7 +39,8 @@
.el-breadcrumb__inner, .el-breadcrumb__inner,
.el-breadcrumb__inner a { .el-breadcrumb__inner a {
&, &:hover { &, &:hover {
color: $--color-black; font-weight: normal;
color: $--font-color-base;
cursor: text; cursor: text;
} }
} }

3
packages/theme-chalk/src/color-picker.scss
View File

@ -323,11 +323,12 @@
@include e(icon) { @include e(icon) {
display: inline-block; display: inline-block;
position: absolute; position: absolute;
width: 100%;
top: 50%; top: 50%;
left: 50%; left: 50%;
transform: translate3d(-50%, -50%, 0) scale(0.8); transform: translate3d(-50%, -50%, 0) scale(0.8);
width: 12px;
color: $--color-white; color: $--color-white;
text-align: center;
font-size: 12px; font-size: 12px;
} }

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

@ -478,7 +478,7 @@ $--table-fixed-box-shadow: 0 0 10px rgba(0, 0, 0, .12);
/* Pagination /* Pagination
-------------------------- */ -------------------------- */
$--pagination-font-size: 14px; $--pagination-font-size: 13px;
$--pagination-fill: $--color-white; $--pagination-fill: $--color-white;
$--pagination-color: $--color-text-primary; $--pagination-color: $--color-text-primary;
$--pagination-border-radius: 3px; $--pagination-border-radius: 3px;
@ -568,8 +568,8 @@ $--card-padding: 20px;
/* Slider /* Slider
--------------------------*/ --------------------------*/
$--slider-main-background-color: $--color-primary; $--slider-main-background-color: $--color-primary;
$--slider-runway-background-color: $--color-text-secondary; $--slider-runway-background-color: $--border-color-light;
$--slider-button-hover-color: shade($--color-primary, 0.12); $--slider-button-hover-color: mix($--color-primary, black, 97%);
$--slider-stop-background-color: $--color-text-placeholder; $--slider-stop-background-color: $--color-text-placeholder;
$--slider-disable-color: $--color-text-placeholder; $--slider-disable-color: $--color-text-placeholder;

3
packages/theme-chalk/src/input.scss
View File

@ -8,7 +8,7 @@
width: 100%; width: 100%;
@include e(inner) { @include e(inner) {
appearance: none; -webkit-appearance: none;
background-color: $--input-fill; background-color: $--input-fill;
background-image: none; background-image: none;
border-radius: $--input-border-radius; border-radius: $--input-border-radius;
@ -23,7 +23,6 @@
padding: 0 15px; padding: 0 15px;
transition: $--border-transition-base; transition: $--border-transition-base;
width: 100%; width: 100%;
text-align: inherit;
&::placeholder { &::placeholder {
color: $--input-placeholder-color; color: $--input-placeholder-color;

13
packages/theme-chalk/src/pagination.scss
View File

@ -10,7 +10,7 @@
font-weight: bold; font-weight: bold;
@include utils-clearfix; @include utils-clearfix;
span, span:not([class*=suffix]),
button { button {
display: inline-block; display: inline-block;
font-size: $--pagination-font-size; font-size: $--pagination-font-size;
@ -23,18 +23,20 @@
.el-input__inner { .el-input__inner {
font-weight: bold; font-weight: bold;
text-align: center;
} }
// pagesize 的下拉 icon // pagesize 的下拉 icon
.el-input__suffix { .el-input__suffix {
right: -3px; right: 0;
transform: scale(.8);
} }
.el-select .el-input { .el-select .el-input {
width: 100px; width: 100px;
margin: 0 5px; margin: 0 5px;
.el-input__icon { .el-input__icon {
width: 24px;
} }
.el-input__inner { .el-input__inner {
@ -109,6 +111,7 @@
.el-input .el-input__inner { .el-input .el-input__inner {
font-size: $--pagination-font-size; font-size: $--pagination-font-size;
padding-left: 8px;
&:hover { &:hover {
border-color: $--pagination-hover-fill; border-color: $--pagination-hover-fill;
@ -118,10 +121,6 @@
@include e(total) { @include e(total) {
margin-right: 10px; margin-right: 10px;
& + .el-pagination__sizes {
margin-left: -10px;
}
} }
@include e(jump) { @include e(jump) {

14
packages/theme-chalk/src/progress.scss
View File

@ -8,7 +8,7 @@
@include e(text) { @include e(text) {
font-size:14px; font-size:14px;
color: $--color-black; color: $--color-text-regular;
display: inline-block; display: inline-block;
vertical-align: middle; vertical-align: middle;
margin-left: 10px; margin-left: 10px;
@ -19,6 +19,7 @@
display: block; display: block;
} }
} }
@include m(circle) { @include m(circle) {
display: inline-block; display: inline-block;
@ -37,34 +38,41 @@
} }
} }
} }
@include m(without-text) { @include m(without-text) {
.el-progress__text { .el-progress__text {
display: none; display: none;
} }
.el-progress-bar { .el-progress-bar {
padding-right: 0; padding-right: 0;
margin-right: 0; margin-right: 0;
display: block; display: block;
} }
} }
@include m(text-inside) { @include m(text-inside) {
.el-progress-bar { .el-progress-bar {
padding-right: 0; padding-right: 0;
margin-right: 0; margin-right: 0;
} }
} }
@include when(success) { @include when(success) {
.el-progress-bar__inner { .el-progress-bar__inner {
background-color: $--color-success; background-color: $--color-success;
} }
.el-progress__text { .el-progress__text {
color: $--color-success; color: $--color-success;
} }
} }
@include when(exception) { @include when(exception) {
.el-progress-bar__inner { .el-progress-bar__inner {
background-color: $--color-danger; background-color: $--color-danger;
} }
.el-progress__text { .el-progress__text {
color: $--color-danger; color: $--color-danger;
} }
@ -82,7 +90,7 @@
@include e(outer) { @include e(outer) {
height: 6px; height: 6px;
border-radius: 100px; border-radius: 100px;
background-color: $--color-black; background-color: $--border-color-light;
overflow: hidden; overflow: hidden;
position: relative; position: relative;
vertical-align: middle; vertical-align: middle;
@ -100,6 +108,7 @@
@include utils-vertical-center; @include utils-vertical-center;
} }
@include e(innerText) { @include e(innerText) {
display: inline-block; display: inline-block;
vertical-align: middle; vertical-align: middle;
@ -113,6 +122,7 @@
0% { 0% {
background-position: 0 0; background-position: 0 0;
} }
100% { 100% {
background-position: 32px 0; background-position: 32px 0;
} }

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

@ -39,6 +39,12 @@
.popper__arrow { .popper__arrow {
transform: translateX(-400%); transform: translateX(-400%);
} }
@include when(arrow-fixed){
.popper__arrow {
transform: translateX(-200%);
}
}
} }
@include b(select-dropdown__empty) { @include b(select-dropdown__empty) {

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

@ -113,8 +113,6 @@
} }
.el-tag { .el-tag {
height: $--select-tag-height;
line-height: $--select-tag-height;
box-sizing: border-box; box-sizing: border-box;
border-color: transparent; border-color: transparent;
margin: 3px 0 3px 6px; margin: 3px 0 3px 6px;
@ -130,7 +128,7 @@
&::before { &::before {
display: block; display: block;
transform: scale(.6); transform: scale(.65);
} }
} }
} }

1
packages/theme-chalk/src/slider.scss
View File

@ -6,6 +6,7 @@
@include b(slider) { @include b(slider) {
@include utils-clearfix; @include utils-clearfix;
@include e(runway) { @include e(runway) {
width: 100%; width: 100%;
height: $--slider-height; height: $--slider-height;

66
packages/theme-chalk/src/tag.scss
View File

@ -5,8 +5,8 @@
background-color: $--tag-fill; background-color: $--tag-fill;
display: inline-block; display: inline-block;
padding: $--tag-padding; padding: $--tag-padding;
height: 30px; height: 32px;
line-height: 28px; line-height: 30px;
font-size: $--tag-font-size; font-size: $--tag-font-size;
color: $--tag-color; color: $--tag-color;
border-radius: $--tag-border-radius; border-radius: $--tag-border-radius;
@ -14,7 +14,7 @@
border: 1px solid $--tag-border; border: 1px solid $--tag-border;
white-space: nowrap; white-space: nowrap;
& .el-icon-close { .el-icon-close {
border-radius: 50%; border-radius: 50%;
text-align: center; text-align: center;
position: relative; position: relative;
@ -26,9 +26,14 @@
line-height: 18px; line-height: 18px;
vertical-align: middle; vertical-align: middle;
top: -1px; top: -1px;
right: -2px; right: -5px;
color: $--tag-color; color: $--tag-color;
&::before {
display: block;
transform: scale(.8);
}
&:hover { &:hover {
background-color: $--tag-color; background-color: $--tag-color;
color: $--color-white; color: $--color-white;
@ -39,68 +44,105 @@
background-color: $--tag-info-fill; background-color: $--tag-info-fill;
border-color: $--tag-info-border; border-color: $--tag-info-border;
color: $--tag-info-color; color: $--tag-info-color;
@include when(hit) { @include when(hit) {
border-color: $--tag-info-color; border-color: $--tag-info-color;
} }
& .el-tag__close { .el-tag__close {
color: $--tag-info-color; color: $--tag-info-color;
} }
& .el-tag__close:hover { .el-tag__close:hover {
background-color: $--tag-info-color; background-color: $--tag-info-color;
color: $--color-white; color: $--color-white;
} }
} }
@include m(success) { @include m(success) {
background-color: $--tag-success-fill; background-color: $--tag-success-fill;
border-color: $--tag-success-border; border-color: $--tag-success-border;
color: $--tag-success-color; color: $--tag-success-color;
@include when(hit) { @include when(hit) {
border-color: $--tag-success-color; border-color: $--tag-success-color;
} }
& .el-tag__close { .el-tag__close {
color: $--tag-success-color; color: $--tag-success-color;
} }
& .el-tag__close:hover { .el-tag__close:hover {
background-color: $--tag-success-color; background-color: $--tag-success-color;
color: $--color-white; color: $--color-white;
} }
} }
@include m(warning) { @include m(warning) {
background-color: $--tag-warning-fill; background-color: $--tag-warning-fill;
border-color: $--tag-warning-border; border-color: $--tag-warning-border;
color: $--tag-warning-color; color: $--tag-warning-color;
@include when(hit) { @include when(hit) {
border-color: $--tag-warning-color; border-color: $--tag-warning-color;
} }
& .el-tag__close { .el-tag__close {
color: $--tag-warning-color; color: $--tag-warning-color;
} }
& .el-tag__close:hover { .el-tag__close:hover {
background-color: $--tag-warning-color; background-color: $--tag-warning-color;
color: $--color-white; color: $--color-white;
} }
} }
@include m(danger) { @include m(danger) {
background-color: $--tag-danger-fill; background-color: $--tag-danger-fill;
border-color: $--tag-danger-border; border-color: $--tag-danger-border;
color: $--tag-danger-color; color: $--tag-danger-color;
@include when(hit) { @include when(hit) {
border-color: $--tag-danger-color; border-color: $--tag-danger-color;
} }
& .el-tag__close { .el-tag__close {
color: $--tag-danger-color; color: $--tag-danger-color;
} }
& .el-tag__close:hover { .el-tag__close:hover {
background-color: $--tag-danger-color; background-color: $--tag-danger-color;
color: $--color-white; color: $--color-white;
} }
} }
@include m(medium) {
height: 28px;
line-height: 26px;
.el-icon-close {
transform: scale(.8);
}
}
@include m(small) {
height: 24px;
padding: 0 8px;
line-height: 22px;
.el-icon-close {
transform: scale(.8);
}
}
@include m(mini) {
height: 20px;
padding: 0 5px 0 8px;
line-height: 19px;
.el-icon-close {
margin-left: -3px;
transform: scale(.65);
}
}
} }

103
packages/theme-chalk/src/upload.scss
View File

@ -10,12 +10,14 @@
@include e(input) { @include e(input) {
display: none; display: none;
} }
@include e(tip) { @include e(tip) {
font-size: 12px; font-size: 12px;
color: $--color-black; color: $--color-text-regular;
margin-top: 7px; margin-top: 7px;
} }
& iframe {
iframe {
position: absolute; position: absolute;
z-index: -1; z-index: -1;
top: 0; top: 0;
@ -23,6 +25,7 @@
opacity: 0; opacity: 0;
filter: alpha(opacity=0); filter: alpha(opacity=0);
} }
/* 照片墙模式 */ /* 照片墙模式 */
@include m(picture-card) { @include m(picture-card) {
background-color: #fbfdff; background-color: #fbfdff;
@ -59,27 +62,29 @@
position: relative; position: relative;
overflow: hidden; overflow: hidden;
& .el-icon-upload { .el-icon-upload {
font-size: 67px; font-size: 67px;
color: $--color-black; color: $--color-text-placeholder;
margin: 40px 0 16px; margin: 40px 0 16px;
line-height: 50px; line-height: 50px;
} }
& + .el-upload__tip { + .el-upload__tip {
text-align: center; text-align: center;
} }
& ~ .el-upload__files {
border-top: 1px solid rgba($--color-black, .2); ~ .el-upload__files {
border-top: $--border-base;
margin-top: 7px; margin-top: 7px;
padding-top: 5px; padding-top: 5px;
} }
.el-upload__text { .el-upload__text {
color: $--color-black; color: $--color-text-regular;
font-size: 14px; font-size: 14px;
text-align: center; text-align: center;
& em { em {
color: $--color-primary; color: $--color-primary;
font-style: normal; font-style: normal;
} }
@ -103,7 +108,7 @@
@include e(item) { @include e(item) {
transition: all .5s cubic-bezier(.55,0,.1,1); transition: all .5s cubic-bezier(.55,0,.1,1);
font-size: 14px; font-size: 14px;
color: $--color-black; color: $--color-text-regular;
line-height: 1.8; line-height: 1.8;
margin-top: 5px; margin-top: 5px;
position: relative; position: relative;
@ -111,58 +116,68 @@
border-radius: 4px; border-radius: 4px;
width: 100%; width: 100%;
& .el-progress { .el-progress {
position: absolute; position: absolute;
top: 20px; top: 20px;
width: 100%; width: 100%;
} }
& .el-progress__text {
.el-progress__text {
position: absolute; position: absolute;
right: 0; right: 0;
top: -13px; top: -13px;
} }
.el-progress-bar { .el-progress-bar {
margin-right: 0; margin-right: 0;
padding-right: 0; padding-right: 0;
} }
&:first-child { &:first-child {
margin-top: 10px; margin-top: 10px;
} }
& .el-icon-upload-success { & .el-icon-upload-success {
color: $--color-success; color: $--color-success;
} }
& .el-icon-close {
.el-icon-close {
display: none; display: none;
position: absolute; position: absolute;
top: 5px; top: 5px;
right: 5px; right: 5px;
cursor: pointer; cursor: pointer;
opacity: .75; opacity: .75;
color: $--color-black; color: $--color-text-regular;
transform: scale(.7); transform: scale(.7);
&:hover { &:hover {
opacity: 1; opacity: 1;
} }
} }
&:hover { &:hover {
background-color: $--color-black; background-color: $--background-color-base;
.el-icon-close { .el-icon-close {
display: inline-block; display: inline-block;
} }
.el-progress__text { .el-progress__text {
display: none; display: none;
} }
} }
@include when(success) { @include when(success) {
.el-upload-list__item-status-label { .el-upload-list__item-status-label {
display: block; display: block;
} }
.el-upload-list__item-name:hover { .el-upload-list__item-name:hover {
color: $--link-hover-color; color: $--link-hover-color;
cursor: pointer; cursor: pointer;
} }
&:hover { &:hover {
.el-upload-list__item-status-label { .el-upload-list__item-status-label {
display: none; display: none;
@ -170,13 +185,15 @@
} }
} }
} }
@include when(disabled) { @include when(disabled) {
.el-upload-list__item:hover .el-upload-list__item-status-label { .el-upload-list__item:hover .el-upload-list__item-status-label {
display: block; display: block;
} }
} }
@include e(item-name) { @include e(item-name) {
color: $--color-black; color: $--color-text-regular;
display: block; display: block;
margin-right: 40px; margin-right: 40px;
overflow: hidden; overflow: hidden;
@ -186,12 +203,13 @@
white-space: nowrap; white-space: nowrap;
[class^="el-icon"] { [class^="el-icon"] {
color: $--color-black;
margin-right: 7px;
height: 100%; height: 100%;
margin-right: 7px;
color: $--color-text-secondary;
line-height: inherit; line-height: inherit;
} }
} }
@include e(item-status-label) { @include e(item-status-label) {
position: absolute; position: absolute;
right: 5px; right: 5px;
@ -199,18 +217,20 @@
line-height: inherit; line-height: inherit;
display: none; display: none;
} }
@include e(item-delete) { @include e(item-delete) {
position: absolute; position: absolute;
right: 10px; right: 10px;
top: 0; top: 0;
font-size: 12px; font-size: 12px;
color: $--color-black; color: $--color-text-regular;
display: none; display: none;
&:hover { &:hover {
color: $--color-primary; color: $--color-primary;
} }
} }
@include m(picture-card) { @include m(picture-card) {
margin: 0; margin: 0;
display: inline; display: inline;
@ -223,16 +243,16 @@
border-radius: 6px; border-radius: 6px;
box-sizing: border-box; box-sizing: border-box;
width: 148px; width: 148px;
height: 148; height: 148px;
margin: 0 8px 8px 0; margin: 0 8px 8px 0;
display: inline-block; display: inline-block;
& .el-icon-check, .el-icon-check,
& .el-icon-circle-check { .el-icon-circle-check {
color: $--color-white; color: $--color-white;
} }
& .el-icon-close { .el-icon-close {
display: none; display: none;
} }
@ -240,18 +260,22 @@
.el-upload-list__item-status-label { .el-upload-list__item-status-label {
display: none; display: none;
} }
.el-progress__text { .el-progress__text {
display: block; display: block;
} }
} }
} }
.el-upload-list__item-name { .el-upload-list__item-name {
display: none; display: none;
} }
.el-upload-list__item-thumbnail { .el-upload-list__item-thumbnail {
width: 100%; width: 100%;
height: 100%; height: 100%;
} }
.el-upload-list__item-status-label { .el-upload-list__item-status-label {
position: absolute; position: absolute;
right: -15px; right: -15px;
@ -269,6 +293,7 @@
transform: rotate(-45deg) scale(0.8); transform: rotate(-45deg) scale(0.8);
} }
} }
.el-upload-list__item-actions { .el-upload-list__item-actions {
position: absolute; position: absolute;
width: 100%; width: 100%;
@ -288,6 +313,7 @@
display: none; display: none;
cursor: pointer; cursor: pointer;
} }
span + span { span + span {
margin-left: 15px; margin-left: 15px;
} }
@ -305,6 +331,7 @@
} }
} }
} }
.el-progress { .el-progress {
top: 50%; top: 50%;
left: 50%; left: 50%;
@ -317,6 +344,7 @@
} }
} }
} }
@include m(picture) { @include m(picture) {
.el-upload-list__item { .el-upload-list__item {
overflow: hidden; overflow: hidden;
@ -328,10 +356,11 @@
padding: 10px 10px 10px 90px; padding: 10px 10px 10px 90px;
height: 92px; height: 92px;
& .el-icon-check, .el-icon-check,
& .el-icon-circle-check { .el-icon-circle-check {
color: $--color-white; color: $--color-white;
} }
&:hover { &:hover {
.el-upload-list__item-status-label { .el-upload-list__item-status-label {
background: transparent; background: transparent;
@ -339,10 +368,12 @@
top: -2px; top: -2px;
right: -12px; right: -12px;
} }
.el-progress__text { .el-progress__text {
display: block; display: block;
} }
} }
&.is-success { &.is-success {
.el-upload-list__item-name { .el-upload-list__item-name {
line-height: 70px; line-height: 70px;
@ -354,6 +385,7 @@
} }
} }
} }
.el-upload-list__item-thumbnail { .el-upload-list__item-thumbnail {
vertical-align: middle; vertical-align: middle;
display: inline-block; display: inline-block;
@ -364,6 +396,7 @@
z-index: 1; z-index: 1;
margin-left: -80px; margin-left: -80px;
} }
.el-upload-list__item-name { .el-upload-list__item-name {
display: block; display: block;
margin-top: 20px; margin-top: 20px;
@ -376,6 +409,7 @@
top: 10px; top: 10px;
} }
} }
.el-upload-list__item-status-label { .el-upload-list__item-status-label {
position: absolute; position: absolute;
right: -17px; right: -17px;
@ -393,6 +427,7 @@
transform: rotate(-45deg) scale(0.8); transform: rotate(-45deg) scale(0.8);
} }
} }
.el-progress { .el-progress {
position: relative; position: relative;
top: -7px; top: -7px;
@ -411,7 +446,7 @@
cursor: default; cursor: default;
@include utils-vertical-center; @include utils-vertical-center;
& img { img {
display: block; display: block;
width: 100%; width: 100%;
height: 100%; height: 100%;
@ -442,7 +477,7 @@
position: static; position: static;
width: 243px; width: 243px;
& + .el-upload__inner { + .el-upload__inner {
opacity: 0; opacity: 0;
} }
} }
@ -464,7 +499,7 @@
background-color: rgba(#000, .72); background-color: rgba(#000, .72);
text-align: center; text-align: center;
& .btn { .btn {
display: inline-block; display: inline-block;
color: $--color-white; color: $--color-white;
font-size: 14px; font-size: 14px;
@ -473,11 +508,11 @@
transition: $--md-fade-transition; transition: $--md-fade-transition;
margin-top: 60px; margin-top: 60px;
& i { i {
margin-top: 0; margin-top: 0;
} }
& span { span {
opacity: 0; opacity: 0;
transition: opacity .15s linear; transition: opacity .15s linear;
} }
@ -489,12 +524,12 @@
&:hover { &:hover {
transform: translateY(-13px); transform: translateY(-13px);
& span { span {
opacity: 1; opacity: 1;
} }
} }
& i { i {
color: $--color-white; color: $--color-white;
display: block; display: block;
font-size: 24px; font-size: 24px;
@ -520,10 +555,10 @@
margin: 0; margin: 0;
line-height: 36px; line-height: 36px;
font-size: 14px; font-size: 14px;
color: $--color-black; color: $--color-text-primary;
} }
& + .el-upload__inner { + .el-upload__inner {
opacity: 0; opacity: 0;
position: relative; position: relative;
z-index: 1; z-index: 1;