diff --git a/theme-base/components/panel/_tabview.scss b/theme-base/components/panel/_tabview.scss index ef57bbc..2463eee 100644 --- a/theme-base/components/panel/_tabview.scss +++ b/theme-base/components/panel/_tabview.scss @@ -1,3 +1,80 @@ +//core +.p-tabview-nav-container { + position: relative; +} + +.p-tabview-scrollable .p-tabview-nav-container { + overflow: hidden; +} + +.p-tabview-nav-content { + overflow-x: auto; + overflow-y: hidden; + scroll-behavior: smooth; + scrollbar-width: none; + overscroll-behavior: contain auto; + position: relative; +} + +.p-tabview-nav { + display: flex; + margin: 0; + padding: 0; + list-style-type: none; + flex: 1 1 auto; +} + +.p-tabview-nav-link { + cursor: pointer; + user-select: none; + display: flex; + align-items: center; + position: relative; + text-decoration: none; + overflow: hidden; +} + +.p-tabview-ink-bar { + display: none; + z-index: 1; +} + +.p-tabview-nav-link:focus { + z-index: 1; +} + +.p-tabview-close { + z-index: 1; +} + +.p-tabview-title { + line-height: 1; + white-space: nowrap; +} + +.p-tabview-nav-btn { + position: absolute; + top: 0; + z-index: 2; + height: 100%; + display: flex; + align-items: center; + justify-content: center; +} + +.p-tabview-nav-prev { + left: 0; +} + +.p-tabview-nav-next { + right: 0; +} + +.p-tabview-nav-content::-webkit-scrollbar { + display: none; +} + +//theme .p-tabview { .p-tabview-nav { background: $tabviewNavBg; diff --git a/themes/lara/lara-dark/_extensions.scss b/themes/lara/lara-dark/_extensions.scss index ce388da..cc6bfc6 100644 --- a/themes/lara/lara-dark/_extensions.scss +++ b/themes/lara/lara-dark/_extensions.scss @@ -27,16 +27,6 @@ transition: background-color $transitionDuration, border-color $transitionDuration, box-shadow $transitionDuration; } } - - .p-tabview-ink-bar { - z-index: 1; - display: block; - position: absolute; - bottom: 0; - height: 2px; - background-color: $primaryColor; - transition: 500ms cubic-bezier(0.35, 0, 0.25, 1); - } } } diff --git a/themes/lara/lara-light/_extensions.scss b/themes/lara/lara-light/_extensions.scss index d5b24f6..f8b07db 100644 --- a/themes/lara/lara-light/_extensions.scss +++ b/themes/lara/lara-light/_extensions.scss @@ -27,16 +27,6 @@ transition: background-color $transitionDuration, border-color $transitionDuration, box-shadow $transitionDuration; } } - - .p-tabview-ink-bar { - z-index: 1; - display: block; - position: absolute; - bottom: 0; - height: 2px; - background-color: $primaryColor; - transition: 500ms cubic-bezier(0.35, 0, 0.25, 1); - } } }