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

Tabs: fix tabs style (#11536)

pull/11546/head
Jikkai Xiao 2018-06-08 15:54:55 +08:00 committed by 杨奕
parent c93851abd1
commit 23de28bd4b
2 changed files with 24 additions and 24 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

3
packages/tabs/src/tab-nav.vue
View File

@ -249,7 +249,7 @@
{scrollBtn} {scrollBtn}
<div class={['el-tabs__nav-scroll']} ref="navScroll"> <div class={['el-tabs__nav-scroll']} ref="navScroll">
<div <div
class={['el-tabs__nav', stretch && ['top', 'bottom'].indexOf(this.rootTabs.tabPosition) !== -1 ? 'is-stretch' : '']} class={['el-tabs__nav', `is-${ this.rootTabs.tabPosition }`, stretch && ['top', 'bottom'].indexOf(this.rootTabs.tabPosition) !== -1 ? 'is-stretch' : '']}
ref="nav" ref="nav"
style={navStyle} style={navStyle}
role="tablist" role="tablist"
@ -278,4 +278,3 @@
} }
}; };
</script> </script>

45
packages/theme-chalk/src/tabs.scss
View File

@ -307,6 +307,27 @@
.el-tabs__nav-wrap.is-right { .el-tabs__nav-wrap.is-right {
margin-bottom: 0; margin-bottom: 0;
> .el-tabs__nav-prev,
> .el-tabs__nav-next {
height: 30px;
line-height: 30px;
width: 100%;
text-align: center;
cursor: pointer;
i {
transform: rotateZ(90deg);
}
}
> .el-tabs__nav-prev {
left: auto;
top: 0;
}
> .el-tabs__nav-next {
right: auto;
bottom: 0;
}
&.is-scrollable { &.is-scrollable {
padding: 30px 0; padding: 30px 0;
} }
@ -319,34 +340,14 @@
} }
} }
.el-tabs__nav { .el-tabs__nav.is-left,
.el-tabs__nav.is-right {
float: none; float: none;
} }
.el-tabs__item.is-left, .el-tabs__item.is-left,
.el-tabs__item.is-right { .el-tabs__item.is-right {
display: block; display: block;
} }
.el-tabs__nav-prev,
.el-tabs__nav-next {
height: 30px;
line-height: 30px;
width: 100%;
text-align: center;
cursor: pointer;
i {
transform: rotateZ(90deg);
}
}
.el-tabs__nav-prev {
left: auto;
top: 0;
}
.el-tabs__nav-next {
right: auto;
bottom: 0;
}
} }
@include m(left) { @include m(left) {
.el-tabs__header.is-left { .el-tabs__header.is-left {