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>

_vendor/github.com/google/docsy/assets/scss/shortcodes/tabbed-pane.scss

@@ -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);
   }
 }
 

_vendor/github.com/google/docsy/layouts/shortcodes/tabpane.html

@@ -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>

_vendor/github.com/twbs/bootstrap/scss/_nav.scss

@@ -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,
+    &.active {
-  .show > .nav-link {
+      color: $dark !important;
-    color: var(--#{$prefix}nav-pills-link-active-color);
+      font-weight: 500;
-    @include gradient-bg(var(--#{$prefix}nav-pills-link-active-bg));
+      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;
   }

_vendor/github.com/twbs/bootstrap/scss/_reboot.scss

@@ -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.

assets/scss/_variables_project.scss

@@ -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;

assets/scss/docsy_overrides.scss

@@ -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;
   }
 }