From 1b9a5a3efe783ca7cfe53116afc64756eb7a9f04 Mon Sep 17 00:00:00 2001 From: Henry Jameson Date: Sun, 16 Dec 2018 02:35:42 +0300 Subject: [PATCH] more visual fixes --- src/components/tab_switcher/tab_switcher.jsx | 12 +++-- src/components/tab_switcher/tab_switcher.scss | 51 +++++++++++-------- 2 files changed, 40 insertions(+), 23 deletions(-) diff --git a/src/components/tab_switcher/tab_switcher.jsx b/src/components/tab_switcher/tab_switcher.jsx index 9e3dee04..2f362c4d 100644 --- a/src/components/tab_switcher/tab_switcher.jsx +++ b/src/components/tab_switcher/tab_switcher.jsx @@ -18,12 +18,18 @@ export default Vue.component('tab-switcher', { const tabs = this.$slots.default .filter(slot => slot.data) .map((slot, index) => { - const classes = ['tab'] + const classesTab = ['tab'] + const classesWrapper = ['tab-wrapper'] if (index === this.active) { - classes.push('active') + classesTab.push('active') + classesWrapper.push('active') } - return () + return ( +
+ +
+ ) }); const contents = this.$slots.default.filter(_=>_.data).map(( slot, index ) => { const active = index === this.active diff --git a/src/components/tab_switcher/tab_switcher.scss b/src/components/tab_switcher/tab_switcher.scss index 26b1727a..428335c0 100644 --- a/src/components/tab_switcher/tab_switcher.scss +++ b/src/components/tab_switcher/tab_switcher.scss @@ -19,46 +19,57 @@ display: block; content: ''; flex: 1 1 auto; - } - - .tab, &::after, &::before { border-bottom: 1px solid; border-bottom-color: $fallback--border; border-bottom-color: var(--border, $fallback--border); } - .tab { + .tab-wrapper { + height: 28px; + overflow: hidden; position: relative; - border-bottom-left-radius: 0; - border-bottom-right-radius: 0; - padding: 5px 1em 99px; - margin-bottom: 5px - 99px - 1px; - white-space: nowrap; + display: flex; + flex: 0 0 auto; - &:not(.active) { - z-index: 4; + .tab { + width: 100%; + min-width: 1px; + position: relative; + border-bottom-left-radius: 0; + border-bottom-right-radius: 0; + padding: 6px 1em; + padding-bottom: 99px; + margin-bottom: 6px - 99px; + white-space: nowrap; - &:hover { - z-index: 6; + &:not(.active) { + z-index: 4; + + &:hover { + z-index: 6; + } } + &.active { + background: transparent; + z-index: 5; + } + } + + &:not(.active) { &::after { content: ''; position: absolute; left: 0; right: 0; - top: 26px; + bottom: 0; + z-index: 7; border-bottom: 1px solid; border-bottom-color: $fallback--border; border-bottom-color: var(--border, $fallback--border); } } - - &.active { - background: transparent; - border-bottom: none; - z-index: 5; - } } + } }