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

Merge remote-tracking branch 'upstream/2.0' into popper

Browse source
This commit is contained in:
huanghong 2018-04-10 12:42:32 +08:00
commit 586bf3fc1b
16 changed files with 191 additions and 100 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

3
README.md
View file

@ -115,7 +115,8 @@ If you want to contribute or have questions or bugs to report:
|---|---|---|---|---|---| |---|---|---|---|---|---|
|[Aresn](https://github.com/icarusion) | ![](https://avatars3.githubusercontent.com/u/5370542?v=3&s=60) |[jingsam](https://github.com/jingsam) | ![](https://avatars3.githubusercontent.com/u/1522494?v=3&s=60) | [rijn](https://github.com/rijn) | ![](https://avatars2.githubusercontent.com/u/6976367?v=3&s=60) | |[Aresn](https://github.com/icarusion) | ![](https://avatars3.githubusercontent.com/u/5370542?v=3&s=60) |[jingsam](https://github.com/jingsam) | ![](https://avatars3.githubusercontent.com/u/1522494?v=3&s=60) | [rijn](https://github.com/rijn) | ![](https://avatars2.githubusercontent.com/u/6976367?v=3&s=60) |
|[lcx960324](https://github.com/lcx960324) | ![](https://avatars3.githubusercontent.com/u/9768245?v=3&s=60) |[GITleonine1989](https://github.com/GITleonine1989) | ![](https://avatars1.githubusercontent.com/u/7582490?v=3&s=60) |[huixisheng](https://github.com/huixisheng) | ![](https://avatars1.githubusercontent.com/u/1518967?v=3&s=60) | |[lcx960324](https://github.com/lcx960324) | ![](https://avatars3.githubusercontent.com/u/9768245?v=3&s=60) |[GITleonine1989](https://github.com/GITleonine1989) | ![](https://avatars1.githubusercontent.com/u/7582490?v=3&s=60) |[huixisheng](https://github.com/huixisheng) | ![](https://avatars1.githubusercontent.com/u/1518967?v=3&s=60) |
|[Sergio Crisostomo](https://github.com/SergioCrisostomo) | ![](https://avatars3.githubusercontent.com/u/5614559?v=3&s=60) | [lison16](https://github.com/lison16) | ![](https://avatars3.githubusercontent.com/u/20942571?v=3&s=60) | [Xotic750](https://github.com/Xotic750) | ![](https://avatars3.githubusercontent.com/u/216041?v=3&s=60) |[Sergio Crisostomo](https://github.com/SergioCrisostomo) | ![](https://avatars3.githubusercontent.com/u/5614559?v=3&s=60) | [lison16](https://github.com/lison16) | ![](https://avatars3.githubusercontent.com/u/20942571?v=3&s=60) | [Xotic750](https://github.com/Xotic750) | ![](https://avatars3.githubusercontent.com/u/216041?v=3&s=60) |
[huanghong1125](https://github.com/huanghong1125) | ![](https://avatars3.githubusercontent.com/u/12794817?v=3&s=60) |
## Links ## Links

101
examples/routers/menu.vue
View file

@ -1,46 +1,69 @@
<template> <template>
<Menu active-name="1-2" :open-names="['1']" theme="dark"> <div>
<Submenu name="1"> <Menu ref="menu" active-name="1-2" :open-names="openNames" theme="dark" accordion @on-open-change="handleOpenChange">
<template slot="title"> <Submenu name="1">
<Icon type="ios-analytics"></Icon> <template slot="title">
Navigation One <Icon type="ios-analytics"></Icon>
</template> Navigation One
<MenuGroup title="Item 1"> </template>
<MenuItem name="1-1">Option 1</MenuItem> <MenuGroup title="Item 1">
<MenuItem name="1-2">Option 2</MenuItem> <MenuItem name="1-1">Option 1</MenuItem>
</MenuGroup> <MenuItem name="1-2">Option 2</MenuItem>
<MenuGroup title="Item 2"> </MenuGroup>
<MenuItem name="1-3">Option 3</MenuItem> <MenuGroup title="Item 2">
<MenuItem name="1-4">Option 4</MenuItem> <MenuItem name="1-3">Option 3</MenuItem>
</MenuGroup> <MenuItem name="1-4">Option 4</MenuItem>
</Submenu> </MenuGroup>
<Submenu name="2">
<template slot="title">
<Icon type="ios-filing"></Icon>
Navigation Two
</template>
<MenuItem name="2-1">Option 5</MenuItem>
<MenuItem name="2-2">Option 6</MenuItem>
<Submenu name="3">
<template slot="title">Submenu</template>
<MenuItem name="3-1">Option 7</MenuItem>
<MenuItem name="3-2">Option 8</MenuItem>
</Submenu> </Submenu>
</Submenu> <Submenu name="2">
<Submenu name="4"> <template slot="title">
<template slot="title"> <Icon type="ios-filing"></Icon>
<Icon type="ios-gear"></Icon> Navigation Two
Navigation Three </template>
</template> <MenuItem name="2-1">Option 5</MenuItem>
<MenuItem name="4-1">Option 9</MenuItem> <MenuItem name="2-2">Option 6</MenuItem>
<MenuItem name="4-2">Option 10</MenuItem> <Submenu name="3">
<MenuItem name="4-3">Option 11</MenuItem> <template slot="title">Submenu</template>
<MenuItem name="4-4">Option 12</MenuItem> <MenuItem name="3-1">Option 7</MenuItem>
</Submenu> <MenuItem name="3-2">Option 8</MenuItem>
</Menu> </Submenu>
<Submenu name="4">
<template slot="title">Submenu</template>
<MenuItem name="4-1">Option 7</MenuItem>
<MenuItem name="4-2">Option 8</MenuItem>
</Submenu>
</Submenu>
<Submenu name="5">
<template slot="title">
<Icon type="ios-gear"></Icon>
Navigation Three
</template>
<MenuItem name="5-1">Option 9</MenuItem>
<MenuItem name="5-2">Option 10</MenuItem>
<MenuItem name="5-3">Option 11</MenuItem>
<MenuItem name="5-4">Option 12</MenuItem>
</Submenu>
</Menu>
<Button @click="setOpenNames">修改展开数组</Button>
</div>
</template> </template>
<script> <script>
export default { export default {
data () {
return {
openNames: ['1']
};
},
methods: {
handleOpenChange (name) {
console.log(name)
},
setOpenNames () {
this.openNames = ['2', '3'];
this.$nextTick(() => {
this.$refs.menu.updateOpened();
})
}
}
} }
</script> </script>

33
examples/routers/poptip.vue
View file

@ -1,21 +1,28 @@
<template> <template>
<div style="margin: 200px;"> <div style="margin: 200px">
<Poptip title="提示标题" transfer> <Tabs value="name1">
<div slot="content" style="padding: 50px"> <TabPane label="标签一" name="name1">
<Button>click me</Button> <div style="overflow: auto;width: 200px;height:300px">
</div> <Poptip title="提示标题" content="标签一的内容" placement="right" transfer :options="options">
<Button>click 激活</Button> <Button id="aaa">右边</Button>
</Poptip> </Poptip>
</div>
</TabPane>
<TabPane label="标签二" name="name2">标签二的内容</TabPane>
</Tabs>
</div> </div>
</template> </template>
<script> <script>
export default { export default {
methods: { data () {
ok () { return {
this.$Message.info('点击了确定'); options: {
}, modifiers: {
cancel () { preventOverflow: {
this.$Message.info('点击了取消'); boundariesElement: 'body',
}
}
}
} }
} }
} }

2
package.json
View file

@ -1,6 +1,6 @@
{ {
"name": "iview", "name": "iview",
"version": "2.11.0", "version": "2.12.0",
"title": "iView", "title": "iView",
"description": "A high quality UI components Library with Vue.js", "description": "A high quality UI components Library with Vue.js",
"homepage": "http://www.iviewui.com", "homepage": "http://www.iviewui.com",

18
src/components/card/card.vue
View file

@ -1,6 +1,11 @@
<template> <template>
<div :class="classes"> <div :class="classes">
<div :class="headClasses" v-if="showHead"><slot name="title"></slot></div> <div :class="headClasses" v-if="showHead"><slot name="title">
<p v-if="title">
<Icon v-if="icon" :type="icon"></Icon>
{{title}}
</p>
</slot></div>
<div :class="extraClasses" v-if="showExtra"><slot name="extra"></slot></div> <div :class="extraClasses" v-if="showExtra"><slot name="extra"></slot></div>
<div :class="bodyClasses" :style="bodyStyles"><slot></slot></div> <div :class="bodyClasses" :style="bodyStyles"><slot></slot></div>
</div> </div>
@ -8,10 +13,11 @@
<script> <script>
const prefixCls = 'ivu-card'; const prefixCls = 'ivu-card';
const defaultPadding = 16; const defaultPadding = 16;
import Icon from '../icon/icon.vue';
export default { export default {
name: 'Card', name: 'Card',
components: { Icon },
props: { props: {
bordered: { bordered: {
type: Boolean, type: Boolean,
@ -28,6 +34,12 @@
padding: { padding: {
type: Number, type: Number,
default: defaultPadding default: defaultPadding
},
title: {
type: String,
},
icon: {
type: String,
} }
}, },
data () { data () {
@ -67,7 +79,7 @@
} }
}, },
mounted () { mounted () {
this.showHead = this.$slots.title !== undefined; this.showHead = this.title || this.$slots.title !== undefined;
this.showExtra = this.$slots.extra !== undefined; this.showExtra = this.$slots.extra !== undefined;
} }
}; };

4
src/components/dropdown/dropdown-item.vue
View file

@ -3,7 +3,7 @@
</template> </template>
<script> <script>
const prefixCls = 'ivu-dropdown-item'; const prefixCls = 'ivu-dropdown-item';
import { findComponentUpward } from '../../utils/assist';
export default { export default {
name: 'DropdownItem', name: 'DropdownItem',
props: { props: {
@ -37,7 +37,7 @@
}, },
methods: { methods: {
handleClick () { handleClick () {
const $parent = this.$parent.$parent.$parent; const $parent = findComponentUpward(this, 'Dropdown');
const hasChildren = this.$parent && this.$parent.$options.name === 'Dropdown'; const hasChildren = this.$parent && this.$parent.$options.name === 'Dropdown';
if (this.disabled) { if (this.disabled) {

15
src/components/form/form-item.vue
View file

@ -92,6 +92,7 @@
this.validateState = val; this.validateState = val;
} }
}, },
inject: ['form'],
computed: { computed: {
classes () { classes () {
return [ return [
@ -103,13 +104,13 @@
} }
]; ];
}, },
form() { // form() {
let parent = this.$parent; // let parent = this.$parent;
while (parent.$options.name !== 'iForm') { // while (parent.$options.name !== 'iForm') {
parent = parent.$parent; // parent = parent.$parent;
} // }
return parent; // return parent;
}, // },
fieldValue: { fieldValue: {
cache: false, cache: false,
get() { get() {

3
src/components/form/form.vue
View file

@ -40,6 +40,9 @@
default: 'off' default: 'off'
} }
}, },
provide() {
return { form : this };
},
data () { data () {
return { return {
fields: [] fields: []

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

@ -2,7 +2,7 @@
<div :class="wrapClasses"> <div :class="wrapClasses">
<template v-if="type !== 'textarea'"> <template v-if="type !== 'textarea'">
<div :class="[prefixCls + '-group-prepend']" v-if="prepend" v-show="slotReady"><slot name="prepend"></slot></div> <div :class="[prefixCls + '-group-prepend']" v-if="prepend" v-show="slotReady"><slot name="prepend"></slot></div>
<i class="ivu-icon" :class="['ivu-icon-ios-close', prefixCls + '-icon', prefixCls + '-icon-clear' , prefixCls + '-icon-normal']" v-if="clearable" @click="handleClear"></i> <i class="ivu-icon" :class="['ivu-icon-ios-close', prefixCls + '-icon', prefixCls + '-icon-clear' , prefixCls + '-icon-normal']" v-if="clearable && currentValue" @click="handleClear"></i>
<i class="ivu-icon" :class="['ivu-icon-' + icon, prefixCls + '-icon', prefixCls + '-icon-normal']" v-else-if="icon" @click="handleIconClick"></i> <i class="ivu-icon" :class="['ivu-icon-' + icon, prefixCls + '-icon', prefixCls + '-icon-normal']" v-else-if="icon" @click="handleIconClick"></i>
<transition name="fade"> <transition name="fade">
<i class="ivu-icon ivu-icon-load-c ivu-load-loop" :class="[prefixCls + '-icon', prefixCls + '-icon-validate']" v-if="!icon"></i> <i class="ivu-icon ivu-icon-load-c ivu-load-loop" :class="[prefixCls + '-icon', prefixCls + '-icon-validate']" v-if="!icon"></i>

29
src/components/menu/menu.vue
View file

@ -43,7 +43,8 @@
}, },
data () { data () {
return { return {
currentActiveName: this.activeName currentActiveName: this.activeName,
openedNames: []
}; };
}, },
computed: { computed: {
@ -76,36 +77,40 @@
this.broadcast('MenuItem', 'on-update-active-name', this.currentActiveName); this.broadcast('MenuItem', 'on-update-active-name', this.currentActiveName);
}, },
updateOpenKeys (name) { updateOpenKeys (name) {
const index = this.openNames.indexOf(name); let names = [...this.openedNames];
if (index > -1) { const index = names.indexOf(name);
this.openNames.splice(index, 1); if (index >= 0) {
names.splice(index, 1);
} else { } else {
this.openNames.push(name);
if (this.accordion) { if (this.accordion) {
let currentSubmenu = {}; let currentSubmenu = null;
findComponentsDownward(this, 'Submenu').forEach(item => { findComponentsDownward(this, 'Submenu').forEach(item => {
if (item.name === name) currentSubmenu = item; if (item.name === name) currentSubmenu = item;
}); });
findBrothersComponents(currentSubmenu, 'Submenu').forEach(item => { findBrothersComponents(currentSubmenu, 'Submenu').forEach(item => {
let index = this.openNames.indexOf(item.name); let i = names.indexOf(item.name);
this.openNames.splice(index, index >= 0 ? 1 : 0); if (i >= 0) names.splice(i, 1);
}); });
this.openNames.push(name); names.push(name);
} }
} }
this.openedNames = names;
this.$emit('on-open-change', this.openedNames);
}, },
updateOpened () { updateOpened () {
const items = findComponentsDownward(this, 'Submenu'); const items = findComponentsDownward(this, 'Submenu');
if (items.length) { if (items.length) {
items.forEach(item => { items.forEach(item => {
if (this.openNames.indexOf(item.name) > -1) item.opened = true; if (this.openedNames.indexOf(item.name) > -1) item.opened = true;
else item.opened = false;
}); });
} }
} }
}, },
mounted () { mounted () {
this.updateActiveName(); this.updateActiveName();
this.openedNames = [...this.openNames];
this.updateOpened(); this.updateOpened();
this.$on('on-menu-item-select', (name) => { this.$on('on-menu-item-select', (name) => {
this.currentActiveName = name; this.currentActiveName = name;
@ -113,8 +118,8 @@
}); });
}, },
watch: { watch: {
openNames () { openNames (names) {
this.$emit('on-open-change', this.openNames); this.openedNames = names;
}, },
activeName (val) { activeName (val) {
this.currentActiveName = val; this.currentActiveName = val;

7
src/components/select/dropdown.vue
View file

@ -21,7 +21,8 @@
data () { data () {
return { return {
popper: null, popper: null,
width: '' width: '',
popperStatus: false
}; };
}, },
computed: { computed: {
@ -37,6 +38,7 @@
if (this.popper) { if (this.popper) {
this.$nextTick(() => { this.$nextTick(() => {
this.popper.update(); this.popper.update();
this.popperStatus = true;
}); });
} else { } else {
this.$nextTick(() => { this.$nextTick(() => {
@ -65,10 +67,11 @@
destroy () { destroy () {
if (this.popper) { if (this.popper) {
setTimeout(() => { setTimeout(() => {
if (this.popper) { if (this.popper && !this.popperStatus) {
this.popper.destroy(); this.popper.destroy();
this.popper = null; this.popper = null;
} }
this.popperStatus = false;
}, 300); }, 300);
} }
}, },

27
src/components/slider/slider.vue
View file

@ -3,6 +3,7 @@
<Input-number <Input-number
v-if="!range && showInput" v-if="!range && showInput"
:min="min" :min="min"
:size="inputSize"
:max="max" :max="max"
:step="step" :step="step"
:value="exportValue[0]" :value="exportValue[0]"
@ -120,6 +121,13 @@
type: Boolean, type: Boolean,
default: false default: false
}, },
inputSize: {
type: String,
default: 'default',
validator (value) {
return oneOf(value, ['small', 'large', 'default']);
}
},
showStops: { showStops: {
type: Boolean, type: Boolean,
default: false default: false
@ -151,7 +159,7 @@
startX: 0, startX: 0,
currentX: 0, currentX: 0,
startPos: 0, startPos: 0,
oldValue: val, oldValue: [...val],
valueIndex: { valueIndex: {
min: 0, min: 0,
max: 1, max: 1,
@ -327,7 +335,7 @@
if (type === 'min') newPos = this.checkLimits([newPos, this.maxPosition])[0]; if (type === 'min') newPos = this.checkLimits([newPos, this.maxPosition])[0];
else newPos = this.checkLimits([this.minPosition, newPos])[1]; else newPos = this.checkLimits([this.minPosition, newPos])[1];
const modulus = newPos % this.step; const modulus = this.handleDecimal(newPos,this.step);
const value = this.currentValue; const value = this.currentValue;
value[index] = newPos - modulus; value[index] = newPos - modulus;
this.currentValue = [...value]; this.currentValue = [...value];
@ -339,7 +347,20 @@
} }
} }
}, },
handleDecimal(pos,step){
if(step<1){
let sl = step.toString(),
multiple = 1,
m;
try {
m = sl.split('.')[1].length;
} catch (e){
m = 0;
}
multiple = Math.pow(10,m);
return (pos * multiple) % (step * multiple) / multiple;
}else return pos % step;
},
emitChange(){ emitChange(){
const value = this.range ? this.exportValue : this.exportValue[0]; const value = this.range ? this.exportValue : this.exportValue[0];
this.$emit('on-change', value); this.$emit('on-change', value);

20
src/components/tree/node.vue
View file

@ -17,11 +17,12 @@
<span v-else :class="titleClasses" @click="handleSelect">{{ data.title }}</span> <span v-else :class="titleClasses" @click="handleSelect">{{ data.title }}</span>
<Tree-node <Tree-node
v-if="data.expand" v-if="data.expand"
v-for="(item, i) in data.children" v-for="(item, i) in children"
:key="i" :key="i"
:data="item" :data="item"
:multiple="multiple" :multiple="multiple"
:show-checkbox="showCheckbox"> :show-checkbox="showCheckbox"
:children-key="childrenKey">
</Tree-node> </Tree-node>
</li> </li>
</ul> </ul>
@ -52,6 +53,10 @@
type: Boolean, type: Boolean,
default: false default: false
}, },
childrenKey: {
type: String,
default: 'children'
},
showCheckbox: { showCheckbox: {
type: Boolean, type: Boolean,
default: false default: false
@ -93,7 +98,7 @@
]; ];
}, },
showArrow () { showArrow () {
return (this.data.children && this.data.children.length) || ('loading' in this.data && !this.data.loading); return (this.data[this.childrenKey] && this.data[this.childrenKey].length) || ('loading' in this.data && !this.data.loading);
}, },
showLoading () { showLoading () {
return 'loading' in this.data && this.data.loading; return 'loading' in this.data && this.data.loading;
@ -118,6 +123,9 @@
} else { } else {
return []; return [];
} }
},
children () {
return this.data[this.childrenKey];
} }
}, },
methods: { methods: {
@ -126,14 +134,14 @@
if (item.disabled) return; if (item.disabled) return;
// async loading // async loading
if (item.children.length === 0) { if (item[this.childrenKey].length === 0) {
const tree = findComponentUpward(this, 'Tree'); const tree = findComponentUpward(this, 'Tree');
if (tree && tree.loadData) { if (tree && tree.loadData) {
this.$set(this.data, 'loading', true); this.$set(this.data, 'loading', true);
tree.loadData(item, children => { tree.loadData(item, children => {
this.$set(this.data, 'loading', false); this.$set(this.data, 'loading', false);
if (children.length) { if (children.length) {
this.$set(this.data, 'children', children); this.$set(this.data, this.childrenKey, children);
this.$nextTick(() => this.handleExpand()); this.$nextTick(() => this.handleExpand());
} }
}); });
@ -141,7 +149,7 @@
} }
} }
if (item.children && item.children.length) { if (item[this.childrenKey] && item[this.childrenKey].length) {
this.$set(this.data, 'expand', !this.data.expand); this.$set(this.data, 'expand', !this.data.expand);
this.dispatch('Tree', 'toggle-expand', this.data); this.dispatch('Tree', 'toggle-expand', this.data);
} }

24
src/components/tree/tree.vue
View file

@ -6,7 +6,8 @@
:data="item" :data="item"
visible visible
:multiple="multiple" :multiple="multiple"
:show-checkbox="showCheckbox"> :show-checkbox="showCheckbox"
:children-key="childrenKey">
</Tree-node> </Tree-node>
<div :class="[prefixCls + '-empty']" v-if="!stateTree.length">{{ localeEmptyText }}</div> <div :class="[prefixCls + '-empty']" v-if="!stateTree.length">{{ localeEmptyText }}</div>
</div> </div>
@ -40,6 +41,10 @@
emptyText: { emptyText: {
type: String type: String
}, },
childrenKey: {
type: String,
default: 'children'
},
loadData: { loadData: {
type: Function type: Function
}, },
@ -76,18 +81,19 @@
methods: { methods: {
compileFlatState () { // so we have always a relation parent/children of each node compileFlatState () { // so we have always a relation parent/children of each node
let keyCounter = 0; let keyCounter = 0;
let childrenKey = this.childrenKey;
const flatTree = []; const flatTree = [];
function flattenChildren(node, parent) { function flattenChildren(node, parent) {
node.nodeKey = keyCounter++; node.nodeKey = keyCounter++;
flatTree[node.nodeKey] = { node: node, nodeKey: node.nodeKey }; flatTree[node.nodeKey] = { node: node, nodeKey: node.nodeKey };
if (typeof parent != 'undefined') { if (typeof parent != 'undefined') {
flatTree[node.nodeKey].parent = parent.nodeKey; flatTree[node.nodeKey].parent = parent.nodeKey;
flatTree[parent.nodeKey].children.push(node.nodeKey); flatTree[parent.nodeKey][childrenKey].push(node.nodeKey);
} }
if (node.children) { if (node[childrenKey]) {
flatTree[node.nodeKey].children = []; flatTree[node.nodeKey][childrenKey] = [];
node.children.forEach(child => flattenChildren(child, node)); node[childrenKey].forEach(child => flattenChildren(child, node));
} }
} }
this.stateTree.forEach(rootNode => { this.stateTree.forEach(rootNode => {
@ -104,11 +110,11 @@
if (node.checked == parent.checked && node.indeterminate == parent.indeterminate) return; // no need to update upwards if (node.checked == parent.checked && node.indeterminate == parent.indeterminate) return; // no need to update upwards
if (node.checked == true) { if (node.checked == true) {
this.$set(parent, 'checked', parent.children.every(node => node.checked)); this.$set(parent, 'checked', parent[this.childrenKey].every(node => node.checked));
this.$set(parent, 'indeterminate', !parent.checked); this.$set(parent, 'indeterminate', !parent.checked);
} else { } else {
this.$set(parent, 'checked', false); this.$set(parent, 'checked', false);
this.$set(parent, 'indeterminate', parent.children.some(node => node.checked || node.indeterminate)); this.$set(parent, 'indeterminate', parent[this.childrenKey].some(node => node.checked || node.indeterminate));
} }
this.updateTreeUp(parentKey); this.updateTreeUp(parentKey);
}, },
@ -139,8 +145,8 @@
for (let key in changes) { for (let key in changes) {
this.$set(node, key, changes[key]); this.$set(node, key, changes[key]);
} }
if (node.children) { if (node[this.childrenKey]) {
node.children.forEach(child => { node[this.childrenKey].forEach(child => {
this.updateTreeDown(child, changes); this.updateTreeDown(child, changes);
}); });
} }

2
src/styles/components/select.less
View file

@ -236,6 +236,8 @@
} }
&-dropdown-list { &-dropdown-list {
display: inline-block;
min-width: 100%;
list-style: none; list-style: none;
} }
} }

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

@ -354,7 +354,6 @@
} }
label { label {
display: block; display: block;
margin-bottom: 4px;
& > span{ & > span{
margin-right: 4px; margin-right: 4px;