diff --git a/services/web/app/views/_mixins/bookmarkable_tabset.pug b/services/web/app/views/_mixins/bookmarkable_tabset.pug index b2cef1b171..27ac74ef66 100644 --- a/services/web/app/views/_mixins/bookmarkable_tabset.pug +++ b/services/web/app/views/_mixins/bookmarkable_tabset.pug @@ -1,6 +1,6 @@ mixin bookmarkable-tabset-header(id, title, active) li(role="presentation") - a( + a.nav-link( href='#' + id class=(active ? 'active' : '') aria-controls=id diff --git a/services/web/app/views/admin/index.pug b/services/web/app/views/admin/index.pug index 19ce9edf86..e5a9072503 100644 --- a/services/web/app/views/admin/index.pug +++ b/services/web/app/views/admin/index.pug @@ -13,9 +13,9 @@ block content .card-body .page-header h1 Admin Panel - div(data-ol-bookmarkable-tabset) + .ol-tabs(data-ol-bookmarkable-tabset) .nav-tabs-container - ul.nav.nav-tabs.d-flex(role="tablist") + ul.nav.nav-tabs(role="tablist") +bookmarkable-tabset-header('system-messages', 'System Messages', true) +bookmarkable-tabset-header('open-sockets', 'Open Sockets') +bookmarkable-tabset-header('open-close-editor', 'Open/Close Editor') diff --git a/services/web/frontend/stylesheets/bootstrap-5/components/tabs.scss b/services/web/frontend/stylesheets/bootstrap-5/components/tabs.scss index c7df677bb2..0dd2c626dc 100644 --- a/services/web/frontend/stylesheets/bootstrap-5/components/tabs.scss +++ b/services/web/frontend/stylesheets/bootstrap-5/components/tabs.scss @@ -36,6 +36,7 @@ margin-right: unset; padding: var(--spacing-04); line-height: var(--line-height-03); + text-decoration: none; &:focus, &:hover { @@ -78,49 +79,3 @@ [data-ol-bookmarkable-tabset] .tab-pane { scroll-margin-top: 120px; } - -[data-ol-bookmarkable-tabset] { - .nav-tabs-container { - .nav-tabs { - gap: 8px; - flex-wrap: nowrap; - - > li { - float: left; - - // Make the list-items overlay the bottom border - margin-bottom: -1px; - - // Actual tabs (as links) - > a { - color: var(--content-secondary); - border: 1px solid transparent; - border-radius: var(--border-radius-base) var(--border-radius-base) 0 0; - padding: var(--spacing-04); - text-decoration: none; - - &:hover, - &:focus { - cursor: pointer; - background-color: var(--bg-light-secondary); - } - } - - // Active state, and its :hover to override normal :hover - > a.active { - color: var(--content-primary); - background-color: var(--bg-light-primary); - border: 1px solid var(--border-divider); - border-bottom-color: transparent; - cursor: default; - } - } - } - - .tab-content { - border: 1px solid #ddd; - border-top: none; - padding: var(--spacing-05); - } - } -}