bootstrap upgrade to 5.1, dependencies upgrade, ui fixes

demo/dist/libs/countup.js/dist/countUp.js

@@ -16,7 +16,7 @@ var CountUp = /** @class */ (function () {
         this.target = target;
         this.endVal = endVal;
         this.options = options;
-        this.version = '2.0.7';
+        this.version = '2.0.8';
         this.defaults = {
             startVal: 0,
             decimalPlaces: 0,
@@ -87,10 +87,10 @@ var CountUp = /** @class */ (function () {
         // default format and easing functions
         this.formatNumber = function (num) {
             var neg = (num < 0) ? '-' : '';
-            var result, x, x1, x2, x3;
+            var result, x1, x2, x3;
             result = Math.abs(num).toFixed(_this.options.decimalPlaces);
             result += '';
-            x = result.split('.');
+            var x = result.split('.');
             x1 = x[0];
             x2 = x.length > 1 ? _this.options.decimal + x[1] : '';
             if (_this.options.useGrouping) {

demo/sitemap.xml

@@ -2,191 +2,191 @@
   <urlset xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance" xsi:schemaLocation="http://www.sitemaps.org/schemas/sitemap/0.9 http://www.sitemaps.org/schemas/sitemap/0.9/sitemap.xsd" xmlns="http://www.sitemaps.org/schemas/sitemap/0.9">
     <url>
       <loc>/docs/alerts.html</loc>
-      <lastmod>2021-05-08T16:50:17+02:00</lastmod>
+      <lastmod>2021-08-08T15:54:02+02:00</lastmod>
     </url>
     <url>
       <loc>/docs/autosize.html</loc>
-      <lastmod>2021-05-08T16:50:17+02:00</lastmod>
+      <lastmod>2021-08-08T15:54:02+02:00</lastmod>
     </url>
     <url>
       <loc>/docs/avatars.html</loc>
-      <lastmod>2021-05-08T16:50:17+02:00</lastmod>
+      <lastmod>2021-08-08T15:54:02+02:00</lastmod>
     </url>
     <url>
       <loc>/docs/badges.html</loc>
-      <lastmod>2021-05-08T16:50:17+02:00</lastmod>
+      <lastmod>2021-08-08T15:54:02+02:00</lastmod>
     </url>
     <url>
       <loc>/docs/borders.html</loc>
-      <lastmod>2021-05-08T16:50:17+02:00</lastmod>
+      <lastmod>2021-08-08T15:54:02+02:00</lastmod>
     </url>
     <url>
       <loc>/docs/breadcrumb.html</loc>
-      <lastmod>2021-05-08T16:50:17+02:00</lastmod>
+      <lastmod>2021-08-08T15:54:02+02:00</lastmod>
     </url>
     <url>
       <loc>/docs/browser-support.html</loc>
-      <lastmod>2021-05-08T16:50:17+02:00</lastmod>
+      <lastmod>2021-08-08T15:54:02+02:00</lastmod>
     </url>
     <url>
       <loc>/docs/buttons.html</loc>
-      <lastmod>2021-05-08T16:50:17+02:00</lastmod>
+      <lastmod>2021-08-08T15:54:02+02:00</lastmod>
     </url>
     <url>
       <loc>/docs/cards.html</loc>
-      <lastmod>2021-05-08T16:50:17+02:00</lastmod>
+      <lastmod>2021-08-08T15:54:02+02:00</lastmod>
     </url>
     <url>
       <loc>/docs/carousel.html</loc>
-      <lastmod>2021-05-08T16:50:17+02:00</lastmod>
+      <lastmod>2021-08-08T15:54:02+02:00</lastmod>
     </url>
     <url>
       <loc>/docs/charts.html</loc>
-      <lastmod>2021-05-08T16:50:17+02:00</lastmod>
+      <lastmod>2021-08-08T15:54:02+02:00</lastmod>
     </url>
     <url>
       <loc>/docs/colors.html</loc>
-      <lastmod>2021-05-08T16:50:17+02:00</lastmod>
+      <lastmod>2021-08-08T15:54:02+02:00</lastmod>
     </url>
     <url>
       <loc>/docs/countup.html</loc>
-      <lastmod>2021-05-08T16:50:17+02:00</lastmod>
+      <lastmod>2021-08-08T15:54:02+02:00</lastmod>
     </url>
     <url>
       <loc>/docs/cursors.html</loc>
-      <lastmod>2021-05-08T16:50:17+02:00</lastmod>
+      <lastmod>2021-08-08T15:54:02+02:00</lastmod>
     </url>
     <url>
       <loc>/docs/divider.html</loc>
-      <lastmod>2021-05-08T16:50:17+02:00</lastmod>
+      <lastmod>2021-08-08T15:54:02+02:00</lastmod>
     </url>
     <url>
       <loc>/docs/download.html</loc>
-      <lastmod>2021-05-08T16:50:17+02:00</lastmod>
+      <lastmod>2021-08-08T15:54:02+02:00</lastmod>
     </url>
     <url>
       <loc>/docs/dropdowns.html</loc>
-      <lastmod>2021-05-08T16:50:17+02:00</lastmod>
+      <lastmod>2021-08-08T15:54:02+02:00</lastmod>
     </url>
     <url>
       <loc>/docs/empty.html</loc>
-      <lastmod>2021-05-08T16:50:17+02:00</lastmod>
+      <lastmod>2021-08-08T15:54:02+02:00</lastmod>
     </url>
     <url>
       <loc>/docs/flags.html</loc>
-      <lastmod>2021-05-08T16:50:17+02:00</lastmod>
+      <lastmod>2021-08-08T15:54:02+02:00</lastmod>
     </url>
     <url>
       <loc>/docs/form-color-check.html</loc>
-      <lastmod>2021-05-08T16:50:17+02:00</lastmod>
+      <lastmod>2021-08-08T15:54:02+02:00</lastmod>
     </url>
     <url>
       <loc>/docs/form-elements.html</loc>
-      <lastmod>2021-05-08T16:50:17+02:00</lastmod>
+      <lastmod>2021-08-08T15:54:02+02:00</lastmod>
     </url>
     <url>
       <loc>/docs/form-fieldset.html</loc>
-      <lastmod>2021-05-08T16:50:17+02:00</lastmod>
+      <lastmod>2021-08-08T15:54:02+02:00</lastmod>
     </url>
     <url>
       <loc>/docs/form-helpers.html</loc>
-      <lastmod>2021-05-08T16:50:17+02:00</lastmod>
+      <lastmod>2021-08-08T15:54:02+02:00</lastmod>
     </url>
     <url>
       <loc>/docs/form-image-check.html</loc>
-      <lastmod>2021-05-08T16:50:17+02:00</lastmod>
+      <lastmod>2021-08-08T15:54:02+02:00</lastmod>
     </url>
     <url>
       <loc>/docs/form-selectboxes.html</loc>
-      <lastmod>2021-05-08T16:50:17+02:00</lastmod>
+      <lastmod>2021-08-08T15:54:02+02:00</lastmod>
     </url>
     <url>
       <loc>/docs/form-validation.html</loc>
-      <lastmod>2021-05-08T16:50:17+02:00</lastmod>
+      <lastmod>2021-08-08T15:54:02+02:00</lastmod>
     </url>
     <url>
       <loc>/docs/getting-started.html</loc>
-      <lastmod>2021-05-08T16:50:17+02:00</lastmod>
+      <lastmod>2021-08-08T15:54:02+02:00</lastmod>
     </url>
     <url>
       <loc>/docs/icons.html</loc>
-      <lastmod>2021-05-08T16:50:17+02:00</lastmod>
+      <lastmod>2021-08-08T15:54:02+02:00</lastmod>
     </url>
     <url>
       <loc>/docs/</loc>
-      <lastmod>2021-05-08T16:50:17+02:00</lastmod>
+      <lastmod>2021-08-08T15:54:02+02:00</lastmod>
     </url>
     <url>
       <loc>/docs/input-mask.html</loc>
-      <lastmod>2021-05-08T16:50:17+02:00</lastmod>
+      <lastmod>2021-08-08T15:54:02+02:00</lastmod>
     </url>
     <url>
       <loc>/docs/interactions.html</loc>
-      <lastmod>2021-05-08T16:50:17+02:00</lastmod>
+      <lastmod>2021-08-08T15:54:02+02:00</lastmod>
     </url>
     <url>
       <loc>/docs/modals.html</loc>
-      <lastmod>2021-05-08T16:50:17+02:00</lastmod>
+      <lastmod>2021-08-08T15:54:02+02:00</lastmod>
     </url>
     <url>
       <loc>/docs/page-headers.html</loc>
-      <lastmod>2021-05-08T16:50:17+02:00</lastmod>
+      <lastmod>2021-08-08T15:54:02+02:00</lastmod>
     </url>
     <url>
       <loc>/docs/payments.html</loc>
-      <lastmod>2021-05-08T16:50:17+02:00</lastmod>
+      <lastmod>2021-08-08T15:54:02+02:00</lastmod>
     </url>
     <url>
       <loc>/docs/progress.html</loc>
-      <lastmod>2021-05-08T16:50:17+02:00</lastmod>
+      <lastmod>2021-08-08T15:54:02+02:00</lastmod>
     </url>
     <url>
       <loc>/docs/range-slider.html</loc>
-      <lastmod>2021-05-08T16:50:17+02:00</lastmod>
+      <lastmod>2021-08-08T15:54:02+02:00</lastmod>
     </url>
     <url>
       <loc>/docs/ribbons.html</loc>
-      <lastmod>2021-05-08T16:50:17+02:00</lastmod>
+      <lastmod>2021-08-08T15:54:02+02:00</lastmod>
     </url>
     <url>
       <loc>/docs/skeleton.html</loc>
-      <lastmod>2021-05-08T16:50:17+02:00</lastmod>
+      <lastmod>2021-08-08T15:54:02+02:00</lastmod>
     </url>
     <url>
       <loc>/docs/spinners.html</loc>
-      <lastmod>2021-05-08T16:50:17+02:00</lastmod>
+      <lastmod>2021-08-08T15:54:02+02:00</lastmod>
     </url>
     <url>
       <loc>/docs/steps.html</loc>
-      <lastmod>2021-05-08T16:50:17+02:00</lastmod>
+      <lastmod>2021-08-08T15:54:02+02:00</lastmod>
     </url>
     <url>
       <loc>/docs/switch-icon.html</loc>
-      <lastmod>2021-05-08T16:50:17+02:00</lastmod>
+      <lastmod>2021-08-08T15:54:02+02:00</lastmod>
     </url>
     <url>
       <loc>/docs/tables.html</loc>
-      <lastmod>2021-05-08T16:50:17+02:00</lastmod>
+      <lastmod>2021-08-08T15:54:02+02:00</lastmod>
     </url>
     <url>
       <loc>/docs/tabs.html</loc>
-      <lastmod>2021-05-08T16:50:17+02:00</lastmod>
+      <lastmod>2021-08-08T15:54:02+02:00</lastmod>
     </url>
     <url>
       <loc>/docs/timelines.html</loc>
-      <lastmod>2021-05-08T16:50:17+02:00</lastmod>
+      <lastmod>2021-08-08T15:54:02+02:00</lastmod>
     </url>
     <url>
       <loc>/docs/toasts.html</loc>
-      <lastmod>2021-05-08T16:50:17+02:00</lastmod>
+      <lastmod>2021-08-08T15:54:02+02:00</lastmod>
     </url>
     <url>
       <loc>/docs/tooltips.html</loc>
-      <lastmod>2021-05-08T16:50:17+02:00</lastmod>
+      <lastmod>2021-08-08T15:54:02+02:00</lastmod>
     </url>
     <url>
       <loc>/docs/typography.html</loc>
-      <lastmod>2021-05-08T16:50:17+02:00</lastmod>
+      <lastmod>2021-08-08T15:54:02+02:00</lastmod>
     </url>
     <url>
       <loc>/accordion.html</loc>

dist/libs/countup.js/dist/countUp.js

@@ -16,7 +16,7 @@ var CountUp = /** @class */ (function () {
         this.target = target;
         this.endVal = endVal;
         this.options = options;
-        this.version = '2.0.7';
+        this.version = '2.0.8';
         this.defaults = {
             startVal: 0,
             decimalPlaces: 0,
@@ -87,10 +87,10 @@ var CountUp = /** @class */ (function () {
         // default format and easing functions
         this.formatNumber = function (num) {
             var neg = (num < 0) ? '-' : '';
-            var result, x, x1, x2, x3;
+            var result, x1, x2, x3;
             result = Math.abs(num).toFixed(_this.options.decimalPlaces);
             result += '';
-            x = result.split('.');
+            var x = result.split('.');
             x1 = x[0];
             x2 = x.length > 1 ? _this.options.decimal + x[1] : '';
             if (_this.options.useGrouping) {

gulpfile.js

 const gulp = require('gulp'),
 	debug = require('gulp-debug'),
 	clean = require('gulp-clean'),
-	sass = require('gulp-sass'),
+	sass = require('gulp-sass')(require('node-sass')),
 	postcss = require('gulp-postcss'),
 	header = require('gulp-header'),
 	cleanCSS = require('gulp-clean-css'),

package.json

@@ -48,15 +48,15 @@
   "main": "dist/js/tabler.js",
   "homepage": "https://tabler.io",
   "devDependencies": {
-    "@babel/core": "^7.14.0",
-    "@babel/preset-env": "^7.14.1",
-    "@rollup/plugin-commonjs": "^19.0.0",
-    "@rollup/plugin-node-resolve": "^13.0.0",
-    "@rollup/plugin-replace": "^2.4.2",
+    "@babel/core": "^7.15.0",
+    "@babel/preset-env": "^7.15.0",
+    "@rollup/plugin-commonjs": "^20.0.0",
+    "@rollup/plugin-node-resolve": "^13.0.4",
+    "@rollup/plugin-replace": "^3.0.0",
     "@rollup/stream": "^2.0.0",
-    "autoprefixer": "^10.2.5",
-    "browser-sync": "^2.26.14",
-    "critical": "^3.0.1",
+    "autoprefixer": "^10.3.1",
+    "browser-sync": "^2.27.5",
+    "critical": "^4.0.1",
     "cross-spawn": "^7.0.3",
     "gulp": "^4.0.2",
     "gulp-clean": "^0.4.0",
@@ -67,30 +67,31 @@
     "gulp-postcss": "^9.0.0",
     "gulp-purgecss": "^4.0.3",
     "gulp-rename": "^2.0.0",
-    "gulp-rtlcss": "^1.4.1",
-    "gulp-sass": "^4.1.0",
-    "postcss": "^8.2.14",
-    "release-it": "^14.6.1",
-    "rollup": "^2.47.0",
+    "gulp-rtlcss": "^1.4.2",
+    "gulp-sass": "^5.0.0",
+    "node-sass": "^6.0.1",
+    "postcss": "^8.3.6",
+    "release-it": "^14.11.0",
+    "rollup": "^2.56.1",
     "rollup-plugin-babel": "^4.4.0",
     "rollup-plugin-cleanup": "^3.2.1",
     "vinyl-buffer": "^1.0.1",
     "vinyl-source-stream": "^2.0.0",
     "yaml": "^1.10.2",
-    "yargs": "^17.0.1"
+    "yargs": "^17.1.0"
   },
   "dependencies": {
-    "@popperjs/core": "^2.9.2",
-    "@tabler/icons": "^1.41.1",
-    "apexcharts": "^3.26.1",
-    "autosize": "^4.0.2",
-    "bootstrap": "twbs/bootstrap#232e392c9126fcb1dbe13c963e7edcdbd62cfeb8",
+    "@popperjs/core": "^2.9.3",
+    "@tabler/icons": "^1.41.2",
+    "apexcharts": "^3.27.3",
+    "autosize": "^5.0.1",
+    "bootstrap": "5.1",
     "choices.js": "^9.0.1",
-    "countup.js": "^2.0.7",
+    "countup.js": "^2.0.8",
     "flatpickr": "^4.6.9",
-    "imask": "^6.0.7",
+    "imask": "^6.1.0",
     "litepicker": "^2.0.11",
-    "nouislider": "^15.0.0"
+    "nouislider": "^15.2.0"
   },
   "resolutions": {
     "**/**/node-gyp": "^5.0.0"

src/scss/_variables.scss

@@ -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/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;
   }
 }
\ No newline at end of file

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

 .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/_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;
   }