Merge branch 'dev' of https://github.com/tabler/tabler into dev-docs-footer

core/scss/_variables.scss

@@ -321,10 +321,10 @@ $border-values: (
 $icon-color: var(--#{$prefix}gray-400) !default;
 
 // Code
-$code-color: var(--#{$prefix}primary) !default;
+$code-color: light-dark(var(--#{$prefix}gray-600), var(--#{$prefix}gray-400)) !default;
+$code-bg: light-dark(var(--#{$prefix}gray-100), var(--#{$prefix}gray-900)) !default;
 $code-font-size: $font-size-reative-sm !default;
 $code-line-height: 1.25rem !default;
-$code-bg: var(--#{$prefix}primary-lt) !default;
 
 $pre-padding: 1rem !default;
 $pre-bg: var(--#{$prefix}bg-surface-dark) !default;

core/scss/layout/_dark.scss

@@ -61,9 +61,6 @@
 
     --#{$prefix}btn-color: #{$darken-dark};
 
-    --#{$prefix}code-color: var(--#{$prefix}body-color);
-    --#{$prefix}code-bg: #{$border-dark-color-dark};
-
     .navbar-brand-autodark {
       .navbar-brand-image {
         @include autodark-image;

core/scss/ui/_nav.scss

@@ -44,6 +44,10 @@
     margin: 0 0 calc(-1 * #{$nav-bordered-border-width});
     border: 0;
     border-bottom: $nav-bordered-link-active-border-width var(--#{$prefix}border-style) transparent;
+
+    &:hover {
+      background-color: transparent;
+    }
   }
 
   .nav-link.active,

core/scss/ui/_pagination.scss

@@ -2,6 +2,7 @@
   --#{$prefix}pagination-gap: .25rem;
   user-select: none;
   gap: var(--#{$prefix}pagination-gap);
+  line-height: var(--#{$prefix}body-line-height);
 }
 
 .page-link {

shared/includes/docs/menu.html

@@ -10,7 +10,7 @@
 		<nav class="nav nav-vertical">
 			{% for level2 in level1.children %}
 			<div>
-				<a class="nav-link{% if page.url contains level2.url %} active{% endif %}"{% if level2.children %} href="{{ level2.url }}" data-bs-toggle="collapse" data-bs-target="#collapse-{{ level2.url | slug }}" aria-expanded="{% if page.url contains level2.url %}true{% else %}false{% endif %}"{% endif %}>{{ level2.data.title }}</a>
+				<a class="nav-link{% if page.url contains level2.url %} active{% endif %}"{% if level2.children %} href="{{ level2.url }}" data-bs-toggle="collapse" data-bs-target="#collapse-{{ level2.url | slug }}" aria-expanded="{% if page.url contains level2.url %}true{% else %}false{% endif %}"{% endif %}>{{ level2.data.title }}{% if level2.children %} <span class="nav-link-toggle"></span>{% endif %}</a>
 
 				{% if level2.children %}
 				<nav class="nav nav-vertical collapse{% if page.url contains level2.url %} show{% endif %}" id="collapse-{{ level2.url | slug }}">

shared/includes/docs/tabs-package.html

@@ -1,20 +1,20 @@
-{% assign packages = 'npm,pnpm,yarn' | split: ',' -%}
+<ul class="nav nav-bordered mb-2" role="tablist">
-<ul class="nav nav-tabs" id="myTab" role="tablist">
+	{%- for manager in package-managers -%}
-	{%- for package in packages -%}
 	<li class="nav-item" role="presentation">
-		<button class="nav-link{% if forloop.index == 1 %} active{% endif %}" id="{{ package }}-tab" data-bs-toggle="tab" data-bs-target="#{{ package }}" type="button" role="tab"
+		<button class="nav-link{% if forloop.index == 1 %} active{% endif %}" id="{{ manager.name }}-tab" data-bs-toggle="tab" data-bs-target="#{{ manager.name }}" type="button" role="tab"
 			aria-controls="home" aria-selected="{% if forloop.index == 1 %}true{% else %}false{% endif %}">
-			{{ package }}
+			{{ manager.icon | replace: '<svg ', '<svg class="me-2" ' }}
+			{{ manager.name }}
 		</button>
 	</li>
 	{%- endfor -%}
 </ul>
 <div class="tab-content">
-{%- for package in packages -%}
+{%- for manager in package-managers -%}
-<div class="tab-pane{% if forloop.index == 1 %} show active{% endif %}" id="{{ package }}" role="tabpanel" aria-labelledby="{{ package }}-tab">
+<div class="tab-pane{% if forloop.index == 1 %} show active{% endif %}" id="{{ manager.name }}" role="tabpanel" aria-labelledby="{{ manager.name }}-tab">
 
 ```bash
-{{ package }} install {{ include.name }}
+{{ manager.command }} install {{ include.name }}
 ```
 
 </div>

shared/layouts/docs/default.html

@@ -123,7 +123,7 @@
 											{% if next-prev.prev %}
 											<li class="page-item page-prev">
 												<a class="page-link" href="{{ next-prev.prev.url }}">
-													<div class="row">
+													<div class="row align-items-center">
 														<div class="col-auto">
 															{% include "ui/icon.html" icon="chevron-left" %}
 														</div>
@@ -138,7 +138,7 @@
 											{% if next-prev.next %}
 											<li class="page-item page-next">
 												<a class="page-link" href="{{ next-prev.next.url }}">
-													<div class="row">
+													<div class="row align-items-center">
 														<div class="col">
 															<div class="page-item-subtitle">next</div>
 															<div class="page-item-title">{{ next-prev.next.data.title }}</div>