mdbootstrap/mdb-ui-kit
1
1
Fork 0
mirror of https://github.com/mdbootstrap/mdb-ui-kit.git synced 2024-11-14 05:37:01 +03:00
Code Issues Packages Projects Releases Wiki Activity

Release 1.0.0-alpha2

Browse Source
This commit is contained in:
unknown 2020-12-30 15:27:37 +01:00
parent 8ca578ca17
commit fa8ceb904e
30 changed files with 988 additions and 2036 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

4
README.md
View File

@ -10,7 +10,7 @@
**[>> Demo](https://mdbootstrap.com/docs/standard/#demo)** **[>> Demo](https://mdbootstrap.com/docs/standard/#demo)**
<a href="https://npmcharts.com/compare/mdbootstrap?minimal=true"> <img src="https://img.shields.io/npm/dm/mdbootstrap.svg" alt="Downloads"></a><a href="https://github.com/mdbootstrap/bootstrap-material-design/blob/master/License.pdf"><img src="https://img.shields.io/badge/license-MIT-green.svg" alt="License"></a> <a href="https://cdnjs.com/libraries/mdbootstrap"> <img src="https://img.shields.io/cdnjs/v/mdbootstrap.svg" alt="cdnjs"></a> <a href="https://badge.fury.io/js/mdbootstrap"><img src="https://badge.fury.io/js/mdbootstrap.svg" alt="npm"></a> <a href="https://twitter.com/intent/tweet/?text=Thanks+@mdbootstrap+for+creating+amazing+and+free+Material+Design+for+Bootstrap+4+UI+KIT%20https://mdbootstrap.com/docs/jquery/&hashtags=javascript,code,webdesign,bootstrap"> <img src="https://img.shields.io/twitter/url/http/shields.io.svg?style=social"></a> <a href="https://npmcharts.com/compare/mdbootstrap?minimal=true"> <img src="https://img.shields.io/npm/dm/mdbootstrap.svg" alt="Downloads"></a><a href="https://github.com/mdbootstrap/bootstrap-material-design/blob/master/License.pdf"><img src="https://img.shields.io/badge/license-MIT-green.svg" alt="License"></a> <a href="https://twitter.com/intent/tweet/?text=Thanks+@mdbootstrap+for+creating+amazing+and+free+Material+Design+for+Bootstrap+4+UI+KIT%20https://mdbootstrap.com/docs/jquery/&hashtags=javascript,code,webdesign,bootstrap"> <img src="https://img.shields.io/twitter/url/http/shields.io.svg?style=social"></a>
___ ___
<table> <table>
@ -92,6 +92,4 @@ ___
<a href="https://mdbootstrap.com/docs/standard/" alt="Bootstrap 5" rel="dofollow"><img src="https://mdbootstrap.com/img/Marketing/campaigns/demo-loaders1.gif"></a> <a href="https://mdbootstrap.com/docs/standard/" alt="Bootstrap 5" rel="dofollow"><img src="https://mdbootstrap.com/img/Marketing/campaigns/demo-loaders1.gif"></a>
<a href="https://mdbootstrap.com/docs/standard/" alt="Bootstrap 5" rel="dofollow"><img src="https://mdbootstrap.com/img/Marketing/campaigns/demo-loaders2.gif"></a>
<a href="https://mdbootstrap.com/docs/standard/" alt="Bootstrap 5" rel="dofollow"><img src="https://mdbootstrap.com/img/Marketing/campaigns/demo-mdb5.jpg"></a> <a href="https://mdbootstrap.com/docs/standard/" alt="Bootstrap 5" rel="dofollow"><img src="https://mdbootstrap.com/img/Marketing/campaigns/demo-mdb5.jpg"></a>

2
README.txt
View File

@ -1,5 +1,5 @@
MDB5 MDB5
Version: FREE 1.0.0-alpha1 Version: FREE 1.0.0-alpha2
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

10
index.html
View File

@ -21,13 +21,17 @@
</head> </head>
<body> <body>
<!-- Start your project here--> <!-- Start your project here-->
<div style="height: 100vh; text-align: center; margin-top: 150px;"> <div class="container">
<div class="d-flex justify-content-center align-items-center" style="height: 100vh;">
<div class="text-center">
<img <img
src="https://mdbootstrap.com/img/logo/mdb-transparent-250px.png" src="https://mdbootstrap.com/img/logo/mdb-transparent-250px.png"
style="width: 250px; height: 90px;" style="width: 250px; height: 90px;"
/> />
<h5>Thank you for using our product. We're glad you're with us.</h5> <h5 class="pt-3">Thank you for using our product. We're glad you're with us.</h5>
<p>MDB Team</p> <p class="pb-5">MDB Team</p>
</div>
</div>
</div> </div>
<!-- End your project here--> <!-- End your project here-->
</body> </body>

6
js/mdb.min.js vendored
View File

File diff suppressed because one or more lines are too long

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

File diff suppressed because one or more lines are too long

2
package.json
View File

@ -1,6 +1,6 @@
{ {
"name": "mdb-ui-kit", "name": "mdb-ui-kit",
"version": "1.0.0-alpha1", "version": "1.0.0-alpha2",
"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",

59
src/js/free/animate.js
View File

@ -16,11 +16,13 @@ const SELECTOR_EXPAND = '[data-toggle="animation"]';
const DefaultType = { const DefaultType = {
animation: 'string', animation: 'string',
start: 'string',
showOnLoad: 'boolean',
onStart: '(null|function)', onStart: '(null|function)',
onEnd: '(null|function)', onEnd: '(null|function)',
onHide: '(null|function)', onHide: '(null|function)',
onShow: '(null|function)', onShow: '(null|function)',
animateonscroll: '(boolean|string)', animateOnScroll: '(string)',
windowHeight: 'number', windowHeight: 'number',
offset: '(number|string)', offset: '(number|string)',
delay: '(number|string)', delay: '(number|string)',
@ -28,15 +30,18 @@ const DefaultType = {
reverse: 'boolean', reverse: 'boolean',
interval: '(number|string)', interval: '(number|string)',
repeat: '(number|boolean)', repeat: '(number|boolean)',
reset: 'boolean',
}; };
const Default = { const Default = {
animation: 'fade', animation: 'fade',
start: 'onClick',
showOnLoad: true,
onStart: null, onStart: null,
onEnd: null, onEnd: null,
onHide: null, onHide: null,
onShow: null, onShow: null,
animateonscroll: false, animateOnScroll: 'once',
windowHeight: 0, windowHeight: 0,
offset: 0, offset: 0,
delay: 0, delay: 0,
@ -44,6 +49,7 @@ const Default = {
reverse: false, reverse: false,
interval: 0, interval: 0,
repeat: false, repeat: false,
reset: false,
}; };
/** /**
@ -82,10 +88,22 @@ class Animate {
// Private // Private
_init() { _init() {
if (this._options.animateonscroll) { switch (this._options.start) {
case 'onHover':
this._bindHoverEvents();
break;
case 'onLoad':
this._startAnimation();
break;
case 'onScroll':
this._bindScrollEvents(); this._bindScrollEvents();
} else { break;
default:
this._bindClickEvents(); this._bindClickEvents();
break;
}
this._bindTriggerOnEndCallback();
if (this._options.reset) {
this._bindResetAnimationAfterFinish(); this._bindResetAnimationAfterFinish();
} }
} }
@ -128,7 +146,7 @@ class Animate {
this._hideAnimateElement(); this._hideAnimateElement();
break; break;
case shouldBeVisible && !isElementVisible && this._repeatAnimateOnScroll: case shouldBeVisible && !isElementVisible && this._repeatAnimateOnScroll:
if (this._options.animateonscroll !== 'repeat') { if (this._options.animateOnScroll !== 'repeat') {
this._repeatAnimateOnScroll = false; this._repeatAnimateOnScroll = false;
} }
this._callback(this._options.onShow); this._callback(this._options.onShow);
@ -146,12 +164,12 @@ class Animate {
} }
_addAnimatedClass() { _addAnimatedClass() {
Manipulator.addClass(this._animateElement, 'animated'); Manipulator.addClass(this._animateElement, 'animation');
Manipulator.addClass(this._animateElement, this._options.animation); Manipulator.addClass(this._animateElement, this._options.animation);
} }
_clearAnimationClass() { _clearAnimationClass() {
this._animateElement.classList.remove(this._options.animation, 'animated'); this._animateElement.classList.remove(this._options.animation, 'animation');
} }
_startAnimation() { _startAnimation() {
@ -207,7 +225,6 @@ class Animate {
_setAnimationInterval() { _setAnimationInterval() {
EventHandler.on(this._animateElement, 'animationend', () => { EventHandler.on(this._animateElement, 'animationend', () => {
this._callback(this._options.onEnd);
this._clearAnimationClass(); this._clearAnimationClass();
setTimeout(() => { setTimeout(() => {
this._addAnimatedClass(); this._addAnimatedClass();
@ -225,17 +242,23 @@ class Animate {
_bindResetAnimationAfterFinish() { _bindResetAnimationAfterFinish() {
EventHandler.on(this._animateElement, 'animationend', () => { EventHandler.on(this._animateElement, 'animationend', () => {
this._callback(this._options.onEnd);
this._clearAnimationClass(); this._clearAnimationClass();
}); });
} }
_bindTriggerOnEndCallback() {
EventHandler.on(this._animateElement, 'animationend', () => {
this._callback(this._options.onEnd);
});
}
_bindScrollEvents() { _bindScrollEvents() {
const scrollPositionOnPageLoad = window.scrollY; if (!this._options.showOnLoad) {
EventHandler.on(window, 'scroll', () => {
if (scrollPositionOnPageLoad !== window.scrollY) {
this._animateOnScroll(); this._animateOnScroll();
} }
EventHandler.on(window, 'scroll', () => {
this._animateOnScroll();
}); });
} }
@ -245,6 +268,18 @@ class Animate {
}); });
} }
_bindHoverEvents() {
EventHandler.one(this._element, 'mouseenter', () => {
this._startAnimation();
});
EventHandler.one(this._animateElement, 'animationend', () => {
// wait after bind hoverEvents to prevent animation looping
setTimeout(() => {
this._bindHoverEvents();
}, 100);
});
}
_callback(fn) { _callback(fn) {
if (fn instanceof Function) { if (fn instanceof Function) {
fn(); fn();

72
src/js/free/input.js
View File

@ -14,6 +14,7 @@ const NAME = 'input';
const DATA_KEY = 'mdb.input'; const DATA_KEY = 'mdb.input';
const CLASSNAME_WRAPPER = 'form-outline'; const CLASSNAME_WRAPPER = 'form-outline';
const OUTLINE_INPUT = `.${CLASSNAME_WRAPPER} input`; const OUTLINE_INPUT = `.${CLASSNAME_WRAPPER} input`;
const OUTLINE_TEXTAREA = `.${CLASSNAME_WRAPPER} textarea`;
/** /**
* ------------------------------------------------------------------------ * ------------------------------------------------------------------------
@ -24,8 +25,12 @@ const OUTLINE_INPUT = `.${CLASSNAME_WRAPPER} input`;
class Input { class Input {
constructor(element) { constructor(element) {
this._element = element; this._element = element;
this._label = null;
this._labelWidth = 0; this._labelWidth = 0;
this._labelMarginLeft = 0;
this._notchLeading = null;
this._notchMiddle = null; this._notchMiddle = null;
this._notchTrailing = null;
if (this._element) { if (this._element) {
Data.setData(element, DATA_KEY, this); Data.setData(element, DATA_KEY, this);
@ -39,9 +44,9 @@ class Input {
// Public // Public
init() { init() {
this._calculateLabelWidth(); this._getLabelData();
this._applyDivs(); this._applyDivs();
this._applyNotchWidth(); this._applyNotch();
this._applyActiveClass(); this._applyActiveClass();
} }
@ -51,40 +56,67 @@ class Input {
} }
// Private // Private
_calculateLabelWidth() { _getLabelData() {
const label = SelectorEngine.findOne('label.form-label', this._element); this._label = SelectorEngine.findOne('label', this._element);
this._labelWidth = label.clientWidth * 0.8 + 8; if (this._label === null) return;
this._getLabelWidth();
if (!this._element.classList.contains('input-group')) return;
this._getLabelPositionInInputGroup();
}
_getLabelWidth() {
this._labelWidth = this._label.clientWidth * 0.8 + 8;
}
_getLabelPositionInInputGroup() {
const input =
SelectorEngine.findOne('input', this._element) ||
SelectorEngine.findOne('textarea', this._element);
const prefix = SelectorEngine.prev(input, '.input-group-text')[0];
if (prefix === undefined) return;
this._labelMarginLeft = prefix.offsetWidth - 1;
} }
_applyDivs() { _applyDivs() {
const notchWrapper = element('div'); const notchWrapper = element('div');
Manipulator.addClass(notchWrapper, 'form-notch'); Manipulator.addClass(notchWrapper, 'form-notch');
const notchLeading = element('div'); this._notchLeading = element('div');
Manipulator.addClass(notchLeading, 'form-notch-leading'); Manipulator.addClass(this._notchLeading, 'form-notch-leading');
this._notchMiddle = element('div'); this._notchMiddle = element('div');
Manipulator.addClass(this._notchMiddle, 'form-notch-middle'); Manipulator.addClass(this._notchMiddle, 'form-notch-middle');
const notchTrailing = element('div'); this._notchTrailing = element('div');
Manipulator.addClass(notchTrailing, 'form-notch-trailing'); Manipulator.addClass(this._notchTrailing, 'form-notch-trailing');
notchWrapper.append(notchLeading); notchWrapper.append(this._notchLeading);
notchWrapper.append(this._notchMiddle); notchWrapper.append(this._notchMiddle);
notchWrapper.append(notchTrailing); notchWrapper.append(this._notchTrailing);
this._element.append(notchWrapper); this._element.append(notchWrapper);
} }
_applyNotchWidth() { _applyNotch() {
this._notchMiddle.style.width = `${this._labelWidth}px`; this._notchMiddle.style.width = `${this._labelWidth}px`;
this._notchLeading.style.width = `${this._labelMarginLeft + 9}px`;
if (this._label === null) return;
this._label.style.marginLeft = `${this._labelMarginLeft}px`;
} }
_applyActiveClass(event) { _applyActiveClass(event) {
const input = event ? event.target : SelectorEngine.findOne('input', this._element); const input = event
? event.target
: SelectorEngine.findOne('input', this._element) ||
SelectorEngine.findOne('textarea', this._element);
if (input.value !== '') { if (input.value !== '') {
Manipulator.addClass(input, 'active'); Manipulator.addClass(input, 'active');
} }
} }
_removeActiveClass(event) { _removeActiveClass(event) {
const input = event ? event.target : SelectorEngine.findOne('input', this._element); const input = event
? event.target
: SelectorEngine.findOne('input', this._element) ||
SelectorEngine.findOne('textarea', this._element);
if (input.value === '') { if (input.value === '') {
input.classList.remove('active'); input.classList.remove('active');
} }
@ -101,15 +133,23 @@ class Input {
instance._removeActiveClass(event); instance._removeActiveClass(event);
}; };
} }
static getInstance(element) {
return Data.getData(element, DATA_KEY);
}
} }
EventHandler.on(document, 'focus', OUTLINE_INPUT, Input.applyActiveClass(new Input())); EventHandler.on(document, 'focus', OUTLINE_INPUT, Input.applyActiveClass(new Input()));
EventHandler.on(document, 'input', OUTLINE_INPUT, Input.applyActiveClass(new Input())); EventHandler.on(document, 'input', OUTLINE_INPUT, Input.applyActiveClass(new Input()));
EventHandler.on(document, 'blur', OUTLINE_INPUT, Input.removeActiveClass(new Input())); EventHandler.on(document, 'blur', OUTLINE_INPUT, Input.removeActiveClass(new Input()));
EventHandler.on(document, 'focus', OUTLINE_TEXTAREA, Input.applyActiveClass(new Input()));
EventHandler.on(document, 'input', OUTLINE_TEXTAREA, Input.applyActiveClass(new Input()));
EventHandler.on(document, 'blur', OUTLINE_TEXTAREA, Input.removeActiveClass(new Input()));
// auto-init // auto-init
SelectorEngine.find(`.${CLASSNAME_WRAPPER}`).forEach((input) => { SelectorEngine.find(`.${CLASSNAME_WRAPPER}`).forEach((element) => {
new Input(input).init(); new Input(element).init();
}); });
export default Input; export default Input;

69
src/js/free/ripple.js
View File

@ -36,19 +36,19 @@ const BOOTSTRAP_COLORS = [
const TRANSITION_BREAK_OPACITY = 0.5; const TRANSITION_BREAK_OPACITY = 0.5;
const Default = { const Default = {
centered: false, rippleCentered: false,
color: '', rippleColor: '',
duration: '500ms', rippleDuration: '500ms',
radius: 0, rippleRadius: 0,
unbound: false, rippleUnbound: false,
}; };
const DefaultType = { const DefaultType = {
centered: 'boolean', rippleCentered: 'boolean',
color: 'string', rippleColor: 'string',
duration: 'string', rippleDuration: 'string',
radius: 'number', rippleRadius: 'number',
unbound: 'boolean', rippleUnbound: 'boolean',
}; };
/** /**
@ -83,9 +83,9 @@ class Ripple {
dispose() { dispose() {
Data.removeData(this._element, DATA_KEY); Data.removeData(this._element, DATA_KEY);
EventHandler.off(this._element, 'click', '');
this._element = null; this._element = null;
this._options = null; this._options = null;
EventHandler.off(this._element, 'click', '');
} }
// Private // Private
@ -109,18 +109,20 @@ class Ripple {
} }
_createRipple(event) { _createRipple(event) {
const { offsetX, offsetY } = event; const { layerX, layerY } = event;
const offsetX = layerX;
const offsetY = layerY;
const height = this._element.offsetHeight; const height = this._element.offsetHeight;
const width = this._element.offsetWidth; const width = this._element.offsetWidth;
const duration = this._durationToMsNumber(this._options.duration); const duration = this._durationToMsNumber(this._options.rippleDuration);
const diameterOptions = { const diameterOptions = {
offsetX: this._options.centered ? height / 2 : offsetX, offsetX: this._options.rippleCentered ? height / 2 : offsetX,
offsetY: this._options.centered ? width / 2 : offsetY, offsetY: this._options.rippleCentered ? width / 2 : offsetY,
height, height,
width, width,
}; };
const diameter = this._getDiameter(diameterOptions); const diameter = this._getDiameter(diameterOptions);
const radiusValue = this._options.radius || diameter / 2; const radiusValue = this._options.rippleRadius || diameter / 2;
const opacity = { const opacity = {
delay: duration * TRANSITION_BREAK_OPACITY, delay: duration * TRANSITION_BREAK_OPACITY,
@ -128,10 +130,14 @@ class Ripple {
}; };
const styles = { const styles = {
left: this._options.centered ? `${width / 2 - radiusValue}px` : `${offsetX - radiusValue}px`, left: this._options.rippleCentered
top: this._options.centered ? `${height / 2 - radiusValue}px` : `${offsetY - radiusValue}px`, ? `${width / 2 - radiusValue}px`
height: `${this._options.radius * 2 || diameter}px`, : `${offsetX - radiusValue}px`,
width: `${this._options.radius * 2 || diameter}px`, top: this._options.rippleCentered
? `${height / 2 - radiusValue}px`
: `${offsetY - radiusValue}px`,
height: `${this._options.rippleRadius * 2 || diameter}px`,
width: `${this._options.rippleRadius * 2 || diameter}px`,
transitionDelay: `0s, ${opacity.delay}ms`, transitionDelay: `0s, ${opacity.delay}ms`,
transitionDuration: `${duration}ms, ${opacity.duration}ms`, transitionDuration: `${duration}ms, ${opacity.duration}ms`,
}; };
@ -139,13 +145,13 @@ class Ripple {
const rippleHTML = element('div'); const rippleHTML = element('div');
this._createHTMLRipple({ wrapper: this._element, ripple: rippleHTML, styles }); this._createHTMLRipple({ wrapper: this._element, ripple: rippleHTML, styles });
this._removeHTMLRipple({ wrapper: this._element, ripple: rippleHTML, duration }); this._removeHTMLRipple({ ripple: rippleHTML, duration });
} }
_createHTMLRipple({ wrapper, ripple, styles }) { _createHTMLRipple({ wrapper, ripple, styles }) {
Object.keys(styles).forEach((property) => (ripple.style[property] = styles[property])); Object.keys(styles).forEach((property) => (ripple.style[property] = styles[property]));
ripple.classList.add(CLASSNAME_RIPPLE_WAVE); ripple.classList.add(CLASSNAME_RIPPLE_WAVE);
if (this._options.color !== '') { if (this._options.rippleColor !== '') {
this._removeOldColorClasses(wrapper); this._removeOldColorClasses(wrapper);
this._addColor(ripple, wrapper); this._addColor(ripple, wrapper);
} }
@ -154,9 +160,11 @@ class Ripple {
this._appendRipple(ripple, wrapper); this._appendRipple(ripple, wrapper);
} }
_removeHTMLRipple({ wrapper, ripple, duration }) { _removeHTMLRipple({ ripple, duration }) {
setTimeout(() => { setTimeout(() => {
wrapper.removeChild(ripple); if (ripple) {
ripple.remove();
}
}, duration); }, duration);
} }
@ -213,7 +221,7 @@ class Ripple {
} }
_appendRipple(target, parent) { _appendRipple(target, parent) {
const FIX_ADD_RIPPLE_EFFECT = 50; // We need delay for active animations const FIX_ADD_RIPPLE_EFFECT = 50; // delay for active animations
parent.appendChild(target); parent.appendChild(target);
setTimeout(() => { setTimeout(() => {
Manipulator.addClass(target, 'active'); Manipulator.addClass(target, 'active');
@ -221,7 +229,7 @@ class Ripple {
} }
_toggleUnbound(target) { _toggleUnbound(target) {
if (this._options.unbound === true) { if (this._options.rippleUnbound === true) {
Manipulator.addClass(target, CLASSNAME_UNBOUND); Manipulator.addClass(target, CLASSNAME_UNBOUND);
} else { } else {
target.classList.remove(CLASSNAME_UNBOUND); target.classList.remove(CLASSNAME_UNBOUND);
@ -230,13 +238,16 @@ class Ripple {
_addColor(target, parent) { _addColor(target, parent) {
const IS_BOOTSTRAP_COLOR = BOOTSTRAP_COLORS.find( const IS_BOOTSTRAP_COLOR = BOOTSTRAP_COLORS.find(
(color) => color === this._options.color.toLowerCase() (color) => color === this._options.rippleColor.toLowerCase()
); );
if (IS_BOOTSTRAP_COLOR) { if (IS_BOOTSTRAP_COLOR) {
Manipulator.addClass(parent, `${CLASSNAME_RIPPLE}-${this._options.color.toLowerCase()}`); Manipulator.addClass(
parent,
`${CLASSNAME_RIPPLE}-${this._options.rippleColor.toLowerCase()}`
);
} else { } else {
const rgbValue = this._colorToRGB(this._options.color).join(','); const rgbValue = this._colorToRGB(this._options.rippleColor).join(',');
const gradientImage = GRADIENT.split('{{color}}').join(`${rgbValue}`); const gradientImage = GRADIENT.split('{{color}}').join(`${rgbValue}`);
target.style.backgroundImage = `radial-gradient(circle, ${gradientImage})`; target.style.backgroundImage = `radial-gradient(circle, ${gradientImage})`;
} }

38
src/js/mdb/util/keycodes.js Normal file
View File

@ -0,0 +1,38 @@
export const LEFT_ARROW = 37;
export const UP_ARROW = 38;
export const RIGHT_ARROW = 39;
export const DOWN_ARROW = 40;
export const HOME = 36;
export const END = 35;
export const PAGE_UP = 33;
export const PAGE_DOWN = 34;
export const ENTER = 13;
export const SPACE = 32;
export const ESCAPE = 27;
export const TAB = 9;
export const A = 65;
export const B = 66;
export const C = 67;
export const D = 68;
export const E = 69;
export const F = 70;
export const G = 71;
export const H = 72;
export const I = 73;
export const J = 74;
export const K = 75;
export const L = 76;
export const M = 77;
export const N = 78;
export const O = 79;
export const P = 80;
export const Q = 81;
export const R = 82;
export const S = 83;
export const T = 84;
export const U = 85;
export const V = 86;
export const W = 87;
export const X = 88;
export const Y = 89;
export const Z = 90;

92
src/scss/free/_animate-extended.scss
View File

@ -1,6 +1,6 @@
// animations // animations
@keyframes dropIn { @keyframes drop-in {
0% { 0% {
opacity: 0; opacity: 0;
transform: scale(0); transform: scale(0);
@ -11,13 +11,13 @@
} }
} }
.dropIn { .drop-in {
transform-origin: top center; transform-origin: top center;
animation-timing-function: cubic-bezier(0.34, 1.61, 0.7, 1); animation-timing-function: cubic-bezier(0.34, 1.61, 0.7, 1);
animation-name: dropIn; animation-name: drop-in;
} }
@keyframes dropOut { @keyframes drop-out {
0% { 0% {
opacity: 1; opacity: 1;
transform: scale(1); transform: scale(1);
@ -28,13 +28,13 @@
} }
} }
.dropOut { .drop-out {
transform-origin: top center; transform-origin: top center;
animation-timing-function: cubic-bezier(0.34, 1.61, 0.7, 1); animation-timing-function: cubic-bezier(0.34, 1.61, 0.7, 1);
animation-name: dropOut; animation-name: drop-out;
} }
@keyframes flyIn { @keyframes fly-in {
0% { 0% {
opacity: 0; opacity: 0;
transform: scale3d(0.3, 0.3, 0.3); transform: scale3d(0.3, 0.3, 0.3);
@ -58,12 +58,12 @@
} }
} }
.flyIn { .fly-in {
animation-name: flyIn; animation-name: fly-in;
transition-timing-function: cubic-bezier(0.215, 0.61, 0.355, 1); transition-timing-function: cubic-bezier(0.215, 0.61, 0.355, 1);
} }
@keyframes flyInUp { @keyframes fly-in-up {
0% { 0% {
opacity: 0; opacity: 0;
transform: translate3d(0, 1500px, 0); transform: translate3d(0, 1500px, 0);
@ -83,12 +83,12 @@
} }
} }
.flyInUp { .fly-in-up {
animation-name: flyInUp; animation-name: fly-in-up;
transition-timing-function: cubic-bezier(0.215, 0.61, 0.355, 1); transition-timing-function: cubic-bezier(0.215, 0.61, 0.355, 1);
} }
@keyframes flyInDown { @keyframes fly-in-down {
0% { 0% {
opacity: 0; opacity: 0;
transform: translate3d(0, -1500px, 0); transform: translate3d(0, -1500px, 0);
@ -108,12 +108,12 @@
} }
} }
.flyInDown { .fly-in-down {
animation-name: flyInDown; animation-name: fly-in-down;
transition-timing-function: cubic-bezier(0.215, 0.61, 0.355, 1); transition-timing-function: cubic-bezier(0.215, 0.61, 0.355, 1);
} }
@keyframes flyInLeft { @keyframes fly-in-left {
0% { 0% {
opacity: 0; opacity: 0;
transform: translate3d(1500px, 0, 0); transform: translate3d(1500px, 0, 0);
@ -133,12 +133,12 @@
} }
} }
.flyInLeft { .fly-in-left {
animation-name: flyInLeft; animation-name: fly-in-left;
transition-timing-function: cubic-bezier(0.215, 0.61, 0.355, 1); transition-timing-function: cubic-bezier(0.215, 0.61, 0.355, 1);
} }
@keyframes flyInRight { @keyframes fly-in-right {
0% { 0% {
opacity: 0; opacity: 0;
transform: translate3d(-1500px, 0, 0); transform: translate3d(-1500px, 0, 0);
@ -158,12 +158,12 @@
} }
} }
.flyInRight { .fly-in-right {
animation-name: flyInRight; animation-name: fly-in-right;
transition-timing-function: cubic-bezier(0.215, 0.61, 0.355, 1); transition-timing-function: cubic-bezier(0.215, 0.61, 0.355, 1);
} }
@keyframes flyOut { @keyframes fly-out {
20% { 20% {
transform: scale3d(0.9, 0.9, 0.9); transform: scale3d(0.9, 0.9, 0.9);
} }
@ -178,12 +178,12 @@
} }
} }
.flyOut { .fly-out {
animation-name: flyOut; animation-name: fly-out;
transition-timing-function: cubic-bezier(0.215, 0.61, 0.355, 1); transition-timing-function: cubic-bezier(0.215, 0.61, 0.355, 1);
} }
@keyframes flyOutUp { @keyframes fly-out-up {
20% { 20% {
transform: translate3d(0, 10px, 0); transform: translate3d(0, 10px, 0);
} }
@ -198,12 +198,12 @@
} }
} }
.flyOutUp { .fly-out-up {
animation-name: flyOutUp; animation-name: fly-out-up;
transition-timing-function: cubic-bezier(0.215, 0.61, 0.355, 1); transition-timing-function: cubic-bezier(0.215, 0.61, 0.355, 1);
} }
@keyframes flyOutDown { @keyframes fly-out-down {
20% { 20% {
transform: translate3d(0, -10px, 0); transform: translate3d(0, -10px, 0);
} }
@ -218,12 +218,12 @@
} }
} }
.flyOutDown { .fly-out-down {
animation-name: flyOutDown; animation-name: fly-out-down;
transition-timing-function: cubic-bezier(0.215, 0.61, 0.355, 1); transition-timing-function: cubic-bezier(0.215, 0.61, 0.355, 1);
} }
@keyframes flyOutLeft { @keyframes fly-out-left {
20% { 20% {
opacity: 1; opacity: 1;
transform: translate3d(-20px, 0, 0); transform: translate3d(-20px, 0, 0);
@ -234,12 +234,12 @@
} }
} }
.flyOutLeft { .fly-out-left {
animation-name: flyOutLeft; animation-name: fly-out-left;
transition-timing-function: cubic-bezier(0.215, 0.61, 0.355, 1); transition-timing-function: cubic-bezier(0.215, 0.61, 0.355, 1);
} }
@keyframes flyOutRight { @keyframes fly-out-right {
20% { 20% {
opacity: 1; opacity: 1;
transform: translate3d(20px, 0, 0); transform: translate3d(20px, 0, 0);
@ -250,12 +250,12 @@
} }
} }
.flyOutRight { .fly-out-right {
animation-name: flyOutRight; animation-name: fly-out-right;
transition-timing-function: cubic-bezier(0.215, 0.61, 0.355, 1); transition-timing-function: cubic-bezier(0.215, 0.61, 0.355, 1);
} }
@keyframes browseIn { @keyframes browse-in {
0% { 0% {
transform: scale(0.8) translateZ(0px); transform: scale(0.8) translateZ(0px);
z-index: -1; z-index: -1;
@ -276,11 +276,11 @@
} }
} }
.browseIn { .browse-in {
animation-name: browseIn; animation-name: browse-in;
} }
@keyframes browseOutLeft { @keyframes browse-out-left {
0% { 0% {
z-index: 999; z-index: 999;
transform: translateX(0%) rotateY(0deg) rotateX(0deg); transform: translateX(0%) rotateY(0deg) rotateX(0deg);
@ -299,12 +299,12 @@
} }
} }
.browseOut, .browse-out,
.browseOutLeft { .browse-out-left {
animation-name: browseOutLeft; animation-name: browse-out-left;
} }
@keyframes browseOutRight { @keyframes browse-out-right {
0% { 0% {
z-index: 999; z-index: 999;
transform: translateX(0%) rotateY(0deg) rotateX(0deg); transform: translateX(0%) rotateY(0deg) rotateX(0deg);
@ -323,8 +323,8 @@
} }
} }
.browseOutRight { .browse-out-right {
animation-name: browseOutRight; animation-name: browse-out-right;
} }
@keyframes jiggle { @keyframes jiggle {

181
src/scss/free/_animate.scss
View File

@ -1,8 +1,9 @@
// animations // animations
.animated { .animation {
animation-duration: 1s; animation-duration: 1s;
animation-fill-mode: both; animation-fill-mode: both;
padding: auto;
&.infinite { &.infinite {
animation-iteration-count: infinite; animation-iteration-count: infinite;
} }
@ -36,13 +37,13 @@
} }
@media (prefers-reduced-motion) { @media (prefers-reduced-motion) {
.animated { .animation {
transition: none !important; transition: none !important;
animation: unset !important; animation: unset !important;
} }
} }
@keyframes fadeIn { @keyframes fade-in {
from { from {
opacity: 0; opacity: 0;
} }
@ -52,11 +53,11 @@
} }
} }
.fadeIn { .fade-in {
animation-name: fadeIn; animation-name: fade-in;
} }
@keyframes fadeInDown { @keyframes fade-in-down {
from { from {
opacity: 0; opacity: 0;
transform: translate3d(0, -100%, 0); transform: translate3d(0, -100%, 0);
@ -68,11 +69,11 @@
} }
} }
.fadeInDown { .fade-in-down {
animation-name: fadeInDown; animation-name: fade-in-down;
} }
@keyframes fadeInLeft { @keyframes fade-in-left {
from { from {
opacity: 0; opacity: 0;
transform: translate3d(-100%, 0, 0); transform: translate3d(-100%, 0, 0);
@ -84,11 +85,11 @@
} }
} }
.fadeInLeft { .fade-in-left {
animation-name: fadeInLeft; animation-name: fade-in-left;
} }
@keyframes fadeInRight { @keyframes fade-in-right {
from { from {
opacity: 0; opacity: 0;
transform: translate3d(100%, 0, 0); transform: translate3d(100%, 0, 0);
@ -100,11 +101,11 @@
} }
} }
.fadeInRight { .fade-in-right {
animation-name: fadeInRight; animation-name: fade-in-right;
} }
@keyframes fadeInUp { @keyframes fade-in-up {
from { from {
opacity: 0; opacity: 0;
transform: translate3d(0, 100%, 0); transform: translate3d(0, 100%, 0);
@ -116,11 +117,11 @@
} }
} }
.fadeInUp { .fade-in-up {
animation-name: fadeInUp; animation-name: fade-in-up;
} }
@keyframes fadeOut { @keyframes fade-out {
from { from {
opacity: 1; opacity: 1;
} }
@ -130,11 +131,11 @@
} }
} }
.fadeOut { .fade-out {
animation-name: fadeOut; animation-name: fade-out;
} }
@keyframes fadeOutDown { @keyframes fade-out-down {
from { from {
opacity: 1; opacity: 1;
} }
@ -145,11 +146,11 @@
} }
} }
.fadeOutDown { .fade-out-down {
animation-name: fadeOutDown; animation-name: fade-out-down;
} }
@keyframes fadeOutLeft { @keyframes fade-out-left {
from { from {
opacity: 1; opacity: 1;
} }
@ -160,11 +161,11 @@
} }
} }
.fadeOutLeft { .fade-out-left {
animation-name: fadeOutLeft; animation-name: fade-out-left;
} }
@keyframes fadeOutRight { @keyframes fade-out-right {
from { from {
opacity: 1; opacity: 1;
} }
@ -175,11 +176,11 @@
} }
} }
.fadeOutRight { .fade-out-right {
animation-name: fadeOutRight; animation-name: fade-out-right;
} }
@keyframes fadeOutUp { @keyframes fade-out-up {
from { from {
opacity: 1; opacity: 1;
} }
@ -190,11 +191,11 @@
} }
} }
.fadeOutUp { .fade-out-up {
animation-name: fadeOutUp; animation-name: fade-out-up;
} }
@keyframes slideInDown { @keyframes slide-in-down {
from { from {
visibility: visible; visibility: visible;
transform: translate3d(0, -100%, 0); transform: translate3d(0, -100%, 0);
@ -205,11 +206,11 @@
} }
} }
.slideInDown { .slide-in-down {
animation-name: slideInDown; animation-name: slide-in-down;
} }
@keyframes slideInLeft { @keyframes slide-in-left {
from { from {
visibility: visible; visibility: visible;
transform: translate3d(-100%, 0, 0); transform: translate3d(-100%, 0, 0);
@ -220,11 +221,11 @@
} }
} }
.slideInLeft { .slide-in-left {
animation-name: slideInLeft; animation-name: slide-in-left;
} }
@keyframes slideInRight { @keyframes slide-in-right {
from { from {
visibility: visible; visibility: visible;
transform: translate3d(100%, 0, 0); transform: translate3d(100%, 0, 0);
@ -235,11 +236,11 @@
} }
} }
.slideInRight { .slide-in-right {
animation-name: slideInRight; animation-name: slide-in-right;
} }
@keyframes slideInUp { @keyframes slide-in-up {
from { from {
visibility: visible; visibility: visible;
transform: translate3d(0, 100%, 0); transform: translate3d(0, 100%, 0);
@ -250,11 +251,11 @@
} }
} }
.slideInUp { .slide-in-up {
animation-name: slideInUp; animation-name: slide-in-up;
} }
@keyframes slideOutDown { @keyframes slide-out-down {
from { from {
transform: translate3d(0, 0, 0); transform: translate3d(0, 0, 0);
} }
@ -265,11 +266,11 @@
} }
} }
.slideOutDown { .slide-out-down {
animation-name: slideOutDown; animation-name: slide-out-down;
} }
@keyframes slideOutLeft { @keyframes slide-out-left {
from { from {
transform: translate3d(0, 0, 0); transform: translate3d(0, 0, 0);
} }
@ -280,11 +281,11 @@
} }
} }
.slideOutLeft { .slide-out-left {
animation-name: slideOutLeft; animation-name: slide-out-left;
} }
@keyframes slideOutRight { @keyframes slide-out-right {
from { from {
transform: translate3d(0, 0, 0); transform: translate3d(0, 0, 0);
} }
@ -295,11 +296,11 @@
} }
} }
.slideOutRight { .slide-out-right {
animation-name: slideOutRight; animation-name: slide-out-right;
} }
@keyframes slideOutUp { @keyframes slide-out-up {
from { from {
transform: translate3d(0, 0, 0); transform: translate3d(0, 0, 0);
} }
@ -310,11 +311,67 @@
} }
} }
.slideOutUp { .slide-out-up {
animation-name: slideOutUp; animation-name: slide-out-up;
} }
@keyframes zoomIn { @keyframes slide-down {
from {
transform: translate3d(0, 0, 0);
}
to {
transform: translate3d(0, 100%, 0);
}
}
.slide-down {
animation-name: slide-down;
}
@keyframes slide-left {
from {
transform: translate3d(0, 0, 0);
}
to {
transform: translate3d(-100%, 0, 0);
}
}
.slide-left {
animation-name: slide-left;
}
@keyframes slide-right {
from {
transform: translate3d(0, 0, 0);
}
to {
transform: translate3d(100%, 0, 0);
}
}
.slide-right {
animation-name: slide-right;
}
@keyframes slide-up {
from {
transform: translate3d(0, 0, 0);
}
to {
transform: translate3d(0, -100%, 0);
}
}
.slide-up {
animation-name: slide-up;
}
@keyframes zoom-in {
from { from {
opacity: 0; opacity: 0;
transform: scale3d(0.3, 0.3, 0.3); transform: scale3d(0.3, 0.3, 0.3);
@ -325,11 +382,11 @@
} }
} }
.zoomIn { .zoom-in {
animation-name: zoomIn; animation-name: zoom-in;
} }
@keyframes zoomOut { @keyframes zoom-out {
from { from {
opacity: 1; opacity: 1;
} }
@ -344,8 +401,8 @@
} }
} }
.zoomOut { .zoom-out {
animation-name: zoomOut; animation-name: zoom-out;
} }
@keyframes tada { @keyframes tada {

12
src/scss/free/_badge.scss
View File

@ -1,12 +1,12 @@
// Badge // Badge
.badge-dot { .badge-dot {
position: absolute; position: absolute;
border-radius: 4.5px; border-radius: $badge-dot-border-radius;
height: 9px; height: $badge-dot-height;
min-width: 0; min-width: 0;
padding: 0; padding: 0;
width: 9px; width: $badge-dot-width;
margin-left: -3px; margin-left: $badge-dot-ml;
&:empty { &:empty {
display: inline-block; display: inline-block;
} }
@ -14,6 +14,6 @@
.badge-notification { .badge-notification {
position: absolute; position: absolute;
margin-top: -5px; margin-top: $badge-notification-mt;
margin-left: -5px; margin-left: $badge-notification-ml;
} }

24
src/scss/free/_breadcrumb.scss Normal file
View File

@ -0,0 +1,24 @@
// Breadcrumb
.navbar {
.breadcrumb {
background-color: transparent;
margin-bottom: 0;
.breadcrumb-item {
a {
color: rgba(0, 0, 0, 0.55);
transition: color 0.15s ease-in-out;
&:hover,
&:focus {
color: rgba(0, 0, 0, 0.7);
}
}
+ .breadcrumb-item {
&:before {
color: rgba(0, 0, 0, 0.55);
}
}
}
}
}

5
src/scss/free/_button-group.scss
View File

@ -2,9 +2,8 @@
.btn-group { .btn-group {
box-shadow: $btn-box-shadow; box-shadow: $btn-box-shadow;
border-radius: calc(0.25rem - 1px); border-radius: $btn-group-border-radius;
transition: color 0.15s ease-in-out, background-color 0.15s ease-in-out, transition: $btn-group-transition;
border-color 0.15s ease-in-out, box-shadow 0.15s ease-in-out;
&:hover { &:hover {
box-shadow: $btn-hover-box-shadow; box-shadow: $btn-hover-box-shadow;

110
src/scss/free/_buttons.scss
View File

@ -2,17 +2,17 @@
.btn { .btn {
font-family: $btn-font-family; font-family: $btn-font-family;
line-height: 1.5; line-height: $btn-line-height;
text-transform: uppercase; text-transform: uppercase;
vertical-align: bottom; vertical-align: bottom;
padding-top: 10px; padding-top: $btn-padding-top;
padding-bottom: 8px; padding-bottom: $btn-padding-bottom;
border: 0; border: 0;
box-shadow: $btn-box-shadow; box-shadow: $btn-box-shadow;
font-size: 12px; font-size: $btn-font-size;
padding-left: 24px; padding-left: $btn-padding-left;
padding-right: 24px; padding-right: $btn-padding-right;
font-weight: 500; font-weight: $btn-font-weight;
&:hover { &:hover {
box-shadow: $btn-hover-box-shadow; box-shadow: $btn-hover-box-shadow;
@ -43,13 +43,13 @@
// Buttons outline // Buttons outline
[class*='btn-outline-'] { [class*='btn-outline-'] {
border-width: 2px; border-width: $btn-border-width;
border-style: solid; border-style: solid;
box-shadow: none; box-shadow: none;
padding-top: 8px; padding-top: $btn-outline-padding-top;
padding-bottom: 6px; padding-bottom: $btn-outline-padding-bottom;
padding-left: 22px; padding-left: $btn-outline-padding-left;
padding-right: 22px; padding-right: $btn-outline-padding-right;
&:hover { &:hover {
box-shadow: none; box-shadow: none;
@ -78,17 +78,17 @@
} }
&.btn-sm { &.btn-sm {
padding-top: 4px; padding-top: $btn-outline-padding-top-sm;
padding-bottom: 3px; padding-bottom: $btn-outline-padding-bottom-sm;
padding-right: 14px; padding-right: $btn-outline-padding-right-sm;
padding-left: 14px; padding-left: $btn-outline-padding-left-sm;
} }
&.btn-lg { &.btn-lg {
padding-top: 10px; padding-top: $btn-outline-padding-top-lg;
padding-bottom: 9px; padding-bottom: $btn-outline-padding-bottom-lg;
padding-right: 25px; padding-right: $btn-outline-padding-right-lg;
padding-left: 25px; padding-left: $btn-outline-padding-left-lg;
} }
} }
@ -112,23 +112,22 @@
.btn-lg { .btn-lg {
// @include button-size($btn-padding-y-lg, $btn-padding-x-lg, $btn-font-size-lg, $btn-border-radius-lg); // @include button-size($btn-padding-y-lg, $btn-padding-x-lg, $btn-font-size-lg, $btn-border-radius-lg);
line-height: $btn-line-height-lg;
line-height: 1.6; font-size: $btn-font-size-lg;
padding-top: 12px; padding-top: $btn-padding-top-lg;
padding-bottom: 11px; padding-bottom: $btn-padding-bottom-lg;
font-size: 14px; padding-right: $btn-padding-right-lg;
padding-left: 27px; padding-left: $btn-padding-left-lg;
padding-right: 27px;
} }
.btn-sm { .btn-sm {
// @include button-size($btn-padding-y-sm, $btn-padding-x-sm, $btn-font-size-sm, $btn-border-radius-sm); // @include button-size($btn-padding-y-sm, $btn-padding-x-sm, $btn-font-size-sm, $btn-border-radius-sm);
line-height: 1.5; line-height: $btn-line-height-sm;
font-size: 12px; font-size: $btn-font-size-sm;
padding-top: 6px; padding-top: $btn-padding-top-sm;
padding-bottom: 5px; padding-bottom: $btn-padding-bottom-sm;
padding-right: 16px; padding-right: $btn-padding-right-sm;
padding-left: 16px; padding-left: $btn-padding-left-sm;
} }
// Link buttons // Link buttons
@ -142,24 +141,24 @@
&:hover { &:hover {
box-shadow: none; box-shadow: none;
text-decoration: none; text-decoration: none;
background-color: #f5f5f5; background-color: $btn-link-bgc;
} }
&:focus, &:focus,
&.focus { &.focus {
box-shadow: none; box-shadow: none;
text-decoration: none; text-decoration: none;
background-color: #f5f5f5; background-color: $btn-link-bgc;
} }
&:active, &:active,
&.active { &.active {
box-shadow: none; box-shadow: none;
background-color: #f5f5f5; background-color: $btn-link-bgc;
&:focus { &:focus {
box-shadow: none; box-shadow: none;
background-color: #f5f5f5; background-color: $btn-link-bgc;
} }
} }
@ -171,5 +170,40 @@
} }
.btn-rounded { .btn-rounded {
border-radius: 10rem; border-radius: $btn-rounded-border-radius;
}
.btn-floating {
border-radius: 50%;
padding: 0;
width: 36px;
height: 36px;
.fas,
.far,
.fab {
line-height: 36px;
}
&.btn-sm {
width: 29px;
height: 29px;
.fas,
.far,
.fab {
line-height: 29px;
}
}
&.btn-lg {
width: 45px;
height: 45px;
.fas,
.far,
.fab {
line-height: 45px;
}
}
} }

9
src/scss/free/_footer.scss Normal file
View File

@ -0,0 +1,9 @@
// Footer
.footer {
bottom: 0;
}
.footer-copyright {
background-color: rgba($black, 0.2);
}

53
src/scss/free/_images.scss Normal file
View File

@ -0,0 +1,53 @@
//
// Images
//
.bg-image {
position: relative;
overflow: hidden;
background-repeat: no-repeat;
background-size: cover;
background-position: center center;
}
.mask {
position: absolute;
top: 0;
right: 0;
bottom: 0;
left: 0;
width: 100%;
height: 100%;
overflow: hidden;
background-attachment: fixed;
}
.overlay {
opacity: 0;
transition: all 0.3s ease-in-out;
&:hover {
opacity: 1;
}
}
.zoom {
img,
video {
transition: all 0.3s linear;
}
&:hover {
img,
video {
transform: scale(1.1);
}
}
}
.hoverable {
box-shadow: none;
transition: all 0.3s ease-in-out;
&:hover {
box-shadow: 0 8px 17px 0 rgba(0, 0, 0, 0.2), 0 6px 20px 0 rgba(0, 0, 0, 0.19);
transition: all 0.3s ease-in-out;
}
}

65
src/scss/free/_modal.scss
View File

@ -1,5 +1,68 @@
// Modal // Modal
.modal-content { .modal-content {
border: 0; border: 0;
box-shadow: $box-shadow-1; box-shadow: $box-shadow-3;
}
.modal {
.modal-dialog {
width: 100%;
@media (min-width: 768px) {
&.modal-top {
top: 0;
}
&.modal-left {
left: 0;
}
&.modal-right {
right: 0;
}
&.modal-bottom {
bottom: 0;
}
&.modal-top-left {
top: 10px;
left: 10px;
}
&.modal-top-right {
top: 10px;
right: 10px;
}
&.modal-bottom-left {
bottom: 10px;
left: 10px;
}
&.modal-bottom-right {
right: 10px;
bottom: 10px;
}
}
}
&.fade {
&.top:not(.show) .modal-dialog {
transform: translate3d(0, -25%, 0);
}
&.right:not(.show) .modal-dialog {
transform: translate3d(25%, 0, 0);
}
&.bottom:not(.show) .modal-dialog {
transform: translate3d(0, 25%, 0);
}
&.left:not(.show) .modal-dialog {
transform: translate3d(-25%, 0, 0);
}
}
@media (min-width: 992px) {
.modal-side {
position: absolute;
right: 10px;
bottom: 10px;
margin: 0;
}
.modal-frame {
position: absolute;
max-width: 100%;
margin: 0;
}
}
} }

2
src/scss/free/_navbar.scss
View File

@ -1,8 +1,8 @@
// Navbar // Navbar
.navbar { .navbar {
// box-shadow: $box-shadow-2;
box-shadow: $box-shadow-3; box-shadow: $box-shadow-3;
padding-top: 0.5625rem;
} }
.navbar-toggler { .navbar-toggler {

1
src/scss/free/_ripple.scss
View File

@ -2,6 +2,7 @@
position: relative; position: relative;
overflow: hidden; overflow: hidden;
display: inline-block; display: inline-block;
vertical-align: bottom;
} }
.ripple-surface-unbound { .ripple-surface-unbound {

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

@ -5,7 +5,7 @@
// Grays // Grays
$white: #fff; $white: #fff;
$gray-50: #eff0f4; $gray-50: #fbfbfb;
$gray-100: #f5f5f5; $gray-100: #f5f5f5;
$gray-200: #eeeeee; $gray-200: #eeeeee;
$gray-300: #e0e0e0; $gray-300: #e0e0e0;
@ -289,7 +289,7 @@ $success: #00b74a;
$info: #39c0ed; $info: #39c0ed;
$warning: #ffa900; $warning: #ffa900;
$danger: #f93154; $danger: #f93154;
$light: $gray-100; $light: $gray-50;
$dark: $gray-900; $dark: $gray-900;
$theme-colors: ( $theme-colors: (
@ -301,6 +301,8 @@ $theme-colors: (
'danger': $danger, 'danger': $danger,
'light': $light, 'light': $light,
'dark': $dark, 'dark': $dark,
'white': $white,
'black': $black,
); );
$note: () !default; $note: () !default;
@ -342,13 +344,6 @@ $body-color: $gray-800;
// Components // Components
// $box-shadow-0: none;
// $box-shadow-1: 0 2px 5px 0 rgba(0, 0, 0, 0.05), 0 2px 10px 0 rgba(0, 0, 0, 0.05);
// $box-shadow-2: 0 4px 10px 0 rgba(0, 0, 0, 0.05), 0 4px 20px 0 rgba(0, 0, 0, 0.05);
// $box-shadow-3: 0 6px 15px 2px rgba(0, 0, 0, 0.05), 0 6px 30px 2px rgba(0, 0, 0, 0.05);
// $box-shadow-4: 0 8px 20px 4px rgba(0, 0, 0, 0.05), 0 8px 40px 4px rgba(0, 0, 0, 0.05);
// $box-shadow-5: 0 10px 25px 6px rgba(0, 0, 0, 0.05), 0 10px 50px 6px rgba(0, 0, 0, 0.05);
$box-shadow-0: none; $box-shadow-0: none;
$box-shadow-1: 0 2px 10px 0 rgba(0, 0, 0, 0.05); $box-shadow-1: 0 2px 10px 0 rgba(0, 0, 0, 0.05);
$box-shadow-2: 0 5px 15px 0 rgba(0, 0, 0, 0.05); $box-shadow-2: 0 5px 15px 0 rgba(0, 0, 0, 0.05);
@ -356,11 +351,11 @@ $box-shadow-3: 0 10px 20px 0 rgba(0, 0, 0, 0.05);
$box-shadow-4: 0 15px 30px 0 rgba(0, 0, 0, 0.05); $box-shadow-4: 0 15px 30px 0 rgba(0, 0, 0, 0.05);
$box-shadow-5: 0 20px 40px 0 rgba(0, 0, 0, 0.05); $box-shadow-5: 0 20px 40px 0 rgba(0, 0, 0, 0.05);
$box-shadow-1-strong: 0 2px 5px 0 rgba(0, 0, 0, 0.25), 0 2px 10px 0 rgba(0, 0, 0, 0.25); $box-shadow-1-strong: 0px 2px 5px 0px rgba(0, 0, 0, 0.25), 0px 3px 10px 0px rgba(0, 0, 0, 0.2);
$box-shadow-2-strong: 0 4px 10px 0 rgba(0, 0, 0, 0.25), 0 4px 20px 0 rgba(0, 0, 0, 0.25); $box-shadow-2-strong: 0px 4px 8px 0px rgba(0, 0, 0, 0.25), 0px 5px 15px 2px rgba(0, 0, 0, 0.2);
$box-shadow-3-strong: 0 6px 15px 2px rgba(0, 0, 0, 0.25), 0 6px 30px 2px rgba(0, 0, 0, 0.25); $box-shadow-3-strong: 0px 6px 11px 0px rgba(0, 0, 0, 0.25), 0px 7px 20px 3px rgba(0, 0, 0, 0.2);
$box-shadow-4-strong: 0 8px 20px 4px rgba(0, 0, 0, 0.25), 0 8px 40px 4px rgba(0, 0, 0, 0.25); $box-shadow-4-strong: 0px 6px 14px 0px rgba(0, 0, 0, 0.25), 0px 10px 30px 4px rgba(0, 0, 0, 0.2);
$box-shadow-5-strong: 0 10px 25px 6px rgba(0, 0, 0, 0.25), 0 10px 50px 6px rgba(0, 0, 0, 0.25); $box-shadow-5-strong: 0px 6px 20px 0px rgba(0, 0, 0, 0.25), 0px 12px 40px 5px rgba(0, 0, 0, 0.2);
$shadows-light: ( $shadows-light: (
'0': $box-shadow-0, '0': $box-shadow-0,
@ -386,12 +381,64 @@ $font-family-base: var(--mdb-font-roboto);
$line-height-base: 1.6; $line-height-base: 1.6;
// Badge
$badge-dot-border-radius: 4.5px;
$badge-dot-height: 9px;
$badge-dot-width: 9px;
$badge-dot-ml: -3px;
$badge-notification-mt: -5px;
$badge-notification-ml: -5px;
// Buttons // Buttons
$btn-line-height: 1.6; $btn-line-height: 1.5;
$btn-padding-top: 10px;
$btn-padding-bottom: 8px;
$btn-font-size: 12px;
$btn-padding-left: 24px;
$btn-padding-right: 24px;
$btn-font-weight: 500;
$btn-box-shadow: 0 2px 5px 0 rgba(0, 0, 0, 0.2), 0 2px 10px 0 rgba(0, 0, 0, 0.1); $btn-box-shadow: 0 2px 5px 0 rgba(0, 0, 0, 0.2), 0 2px 10px 0 rgba(0, 0, 0, 0.1);
$btn-hover-box-shadow: 0 4px 10px 0 rgba(0, 0, 0, 0.2), 0 4px 20px 0 rgba(0, 0, 0, 0.1); $btn-hover-box-shadow: 0 4px 10px 0 rgba(0, 0, 0, 0.2), 0 4px 20px 0 rgba(0, 0, 0, 0.1);
$btn-focus-box-shadow: $btn-hover-box-shadow; $btn-focus-box-shadow: $btn-hover-box-shadow;
$btn-active-box-shadow: $btn-hover-box-shadow; $btn-active-box-shadow: $btn-hover-box-shadow;
$btn-border-width: 2px;
$btn-padding-top: 0.4375rem; $btn-outline-padding-top: 8px;
$btn-outline-padding-bottom: 6px;
$btn-outline-padding-left: 22px;
$btn-outline-padding-right: 22px;
$btn-outline-padding-top-sm: 4px;
$btn-outline-padding-bottom-sm: 3px;
$btn-outline-padding-right-sm: 14px;
$btn-outline-padding-left-sm: 14px;
$btn-outline-padding-top-lg: 10px;
$btn-outline-padding-bottom-lg: 9px;
$btn-outline-padding-right-lg: 25px;
$btn-outline-padding-left-lg: 25px;
$btn-line-height-lg: 1.6;
$btn-font-size-lg: 14px;
$btn-padding-top-lg: 12px;
$btn-padding-bottom-lg: 11px;
$btn-padding-right-lg: 27px;
$btn-padding-left-lg: 27px;
$btn-line-height-sm: $btn-line-height;
$btn-font-size-sm: 12px;
$btn-padding-top-sm: 6px;
$btn-padding-bottom-sm: 5px;
$btn-padding-right-sm: 16px;
$btn-padding-left-sm: 16px;
$btn-link-bgc: #f5f5f5;
$btn-rounded-border-radius: 10rem;
// Button group
$btn-group-border-radius: calc(0.25rem - 1px);
$btn-group-transition: color 0.15s ease-in-out, background-color 0.15s ease-in-out,
border-color 0.15s ease-in-out, box-shadow 0.15s ease-in-out;

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

@ -1,71 +1,123 @@
// //
// Check/radio // Material styles for check / radio / switch
// //
.form-check {
.form-check-input { .form-check-input {
border: solid 2px; margin-left: 1.79rem * -1;
border-color: rgba(0, 0, 0, 0.6);
&[type='radio'] {
margin-left: 1.85rem * -1;
}
}
}
.form-check-input {
width: 18px;
height: 18px;
background-color: #fff;
border: 2px solid rgb(117, 117, 117);
&:before {
content: '';
position: absolute;
z-index: -1;
box-shadow: 0px 0px 0px 13px transparent;
border-radius: 50%;
width: 14px;
height: 14px;
background-color: transparent;
opacity: 0;
pointer-events: none;
transform: scale(0);
}
&:hover {
cursor: pointer;
&:before {
opacity: 0.04;
box-shadow: 0px 0px 0px 13px rgba(0, 0, 0, 0.6);
}
}
&:focus {
box-shadow: none;
border-color: rgb(117, 117, 117);
transition: border-color 0.2s;
&:before {
opacity: 0.12;
box-shadow: 0px 0px 0px 13px rgba(0, 0, 0, 0.6);
transform: scale(1);
transition: box-shadow 0.2s, transform 0.2s;
}
}
&:checked {
border-color: $primary;
&:before {
opacity: 0.16;
}
&:after {
content: '';
position: absolute;
}
&:focus {
border-color: $primary;
&:before {
box-shadow: 0px 0px 0px 13px $primary;
transform: scale(1);
transition: box-shadow 0.2s, transform 0.2s;
}
}
}
&[type='checkbox'] { &[type='checkbox'] {
border-radius: 2px; border-radius: 2px;
&:checked { &:checked {
background-color: $primary;
&:focus {
background-color: $primary;
}
}
}
&[type='radio'] {
&:checked {
background-color: #fff;
&:focus {
background-color: #fff;
}
}
}
&:hover {
cursor: pointer;
}
&:focus {
border-color: rgba(0, 0, 0, 0.6);
box-shadow: none;
}
&:checked {
&:focus {
border-color: $primary;
}
&[type='checkbox'] {
background-image: none; background-image: none;
background-color: $primary;
&:before { &:after {
content: ''; display: block;
transform: rotate(45deg); transform: rotate(45deg);
position: absolute; border-width: 2px;
margin-left: 5px; border-color: #fff;
width: 6px; width: 6px;
height: 13px; height: 13px;
border-width: 2px;
border-style: solid; border-style: solid;
border-top: 0; border-top: 0;
border-left: 0; border-left: 0;
border-color: #fff; margin-left: 4px;
z-index: 10000; margin-top: -1px;
transition: border-color 0.2s, background-color 0.2s; }
&:focus {
background-color: $primary;
}
} }
} }
&[type='radio'] { &[type='radio'] {
background-image: none; border-radius: 50%;
width: 20px;
height: 20px;
&:before { &:before {
content: ''; box-shadow: 1px 1px 0px 13px rgba(0, 0, 0, 0.6);
position: absolute; }
&:checked {
background-image: none;
background-color: #fff;
&:after {
border-radius: 50%; border-radius: 50%;
width: 10px; width: 10px;
height: 10px; height: 10px;
@ -75,6 +127,14 @@
margin-left: 3px; margin-left: 3px;
transition: border-color; transition: border-color;
} }
&:focus {
background-color: #fff;
&:before {
box-shadow: 1px 1px 0px 13px $primary;
}
}
} }
} }
} }
@ -86,6 +146,7 @@
} }
.form-switch { .form-switch {
padding-left: 1.85rem;
.form-check-input { .form-check-input {
background-image: none; background-image: none;
border-width: 0px; border-width: 0px;
@ -93,8 +154,10 @@
width: 36px; width: 36px;
height: 14px; height: 14px;
background-color: rgba(0, 0, 0, 0.38); background-color: rgba(0, 0, 0, 0.38);
margin-top: 0.35rem;
margin-right: 0.7rem;
&:before { &:after {
content: ''; content: '';
position: absolute; position: absolute;
border: none; border: none;
@ -111,6 +174,12 @@
&:focus { &:focus {
background-image: none; background-image: none;
&:before {
box-shadow: 3px -1px 0px 13px rgba(0, 0, 0, 0.6);
transform: scale(1);
transition: box-shadow 0.2s, transform 0.2s;
}
} }
&:checked { &:checked {
@ -118,12 +187,19 @@
&:focus { &:focus {
background-image: none; background-image: none;
&:before {
margin-left: 17px;
box-shadow: 3px -1px 0px 13px $primary;
transform: scale(1);
transition: box-shadow 0.2s, transform 0.2s;
}
} }
&[type='checkbox'] { &[type='checkbox'] {
background-image: none; background-image: none;
&:before { &:after {
content: ''; content: '';
position: absolute; position: absolute;
border: none; border: none;

1796
src/scss/free/forms/_form-control.scss
View File

File diff suppressed because it is too large Load Diff

8
src/scss/free/forms/_form-text.scss
View File

@ -1,11 +1,3 @@
// //
// Form text // Form text
// //
.form-text {
margin-top: $form-text-margin-top;
@include font-size($form-text-font-size);
font-style: $form-text-font-style;
font-weight: $form-text-font-weight;
color: $form-text-color;
}

6
src/scss/free/forms/_input-group.scss
View File

@ -7,8 +7,10 @@
min-height: calc(1.5em + 0.33rem + 2px); min-height: calc(1.5em + 0.33rem + 2px);
padding-top: 0.27rem; padding-top: 0.27rem;
padding-bottom: 0.27rem; padding-bottom: 0.27rem;
transition: all 0.2s linear;
&:focus { &:focus {
transition: all 0.2s linear;
border-color: $primary; border-color: $primary;
outline: 0; outline: 0;
box-shadow: inset 0 0 0 1px $primary; box-shadow: inset 0 0 0 1px $primary;
@ -54,5 +56,9 @@
.input-group-text { .input-group-text {
border-left: 0; border-left: 0;
} }
input + .input-group-text {
border: 0;
border-left: 1px solid #bdbdbd;
}
} }
} }

61
src/scss/free/forms/_validation.scss
View File

@ -65,24 +65,19 @@
} }
} }
.was-validated .was-validated .form-check-input.is-valid:checked[type='checkbox']:before {
.form-check border-color: #fff;
.form-check-input[type='checkbox']:valid:checked }
+ .form-check-label:before, .was-validated .form-check-input.is-valid:checked[type='checkbox'] {
.was-validated
.form-check
.form-check-input[type='checkbox'].is-valid:checked
+ .form-check-label:before {
background-color: $success; background-color: $success;
border-color: $success; border-color: $success;
} }
.was-validated .form-check .form-check-input[type='checkbox']:invalid + .form-check-label:before, .was-validated .form-check-input.is-invalid:checked[type='checkbox']:before {
.was-validated border-color: #fff;
.form-check }
.form-check-input[type='checkbox'].is-invalid .was-validated .form-check-input.is-invalid:checked[type='checkbox'] {
+ .form-check-label:before { background-color: $danger;
background-color: $white;
border-color: $danger; border-color: $danger;
} }
@ -93,12 +88,38 @@
margin-bottom: 1rem; margin-bottom: 1rem;
} }
.was-validated .form-check-input:valid:checked, .was-validated .form-check-input:invalid:focus,
.form-check-input.is-valid:checked { .form-check-input.is-invalid:focus {
background-color: $success; box-shadow: none;
} }
.was-validated .form-check-input:invalid, .was-validated .form-check-input:valid:focus,
.form-check-input.is-invalid { .form-check-input.valid:focus {
background-color: $danger; box-shadow: none;
}
.was-validated .form-check-input:valid:checked:focus:before {
box-shadow: 0px 0px 0px 13px $success;
}
.was-validated .form-check-input:invalid:checked:focus:before {
box-shadow: 0px 0px 0px 13px $danger;
}
.was-validated .form-check-input[type='checkbox']:checked:valid:focus,
.form-check-input[type='checkbox'].valid:checked:focus {
background-color: $success;
border-color: $success;
}
.was-validated .input-group .form-control:invalid,
.was-validated .input-group .form-control.is-invalid,
.was-validated .input-group .form-control:valid,
.was-validated .input-group .form-control.is-valid {
margin-bottom: 0;
}
.was-validated .input-group .valid-feedback,
.was-validated .input-group .invalid-feedback {
margin-top: 2.5rem;
} }

4
src/scss/mdb.free.scss
View File

@ -58,10 +58,10 @@
@import './free/colors'; @import './free/colors';
@import './free/shadows'; @import './free/shadows';
@import './free/flag'; @import './free/flag';
@import './free/images';
// MDB FORMS // MDB FORMS
@import './free/forms/form-control'; @import './free/forms/form-control';
@import './free/forms/form-outline';
@import './free/forms/form-select'; @import './free/forms/form-select';
@import './free/forms/form-check'; @import './free/forms/form-check';
@import './free/forms/form-file'; @import './free/forms/form-file';
@ -76,6 +76,7 @@
@import './free/nav'; @import './free/nav';
@import './free/navbar'; @import './free/navbar';
@import './free/card'; @import './free/card';
@import './free/breadcrumb';
@import './free/pagination'; @import './free/pagination';
@import './free/badge'; @import './free/badge';
@import './free/alert'; @import './free/alert';
@ -87,3 +88,4 @@
@import './free/scrollspy'; @import './free/scrollspy';
@import './free/animate'; @import './free/animate';
@import './free/ripple'; @import './free/ripple';
@import './free/footer';