diff options
Diffstat (limited to 'src/components/tab_switcher')
| -rw-r--r-- | src/components/tab_switcher/tab_switcher.js | 12 | ||||
| -rw-r--r-- | src/components/tab_switcher/tab_switcher.scss | 8 |
2 files changed, 13 insertions, 7 deletions
diff --git a/src/components/tab_switcher/tab_switcher.js b/src/components/tab_switcher/tab_switcher.js index 97791de3..a54b474f 100644 --- a/src/components/tab_switcher/tab_switcher.js +++ b/src/components/tab_switcher/tab_switcher.js @@ -69,7 +69,6 @@ export default Vue.component('tab-switcher', { if (!slot.tag) return const classesTab = ['tab'] const classesWrapper = ['tab-wrapper'] - if (this.activeIndex === index) { classesTab.push('active') classesWrapper.push('active') @@ -101,12 +100,17 @@ export default Vue.component('tab-switcher', { const contents = this.$slots.default.map((slot, index) => { if (!slot.tag) return const active = this.activeIndex === index + const classes = [ active ? 'active' : 'hidden' ] + if (slot.data.attrs.fullHeight) { + classes.push('full-height') + } + if (this.renderOnlyFocused) { return active - ? <div class="active">{slot}</div> - : <div class="hidden"></div> + ? <div class={classes.join(' ')}>{slot}</div> + : <div class={classes.join(' ')}></div> } - return <div class={active ? 'active' : 'hidden' }>{slot}</div> + return <div class={classes.join(' ')}>{slot}</div> }) return ( diff --git a/src/components/tab_switcher/tab_switcher.scss b/src/components/tab_switcher/tab_switcher.scss index a7b790a3..c9050781 100644 --- a/src/components/tab_switcher/tab_switcher.scss +++ b/src/components/tab_switcher/tab_switcher.scss @@ -59,7 +59,6 @@ flex: 1 0 auto; overflow-y: auto; overflow-x: hidden; - padding-top: 5px; flex-direction: column; &::after { content: ''; @@ -78,6 +77,9 @@ border-right-color: $fallback--border; border-right-color: var(--border, $fallback--border); } + &:last-child .tab { + margin-bottom: 0; + } } .tab { box-sizing: content-box; @@ -87,8 +89,8 @@ min-width: 1px; border-top-right-radius: 0; border-bottom-right-radius: 0; - // padding-right: 200px; - // margin-right: 6px - 200px; + padding-right: calc(1em + 200px); + margin-right: 6px - 200px; margin-left: 6px; } |
