drip-public/iview
5
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity Actions

Merge branch '2.0' into table_render

Browse source
This commit is contained in:
anykno 2017-05-30 01:00:16 +08:00 • committed by GitHub
commit 12fd2dc580
19 changed files with 443 additions and 77 deletions
Download patch file Download diff file Expand all files Collapse all files

101
examples/components/table.vue Normal file
View file

@ -0,0 +1,101 @@
<template>
<Table width="550" border :columns="columns2" :data="data3"></Table>
</template>
<script>
export default {
name: 'etable',
data () {
return {
columns2: [
{
title: '姓名',
key: 'name',
width: 100,
fixed: 'left'
},
{
title: '年龄',
key: 'age',
width: 100
},
{
title: '省份',
key: 'province',
width: 100
},
{
title: '市区',
key: 'city',
width: 100
},
{
title: '地址',
key: 'address',
width: 200
},
{
title: '邮编',
key: 'zip',
width: 100
},
{
title: '操作',
key: 'action',
fixed: 'right',
width: 120,
render: (h, params) => {
return h('div', [
h('Button', {
props: {
type: 'text',
size: 'small'
}
}, '查看'),
h('Button', {
props: {
type: 'text',
size: 'small'
}
}, '编辑')
]);
}
}
],
data3: [
{
name: '王小明',
age: 18,
address: '北京市朝阳区芍药居',
province: '北京市',
city: '朝阳区',
zip: 100000
},
{
name: '张小刚',
age: 25,
address: '北京市海淀区西二旗',
province: '北京市',
city: '海淀区',
zip: 100000
},
{
name: '李小红',
age: 30,
address: '上海市浦东新区世纪大道',
province: '上海市',
city: '浦东新区',
zip: 100000
},
{
name: '周小伟',
age: 26,
address: '深圳市南山区深南大道',
province: '广东',
city: '南山区',
zip: 100000
}
]
}
}
}
</script>

2
examples/routers/notice.vue
View file

@ -14,7 +14,7 @@
mounted () { mounted () {
this.$Notice.config({ this.$Notice.config({
top: 150, top: 150,
duration: 3 duration: 30
}); });
} }
} }

86
examples/routers/table.vue
View file

@ -1,37 +1,39 @@
<template> <template>
<div> <Table border :columns="columns7" :data="data6" @on-expand="expand"></Table>
<Table border :columns="columns7" :data="data6"></Table>
<Button @click="handleAdd"> + 1</Button>
</div>
</template> </template>
<script> <script>
import abc from '../components/test.vue'; import etable from '../components/table.vue';
export default { export default {
components: { abc }, components: { etable },
data () { data () {
return { return {
data1: 1,
self: this,
columns7: [ columns7: [
{
type: 'expand',
width: 50,
render: (h, params) => {
// return h(etable);
return h('div', params.row.name)
}
},
{ {
title: '姓名', title: '姓名',
key: 'name', key: 'name',
// render (row, column, index) { render: (h, params) => {
// return `<abc></abc>`;
// }
render: (h, row, column, index) => {
return h('div', [ return h('div', [
h('Button',{ h('Icon', {
on: { props: {
click: this.handleClick type: 'person'
} }
}, 'hello') }),
]) h('strong', params.row.name)
]);
} }
}, },
{ {
title: '年龄', title: '年龄',
key: 'age' key: 'age',
sortable: true
}, },
{ {
title: '地址', title: '地址',
@ -42,9 +44,35 @@
key: 'action', key: 'action',
width: 150, width: 150,
align: 'center', align: 'center',
// render (row, column, index) { render: (h, params) => {
// return `<i-button type="primary" size="small" @click="show(${index})">查看</i-button> <i-button type="error" size="small" @click="remove(${index})">删除</i-button>`; return h('div', [
// } h('Button', {
props: {
type: 'primary',
size: 'small'
},
style: {
marginRight: '5px'
},
on: {
click: () => {
this.show(params.index)
}
}
}, '查看'),
h('Button', {
props: {
type: 'error',
size: 'small'
},
on: {
click: () => {
this.remove(params.index)
}
}
}, '删除')
]);
}
} }
], ],
data6: [ data6: [
@ -61,7 +89,8 @@
{ {
name: '李小红', name: '李小红',
age: 30, age: 30,
address: '上海市浦东新区世纪大道' address: '上海市浦东新区世纪大道',
_expanded: true
}, },
{ {
name: '周小伟', name: '周小伟',
@ -71,11 +100,6 @@
] ]
} }
}, },
computed: {
ttt () {
return this.data1 + 1;
}
},
methods: { methods: {
show (index) { show (index) {
this.$Modal.info({ this.$Modal.info({
@ -86,11 +110,9 @@
remove (index) { remove (index) {
this.data6.splice(index, 1); this.data6.splice(index, 1);
}, },
handleAdd () { expand (row, s) {
this.data1++; // console.log(row);
}, // console.log(s);
handleClick () {
this.$Message.info('111')
} }
} }
} }

2
examples/routers/transfer.vue
View file

@ -178,7 +178,7 @@
setTimeout(function() { setTimeout(function() {
console.log('--1'); console.log('--1');
// _this.data1 = null; // _this.data1 = null;
_this.data1 = _this.getMockData1(); // _this.data1 = _this.getMockData1();
console.log('-fetch-', _this.data1); console.log('-fetch-', _this.data1);
}, 1500); }, 1500);

3
src/components/back-top/back-top.vue
View file

@ -67,7 +67,8 @@
this.backTop = window.pageYOffset >= this.height; this.backTop = window.pageYOffset >= this.height;
}, },
back () { back () {
scrollTop(window, document.body.scrollTop, 0, this.duration); const sTop = document.documentElement.scrollTop || document.body.scrollTop;
scrollTop(window, sTop, 0, this.duration);
this.$emit('on-click'); this.$emit('on-click');
} }
} }

