mirror of https://github.com/ElemeFE/element
Breadcrumb: add chalk theme (#7203)
* Breadcrumb: add chalk theme * Breadcrumb: fix bugs * fix pagination sizes' arrowpull/7256/head
Black Wayne
杨奕
parent
e768eca7a2
commit
8774311c76
|
|
@ -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
|
||||
| Attribute | Description | Type | Accepted Values | Default|
|
||||
|---------- |-------------- |---------- |-------------------------------- |-------- |
|
||||
| separator | separator character | string | — | / |
|
||||
| separator-class | iconfont-separator's class | string | — | - |
|
||||
|
||||
### Breadcrumb Item Attributes
|
||||
| Attribute | Description | Type | Accepted Values | Default|
|
||||
|
|
|
|||
|
|
@ -166,7 +166,7 @@ Besides default size, Button component provides three additional sizes for you t
|
|||
### Attributes
|
||||
| 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 | — |
|
||||
| plain | determine whether it's a plain button | boolean | — | false |
|
||||
| round | determine whether it's a round button | boolean | — | false |
|
||||
|
|
|
|||
|
|
@ -45,18 +45,14 @@
|
|||
}
|
||||
.button-new-tag {
|
||||
margin-left: 10px;
|
||||
height: 30px;
|
||||
line-height: 28px;
|
||||
height: 32px;
|
||||
line-height: 30px;
|
||||
padding: 0 *;
|
||||
}
|
||||
.input-new-tag {
|
||||
width: 90px;
|
||||
margin-left: 10px;
|
||||
vertical-align: bottom;
|
||||
|
||||
.el-input__inner {
|
||||
height: 30px;
|
||||
}
|
||||
}
|
||||
}
|
||||
</style>
|
||||
|
|
@ -80,7 +76,7 @@ Used for marking and selection.
|
|||
|
||||
### 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
|
||||
<el-tag
|
||||
|
|
@ -119,7 +115,7 @@ You can use the `close` event to add and remove tag dynamically.
|
|||
:key="tag"
|
||||
v-for="tag in dynamicTags"
|
||||
closable
|
||||
:close-transition="false"
|
||||
:disable-transitions="false"
|
||||
@close="handleClose(tag)">
|
||||
{{tag}}
|
||||
</el-tag>
|
||||
|
|
@ -141,8 +137,8 @@ You can use the `close` event to add and remove tag dynamically.
|
|||
}
|
||||
.button-new-tag {
|
||||
margin-left: 10px;
|
||||
height: 30px;
|
||||
line-height: 28px;
|
||||
height: 32px;
|
||||
line-height: 30px;
|
||||
padding-top: 0;
|
||||
padding-bottom: 0;
|
||||
}
|
||||
|
|
@ -151,9 +147,6 @@ You can use the `close` event to add and remove tag dynamically.
|
|||
margin-left: 10px;
|
||||
vertical-align: bottom;
|
||||
}
|
||||
.el-input__inner {
|
||||
height: 30px;
|
||||
}
|
||||
</style>
|
||||
|
||||
<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
|
||||
| Attribute | Description | Type | Accepted Values | Default |
|
||||
|---------- |-------------- |---------- |-------------------------------- |-------- |
|
||||
| type | theme | string | success/info/warning/danger | — |
|
||||
| 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 |
|
||||
| color | background color of the Tag | string | — | — |
|
||||
| size | tag size | string | medium / small / mini | — |
|
||||
|
||||
|
||||
### Events
|
||||
|
|
|
|||
|
|
@ -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
|
||||
| 参数 | 说明 | 类型 | 可选值 | 默认值 |
|
||||
|---------- |-------------- |---------- |-------------------------------- |-------- |
|
||||
| separator | 分隔符 | string | — | 斜杠'/' |
|
||||
| separator-class | 图标分隔符 class | string | — | - |
|
||||
|
||||
### Breadcrumb Item Attributes
|
||||
| 参数 | 说明 | 类型 | 可选值 | 默认值 |
|
||||
|
|
|
|||
|
|
@ -45,18 +45,14 @@
|
|||
}
|
||||
.button-new-tag {
|
||||
margin-left: 10px;
|
||||
height: 30px;
|
||||
line-height: 28px;
|
||||
height: 32px;
|
||||
line-height: 30px;
|
||||
padding: 0 *;
|
||||
}
|
||||
.input-new-tag {
|
||||
width: 90px;
|
||||
margin-left: 10px;
|
||||
vertical-align: bottom;
|
||||
|
||||
.el-input__inner {
|
||||
height: 30px;
|
||||
}
|
||||
}
|
||||
}
|
||||
</style>
|
||||
|
|
@ -80,7 +76,7 @@
|
|||
|
||||
### 可移除标签
|
||||
|
||||
:::demo 设置`closable`属性可以定义一个标签是否可移除。默认的标签移除时会附带渐变动画，如果不想使用，可以设置`close-transition`属性，它接受一个`Boolean`，true 为关闭。
|
||||
:::demo 设置`closable`属性可以定义一个标签是否可移除。默认的标签移除时会附带渐变动画，如果不想使用，可以设置`disable-transitions`属性，它接受一个`Boolean`，true 为关闭。
|
||||
|
||||
```html
|
||||
<el-tag
|
||||
|
|
@ -119,16 +115,16 @@
|
|||
:key="tag"
|
||||
v-for="tag in dynamicTags"
|
||||
closable
|
||||
:close-transition="false"
|
||||
:disable-transitions="false"
|
||||
@close="handleClose(tag)">
|
||||
{{tag}}
|
||||
{{tag}}
|
||||
</el-tag>
|
||||
<el-input
|
||||
class="input-new-tag"
|
||||
v-if="inputVisible"
|
||||
v-model="inputValue"
|
||||
ref="saveTagInput"
|
||||
size="mini"
|
||||
size="small"
|
||||
@keyup.enter.native="handleInputConfirm"
|
||||
@blur="handleInputConfirm"
|
||||
>
|
||||
|
|
@ -141,8 +137,8 @@
|
|||
}
|
||||
.button-new-tag {
|
||||
margin-left: 10px;
|
||||
height: 30px;
|
||||
line-height: 28px;
|
||||
height: 32px;
|
||||
line-height: 30px;
|
||||
padding-top: 0;
|
||||
padding-bottom: 0;
|
||||
}
|
||||
|
|
@ -151,9 +147,6 @@
|
|||
margin-left: 10px;
|
||||
vertical-align: bottom;
|
||||
}
|
||||
.el-input__inner {
|
||||
height: 30px;
|
||||
}
|
||||
</style>
|
||||
|
||||
<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
|
||||
| 参数 | 说明 | 类型 | 可选值 | 默认值 |
|
||||
|---------- |-------------- |---------- |-------------------------------- |-------- |
|
||||
| type | 主题 | string | success/info/warning/danger | — |
|
||||
| closable | 是否可关闭 | boolean | — | false |
|
||||
| close-transition | 是否禁用渐变动画 | boolean | — | false |
|
||||
| disable-transitions | 是否禁用渐变动画 | boolean | — | false |
|
||||
| hit | 是否有边框描边 | boolean | — | false |
|
||||
| color | 背景色 | string | — | — |
|
||||
| size | 尺寸 | string | medium / small / mini | — |
|
||||
|
||||
|
||||
### Events
|
||||
|
|
|
|||
|
|
@ -1,6 +1,10 @@
|
|||
<template>
|
||||
<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>
|
||||
</template>
|
||||
<script>
|
||||
|
|
@ -12,12 +16,14 @@
|
|||
},
|
||||
data() {
|
||||
return {
|
||||
separator: ''
|
||||
separator: '',
|
||||
separatorClass: ''
|
||||
};
|
||||
},
|
||||
mounted() {
|
||||
this.separator = this.$parent.separator;
|
||||
var self = this;
|
||||
this.separatorClass = this.$parent.separatorClass;
|
||||
let self = this;
|
||||
if (this.to) {
|
||||
let link = this.$refs.link;
|
||||
link.setAttribute('role', 'link');
|
||||
|
|
|
|||
|
|
@ -11,6 +11,10 @@
|
|||
separator: {
|
||||
type: String,
|
||||
default: '/'
|
||||
},
|
||||
separatorClass: {
|
||||
type: String,
|
||||
default: ''
|
||||
}
|
||||
},
|
||||
mounted() {
|
||||
|
|
|
|||
|
|
@ -162,13 +162,13 @@ export default {
|
|||
<span class="el-pagination__sizes">
|
||||
<el-select
|
||||
value={ this.$parent.internalPageSize }
|
||||
popperClass={ this.$parent.popperClass }
|
||||
popperClass={ `${this.$parent.popperClass || ''} is-arrow-fixed` }
|
||||
on-input={ this.handleChange }>
|
||||
{
|
||||
this.pageSizes.map(item =>
|
||||
<el-option
|
||||
value={ item }
|
||||
label={ item + ' ' + this.t('el.pagination.pagesize') }>
|
||||
label={ item + this.t('el.pagination.pagesize') }>
|
||||
</el-option>
|
||||
)
|
||||
}
|
||||
|
|
|
|||
|
|
@ -14,6 +14,7 @@
|
|||
v-for="item in selected"
|
||||
:key="getValueKey(item)"
|
||||
:closable="!disabled"
|
||||
size="small"
|
||||
:hit="item.hitState"
|
||||
type="info"
|
||||
@close="deleteTag($event, item)"
|
||||
|
|
|
|||
|
|
@ -1,8 +1,12 @@
|
|||
<template>
|
||||
<transition :name="closeTransition ? '' : 'el-zoom-in-center'">
|
||||
<transition :name="disableTransitions ? '' : 'el-zoom-in-center'">
|
||||
<span
|
||||
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}">
|
||||
<slot></slot>
|
||||
<i class="el-tag__close el-icon-close"
|
||||
|
|
@ -19,8 +23,9 @@
|
|||
closable: Boolean,
|
||||
type: String,
|
||||
hit: Boolean,
|
||||
closeTransition: Boolean,
|
||||
color: String
|
||||
disableTransitions: Boolean,
|
||||
color: String,
|
||||
size: String
|
||||
},
|
||||
methods: {
|
||||
handleClose(event) {
|
||||
|
|
|
|||
|
|
@ -3,21 +3,30 @@
|
|||
@import "common/var";
|
||||
|
||||
@include b(breadcrumb) {
|
||||
font-size: 13px;
|
||||
font-size: 14px;
|
||||
line-height: 1;
|
||||
@include utils-clearfix;
|
||||
|
||||
@include e(separator) {
|
||||
margin: 0 8px;
|
||||
color: $--color-black;
|
||||
margin: 0 9px;
|
||||
font-weight: bold;
|
||||
color: $--color-text-placeholder;
|
||||
|
||||
&[class*=el-icon] {
|
||||
margin: 0 6px;
|
||||
font-weight: normal;
|
||||
transform: scale(.8);
|
||||
}
|
||||
}
|
||||
|
||||
@include e(item) {
|
||||
float: left;
|
||||
|
||||
@include e(inner) {
|
||||
&, & a {
|
||||
transition: color .15s linear;
|
||||
color: $--color-black;
|
||||
font-weight: bold;
|
||||
transition: $--color-transition-base;
|
||||
color: $--color-text-primary;
|
||||
|
||||
&:hover {
|
||||
color: $--color-primary;
|
||||
|
|
@ -30,7 +39,8 @@
|
|||
.el-breadcrumb__inner,
|
||||
.el-breadcrumb__inner a {
|
||||
&, &:hover {
|
||||
color: $--color-black;
|
||||
font-weight: normal;
|
||||
color: $--font-color-base;
|
||||
cursor: text;
|
||||
}
|
||||
}
|
||||
|
|
|
|||
|
|
@ -323,11 +323,12 @@
|
|||
@include e(icon) {
|
||||
display: inline-block;
|
||||
position: absolute;
|
||||
width: 100%;
|
||||
top: 50%;
|
||||
left: 50%;
|
||||
transform: translate3d(-50%, -50%, 0) scale(0.8);
|
||||
width: 12px;
|
||||
color: $--color-white;
|
||||
text-align: center;
|
||||
font-size: 12px;
|
||||
}
|
||||
|
||||
|
|
|
|||
|
|
@ -478,7 +478,7 @@ $--table-fixed-box-shadow: 0 0 10px rgba(0, 0, 0, .12);
|
|||
|
||||
/* Pagination
|
||||
-------------------------- */
|
||||
$--pagination-font-size: 14px;
|
||||
$--pagination-font-size: 13px;
|
||||
$--pagination-fill: $--color-white;
|
||||
$--pagination-color: $--color-text-primary;
|
||||
$--pagination-border-radius: 3px;
|
||||
|
|
@ -568,8 +568,8 @@ $--card-padding: 20px;
|
|||
/* Slider
|
||||
--------------------------*/
|
||||
$--slider-main-background-color: $--color-primary;
|
||||
$--slider-runway-background-color: $--color-text-secondary;
|
||||
$--slider-button-hover-color: shade($--color-primary, 0.12);
|
||||
$--slider-runway-background-color: $--border-color-light;
|
||||
$--slider-button-hover-color: mix($--color-primary, black, 97%);
|
||||
$--slider-stop-background-color: $--color-text-placeholder;
|
||||
$--slider-disable-color: $--color-text-placeholder;
|
||||
|
||||
|
|
|
|||
|
|
@ -8,7 +8,7 @@
|
|||
width: 100%;
|
||||
|
||||
@include e(inner) {
|
||||
appearance: none;
|
||||
-webkit-appearance: none;
|
||||
background-color: $--input-fill;
|
||||
background-image: none;
|
||||
border-radius: $--input-border-radius;
|
||||
|
|
@ -23,7 +23,6 @@
|
|||
padding: 0 15px;
|
||||
transition: $--border-transition-base;
|
||||
width: 100%;
|
||||
text-align: inherit;
|
||||
|
||||
&::placeholder {
|
||||
color: $--input-placeholder-color;
|
||||
|
|
|
|||
|
|
@ -10,7 +10,7 @@
|
|||
font-weight: bold;
|
||||
@include utils-clearfix;
|
||||
|
||||
span,
|
||||
span:not([class*=suffix]),
|
||||
button {
|
||||
display: inline-block;
|
||||
font-size: $--pagination-font-size;
|
||||
|
|
@ -23,18 +23,20 @@
|
|||
|
||||
.el-input__inner {
|
||||
font-weight: bold;
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
// pagesize 的下拉 icon
|
||||
.el-input__suffix {
|
||||
right: -3px;
|
||||
right: 0;
|
||||
transform: scale(.8);
|
||||
}
|
||||
|
||||
.el-select .el-input {
|
||||
width: 100px;
|
||||
margin: 0 5px;
|
||||
|
||||
.el-input__icon {
|
||||
width: 24px;
|
||||
}
|
||||
|
||||
.el-input__inner {
|
||||
|
|
@ -109,6 +111,7 @@
|
|||
|
||||
.el-input .el-input__inner {
|
||||
font-size: $--pagination-font-size;
|
||||
padding-left: 8px;
|
||||
|
||||
&:hover {
|
||||
border-color: $--pagination-hover-fill;
|
||||
|
|
@ -118,10 +121,6 @@
|
|||
|
||||
@include e(total) {
|
||||
margin-right: 10px;
|
||||
|
||||
& + .el-pagination__sizes {
|
||||
margin-left: -10px;
|
||||
}
|
||||
}
|
||||
|
||||
@include e(jump) {
|
||||
|
|
|
|||
|
|
@ -8,7 +8,7 @@
|
|||
|
||||
@include e(text) {
|
||||
font-size:14px;
|
||||
color: $--color-black;
|
||||
color: $--color-text-regular;
|
||||
display: inline-block;
|
||||
vertical-align: middle;
|
||||
margin-left: 10px;
|
||||
|
|
@ -19,6 +19,7 @@
|
|||
display: block;
|
||||
}
|
||||
}
|
||||
|
||||
@include m(circle) {
|
||||
display: inline-block;
|
||||
|
||||
|
|
@ -37,34 +38,41 @@
|
|||
}
|
||||
}
|
||||
}
|
||||
|
||||
@include m(without-text) {
|
||||
.el-progress__text {
|
||||
display: none;
|
||||
}
|
||||
|
||||
.el-progress-bar {
|
||||
padding-right: 0;
|
||||
margin-right: 0;
|
||||
display: block;
|
||||
}
|
||||
}
|
||||
|
||||
@include m(text-inside) {
|
||||
.el-progress-bar {
|
||||
padding-right: 0;
|
||||
margin-right: 0;
|
||||
}
|
||||
}
|
||||
|
||||
@include when(success) {
|
||||
.el-progress-bar__inner {
|
||||
background-color: $--color-success;
|
||||
}
|
||||
|
||||
.el-progress__text {
|
||||
color: $--color-success;
|
||||
}
|
||||
}
|
||||
|
||||
@include when(exception) {
|
||||
.el-progress-bar__inner {
|
||||
background-color: $--color-danger;
|
||||
}
|
||||
|
||||
.el-progress__text {
|
||||
color: $--color-danger;
|
||||
}
|
||||
|
|
@ -82,7 +90,7 @@
|
|||
@include e(outer) {
|
||||
height: 6px;
|
||||
border-radius: 100px;
|
||||
background-color: $--color-black;
|
||||
background-color: $--border-color-light;
|
||||
overflow: hidden;
|
||||
position: relative;
|
||||
vertical-align: middle;
|
||||
|
|
@ -100,6 +108,7 @@
|
|||
|
||||
@include utils-vertical-center;
|
||||
}
|
||||
|
||||
@include e(innerText) {
|
||||
display: inline-block;
|
||||
vertical-align: middle;
|
||||
|
|
@ -113,6 +122,7 @@
|
|||
0% {
|
||||
background-position: 0 0;
|
||||
}
|
||||
|
||||
100% {
|
||||
background-position: 32px 0;
|
||||
}
|
||||
|
|
|
|||
|
|
@ -39,6 +39,12 @@
|
|||
.popper__arrow {
|
||||
transform: translateX(-400%);
|
||||
}
|
||||
|
||||
@include when(arrow-fixed){
|
||||
.popper__arrow {
|
||||
transform: translateX(-200%);
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
@include b(select-dropdown__empty) {
|
||||
|
|
|
|||
|
|
@ -113,8 +113,6 @@
|
|||
}
|
||||
|
||||
.el-tag {
|
||||
height: $--select-tag-height;
|
||||
line-height: $--select-tag-height;
|
||||
box-sizing: border-box;
|
||||
border-color: transparent;
|
||||
margin: 3px 0 3px 6px;
|
||||
|
|
@ -130,7 +128,7 @@
|
|||
|
||||
&::before {
|
||||
display: block;
|
||||
transform: scale(.6);
|
||||
transform: scale(.65);
|
||||
}
|
||||
}
|
||||
}
|
||||
|
|
|
|||
|
|
@ -6,6 +6,7 @@
|
|||
|
||||
@include b(slider) {
|
||||
@include utils-clearfix;
|
||||
|
||||
@include e(runway) {
|
||||
width: 100%;
|
||||
height: $--slider-height;
|
||||
|
|
|
|||
|
|
@ -5,8 +5,8 @@
|
|||
background-color: $--tag-fill;
|
||||
display: inline-block;
|
||||
padding: $--tag-padding;
|
||||
height: 30px;
|
||||
line-height: 28px;
|
||||
height: 32px;
|
||||
line-height: 30px;
|
||||
font-size: $--tag-font-size;
|
||||
color: $--tag-color;
|
||||
border-radius: $--tag-border-radius;
|
||||
|
|
@ -14,7 +14,7 @@
|
|||
border: 1px solid $--tag-border;
|
||||
white-space: nowrap;
|
||||
|
||||
& .el-icon-close {
|
||||
.el-icon-close {
|
||||
border-radius: 50%;
|
||||
text-align: center;
|
||||
position: relative;
|
||||
|
|
@ -26,9 +26,14 @@
|
|||
line-height: 18px;
|
||||
vertical-align: middle;
|
||||
top: -1px;
|
||||
right: -2px;
|
||||
right: -5px;
|
||||
color: $--tag-color;
|
||||
|
||||
&::before {
|
||||
display: block;
|
||||
transform: scale(.8);
|
||||
}
|
||||
|
||||
&:hover {
|
||||
background-color: $--tag-color;
|
||||
color: $--color-white;
|
||||
|
|
@ -39,68 +44,105 @@
|
|||
background-color: $--tag-info-fill;
|
||||
border-color: $--tag-info-border;
|
||||
color: $--tag-info-color;
|
||||
|
||||
@include when(hit) {
|
||||
border-color: $--tag-info-color;
|
||||
}
|
||||
|
||||
& .el-tag__close {
|
||||
.el-tag__close {
|
||||
color: $--tag-info-color;
|
||||
}
|
||||
|
||||
& .el-tag__close:hover {
|
||||
.el-tag__close:hover {
|
||||
background-color: $--tag-info-color;
|
||||
color: $--color-white;
|
||||
}
|
||||
}
|
||||
|
||||
@include m(success) {
|
||||
background-color: $--tag-success-fill;
|
||||
border-color: $--tag-success-border;
|
||||
color: $--tag-success-color;
|
||||
|
||||
@include when(hit) {
|
||||
border-color: $--tag-success-color;
|
||||
}
|
||||
|
||||
& .el-tag__close {
|
||||
.el-tag__close {
|
||||
color: $--tag-success-color;
|
||||
}
|
||||
|
||||
& .el-tag__close:hover {
|
||||
.el-tag__close:hover {
|
||||
background-color: $--tag-success-color;
|
||||
color: $--color-white;
|
||||
}
|
||||
}
|
||||
|
||||
@include m(warning) {
|
||||
background-color: $--tag-warning-fill;
|
||||
border-color: $--tag-warning-border;
|
||||
color: $--tag-warning-color;
|
||||
|
||||
@include when(hit) {
|
||||
border-color: $--tag-warning-color;
|
||||
}
|
||||
|
||||
& .el-tag__close {
|
||||
.el-tag__close {
|
||||
color: $--tag-warning-color;
|
||||
}
|
||||
|
||||
& .el-tag__close:hover {
|
||||
.el-tag__close:hover {
|
||||
background-color: $--tag-warning-color;
|
||||
color: $--color-white;
|
||||
}
|
||||
}
|
||||
|
||||
@include m(danger) {
|
||||
background-color: $--tag-danger-fill;
|
||||
border-color: $--tag-danger-border;
|
||||
color: $--tag-danger-color;
|
||||
|
||||
@include when(hit) {
|
||||
border-color: $--tag-danger-color;
|
||||
}
|
||||
|
||||
& .el-tag__close {
|
||||
.el-tag__close {
|
||||
color: $--tag-danger-color;
|
||||
}
|
||||
|
||||
& .el-tag__close:hover {
|
||||
.el-tag__close:hover {
|
||||
background-color: $--tag-danger-color;
|
||||
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);
|
||||
}
|
||||
}
|
||||
}
|
||||
|
|
|
|||
|
|
@ -10,12 +10,14 @@
|
|||
@include e(input) {
|
||||
display: none;
|
||||
}
|
||||
|
||||
@include e(tip) {
|
||||
font-size: 12px;
|
||||
color: $--color-black;
|
||||
color: $--color-text-regular;
|
||||
margin-top: 7px;
|
||||
}
|
||||
& iframe {
|
||||
|
||||
iframe {
|
||||
position: absolute;
|
||||
z-index: -1;
|
||||
top: 0;
|
||||
|
|
@ -23,6 +25,7 @@
|
|||
opacity: 0;
|
||||
filter: alpha(opacity=0);
|
||||
}
|
||||
|
||||
/* 照片墙模式 */
|
||||
@include m(picture-card) {
|
||||
background-color: #fbfdff;
|
||||
|
|
@ -59,27 +62,29 @@
|
|||
position: relative;
|
||||
overflow: hidden;
|
||||
|
||||
& .el-icon-upload {
|
||||
.el-icon-upload {
|
||||
font-size: 67px;
|
||||
color: $--color-black;
|
||||
color: $--color-text-placeholder;
|
||||
margin: 40px 0 16px;
|
||||
line-height: 50px;
|
||||
}
|
||||
|
||||
& + .el-upload__tip {
|
||||
+ .el-upload__tip {
|
||||
text-align: center;
|
||||
}
|
||||
& ~ .el-upload__files {
|
||||
border-top: 1px solid rgba($--color-black, .2);
|
||||
|
||||
~ .el-upload__files {
|
||||
border-top: $--border-base;
|
||||
margin-top: 7px;
|
||||
padding-top: 5px;
|
||||
}
|
||||
|
||||
.el-upload__text {
|
||||
color: $--color-black;
|
||||
color: $--color-text-regular;
|
||||
font-size: 14px;
|
||||
text-align: center;
|
||||
|
||||
& em {
|
||||
em {
|
||||
color: $--color-primary;
|
||||
font-style: normal;
|
||||
}
|
||||
|
|
@ -103,7 +108,7 @@
|
|||
@include e(item) {
|
||||
transition: all .5s cubic-bezier(.55,0,.1,1);
|
||||
font-size: 14px;
|
||||
color: $--color-black;
|
||||
color: $--color-text-regular;
|
||||
line-height: 1.8;
|
||||
margin-top: 5px;
|
||||
position: relative;
|
||||
|
|
@ -111,58 +116,68 @@
|
|||
border-radius: 4px;
|
||||
width: 100%;
|
||||
|
||||
& .el-progress {
|
||||
.el-progress {
|
||||
position: absolute;
|
||||
top: 20px;
|
||||
width: 100%;
|
||||
}
|
||||
& .el-progress__text {
|
||||
|
||||
.el-progress__text {
|
||||
position: absolute;
|
||||
right: 0;
|
||||
top: -13px;
|
||||
}
|
||||
|
||||
.el-progress-bar {
|
||||
margin-right: 0;
|
||||
padding-right: 0;
|
||||
}
|
||||
|
||||
&:first-child {
|
||||
margin-top: 10px;
|
||||
}
|
||||
|
||||
& .el-icon-upload-success {
|
||||
color: $--color-success;
|
||||
}
|
||||
& .el-icon-close {
|
||||
|
||||
.el-icon-close {
|
||||
display: none;
|
||||
position: absolute;
|
||||
top: 5px;
|
||||
right: 5px;
|
||||
cursor: pointer;
|
||||
opacity: .75;
|
||||
color: $--color-black;
|
||||
color: $--color-text-regular;
|
||||
transform: scale(.7);
|
||||
|
||||
&:hover {
|
||||
opacity: 1;
|
||||
}
|
||||
}
|
||||
|
||||
&:hover {
|
||||
background-color: $--color-black;
|
||||
background-color: $--background-color-base;
|
||||
|
||||
.el-icon-close {
|
||||
display: inline-block;
|
||||
}
|
||||
|
||||
.el-progress__text {
|
||||
display: none;
|
||||
}
|
||||
}
|
||||
|
||||
@include when(success) {
|
||||
.el-upload-list__item-status-label {
|
||||
display: block;
|
||||
}
|
||||
|
||||
.el-upload-list__item-name:hover {
|
||||
color: $--link-hover-color;
|
||||
cursor: pointer;
|
||||
}
|
||||
|
||||
&:hover {
|
||||
.el-upload-list__item-status-label {
|
||||
display: none;
|
||||
|
|
@ -170,13 +185,15 @@
|
|||
}
|
||||
}
|
||||
}
|
||||
|
||||
@include when(disabled) {
|
||||
.el-upload-list__item:hover .el-upload-list__item-status-label {
|
||||
display: block;
|
||||
}
|
||||
}
|
||||
|
||||
@include e(item-name) {
|
||||
color: $--color-black;
|
||||
color: $--color-text-regular;
|
||||
display: block;
|
||||
margin-right: 40px;
|
||||
overflow: hidden;
|
||||
|
|
@ -186,12 +203,13 @@
|
|||
white-space: nowrap;
|
||||
|
||||
[class^="el-icon"] {
|
||||
color: $--color-black;
|
||||
margin-right: 7px;
|
||||
height: 100%;
|
||||
margin-right: 7px;
|
||||
color: $--color-text-secondary;
|
||||
line-height: inherit;
|
||||
}
|
||||
}
|
||||
|
||||
@include e(item-status-label) {
|
||||
position: absolute;
|
||||
right: 5px;
|
||||
|
|
@ -199,18 +217,20 @@
|
|||
line-height: inherit;
|
||||
display: none;
|
||||
}
|
||||
|
||||
@include e(item-delete) {
|
||||
position: absolute;
|
||||
right: 10px;
|
||||
top: 0;
|
||||
font-size: 12px;
|
||||
color: $--color-black;
|
||||
color: $--color-text-regular;
|
||||
display: none;
|
||||
|
||||
&:hover {
|
||||
color: $--color-primary;
|
||||
}
|
||||
}
|
||||
|
||||
@include m(picture-card) {
|
||||
margin: 0;
|
||||
display: inline;
|
||||
|
|
@ -223,16 +243,16 @@
|
|||
border-radius: 6px;
|
||||
box-sizing: border-box;
|
||||
width: 148px;
|
||||
height: 148;
|
||||
height: 148px;
|
||||
margin: 0 8px 8px 0;
|
||||
display: inline-block;
|
||||
|
||||
& .el-icon-check,
|
||||
& .el-icon-circle-check {
|
||||
.el-icon-check,
|
||||
.el-icon-circle-check {
|
||||
color: $--color-white;
|
||||
}
|
||||
|
||||
& .el-icon-close {
|
||||
.el-icon-close {
|
||||
display: none;
|
||||
}
|
||||
|
||||
|
|
@ -240,18 +260,22 @@
|
|||
.el-upload-list__item-status-label {
|
||||
display: none;
|
||||
}
|
||||
|
||||
.el-progress__text {
|
||||
display: block;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.el-upload-list__item-name {
|
||||
display: none;
|
||||
}
|
||||
|
||||
.el-upload-list__item-thumbnail {
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
}
|
||||
|
||||
.el-upload-list__item-status-label {
|
||||
position: absolute;
|
||||
right: -15px;
|
||||
|
|
@ -269,6 +293,7 @@
|
|||
transform: rotate(-45deg) scale(0.8);
|
||||
}
|
||||
}
|
||||
|
||||
.el-upload-list__item-actions {
|
||||
position: absolute;
|
||||
width: 100%;
|
||||
|
|
@ -288,6 +313,7 @@
|
|||
display: none;
|
||||
cursor: pointer;
|
||||
}
|
||||
|
||||
span + span {
|
||||
margin-left: 15px;
|
||||
}
|
||||
|
|
@ -305,6 +331,7 @@
|
|||
}
|
||||
}
|
||||
}
|
||||
|
||||
.el-progress {
|
||||
top: 50%;
|
||||
left: 50%;
|
||||
|
|
@ -317,6 +344,7 @@
|
|||
}
|
||||
}
|
||||
}
|
||||
|
||||
@include m(picture) {
|
||||
.el-upload-list__item {
|
||||
overflow: hidden;
|
||||
|
|
@ -328,10 +356,11 @@
|
|||
padding: 10px 10px 10px 90px;
|
||||
height: 92px;
|
||||
|
||||
& .el-icon-check,
|
||||
& .el-icon-circle-check {
|
||||
.el-icon-check,
|
||||
.el-icon-circle-check {
|
||||
color: $--color-white;
|
||||
}
|
||||
|
||||
&:hover {
|
||||
.el-upload-list__item-status-label {
|
||||
background: transparent;
|
||||
|
|
@ -339,10 +368,12 @@
|
|||
top: -2px;
|
||||
right: -12px;
|
||||
}
|
||||
|
||||
.el-progress__text {
|
||||
display: block;
|
||||
}
|
||||
}
|
||||
|
||||
&.is-success {
|
||||
.el-upload-list__item-name {
|
||||
line-height: 70px;
|
||||
|
|
@ -354,6 +385,7 @@
|
|||
}
|
||||
}
|
||||
}
|
||||
|
||||
.el-upload-list__item-thumbnail {
|
||||
vertical-align: middle;
|
||||
display: inline-block;
|
||||
|
|
@ -364,6 +396,7 @@
|
|||
z-index: 1;
|
||||
margin-left: -80px;
|
||||
}
|
||||
|
||||
.el-upload-list__item-name {
|
||||
display: block;
|
||||
margin-top: 20px;
|
||||
|
|
@ -376,6 +409,7 @@
|
|||
top: 10px;
|
||||
}
|
||||
}
|
||||
|
||||
.el-upload-list__item-status-label {
|
||||
position: absolute;
|
||||
right: -17px;
|
||||
|
|
@ -393,6 +427,7 @@
|
|||
transform: rotate(-45deg) scale(0.8);
|
||||
}
|
||||
}
|
||||
|
||||
.el-progress {
|
||||
position: relative;
|
||||
top: -7px;
|
||||
|
|
@ -411,7 +446,7 @@
|
|||
cursor: default;
|
||||
@include utils-vertical-center;
|
||||
|
||||
& img {
|
||||
img {
|
||||
display: block;
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
|
|
@ -442,7 +477,7 @@
|
|||
position: static;
|
||||
width: 243px;
|
||||
|
||||
& + .el-upload__inner {
|
||||
+ .el-upload__inner {
|
||||
opacity: 0;
|
||||
}
|
||||
}
|
||||
|
|
@ -464,7 +499,7 @@
|
|||
background-color: rgba(#000, .72);
|
||||
text-align: center;
|
||||
|
||||
& .btn {
|
||||
.btn {
|
||||
display: inline-block;
|
||||
color: $--color-white;
|
||||
font-size: 14px;
|
||||
|
|
@ -473,11 +508,11 @@
|
|||
transition: $--md-fade-transition;
|
||||
margin-top: 60px;
|
||||
|
||||
& i {
|
||||
i {
|
||||
margin-top: 0;
|
||||
}
|
||||
|
||||
& span {
|
||||
span {
|
||||
opacity: 0;
|
||||
transition: opacity .15s linear;
|
||||
}
|
||||
|
|
@ -489,12 +524,12 @@
|
|||
&:hover {
|
||||
transform: translateY(-13px);
|
||||
|
||||
& span {
|
||||
span {
|
||||
opacity: 1;
|
||||
}
|
||||
}
|
||||
|
||||
& i {
|
||||
i {
|
||||
color: $--color-white;
|
||||
display: block;
|
||||
font-size: 24px;
|
||||
|
|
@ -520,10 +555,10 @@
|
|||
margin: 0;
|
||||
line-height: 36px;
|
||||
font-size: 14px;
|
||||
color: $--color-black;
|
||||
color: $--color-text-primary;
|
||||
}
|
||||
|
||||
& + .el-upload__inner {
|
||||
+ .el-upload__inner {
|
||||
opacity: 0;
|
||||
position: relative;
|
||||
z-index: 1;
|
||||
|
|
|
|||
Loading…
Reference in New Issue