Merge branch 'dev' of https://github.com/tabler/tabler into dev-navbar-fixes

 Conflicts:

	package.json

src/pages/_data/menu.yml

@@ -75,6 +75,9 @@ base:
     typography:
       title: Typography
       url: typography.html
+    offcanvas:
+      title: Offcanvas
+      url: offcanvas.html
     markdown:
       title: Markdown
       url: markdown.html

src/pages/_docs/badges.md

@@ -20,7 +20,7 @@ The default badges are square and come in the basic set of colors.
 
 ## Pill badges
 
-Use the `.bagde-pill` class if you want to create a badge with rounded corners. Its width will adjust to the label text.
+Use the `.badge-pill` class if you want to create a badge with rounded corners. Its width will adjust to the label text.
 
 {% capture code %}
 {% for color in site.colors %}

src/pages/offcanvas.html

@@ -0,0 +1,36 @@
+---
+menu: base.offcanvas
+title: Offcanvas
+page-header: Offcanvas
+---
+
+{% assign directions = 'start,end,top,bottom' | split: ',' %}
+
+<div class="card">
+	<div class="card-body">
+		{% for direction in directions %}
+		<a class="btn" data-bs-toggle="offcanvas" href="#offcanvas{{ direction | capitalize }}" role="button" aria-controls="offcanvas{{ direction | capitalize }}">
+			Toggle {{ direction }} offcanvas
+		</a>
+		{% endfor %}
+	</div>
+</div>
+
+{% for direction in directions %}
+<div class="offcanvas offcanvas-{{ direction }}" tabindex="-1" id="offcanvas{{ direction | capitalize }}" aria-labelledby="offcanvas{{ direction | capitalize }}Label">
+	<div class="offcanvas-header">
+		<h2 class="offcanvas-title" id="offcanvas{{ direction | capitalize }}Label">{{ direction | capitalize }} offcanvas</h2>
+		<button type="button" class="btn-close text-reset" data-bs-dismiss="offcanvas" aria-label="Close"></button>
+	</div>
+	<div class="offcanvas-body">
+		<div>
+			Lorem ipsum dolor sit amet, consectetur adipisicing elit. Ab assumenda ea est, eum exercitationem fugiat illum itaque laboriosam magni necessitatibus, nemo nisi numquam quae reiciendis repellat sit soluta unde. Aut!
+		</div>
+		<div class="mt-3">
+			<button class="btn" type="button" data-bs-dismiss="offcanvas">
+				Close offcanvas
+			</button>
+		</div>
+	</div>
+</div>
+{% endfor %}

src/scss/_bootstrap-components.scss

@@ -1,3 +1,4 @@
+// Components
 @import "~bootstrap/scss/root";
 @import "~bootstrap/scss/reboot";
 @import "~bootstrap/scss/type";
@@ -27,6 +28,8 @@
 @import "~bootstrap/scss/popover";
 @import "~bootstrap/scss/carousel";
 @import "~bootstrap/scss/spinners";
+@import "~bootstrap/scss/offcanvas";
+@import "~bootstrap/scss/placeholders";
 
 // Helpers
 @import "~bootstrap/scss/helpers";

src/scss/_bootstrap-config.scss

@@ -1,3 +1,4 @@
+// Config
 @import "~bootstrap/scss/functions";
 @import "~bootstrap/scss/variables";
 @import "~bootstrap/scss/mixins";

src/scss/_core.scss

@@ -50,6 +50,7 @@
 @import "ui/toolbar";
 @import "ui/type";
 @import "ui/charts";
+@import "ui/offcanvas";
 
 @import "utils/background";
 @import "utils/colors";

src/scss/_variables.scss

@@ -12,8 +12,8 @@ $enable-negative-margins: false !default;
 $assets-base: ".." !default;
 
 // FONTS
-$google-font: 'Inter' !default;
-$google-font-monospaced: null !default;
+$google-font: false !default;
+$google-font-monospaced: false !default;
 
 $font-family-sans-serif: $google-font, -apple-system, BlinkMacSystemFont, San Francisco, Segoe UI, Roboto, Helvetica Neue, sans-serif !default;
 $font-family-monospace: $google-font-monospaced, Menlo, Monaco, Consolas, Liberation Mono, Courier New, monospace;
@@ -27,7 +27,7 @@ $icon-stroke-width: 1.5 !default;
 $icon-size: 1.25rem !default;
 
 //Fonts
-$font-size-base: .875rem !default;
+$font-size-base: .9375rem !default;
 $body-letter-spacing: 0 !default;
 
 $font-weight-light: 300 !default;
@@ -35,27 +35,27 @@ $font-weight-normal: 400 !default;
 $font-weight-medium: 500 !default;
 $font-weight-bold: 600 !default;
 