1
src/components/input/input.vue
View file

@ -37,6 +37,7 @@
:readonly="readonly" :readonly="readonly"
:name="name" :name="name"
:value="value" :value="value"
:autofocus="autofocus"
@keyup.enter="handleEnter" @keyup.enter="handleEnter"
@focus="handleFocus" @focus="handleFocus"
@blur="handleBlur" @blur="handleBlur"

2
src/components/select/select.vue
View file

@ -155,6 +155,8 @@
if (!this.model.length) { if (!this.model.length) {
status = true; status = true;
} }
} else if( this.model === null){
status = true;
} }
return status; return status;

29
src/components/table/cell.vue
View file

@ -4,18 +4,25 @@
<template v-if="renderType === 'selection'"> <template v-if="renderType === 'selection'">
<Checkbox :value="checked" @on-change="toggleSelect" :disabled="disabled"></Checkbox> <Checkbox :value="checked" @on-change="toggleSelect" :disabled="disabled"></Checkbox>
</template> </template>
<template v-if="renderType === 'html'"><span v-html="row[column.key]"></span></template> <template v-if="renderType === 'html'"><span v-html="row[column.key]"></span></template>
<template v-if="renderType === 'normal'"><span>{{row[column.key]}}</span></template> <template v-if="renderType === 'normal'"><span>{{row[column.key]}}</span></template>
<template v-if="renderType === 'expand'">
<div :class="expandCls" @click="toggleExpand">
<Icon type="ios-arrow-right"></Icon>
</div>
</template>
</div> </div>
</template> </template>
<script> <script>
import Vue from 'vue'; import Vue from 'vue';
import Icon from '../icon/icon.vue';
import Checkbox from '../checkbox/checkbox.vue'; import Checkbox from '../checkbox/checkbox.vue';
import { findComponentUpward } from '../../utils/assist'; import { findComponentUpward } from '../../utils/assist';
export default { export default {
name: 'TableCell', name: 'TableCell',
components: { Checkbox }, components: { Icon, Checkbox },
props: { props: {
prefixCls: String, prefixCls: String,
row: Object, row: Object,
@ -24,6 +31,7 @@
index: Number, // _index of data index: Number, // _index of data
checked: Boolean, checked: Boolean,
disabled: Boolean, disabled: Boolean,
expanded: Boolean,
fixed: { fixed: {
type: [Boolean, String], type: [Boolean, String],
default: false default: false
@ -42,20 +50,30 @@
`${this.prefixCls}-cell`, `${this.prefixCls}-cell`,
{ {
[`${this.prefixCls}-hidden`]: !this.fixed && this.column.fixed && (this.column.fixed === 'left' || this.column.fixed === 'right'), [`${this.prefixCls}-hidden`]: !this.fixed && this.column.fixed && (this.column.fixed === 'left' || this.column.fixed === 'right'),
[`${this.prefixCls}-cell-ellipsis`]: this.column.ellipsis || false [`${this.prefixCls}-cell-ellipsis`]: this.column.ellipsis || false,
[`${this.prefixCls}-cell-with-expand`]: this.renderType === 'expand'
}
];
},
expandCls () {
return [
`${this.prefixCls}-cell-expand`,
{
[`${this.prefixCls}-cell-expand-expanded`]: this.expanded
} }
]; ];
} }
}, },
methods: { methods: {
compile () { compile () {
if (this.column.render) { if (this.column.render && this.renderType === 'render') {
// 兼容真 Render，后期废弃旧用法 // 兼容真 Render，后期废弃旧用法
let isRealRender = true; let isRealRender = true;
const Table = findComponentUpward(this, 'Table'); const Table = findComponentUpward(this, 'Table');
if (Table.context) isRealRender = false; if (Table.context) isRealRender = false;
if (isRealRender) { if (isRealRender) {
this.$el.innerHTML = '';
const component = new Vue({ const component = new Vue({
functional: true, functional: true,
render: (h) => { render: (h) => {
@ -114,6 +132,9 @@
}, },
toggleSelect () { toggleSelect () {
this.$parent.$parent.toggleSelect(this.index); this.$parent.$parent.toggleSelect(this.index);
},
toggleExpand () {
this.$parent.$parent.toggleExpand(this.index);
} }
}, },
created () { created () {
@ -123,6 +144,8 @@
this.renderType = 'selection'; this.renderType = 'selection';
} else if (this.column.type === 'html') { } else if (this.column.type === 'html') {
this.renderType = 'html'; this.renderType = 'html';
} else if (this.column.type === 'expand') {
this.renderType = 'expand';
} else if (this.column.render) { } else if (this.column.render) {
this.renderType = 'render'; this.renderType = 'render';
} else { } else {

37
src/components/table/expand.vue Normal file
View file

@ -0,0 +1,37 @@
<template>
<div ref="cell"></div>
</template>
<script>
import Vue from 'vue';
export default {
name: 'TableExpand',
props: {
row: Object,
render: Function,
index: Number,
},
methods: {
compile () {
if (this.render) {
this.$el.innerHTML = '';
const component = new Vue({
functional: true,
render: (h) => {
return this.render(h, {
row: this.row,
index: this.index
});
}
});
const Cell = component.$mount();
this.$refs.cell.appendChild(Cell.$el);
}
}
},
mounted () {
this.$nextTick(() => {
this.compile();
});
}
};
</script>

29
src/components/table/table-body.vue
View file

@ -4,8 +4,8 @@
<col v-for="(column, index) in columns" :width="setCellWidth(column, index, false)"> <col v-for="(column, index) in columns" :width="setCellWidth(column, index, false)">
</colgroup> </colgroup>
<tbody :class="[prefixCls + '-tbody']"> <tbody :class="[prefixCls + '-tbody']">
<template v-for="(row, index) in data">
<tr <tr
v-for="(row, index) in data"
:key="row" :key="row"
:class="rowClasses(row._index)" :class="rowClasses(row._index)"
@mouseenter.stop="handleMouseIn(row._index)" @mouseenter.stop="handleMouseIn(row._index)"
@ -22,21 +22,29 @@
:index="row._index" :index="row._index"
:checked="rowChecked(row._index)" :checked="rowChecked(row._index)"
:disabled="rowDisabled(row._index)" :disabled="rowDisabled(row._index)"
:expanded="rowExpanded(row._index)"
></Cell> ></Cell>
</td> </td>
</tr> </tr>
<tr v-if="rowExpanded(row._index)">
<td :colspan="columns.length" :class="prefixCls + '-expanded-cell'">
<Expand :row="row" :render="expandRender" :index="row._index"></Expand>
</td>
</tr>
</template>
</tbody> </tbody>
</table> </table>
</template> </template>
<script> <script>
// todo :key="row" // todo :key="row"
import Cell from './cell.vue'; import Cell from './cell.vue';
import Expand from './expand.vue';
import Mixin from './mixin'; import Mixin from './mixin';
export default { export default {
name: 'TableBody', name: 'TableBody',
mixins: [ Mixin ], mixins: [ Mixin ],
components: { Cell }, components: { Cell, Expand },
props: { props: {
prefixCls: String, prefixCls: String,
styleObject: Object, styleObject: Object,
@ -49,6 +57,20 @@
default: false default: false
} }
}, },
computed: {
expandRender () {
let render = function () {
return '';
};
for (let i = 0; i < this.columns.length; i++) {
const column = this.columns[i];
if (column.type && column.type === 'expand') {
if (column.render) render = column.render;
}
}
return render;
}
},
methods: { methods: {
rowClasses (_index) { rowClasses (_index) {
return [ return [
@ -66,6 +88,9 @@
rowDisabled(_index){ rowDisabled(_index){
return this.objData[_index] && this.objData[_index]._isDisabled; return this.objData[_index] && this.objData[_index]._isDisabled;
}, },
rowExpanded(_index){
return this.objData[_index] && this.objData[_index]._isExpanded;
},
rowClsName (_index) { rowClsName (_index) {
return this.$parent.rowClassName(this.objData[_index], _index); return this.$parent.rowClassName(this.objData[_index], _index);
}, },

3
src/components/table/table-head.vue
View file

@ -7,7 +7,8 @@
<tr> <tr>
<th v-for="(column, index) in columns" :class="alignCls(column)"> <th v-for="(column, index) in columns" :class="alignCls(column)">
<div :class="cellClasses(column)"> <div :class="cellClasses(column)">
<template v-if="column.type === 'selection'"><Checkbox :value="isSelectAll" @on-change="selectAll"></Checkbox></template> <template v-if="column.type === 'expand'"></template>
<template v-else-if="column.type === 'selection'"><Checkbox :value="isSelectAll" @on-change="selectAll"></Checkbox></template>
<template v-else> <template v-else>
<span v-html="renderHeader(column, index)"></span> <span v-html="renderHeader(column, index)"></span>
<span :class="[prefixCls + '-sort']" v-if="column.sortable"> <span :class="[prefixCls + '-sort']" v-if="column.sortable">

17
src/components/table/table.vue
View file

@ -404,6 +404,18 @@
} }
this.$emit('on-selection-change', selection); this.$emit('on-selection-change', selection);
}, },
toggleExpand (_index) {
let data = {};
for (let i in this.objData) {
if (parseInt(i) === _index) {
data = this.objData[i];
}
}
const status = !data._isExpanded;
this.objData[_index]._isExpanded = status;
this.$emit('on-expand', JSON.parse(JSON.stringify(this.cloneData[_index])), status);
},
selectAll (status) { selectAll (status) {
// this.rebuildData.forEach((data) => { // this.rebuildData.forEach((data) => {
// if(this.objData[data._index]._isDisabled){ // if(this.objData[data._index]._isDisabled){
@ -591,6 +603,11 @@
} else { } else {
newRow._isChecked = false; newRow._isChecked = false;
} }
if (newRow._expanded) {
newRow._isExpanded = newRow._expanded;
} else {
newRow._isExpanded = false;
}
if (newRow._highlight) { if (newRow._highlight) {
newRow._isHighlight = newRow._highlight; newRow._isHighlight = newRow._highlight;
} else { } else {

2
src/components/transfer/list.vue
View file

@ -2,7 +2,7 @@
<div :class="classes" :style="listStyle"> <div :class="classes" :style="listStyle">
<div :class="prefixCls + '-header'"> <div :class="prefixCls + '-header'">
<Checkbox :value="checkedAll" :disabled="checkedAllDisabled" @on-change="toggleSelectAll"></Checkbox> <Checkbox :value="checkedAll" :disabled="checkedAllDisabled" @on-change="toggleSelectAll"></Checkbox>
<span>{{ title }}</span> <span :class="prefixCls + '-header-title'" @click="toggleSelectAll(!checkedAll)">{{ title }}</span>
<span :class="prefixCls + '-header-count'">{{ count }}</span> <span :class="prefixCls + '-header-count'">{{ count }}</span>
</div> </div>
<div :class="bodyClasses"> <div :class="bodyClasses">

96
src/locale/lang/ru-RU.js Normal file
View file

@ -0,0 +1,96 @@
export default {
i: {
select: {
placeholder: 'Выбрать',
noMatch: 'Нет соответствующих данных',
loading: 'Загрузка'
},
table: {
noDataText: 'Нет данных',
noFilteredDataText: 'Нет данных по фильтру',
confirmFilter: 'Подтвердить',
resetFilter: 'Сброс',
clearFilter: 'Все'
},
datepicker: {
selectDate: 'Выбрать дату',
selectTime: 'Выбрать время',
startTime: 'Начальное время',
endTime: 'Конечное время',
clear: 'Очистить',
ok: 'OK',
month: '',
month1: 'Январь',
month2: 'Февраль',
month3: 'Март',
month4: 'Апрель',
month5: 'Май',
month6: 'Июнь',
month7: 'Июль',
month8: 'Август',
month9: 'Сентябрь',
month10: 'Октябрь',
month11: 'Ноябрь',
month12: 'Декабрь',
year: '',
weeks: {
sun: 'Вс',
mon: 'Пн',
tue: 'Вт',
wed: 'Ср',
thu: 'Чт',
fri: 'Пт',
sat: 'Сб'
},
months: {
m1: 'Янв',
m2: 'Фев',
m3: 'Мар',
m4: 'Апр',
m5: 'Май',
m6: 'Июн',
m7: 'Июл',
m8: 'Авг',
m9: 'Сен',
m10: 'Окт',
m11: 'Ноя',
m12: 'Дек'
}
},
transfer: {
titles: {
source: 'Источник',
target: 'Цель'
},
filterPlaceholder: 'Искать здесь',
notFoundText: 'Не Найдено'
},
modal: {
okText: 'OK',
cancelText: 'Отменить'
},
poptip: {
okText: 'OK',
cancelText: 'Отменить'
},
page: {
prev: 'Пред. страница',
next: 'След. страница',
total: 'Всего',
item: 'пункт',
items: 'пункты',
prev5: 'Пред. 5 страниц',
next5: 'След. 5 страниц',
page: '/page',
goto: 'Идти к',
p: ''
},
rate: {
star: 'Звезда',
stars: 'Звезды'
},
tree: {
emptyText: 'Нет данных'
}
}
};

4
src/styles/components/notice.less
View file

@ -50,6 +50,7 @@
white-space: nowrap; white-space: nowrap;
} }
&-with-desc &-title{ &-with-desc &-title{
font-weight: bold;
margin-bottom: 8px; margin-bottom: 8px;
} }
&-with-desc&-with-icon &-title{ &-with-desc&-with-icon &-title{
@ -58,7 +59,8 @@
&-desc { &-desc {
font-size: 12px; font-size: 12px;
color: @legend-color; //color: @legend-color;
color: @text-color;
text-align: justify; text-align: justify;
line-height: 1.5; line-height: 1.5;
} }

34
src/styles/components/table.less
View file

@ -145,6 +145,24 @@
overflow: hidden; overflow: hidden;
text-overflow: ellipsis; text-overflow: ellipsis;
} }
&-with-expand{
height: 47px;
line-height: 47px;
padding: 0;
text-align: center;
}
&-expand{
cursor: pointer;
transition: transform @transition-time @ease-in-out;
i{
font-size: @font-size-base;
}
&-expanded{
transform: rotate(90deg);
}
}
} }
&-hidden{ &-hidden{
visibility: hidden; visibility: hidden;
@ -156,6 +174,11 @@
vertical-align: middle; vertical-align: middle;
} }
td&-expanded-cell{
padding: 20px 50px;
background: @table-thead-bg;
}
&-stripe &-body, &-stripe &-body,
&-stripe &-fixed-body &-stripe &-fixed-body
{ {
@ -184,6 +207,13 @@
height: 60px; height: 60px;
line-height: 60px; line-height: 60px;
} }
.@{table-prefix-cls}-cell-with-expand{
height: 59px;
line-height: 59px;
i{
font-size: @font-size-base+2;
}
}
} }
&-small{ &-small{
@ -197,6 +227,10 @@
height: 40px; height: 40px;
line-height: 40px; line-height: 40px;
} }
.@{table-prefix-cls}-cell-with-expand{
height: 39px;
line-height: 39px;
}
} }
&-row-highlight, &-row-highlight,

4
src/styles/components/transfer.less
View file

@ -31,6 +31,10 @@
left: 0; left: 0;
width: 100%; width: 100%;
&-title{
cursor: pointer;
}
& > span{ & > span{
padding-left: 4px; padding-left: 4px;
} }

24
src/styles/custom.less
View file

@ -3,25 +3,25 @@
@css-prefix-iconfont : ivu-icon; @css-prefix-iconfont : ivu-icon;
// Color // Color
@primary-color : #3399ff; @primary-color : #2d8cf0;
@info-color : #2db7f5; @info-color : #2db7f5;
@success-color : #00cc66; @success-color : #19be6b;
@warning-color : #ff9900; @warning-color : #ff9900;
@error-color : #ff3300; @error-color : #ed3f14;
@link-color : #3399ff; @link-color : #2D8cF0;
@link-hover-color : tint(@link-color, 20%); @link-hover-color : tint(@link-color, 20%);
@link-active-color : shade(@link-color, 5%); @link-active-color : shade(@link-color, 5%);
@selected-color : fade(@primary-color, 90%); @selected-color : fade(@primary-color, 90%);
@tooltip-color : #fff; @tooltip-color : #fff;
@subsidiary-color : #9ea7b4; @subsidiary-color : #80848f;
@rate-star-color : #f5a623; @rate-star-color : #f5a623;
// Base // Base
@body-background : #fff; @body-background : #fff;
@font-family : "Helvetica Neue",Helvetica,"PingFang SC","Hiragino Sans GB","Microsoft YaHei","微软雅黑",Arial,sans-serif; @font-family : "Helvetica Neue",Helvetica,"PingFang SC","Hiragino Sans GB","Microsoft YaHei","微软雅黑",Arial,sans-serif;
@code-family : Consolas,Menlo,Courier,monospace; @code-family : Consolas,Menlo,Courier,monospace;
@title-color : #464c5b; @title-color : #1c2438;
@text-color : #657180; @text-color : #495060;
@font-size-base : 14px; @font-size-base : 14px;
@font-size-small : 12px; @font-size-small : 12px;
@line-height-base : 1.5; @line-height-base : 1.5;
@ -31,16 +31,16 @@
@cursor-disabled : not-allowed; @cursor-disabled : not-allowed;
// Border color // Border color
@border-color-base : #d7dde4; // outside @border-color-base : #dddee1; // outside
@border-color-split : #e3e8ee; // inside @border-color-split : #e9eaec; // inside
// Background color // Background color
@background-color-base : #f7f7f7; // base @background-color-base : #f7f7f7; // base
@background-color-select-hover: @input-disabled-bg; @background-color-select-hover: @input-disabled-bg;
@tooltip-bg : rgba(70, 76, 91, .9); @tooltip-bg : rgba(70, 76, 91, .9);
@head-bg : #f9fafc; @head-bg : #f9fafc;
@table-thead-bg : #f5f7f9; @table-thead-bg : #f8f8f9;
@table-td-stripe-bg : #f5f7f9; @table-td-stripe-bg : #f8f8f9;
@table-td-hover-bg : #ebf7ff; @table-td-hover-bg : #ebf7ff;
@table-td-highlight-bg : #ebf7ff; @table-td-highlight-bg : #ebf7ff;
@menu-dark-active-bg : #313540; @menu-dark-active-bg : #313540;
@ -66,7 +66,7 @@
@btn-border-radius-small: 3px; @btn-border-radius-small: 3px;
@btn-group-border : shade(@primary-color, 5%); @btn-group-border : shade(@primary-color, 5%);
@btn-disable-color : #c3cbd6; @btn-disable-color : #bbbec4;
@btn-disable-bg : @background-color-base; @btn-disable-bg : @background-color-base;
@btn-disable-border : @border-color-base; @btn-disable-border : @border-color-base;

2
src/styles/mixins/button.less
View file

@ -133,7 +133,7 @@
line-height: @line-height-base; line-height: @line-height-base;
user-select: none; user-select: none;
.button-size(@btn-padding-base; @btn-font-size; @btn-border-radius); .button-size(@btn-padding-base; @btn-font-size; @btn-border-radius);
transform: translate3d(0, 0, 0); //transform: translate3d(0, 0, 0);
//transition: all @transition-time linear; //transition: all @transition-time linear;
transition: color @transition-time linear, background-color @transition-time linear, border @transition-time linear; transition: color @transition-time linear, background-color @transition-time linear, border @transition-time linear;