1.0.0-beta2

This commit is contained in:
Adam Jakubowski 2020-12-29 14:14:07 +01:00
parent a0943c618d
commit b4ed619c07
22 changed files with 1379 additions and 63 deletions

Binary file not shown.

View File

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

View File

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

6
css/mdb.min.css vendored

File diff suppressed because one or more lines are too long

File diff suppressed because one or more lines are too long

2
js/mdb.min.js vendored
View File

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

View File

@ -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",

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

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

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

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

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

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

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

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

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

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

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

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

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

View File

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

View File

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