fix: tabs wrap (#160)

fixes #156

Co-authored-by: Inex Code <inex.code@selfprivacy.org>
Co-authored-by: def <dettlaff@riseup.net>
Reviewed-on: https://git.selfprivacy.org/SelfPrivacy/selfprivacy.org/pulls/160
Reviewed-by: Inex Code <inex.code@selfprivacy.org>
Co-authored-by: nevfy <nevfy@noreply.git.selfprivacy.org>
Co-committed-by: nevfy <nevfy@noreply.git.selfprivacy.org>
This commit is contained in:
nevfy 2024-08-06 20:03:54 +03:00 committed by Inex Code
parent cae3ce759b
commit 8384987774
6 changed files with 21 additions and 53 deletions

View file

@ -11,10 +11,6 @@
max-width: 100%;
}
margin-top: 0rem;
margin-bottom: 1.5rem;
border-left: 1px solid rgba(0, 0, 0, 0.125);
border-right: 1px solid rgba(0, 0, 0, 0.125);
border-bottom: 1px solid rgba(0, 0, 0, 0.125);
}
}

View file

@ -56,8 +56,10 @@
{{ $persistKeyList := slice -}}
{{ $tabPaneOrdinal := .Ordinal -}}
<div class="container-fluid d-flex flex-column">
{{/* Nav tabs */ -}}
<ul class="nav nav-tabs{{ if $rightPane }} justify-content-end{{ end }}" id="tabs-{{- $tabPaneOrdinal -}}" role="tablist">
<ul class="nav nav-pills{{ if $rightPane }} justify-content-end{{ end }} d-flex flex-nowrap align-items-stretch gap-2 flex-column flex-sm-row" id="tabs-{{- $tabPaneOrdinal -}}" role="tablist">
{{ range $index, $element := $.Scratch.Get "tabs" -}}
{{ $enabled := not $element.disabled -}}
@ -108,7 +110,7 @@
{{ $isActive := and $enabled (not $activeSet) -}}
<button class="nav-link
<button class="w-100 nav-link
{{- if $isActive -}}
{{ $activeSet = true }} active
{{- end -}}
@ -173,3 +175,4 @@
{{- end }}
</div>
</div>

View file

@ -106,7 +106,7 @@
// scss-docs-start nav-pills-css-vars
--#{$prefix}nav-pills-border-radius: #{$nav-pills-border-radius};
--#{$prefix}nav-pills-link-active-color: #{$nav-pills-link-active-color};
--#{$prefix}nav-pills-link-active-bg: #{$nav-pills-link-active-bg};
// --#{$prefix}nav-pills-link-active-bg: #{$nav-pills-link-active-bg};
// scss-docs-end nav-pills-css-vars
.nav-link {
@ -119,12 +119,13 @@
background-color: transparent;
border-color: transparent;
}
}
.nav-link.active,
.show > .nav-link {
color: var(--#{$prefix}nav-pills-link-active-color);
@include gradient-bg(var(--#{$prefix}nav-pills-link-active-bg));
&.active {
color: $dark !important;
font-weight: 500;
background-color: white;
box-shadow: $shadow;
}
}
}
@ -163,6 +164,7 @@
// Hide tabbable panes to start, show them when `.active`
.tab-content {
box-shadow: $shadow;
> .tab-pane {
display: none;
}

View file

@ -456,9 +456,11 @@ button,
@if $enable-button-pointers {
&:not(:disabled) {
&:not(.active) {
cursor: pointer; // 3
}
}
}
}
// Remove inner border and padding from Firefox, but don't restore the outline like Normalize.

View file

@ -10,7 +10,7 @@ $gray: #616161;
$dark: #30312C;
$bg-color: whitesmoke;
$shadow: 0 8px 8px rgba(0, 0, 0, 0.25);
$shadow: 0 8px 8px rgba(0, 0, 0, 0.10);
$td-enable-google-fonts: false;
$google_font_name: "Montserrat";
@ -24,3 +24,5 @@ $navbar-dark-color: rgba($secondary, 0.8) !default;
$navbar-dark-hover-color: rgba($secondary, 1) !default;
$navbar-dark-active-color: $secondary !default;
$navbar-dark-disabled-color: rgba($secondary, 0.25) !default;
$nav-link-padding-x: 1.5rem;

View file

@ -26,10 +26,6 @@ h5.taxonomy-title {
display: none !important;
}
.nav-item {
margin-right: .5rem !important;
}
.td-sidebar-nav-active-item {
color: $primary !important;
font-weight: 600;
@ -71,7 +67,7 @@ h5.taxonomy-title {
.tab-content {
.tab-pane {
border: 1px solid rgba(0, 0, 0, 0.125) !important;
border-radius: 0px .25rem .25rem .25rem;
border-radius: .25rem;
max-width: 100% !important;
}
ul li, ol li {
@ -82,17 +78,6 @@ h5.taxonomy-title {
}
}
.nav-tabs {
border: none !important;
a:not(.active).nav-link:hover {
background-color: #0d6efd11;
}
}
.nav-item {
margin-right: .5rem !important;
}
.dropdown-menu {
right: 0;
left: unset;
@ -117,28 +102,6 @@ li:has(input[type="checkbox"]) {
.tab-content {
.tab-pane {
border: none !important;
box-shadow: $shadow;
}
div {
transition: none;
}
}
.nav-tabs {
border: none !important;
.nav-item {
.nav-link {
border: none !important;
box-shadow: $shadow;
margin-bottom: -4px;
}
.nav-link.active {
border-color: transparent transparent white transparent !important;
}
}
a:not(.active).nav-link:hover {
background-color: #0d6efd11;
}
}