1.0.0-beta2

README.md

@@ -2,7 +2,7 @@
 ![MDB Logo](https://mdbootstrap.com/img/Marketing/general/logo/medium/mdb-r.png)
 
 
-# MDB  5 Alpha
+# MDB  5 Beta
 
 ### Bootstrap 5 & Material Design 2.0 UI KIT
 

README.txt

@@ -1,5 +1,5 @@
 MDB5
-Version: FREE 1.0.0-beta1
+Version: FREE 1.0.0-beta2
 
 Documentation:
 https://mdbootstrap.com/docs/standard/

js/mdb.min.js

@@ -1,6 +1,6 @@
 /*!
  * MDB5
- *   Version: FREE 1.0.0-beta1
+ *   Version: FREE 1.0.0-beta2
  * 
  * 
  *   Copyright: Material Design for Bootstrap

package.json

@@ -1,6 +1,6 @@
 {
   "name": "mdb-ui-kit",
-  "version": "1.0.0-beta1",
+  "version": "1.0.0-beta2",
   "main": "js/mdb.min.js",
   "repository": "https://github.com/mdbootstrap/mdb-ui-kit.git",
   "author": "MDBootstrap",

src/js/mdb/perfect-scrollbar/handlers/click-rail.js

@@ -0,0 +1,30 @@
+/* eslint-disable */
+
+import updateGeometry from '../update-geometry';
+
+export default function (i) {
+  // const element = i.element;
+
+  i.event.bind(i.scrollbarY, 'mousedown', (e) => e.stopPropagation());
+  i.event.bind(i.scrollbarYRail, 'mousedown', (e) => {
+    const positionTop = e.pageY - window.pageYOffset - i.scrollbarYRail.getBoundingClientRect().top;
+    const direction = positionTop > i.scrollbarYTop ? 1 : -1;
+
+    i.element.scrollTop += direction * i.containerHeight;
+    updateGeometry(i);
+
+    e.stopPropagation();
+  });
+
+  i.event.bind(i.scrollbarX, 'mousedown', (e) => e.stopPropagation());
+  i.event.bind(i.scrollbarXRail, 'mousedown', (e) => {
+    const positionLeft =
+      e.pageX - window.pageXOffset - i.scrollbarXRail.getBoundingClientRect().left;
+    const direction = positionLeft > i.scrollbarXLeft ? 1 : -1;
+
+    i.element.scrollLeft += direction * i.containerWidth;
+    updateGeometry(i);
+
+    e.stopPropagation();
+  });
+}

src/js/mdb/perfect-scrollbar/handlers/drag-thumb.js

@@ -0,0 +1,98 @@
+/* eslint-disable */
+
+import * as CSS from '../lib/css';
+import * as DOM from '../lib/dom';
+import cls, { addScrollingClass, removeScrollingClass } from '../lib/class-names';
+import updateGeometry from '../update-geometry';
+import { toInt } from '../lib/util';
+
+export default function (i) {
+  bindMouseScrollHandler(i, [
+    'containerWidth',
+    'contentWidth',
+    'pageX',
+    'railXWidth',
+    'scrollbarX',
+    'scrollbarXWidth',
+    'scrollLeft',
+    'x',
+    'scrollbarXRail',
+  ]);
+  bindMouseScrollHandler(i, [
+    'containerHeight',
+    'contentHeight',
+    'pageY',
+    'railYHeight',
+    'scrollbarY',
+    'scrollbarYHeight',
+    'scrollTop',
+    'y',
+    'scrollbarYRail',
+  ]);
+}
+
+function bindMouseScrollHandler(
+  i,
+  [
+    containerHeight,
+    contentHeight,
+    pageY,
+    railYHeight,
+    scrollbarY,
+    scrollbarYHeight,
+    scrollTop,
+    y,
+    scrollbarYRail,
+  ]
+) {
+  const element = i.element;
+
+  let startingScrollTop = null;
+  let startingMousePageY = null;
+  let scrollBy = null;
+
+  function mouseMoveHandler(e) {
+    if (e.touches && e.touches[0]) {
+      e[pageY] = e.touches[0].pageY;
+    }
+    element[scrollTop] = startingScrollTop + scrollBy * (e[pageY] - startingMousePageY);
+    addScrollingClass(i, y);
+    updateGeometry(i);
+
+    e.stopPropagation();
+    e.preventDefault();
+  }
+
+  function mouseUpHandler() {
+    removeScrollingClass(i, y);
+    i[scrollbarYRail].classList.remove(cls.state.clicking);
+    i.event.unbind(i.ownerDocument, 'mousemove', mouseMoveHandler);
+  }
+
+  function bindMoves(e, touchMode) {
+    startingScrollTop = element[scrollTop];
+    if (touchMode && e.touches) {
+      e[pageY] = e.touches[0].pageY;
+    }
+    startingMousePageY = e[pageY];
+    scrollBy = (i[contentHeight] - i[containerHeight]) / (i[railYHeight] - i[scrollbarYHeight]);
+    if (!touchMode) {
+      i.event.bind(i.ownerDocument, 'mousemove', mouseMoveHandler);
+      i.event.once(i.ownerDocument, 'mouseup', mouseUpHandler);
+      e.preventDefault();
+    } else {
+      i.event.bind(i.ownerDocument, 'touchmove', mouseMoveHandler);
+    }
+
+    i[scrollbarYRail].classList.add(cls.state.clicking);
+
+    e.stopPropagation();
+  }
+
+  i.event.bind(i[scrollbarY], 'mousedown', (e) => {
+    bindMoves(e);
+  });
+  i.event.bind(i[scrollbarY], 'touchstart', (e) => {
+    bindMoves(e, true);
+  });
+}

src/js/mdb/perfect-scrollbar/handlers/keyboard.js

@@ -0,0 +1,147 @@
+/* eslint-disable */
+
+import * as DOM from '../lib/dom';
+import updateGeometry from '../update-geometry';
+import { isEditable } from '../lib/util';
+
+export default function (i) {
+  const element = i.element;
+
+  const elementHovered = () => DOM.matches(element, ':hover');
+  const scrollbarFocused = () =>
+    DOM.matches(i.scrollbarX, ':focus') || DOM.matches(i.scrollbarY, ':focus');
+
+  function shouldPreventDefault(deltaX, deltaY) {
+    const scrollTop = Math.floor(element.scrollTop);
+    if (deltaX === 0) {
+      if (!i.scrollbarYActive) {
+        return false;
+      }
+      if (
+        (scrollTop === 0 && deltaY > 0) ||
+        (scrollTop >= i.contentHeight - i.containerHeight && deltaY < 0)
+      ) {
+        return !i.settings.wheelPropagation;
+      }
+    }
+
+    const scrollLeft = element.scrollLeft;
+    if (deltaY === 0) {
+      if (!i.scrollbarXActive) {
+        return false;
+      }
+      if (
+        (scrollLeft === 0 && deltaX < 0) ||
+        (scrollLeft >= i.contentWidth - i.containerWidth && deltaX > 0)
+      ) {
+        return !i.settings.wheelPropagation;
+      }
+    }
+    return true;
+  }
+
+  i.event.bind(i.ownerDocument, 'keydown', (e) => {
+    if ((e.isDefaultPrevented && e.isDefaultPrevented()) || e.defaultPrevented) {
+      return;
+    }
+
+    if (!elementHovered() && !scrollbarFocused()) {
+      return;
+    }
+
+    let activeElement = document.activeElement
+      ? document.activeElement
+      : i.ownerDocument.activeElement;
+    if (activeElement) {
+      if (activeElement.tagName === 'IFRAME') {
+        activeElement = activeElement.contentDocument.activeElement;
+      } else {
+        // go deeper if element is a webcomponent
+        while (activeElement.shadowRoot) {
+          activeElement = activeElement.shadowRoot.activeElement;
+        }
+      }
+      if (isEditable(activeElement)) {
+        return;
+      }
+    }
+
+    let deltaX = 0;
+    let deltaY = 0;
+
+    switch (e.which) {
+      case 37: // left
+        if (e.metaKey) {
+          deltaX = -i.contentWidth;
+        } else if (e.altKey) {
+          deltaX = -i.containerWidth;
+        } else {
+          deltaX = -30;
+        }
+        break;
+      case 38: // up
+        if (e.metaKey) {
+          deltaY = i.contentHeight;
+        } else if (e.altKey) {
+          deltaY = i.containerHeight;
+        } else {
+          deltaY = 30;
+        }
+        break;
+      case 39: // right
+        if (e.metaKey) {
+          deltaX = i.contentWidth;
+        } else if (e.altKey) {
+          deltaX = i.containerWidth;
+        } else {
+          deltaX = 30;
+        }
+        break;
+      case 40: // down
+        if (e.metaKey) {
+          deltaY = -i.contentHeight;
+        } else if (e.altKey) {
+          deltaY = -i.containerHeight;
+        } else {
+          deltaY = -30;
+        }
+        break;
+      case 32: // space bar
+        if (e.shiftKey) {
+          deltaY = i.containerHeight;
+        } else {
+          deltaY = -i.containerHeight;
+        }
+        break;
+      case 33: // page up
+        deltaY = i.containerHeight;
+        break;
+      case 34: // page down
+        deltaY = -i.containerHeight;
+        break;
+      case 36: // home
+        deltaY = i.contentHeight;
+        break;
+      case 35: // end
+        deltaY = -i.contentHeight;
+        break;
+      default:
+        return;
+    }
+
+    if (i.settings.suppressScrollX && deltaX !== 0) {
+      return;
+    }
+    if (i.settings.suppressScrollY && deltaY !== 0) {
+      return;
+    }
+
+    element.scrollTop -= deltaY;
+    element.scrollLeft += deltaX;
+    updateGeometry(i);
+
+    if (shouldPreventDefault(deltaX, deltaY)) {
+      e.preventDefault();
+    }
+  });
+}

src/js/mdb/perfect-scrollbar/handlers/mouse-wheel.js

@@ -0,0 +1,158 @@
+/* eslint-disable */
+
+import * as CSS from '../lib/css';
+import cls from '../lib/class-names';
+import updateGeometry from '../update-geometry';
+import { env } from '../lib/util';
+
+export default function (i) {
+  const element = i.element;
+
+  let shouldPrevent = false;
+
+  function shouldPreventDefault(deltaX, deltaY) {
+    const roundedScrollTop = Math.floor(element.scrollTop);
+    const isTop = element.scrollTop === 0;
+    const isBottom = roundedScrollTop + element.offsetHeight === element.scrollHeight;
+    const isLeft = element.scrollLeft === 0;
+    const isRight = element.scrollLeft + element.offsetWidth === element.scrollWidth;
+
+    let hitsBound;
+
+    // pick axis with primary direction
+    if (Math.abs(deltaY) > Math.abs(deltaX)) {
+      hitsBound = isTop || isBottom;
+    } else {
+      hitsBound = isLeft || isRight;
+    }
+
+    return hitsBound ? !i.settings.wheelPropagation : true;
+  }
+
+  function getDeltaFromEvent(e) {
+    let deltaX = e.deltaX;
+    let deltaY = -1 * e.deltaY;
+
+    if (typeof deltaX === 'undefined' || typeof deltaY === 'undefined') {
+      // OS X Safari
+      deltaX = (-1 * e.wheelDeltaX) / 6;
+      deltaY = e.wheelDeltaY / 6;
+    }
+
+    if (e.deltaMode && e.deltaMode === 1) {
+      // Firefox in deltaMode 1: Line scrolling
+      deltaX *= 10;
+      deltaY *= 10;
+    }
+
+    if (deltaX !== deltaX && deltaY !== deltaY /* NaN checks */) {
+      // IE in some mouse drivers
+      deltaX = 0;
+      deltaY = e.wheelDelta;
+    }
+
+    if (e.shiftKey) {
+      // reverse axis with shift key
+      return [-deltaY, -deltaX];
+    }
+    return [deltaX, deltaY];
+  }
+
+  function shouldBeConsumedByChild(target, deltaX, deltaY) {
+    // FIXME: this is a workaround for <select> issue in FF and IE #571
+    if (!env.isWebKit && element.querySelector('select:focus')) {
+      return true;
+    }
+
+    if (!element.contains(target)) {
+      return false;
+    }
+
+    let cursor = target;
+
+    while (cursor && cursor !== element) {
+      if (cursor.classList.contains(cls.element.consuming)) {
+        return true;
+      }
+
+      const style = CSS.get(cursor);
+
+      // if deltaY && vertical scrollable
+      if (deltaY && style.overflowY.match(/(scroll|auto)/)) {
+        const maxScrollTop = cursor.scrollHeight - cursor.clientHeight;
+        if (maxScrollTop > 0) {
+          if (
+            (cursor.scrollTop > 0 && deltaY < 0) ||
+            (cursor.scrollTop < maxScrollTop && deltaY > 0)
+          ) {
+            return true;
+          }
+        }
+      }
+      // if deltaX && horizontal scrollable
+      if (deltaX && style.overflowX.match(/(scroll|auto)/)) {
+        const maxScrollLeft = cursor.scrollWidth - cursor.clientWidth;
+        if (maxScrollLeft > 0) {
+          if (
+            (cursor.scrollLeft > 0 && deltaX < 0) ||
+            (cursor.scrollLeft < maxScrollLeft && deltaX > 0)
+          ) {
+            return true;
+          }
+        }
+      }
+
+      cursor = cursor.parentNode;
+    }
+
+    return false;
+  }
+
+  function mousewheelHandler(e) {
+    const [deltaX, deltaY] = getDeltaFromEvent(e);
+
+    if (shouldBeConsumedByChild(e.target, deltaX, deltaY)) {
+      return;
+    }
+
+    let shouldPrevent = false;
+    if (!i.settings.useBothWheelAxes) {
+      // deltaX will only be used for horizontal scrolling and deltaY will
+      // only be used for vertical scrolling - this is the default
+      element.scrollTop -= deltaY * i.settings.wheelSpeed;
+      element.scrollLeft += deltaX * i.settings.wheelSpeed;
+    } else if (i.scrollbarYActive && !i.scrollbarXActive) {
+      // only vertical scrollbar is active and useBothWheelAxes option is
+      // active, so let's scroll vertical bar using both mouse wheel axes
+      if (deltaY) {
+        element.scrollTop -= deltaY * i.settings.wheelSpeed;
+      } else {
+        element.scrollTop += deltaX * i.settings.wheelSpeed;
+      }
+      shouldPrevent = true;
+    } else if (i.scrollbarXActive && !i.scrollbarYActive) {
+      // useBothWheelAxes and only horizontal bar is active, so use both
+      // wheel axes for horizontal bar
+      if (deltaX) {
+        element.scrollLeft += deltaX * i.settings.wheelSpeed;
+      } else {
+        element.scrollLeft -= deltaY * i.settings.wheelSpeed;
+      }
+      shouldPrevent = true;
+    }
+
+    updateGeometry(i);
+
+    shouldPrevent = shouldPrevent || shouldPreventDefault(deltaX, deltaY);
+    if (shouldPrevent && !e.ctrlKey) {
+      e.stopPropagation();
+      e.preventDefault();
+    }
+  }
+
+  if (typeof window.onwheel !== 'undefined') {
+    i.event.bind(element, 'wheel', mousewheelHandler);
+  } else if (typeof window.onmousewheel !== 'undefined') {
+    i.event.bind(element, 'mousewheel', mousewheelHandler);
+  }
+}

src/js/mdb/perfect-scrollbar/handlers/touch.js

@@ -0,0 +1,212 @@
+/* eslint-disable */
+import updateGeometry from '../update-geometry';
+import cls from '../lib/class-names';
+import * as CSS from '../lib/css';
+import { env } from '../lib/util';
+
+export default function (i) {
+  if (!env.supportsTouch && !env.supportsIePointer) {
+    return;
+  }
+
+  const element = i.element;
+
+  function shouldPrevent(deltaX, deltaY) {
+    const scrollTop = Math.floor(element.scrollTop);
+    const scrollLeft = element.scrollLeft;
+    const magnitudeX = Math.abs(deltaX);
+    const magnitudeY = Math.abs(deltaY);
+
+    if (magnitudeY > magnitudeX) {
+      // user is perhaps trying to swipe up/down the page
+
+      if (
+        (deltaY < 0 && scrollTop === i.contentHeight - i.containerHeight) ||
+        (deltaY > 0 && scrollTop === 0)
+      ) {
+        // set prevent for mobile Chrome refresh
+        return window.scrollY === 0 && deltaY > 0 && env.isChrome;
+      }
+    } else if (magnitudeX > magnitudeY) {
+      // user is perhaps trying to swipe left/right across the page
+
+      if (
+        (deltaX < 0 && scrollLeft === i.contentWidth - i.containerWidth) ||
+        (deltaX > 0 && scrollLeft === 0)
+      ) {
+        return true;
+      }
+    }
+
+    return true;
+  }
+
+  function applyTouchMove(differenceX, differenceY) {
+    element.scrollTop -= differenceY;
+    element.scrollLeft -= differenceX;
+
+    updateGeometry(i);
+  }
+
+  let startOffset = {};
+  let startTime = 0;
+  let speed = {};
+  let easingLoop = null;
+
+  function getTouch(e) {
+    if (e.targetTouches) {
+      return e.targetTouches[0];
+    } else {
+      // Maybe IE pointer
+      return e;
+    }
+  }
+
+  function shouldHandle(e) {
+    if (e.pointerType && e.pointerType === 'pen' && e.buttons === 0) {
+      return false;
+    }
+    if (e.targetTouches && e.targetTouches.length === 1) {
+      return true;
+    }
+    if (e.pointerType && e.pointerType !== 'mouse' && e.pointerType !== e.MSPOINTER_TYPE_MOUSE) {
+      return true;
+    }
+    return false;
+  }
+
+  function touchStart(e) {
+    if (!shouldHandle(e)) {
+      return;
+    }
+
+    const touch = getTouch(e);
+
+    startOffset.pageX = touch.pageX;
+    startOffset.pageY = touch.pageY;
+
+    startTime = new Date().getTime();
+
+    if (easingLoop !== null) {
+      clearInterval(easingLoop);
+    }
+  }
+
+  function shouldBeConsumedByChild(target, deltaX, deltaY) {
+    if (!element.contains(target)) {
+      return false;
+    }
+
+    let cursor = target;
+
+    while (cursor && cursor !== element) {
+      if (cursor.classList.contains(cls.element.consuming)) {
+        return true;
+      }
+
+      const style = CSS.get(cursor);
+
+      // if deltaY && vertical scrollable
+      if (deltaY && style.overflowY.match(/(scroll|auto)/)) {
+        const maxScrollTop = cursor.scrollHeight - cursor.clientHeight;
+        if (maxScrollTop > 0) {
+          if (
+            (cursor.scrollTop > 0 && deltaY < 0) ||
+            (cursor.scrollTop < maxScrollTop && deltaY > 0)
+          ) {
+            return true;
+          }
+        }
+      }
+      // if deltaX && horizontal scrollable
+      if (deltaX && style.overflowX.match(/(scroll|auto)/)) {
+        const maxScrollLeft = cursor.scrollWidth - cursor.clientWidth;
+        if (maxScrollLeft > 0) {
+          if (
+            (cursor.scrollLeft > 0 && deltaX < 0) ||
+            (cursor.scrollLeft < maxScrollLeft && deltaX > 0)
+          ) {
+            return true;
+          }
+        }
+      }
+
+      cursor = cursor.parentNode;
+    }
+
+    return false;
+  }
+
+  function touchMove(e) {
+    if (shouldHandle(e)) {
+      const touch = getTouch(e);
+
+      const currentOffset = { pageX: touch.pageX, pageY: touch.pageY };
+
+      const differenceX = currentOffset.pageX - startOffset.pageX;
+      const differenceY = currentOffset.pageY - startOffset.pageY;
+
+      if (shouldBeConsumedByChild(e.target, differenceX, differenceY)) {
+        return;
+      }
+
+      applyTouchMove(differenceX, differenceY);
+      startOffset = currentOffset;
+
+      const currentTime = new Date().getTime();
+
+      const timeGap = currentTime - startTime;
+      if (timeGap > 0) {
+        speed.x = differenceX / timeGap;
+        speed.y = differenceY / timeGap;
+        startTime = currentTime;
+      }
+
+      if (shouldPrevent(differenceX, differenceY)) {
+        e.preventDefault();
+      }
+    }
+  }
+  function touchEnd() {
+    if (i.settings.swipeEasing) {
+      clearInterval(easingLoop);
+      easingLoop = setInterval(function () {
+        if (i.isInitialized) {
+          clearInterval(easingLoop);
+          return;
+        }
+
+        if (!speed.x && !speed.y) {
+          clearInterval(easingLoop);
+          return;
+        }
+
+        if (Math.abs(speed.x) < 0.01 && Math.abs(speed.y) < 0.01) {
+          clearInterval(easingLoop);
+          return;
+        }
+
+        applyTouchMove(speed.x * 30, speed.y * 30);
+
+        speed.x *= 0.8;
+        speed.y *= 0.8;
+      }, 10);
+    }
+  }
+
+  if (env.supportsTouch) {
+    i.event.bind(element, 'touchstart', touchStart);
+    i.event.bind(element, 'touchmove', touchMove);
+    i.event.bind(element, 'touchend', touchEnd);
+  } else if (env.supportsIePointer) {
+    if (window.PointerEvent) {
+      i.event.bind(element, 'pointerdown', touchStart);
+      i.event.bind(element, 'pointermove', touchMove);
+      i.event.bind(element, 'pointerup', touchEnd);
+    } else if (window.MSPointerEvent) {
+      i.event.bind(element, 'MSPointerDown', touchStart);
+      i.event.bind(element, 'MSPointerMove', touchMove);
+      i.event.bind(element, 'MSPointerUp', touchEnd);
+    }
+  }
+}

src/js/mdb/perfect-scrollbar/index.js

@@ -0,0 +1,236 @@
+/* eslint-disable */
+
+import * as CSS from './lib/css';
+import * as DOM from './lib/dom';
+import cls from './lib/class-names';
+import EventManager from './lib/event-manager';
+import processScrollDiff from './process-scroll-diff';
+import updateGeometry from './update-geometry';
+import { toInt, outerWidth } from './lib/util';
+
+import clickRail from './handlers/click-rail';
+import dragThumb from './handlers/drag-thumb';
+import keyboard from './handlers/keyboard';
+import wheel from './handlers/mouse-wheel';
+import touch from './handlers/touch';
+
+const defaultSettings = () => ({
+  handlers: ['click-rail', 'drag-thumb', 'keyboard', 'wheel', 'touch'],
+  maxScrollbarLength: null,
+  minScrollbarLength: null,
+  scrollingThreshold: 1000,
+  scrollXMarginOffset: 0,
+  scrollYMarginOffset: 0,
+  suppressScrollX: false,
+  suppressScrollY: false,
+  swipeEasing: true,
+  useBothWheelAxes: false,
+  wheelPropagation: true,
+  wheelSpeed: 1,
+});
+
+const handlers = {
+  'click-rail': clickRail,
+  'drag-thumb': dragThumb,
+  keyboard,
+  wheel,
+  touch,
+};
+
+export default class PerfectScrollbar {
+  constructor(element, userSettings = {}) {
+    if (typeof element === 'string') {
+      element = document.querySelector(element);
+    }
+
+    if (!element || !element.nodeName) {
+      throw new Error('no element is specified to initialize PerfectScrollbar');
+    }
+
+    this.element = element;
+
+    element.classList.add(cls.main);
+
+    this.settings = defaultSettings();
+    for (const key in userSettings) {
+      this.settings[key] = userSettings[key];
+    }
+
+    this.containerWidth = null;
+    this.containerHeight = null;
+    this.contentWidth = null;
+    this.contentHeight = null;
+
+    const focus = () => element.classList.add(cls.state.focus);
+    const blur = () => element.classList.remove(cls.state.focus);
+
+    this.isRtl = CSS.get(element).direction === 'rtl';
+    if (this.isRtl === true) {
+      element.classList.add(cls.rtl);
+    }
+    this.isNegativeScroll = (() => {
+      const originalScrollLeft = element.scrollLeft;
+      let result = null;
+      element.scrollLeft = -1;
+      result = element.scrollLeft < 0;
+      element.scrollLeft = originalScrollLeft;
+      return result;
+    })();
+    this.negativeScrollAdjustment = this.isNegativeScroll
+      ? element.scrollWidth - element.clientWidth
+      : 0;
+    this.event = new EventManager();
+    this.ownerDocument = element.ownerDocument || document;
+
+    this.scrollbarXRail = DOM.div(cls.element.rail('x'));
+    element.appendChild(this.scrollbarXRail);
+    this.scrollbarX = DOM.div(cls.element.thumb('x'));
+    this.scrollbarXRail.appendChild(this.scrollbarX);
+    this.scrollbarX.setAttribute('tabindex', 0);
+    this.event.bind(this.scrollbarX, 'focus', focus);
+    this.event.bind(this.scrollbarX, 'blur', blur);
+    this.scrollbarXActive = null;
+    this.scrollbarXWidth = null;
+    this.scrollbarXLeft = null;
+    const railXStyle = CSS.get(this.scrollbarXRail);
+    this.scrollbarXBottom = parseInt(railXStyle.bottom, 10);
+    if (isNaN(this.scrollbarXBottom)) {
+      this.isScrollbarXUsingBottom = false;
+      this.scrollbarXTop = toInt(railXStyle.top);
+    } else {
+      this.isScrollbarXUsingBottom = true;
+    }
+    this.railBorderXWidth = toInt(railXStyle.borderLeftWidth) + toInt(railXStyle.borderRightWidth);
+    // Set rail to display:block to calculate margins
+    CSS.set(this.scrollbarXRail, { display: 'block' });
+    this.railXMarginWidth = toInt(railXStyle.marginLeft) + toInt(railXStyle.marginRight);
+    CSS.set(this.scrollbarXRail, { display: '' });
+    this.railXWidth = null;
+    this.railXRatio = null;
+
+    this.scrollbarYRail = DOM.div(cls.element.rail('y'));
+    element.appendChild(this.scrollbarYRail);
+    this.scrollbarY = DOM.div(cls.element.thumb('y'));
+    this.scrollbarYRail.appendChild(this.scrollbarY);
+    this.scrollbarY.setAttribute('tabindex', 0);
+    this.event.bind(this.scrollbarY, 'focus', focus);
+    this.event.bind(this.scrollbarY, 'blur', blur);
+    this.scrollbarYActive = null;
+    this.scrollbarYHeight = null;
+    this.scrollbarYTop = null;
+    const railYStyle = CSS.get(this.scrollbarYRail);
+    this.scrollbarYRight = parseInt(railYStyle.right, 10);
+    if (isNaN(this.scrollbarYRight)) {
+      this.isScrollbarYUsingRight = false;
+      this.scrollbarYLeft = toInt(railYStyle.left);
+    } else {
+      this.isScrollbarYUsingRight = true;
+    }
+    this.scrollbarYOuterWidth = this.isRtl ? outerWidth(this.scrollbarY) : null;
+    this.railBorderYWidth = toInt(railYStyle.borderTopWidth) + toInt(railYStyle.borderBottomWidth);
+    CSS.set(this.scrollbarYRail, { display: 'block' });
+    this.railYMarginHeight = toInt(railYStyle.marginTop) + toInt(railYStyle.marginBottom);
+    CSS.set(this.scrollbarYRail, { display: '' });
+    this.railYHeight = null;
+    this.railYRatio = null;
+
+    this.reach = {
+      x:
+        element.scrollLeft <= 0
+          ? 'start'
+          : element.scrollLeft >= this.contentWidth - this.containerWidth
+          ? 'end'
+          : null,
+      y:
+        element.scrollTop <= 0
+          ? 'start'
+          : element.scrollTop >= this.contentHeight - this.containerHeight
+          ? 'end'
+          : null,
+    };
+
+    this.isAlive = true;
+
+    this.settings.handlers.forEach((handlerName) => handlers[handlerName](this));
+
+    this.lastScrollTop = Math.floor(element.scrollTop); // for onScroll only
+    this.lastScrollLeft = element.scrollLeft; // for onScroll only
+    this.event.bind(this.element, 'scroll', (e) => this.onScroll(e));
+    updateGeometry(this);
+  }
+
+  update() {
+    if (!this.isAlive) {
+      return;
+    }
+
+    // Recalcuate negative scrollLeft adjustment
+    this.negativeScrollAdjustment = this.isNegativeScroll
+      ? this.element.scrollWidth - this.element.clientWidth
+      : 0;
+
+    // Recalculate rail margins
+    CSS.set(this.scrollbarXRail, { display: 'block' });
+    CSS.set(this.scrollbarYRail, { display: 'block' });
+    this.railXMarginWidth =
+      toInt(CSS.get(this.scrollbarXRail).marginLeft) +
+      toInt(CSS.get(this.scrollbarXRail).marginRight);
+    this.railYMarginHeight =
+      toInt(CSS.get(this.scrollbarYRail).marginTop) +
+      toInt(CSS.get(this.scrollbarYRail).marginBottom);
+
+    // Hide scrollbars not to affect scrollWidth and scrollHeight
+    CSS.set(this.scrollbarXRail, { display: 'none' });
+    CSS.set(this.scrollbarYRail, { display: 'none' });
+
+    updateGeometry(this);
+
+    processScrollDiff(this, 'top', 0, false, true);
+    processScrollDiff(this, 'left', 0, false, true);
+
+    CSS.set(this.scrollbarXRail, { display: '' });
+    CSS.set(this.scrollbarYRail, { display: '' });
+  }
+
+  onScroll(e) {
+    if (!this.isAlive) {
+      return;
+    }
+
+    updateGeometry(this);
+    processScrollDiff(this, 'top', this.element.scrollTop - this.lastScrollTop);
+    processScrollDiff(this, 'left', this.element.scrollLeft - this.lastScrollLeft);
+
+    this.lastScrollTop = Math.floor(this.element.scrollTop);
+    this.lastScrollLeft = this.element.scrollLeft;
+  }
+
+  destroy() {
+    if (!this.isAlive) {
+      return;
+    }
+
+    this.event.unbindAll();
+    DOM.remove(this.scrollbarX);
+    DOM.remove(this.scrollbarY);
+    DOM.remove(this.scrollbarXRail);
+    DOM.remove(this.scrollbarYRail);
+    this.removePsClasses();
+
+    // unset elements
+    this.element = null;
+    this.scrollbarX = null;
+    this.scrollbarY = null;
+    this.scrollbarXRail = null;
+    this.scrollbarYRail = null;
+
+    this.isAlive = false;
+  }
+
+  removePsClasses() {
+    this.element.className = this.element.className
+      .split(' ')
+      .filter((name) => !name.match(/^ps([-_].+|)$/))
+      .join(' ');
+  }
+}

src/js/mdb/perfect-scrollbar/lib/class-names.js

@@ -0,0 +1,47 @@
+/* eslint-disable */
+
+const cls = {
+  main: 'ps',
+  rtl: 'ps__rtl',
+  element: {
+    thumb: (x) => `ps__thumb-${x}`,
+    rail: (x) => `ps__rail-${x}`,
+    consuming: 'ps__child--consume',
+  },
+  state: {
+    focus: 'ps--focus',
+    clicking: 'ps--clicking',
+    active: (x) => `ps--active-${x}`,
+    scrolling: (x) => `ps--scrolling-${x}`,
+  },
+};
+
+export default cls;
+
+/*
+ * Helper methods
+ */
+const scrollingClassTimeout = { x: null, y: null };
+
+export function addScrollingClass(i, x) {
+  const classList = i.element.classList;
+  const className = cls.state.scrolling(x);
+
+  if (classList.contains(className)) {
+    clearTimeout(scrollingClassTimeout[x]);
+  } else {
+    classList.add(className);
+  }
+}
+
+export function removeScrollingClass(i, x) {
+  scrollingClassTimeout[x] = setTimeout(
+    () => i.isAlive && i.element.classList.remove(cls.state.scrolling(x)),
+    i.settings.scrollingThreshold
+  );
+}
+
+export function setScrollingClassInstantly(i, x) {
+  addScrollingClass(i, x);
+  removeScrollingClass(i, x);
+}

src/js/mdb/perfect-scrollbar/lib/css.js

@@ -0,0 +1,16 @@
+/* eslint-disable */
+
+export function get(element) {
+  return getComputedStyle(element);
+}
+
+export function set(element, obj) {
+  for (const key in obj) {
+    let val = obj[key];
+    if (typeof val === 'number') {
+      val = `${val}px`;
+    }
+    element.style[key] = val;
+  }
+  return element;
+}

src/js/mdb/perfect-scrollbar/lib/dom.js

@@ -0,0 +1,36 @@
+/* eslint-disable */
+
+export function div(className) {
+  const div = document.createElement('div');
+  div.className = className;
+  return div;
+}
+
+const elMatches =
+  typeof Element !== 'undefined' &&
+  (Element.prototype.matches ||
+    Element.prototype.webkitMatchesSelector ||
+    Element.prototype.mozMatchesSelector ||
+    Element.prototype.msMatchesSelector);
+
+export function matches(element, query) {
+  if (!elMatches) {
+    throw new Error('No element matching method supported');
+  }
+
+  return elMatches.call(element, query);
+}
+
+export function remove(element) {
+  if (element.remove) {
+    element.remove();
+  } else {
+    if (element.parentNode) {
+      element.parentNode.removeChild(element);
+    }
+  }
+}
+
+export function queryChildren(element, selector) {
+  return Array.prototype.filter.call(element.children, (child) => matches(child, selector));
+}

src/js/mdb/perfect-scrollbar/lib/event-manager.js

@@ -0,0 +1,78 @@
+/* eslint-disable */
+class EventElement {
+  constructor(element) {
+    this.element = element;
+    this.handlers = {};
+  }
+
+  bind(eventName, handler) {
+    if (typeof this.handlers[eventName] === 'undefined') {
+      this.handlers[eventName] = [];
+    }
+    this.handlers[eventName].push(handler);
+    this.element.addEventListener(eventName, handler, false);
+  }
+
+  unbind(eventName, target) {
+    this.handlers[eventName] = this.handlers[eventName].filter((handler) => {
+      if (target && handler !== target) {
+        return true;
+      }
+      this.element.removeEventListener(eventName, handler, false);
+      return false;
+    });
+  }
+
+  unbindAll() {
+    for (const name in this.handlers) {
+      this.unbind(name);
+    }
+  }
+
+  get isEmpty() {
+    return Object.keys(this.handlers).every((key) => this.handlers[key].length === 0);
+  }
+}
+
+export default class EventManager {
+  constructor() {
+    this.eventElements = [];
+  }
+
+  eventElement(element) {
+    let ee = this.eventElements.filter((ee) => ee.element === element)[0];
+    if (!ee) {
+      ee = new EventElement(element);
+      this.eventElements.push(ee);
+    }
+    return ee;
+  }
+
+  bind(element, eventName, handler) {
+    this.eventElement(element).bind(eventName, handler);
+  }
+
+  unbind(element, eventName, handler) {
+    const ee = this.eventElement(element);
+    ee.unbind(eventName, handler);
+
+    if (ee.isEmpty) {
+      // remove
+      this.eventElements.splice(this.eventElements.indexOf(ee), 1);
+    }
+  }
+
+  unbindAll() {
+    this.eventElements.forEach((e) => e.unbindAll());
+    this.eventElements = [];
+  }
+
+  once(element, eventName, handler) {
+    const ee = this.eventElement(element);
+    const onceHandler = (evt) => {
+      ee.unbind(eventName, onceHandler);
+      handler(evt);
+    };
+    ee.bind(eventName, onceHandler);
+  }
+}

src/js/mdb/perfect-scrollbar/lib/util.js

@@ -0,0 +1,39 @@
+/* eslint-disable */
+
+import * as CSS from './css';
+import * as DOM from './dom';
+
+export function toInt(x) {
+  return parseInt(x, 10) || 0;
+}
+
+export function isEditable(el) {
+  return (
+    DOM.matches(el, 'input,[contenteditable]') ||
+    DOM.matches(el, 'select,[contenteditable]') ||
+    DOM.matches(el, 'textarea,[contenteditable]') ||
+    DOM.matches(el, 'button,[contenteditable]')
+  );
+}
+
+export function outerWidth(element) {
+  const styles = CSS.get(element);
+  return (
+    toInt(styles.width) +
+    toInt(styles.paddingLeft) +
+    toInt(styles.paddingRight) +
+    toInt(styles.borderLeftWidth) +
+    toInt(styles.borderRightWidth)
+  );
+}
+
+export const env = {
+  isWebKit: typeof document !== 'undefined' && 'WebkitAppearance' in document.documentElement.style,
+  supportsTouch:
+    typeof window !== 'undefined' &&
+    ('ontouchstart' in window ||
+      ('maxTouchPoints' in window.navigator && window.navigator.maxTouchPoints > 0) ||
+      (window.DocumentTouch && document instanceof window.DocumentTouch)),
+  supportsIePointer: typeof navigator !== 'undefined' && navigator.msMaxTouchPoints,
+  isChrome: typeof navigator !== 'undefined' && /Chrome/i.test(navigator && navigator.userAgent),
+};

src/js/mdb/perfect-scrollbar/process-scroll-diff.js

@@ -0,0 +1,65 @@
+import { setScrollingClassInstantly } from './lib/class-names';
+
+function createEvent(name) {
+  if (typeof window.CustomEvent === 'function') {
+    return new CustomEvent(name);
+  }
+
+  const evt = document.createEvent('CustomEvent');
+  evt.initCustomEvent(name, false, false, undefined);
+  return evt;
+}
+
+export default function (i, axis, diff, useScrollingClass = true, forceFireReachEvent = false) {
+  let fields;
+  if (axis === 'top') {
+    fields = ['contentHeight', 'containerHeight', 'scrollTop', 'y', 'up', 'down'];
+  } else if (axis === 'left') {
+    fields = ['contentWidth', 'containerWidth', 'scrollLeft', 'x', 'left', 'right'];
+  } else {
+    throw new Error('A proper axis should be provided');
+  }
+
+  processScrollDiff(i, diff, fields, useScrollingClass, forceFireReachEvent);
+}
+
+function processScrollDiff(
+  i,
+  diff,
+  [contentHeight, containerHeight, scrollTop, y, up, down],
+  useScrollingClass = true,
+  forceFireReachEvent = false
+) {
+  const element = i.element;
+
+  // reset reach
+  i.reach[y] = null;
+
+  // 1 for subpixel rounding
+  if (element[scrollTop] < 1) {
+    i.reach[y] = 'start';
+  }
+
+  // 1 for subpixel rounding
+  if (element[scrollTop] > i[contentHeight] - i[containerHeight] - 1) {
+    i.reach[y] = 'end';
+  }
+
+  if (diff) {
+    element.dispatchEvent(createEvent(`ps-scroll-${y}`));
+
+    if (diff < 0) {
+      element.dispatchEvent(createEvent(`ps-scroll-${up}`));
+    } else if (diff > 0) {
+      element.dispatchEvent(createEvent(`ps-scroll-${down}`));
+    }
+
+    if (useScrollingClass) {
+      setScrollingClassInstantly(i, y);
+    }
+  }
+
+  if (i.reach[y] && (diff || forceFireReachEvent)) {
+    element.dispatchEvent(createEvent(`ps-${y}-reach-${i.reach[y]}`));
+  }
+}

src/js/mdb/perfect-scrollbar/update-geometry.js

@@ -0,0 +1,154 @@
+import * as CSS from './lib/css';
+import * as DOM from './lib/dom';
+import cls from './lib/class-names';
+import { toInt } from './lib/util';
+
+/* eslint-disable no-lonely-if */
+
+export default function (i) {
+  const element = i.element;
+  const roundedScrollTop = Math.floor(element.scrollTop);
+  const rect = element.getBoundingClientRect();
+
+  i.containerWidth = Math.floor(rect.width);
+  i.containerHeight = Math.floor(rect.height);
+
+  i.contentWidth = element.scrollWidth;
+  i.contentHeight = element.scrollHeight;
+
+  if (!element.contains(i.scrollbarXRail)) {
+    // clean up and append
+    DOM.queryChildren(element, cls.element.rail('x')).forEach((el) => DOM.remove(el));
+    element.appendChild(i.scrollbarXRail);
+  }
+  if (!element.contains(i.scrollbarYRail)) {
+    // clean up and append
+    DOM.queryChildren(element, cls.element.rail('y')).forEach((el) => DOM.remove(el));
+    element.appendChild(i.scrollbarYRail);
+  }
+
+  if (
+    !i.settings.suppressScrollX &&
+    i.containerWidth + i.settings.scrollXMarginOffset < i.contentWidth
+  ) {
+    i.scrollbarXActive = true;
+    i.railXWidth = i.containerWidth - i.railXMarginWidth;
+    i.railXRatio = i.containerWidth / i.railXWidth;
+    i.scrollbarXWidth = getThumbSize(i, toInt((i.railXWidth * i.containerWidth) / i.contentWidth));
+    i.scrollbarXLeft = toInt(
+      ((i.negativeScrollAdjustment + element.scrollLeft) * (i.railXWidth - i.scrollbarXWidth)) /
+        (i.contentWidth - i.containerWidth)
+    );
+  } else {
+    i.scrollbarXActive = false;
+  }
+
+  if (
+    !i.settings.suppressScrollY &&
+    i.containerHeight + i.settings.scrollYMarginOffset < i.contentHeight
+  ) {
+    i.scrollbarYActive = true;
+    i.railYHeight = i.containerHeight - i.railYMarginHeight;
+    i.railYRatio = i.containerHeight / i.railYHeight;
+    i.scrollbarYHeight = getThumbSize(
+      i,
+      toInt((i.railYHeight * i.containerHeight) / i.contentHeight)
+    );
+    i.scrollbarYTop = toInt(
+      (roundedScrollTop * (i.railYHeight - i.scrollbarYHeight)) /
+        (i.contentHeight - i.containerHeight)
+    );
+  } else {
+    i.scrollbarYActive = false;
+  }
+
+  if (i.scrollbarXLeft >= i.railXWidth - i.scrollbarXWidth) {
+    i.scrollbarXLeft = i.railXWidth - i.scrollbarXWidth;
+  }
+  if (i.scrollbarYTop >= i.railYHeight - i.scrollbarYHeight) {
+    i.scrollbarYTop = i.railYHeight - i.scrollbarYHeight;
+  }
+
+  updateCss(element, i);
+
+  if (i.scrollbarXActive) {
+    element.classList.add(cls.state.active('x'));
+  } else {
+    element.classList.remove(cls.state.active('x'));
+    i.scrollbarXWidth = 0;
+    i.scrollbarXLeft = 0;
+    element.scrollLeft = i.isRtl === true ? i.contentWidth : 0;
+  }
+  if (i.scrollbarYActive) {
+    element.classList.add(cls.state.active('y'));
+  } else {
+    element.classList.remove(cls.state.active('y'));
+    i.scrollbarYHeight = 0;
+    i.scrollbarYTop = 0;
+    element.scrollTop = 0;
+  }
+}
+
+function getThumbSize(i, thumbSize) {
+  if (i.settings.minScrollbarLength) {
+    thumbSize = Math.max(thumbSize, i.settings.minScrollbarLength);
+  }
+  if (i.settings.maxScrollbarLength) {
+    thumbSize = Math.min(thumbSize, i.settings.maxScrollbarLength);
+  }
+  return thumbSize;
+}
+
+function updateCss(element, i) {
+  const xRailOffset = { width: i.railXWidth };
+  const roundedScrollTop = Math.floor(element.scrollTop);
+
+  if (i.isRtl) {
+    xRailOffset.left =
+      i.negativeScrollAdjustment + element.scrollLeft + i.containerWidth - i.contentWidth;
+  } else {
+    xRailOffset.left = element.scrollLeft;
+  }
+  if (i.isScrollbarXUsingBottom) {
+    xRailOffset.bottom = i.scrollbarXBottom - roundedScrollTop;
+  } else {
+    xRailOffset.top = i.scrollbarXTop + roundedScrollTop;
+  }
+  CSS.set(i.scrollbarXRail, xRailOffset);
+
+  const yRailOffset = { top: roundedScrollTop, height: i.railYHeight };
+  if (i.isScrollbarYUsingRight) {
+    if (i.isRtl) {
+      yRailOffset.right =
+        i.contentWidth -
+        (i.negativeScrollAdjustment + element.scrollLeft) -
+        i.scrollbarYRight -
+        i.scrollbarYOuterWidth -
+        9;
+    } else {
+      yRailOffset.right = i.scrollbarYRight - element.scrollLeft;
+    }
+  } else {
+    if (i.isRtl) {
+      yRailOffset.left =
+        i.negativeScrollAdjustment +
+        element.scrollLeft +
+        i.containerWidth * 2 -
+        i.contentWidth -
+        i.scrollbarYLeft -
+        i.scrollbarYOuterWidth;
+    } else {
+      yRailOffset.left = i.scrollbarYLeft + element.scrollLeft;
+    }
+  }
+  CSS.set(i.scrollbarYRail, yRailOffset);
+
+  CSS.set(i.scrollbarX, {
+    left: i.scrollbarXLeft,
+    width: i.scrollbarXWidth - i.railBorderXWidth,
+  });
+  CSS.set(i.scrollbarY, {
+    top: i.scrollbarYTop,
+    height: i.scrollbarYHeight - i.railBorderYWidth,
+  });
+}

src/scss/free/_variables.scss

@@ -486,34 +486,34 @@ $input-padding-top: 0.33em;
 $input-padding-bottom: $input-padding-top;
 $input-transition: all 0.2s linear;
 
-$form-label-left: 0.75em;
-$form-label-padding-top: 0.37em;
+$form-label-left: 0.75rem;
+$form-label-padding-top: 0.37rem;
 $form-label-transition: all 0.2s ease-out;
 $form-label-color: rgba(0, 0, 0, 0.6);
 
-$input-focus-active-label-transform: translateY(-1em) translateY(0.1em) scale(0.8);
+$input-focus-active-label-transform: translateY(-1rem) translateY(0.1rem) scale(0.8);
 $input-focus-label-color: $primary;
-$input-focus-border-width: 0.125em;
+$input-focus-border-width: 0.125rem;
 $input-focus-border-color: $primary;
 $input-disabled-background-color: #e9ecef;
 
-$input-font-size-lg: 1em;
+$input-font-size-lg: 1rem;
 $input-line-height-lg: 2.15;
-$input-focus-active-label-transform-lg: translateY(-1.25em) translateY(0.1em) scale(0.8);
+$input-focus-active-label-transform-lg: translateY(-1.25rem) translateY(0.1rem) scale(0.8);
 
-$input-font-size-sm: 0.775em;
+$input-font-size-sm: 0.775rem;
 $input-line-height-sm: 1.5;
-$input-focus-active-label-transform-sm: translateY(-0.83em) translateY(0.1em) scale(0.8);
+$input-focus-active-label-transform-sm: translateY(-0.83rem) translateY(0.1rem) scale(0.8);
 
 $form-notch-div-border-color: #bdbdbd;
-$form-notch-leading-width: 0.5em;
-$form-notch-leading-border-radius: 0.25em;
-$form-notch-middle-max-width: 1em;
+$form-notch-leading-width: 0.5rem;
+$form-notch-leading-border-radius: 0.25rem;
+$form-notch-middle-max-width: 1rem;
 $form-notch-trailing-border-radius: $form-notch-leading-border-radius;
 
-$form-label-padding-top-lg: 0.7em;
-$form-label-padding-top-sm: 0.33em;
-$form-label-font-size-sm: 0.775em;
+$form-label-padding-top-lg: 0.7rem;
+$form-label-padding-top-sm: 0.33rem;
+$form-label-font-size-sm: 0.775rem;
 
 $form-white-input-color: $white;
 $form-white-label-color: $gray-50;
@@ -521,17 +521,17 @@ $form-white-notch-div-border-color: $gray-50;
 $form-white-input-focus-label-color: $white;
 $form-white-input-focus-border-color: $white;
 
-$form-check-input-margin-left: 1.79em;
-$form-check-input-radio-margin-left: 1.85em;
-$form-check-input-width: 1.125em;
-$form-check-input-height: $form-check-input-width;
+$form-check-input-margin-left: 1.79rem;
+$form-check-input-radio-margin-left: 1.85rem;
+$form-check-input-width-md: 1.125rem;
+$form-check-input-height: $form-check-input-width-md;
 $form-check-input-background-color: $white;
-$form-check-input-border-width: 0.125em;
+$form-check-input-border-width: 0.125rem;
 $form-check-input-border-color: rgb(117, 117, 117);
 
 $form-check-input-before-box-shadow: 0px 0px 0px 13px transparent;
 $form-check-input-before-border-radius: 50%;
-$form-check-input-before-width: 0.875em;
+$form-check-input-before-width: 0.875rem;
 $form-check-input-before-height: $form-check-input-before-width;
 $form-check-input-before-transform: scale(0);
 
@@ -553,36 +553,36 @@ $form-check-input-checked-focus-before-box-shadow: 0px 0px 0px 13px $primary;
 $form-check-input-checked-focus-before-transform: $form-check-input-focus-before-transform;
 $form-check-input-checked-focus-before-transition: $form-check-input-focus-before-transition;
 
-$form-check-input-checkbox-border-radius: 0.125em;
-$form-check-input-checkbox-focus-after-width: 0.875em;
+$form-check-input-checkbox-border-radius: 0.125rem;
+$form-check-input-checkbox-focus-after-width: 0.875rem;
 $form-check-input-checkbox-focus-after-height: $form-check-input-checkbox-focus-after-width;
 $form-check-input-checkbox-focus-after-background-color: $white;
 $form-check-input-checkbox-checked-background-color: $primary;
 $form-check-input-checkbox-checked-focus-background-color: $primary;
 
 $form-check-input-checkbox-checked-after-transform: rotate(45deg);
-$form-check-input-checkbox-checked-after-border-width: 0.125em;
+$form-check-input-checkbox-checked-after-border-width: 0.125rem;
 $form-check-input-checkbox-checked-after-border-color: $white;
-$form-check-input-checkbox-checked-after-width: 0.375em;
-$form-check-input-checkbox-checked-after-height: 0.8125em;
-$form-check-input-checkbox-checked-after-margin-left: 0.25em;
+$form-check-input-checkbox-checked-after-width: 0.375rem;
+$form-check-input-checkbox-checked-after-height: 0.8125rem;
+$form-check-input-checkbox-checked-after-margin-left: 0.25rem;
 $form-check-input-checkbox-checked-after-margin-top: -1px;
 
 $form-check-input-indeterminate-focus-before-box-shadow: 0px 0px 0px 13px $primary;
 $form-check-input-indeterminate-checked-background-color: $primary;
 $form-check-input-indeterminate-checked-after-transform: rotate(90deg);
-$form-check-input-indeterminate-checked-after-border-width: 0.125em;
+$form-check-input-indeterminate-checked-after-border-width: 0.125rem;
 $form-check-input-indeterminate-checked-after-border-color: $white;
-$form-check-input-indeterminate-checked-after-width: 0.125em;
-$form-check-input-indeterminate-checked-after-height: 0.875em;
-$form-check-input-indeterminate-checked-after-margin-left: 0.375em;
+$form-check-input-indeterminate-checked-after-width: 0.125rem;
+$form-check-input-indeterminate-checked-after-height: 0.875rem;
+$form-check-input-indeterminate-checked-after-margin-left: 0.375rem;
 $form-check-input-indeterminate-focus-background-color: $primary;
 
 $form-check-input-radio-border-radius: 50%;
-$form-check-input-radio-width: 1.25em;
+$form-check-input-radio-width: 1.25rem;
 $form-check-input-radio-height: $form-check-input-radio-width;
 
-$form-check-input-radio-before-width: 1em;
+$form-check-input-radio-before-width: 1rem;
 $form-check-input-radio-before-height: $form-check-input-radio-before-width;
 
 $form-check-input-radio-after-width: $form-check-input-radio-before-width;
@@ -592,28 +592,28 @@ $form-check-input-radio-after-background-color: $white;
 
 $form-check-input-radio-checked-background-color: $white;
 $form-check-input-radio-checked-after-border-radius: $form-check-input-radio-border-radius;
-$form-check-input-radio-checked-after-width: 0.625em;
+$form-check-input-radio-checked-after-width: 0.625rem;
 $form-check-input-radio-checked-after-height: $form-check-input-radio-checked-after-width;
 $form-check-input-radio-checked-after-border-color: $primary;
 $form-check-input-radio-checked-after-background-color: $primary;
-$form-check-input-radio-checked-after-margin-top: 0.1875em;
-$form-check-input-radio-checked-after-margin-left: 0.1875em;
+$form-check-input-radio-checked-after-margin-top: 0.1875rem;
+$form-check-input-radio-checked-after-margin-left: 0.1875rem;
 $form-check-input-radio-checked-after-transition: border-color;
 $form-check-input-radio-checked-focus-background-color: $white;
 
-$form-switch-padding-left: 1.85em;
-$form-switch-form-check-input-border-radius: 0.4375em;
-$form-switch-form-check-input-width: 2.25em;
-$form-switch-form-check-input-height: 0.875em;
+$form-switch-padding-left: 1.85rem;
+$form-switch-form-check-input-border-radius: 0.4375rem;
+$form-switch-form-check-input-width: 2.25rem;
+$form-switch-form-check-input-height: 0.875rem;
 $form-switch-form-check-input-background-color: rgba(0, 0, 0, 0.38);
-$form-switch-form-check-input-margin-top: 0.35em;
-$form-switch-form-check-input-margin-right: 0.7em;
+$form-switch-form-check-input-margin-top: 0.35rem;
+$form-switch-form-check-input-margin-right: 0.7rem;
 
 $form-switch-form-check-input-after-border-radius: 50%;
-$form-switch-form-check-input-after-width: 1.25em;
+$form-switch-form-check-input-after-width: 1.25rem;
 $form-switch-form-check-input-after-height: $form-switch-form-check-input-after-width;
 $form-switch-form-check-input-after-background-color: $white;
-$form-switch-form-check-input-after-margin-top: -0.1875em;
+$form-switch-form-check-input-after-margin-top: -0.1875rem;
 $form-switch-form-check-input-after-box-shadow: 0 3px 1px -2px rgba(0, 0, 0, 0.2),
   0 2px 2px 0 rgba(0, 0, 0, 0.14), 0 1px 5px 0 rgba(0, 0, 0, 0.12);
 $form-switch-form-check-input-after-transition: background-color 0.2s, transform 0.2s;
@@ -623,26 +623,26 @@ $form-switch-form-check-input-focus-before-transform: scale(1);
 $form-switch-form-check-input-focus-before-transition: box-shadow 0.2s, transform 0.2s;
 
 $form-switch-form-check-input-focus-after-border-radius: $form-switch-form-check-input-after-border-radius;
-$form-switch-form-check-input-focus-after-width: 1.25em;
+$form-switch-form-check-input-focus-after-width: 1.25rem;
 $form-switch-form-check-input-focus-after-height: $form-switch-form-check-input-focus-after-width;
 
-$form-switch-form-check-input-checked-focus-before-margin-left: 1.0625em;
+$form-switch-form-check-input-checked-focus-before-margin-left: 1.0625rem;
 $form-switch-form-check-input-checked-focus-before-box-shadow: 3px -1px 0px 13px $primary;
 $form-switch-form-check-input-checked-focus-before-transform: scale(1);
 $form-switch-form-check-input-checked-focus-before-transition: box-shadow 0.2s, transform 0.2s;
 
 $form-switch-form-check-input-checked-checkbox-after-border-radius: 50%;
-$form-switch-form-check-input-checked-checkbox-after-width: 1.25em;
-$form-switch-form-check-input-checked-checkbox-after-height: 1.25em;
+$form-switch-form-check-input-checked-checkbox-after-width: 1.25rem;
+$form-switch-form-check-input-checked-checkbox-after-height: 1.25rem;
 $form-switch-form-check-input-checked-checkbox-after-background-color: $primary;
 $form-switch-form-check-input-checked-checkbox-after-margin-top: -3px;
-$form-switch-form-check-input-checked-checkbox-after-margin-left: 1.0625em;
+$form-switch-form-check-input-checked-checkbox-after-margin-left: 1.0625rem;
 $form-switch-form-check-input-checked-checkbox-after-box-shadow: 0 3px 1px -2px rgba(0, 0, 0, 0.2),
   0 2px 2px 0 rgba(0, 0, 0, 0.14), 0 1px 5px 0 rgba(0, 0, 0, 0.12);
 $form-switch-form-check-input-checked-checkbox-after-transition: background-color 0.2s,
   transform 0.2s;
 
-$form-file-height: calc(1.8em + 0.33rem + 2px);
+$form-file-height: calc(1.8rem + 0.33rem + 2px);
 
 $form-file-label-focus-border-color: $primary;
 $form-file-label-focus-transition: all 0.2s linear;
@@ -659,12 +659,12 @@ $form-file-button-line-height: 1.5;
 $form-file-button-background-color: #fff;
 $form-file-button-border-color: $form-file-text-border-color;
 
-$form-file-sm-height: calc(1.7em + 0.33rem + 2px);
+$form-file-sm-height: calc(1.7rem + 0.33rem + 2px);
 $form-file-sm-font-size: 0.775rem;
 $form-file-sm-line-height: $form-file-button-line-height;
 $form-file-sm-padding-y: $form-file-text-padding-y;
 
-$form-file-lg-height: calc(2.315em + 0.33rem + 2px);
+$form-file-lg-height: calc(2.315rem + 0.33rem + 2px);
 $form-file-lg-font-size: 1rem;
 $form-file-lg-line-height: 2.15;
 $form-file-lg-padding-y: $form-file-text-padding-y;
@@ -672,7 +672,7 @@ $form-file-lg-padding-y: $form-file-text-padding-y;
 $form-range-webkit-slider-thumb-margin-top: -6px;
 $form-range-webkit-slider-runnable-track-height: 4px;
 
-$input-group-min-height: calc(1.5em + 0.33rem + 2px);
+$input-group-min-height: calc(1.5rem + 0.33rem + 2px);
 $input-group-padding-y: 0.27rem;
 $input-group-transition: all 0.2s linear;
 
@@ -682,12 +682,12 @@ $input-group-focus-box-shadow: inset 0 0 0 1px $primary;
 
 $input-group-text-padding-y: 0.27rem;
 
-$input-group-lg-height: calc(2.315em + 0.33rem + 2px);
+$input-group-lg-height: calc(2.315rem + 0.33rem + 2px);
 $input-group-lg-font-size: 1rem;
 $input-group-lg-padding-y: 0.33rem;
 $input-group-lg-text-font-size: $input-group-lg-font-size;
 
-$input-group-sm-height-height: calc(1.7em + 0.33rem + 2px);
+$input-group-sm-height-height: calc(1.7rem + 0.33rem + 2px);
 $input-group-sm-font-size: 0.775rem;
 $input-group-sm-padding-y: $input-group-lg-padding-y;
 $input-group-sm-text-font-size: $input-group-sm-font-size;

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

@@ -16,7 +16,7 @@
 }
 
 .form-check-input {
-  width: $form-check-input-width;
+  width: $form-check-input-width-md;
   height: $form-check-input-height;
   background-color: $form-check-input-background-color;
   border: $form-check-input-border-width solid $form-check-input-border-color;