-$line-height-base: (1.25rem/$font-size-base) !default;
-$line-height-sm: (1rem/$font-size-base) !default;
-$line-height-lg: (1.5rem/$font-size-base) !default;
+$line-height-base: divide(1.25rem, $font-size-base) !default;
+$line-height-sm: divide(1rem, $font-size-base) !default;
+$line-height-lg: divide(1.5rem, $font-size-base) !default;
 
-$h1-font-size: (24rem / 16) !default;
-$h1-line-height: (2rem/$h1-font-size) !default;
+$h1-font-size: divide(24rem, 16) !default;
+$h1-line-height: divide(2rem, $h1-font-size) !default;
 
-$h2-font-size: (20rem / 16) !default;
-$h2-line-height: (1.75rem/$h2-font-size) !default;
+$h2-font-size: divide(20rem, 16) !default;
+$h2-line-height: divide(1.75rem, $h2-font-size) !default;
 
-$h3-font-size: (16rem / 16) !default;
-$h3-line-height: (1.5rem/$h3-font-size) !default;
+$h3-font-size: divide(16rem, 16) !default;
+$h3-line-height: divide(1.5rem, $h3-font-size) !default;
 
 $h4-font-size: $font-size-base !default;
-$h4-line-height: (1.25rem/$h4-font-size) !default;
+$h4-line-height: divide(1.25rem, $h4-font-size) !default;
 
-$h5-font-size: (12rem / 16) !default;
-$h5-line-height: (1rem/$h5-font-size) !default;
+$h5-font-size: divide(12rem, 16) !default;
+$h5-line-height: divide(1rem, $h5-font-size) !default;
 
