mdbootstrap/mdb-ui-kit
1
1
Fork 0
mirror of https://github.com/mdbootstrap/mdb-ui-kit.git synced 2025-11-04 09:57:36 +03:00
Code Issues Packages Projects Releases Wiki Activity

Release 1.0.0-beta2

Browse Source
This commit is contained in:
unknown 2020-12-30 15:31:28 +01:00
parent 04931d9267
commit fb899c03d1
22 changed files with 1379 additions and 63 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

BIN
License.pdf
View File

Binary file not shown.

2
README.md
View File

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

2
README.txt
View File

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

6
css/mdb.min.css vendored
View File

File diff suppressed because one or more lines are too long

2
css/mdb.min.css.map
View File

File diff suppressed because one or more lines are too long

2
js/mdb.min.js vendored
View File

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

2
package.json
View File

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

30
src/js/mdb/perfect-scrollbar/handlers/click-rail.js Normal file
View File

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

98
src/js/mdb/perfect-scrollbar/handlers/drag-thumb.js Normal file
View File

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

147
src/js/mdb/perfect-scrollbar/handlers/keyboard.js Normal file
View File

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

158
src/js/mdb/perfect-scrollbar/handlers/mouse-wheel.js Normal file
View File

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

212
src/js/mdb/perfect-scrollbar/handlers/touch.js Normal file
View File

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

236
src/js/mdb/perfect-scrollbar/index.js Normal file
View File

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

47
src/js/mdb/perfect-scrollbar/lib/class-names.js Normal file
View File

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

16
src/js/mdb/perfect-scrollbar/lib/css.js Normal file
View File

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

36
src/js/mdb/perfect-scrollbar/lib/dom.js Normal file
View File

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

78
src/js/mdb/perfect-scrollbar/lib/event-manager.js Normal file
View File

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

39
src/js/mdb/perfect-scrollbar/lib/util.js Normal file
View File

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

65
src/js/mdb/perfect-scrollbar/process-scroll-diff.js Normal file
View File

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

154
src/js/mdb/perfect-scrollbar/update-geometry.js Normal file
View File

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

108
src/scss/free/_variables.scss
View File

