mirror of
https://github.com/mdbootstrap/mdb-ui-kit.git
synced 2024-11-22 09:36:55 +03:00
1.0.0-alpha2
This commit is contained in:
Adam Jakubowski
parent
ac9044887d
commit
df888936a2
|
|
@ -10,7 +10,7 @@
|
|||
|
||||
**[>> 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>
|
||||
|
|
@ -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-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>
|
||||
|
|
|
|||
|
|
@ -1,5 +1,5 @@
|
|||
MDB5
|
||||
Version: FREE 1.0.0-alpha1
|
||||
Version: FREE 1.0.0-alpha2
|
||||
|
||||
Documentation:
|
||||
https://mdbootstrap.com/docs/standard/
|
||||
|
|
|
|||
6
css/mdb.min.css
vendored
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
18
index.html
18
index.html
|
|
@ -21,13 +21,17 @@
|
|||
</head>
|
||||
<body>
|
||||
<!-- Start your project here-->
|
||||
<div style="height: 100vh; text-align: center; margin-top: 150px;">
|
||||
<img
|
||||
src="https://mdbootstrap.com/img/logo/mdb-transparent-250px.png"
|
||||
style="width: 250px; height: 90px;"
|
||||
/>
|
||||
<h5>Thank you for using our product. We're glad you're with us.</h5>
|
||||
<p>MDB Team</p>
|
||||
<div class="container">
|
||||
<div class="d-flex justify-content-center align-items-center" style="height: 100vh;">
|
||||
<div class="text-center">
|
||||
<img
|
||||
src="https://mdbootstrap.com/img/logo/mdb-transparent-250px.png"
|
||||
style="width: 250px; height: 90px;"
|
||||
/>
|
||||
<h5 class="pt-3">Thank you for using our product. We're glad you're with us.</h5>
|
||||
<p class="pb-5">MDB Team</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<!-- End your project here-->
|
||||
</body>
|
||||
|
|
|
|||
6
js/mdb.min.js
vendored
6
js/mdb.min.js
vendored
File diff suppressed because one or more lines are too long
File diff suppressed because one or more lines are too long
|
|
@ -1,6 +1,6 @@
|
|||
{
|
||||
"name": "mdb-ui-kit",
|
||||
"version": "1.0.0-alpha1",
|
||||
"version": "1.0.0-alpha2",
|
||||
"main": "js/mdb.min.js",
|
||||
"repository": "https://github.com/mdbootstrap/mdb-ui-kit.git",
|
||||
"author": "MDBootstrap",
|
||||
|
|
|
|||
|
|
@ -16,11 +16,13 @@ const SELECTOR_EXPAND = '[data-toggle="animation"]';
|
|||
|
||||
const DefaultType = {
|
||||
animation: 'string',
|
||||
start: 'string',
|
||||
showOnLoad: 'boolean',
|
||||
onStart: '(null|function)',
|
||||
onEnd: '(null|function)',
|
||||
onHide: '(null|function)',
|
||||
onShow: '(null|function)',
|
||||
animateonscroll: '(boolean|string)',
|
||||
animateOnScroll: '(string)',
|
||||
windowHeight: 'number',
|
||||
offset: '(number|string)',
|
||||
delay: '(number|string)',
|
||||
|
|
@ -28,15 +30,18 @@ const DefaultType = {
|
|||
reverse: 'boolean',
|
||||
interval: '(number|string)',
|
||||
repeat: '(number|boolean)',
|
||||
reset: 'boolean',
|
||||
};
|
||||
|
||||
const Default = {
|
||||
animation: 'fade',
|
||||
start: 'onClick',
|
||||
showOnLoad: true,
|
||||
onStart: null,
|
||||
onEnd: null,
|
||||
onHide: null,
|
||||
onShow: null,
|
||||
animateonscroll: false,
|
||||
animateOnScroll: 'once',
|
||||
windowHeight: 0,
|
||||
offset: 0,
|
||||
delay: 0,
|
||||
|
|
@ -44,6 +49,7 @@ const Default = {
|
|||
reverse: false,
|
||||
interval: 0,
|
||||
repeat: false,
|
||||
reset: false,
|
||||
};
|
||||
|
||||
/**
|
||||
|
|
@ -82,10 +88,22 @@ class Animate {
|
|||
|
||||
// Private
|
||||
_init() {
|
||||
if (this._options.animateonscroll) {
|
||||
this._bindScrollEvents();
|
||||
} else {
|
||||
this._bindClickEvents();
|
||||
switch (this._options.start) {
|
||||
case 'onHover':
|
||||
this._bindHoverEvents();
|
||||
break;
|
||||
case 'onLoad':
|
||||
this._startAnimation();
|
||||
break;
|
||||
case 'onScroll':
|
||||
this._bindScrollEvents();
|
||||
break;
|
||||
default:
|
||||
this._bindClickEvents();
|
||||
break;
|
||||
}
|
||||
this._bindTriggerOnEndCallback();
|
||||
if (this._options.reset) {
|
||||
this._bindResetAnimationAfterFinish();
|
||||
}
|
||||
}
|
||||
|
|
@ -128,7 +146,7 @@ class Animate {
|
|||
this._hideAnimateElement();
|
||||
break;
|
||||
case shouldBeVisible && !isElementVisible && this._repeatAnimateOnScroll:
|
||||
if (this._options.animateonscroll !== 'repeat') {
|
||||
if (this._options.animateOnScroll !== 'repeat') {
|
||||
this._repeatAnimateOnScroll = false;
|
||||
}
|
||||
this._callback(this._options.onShow);
|
||||
|
|
@ -146,12 +164,12 @@ class Animate {
|
|||
}
|
||||
|
||||
_addAnimatedClass() {
|
||||
Manipulator.addClass(this._animateElement, 'animated');
|
||||
Manipulator.addClass(this._animateElement, 'animation');
|
||||
Manipulator.addClass(this._animateElement, this._options.animation);
|
||||
}
|
||||
|
||||
_clearAnimationClass() {
|
||||
this._animateElement.classList.remove(this._options.animation, 'animated');
|
||||
this._animateElement.classList.remove(this._options.animation, 'animation');
|
||||
}
|
||||
|
||||
_startAnimation() {
|
||||
|
|
@ -207,7 +225,6 @@ class Animate {
|
|||
|
||||
_setAnimationInterval() {
|
||||
EventHandler.on(this._animateElement, 'animationend', () => {
|
||||
this._callback(this._options.onEnd);
|
||||
this._clearAnimationClass();
|
||||
setTimeout(() => {
|
||||
this._addAnimatedClass();
|
||||
|
|
@ -225,17 +242,23 @@ class Animate {
|
|||
|
||||
_bindResetAnimationAfterFinish() {
|
||||
EventHandler.on(this._animateElement, 'animationend', () => {
|
||||
this._callback(this._options.onEnd);
|
||||
this._clearAnimationClass();
|
||||
});
|
||||
}
|
||||
|
||||
_bindTriggerOnEndCallback() {
|
||||
EventHandler.on(this._animateElement, 'animationend', () => {
|
||||
this._callback(this._options.onEnd);
|
||||
});
|
||||
}
|
||||
|
||||
_bindScrollEvents() {
|
||||
const scrollPositionOnPageLoad = window.scrollY;
|
||||
if (!this._options.showOnLoad) {
|
||||
this._animateOnScroll();
|
||||
}
|
||||
|
||||
EventHandler.on(window, 'scroll', () => {
|
||||
if (scrollPositionOnPageLoad !== window.scrollY) {
|
||||
this._animateOnScroll();
|
||||
}
|
||||
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) {
|
||||
if (fn instanceof Function) {
|
||||
fn();
|
||||
|
|
|
|||
|
|
@ -14,6 +14,7 @@ const NAME = 'input';
|
|||
const DATA_KEY = 'mdb.input';
|
||||
const CLASSNAME_WRAPPER = 'form-outline';
|
||||
const OUTLINE_INPUT = `.${CLASSNAME_WRAPPER} input`;
|
||||
const OUTLINE_TEXTAREA = `.${CLASSNAME_WRAPPER} textarea`;
|
||||
|
||||
/**
|
||||
* ------------------------------------------------------------------------
|
||||
|
|
@ -24,8 +25,12 @@ const OUTLINE_INPUT = `.${CLASSNAME_WRAPPER} input`;
|
|||
class Input {
|
||||
constructor(element) {
|
||||
this._element = element;
|
||||
this._label = null;
|
||||
this._labelWidth = 0;
|
||||
this._labelMarginLeft = 0;
|
||||
this._notchLeading = null;
|
||||
this._notchMiddle = null;
|
||||
this._notchTrailing = null;
|
||||
|
||||
if (this._element) {
|
||||
Data.setData(element, DATA_KEY, this);
|
||||
|
|
@ -39,9 +44,9 @@ class Input {
|
|||
|
||||
// Public
|
||||
init() {
|
||||
this._calculateLabelWidth();
|
||||
this._getLabelData();
|
||||
this._applyDivs();
|
||||
this._applyNotchWidth();
|
||||
this._applyNotch();
|
||||
this._applyActiveClass();
|
||||
}
|
||||
|
||||
|
|
@ -51,40 +56,67 @@ class Input {
|
|||
}
|
||||
|
||||
// Private
|
||||
_calculateLabelWidth() {
|
||||
const label = SelectorEngine.findOne('label.form-label', this._element);
|
||||
this._labelWidth = label.clientWidth * 0.8 + 8;
|
||||
_getLabelData() {
|
||||
this._label = SelectorEngine.findOne('label', this._element);
|
||||
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() {
|
||||
const notchWrapper = element('div');
|
||||
Manipulator.addClass(notchWrapper, 'form-notch');
|
||||
const notchLeading = element('div');
|
||||
Manipulator.addClass(notchLeading, 'form-notch-leading');
|
||||
this._notchLeading = element('div');
|
||||
Manipulator.addClass(this._notchLeading, 'form-notch-leading');
|
||||
this._notchMiddle = element('div');
|
||||
Manipulator.addClass(this._notchMiddle, 'form-notch-middle');
|
||||
const notchTrailing = element('div');
|
||||
Manipulator.addClass(notchTrailing, 'form-notch-trailing');
|
||||
this._notchTrailing = element('div');
|
||||
Manipulator.addClass(this._notchTrailing, 'form-notch-trailing');
|
||||
|
||||
notchWrapper.append(notchLeading);
|
||||
notchWrapper.append(this._notchLeading);
|
||||
notchWrapper.append(this._notchMiddle);
|
||||
notchWrapper.append(notchTrailing);
|
||||
notchWrapper.append(this._notchTrailing);
|
||||
this._element.append(notchWrapper);
|
||||
}
|
||||
|
||||
_applyNotchWidth() {
|
||||
_applyNotch() {
|
||||
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) {
|
||||
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 !== '') {
|
||||
Manipulator.addClass(input, 'active');
|
||||
}
|
||||
}
|
||||
|
||||
_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 === '') {
|
||||
input.classList.remove('active');
|
||||
}
|
||||
|
|
@ -101,15 +133,23 @@ class Input {
|
|||
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, 'input', OUTLINE_INPUT, Input.applyActiveClass(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
|
||||
SelectorEngine.find(`.${CLASSNAME_WRAPPER}`).forEach((input) => {
|
||||
new Input(input).init();
|
||||
SelectorEngine.find(`.${CLASSNAME_WRAPPER}`).forEach((element) => {
|
||||
new Input(element).init();
|
||||
});
|
||||
|
||||
export default Input;
|
||||
|
|
|
|||
|
|
@ -36,19 +36,19 @@ const BOOTSTRAP_COLORS = [
|
|||
const TRANSITION_BREAK_OPACITY = 0.5;
|
||||
|
||||
const Default = {
|
||||
centered: false,
|
||||
color: '',
|
||||
duration: '500ms',
|
||||
radius: 0,
|
||||
unbound: false,
|
||||
rippleCentered: false,
|
||||
rippleColor: '',
|
||||
rippleDuration: '500ms',
|
||||
rippleRadius: 0,
|
||||
rippleUnbound: false,
|
||||
};
|
||||
|
||||
const DefaultType = {
|
||||
centered: 'boolean',
|
||||
color: 'string',
|
||||
duration: 'string',
|
||||
radius: 'number',
|
||||
unbound: 'boolean',
|
||||
rippleCentered: 'boolean',
|
||||
rippleColor: 'string',
|
||||
rippleDuration: 'string',
|
||||
rippleRadius: 'number',
|
||||
rippleUnbound: 'boolean',
|
||||
};
|
||||
|
||||
/**
|
||||
|
|
@ -83,9 +83,9 @@ class Ripple {
|
|||
|
||||
dispose() {
|
||||
Data.removeData(this._element, DATA_KEY);
|
||||
EventHandler.off(this._element, 'click', '');
|
||||
this._element = null;
|
||||
this._options = null;
|
||||
EventHandler.off(this._element, 'click', '');
|
||||
}
|
||||
|
||||
// Private
|
||||
|
|
@ -109,18 +109,20 @@ class Ripple {
|
|||
}
|
||||
|
||||
_createRipple(event) {
|
||||
const { offsetX, offsetY } = event;
|
||||
const { layerX, layerY } = event;
|
||||
const offsetX = layerX;
|
||||
const offsetY = layerY;
|
||||
const height = this._element.offsetHeight;
|
||||
const width = this._element.offsetWidth;
|
||||
const duration = this._durationToMsNumber(this._options.duration);
|
||||
const duration = this._durationToMsNumber(this._options.rippleDuration);
|
||||
const diameterOptions = {
|
||||
offsetX: this._options.centered ? height / 2 : offsetX,
|
||||
offsetY: this._options.centered ? width / 2 : offsetY,
|
||||
offsetX: this._options.rippleCentered ? height / 2 : offsetX,
|
||||
offsetY: this._options.rippleCentered ? width / 2 : offsetY,
|
||||
height,
|
||||
width,
|
||||
};
|
||||
const diameter = this._getDiameter(diameterOptions);
|
||||
const radiusValue = this._options.radius || diameter / 2;
|
||||
const radiusValue = this._options.rippleRadius || diameter / 2;
|
||||
|
||||
const opacity = {
|
||||
delay: duration * TRANSITION_BREAK_OPACITY,
|
||||
|
|
@ -128,10 +130,14 @@ class Ripple {
|
|||
};
|
||||
|
||||
const styles = {
|
||||
left: this._options.centered ? `${width / 2 - radiusValue}px` : `${offsetX - radiusValue}px`,
|
||||
top: this._options.centered ? `${height / 2 - radiusValue}px` : `${offsetY - radiusValue}px`,
|
||||
height: `${this._options.radius * 2 || diameter}px`,
|
||||
width: `${this._options.radius * 2 || diameter}px`,
|
||||
left: this._options.rippleCentered
|
||||
? `${width / 2 - radiusValue}px`
|
||||
: `${offsetX - radiusValue}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`,
|
||||
transitionDuration: `${duration}ms, ${opacity.duration}ms`,
|
||||
};
|
||||
|
|
@ -139,13 +145,13 @@ class Ripple {
|
|||
const rippleHTML = element('div');
|
||||
|
||||
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 }) {
|
||||
Object.keys(styles).forEach((property) => (ripple.style[property] = styles[property]));
|
||||
ripple.classList.add(CLASSNAME_RIPPLE_WAVE);
|
||||
if (this._options.color !== '') {
|
||||
if (this._options.rippleColor !== '') {
|
||||
this._removeOldColorClasses(wrapper);
|
||||
this._addColor(ripple, wrapper);
|
||||
}
|
||||
|
|
@ -154,9 +160,11 @@ class Ripple {
|
|||
this._appendRipple(ripple, wrapper);
|
||||
}
|
||||
|
||||
_removeHTMLRipple({ wrapper, ripple, duration }) {
|
||||
_removeHTMLRipple({ ripple, duration }) {
|
||||
setTimeout(() => {
|
||||
wrapper.removeChild(ripple);
|
||||
if (ripple) {
|
||||
ripple.remove();
|
||||
}
|
||||
}, duration);
|
||||
}
|
||||
|
||||
|
|
@ -213,7 +221,7 @@ class Ripple {
|
|||
}
|
||||
|
||||
_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);
|
||||
setTimeout(() => {
|
||||
Manipulator.addClass(target, 'active');
|
||||
|
|
@ -221,7 +229,7 @@ class Ripple {
|
|||
}
|
||||
|
||||
_toggleUnbound(target) {
|
||||
if (this._options.unbound === true) {
|
||||
if (this._options.rippleUnbound === true) {
|
||||
Manipulator.addClass(target, CLASSNAME_UNBOUND);
|
||||
} else {
|
||||
target.classList.remove(CLASSNAME_UNBOUND);
|
||||
|
|
@ -230,13 +238,16 @@ class Ripple {
|
|||
|
||||
_addColor(target, parent) {
|
||||
const IS_BOOTSTRAP_COLOR = BOOTSTRAP_COLORS.find(
|
||||
(color) => color === this._options.color.toLowerCase()
|
||||
(color) => color === this._options.rippleColor.toLowerCase()
|
||||
);
|
||||
|
||||
if (IS_BOOTSTRAP_COLOR) {
|
||||
Manipulator.addClass(parent, `${CLASSNAME_RIPPLE}-${this._options.color.toLowerCase()}`);
|
||||
Manipulator.addClass(
|
||||
parent,
|
||||
`${CLASSNAME_RIPPLE}-${this._options.rippleColor.toLowerCase()}`
|
||||
);
|
||||
} else {
|
||||
const rgbValue = this._colorToRGB(this._options.color).join(',');
|
||||
const rgbValue = this._colorToRGB(this._options.rippleColor).join(',');
|
||||
const gradientImage = GRADIENT.split('{{color}}').join(`${rgbValue}`);
|
||||
target.style.backgroundImage = `radial-gradient(circle, ${gradientImage})`;
|
||||
}
|
||||
|
|
|
|||
38
src/js/mdb/util/keycodes.js
Normal file
38
src/js/mdb/util/keycodes.js
Normal 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;
|
||||
|
|
@ -1,6 +1,6 @@
|
|||
// animations
|
||||
|
||||
@keyframes dropIn {
|
||||
@keyframes drop-in {
|
||||
0% {
|
||||
opacity: 0;
|
||||
transform: scale(0);
|
||||
|
|
@ -11,13 +11,13 @@
|
|||
}
|
||||
}
|
||||
|
||||
.dropIn {
|
||||
.drop-in {
|
||||
transform-origin: top center;
|
||||
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% {
|
||||
opacity: 1;
|
||||
transform: scale(1);
|
||||
|
|
@ -28,13 +28,13 @@
|
|||
}
|
||||
}
|
||||
|
||||
.dropOut {
|
||||
.drop-out {
|
||||
transform-origin: top center;
|
||||
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% {
|
||||
opacity: 0;
|
||||
transform: scale3d(0.3, 0.3, 0.3);
|
||||
|
|
@ -58,12 +58,12 @@
|
|||
}
|
||||
}
|
||||
|
||||
.flyIn {
|
||||
animation-name: flyIn;
|
||||
.fly-in {
|
||||
animation-name: fly-in;
|
||||
transition-timing-function: cubic-bezier(0.215, 0.61, 0.355, 1);
|
||||
}
|
||||
|
||||
@keyframes flyInUp {
|
||||
@keyframes fly-in-up {
|
||||
0% {
|
||||
opacity: 0;
|
||||
transform: translate3d(0, 1500px, 0);
|
||||
|
|
@ -83,12 +83,12 @@
|
|||
}
|
||||
}
|
||||
|
||||
.flyInUp {
|
||||
animation-name: flyInUp;
|
||||
.fly-in-up {
|
||||
animation-name: fly-in-up;
|
||||
transition-timing-function: cubic-bezier(0.215, 0.61, 0.355, 1);
|
||||
}
|
||||
|
||||
@keyframes flyInDown {
|
||||
@keyframes fly-in-down {
|
||||
0% {
|
||||
opacity: 0;
|
||||
transform: translate3d(0, -1500px, 0);
|
||||
|
|
@ -108,12 +108,12 @@
|
|||
}
|
||||
}
|
||||
|
||||
.flyInDown {
|
||||
animation-name: flyInDown;
|
||||
.fly-in-down {
|
||||
animation-name: fly-in-down;
|
||||
transition-timing-function: cubic-bezier(0.215, 0.61, 0.355, 1);
|
||||
}
|
||||
|
||||
@keyframes flyInLeft {
|
||||
@keyframes fly-in-left {
|
||||
0% {
|
||||
opacity: 0;
|
||||
transform: translate3d(1500px, 0, 0);
|
||||
|
|
@ -133,12 +133,12 @@
|
|||
}
|
||||
}
|
||||
|
||||
.flyInLeft {
|
||||
animation-name: flyInLeft;
|
||||
.fly-in-left {
|
||||
animation-name: fly-in-left;
|
||||
transition-timing-function: cubic-bezier(0.215, 0.61, 0.355, 1);
|
||||
}
|
||||
|
||||
@keyframes flyInRight {
|
||||
@keyframes fly-in-right {
|
||||
0% {
|
||||
opacity: 0;
|
||||
transform: translate3d(-1500px, 0, 0);
|
||||
|
|
@ -158,12 +158,12 @@
|
|||
}
|
||||
}
|
||||
|
||||
.flyInRight {
|
||||
animation-name: flyInRight;
|
||||
.fly-in-right {
|
||||
animation-name: fly-in-right;
|
||||
transition-timing-function: cubic-bezier(0.215, 0.61, 0.355, 1);
|
||||
}
|
||||
|
||||
@keyframes flyOut {
|
||||
@keyframes fly-out {
|
||||
20% {
|
||||
transform: scale3d(0.9, 0.9, 0.9);
|
||||
}
|
||||
|
|
@ -178,12 +178,12 @@
|
|||
}
|
||||
}
|
||||
|
||||
.flyOut {
|
||||
animation-name: flyOut;
|
||||
.fly-out {
|
||||
animation-name: fly-out;
|
||||
transition-timing-function: cubic-bezier(0.215, 0.61, 0.355, 1);
|
||||
}
|
||||
|
||||
@keyframes flyOutUp {
|
||||
@keyframes fly-out-up {
|
||||
20% {
|
||||
transform: translate3d(0, 10px, 0);
|
||||
}
|
||||
|
|
@ -198,12 +198,12 @@
|
|||
}
|
||||
}
|
||||
|
||||
.flyOutUp {
|
||||
animation-name: flyOutUp;
|
||||
.fly-out-up {
|
||||
animation-name: fly-out-up;
|
||||
transition-timing-function: cubic-bezier(0.215, 0.61, 0.355, 1);
|
||||
}
|
||||
|
||||
@keyframes flyOutDown {
|
||||
@keyframes fly-out-down {
|
||||
20% {
|
||||
transform: translate3d(0, -10px, 0);
|
||||
}
|
||||
|
|
@ -218,12 +218,12 @@
|
|||
}
|
||||
}
|
||||
|
||||
.flyOutDown {
|
||||
animation-name: flyOutDown;
|
||||
.fly-out-down {
|
||||
animation-name: fly-out-down;
|
||||
transition-timing-function: cubic-bezier(0.215, 0.61, 0.355, 1);
|
||||
}
|
||||
|
||||
@keyframes flyOutLeft {
|
||||
@keyframes fly-out-left {
|
||||
20% {
|
||||
opacity: 1;
|
||||
transform: translate3d(-20px, 0, 0);
|
||||
|
|
@ -234,12 +234,12 @@
|
|||
}
|
||||
}
|
||||
|
||||
.flyOutLeft {
|
||||
animation-name: flyOutLeft;
|
||||
.fly-out-left {
|
||||
animation-name: fly-out-left;
|
||||
transition-timing-function: cubic-bezier(0.215, 0.61, 0.355, 1);
|
||||
}
|
||||
|
||||
@keyframes flyOutRight {
|
||||
@keyframes fly-out-right {
|
||||
20% {
|
||||
opacity: 1;
|
||||
transform: translate3d(20px, 0, 0);
|
||||
|
|
@ -250,12 +250,12 @@
|
|||
}
|
||||
}
|
||||
|
||||
.flyOutRight {
|
||||
animation-name: flyOutRight;
|
||||
.fly-out-right {
|
||||
animation-name: fly-out-right;
|
||||
transition-timing-function: cubic-bezier(0.215, 0.61, 0.355, 1);
|
||||
}
|
||||
|
||||
@keyframes browseIn {
|
||||
@keyframes browse-in {
|
||||
0% {
|
||||
transform: scale(0.8) translateZ(0px);
|
||||
z-index: -1;
|
||||
|
|
@ -276,11 +276,11 @@
|
|||
}
|
||||
}
|
||||
|
||||
.browseIn {
|
||||
animation-name: browseIn;
|
||||
.browse-in {
|
||||
animation-name: browse-in;
|
||||
}
|
||||
|
||||
@keyframes browseOutLeft {
|
||||
@keyframes browse-out-left {
|
||||
0% {
|
||||
z-index: 999;
|
||||
transform: translateX(0%) rotateY(0deg) rotateX(0deg);
|
||||
|
|
@ -299,12 +299,12 @@
|
|||
}
|
||||
}
|
||||
|
||||
.browseOut,
|
||||
.browseOutLeft {
|
||||
animation-name: browseOutLeft;
|
||||
.browse-out,
|
||||
.browse-out-left {
|
||||
animation-name: browse-out-left;
|
||||
}
|
||||
|
||||
@keyframes browseOutRight {
|
||||
@keyframes browse-out-right {
|
||||
0% {
|
||||
z-index: 999;
|
||||
transform: translateX(0%) rotateY(0deg) rotateX(0deg);
|
||||
|
|
@ -323,8 +323,8 @@
|
|||
}
|
||||
}
|
||||
|
||||
.browseOutRight {
|
||||
animation-name: browseOutRight;
|
||||
.browse-out-right {
|
||||
animation-name: browse-out-right;
|
||||
}
|
||||
|
||||
@keyframes jiggle {
|
||||
|
|
|
|||
|
|
@ -1,8 +1,9 @@
|
|||
// animations
|
||||
|
||||
.animated {
|
||||
.animation {
|
||||
animation-duration: 1s;
|
||||
animation-fill-mode: both;
|
||||
padding: auto;
|
||||
&.infinite {
|
||||
animation-iteration-count: infinite;
|
||||
}
|
||||
|
|
@ -36,13 +37,13 @@
|
|||
}
|
||||
|
||||
@media (prefers-reduced-motion) {
|
||||
.animated {
|
||||
.animation {
|
||||
transition: none !important;
|
||||
animation: unset !important;
|
||||
}
|
||||
}
|
||||
|
||||
@keyframes fadeIn {
|
||||
@keyframes fade-in {
|
||||
from {
|
||||
opacity: 0;
|
||||
}
|
||||
|
|
@ -52,11 +53,11 @@
|
|||
}
|
||||
}
|
||||
|
||||
.fadeIn {
|
||||
animation-name: fadeIn;
|
||||
.fade-in {
|
||||
animation-name: fade-in;
|
||||
}
|
||||
|
||||
@keyframes fadeInDown {
|
||||
@keyframes fade-in-down {
|
||||
from {
|
||||
opacity: 0;
|
||||
transform: translate3d(0, -100%, 0);
|
||||
|
|
@ -68,11 +69,11 @@
|
|||
}
|
||||
}
|
||||
|
||||
.fadeInDown {
|
||||
animation-name: fadeInDown;
|
||||
.fade-in-down {
|
||||
animation-name: fade-in-down;
|
||||
}
|
||||
|
||||
@keyframes fadeInLeft {
|
||||
@keyframes fade-in-left {
|
||||
from {
|
||||
opacity: 0;
|
||||
transform: translate3d(-100%, 0, 0);
|
||||
|
|
@ -84,11 +85,11 @@
|
|||
}
|
||||
}
|
||||
|
||||
.fadeInLeft {
|
||||
animation-name: fadeInLeft;
|
||||
.fade-in-left {
|
||||
animation-name: fade-in-left;
|
||||
}
|
||||
|
||||
@keyframes fadeInRight {
|
||||
@keyframes fade-in-right {
|
||||
from {
|
||||
opacity: 0;
|
||||
transform: translate3d(100%, 0, 0);
|
||||
|
|
@ -100,11 +101,11 @@
|
|||
}
|
||||
}
|
||||
|
||||
.fadeInRight {
|
||||
animation-name: fadeInRight;
|
||||
.fade-in-right {
|
||||
animation-name: fade-in-right;
|
||||
}
|
||||
|
||||
@keyframes fadeInUp {
|
||||
@keyframes fade-in-up {
|
||||
from {
|
||||
opacity: 0;
|
||||
transform: translate3d(0, 100%, 0);
|
||||
|
|
@ -116,11 +117,11 @@
|
|||
}
|
||||
}
|
||||
|
||||
.fadeInUp {
|
||||
animation-name: fadeInUp;
|
||||
.fade-in-up {
|
||||
animation-name: fade-in-up;
|
||||
}
|
||||
|
||||
@keyframes fadeOut {
|
||||
@keyframes fade-out {
|
||||
from {
|
||||
opacity: 1;
|
||||
}
|
||||
|
|
@ -130,11 +131,11 @@
|
|||
}
|
||||
}
|
||||
|
||||
.fadeOut {
|
||||
animation-name: fadeOut;
|
||||
.fade-out {
|
||||
animation-name: fade-out;
|
||||
}
|
||||
|
||||
@keyframes fadeOutDown {
|
||||
@keyframes fade-out-down {
|
||||
from {
|
||||
opacity: 1;
|
||||
}
|
||||
|
|
@ -145,11 +146,11 @@
|
|||
}
|
||||
}
|
||||
|
||||
.fadeOutDown {
|
||||
animation-name: fadeOutDown;
|
||||
.fade-out-down {
|
||||
animation-name: fade-out-down;
|
||||
}
|
||||
|
||||
@keyframes fadeOutLeft {
|
||||
@keyframes fade-out-left {
|
||||
from {
|
||||
opacity: 1;
|
||||
}
|
||||
|
|
@ -160,11 +161,11 @@
|
|||
}
|
||||
}
|
||||
|
||||
.fadeOutLeft {
|
||||
animation-name: fadeOutLeft;
|
||||
.fade-out-left {
|
||||
animation-name: fade-out-left;
|
||||
}
|
||||
|
||||
@keyframes fadeOutRight {
|
||||
@keyframes fade-out-right {
|
||||
from {
|
||||
opacity: 1;
|
||||
}
|
||||
|
|
@ -175,11 +176,11 @@
|
|||
}
|
||||
}
|
||||
|
||||
.fadeOutRight {
|
||||
animation-name: fadeOutRight;
|
||||
.fade-out-right {
|
||||
animation-name: fade-out-right;
|
||||
}
|
||||
|
||||
@keyframes fadeOutUp {
|
||||
@keyframes fade-out-up {
|
||||
from {
|
||||
opacity: 1;
|
||||
}
|
||||
|
|
@ -190,11 +191,11 @@
|
|||
}
|
||||
}
|
||||
|
||||
.fadeOutUp {
|
||||
animation-name: fadeOutUp;
|
||||
.fade-out-up {
|
||||
animation-name: fade-out-up;
|
||||
}
|
||||
|
||||
@keyframes slideInDown {
|
||||
@keyframes slide-in-down {
|
||||
from {
|
||||
visibility: visible;
|
||||
transform: translate3d(0, -100%, 0);
|
||||
|
|
@ -205,11 +206,11 @@
|
|||
}
|
||||
}
|
||||
|
||||
.slideInDown {
|
||||
animation-name: slideInDown;
|
||||
.slide-in-down {
|
||||
animation-name: slide-in-down;
|
||||
}
|
||||
|
||||
@keyframes slideInLeft {
|
||||
@keyframes slide-in-left {
|
||||
from {
|
||||
visibility: visible;
|
||||
transform: translate3d(-100%, 0, 0);
|
||||
|
|
@ -220,11 +221,11 @@
|
|||
}
|
||||
}
|
||||
|
||||
.slideInLeft {
|
||||
animation-name: slideInLeft;
|
||||
.slide-in-left {
|
||||
animation-name: slide-in-left;
|
||||
}
|
||||
|
||||
@keyframes slideInRight {
|
||||
@keyframes slide-in-right {
|
||||
from {
|
||||
visibility: visible;
|
||||
transform: translate3d(100%, 0, 0);
|
||||
|
|
@ -235,11 +236,11 @@
|
|||
}
|
||||
}
|
||||
|
||||
.slideInRight {
|
||||
animation-name: slideInRight;
|
||||
.slide-in-right {
|
||||
animation-name: slide-in-right;
|
||||
}
|
||||
|
||||
@keyframes slideInUp {
|
||||
@keyframes slide-in-up {
|
||||
from {
|
||||
visibility: visible;
|
||||
transform: translate3d(0, 100%, 0);
|
||||
|
|
@ -250,11 +251,11 @@
|
|||
}
|
||||
}
|
||||
|
||||
.slideInUp {
|
||||
animation-name: slideInUp;
|
||||
.slide-in-up {
|
||||
animation-name: slide-in-up;
|
||||
}
|
||||
|
||||
@keyframes slideOutDown {
|
||||
@keyframes slide-out-down {
|
||||
from {
|
||||
transform: translate3d(0, 0, 0);
|
||||
}
|
||||
|
|
@ -265,11 +266,11 @@
|
|||
}
|
||||
}
|
||||
|
||||
.slideOutDown {
|
||||
animation-name: slideOutDown;
|
||||
.slide-out-down {
|
||||
animation-name: slide-out-down;
|
||||
}
|
||||
|
||||
@keyframes slideOutLeft {
|
||||
@keyframes slide-out-left {
|
||||
from {
|
||||
transform: translate3d(0, 0, 0);
|
||||
}
|
||||
|
|
@ -280,11 +281,11 @@
|
|||
}
|
||||
}
|
||||
|
||||
.slideOutLeft {
|
||||
animation-name: slideOutLeft;
|
||||
.slide-out-left {
|
||||
animation-name: slide-out-left;
|
||||
}
|
||||
|
||||
@keyframes slideOutRight {
|
||||
@keyframes slide-out-right {
|
||||
from {
|
||||
transform: translate3d(0, 0, 0);
|
||||
}
|
||||
|
|
@ -295,11 +296,11 @@
|
|||
}
|
||||
}
|
||||
|
||||
.slideOutRight {
|
||||
animation-name: slideOutRight;
|
||||
.slide-out-right {
|
||||
animation-name: slide-out-right;
|
||||
}
|
||||
|
||||
@keyframes slideOutUp {
|
||||
@keyframes slide-out-up {
|
||||
from {
|
||||
transform: translate3d(0, 0, 0);
|
||||
}
|
||||
|
|
@ -310,11 +311,67 @@
|
|||
}
|
||||
}
|
||||
|
||||
.slideOutUp {
|
||||
animation-name: slideOutUp;
|
||||
.slide-out-up {
|
||||
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 {
|
||||
opacity: 0;
|
||||
transform: scale3d(0.3, 0.3, 0.3);
|
||||
|
|
@ -325,11 +382,11 @@
|
|||
}
|
||||
}
|
||||
|
||||
.zoomIn {
|
||||
animation-name: zoomIn;
|
||||
.zoom-in {
|
||||
animation-name: zoom-in;
|
||||
}
|
||||
|
||||
@keyframes zoomOut {
|
||||
@keyframes zoom-out {
|
||||
from {
|
||||
opacity: 1;
|
||||
}
|
||||
|
|
@ -344,8 +401,8 @@
|
|||
}
|
||||
}
|
||||
|
||||
.zoomOut {
|
||||
animation-name: zoomOut;
|
||||
.zoom-out {
|
||||
animation-name: zoom-out;
|
||||
}
|
||||
|
||||
@keyframes tada {
|
||||
|
|
|
|||
|
|
@ -1,12 +1,12 @@
|
|||
// Badge
|
||||
.badge-dot {
|
||||
position: absolute;
|
||||
border-radius: 4.5px;
|
||||
height: 9px;
|
||||
border-radius: $badge-dot-border-radius;
|
||||
height: $badge-dot-height;
|
||||
min-width: 0;
|
||||
padding: 0;
|
||||
width: 9px;
|
||||
margin-left: -3px;
|
||||
width: $badge-dot-width;
|
||||
margin-left: $badge-dot-ml;
|
||||
&:empty {
|
||||
display: inline-block;
|
||||
}
|
||||
|
|
@ -14,6 +14,6 @@
|
|||
|
||||
.badge-notification {
|
||||
position: absolute;
|
||||
margin-top: -5px;
|
||||
margin-left: -5px;
|
||||
}
|
||||
margin-top: $badge-notification-mt;
|
||||
margin-left: $badge-notification-ml;
|
||||
}
|
||||
|
|
|
|||
24
src/scss/free/_breadcrumb.scss
Normal file
24
src/scss/free/_breadcrumb.scss
Normal 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);
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
|
@ -2,9 +2,8 @@
|
|||
|
||||
.btn-group {
|
||||
box-shadow: $btn-box-shadow;
|
||||
border-radius: calc(0.25rem - 1px);
|
||||
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;
|
||||
border-radius: $btn-group-border-radius;
|
||||
transition: $btn-group-transition;
|
||||
|
||||
&:hover {
|
||||
box-shadow: $btn-hover-box-shadow;
|
||||
|
|
|
|||
|
|
@ -2,17 +2,17 @@
|
|||
|
||||
.btn {
|
||||
font-family: $btn-font-family;
|
||||
line-height: 1.5;
|
||||
line-height: $btn-line-height;
|
||||
text-transform: uppercase;
|
||||
vertical-align: bottom;
|
||||
padding-top: 10px;
|
||||
padding-bottom: 8px;
|
||||
padding-top: $btn-padding-top;
|
||||
padding-bottom: $btn-padding-bottom;
|
||||
border: 0;
|
||||
box-shadow: $btn-box-shadow;
|
||||
font-size: 12px;
|
||||
padding-left: 24px;
|
||||
padding-right: 24px;
|
||||
font-weight: 500;
|
||||
font-size: $btn-font-size;
|
||||
padding-left: $btn-padding-left;
|
||||
padding-right: $btn-padding-right;
|
||||
font-weight: $btn-font-weight;
|
||||
|
||||
&:hover {
|
||||
box-shadow: $btn-hover-box-shadow;
|
||||
|
|
@ -43,13 +43,13 @@
|
|||
// Buttons outline
|
||||
|
||||
[class*='btn-outline-'] {
|
||||
border-width: 2px;
|
||||
border-width: $btn-border-width;
|
||||
border-style: solid;
|
||||
box-shadow: none;
|
||||
padding-top: 8px;
|
||||
padding-bottom: 6px;
|
||||
padding-left: 22px;
|
||||
padding-right: 22px;
|
||||
padding-top: $btn-outline-padding-top;
|
||||
padding-bottom: $btn-outline-padding-bottom;
|
||||
padding-left: $btn-outline-padding-left;
|
||||
padding-right: $btn-outline-padding-right;
|
||||
|
||||
&:hover {
|
||||
box-shadow: none;
|
||||
|
|
@ -78,17 +78,17 @@
|
|||
}
|
||||
|
||||
&.btn-sm {
|
||||
padding-top: 4px;
|
||||
padding-bottom: 3px;
|
||||
padding-right: 14px;
|
||||
padding-left: 14px;
|
||||
padding-top: $btn-outline-padding-top-sm;
|
||||
padding-bottom: $btn-outline-padding-bottom-sm;
|
||||
padding-right: $btn-outline-padding-right-sm;
|
||||
padding-left: $btn-outline-padding-left-sm;
|
||||
}
|
||||
|
||||
&.btn-lg {
|
||||
padding-top: 10px;
|
||||
padding-bottom: 9px;
|
||||
padding-right: 25px;
|
||||
padding-left: 25px;
|
||||
padding-top: $btn-outline-padding-top-lg;
|
||||
padding-bottom: $btn-outline-padding-bottom-lg;
|
||||
padding-right: $btn-outline-padding-right-lg;
|
||||
padding-left: $btn-outline-padding-left-lg;
|
||||
}
|
||||
}
|
||||
|
||||
|
|
@ -112,23 +112,22 @@
|
|||
|
||||
.btn-lg {
|
||||
// @include button-size($btn-padding-y-lg, $btn-padding-x-lg, $btn-font-size-lg, $btn-border-radius-lg);
|
||||
|
||||
line-height: 1.6;
|
||||
padding-top: 12px;
|
||||
padding-bottom: 11px;
|
||||
font-size: 14px;
|
||||
padding-left: 27px;
|
||||
padding-right: 27px;
|
||||
line-height: $btn-line-height-lg;
|
||||
font-size: $btn-font-size-lg;
|
||||
padding-top: $btn-padding-top-lg;
|
||||
padding-bottom: $btn-padding-bottom-lg;
|
||||
padding-right: $btn-padding-right-lg;
|
||||
padding-left: $btn-padding-left-lg;
|
||||
}
|
||||
|
||||
.btn-sm {
|
||||
// @include button-size($btn-padding-y-sm, $btn-padding-x-sm, $btn-font-size-sm, $btn-border-radius-sm);
|
||||
line-height: 1.5;
|
||||
font-size: 12px;
|
||||
padding-top: 6px;
|
||||
padding-bottom: 5px;
|
||||
padding-right: 16px;
|
||||
padding-left: 16px;
|
||||
line-height: $btn-line-height-sm;
|
||||
font-size: $btn-font-size-sm;
|
||||
padding-top: $btn-padding-top-sm;
|
||||
padding-bottom: $btn-padding-bottom-sm;
|
||||
padding-right: $btn-padding-right-sm;
|
||||
padding-left: $btn-padding-left-sm;
|
||||
}
|
||||
|
||||
// Link buttons
|
||||
|
|
@ -142,24 +141,24 @@
|
|||
&:hover {
|
||||
box-shadow: none;
|
||||
text-decoration: none;
|
||||
background-color: #f5f5f5;
|
||||
background-color: $btn-link-bgc;
|
||||
}
|
||||
|
||||
&:focus,
|
||||
&.focus {
|
||||
box-shadow: none;
|
||||
text-decoration: none;
|
||||
background-color: #f5f5f5;
|
||||
background-color: $btn-link-bgc;
|
||||
}
|
||||
|
||||
&:active,
|
||||
&.active {
|
||||
box-shadow: none;
|
||||
background-color: #f5f5f5;
|
||||
background-color: $btn-link-bgc;
|
||||
|
||||
&:focus {
|
||||
box-shadow: none;
|
||||
background-color: #f5f5f5;
|
||||
background-color: $btn-link-bgc;
|
||||
}
|
||||
}
|
||||
|
||||
|
|
@ -171,5 +170,40 @@
|
|||
}
|
||||
|
||||
.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
9
src/scss/free/_footer.scss
Normal 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
53
src/scss/free/_images.scss
Normal 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;
|
||||
}
|
||||
}
|
||||
|
|
@ -1,5 +1,68 @@
|
|||
// Modal
|
||||
.modal-content {
|
||||
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;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
|
|
|||
|
|
@ -1,8 +1,8 @@
|
|||
// Navbar
|
||||
|
||||
.navbar {
|
||||
// box-shadow: $box-shadow-2;
|
||||
box-shadow: $box-shadow-3;
|
||||
padding-top: 0.5625rem;
|
||||
}
|
||||
|
||||
.navbar-toggler {
|
||||
|
|
|
|||
|
|
@ -2,6 +2,7 @@
|
|||
position: relative;
|
||||
overflow: hidden;
|
||||
display: inline-block;
|
||||
vertical-align: bottom;
|
||||
}
|
||||
|
||||
.ripple-surface-unbound {
|
||||
|
|
|
|||
|
|
@ -5,7 +5,7 @@
|
|||
// Grays
|
||||
|
||||
$white: #fff;
|
||||
$gray-50: #eff0f4;
|
||||
$gray-50: #fbfbfb;
|
||||
$gray-100: #f5f5f5;
|
||||
$gray-200: #eeeeee;
|
||||
$gray-300: #e0e0e0;
|
||||
|
|
@ -289,7 +289,7 @@ $success: #00b74a;
|
|||
$info: #39c0ed;
|
||||
$warning: #ffa900;
|
||||
$danger: #f93154;
|
||||
$light: $gray-100;
|
||||
$light: $gray-50;
|
||||
$dark: $gray-900;
|
||||
|
||||
$theme-colors: (
|
||||
|
|
@ -301,6 +301,8 @@ $theme-colors: (
|
|||
'danger': $danger,
|
||||
'light': $light,
|
||||
'dark': $dark,
|
||||
'white': $white,
|
||||
'black': $black,
|
||||
);
|
||||
|
||||
$note: () !default;
|
||||
|
|
@ -342,13 +344,6 @@ $body-color: $gray-800;
|
|||
|
||||
// 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-1: 0 2px 10px 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-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-2-strong: 0 4px 10px 0 rgba(0, 0, 0, 0.25), 0 4px 20px 0 rgba(0, 0, 0, 0.25);
|
||||
$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-4-strong: 0 8px 20px 4px rgba(0, 0, 0, 0.25), 0 8px 40px 4px rgba(0, 0, 0, 0.25);
|
||||
$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-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: 0px 4px 8px 0px rgba(0, 0, 0, 0.25), 0px 5px 15px 2px rgba(0, 0, 0, 0.2);
|
||||
$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: 0px 6px 14px 0px rgba(0, 0, 0, 0.25), 0px 10px 30px 4px rgba(0, 0, 0, 0.2);
|
||||
$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: (
|
||||
'0': $box-shadow-0,
|
||||
|
|
@ -386,12 +381,64 @@ $font-family-base: var(--mdb-font-roboto);
|
|||
|
||||
$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
|
||||
|
||||
$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-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-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;
|
||||
|
|
|
|||
|
|
@ -1,16 +1,103 @@
|
|||
//
|
||||
// Check/radio
|
||||
// Material styles for check / radio / switch
|
||||
//
|
||||
|
||||
.form-check {
|
||||
.form-check-input {
|
||||
margin-left: 1.79rem * -1;
|
||||
|
||||
&[type='radio'] {
|
||||
margin-left: 1.85rem * -1;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.form-check-input {
|
||||
border: solid 2px;
|
||||
border-color: rgba(0, 0, 0, 0.6);
|
||||
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'] {
|
||||
border-radius: 2px;
|
||||
|
||||
&:checked {
|
||||
background-image: none;
|
||||
background-color: $primary;
|
||||
|
||||
&:after {
|
||||
display: block;
|
||||
transform: rotate(45deg);
|
||||
border-width: 2px;
|
||||
border-color: #fff;
|
||||
width: 6px;
|
||||
height: 13px;
|
||||
border-style: solid;
|
||||
border-top: 0;
|
||||
border-left: 0;
|
||||
margin-left: 4px;
|
||||
margin-top: -1px;
|
||||
}
|
||||
|
||||
&:focus {
|
||||
background-color: $primary;
|
||||
}
|
||||
|
|
@ -18,54 +105,19 @@
|
|||
}
|
||||
|
||||
&[type='radio'] {
|
||||
border-radius: 50%;
|
||||
width: 20px;
|
||||
height: 20px;
|
||||
|
||||
&:before {
|
||||
box-shadow: 1px 1px 0px 13px rgba(0, 0, 0, 0.6);
|
||||
}
|
||||
|
||||
&:checked {
|
||||
background-image: none;
|
||||
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;
|
||||
|
||||
&:before {
|
||||
content: '';
|
||||
transform: rotate(45deg);
|
||||
position: absolute;
|
||||
margin-left: 5px;
|
||||
width: 6px;
|
||||
height: 13px;
|
||||
border-width: 2px;
|
||||
border-style: solid;
|
||||
border-top: 0;
|
||||
border-left: 0;
|
||||
border-color: #fff;
|
||||
z-index: 10000;
|
||||
transition: border-color 0.2s, background-color 0.2s;
|
||||
}
|
||||
}
|
||||
|
||||
&[type='radio'] {
|
||||
background-image: none;
|
||||
|
||||
&:before {
|
||||
content: '';
|
||||
position: absolute;
|
||||
&:after {
|
||||
border-radius: 50%;
|
||||
width: 10px;
|
||||
height: 10px;
|
||||
|
|
@ -75,6 +127,14 @@
|
|||
margin-left: 3px;
|
||||
transition: border-color;
|
||||
}
|
||||
|
||||
&:focus {
|
||||
background-color: #fff;
|
||||
|
||||
&:before {
|
||||
box-shadow: 1px 1px 0px 13px $primary;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
|
@ -86,6 +146,7 @@
|
|||
}
|
||||
|
||||
.form-switch {
|
||||
padding-left: 1.85rem;
|
||||
.form-check-input {
|
||||
background-image: none;
|
||||
border-width: 0px;
|
||||
|
|
@ -93,8 +154,10 @@
|
|||
width: 36px;
|
||||
height: 14px;
|
||||
background-color: rgba(0, 0, 0, 0.38);
|
||||
margin-top: 0.35rem;
|
||||
margin-right: 0.7rem;
|
||||
|
||||
&:before {
|
||||
&:after {
|
||||
content: '';
|
||||
position: absolute;
|
||||
border: none;
|
||||
|
|
@ -111,6 +174,12 @@
|
|||
|
||||
&:focus {
|
||||
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 {
|
||||
|
|
@ -118,12 +187,19 @@
|
|||
|
||||
&:focus {
|
||||
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'] {
|
||||
background-image: none;
|
||||
|
||||
&:before {
|
||||
&:after {
|
||||
content: '';
|
||||
position: absolute;
|
||||
border: none;
|
||||
|
|
|
|||
File diff suppressed because it is too large
Load Diff
|
|
@ -1,11 +1,3 @@
|
|||
//
|
||||
// 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;
|
||||
}
|
||||
|
|
|
|||
|
|
@ -7,8 +7,10 @@
|
|||
min-height: calc(1.5em + 0.33rem + 2px);
|
||||
padding-top: 0.27rem;
|
||||
padding-bottom: 0.27rem;
|
||||
transition: all 0.2s linear;
|
||||
|
||||
&:focus {
|
||||
transition: all 0.2s linear;
|
||||
border-color: $primary;
|
||||
outline: 0;
|
||||
box-shadow: inset 0 0 0 1px $primary;
|
||||
|
|
@ -54,5 +56,9 @@
|
|||
.input-group-text {
|
||||
border-left: 0;
|
||||
}
|
||||
input + .input-group-text {
|
||||
border: 0;
|
||||
border-left: 1px solid #bdbdbd;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
|
|
|||
|
|
@ -65,24 +65,19 @@
|
|||
}
|
||||
}
|
||||
|
||||
.was-validated
|
||||
.form-check
|
||||
.form-check-input[type='checkbox']:valid:checked
|
||||
+ .form-check-label:before,
|
||||
.was-validated
|
||||
.form-check
|
||||
.form-check-input[type='checkbox'].is-valid:checked
|
||||
+ .form-check-label:before {
|
||||
.was-validated .form-check-input.is-valid:checked[type='checkbox']:before {
|
||||
border-color: #fff;
|
||||
}
|
||||
.was-validated .form-check-input.is-valid:checked[type='checkbox'] {
|
||||
background-color: $success;
|
||||
border-color: $success;
|
||||
}
|
||||
|
||||
.was-validated .form-check .form-check-input[type='checkbox']:invalid + .form-check-label:before,
|
||||
.was-validated
|
||||
.form-check
|
||||
.form-check-input[type='checkbox'].is-invalid
|
||||
+ .form-check-label:before {
|
||||
background-color: $white;
|
||||
.was-validated .form-check-input.is-invalid:checked[type='checkbox']:before {
|
||||
border-color: #fff;
|
||||
}
|
||||
.was-validated .form-check-input.is-invalid:checked[type='checkbox'] {
|
||||
background-color: $danger;
|
||||
border-color: $danger;
|
||||
}
|
||||
|
||||
|
|
@ -93,12 +88,38 @@
|
|||
margin-bottom: 1rem;
|
||||
}
|
||||
|
||||
.was-validated .form-check-input:valid:checked,
|
||||
.form-check-input.is-valid:checked {
|
||||
background-color: $success;
|
||||
.was-validated .form-check-input:invalid:focus,
|
||||
.form-check-input.is-invalid:focus {
|
||||
box-shadow: none;
|
||||
}
|
||||
|
||||
.was-validated .form-check-input:invalid,
|
||||
.form-check-input.is-invalid {
|
||||
background-color: $danger;
|
||||
.was-validated .form-check-input:valid:focus,
|
||||
.form-check-input.valid:focus {
|
||||
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;
|
||||
}
|
||||
|
|
|
|||
|
|
@ -58,10 +58,10 @@
|
|||
@import './free/colors';
|
||||
@import './free/shadows';
|
||||
@import './free/flag';
|
||||
@import './free/images';
|
||||
|
||||
// MDB FORMS
|
||||
@import './free/forms/form-control';
|
||||
@import './free/forms/form-outline';
|
||||
@import './free/forms/form-select';
|
||||
@import './free/forms/form-check';
|
||||
@import './free/forms/form-file';
|
||||
|
|
@ -76,6 +76,7 @@
|
|||
@import './free/nav';
|
||||
@import './free/navbar';
|
||||
@import './free/card';
|
||||
@import './free/breadcrumb';
|
||||
@import './free/pagination';
|
||||
@import './free/badge';
|
||||
@import './free/alert';
|
||||
|
|
@ -87,3 +88,4 @@
|
|||
@import './free/scrollspy';
|
||||
@import './free/animate';
|
||||
@import './free/ripple';
|
||||
@import './free/footer';
|
||||
|
|
|
|||
Loading…
Reference in New Issue
Block a user