-$h6-font-size: (10rem / 16) !default;
-$h6-line-height: (1rem/$h6-font-size) !default;
+$h6-font-size: divide(10rem, 16) !default;
+$h6-line-height: divide(1rem, $h6-font-size) !default;
 
 $display-font-sizes: (
   1: 5rem,
@@ -66,7 +66,7 @@ $display-font-sizes: (
   6: 2.5rem
 ) !default;
 
-$small-font-size: percentage($h5-font-size/$font-size-base) !default;
+$small-font-size: percentage(divide($h5-font-size, $font-size-base)) !default;
 $code-font-size: $small-font-size !default;
 $code-line-height: 1.25rem !default;
 
@@ -227,8 +227,8 @@ $container-padding-x: 1.5rem !default;
 $spacer: 1rem !default;
 $spacers: (
   0: 0,
-  1: $spacer / 4,
-  2: $spacer / 2,
+  1: $spacer * .25,
+  2: $spacer * .5,
   3: $spacer,
   4: $spacer * 2,
   5: $spacer * 4,
@@ -518,7 +518,6 @@ $table-head-color: $text-muted !default;
 $table-head-bg: $light !default;
 $table-striped-order: even !default;
 $table-striped-bg: $light !default;
-$table-accent-bg: $light !default;
 $table-group-separator-color: $border-color-transparent !default;
 
 //toasts

src/scss/layout/_navbar.scss

@@ -399,7 +399,7 @@ Navbar vertical
             }
 
             .navbar-brand {
-              padding: (($navbar-height - $navbar-brand-image-height) / 2) 0;
+              padding: (($navbar-height - $navbar-brand-image-height) * .5) 0;
               justify-content: center;
             }
 

src/scss/tabler.scss

@@ -1,2 +1,2 @@
-@import "tabler-core";
+@import "core";
 

src/scss/ui/_avatars.scss

@@ -17,8 +17,8 @@
   border-radius: $avatar-border-radius;
 
   svg {
-    width: calc(var(--tblr-avatar-size) / #{(40 / 24)});
-    height: calc(var(--tblr-avatar-size) / #{(40 / 24)});
+    width: calc(var(--tblr-avatar-size) / #{divide(40, 24)});
+    height: calc(var(--tblr-avatar-size) / #{divide(40, 24)});
   }
 
   .badge {
@@ -44,8 +44,8 @@
   }
 
   .avatar-#{$avatar-size} .badge:empty {
-    width: $size / 4;
-    height: $size / 4;
+    width: $size * .25;
+    height: $size * .25;
   }
 }
 
@@ -111,7 +111,7 @@
 
 .page-avatar {
   .page-cover ~ * & {
-    margin-top: calc(calc(-1 * calc(var(--tblr-avatar-size) / 2)) - #{$content-padding-y});
+    margin-top: calc(calc(-1 * calc(var(--tblr-avatar-size) * .5)) - #{$content-padding-y});
     box-shadow: 0 0 0 .25rem $body-bg;
   }
 }

src/scss/ui/_calendars.scss

@@ -28,8 +28,8 @@
 }
 
 .calendar-date {
-  flex: 0 0 (100% / 7);
-  max-width: (100% / 7);
+  flex: 0 0 divide(100%, 7);
+  max-width: divide(100%, 7);
   padding: .2rem;
   text-align: center;
   border: 0;

src/scss/ui/_cards.scss

@@ -416,7 +416,7 @@ Card avatar
   margin-left: auto;
   margin-right: auto;
   box-shadow: 0 0 0 .25rem $card-bg;
-  margin-top: calc(-1 * calc(var(--#{$variable-prefix}avatar-size) / 2));
+  margin-top: calc(-1 * calc(var(--#{$variable-prefix}avatar-size) * .5));
 }
 
 /*

src/scss/ui/_grid.scss

@@ -64,8 +64,8 @@
   }
 
   @include media-breakpoint-down($cards-grid-breakpoint) {
-    --#{$variable-prefix}gutter-x: #{$cards-grid-gap / 2};
-    --#{$variable-prefix}gutter-y: #{$cards-grid-gap / 2};
+    --#{$variable-prefix}gutter-x: #{$cards-grid-gap * .5};
+    --#{$variable-prefix}gutter-y: #{$cards-grid-gap * .5};
   }
 }
 

src/scss/ui/_icons.scss

@@ -16,7 +16,7 @@
 .icon-inline {
   width: 1em;
   height: 1em;
-  font-size: (16/14) * 1em;
+  font-size: divide(16, 14) * 1em;
   vertical-align: -0.2em;
 }
 

src/scss/ui/_images.scss

@@ -1,6 +1,6 @@
 .img-responsive {
   background: no-repeat center/cover;
-  padding-top: percentage(3 / 4);
+  padding-top: percentage(.75);
 }
 
 @each $key, $ratio in $aspect-ratios {

src/scss/ui/_modals.scss

@@ -44,7 +44,7 @@
   font-size: $h3-font-size;
   font-weight: $headings-font-weight;
   color: $headings-color;
-  line-height: (24/18);
+  line-height: $line-height-base;
 }
 
 .modal-footer {

src/scss/ui/_offcanvas.scss

@@ -0,0 +1,3 @@
+.offcanvas-blur {
+  backdrop-filter: blur($modal-backdrop-blur);
+}

src/scss/ui/_ribbons.scss

@@ -28,7 +28,7 @@
     height: 0;
     content: "";
     filter: brightness(70%);
-    border: ($ribbon-margin / 2) solid;
+    border: ($ribbon-margin * .5) solid;
     border-color: inherit;
     border-top-color: transparent;
     border-right-color: transparent;

src/scss/ui/_skeleton.scss

@@ -83,7 +83,7 @@
 
   &:after {
     content: '';
-    padding-top: percentage(9/16);
+    padding-top: percentage(divide(9, 16));
     display: block;
   }
 }

src/scss/ui/_steps.scss

@@ -5,7 +5,7 @@
     padding-top: add($dot-size, 4px);
 
     &:after {
-      top: add($dot-size / 2, 2px);
+      top: add($dot-size * .5, 2px);
       height: $border-width;
     }
 

src/scss/ui/forms/_form-check.scss

@@ -11,7 +11,7 @@ Form check
 
 .form-check-input {
   background-size: $form-check-input-width;
-  margin-top: ($form-check-min-height - $form-check-input-width) / 2;
+  margin-top: ($form-check-min-height - $form-check-input-width) * .5;
 
   .form-switch & {
     transition: .3s background-color, .3s background-position;
@@ -52,7 +52,7 @@ Form switch
 .form-switch {
   .form-check-input {
     height: $form-switch-height;
-    margin-top: ($form-check-min-height - $form-switch-height) / 2;
+    margin-top: ($form-check-min-height - $form-switch-height) * .5;
   }
 }
 

src/scss/utils/_opacity.scss

@@ -2,6 +2,6 @@
 
 @for $i from 0 through 20 {
   .opacity-#{$i * 5} {
-    opacity: $i * 5 / 100 !important;
+    opacity: divide($i * 5, 100) !important;
   }
 }

src/scss/vendor/_nouislider.scss

@@ -35,8 +35,8 @@
   .noUi-horizontal & {
     width: $form-range-thumb-width;
     height: $form-range-thumb-height;
-    top: (-$form-range-thumb-height / 2);
-    right: (-$form-range-thumb-height / 2);
+    top: (-$form-range-thumb-height * .5);
+    right: (-$form-range-thumb-height * .5);
     margin: 1px 1px 0 0;
   }