@ -486,34 +486,34 @@ $input-padding-top: 0.33em;
$input-padding-bottom: $input-padding-top; $input-padding-bottom: $input-padding-top;
$input-transition: all 0.2s linear; $input-transition: all 0.2s linear;
$form-label-left: 0.75em; $form-label-left: 0.75rem;
$form-label-padding-top: 0.37em; $form-label-padding-top: 0.37rem;
$form-label-transition: all 0.2s ease-out; $form-label-transition: all 0.2s ease-out;
$form-label-color: rgba(0, 0, 0, 0.6); $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-label-color: $primary;
$input-focus-border-width: 0.125em; $input-focus-border-width: 0.125rem;
$input-focus-border-color: $primary; $input-focus-border-color: $primary;
$input-disabled-background-color: #e9ecef; $input-disabled-background-color: #e9ecef;
$input-font-size-lg: 1em; $input-font-size-lg: 1rem;
$input-line-height-lg: 2.15; $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-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-div-border-color: #bdbdbd;
$form-notch-leading-width: 0.5em; $form-notch-leading-width: 0.5rem;
$form-notch-leading-border-radius: 0.25em; $form-notch-leading-border-radius: 0.25rem;
$form-notch-middle-max-width: 1em; $form-notch-middle-max-width: 1rem;
$form-notch-trailing-border-radius: $form-notch-leading-border-radius; $form-notch-trailing-border-radius: $form-notch-leading-border-radius;
$form-label-padding-top-lg: 0.7em; $form-label-padding-top-lg: 0.7rem;
$form-label-padding-top-sm: 0.33em; $form-label-padding-top-sm: 0.33rem;
$form-label-font-size-sm: 0.775em; $form-label-font-size-sm: 0.775rem;
$form-white-input-color: $white; $form-white-input-color: $white;
$form-white-label-color: $gray-50; $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-label-color: $white;
$form-white-input-focus-border-color: $white; $form-white-input-focus-border-color: $white;
$form-check-input-margin-left: 1.79em; $form-check-input-margin-left: 1.79rem;
$form-check-input-radio-margin-left: 1.85em; $form-check-input-radio-margin-left: 1.85rem;
$form-check-input-width: 1.125em; $form-check-input-width-md: 1.125rem;
$form-check-input-height: $form-check-input-width; $form-check-input-height: $form-check-input-width-md;
$form-check-input-background-color: $white; $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-border-color: rgb(117, 117, 117);
$form-check-input-before-box-shadow: 0px 0px 0px 13px transparent; $form-check-input-before-box-shadow: 0px 0px 0px 13px transparent;
$form-check-input-before-border-radius: 50%; $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-height: $form-check-input-before-width;
$form-check-input-before-transform: scale(0); $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-transform: $form-check-input-focus-before-transform;
$form-check-input-checked-focus-before-transition: $form-check-input-focus-before-transition; $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-border-radius: 0.125rem;
$form-check-input-checkbox-focus-after-width: 0.875em; $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-height: $form-check-input-checkbox-focus-after-width;
$form-check-input-checkbox-focus-after-background-color: $white; $form-check-input-checkbox-focus-after-background-color: $white;
$form-check-input-checkbox-checked-background-color: $primary; $form-check-input-checkbox-checked-background-color: $primary;
$form-check-input-checkbox-checked-focus-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-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-border-color: $white;
$form-check-input-checkbox-checked-after-width: 0.375em; $form-check-input-checkbox-checked-after-width: 0.375rem;
$form-check-input-checkbox-checked-after-height: 0.8125em; $form-check-input-checkbox-checked-after-height: 0.8125rem;
$form-check-input-checkbox-checked-after-margin-left: 0.25em; $form-check-input-checkbox-checked-after-margin-left: 0.25rem;
$form-check-input-checkbox-checked-after-margin-top: -1px; $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-focus-before-box-shadow: 0px 0px 0px 13px $primary;
$form-check-input-indeterminate-checked-background-color: $primary; $form-check-input-indeterminate-checked-background-color: $primary;
$form-check-input-indeterminate-checked-after-transform: rotate(90deg); $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-border-color: $white;
$form-check-input-indeterminate-checked-after-width: 0.125em; $form-check-input-indeterminate-checked-after-width: 0.125rem;
$form-check-input-indeterminate-checked-after-height: 0.875em; $form-check-input-indeterminate-checked-after-height: 0.875rem;
$form-check-input-indeterminate-checked-after-margin-left: 0.375em; $form-check-input-indeterminate-checked-after-margin-left: 0.375rem;
$form-check-input-indeterminate-focus-background-color: $primary; $form-check-input-indeterminate-focus-background-color: $primary;
$form-check-input-radio-border-radius: 50%; $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-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-before-height: $form-check-input-radio-before-width;
$form-check-input-radio-after-width: $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-background-color: $white;
$form-check-input-radio-checked-after-border-radius: $form-check-input-radio-border-radius; $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-height: $form-check-input-radio-checked-after-width;
$form-check-input-radio-checked-after-border-color: $primary; $form-check-input-radio-checked-after-border-color: $primary;
$form-check-input-radio-checked-after-background-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-top: 0.1875rem;
$form-check-input-radio-checked-after-margin-left: 0.1875em; $form-check-input-radio-checked-after-margin-left: 0.1875rem;
$form-check-input-radio-checked-after-transition: border-color; $form-check-input-radio-checked-after-transition: border-color;
$form-check-input-radio-checked-focus-background-color: $white; $form-check-input-radio-checked-focus-background-color: $white;
$form-switch-padding-left: 1.85em; $form-switch-padding-left: 1.85rem;
$form-switch-form-check-input-border-radius: 0.4375em; $form-switch-form-check-input-border-radius: 0.4375rem;
$form-switch-form-check-input-width: 2.25em; $form-switch-form-check-input-width: 2.25rem;
$form-switch-form-check-input-height: 0.875em; $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-background-color: rgba(0, 0, 0, 0.38);
$form-switch-form-check-input-margin-top: 0.35em; $form-switch-form-check-input-margin-top: 0.35rem;
$form-switch-form-check-input-margin-right: 0.7em; $form-switch-form-check-input-margin-right: 0.7rem;
$form-switch-form-check-input-after-border-radius: 50%; $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-height: $form-switch-form-check-input-after-width;
$form-switch-form-check-input-after-background-color: $white; $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), $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); 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; $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-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-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-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-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-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-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-border-radius: 50%;
$form-switch-form-check-input-checked-checkbox-after-width: 1.25em; $form-switch-form-check-input-checked-checkbox-after-width: 1.25rem;
$form-switch-form-check-input-checked-checkbox-after-height: 1.25em; $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-background-color: $primary;
$form-switch-form-check-input-checked-checkbox-after-margin-top: -3px; $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), $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); 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, $form-switch-form-check-input-checked-checkbox-after-transition: background-color 0.2s,
transform 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-border-color: $primary;
$form-file-label-focus-transition: all 0.2s linear; $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-background-color: #fff;
$form-file-button-border-color: $form-file-text-border-color; $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-font-size: 0.775rem;
$form-file-sm-line-height: $form-file-button-line-height; $form-file-sm-line-height: $form-file-button-line-height;
$form-file-sm-padding-y: $form-file-text-padding-y; $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-font-size: 1rem;
$form-file-lg-line-height: 2.15; $form-file-lg-line-height: 2.15;
$form-file-lg-padding-y: $form-file-text-padding-y; $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-thumb-margin-top: -6px;
$form-range-webkit-slider-runnable-track-height: 4px; $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-padding-y: 0.27rem;
$input-group-transition: all 0.2s linear; $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-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-font-size: 1rem;
$input-group-lg-padding-y: 0.33rem; $input-group-lg-padding-y: 0.33rem;
$input-group-lg-text-font-size: $input-group-lg-font-size; $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-font-size: 0.775rem;
$input-group-sm-padding-y: $input-group-lg-padding-y; $input-group-sm-padding-y: $input-group-lg-padding-y;
$input-group-sm-text-font-size: $input-group-sm-font-size; $input-group-sm-text-font-size: $input-group-sm-font-size;

2
src/scss/free/forms/_form-check.scss
View File

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