diff --git a/ui/scss/all.scss b/ui/scss/all.scss index 69656fa41..eb2cc662c 100644 --- a/ui/scss/all.scss +++ b/ui/scss/all.scss @@ -21,5 +21,6 @@ @import "component/_video.scss"; @import "component/_pagination.scss"; @import "component/_markdown-editor.scss"; +@import "component/_tabs.scss"; @import "page/_developer.scss"; @import "page/_show.scss"; diff --git a/ui/scss/component/_header.scss b/ui/scss/component/_header.scss index 43fb118d7..7d5e0e0af 100644 --- a/ui/scss/component/_header.scss +++ b/ui/scss/component/_header.scss @@ -56,61 +56,3 @@ border-color: var(--color-primary); } } - -/* Tabs */ - -nav.sub-header -{ - text-transform: uppercase; - max-width: $width-page-constrained; - margin-bottom: 40px; - border-bottom: var(--divider); - > a - { - height: 38px; - line-height: 38px; - text-align: center; - font-weight: 600; - text-transform: uppercase; - display: inline-block; - vertical-align: baseline; - margin: 0 8px; - padding: 0 8px; - color: var(--tab-color); - position: relative; - - &:first-child - { - margin-left: 0; - } - &:last-child - { - margin-right: 0; - } - &.sub-header-selected - { - color: var(--tab-active-color); - &:before { - width: 100%; - height: var(--tab-border-size); - background: var(--tab-active-color); - position: absolute; - bottom: 0; - left: 0; - content: ''; - animation-name: activeTab; - animation-duration: 0.3s; - animation-timing-function: cubic-bezier(.55,0,.1,1); - } - } - &:hover - { - color: var(--tab-active-color); - } - } -} - -@keyframes activeTab { - from {width: 0;} - to {width: 100%;} -} diff --git a/ui/scss/component/_tabs.scss b/ui/scss/component/_tabs.scss index e69de29bb..f2059dfef 100644 --- a/ui/scss/component/_tabs.scss +++ b/ui/scss/component/_tabs.scss @@ -0,0 +1,57 @@ +/* Tabs */ + +nav.sub-header +{ + text-transform: uppercase; + max-width: $width-page-constrained; + margin-bottom: 40px; + border-bottom: var(--divider); + > a + { + height: 38px; + line-height: 38px; + text-align: center; + font-weight: 600; + text-transform: uppercase; + display: inline-block; + vertical-align: baseline; + margin: 0 8px; + padding: 0 8px; + color: var(--tab-color); + position: relative; + + &:first-child + { + margin-left: 0; + } + &:last-child + { + margin-right: 0; + } + &.sub-header-selected + { + color: var(--tab-active-color); + &:before { + width: 100%; + height: var(--tab-border-size); + background: var(--tab-active-color); + position: absolute; + bottom: 0; + left: 0; + content: ''; + animation-name: activeTab; + animation-duration: 0.3s; + animation-timing-function: cubic-bezier(.55,0,.1,1); + } + } + &:hover + { + color: var(--tab-active-color); + } + } +} + +@keyframes activeTab { + from {width: 0;} + to {width: 100%;} +}