diff options
| author | Egor Kislitsyn <egor@kislitsyn.com> | 2018-12-13 18:22:15 +0700 |
|---|---|---|
| committer | Egor Kislitsyn <egor@kislitsyn.com> | 2018-12-13 18:22:15 +0700 |
| commit | a8521fc8d99ee7ee5142e2c7c642eee0fc14ed93 (patch) | |
| tree | 53e98662ef34b8bccc845f627c125528c1c1436c /src/components/tab_switcher/tab_switcher.scss | |
| parent | b3455649c53034e01725977260e69cff59c47e87 (diff) | |
| parent | e443716bcd616ad61efae161624dd970841a935c (diff) | |
Merge commit 'e443716bcd616ad61efae161624dd970841a935c' into feature/push-subscriptions
# Conflicts:
# src/i18n/en.json
# src/modules/interface.js
# src/modules/users.js
# yarn.lock
Diffstat (limited to 'src/components/tab_switcher/tab_switcher.scss')
| -rw-r--r-- | src/components/tab_switcher/tab_switcher.scss | 36 |
1 files changed, 29 insertions, 7 deletions
diff --git a/src/components/tab_switcher/tab_switcher.scss b/src/components/tab_switcher/tab_switcher.scss index 374a19c5..fbd3321b 100644 --- a/src/components/tab_switcher/tab_switcher.scss +++ b/src/components/tab_switcher/tab_switcher.scss @@ -1,13 +1,21 @@ @import '../../_variables.scss'; .tab-switcher { + .contents { + .hidden { + display: none; + } + } .tabs { display: flex; position: relative; justify-content: center; width: 100%; - overflow: hidden; + overflow-y: hidden; + overflow-x: auto; padding-top: 5px; + height: 32px; + box-sizing: border-box; &::after, &::before { display: block; @@ -17,20 +25,34 @@ .tab, &::after, &::before { border-bottom: 1px solid; - border-bottom-color: $fallback--btn; - border-bottom-color: var(--btn, $fallback--btn); + border-bottom-color: $fallback--border; + border-bottom-color: var(--border, $fallback--border); } .tab { + position: relative; border-bottom-left-radius: 0; border-bottom-right-radius: 0; - padding: .3em 1em; + padding: 5px 1em 99px; + white-space: nowrap; &:not(.active) { - border-bottom: 1px solid; - border-bottom-color: $fallback--btn; - border-bottom-color: var(--btn, $fallback--btn); z-index: 4; + + &:hover { + z-index: 6; + } + + &::after { + content: ''; + position: absolute; + left: 0; + right: 0; + top: 26px; + border-bottom: 1px solid; + border-bottom-color: $fallback--border; + border-bottom-color: var(--border, $fallback--border); + } } &.active { |