mirror of
https://github.com/mdbootstrap/mdb-ui-kit.git
synced 2024-11-22 09:36:55 +03:00
Release 1.0.0-beta1
This commit is contained in:
unknown
parent
4b50095a61
commit
04931d9267
355
README.md
355
README.md
|
|
@ -92,9 +92,356 @@ ___
|
|||
|
||||
___
|
||||
|
||||
### Demo
|
||||
###### Simplicity and ease of use are key features of MDB 5 UI Kit. You need only one minute to install and run it.
|
||||
# Demo
|
||||
#### Simplicity and ease of use are key features of MDB 5 UI Kit. You need only one minute to install and run it.
|
||||
|
||||
<a href="https://mdbootstrap.com/docs/standard/" alt="Bootstrap 5" rel="dofollow"><img src="https://mdbootstrap.com/img/Marketing/campaigns/demo-loaders1.gif"></a>
|
||||
### Carousel
|
||||
|
||||
<a href="https://mdbootstrap.com/docs/standard/" alt="Bootstrap 5" rel="dofollow"><img src="https://mdbootstrap.com/img/Marketing/campaigns/demo-mdb5.jpg"></a>
|
||||
<p>A slideshow component for cycling through elements—images or slides of text—like a carousel.</p>
|
||||
|
||||
<a href="https://mdbootstrap.com/docs/standard/components/carousel/" alt="Bootstrap 5" rel="dofollow">
|
||||
<p align="center">
|
||||
<img src="https://mdbootstrap.com/img/Marketing/campaigns/demo-carousel.gif">
|
||||
</p>
|
||||
</a>
|
||||
|
||||
### Buttons
|
||||
|
||||
<p>Use MDB custom button styles for actions in forms, dialogs, and more with support for multiple sizes, states, and more.</p>
|
||||
|
||||
<a href="https://mdbootstrap.com/docs/standard/components/buttons/" alt="Bootstrap 5" rel="dofollow">
|
||||
<p align="center">
|
||||
<img src="https://mdbootstrap.com/img/Marketing/campaigns/demo-buttons.gif">
|
||||
</p>
|
||||
</a>
|
||||
|
||||
<a href="https://mdbootstrap.com/docs/standard/components/buttons/" alt="Bootstrap 5" rel="dofollow">
|
||||
<p align="center">
|
||||
<img src="https://mdbootstrap.com/img/Marketing/campaigns/demo-social-buttons.png">
|
||||
</p>
|
||||
</a>
|
||||
|
||||
<a href="https://mdbootstrap.com/docs/standard/components/buttons/" alt="Bootstrap 5" rel="dofollow">
|
||||
<p align="center">
|
||||
<img src="https://mdbootstrap.com/img/Marketing/campaigns/demo-buttons2.png">
|
||||
</p>
|
||||
</a>
|
||||
|
||||
<a href="https://mdbootstrap.com/docs/standard/components/buttons/" alt="Bootstrap 5" rel="dofollow">
|
||||
<p align="center">
|
||||
<img src="https://mdbootstrap.com/img/Marketing/campaigns/demo-buttons-outline.gif">
|
||||
</p>
|
||||
</a>
|
||||
|
||||
|
||||
### Spinners
|
||||
|
||||
<p>Indicate the loading state of a component or page with MDB spinners, built entirely with HTML, CSS, and no JavaScript.</p>
|
||||
|
||||
<a href="https://mdbootstrap.com/docs/standard/components/spinners/" alt="Bootstrap 5" rel="dofollow">
|
||||
<p align="center">
|
||||
<img src="https://mdbootstrap.com/img/Marketing/campaigns/demo-loader.gif">
|
||||
</p>
|
||||
</a>
|
||||
|
||||
<a href="https://mdbootstrap.com/docs/standard/components/spinners/" alt="Bootstrap 5" rel="dofollow">
|
||||
<p align="center">
|
||||
<img src="https://mdbootstrap.com/img/Marketing/campaigns/demo-color-spinners.gif">
|
||||
</p>
|
||||
</a>
|
||||
|
||||
### Cards
|
||||
|
||||
<p>A card is a flexible and extensible content container. It includes options for headers and footers, a wide variety of content, contextual background colors, and powerful display options.</p>
|
||||
|
||||
<a href="https://mdbootstrap.com/docs/standard/components/cards/" alt="Bootstrap 5" rel="dofollow">
|
||||
<p align="center">
|
||||
<img src="https://mdbootstrap.com/img/Marketing/campaigns/demo-cards.png">
|
||||
</p>
|
||||
</a>
|
||||
|
||||
### Validation
|
||||
|
||||
<p>Provide valuable, actionable feedback to your users with HTML5 form validation, via browser default behaviors or custom styles and JavaScript.</p>
|
||||
|
||||
<a href="https://mdbootstrap.com/docs/standard/forms/validation/" alt="Bootstrap 5" rel="dofollow">
|
||||
<p align="center">
|
||||
<img src="https://mdbootstrap.com/img/Marketing/campaigns/demo-validation.gif">
|
||||
</p>
|
||||
</a>
|
||||
<a href="https://mdbootstrap.com/docs/standard/forms/validation/" alt="Bootstrap 5" rel="dofollow">
|
||||
<p align="center">
|
||||
<img src="https://mdbootstrap.com/img/Marketing/campaigns/demo-validation2.gif">
|
||||
</p>
|
||||
</a>
|
||||
<a href="https://mdbootstrap.com/docs/standard/forms/validation/" alt="Bootstrap 5" rel="dofollow">
|
||||
<p align="center">
|
||||
<img src="https://mdbootstrap.com/img/Marketing/campaigns/demo-validation3.gif">
|
||||
</p>
|
||||
</a>
|
||||
|
||||
### Forms
|
||||
|
||||
<p>Examples and usage guidelines for form control styles, layout options, and custom components for creating a wide variety of forms.</p>
|
||||
|
||||
<a href="https://mdbootstrap.com/docs/standard/forms/overview/" alt="Bootstrap 5" rel="dofollow">
|
||||
<p align="center">
|
||||
<img src="https://mdbootstrap.com/img/Marketing/campaigns/demo-forms2.gif">
|
||||
</p>
|
||||
</a>
|
||||
<a href="https://mdbootstrap.com/docs/standard/forms/overview/" alt="Bootstrap 5" rel="dofollow">
|
||||
<p align="center">
|
||||
<img src="https://mdbootstrap.com/img/Marketing/campaigns/demo-forms3.gif">
|
||||
</p>
|
||||
</a>
|
||||
|
||||
|
||||
### Footer
|
||||
|
||||
<p>A footer is an additional navigation component. It can hold links, buttons, company info, copyrights, forms, and many other elements.</p>
|
||||
|
||||
<a href="https://mdbootstrap.com/docs/standard/navigation/footer/" alt="Bootstrap 5" rel="dofollow">
|
||||
<p align="center">
|
||||
<img src="https://mdbootstrap.com/img/Marketing/campaigns/demo-footer.png">
|
||||
</p>
|
||||
</a>
|
||||
|
||||
### Modal
|
||||
|
||||
<p>Use MDB modal plugin to add dialogs to your site for lightboxes, user notifications, or completely custom content.</p>
|
||||
|
||||
<a href="https://mdbootstrap.com/docs/standard/components/modal/" alt="Bootstrap 5" rel="dofollow">
|
||||
<p align="center">
|
||||
<img src="https://mdbootstrap.com/img/Marketing/campaigns/demo-modal.gif">
|
||||
</p>
|
||||
</a>
|
||||
|
||||
### Hover
|
||||
|
||||
<p>MDB hover effect appears when the user positions the computer cursor over an element without activating it. Hover effects make a website more interactive.</p>
|
||||
|
||||
<a href="https://mdbootstrap.com/docs/standard/content-styles/hover-effects/" alt="Bootstrap 5" rel="dofollow">
|
||||
<p align="center">
|
||||
<img src="https://mdbootstrap.com/img/Marketing/campaigns/demo-hover.gif">
|
||||
</p>
|
||||
</a>
|
||||
|
||||
<a href="https://mdbootstrap.com/docs/standard/content-styles/hover-effects/" alt="Bootstrap 5" rel="dofollow">
|
||||
<p align="center">
|
||||
<img src="https://mdbootstrap.com/img/Marketing/campaigns/demo-hover2.png">
|
||||
</p>
|
||||
</a>
|
||||
|
||||
### Tabs
|
||||
|
||||
<p>Tabs are quasi-navigation components which can highly improve website clarity and increase user experience.</p>
|
||||
|
||||
<a href="https://mdbootstrap.com/docs/standard/navigation/tabs/" alt="Bootstrap 5" rel="dofollow">
|
||||
<p align="center">
|
||||
<img src="https://mdbootstrap.com/img/Marketing/campaigns/demo-tabs.gif">
|
||||
</p>
|
||||
</a>
|
||||
|
||||
<a href="https://mdbootstrap.com/docs/standard/navigation/tabs/" alt="Bootstrap 5" rel="dofollow">
|
||||
<p align="center">
|
||||
<img src="https://mdbootstrap.com/img/Marketing/campaigns/demo-tabs2.gif">
|
||||
</p>
|
||||
</a>
|
||||
|
||||
### Notes
|
||||
|
||||
<p>Notes are small components very helpful in inserting an additional piece of information.</p>
|
||||
|
||||
<a href="https://mdbootstrap.com/docs/standard/content-styles/typography/" alt="Bootstrap 5" rel="dofollow">
|
||||
<p align="center">
|
||||
<img src="https://mdbootstrap.com/img/Marketing/campaigns/demo-alerts.png">
|
||||
</p>
|
||||
</a>
|
||||
|
||||
### ScrollSpy
|
||||
|
||||
<p>Automatically update Bootstrap navigation or list group components based on scroll position to indicate which link is currently active in the viewport.</p>
|
||||
|
||||
<a href="https://mdbootstrap.com/docs/standard/navigation/scrollspy/" alt="Bootstrap 5" rel="dofollow">
|
||||
<p align="center">
|
||||
<img src="https://mdbootstrap.com/img/Marketing/campaigns/demo-scrollspy.gif">
|
||||
</p>
|
||||
</a>
|
||||
|
||||
-----------------------------
|
||||
|
||||
# MDB 5 Templates
|
||||
|
||||
<p>All the templates were created with MDB 5 UI KIT (Material Design for Bootstrap 5).</p>
|
||||
|
||||
<p>MDB is a free (MIT license) library, that provides extra features and significantly extends Bootstrap's capabilities.</p>
|
||||
|
||||
<table>
|
||||
<tbody>
|
||||
<tr>
|
||||
<td>
|
||||
<a href="https://mdbgo.dev/ascensus/MDB5-templates/ecommerce.html" alt="Bootstrap 5" rel="dofollow">
|
||||
<img src="https://mdbootstrap.com/wp-content/themes/mdbootstrap4/content/en/_mdb5/standard/general/templates/assets/ecommerce.jpg">
|
||||
</a>
|
||||
<p align="center"><b>Ecommerce</b></p>
|
||||
<td>
|
||||
<a href="https://mdbgo.dev/ascensus/MDB5-templates/full-carousel-cover.html" alt="Bootstrap 5" rel="dofollow">
|
||||
<img src="https://mdbootstrap.com/wp-content/themes/mdbootstrap4/content/en/_mdb5/standard/general/templates/assets/full-carousel-cover.jpg">
|
||||
</a>
|
||||
<p align="center"><b>Carousel Full Cover</b></p>
|
||||
</tr>
|
||||
</tbody>
|
||||
|
||||
|
||||
<tbody>
|
||||
<tr>
|
||||
<td>
|
||||
<a href="https://mdbgo.dev/ascensus/MDB5-templates/full-image-cover.html" alt="Bootstrap 5" rel="dofollow">
|
||||
<img src="https://mdbootstrap.com/wp-content/themes/mdbootstrap4/content/en/_mdb5/standard/general/templates/assets/full-image-cover.jpg">
|
||||
</a>
|
||||
<p align="center"><b>Image Full Cover</b></p>
|
||||
<td>
|
||||
<a href="https://mdbgo.dev/ascensus/MDB5-templates/portfolio.html" alt="Bootstrap 5" rel="dofollow">
|
||||
<img src="https://mdbootstrap.com/wp-content/themes/mdbootstrap4/content/en/_mdb5/standard/general/templates/assets/portfolio.jpg">
|
||||
</a>
|
||||
<p align="center"><b>Portfolio</b></p>
|
||||
</tr>
|
||||
</tbody>
|
||||
|
||||
|
||||
<tbody>
|
||||
<tr>
|
||||
<td>
|
||||
<a href="https://mdbgo.dev/ascensus/MDB5-templates/post.html" alt="Bootstrap 5" rel="dofollow">
|
||||
<img src="https://mdbootstrap.com/wp-content/themes/mdbootstrap4/content/en/_mdb5/standard/general/templates/assets/post.jpg">
|
||||
</a>
|
||||
<p align="center"><b>Post</b></p>
|
||||
<td>
|
||||
<a href="https://mdbgo.dev/ascensus/MDB5-templates/pricing.html" alt="Bootstrap 5" rel="dofollow">
|
||||
<img src="https://mdbootstrap.com/wp-content/themes/mdbootstrap4/content/en/_mdb5/standard/general/templates/assets/pricing.jpg">
|
||||
</a>
|
||||
<p align="center"><b>Pricing</b></p>
|
||||
</tr>
|
||||
</tbody>
|
||||
|
||||
|
||||
<tbody>
|
||||
<tr>
|
||||
<td>
|
||||
<a href="https://mdbgo.dev/ascensus/MDB5-templates/full-video-cover.html" alt="Bootstrap 5" rel="dofollow">
|
||||
<img src="https://mdbootstrap.com/wp-content/themes/mdbootstrap4/content/en/_mdb5/standard/general/templates/assets/full-video-cover.jpg">
|
||||
</a>
|
||||
<p align="center"><b>Video Full Cover</b></p>
|
||||
<td>
|
||||
<a href="https://mdbgo.dev/ascensus/MDB5-templates/half-carousel-cover.html" alt="Bootstrap 5" rel="dofollow">
|
||||
<img src="https://mdbootstrap.com/wp-content/themes/mdbootstrap4/content/en/_mdb5/standard/general/templates/assets/half-carousel-cover.jpg">
|
||||
</a>
|
||||
<p align="center"><b>Carousel Half Cover</b></p>
|
||||
</tr>
|
||||
</tbody>
|
||||
|
||||
<tbody>
|
||||
<tr>
|
||||
<td>
|
||||
<a href="https://mdbgo.dev/ascensus/MDB5-templates/half-video-cover.html" alt="Bootstrap 5" rel="dofollow">
|
||||
<img src="https://mdbootstrap.com/wp-content/themes/mdbootstrap4/content/en/_mdb5/standard/general/templates/assets/half-video-cover.jpg">
|
||||
</a>
|
||||
<p align="center"><b>Video Half Cover</b></p>
|
||||
<td>
|
||||
<a href="https://mdbgo.dev/ascensus/MDB5-templates/login.html" alt="Bootstrap 5" rel="dofollow">
|
||||
<img src="https://mdbootstrap.com/wp-content/themes/mdbootstrap4/content/en/_mdb5/standard/general/templates/assets/login.jpg">
|
||||
</a>
|
||||
<p align="center"><b>Login</b></p>
|
||||
</tr>
|
||||
</tbody>
|
||||
|
||||
<tbody>
|
||||
<tr>
|
||||
<td>
|
||||
<a href="https://mdbgo.dev/ascensus/MDB5-templates/magazine.html" alt="Bootstrap 5" rel="dofollow">
|
||||
<img src="https://mdbootstrap.com/wp-content/themes/mdbootstrap4/content/en/_mdb5/standard/general/templates/assets/magazine.jpg">
|
||||
</a>
|
||||
<p align="center"><b>Mgazine</b></p>
|
||||
<td>
|
||||
<a href="https://mdbgo.dev/ascensus/MDB5-templates/checkout.html" alt="Bootstrap 5" rel="dofollow">
|
||||
<img src="https://mdbootstrap.com/wp-content/themes/mdbootstrap4/content/en/_mdb5/standard/general/templates/assets/checkout.jpg">
|
||||
</a>
|
||||
<p align="center"><b>Checkout</b></p>
|
||||
</tr>
|
||||
</tbody>
|
||||
|
||||
<tbody>
|
||||
<tr>
|
||||
<td>
|
||||
<a href="https://mdbgo.dev/ascensus/MDB5-templates/blog.html" alt="Bootstrap 5" rel="dofollow">
|
||||
<img src="https://mdbootstrap.com/wp-content/themes/mdbootstrap4/content/en/_mdb5/standard/general/templates/assets/blog.jpg">
|
||||
<p align="center"><b>Blog</b></p>
|
||||
</a>
|
||||
<td>
|
||||
<a href="https://mdbgo.dev/ascensus/MDB5-templates/product.html" alt="Bootstrap 5" rel="dofollow">
|
||||
<img src="https://mdbootstrap.com/wp-content/themes/mdbootstrap4/content/en/_mdb5/standard/general/templates/assets/product.jpg">
|
||||
</a>
|
||||
<p align="center"><b>Product</b></p>
|
||||
</tr>
|
||||
</tbody>
|
||||
|
||||
<tbody>
|
||||
<tr>
|
||||
<td>
|
||||
<a href="https://mdbgo.dev/ascensus/MDB5-templates/category.html" alt="Bootstrap 5" rel="dofollow">
|
||||
<img src="https://mdbootstrap.com/wp-content/themes/mdbootstrap4/content/en/_mdb5/standard/general/templates/assets/category.jpg">
|
||||
<p align="center"><b>Category</b></p>
|
||||
</a>
|
||||
<td>
|
||||
<a href="https://mdbgo.dev/ascensus/MDB5-templates/landing-page.html" alt="Bootstrap 5" rel="dofollow">
|
||||
<img src="https://mdbootstrap.com/wp-content/themes/mdbootstrap4/content/en/_mdb5/standard/general/templates/assets/landing-page.jpg">
|
||||
</a>
|
||||
<p align="center"><b>Landing Page</b></p>
|
||||
</tr>
|
||||
</tbody>
|
||||
|
||||
<tbody>
|
||||
<tr>
|
||||
<td>
|
||||
<a href="https://mdbgo.dev/ascensus/MDB5-templates/admin.html" alt="Bootstrap 5" rel="dofollow">
|
||||
<img src="https://mdbootstrap.com/wp-content/themes/mdbootstrap4/content/en/_mdb5/standard/general/templates/assets/admin.jpg">
|
||||
</a>
|
||||
<p align="center"><b>Admin</b></p>
|
||||
<td>
|
||||
<a href="https://mdbgo.dev/ascensus/MDB5-templates/coming-soon.html" alt="Bootstrap 5" rel="dofollow">
|
||||
<img src="https://mdbootstrap.com/wp-content/themes/mdbootstrap4/content/en/_mdb5/standard/general/templates/assets/coming-soon.jpg">
|
||||
</a>
|
||||
<p align="center"><b>Coming Soon</b></p>
|
||||
</tr>
|
||||
</tbody>
|
||||
|
||||
<tbody>
|
||||
<tr>
|
||||
<td>
|
||||
<a href="https://mdbgo.dev/ascensus/MDB5-templates/classic-jumbotron.html" alt="Bootstrap 5" rel="dofollow">
|
||||
<img src="https://mdbootstrap.com/wp-content/themes/mdbootstrap4/content/en/_mdb5/standard/general/templates/assets/classic-jumbotron.jpg">
|
||||
</a>
|
||||
<p align="center"><b>Classic Jumbotron</b></p>
|
||||
<td>
|
||||
<a href="https://mdbgo.dev/ascensus/MDB5-templates/one-column.html" alt="Bootstrap 5" rel="dofollow">
|
||||
<img src="https://mdbootstrap.com/wp-content/themes/mdbootstrap4/content/en/_mdb5/standard/general/templates/assets/one-column.jpg">
|
||||
</a>
|
||||
<p align="center"><b>One Column</b></p>
|
||||
</tr>
|
||||
</tbody>
|
||||
|
||||
<tbody>
|
||||
<tr>
|
||||
<td>
|
||||
<a href="https://mdbgo.dev/ascensus/MDB5-templates/two-columns.html" alt="Bootstrap 5" rel="dofollow">
|
||||
<img src="https://mdbootstrap.com/wp-content/themes/mdbootstrap4/content/en/_mdb5/standard/general/templates/assets/two-columns.jpg">
|
||||
</a>
|
||||
<p align="center"><b>Two Columns</b></p>
|
||||
<td>
|
||||
<a href="https://mdbgo.dev/ascensus/MDB5-templates/three-columns.html" alt="Bootstrap 5" rel="dofollow">
|
||||
<img src="https://mdbootstrap.com/wp-content/themes/mdbootstrap4/content/en/_mdb5/standard/general/templates/assets/three-columns.jpg">
|
||||
</a>
|
||||
<p align="center"><b>Three Columns</b></p>
|
||||
</tr>
|
||||
</tbody>
|
||||
</table>
|
||||
|
|
|
|||
|
|
@ -1,5 +1,5 @@
|
|||
MDB5
|
||||
Version: FREE 1.0.0-alpha4
|
||||
Version: FREE 1.0.0-beta1
|
||||
|
||||
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
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-alpha4",
|
||||
"version": "1.0.0-beta1",
|
||||
"main": "js/mdb.min.js",
|
||||
"repository": "https://github.com/mdbootstrap/mdb-ui-kit.git",
|
||||
"author": "MDBootstrap",
|
||||
|
|
|
|||
|
|
@ -1,333 +0,0 @@
|
|||
import { getjQuery, typeCheckConfig } from '../mdb/util/index';
|
||||
import Data from '../mdb/dom/data';
|
||||
import Manipulator from '../mdb/dom/manipulator';
|
||||
import SelectorEngine from '../mdb/dom/selector-engine';
|
||||
import EventHandler from '../mdb/dom/event-handler';
|
||||
|
||||
/**
|
||||
* ------------------------------------------------------------------------
|
||||
* Constants
|
||||
* ------------------------------------------------------------------------
|
||||
*/
|
||||
|
||||
const NAME = 'animate';
|
||||
const DATA_KEY = 'mdb.animate';
|
||||
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: '(string)',
|
||||
windowHeight: 'number',
|
||||
offset: '(number|string)',
|
||||
delay: '(number|string)',
|
||||
duration: '(number|string)',
|
||||
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: 'once',
|
||||
windowHeight: 0,
|
||||
offset: 0,
|
||||
delay: 0,
|
||||
duration: 500,
|
||||
reverse: false,
|
||||
interval: 0,
|
||||
repeat: false,
|
||||
reset: false,
|
||||
};
|
||||
|
||||
/**
|
||||
* ------------------------------------------------------------------------
|
||||
* Class Definition
|
||||
* ------------------------------------------------------------------------
|
||||
*/
|
||||
|
||||
class Animate {
|
||||
constructor(element, options) {
|
||||
this._element = element;
|
||||
this._animateElement = this._getAnimateElement();
|
||||
this._isFirstScroll = true;
|
||||
this._repeatAnimateOnScroll = true;
|
||||
this._options = this._getConfig(options);
|
||||
|
||||
if (this._element) {
|
||||
Data.setData(element, DATA_KEY, this);
|
||||
}
|
||||
}
|
||||
|
||||
// Getters
|
||||
static get NAME() {
|
||||
return NAME;
|
||||
}
|
||||
|
||||
// Public
|
||||
init() {
|
||||
this._init();
|
||||
}
|
||||
|
||||
dispose() {
|
||||
Data.removeData(this._element, DATA_KEY);
|
||||
this._element = null;
|
||||
}
|
||||
|
||||
// Private
|
||||
_init() {
|
||||
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();
|
||||
}
|
||||
}
|
||||
|
||||
_getAnimateElement() {
|
||||
const targetId = Manipulator.getDataAttribute(this._element, 'target');
|
||||
return targetId ? SelectorEngine.find(targetId)[0] : this._element;
|
||||
}
|
||||
|
||||
_getConfig(config) {
|
||||
const dataAttributes = Manipulator.getDataAttributes(this._animateElement);
|
||||
|
||||
config = {
|
||||
...Default,
|
||||
...dataAttributes,
|
||||
...config,
|
||||
};
|
||||
|
||||
typeCheckConfig(NAME, config, DefaultType);
|
||||
|
||||
return config;
|
||||
}
|
||||
|
||||
_animateOnScroll() {
|
||||
const elementOffsetTop = Manipulator.offset(this._animateElement).top;
|
||||
const elementHeight = this._animateElement.offsetHeight;
|
||||
const windowHeight = window.innerHeight;
|
||||
const shouldBeVisible =
|
||||
elementOffsetTop + this._options.offset <= windowHeight &&
|
||||
elementOffsetTop + this._options.offset + elementHeight >= 0;
|
||||
const isElementVisible = this._animateElement.style.visibility === 'visible';
|
||||
|
||||
switch (true) {
|
||||
case shouldBeVisible && this._isFirstScroll:
|
||||
this._isFirstScroll = false;
|
||||
this._startAnimation();
|
||||
break;
|
||||
case !shouldBeVisible && this._isFirstScroll:
|
||||
this._isFirstScroll = false;
|
||||
this._hideAnimateElement();
|
||||
break;
|
||||
case shouldBeVisible && !isElementVisible && this._repeatAnimateOnScroll:
|
||||
if (this._options.animateOnScroll !== 'repeat') {
|
||||
this._repeatAnimateOnScroll = false;
|
||||
}
|
||||
this._callback(this._options.onShow);
|
||||
this._showAnimateElement();
|
||||
this._startAnimation();
|
||||
break;
|
||||
case !shouldBeVisible && isElementVisible && this._repeatAnimateOnScroll:
|
||||
this._hideAnimateElement();
|
||||
this._clearAnimationClass();
|
||||
this._callback(this._options.onHide);
|
||||
break;
|
||||
default:
|
||||
break;
|
||||
}
|
||||
}
|
||||
|
||||
_addAnimatedClass() {
|
||||
Manipulator.addClass(this._animateElement, 'animation');
|
||||
Manipulator.addClass(this._animateElement, this._options.animation);
|
||||
}
|
||||
|
||||
_clearAnimationClass() {
|
||||
this._animateElement.classList.remove(this._options.animation, 'animation');
|
||||
}
|
||||
|
||||
_startAnimation() {
|
||||
this._callback(this._options.onStart);
|
||||
|
||||
this._addAnimatedClass();
|
||||
|
||||
if (this._options.repeat && !this._options.interval) {
|
||||
this._setAnimationRepeat();
|
||||
}
|
||||
|
||||
if (this._options.reverse) {
|
||||
this._setAnimationReverse();
|
||||
}
|
||||
|
||||
if (this._options.delay) {
|
||||
this._setAnimationDelay();
|
||||
}
|
||||
|
||||
if (this._options.duration) {
|
||||
this._setAnimationDuration();
|
||||
}
|
||||
|
||||
if (this._options.interval) {
|
||||
this._setAnimationInterval();
|
||||
}
|
||||
}
|
||||
|
||||
_setAnimationReverse() {
|
||||
Manipulator.style(this._animateElement, {
|
||||
animationIterationCount: this._options.repeat === true ? 'infinite' : '2',
|
||||
animationDirection: 'alternate',
|
||||
});
|
||||
}
|
||||
|
||||
_setAnimationDuration() {
|
||||
Manipulator.style(this._animateElement, {
|
||||
animationDuration: `${this._options.duration}ms`,
|
||||
});
|
||||
}
|
||||
|
||||
_setAnimationDelay() {
|
||||
Manipulator.style(this._animateElement, {
|
||||
animationDelay: `${this._options.delay}ms`,
|
||||
});
|
||||
}
|
||||
|
||||
_setAnimationRepeat() {
|
||||
Manipulator.style(this._animateElement, {
|
||||
animationIterationCount: this._options.repeat === true ? 'infinite' : this._options.repeat,
|
||||
});
|
||||
}
|
||||
|
||||
_setAnimationInterval() {
|
||||
EventHandler.on(this._animateElement, 'animationend', () => {
|
||||
this._clearAnimationClass();
|
||||
setTimeout(() => {
|
||||
this._addAnimatedClass();
|
||||
}, this._options.interval);
|
||||
});
|
||||
}
|
||||
|
||||
_hideAnimateElement() {
|
||||
Manipulator.style(this._animateElement, { visibility: 'hidden' });
|
||||
}
|
||||
|
||||
_showAnimateElement() {
|
||||
Manipulator.style(this._animateElement, { visibility: 'visible' });
|
||||
}
|
||||
|
||||
_bindResetAnimationAfterFinish() {
|
||||
EventHandler.on(this._animateElement, 'animationend', () => {
|
||||
this._clearAnimationClass();
|
||||
});
|
||||
}
|
||||
|
||||
_bindTriggerOnEndCallback() {
|
||||
EventHandler.on(this._animateElement, 'animationend', () => {
|
||||
this._callback(this._options.onEnd);
|
||||
});
|
||||
}
|
||||
|
||||
_bindScrollEvents() {
|
||||
if (!this._options.showOnLoad) {
|
||||
this._animateOnScroll();
|
||||
}
|
||||
|
||||
EventHandler.on(window, 'scroll', () => {
|
||||
this._animateOnScroll();
|
||||
});
|
||||
}
|
||||
|
||||
_bindClickEvents() {
|
||||
EventHandler.on(this._element, 'mousedown', () => {
|
||||
this._startAnimation();
|
||||
});
|
||||
}
|
||||
|
||||
_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();
|
||||
}
|
||||
}
|
||||
|
||||
// Static
|
||||
static autoInit(instance) {
|
||||
instance._init();
|
||||
}
|
||||
|
||||
static jQueryInterface(options) {
|
||||
const animate = new Animate(this[0], options);
|
||||
animate.init();
|
||||
}
|
||||
|
||||
static getInstance(element) {
|
||||
return Data.getData(element, DATA_KEY);
|
||||
}
|
||||
}
|
||||
|
||||
/**
|
||||
* ------------------------------------------------------------------------
|
||||
* Data Api implementation - auto initialization
|
||||
* ------------------------------------------------------------------------
|
||||
*/
|
||||
|
||||
SelectorEngine.find(SELECTOR_EXPAND).forEach((el) => {
|
||||
Animate.autoInit(new Animate(el));
|
||||
});
|
||||
|
||||
/**
|
||||
* ------------------------------------------------------------------------
|
||||
* jQuery
|
||||
* ------------------------------------------------------------------------
|
||||
* add .animate to jQuery only if jQuery is present
|
||||
*/
|
||||
|
||||
const $ = getjQuery();
|
||||
|
||||
if ($) {
|
||||
const JQUERY_NO_CONFLICT = $.fn[NAME];
|
||||
$.fn[NAME] = Animate.jQueryInterface;
|
||||
$.fn[NAME].Constructor = Animate;
|
||||
$.fn[NAME].noConflict = () => {
|
||||
$.fn[NAME] = JQUERY_NO_CONFLICT;
|
||||
return Animate.jQueryInterface;
|
||||
};
|
||||
}
|
||||
|
||||
export default Animate;
|
||||
|
|
@ -1,7 +1,9 @@
|
|||
import { getjQuery } from '../mdb/util/index';
|
||||
import { getjQuery, typeCheckConfig } from '../mdb/util/index';
|
||||
import EventHandler from '../bootstrap/src/dom/event-handler';
|
||||
import SelectorEngine from '../mdb/dom/selector-engine';
|
||||
import BSDropdown from '../bootstrap/src/dropdown';
|
||||
import Manipulator from '../bootstrap/src/dom/manipulator';
|
||||
|
||||
/**
|
||||
* ------------------------------------------------------------------------
|
||||
* Constants
|
||||
|
|
@ -11,6 +13,26 @@ import BSDropdown from '../bootstrap/src/dropdown';
|
|||
const NAME = 'dropdown';
|
||||
const SELECTOR_EXPAND = '[data-toggle="dropdown"]';
|
||||
|
||||
const Default = {
|
||||
offset: 0,
|
||||
flip: true,
|
||||
boundary: 'scrollParent',
|
||||
reference: 'toggle',
|
||||
display: 'dynamic',
|
||||
popperConfig: null,
|
||||
dropdownAnimation: 'on',
|
||||
};
|
||||
|
||||
const DefaultType = {
|
||||
offset: '(number|string|function)',
|
||||
flip: 'boolean',
|
||||
boundary: '(string|element)',
|
||||
reference: '(string|element)',
|
||||
display: 'string',
|
||||
popperConfig: '(null|object)',
|
||||
dropdownAnimation: 'string',
|
||||
};
|
||||
|
||||
const EVENT_HIDE = 'hide.bs.dropdown';
|
||||
const EVENT_HIDDEN = 'hidden.bs.dropdown';
|
||||
const EVENT_SHOW = 'show.bs.dropdown';
|
||||
|
|
@ -22,11 +44,14 @@ const ANIMATION_HIDE_CLASS = 'fade-out';
|
|||
class Dropdown extends BSDropdown {
|
||||
constructor(element, data) {
|
||||
super(element, data);
|
||||
this._options = this._getConfig(data);
|
||||
this._config = this._getConfig(data);
|
||||
this._parent = Dropdown.getParentFromElement(this._element);
|
||||
this._menuStyle = '';
|
||||
this._xPlacement = '';
|
||||
this._init();
|
||||
|
||||
if (this._config.dropdownAnimation === 'on') {
|
||||
this._init();
|
||||
}
|
||||
}
|
||||
|
||||
dispose() {
|
||||
|
|
@ -48,6 +73,16 @@ class Dropdown extends BSDropdown {
|
|||
this._bindHiddenEvent();
|
||||
}
|
||||
|
||||
_getConfig(options) {
|
||||
const config = {
|
||||
...Default,
|
||||
...Manipulator.getDataAttributes(this._element),
|
||||
...options,
|
||||
};
|
||||
typeCheckConfig(NAME, config, DefaultType);
|
||||
return config;
|
||||
}
|
||||
|
||||
_bindShowEvent() {
|
||||
EventHandler.on(this._element, EVENT_SHOW, () => {
|
||||
this._dropdownAnimationStart('show');
|
||||
|
|
|
|||
|
|
@ -66,6 +66,8 @@ class Ripple {
|
|||
Manipulator.addClass(this._element, CLASSNAME_RIPPLE);
|
||||
}
|
||||
|
||||
this._clickHandler = this._createRipple.bind(this);
|
||||
|
||||
this.init();
|
||||
}
|
||||
|
||||
|
|
@ -83,7 +85,7 @@ class Ripple {
|
|||
|
||||
dispose() {
|
||||
Data.removeData(this._element, DATA_KEY);
|
||||
EventHandler.off(this._element, 'click', '');
|
||||
EventHandler.off(this._element, 'click', this._clickHandler);
|
||||
this._element = null;
|
||||
this._options = null;
|
||||
}
|
||||
|
|
@ -103,9 +105,7 @@ class Ripple {
|
|||
}
|
||||
|
||||
_addClickEvent(target) {
|
||||
EventHandler.on(target, 'click', '', (event) => {
|
||||
this._createRipple(event);
|
||||
});
|
||||
EventHandler.on(target, 'click', this._clickHandler);
|
||||
}
|
||||
|
||||
_createRipple(event) {
|
||||
|
|
|
|||
|
|
@ -7,8 +7,8 @@ import Modal from './bootstrap/src/modal';
|
|||
import Popover from './bootstrap/src/popover';
|
||||
import ScrollSpy from './bootstrap/src/scrollspy';
|
||||
import Tab from './bootstrap/src/tab';
|
||||
import Toast from './bootstrap/src/toast';
|
||||
import Tooltip from './bootstrap/src/tooltip';
|
||||
import Toast from './bootstrap/src/toast';
|
||||
|
||||
// MDB FREE COMPONENTS
|
||||
import Input from './free/input';
|
||||
|
|
@ -17,10 +17,9 @@ import Treeview from './free/treeview';
|
|||
import Ripple from './free/ripple';
|
||||
|
||||
// AUTO INIT
|
||||
const tooltips = [].slice.call(document.querySelectorAll('[data-toggle="tooltip"]'));
|
||||
const popovers = [].slice.call(document.querySelectorAll('[data-toggle="popover"]'));
|
||||
if (tooltips.length > 0) tooltips.map((tooltip) => new Tooltip(tooltip));
|
||||
if (popovers.length > 0) popovers.map((popover) => new Popover(popover));
|
||||
[...document.querySelectorAll('[data-toggle="tooltip"]')].map((tooltip) => new Tooltip(tooltip));
|
||||
[...document.querySelectorAll('[data-toggle="popover"]')].map((popover) => new Popover(popover));
|
||||
[...document.querySelectorAll('.toast')].map((toast) => new Toast(toast));
|
||||
|
||||
export {
|
||||
Alert,
|
||||
|
|
|
|||
|
|
@ -338,4 +338,21 @@ const EventHandler = {
|
|||
},
|
||||
};
|
||||
|
||||
export const EventHandlerMulti = {
|
||||
on(element, eventsName, handler, delegationFn) {
|
||||
const events = eventsName.split(' ');
|
||||
|
||||
for (let i = 0; i < events.length; i++) {
|
||||
EventHandler.on(element, events[i], handler, delegationFn);
|
||||
}
|
||||
},
|
||||
off(element, originalTypeEvent, handler, delegationFn) {
|
||||
const events = originalTypeEvent.split(' ');
|
||||
|
||||
for (let i = 0; i < events.length; i++) {
|
||||
EventHandler.off(element, events[i], handler, delegationFn);
|
||||
}
|
||||
},
|
||||
};
|
||||
|
||||
export default EventHandler;
|
||||
|
|
|
|||
|
|
@ -100,6 +100,15 @@ const Manipulator = {
|
|||
element.style[property] = style[property];
|
||||
});
|
||||
},
|
||||
|
||||
removeClass(element, className) {
|
||||
if (!element.classList.contains(className)) return;
|
||||
element.classList.remove(className);
|
||||
},
|
||||
|
||||
hasClass(element, className) {
|
||||
return element.classList.contains(className);
|
||||
},
|
||||
};
|
||||
|
||||
export default Manipulator;
|
||||
|
|
|
|||
|
|
@ -1,413 +0,0 @@
|
|||
// animations
|
||||
|
||||
@keyframes drop-in {
|
||||
0% {
|
||||
opacity: 0;
|
||||
transform: scale(0);
|
||||
}
|
||||
100% {
|
||||
opacity: 1;
|
||||
transform: scale(1);
|
||||
}
|
||||
}
|
||||
|
||||
.drop-in {
|
||||
transform-origin: top center;
|
||||
animation-timing-function: cubic-bezier(0.34, 1.61, 0.7, 1);
|
||||
animation-name: drop-in;
|
||||
}
|
||||
|
||||
@keyframes drop-out {
|
||||
0% {
|
||||
opacity: 1;
|
||||
transform: scale(1);
|
||||
}
|
||||
100% {
|
||||
opacity: 0;
|
||||
transform: scale(0);
|
||||
}
|
||||
}
|
||||
|
||||
.drop-out {
|
||||
transform-origin: top center;
|
||||
animation-timing-function: cubic-bezier(0.34, 1.61, 0.7, 1);
|
||||
animation-name: drop-out;
|
||||
}
|
||||
|
||||
@keyframes fly-in {
|
||||
0% {
|
||||
opacity: 0;
|
||||
transform: scale3d(0.3, 0.3, 0.3);
|
||||
}
|
||||
20% {
|
||||
transform: scale3d(1.1, 1.1, 1.1);
|
||||
}
|
||||
40% {
|
||||
transform: scale3d(0.9, 0.9, 0.9);
|
||||
}
|
||||
60% {
|
||||
opacity: 1;
|
||||
transform: scale3d(1.03, 1.03, 1.03);
|
||||
}
|
||||
80% {
|
||||
transform: scale3d(0.97, 0.97, 0.97);
|
||||
}
|
||||
100% {
|
||||
opacity: 1;
|
||||
transform: scale3d(1, 1, 1);
|
||||
}
|
||||
}
|
||||
|
||||
.fly-in {
|
||||
animation-name: fly-in;
|
||||
transition-timing-function: cubic-bezier(0.215, 0.61, 0.355, 1);
|
||||
}
|
||||
|
||||
@keyframes fly-in-up {
|
||||
0% {
|
||||
opacity: 0;
|
||||
transform: translate3d(0, 1500px, 0);
|
||||
}
|
||||
60% {
|
||||
opacity: 1;
|
||||
transform: translate3d(0, -20px, 0);
|
||||
}
|
||||
75% {
|
||||
transform: translate3d(0, 10px, 0);
|
||||
}
|
||||
90% {
|
||||
transform: translate3d(0, -5px, 0);
|
||||
}
|
||||
100% {
|
||||
transform: translate3d(0, 0, 0);
|
||||
}
|
||||
}
|
||||
|
||||
.fly-in-up {
|
||||
animation-name: fly-in-up;
|
||||
transition-timing-function: cubic-bezier(0.215, 0.61, 0.355, 1);
|
||||
}
|
||||
|
||||
@keyframes fly-in-down {
|
||||
0% {
|
||||
opacity: 0;
|
||||
transform: translate3d(0, -1500px, 0);
|
||||
}
|
||||
60% {
|
||||
opacity: 1;
|
||||
transform: translate3d(0, 25px, 0);
|
||||
}
|
||||
75% {
|
||||
transform: translate3d(0, -10px, 0);
|
||||
}
|
||||
90% {
|
||||
transform: translate3d(0, 5px, 0);
|
||||
}
|
||||
100% {
|
||||
transform: none;
|
||||
}
|
||||
}
|
||||
|
||||
.fly-in-down {
|
||||
animation-name: fly-in-down;
|
||||
transition-timing-function: cubic-bezier(0.215, 0.61, 0.355, 1);
|
||||
}
|
||||
|
||||
@keyframes fly-in-left {
|
||||
0% {
|
||||
opacity: 0;
|
||||
transform: translate3d(1500px, 0, 0);
|
||||
}
|
||||
60% {
|
||||
opacity: 1;
|
||||
transform: translate3d(-25px, 0, 0);
|
||||
}
|
||||
75% {
|
||||
transform: translate3d(10px, 0, 0);
|
||||
}
|
||||
90% {
|
||||
transform: translate3d(-5px, 0, 0);
|
||||
}
|
||||
100% {
|
||||
transform: none;
|
||||
}
|
||||
}
|
||||
|
||||
.fly-in-left {
|
||||
animation-name: fly-in-left;
|
||||
transition-timing-function: cubic-bezier(0.215, 0.61, 0.355, 1);
|
||||
}
|
||||
|
||||
@keyframes fly-in-right {
|
||||
0% {
|
||||
opacity: 0;
|
||||
transform: translate3d(-1500px, 0, 0);
|
||||
}
|
||||
60% {
|
||||
opacity: 1;
|
||||
transform: translate3d(25px, 0, 0);
|
||||
}
|
||||
75% {
|
||||
transform: translate3d(-10px, 0, 0);
|
||||
}
|
||||
90% {
|
||||
transform: translate3d(5px, 0, 0);
|
||||
}
|
||||
100% {
|
||||
transform: none;
|
||||
}
|
||||
}
|
||||
|
||||
.fly-in-right {
|
||||
animation-name: fly-in-right;
|
||||
transition-timing-function: cubic-bezier(0.215, 0.61, 0.355, 1);
|
||||
}
|
||||
|
||||
@keyframes fly-out {
|
||||
20% {
|
||||
transform: scale3d(0.9, 0.9, 0.9);
|
||||
}
|
||||
50%,
|
||||
55% {
|
||||
opacity: 1;
|
||||
transform: scale3d(1.1, 1.1, 1.1);
|
||||
}
|
||||
100% {
|
||||
opacity: 0;
|
||||
transform: scale3d(0.3, 0.3, 0.3);
|
||||
}
|
||||
}
|
||||
|
||||
.fly-out {
|
||||
animation-name: fly-out;
|
||||
transition-timing-function: cubic-bezier(0.215, 0.61, 0.355, 1);
|
||||
}
|
||||
|
||||
@keyframes fly-out-up {
|
||||
20% {
|
||||
transform: translate3d(0, 10px, 0);
|
||||
}
|
||||
40%,
|
||||
45% {
|
||||
opacity: 1;
|
||||
transform: translate3d(0, -20px, 0);
|
||||
}
|
||||
100% {
|
||||
opacity: 0;
|
||||
transform: translate3d(0, 2000px, 0);
|
||||
}
|
||||
}
|
||||
|
||||
.fly-out-up {
|
||||
animation-name: fly-out-up;
|
||||
transition-timing-function: cubic-bezier(0.215, 0.61, 0.355, 1);
|
||||
}
|
||||
|
||||
@keyframes fly-out-down {
|
||||
20% {
|
||||
transform: translate3d(0, -10px, 0);
|
||||
}
|
||||
40%,
|
||||
45% {
|
||||
opacity: 1;
|
||||
transform: translate3d(0, 20px, 0);
|
||||
}
|
||||
100% {
|
||||
opacity: 0;
|
||||
transform: translate3d(0, -2000px, 0);
|
||||
}
|
||||
}
|
||||
|
||||
.fly-out-down {
|
||||
animation-name: fly-out-down;
|
||||
transition-timing-function: cubic-bezier(0.215, 0.61, 0.355, 1);
|
||||
}
|
||||
|
||||
@keyframes fly-out-left {
|
||||
20% {
|
||||
opacity: 1;
|
||||
transform: translate3d(-20px, 0, 0);
|
||||
}
|
||||
100% {
|
||||
opacity: 0;
|
||||
transform: translate3d(2000px, 0, 0);
|
||||
}
|
||||
}
|
||||
|
||||
.fly-out-left {
|
||||
animation-name: fly-out-left;
|
||||
transition-timing-function: cubic-bezier(0.215, 0.61, 0.355, 1);
|
||||
}
|
||||
|
||||
@keyframes fly-out-right {
|
||||
20% {
|
||||
opacity: 1;
|
||||
transform: translate3d(20px, 0, 0);
|
||||
}
|
||||
100% {
|
||||
opacity: 0;
|
||||
transform: translate3d(-2000px, 0, 0);
|
||||
}
|
||||
}
|
||||
|
||||
.fly-out-right {
|
||||
animation-name: fly-out-right;
|
||||
transition-timing-function: cubic-bezier(0.215, 0.61, 0.355, 1);
|
||||
}
|
||||
|
||||
@keyframes browse-in {
|
||||
0% {
|
||||
transform: scale(0.8) translateZ(0px);
|
||||
z-index: -1;
|
||||
}
|
||||
10% {
|
||||
transform: scale(0.8) translateZ(0px);
|
||||
z-index: -1;
|
||||
opacity: 0.7;
|
||||
}
|
||||
80% {
|
||||
transform: scale(1.05) translateZ(0px);
|
||||
opacity: 1;
|
||||
z-index: 999;
|
||||
}
|
||||
100% {
|
||||
transform: scale(1) translateZ(0px);
|
||||
z-index: 999;
|
||||
}
|
||||
}
|
||||
|
||||
.browse-in {
|
||||
animation-name: browse-in;
|
||||
}
|
||||
|
||||
@keyframes browse-out-left {
|
||||
0% {
|
||||
z-index: 999;
|
||||
transform: translateX(0%) rotateY(0deg) rotateX(0deg);
|
||||
}
|
||||
50% {
|
||||
z-index: -1;
|
||||
transform: translateX(-105%) rotateY(35deg) rotateX(10deg) translateZ(-10px);
|
||||
}
|
||||
80% {
|
||||
opacity: 1;
|
||||
}
|
||||
100% {
|
||||
z-index: -1;
|
||||
transform: translateX(0%) rotateY(0deg) rotateX(0deg) translateZ(-10px);
|
||||
opacity: 0;
|
||||
}
|
||||
}
|
||||
|
||||
.browse-out,
|
||||
.browse-out-left {
|
||||
animation-name: browse-out-left;
|
||||
}
|
||||
|
||||
@keyframes browse-out-right {
|
||||
0% {
|
||||
z-index: 999;
|
||||
transform: translateX(0%) rotateY(0deg) rotateX(0deg);
|
||||
}
|
||||
50% {
|
||||
z-index: 1;
|
||||
transform: translateX(105%) rotateY(35deg) rotateX(10deg) translateZ(-10px);
|
||||
}
|
||||
80% {
|
||||
opacity: 1;
|
||||
}
|
||||
100% {
|
||||
z-index: 1;
|
||||
transform: translateX(0%) rotateY(0deg) rotateX(0deg) translateZ(-10px);
|
||||
opacity: 0;
|
||||
}
|
||||
}
|
||||
|
||||
.browse-out-right {
|
||||
animation-name: browse-out-right;
|
||||
}
|
||||
|
||||
@keyframes jiggle {
|
||||
0% {
|
||||
transform: scale3d(1, 1, 1);
|
||||
}
|
||||
30% {
|
||||
transform: scale3d(1.25, 0.75, 1);
|
||||
}
|
||||
40% {
|
||||
transform: scale3d(0.75, 1.25, 1);
|
||||
}
|
||||
50% {
|
||||
transform: scale3d(1.15, 0.85, 1);
|
||||
}
|
||||
65% {
|
||||
transform: scale3d(0.95, 1.05, 1);
|
||||
}
|
||||
75% {
|
||||
transform: scale3d(1.05, 0.95, 1);
|
||||
}
|
||||
100% {
|
||||
transform: scale3d(1, 1, 1);
|
||||
}
|
||||
}
|
||||
|
||||
.jiggle {
|
||||
animation-name: jiggle;
|
||||
}
|
||||
|
||||
@keyframes flash {
|
||||
0%,
|
||||
50%,
|
||||
100% {
|
||||
opacity: 1;
|
||||
}
|
||||
25%,
|
||||
75% {
|
||||
opacity: 0;
|
||||
}
|
||||
}
|
||||
|
||||
.flash {
|
||||
animation-duration: 750ms;
|
||||
animation-name: flash;
|
||||
}
|
||||
|
||||
@keyframes shake {
|
||||
0%,
|
||||
100% {
|
||||
transform: translateX(0);
|
||||
}
|
||||
10%,
|
||||
30%,
|
||||
50%,
|
||||
70%,
|
||||
90% {
|
||||
transform: translateX(-10px);
|
||||
}
|
||||
20%,
|
||||
40%,
|
||||
60%,
|
||||
80% {
|
||||
transform: translateX(10px);
|
||||
}
|
||||
}
|
||||
|
||||
.shake {
|
||||
animation-name: shake;
|
||||
}
|
||||
|
||||
@keyframes glow {
|
||||
0% {
|
||||
background-color: #fcfcfd;
|
||||
}
|
||||
30% {
|
||||
background-color: #fff6cd;
|
||||
}
|
||||
100% {
|
||||
background-color: #fcfcfd;
|
||||
}
|
||||
}
|
||||
|
||||
.glow {
|
||||
animation-name: glow;
|
||||
}
|
||||
|
|
@ -1,456 +0,0 @@
|
|||
// animations
|
||||
|
||||
.animation {
|
||||
animation-duration: 1s;
|
||||
animation-fill-mode: both;
|
||||
padding: auto;
|
||||
&.infinite {
|
||||
animation-iteration-count: infinite;
|
||||
}
|
||||
&.delay-1s {
|
||||
animation-delay: 1s;
|
||||
}
|
||||
&.delay-2s {
|
||||
animation-delay: 2s;
|
||||
}
|
||||
&.delay-3s {
|
||||
animation-delay: 3s;
|
||||
}
|
||||
&.delay-4s {
|
||||
animation-delay: 4s;
|
||||
}
|
||||
&.delay-5s {
|
||||
animation-delay: 5s;
|
||||
}
|
||||
&.fast {
|
||||
animation-duration: 800ms;
|
||||
}
|
||||
&.faster {
|
||||
animation-duration: 500ms;
|
||||
}
|
||||
&.slow {
|
||||
animation-duration: 2s;
|
||||
}
|
||||
&.slower {
|
||||
animation-duration: 3s;
|
||||
}
|
||||
}
|
||||
|
||||
@media (prefers-reduced-motion) {
|
||||
.animation {
|
||||
transition: none !important;
|
||||
animation: unset !important;
|
||||
}
|
||||
}
|
||||
|
||||
@keyframes fade-in {
|
||||
from {
|
||||
opacity: 0;
|
||||
}
|
||||
|
||||
to {
|
||||
opacity: 1;
|
||||
}
|
||||
}
|
||||
|
||||
.fade-in {
|
||||
animation-name: fade-in;
|
||||
}
|
||||
|
||||
@keyframes fade-in-down {
|
||||
from {
|
||||
opacity: 0;
|
||||
transform: translate3d(0, -100%, 0);
|
||||
}
|
||||
|
||||
to {
|
||||
opacity: 1;
|
||||
transform: translate3d(0, 0, 0);
|
||||
}
|
||||
}
|
||||
|
||||
.fade-in-down {
|
||||
animation-name: fade-in-down;
|
||||
}
|
||||
|
||||
@keyframes fade-in-left {
|
||||
from {
|
||||
opacity: 0;
|
||||
transform: translate3d(-100%, 0, 0);
|
||||
}
|
||||
|
||||
to {
|
||||
opacity: 1;
|
||||
transform: translate3d(0, 0, 0);
|
||||
}
|
||||
}
|
||||
|
||||
.fade-in-left {
|
||||
animation-name: fade-in-left;
|
||||
}
|
||||
|
||||
@keyframes fade-in-right {
|
||||
from {
|
||||
opacity: 0;
|
||||
transform: translate3d(100%, 0, 0);
|
||||
}
|
||||
|
||||
to {
|
||||
opacity: 1;
|
||||
transform: translate3d(0, 0, 0);
|
||||
}
|
||||
}
|
||||
|
||||
.fade-in-right {
|
||||
animation-name: fade-in-right;
|
||||
}
|
||||
|
||||
@keyframes fade-in-up {
|
||||
from {
|
||||
opacity: 0;
|
||||
transform: translate3d(0, 100%, 0);
|
||||
}
|
||||
|
||||
to {
|
||||
opacity: 1;
|
||||
transform: translate3d(0, 0, 0);
|
||||
}
|
||||
}
|
||||
|
||||
.fade-in-up {
|
||||
animation-name: fade-in-up;
|
||||
}
|
||||
|
||||
@keyframes fade-out {
|
||||
from {
|
||||
opacity: 1;
|
||||
}
|
||||
|
||||
to {
|
||||
opacity: 0;
|
||||
}
|
||||
}
|
||||
|
||||
.fade-out {
|
||||
animation-name: fade-out;
|
||||
}
|
||||
|
||||
@keyframes fade-out-down {
|
||||
from {
|
||||
opacity: 1;
|
||||
}
|
||||
|
||||
to {
|
||||
opacity: 0;
|
||||
transform: translate3d(0, 100%, 0);
|
||||
}
|
||||
}
|
||||
|
||||
.fade-out-down {
|
||||
animation-name: fade-out-down;
|
||||
}
|
||||
|
||||
@keyframes fade-out-left {
|
||||
from {
|
||||
opacity: 1;
|
||||
}
|
||||
|
||||
to {
|
||||
opacity: 0;
|
||||
transform: translate3d(-100%, 0, 0);
|
||||
}
|
||||
}
|
||||
|
||||
.fade-out-left {
|
||||
animation-name: fade-out-left;
|
||||
}
|
||||
|
||||
@keyframes fade-out-right {
|
||||
from {
|
||||
opacity: 1;
|
||||
}
|
||||
|
||||
to {
|
||||
opacity: 0;
|
||||
transform: translate3d(100%, 0, 0);
|
||||
}
|
||||
}
|
||||
|
||||
.fade-out-right {
|
||||
animation-name: fade-out-right;
|
||||
}
|
||||
|
||||
@keyframes fade-out-up {
|
||||
from {
|
||||
opacity: 1;
|
||||
}
|
||||
|
||||
to {
|
||||
opacity: 0;
|
||||
transform: translate3d(0, -100%, 0);
|
||||
}
|
||||
}
|
||||
|
||||
.fade-out-up {
|
||||
animation-name: fade-out-up;
|
||||
}
|
||||
|
||||
@keyframes slide-in-down {
|
||||
from {
|
||||
visibility: visible;
|
||||
transform: translate3d(0, -100%, 0);
|
||||
}
|
||||
|
||||
to {
|
||||
transform: translate3d(0, 0, 0);
|
||||
}
|
||||
}
|
||||
|
||||
.slide-in-down {
|
||||
animation-name: slide-in-down;
|
||||
}
|
||||
|
||||
@keyframes slide-in-left {
|
||||
from {
|
||||
visibility: visible;
|
||||
transform: translate3d(-100%, 0, 0);
|
||||
}
|
||||
|
||||
to {
|
||||
transform: translate3d(0, 0, 0);
|
||||
}
|
||||
}
|
||||
|
||||
.slide-in-left {
|
||||
animation-name: slide-in-left;
|
||||
}
|
||||
|
||||
@keyframes slide-in-right {
|
||||
from {
|
||||
visibility: visible;
|
||||
transform: translate3d(100%, 0, 0);
|
||||
}
|
||||
|
||||
to {
|
||||
transform: translate3d(0, 0, 0);
|
||||
}
|
||||
}
|
||||
|
||||
.slide-in-right {
|
||||
animation-name: slide-in-right;
|
||||
}
|
||||
|
||||
@keyframes slide-in-up {
|
||||
from {
|
||||
visibility: visible;
|
||||
transform: translate3d(0, 100%, 0);
|
||||
}
|
||||
|
||||
to {
|
||||
transform: translate3d(0, 0, 0);
|
||||
}
|
||||
}
|
||||
|
||||
.slide-in-up {
|
||||
animation-name: slide-in-up;
|
||||
}
|
||||
|
||||
@keyframes slide-out-down {
|
||||
from {
|
||||
transform: translate3d(0, 0, 0);
|
||||
}
|
||||
|
||||
to {
|
||||
visibility: hidden;
|
||||
transform: translate3d(0, 100%, 0);
|
||||
}
|
||||
}
|
||||
|
||||
.slide-out-down {
|
||||
animation-name: slide-out-down;
|
||||
}
|
||||
|
||||
@keyframes slide-out-left {
|
||||
from {
|
||||
transform: translate3d(0, 0, 0);
|
||||
}
|
||||
|
||||
to {
|
||||
visibility: hidden;
|
||||
transform: translate3d(-100%, 0, 0);
|
||||
}
|
||||
}
|
||||
|
||||
.slide-out-left {
|
||||
animation-name: slide-out-left;
|
||||
}
|
||||
|
||||
@keyframes slide-out-right {
|
||||
from {
|
||||
transform: translate3d(0, 0, 0);
|
||||
}
|
||||
|
||||
to {
|
||||
visibility: hidden;
|
||||
transform: translate3d(100%, 0, 0);
|
||||
}
|
||||
}
|
||||
|
||||
.slide-out-right {
|
||||
animation-name: slide-out-right;
|
||||
}
|
||||
|
||||
@keyframes slide-out-up {
|
||||
from {
|
||||
transform: translate3d(0, 0, 0);
|
||||
}
|
||||
|
||||
to {
|
||||
visibility: hidden;
|
||||
transform: translate3d(0, -100%, 0);
|
||||
}
|
||||
}
|
||||
|
||||
.slide-out-up {
|
||||
animation-name: slide-out-up;
|
||||
}
|
||||
|
||||
@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);
|
||||
}
|
||||
|
||||
50% {
|
||||
opacity: 1;
|
||||
}
|
||||
}
|
||||
|
||||
.zoom-in {
|
||||
animation-name: zoom-in;
|
||||
}
|
||||
|
||||
@keyframes zoom-out {
|
||||
from {
|
||||
opacity: 1;
|
||||
}
|
||||
|
||||
50% {
|
||||
opacity: 0;
|
||||
transform: scale3d(0.3, 0.3, 0.3);
|
||||
}
|
||||
|
||||
to {
|
||||
opacity: 0;
|
||||
}
|
||||
}
|
||||
|
||||
.zoom-out {
|
||||
animation-name: zoom-out;
|
||||
}
|
||||
|
||||
@keyframes tada {
|
||||
from {
|
||||
transform: scale3d(1, 1, 1);
|
||||
}
|
||||
|
||||
10%,
|
||||
20% {
|
||||
transform: scale3d(0.9, 0.9, 0.9) rotate3d(0, 0, 1, -3deg);
|
||||
}
|
||||
|
||||
30%,
|
||||
50%,
|
||||
70%,
|
||||
90% {
|
||||
transform: scale3d(1.1, 1.1, 1.1) rotate3d(0, 0, 1, 3deg);
|
||||
}
|
||||
|
||||
40%,
|
||||
60%,
|
||||
80% {
|
||||
transform: scale3d(1.1, 1.1, 1.1) rotate3d(0, 0, 1, -3deg);
|
||||
}
|
||||
|
||||
to {
|
||||
transform: scale3d(1, 1, 1);
|
||||
}
|
||||
}
|
||||
|
||||
.tada {
|
||||
animation-name: tada;
|
||||
}
|
||||
|
||||
@keyframes pulse {
|
||||
from {
|
||||
transform: scale3d(1, 1, 1);
|
||||
}
|
||||
|
||||
50% {
|
||||
transform: scale3d(1.05, 1.05, 1.05);
|
||||
}
|
||||
|
||||
to {
|
||||
transform: scale3d(1, 1, 1);
|
||||
}
|
||||
}
|
||||
|
||||
.pulse {
|
||||
animation-name: pulse;
|
||||
}
|
||||
|
|
@ -6,7 +6,7 @@
|
|||
min-width: 0;
|
||||
padding: 0;
|
||||
width: $badge-dot-width;
|
||||
margin-left: -5px;
|
||||
margin-left: $badge-dot-margin-left;
|
||||
&:empty {
|
||||
display: inline-block;
|
||||
}
|
||||
|
|
@ -14,8 +14,8 @@
|
|||
|
||||
.badge-notification {
|
||||
position: absolute;
|
||||
font-size: 0.6rem;
|
||||
margin-top: -0.1rem;
|
||||
margin-left: -0.5rem;
|
||||
padding: 0.2em 0.45em;
|
||||
font-size: $badge-notification-font-size;
|
||||
margin-top: $badge-notification-margin-top;
|
||||
margin-left: $badge-notification-margin-left;
|
||||
padding: $badge-notification-padding-y $badge-notification-padding-x;
|
||||
}
|
||||
|
|
|
|||
|
|
@ -7,16 +7,16 @@
|
|||
|
||||
.breadcrumb-item {
|
||||
a {
|
||||
color: rgba(0, 0, 0, 0.55);
|
||||
transition: color 0.15s ease-in-out;
|
||||
color: $breadcrumb-item-color;
|
||||
transition: $breadcrumb-item-transition;
|
||||
&:hover,
|
||||
&:focus {
|
||||
color: rgba(0, 0, 0, 0.7);
|
||||
color: $breadcrumb-item-hover-color;
|
||||
}
|
||||
}
|
||||
+ .breadcrumb-item {
|
||||
&:before {
|
||||
color: rgba(0, 0, 0, 0.55);
|
||||
color: $breadcrumb-item-before-color;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
|
|
|||
|
|
@ -1,6 +1,9 @@
|
|||
// Button group
|
||||
//
|
||||
// Button group styles
|
||||
//
|
||||
|
||||
.btn-group {
|
||||
.btn-group,
|
||||
.btn-group-vertical {
|
||||
box-shadow: $btn-box-shadow;
|
||||
border-radius: $btn-group-border-radius;
|
||||
transition: $btn-group-transition;
|
||||
|
|
|
|||
|
|
@ -1,18 +1,22 @@
|
|||
// Buttons base styles
|
||||
//
|
||||
// Base styles
|
||||
//
|
||||
|
||||
.btn {
|
||||
font-family: $btn-font-family;
|
||||
line-height: $btn-line-height;
|
||||
text-transform: uppercase;
|
||||
vertical-align: bottom;
|
||||
padding-top: $btn-padding-top;
|
||||
padding-bottom: $btn-padding-bottom;
|
||||
border: 0;
|
||||
box-shadow: $btn-box-shadow;
|
||||
font-size: $btn-font-size;
|
||||
padding-left: $btn-padding-left;
|
||||
padding-right: $btn-padding-right;
|
||||
font-weight: $btn-font-weight;
|
||||
@include button-size-mdb(
|
||||
$btn-padding-top,
|
||||
$btn-padding-right,
|
||||
$btn-padding-bottom,
|
||||
$btn-padding-left,
|
||||
$btn-font-size,
|
||||
$btn-line-height
|
||||
);
|
||||
|
||||
&:hover {
|
||||
box-shadow: $btn-hover-box-shadow;
|
||||
|
|
@ -38,18 +42,28 @@
|
|||
box-shadow: $btn-box-shadow;
|
||||
border: 0;
|
||||
}
|
||||
|
||||
.btn-check:focus + &,
|
||||
&:focus {
|
||||
outline: 0;
|
||||
box-shadow: $btn-focus-box-shadow;
|
||||
}
|
||||
}
|
||||
|
||||
// Buttons outline
|
||||
//
|
||||
// Outline option
|
||||
//
|
||||
|
||||
[class*='btn-outline-'] {
|
||||
border-width: $btn-border-width;
|
||||
border-style: solid;
|
||||
box-shadow: none;
|
||||
padding-top: $btn-outline-padding-top;
|
||||
padding-bottom: $btn-outline-padding-bottom;
|
||||
padding-left: $btn-outline-padding-left;
|
||||
padding-right: $btn-outline-padding-right;
|
||||
@include button-outline-size-mdb(
|
||||
$btn-outline-padding-top,
|
||||
$btn-outline-padding-right,
|
||||
$btn-outline-padding-bottom,
|
||||
$btn-outline-padding-left
|
||||
);
|
||||
|
||||
&:hover {
|
||||
box-shadow: none;
|
||||
|
|
@ -77,22 +91,28 @@
|
|||
box-shadow: none;
|
||||
}
|
||||
|
||||
&.btn-sm {
|
||||
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 {
|
||||
@include button-outline-size-mdb(
|
||||
$btn-outline-padding-top-lg,
|
||||
$btn-outline-padding-right-lg,
|
||||
$btn-outline-padding-bottom-lg,
|
||||
$btn-outline-padding-left-lg
|
||||
);
|
||||
}
|
||||
|
||||
&.btn-lg {
|
||||
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;
|
||||
&.btn-sm {
|
||||
@include button-outline-size-mdb(
|
||||
$btn-outline-padding-top-sm,
|
||||
$btn-outline-padding-right-sm,
|
||||
$btn-outline-padding-bottom-sm,
|
||||
$btn-outline-padding-left-sm
|
||||
);
|
||||
}
|
||||
}
|
||||
|
||||
//
|
||||
// Alternate buttons
|
||||
//
|
||||
|
||||
@each $color, $value in $theme-colors {
|
||||
.btn-#{$color} {
|
||||
|
|
@ -100,7 +120,9 @@
|
|||
}
|
||||
}
|
||||
|
||||
//
|
||||
// Alternate buttons outline
|
||||
//
|
||||
|
||||
@each $color, $value in $theme-colors {
|
||||
.btn-outline-#{$color} {
|
||||
|
|
@ -108,30 +130,34 @@
|
|||
}
|
||||
}
|
||||
|
||||
//
|
||||
// Button Sizes
|
||||
//
|
||||
|
||||
.btn-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;
|
||||
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;
|
||||
@include button-size-mdb(
|
||||
$btn-padding-top-lg,
|
||||
$btn-padding-right-lg,
|
||||
$btn-padding-bottom-lg,
|
||||
$btn-padding-left-lg,
|
||||
$btn-font-size-lg,
|
||||
$btn-line-height-lg
|
||||
);
|
||||
}
|
||||
|
||||
.btn-sm {
|
||||
// @include button-size($btn-padding-y-sm, $btn-padding-x-sm, $btn-font-size-sm, $btn-border-radius-sm);
|
||||
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;
|
||||
@include button-size-mdb(
|
||||
$btn-padding-top-sm,
|
||||
$btn-padding-right-sm,
|
||||
$btn-padding-bottom-sm,
|
||||
$btn-padding-left-sm,
|
||||
$btn-font-size-sm,
|
||||
$btn-line-height-sm
|
||||
);
|
||||
}
|
||||
|
||||
// Link buttons
|
||||
|
||||
//
|
||||
// Make a button look and behave like a link
|
||||
|
||||
.btn-link {
|
||||
|
|
@ -169,46 +195,57 @@
|
|||
}
|
||||
}
|
||||
|
||||
//
|
||||
// Rounded option
|
||||
//
|
||||
|
||||
.btn-rounded {
|
||||
border-radius: $btn-rounded-border-radius;
|
||||
}
|
||||
|
||||
//
|
||||
// Floating option
|
||||
//
|
||||
|
||||
.btn-floating,
|
||||
[class*='btn-outline-'].btn-floating {
|
||||
border-radius: 50%;
|
||||
border-radius: $btn-floating-border-radius;
|
||||
padding: 0;
|
||||
position: relative;
|
||||
}
|
||||
|
||||
.btn-floating {
|
||||
width: 37px;
|
||||
height: 37px;
|
||||
width: $btn-floating-width;
|
||||
height: $btn-floating-height;
|
||||
|
||||
.fas,
|
||||
.far,
|
||||
.fab {
|
||||
width: 37px;
|
||||
line-height: 37px;
|
||||
}
|
||||
|
||||
&.btn-sm {
|
||||
width: 29px;
|
||||
height: 29px;
|
||||
.fas,
|
||||
.far,
|
||||
.fab {
|
||||
width: 29px;
|
||||
line-height: 29px;
|
||||
}
|
||||
width: $btn-floating-icon-width;
|
||||
line-height: $btn-floating-icon-line-height;
|
||||
}
|
||||
|
||||
&.btn-lg {
|
||||
width: 45px;
|
||||
height: 45px;
|
||||
width: $btn-floating-width-lg;
|
||||
height: $btn-floating-height-lg;
|
||||
|
||||
.fas,
|
||||
.far,
|
||||
.fab {
|
||||
width: 45px;
|
||||
line-height: 45px;
|
||||
width: $btn-floating-icon-width-lg;
|
||||
line-height: $btn-floating-icon-line-height-lg;
|
||||
}
|
||||
}
|
||||
|
||||
&.btn-sm {
|
||||
width: $btn-floating-width-sm;
|
||||
height: $btn-floating-height-sm;
|
||||
|
||||
.fas,
|
||||
.far,
|
||||
.fab {
|
||||
width: $btn-floating-icon-width-sm;
|
||||
line-height: $btn-floating-icon-line-height-sm;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
|
@ -217,25 +254,25 @@
|
|||
.fas,
|
||||
.far,
|
||||
.fab {
|
||||
width: 33px;
|
||||
line-height: 33px;
|
||||
}
|
||||
|
||||
&.btn-sm {
|
||||
.fas,
|
||||
.far,
|
||||
.fab {
|
||||
width: 25px;
|
||||
line-height: 25px;
|
||||
}
|
||||
width: $btn-outline-floating-icon-width;
|
||||
line-height: $btn-outline-floating-icon-line-height;
|
||||
}
|
||||
|
||||
&.btn-lg {
|
||||
.fas,
|
||||
.far,
|
||||
.fab {
|
||||
width: 41px;
|
||||
line-height: 41px;
|
||||
width: $btn-outline-floating-icon-width-lg;
|
||||
line-height: $btn-outline-floating-icon-line-height-lg;
|
||||
}
|
||||
}
|
||||
|
||||
&.btn-sm {
|
||||
.fas,
|
||||
.far,
|
||||
.fab {
|
||||
width: $btn-outline-floating-icon-width-sm;
|
||||
line-height: $btn-outline-floating-icon-line-height-sm;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
|
|
|||
|
|
@ -2,13 +2,25 @@
|
|||
|
||||
.card {
|
||||
border: 0;
|
||||
box-shadow: $box-shadow-3;
|
||||
box-shadow: $card-box-shadow;
|
||||
|
||||
.bg-image {
|
||||
border-top-left-radius: $card-border-radius;
|
||||
border-top-right-radius: $card-border-radius;
|
||||
}
|
||||
}
|
||||
|
||||
.card-header {
|
||||
background-color: rgba(255, 255, 255, 0);
|
||||
background-color: $card-header-background-color;
|
||||
}
|
||||
|
||||
.card-body {
|
||||
&[class*='bg-'] {
|
||||
border-bottom-left-radius: $card-border-radius;
|
||||
border-bottom-right-radius: $card-border-radius;
|
||||
}
|
||||
}
|
||||
|
||||
.card-footer {
|
||||
background-color: rgba(255, 255, 255, 0);
|
||||
background-color: $card-footer-background-color;
|
||||
}
|
||||
|
|
|
|||
|
|
@ -1,22 +1,22 @@
|
|||
.dropdown-menu {
|
||||
color: #212529;
|
||||
margin: 0.125rem 0 0;
|
||||
color: $dropdown-color;
|
||||
margin: $dropdown-margin-top 0 0;
|
||||
padding-top: 0;
|
||||
padding-bottom: 0;
|
||||
border: 0;
|
||||
box-shadow: $box-shadow-2;
|
||||
font-size: 0.875rem;
|
||||
box-shadow: $dropdown-box-shadow;
|
||||
font-size: $dropdown-font-size;
|
||||
|
||||
> li {
|
||||
border-radius: 0;
|
||||
&:first-child {
|
||||
border-top-left-radius: 0.25rem;
|
||||
border-top-right-radius: 0.25rem;
|
||||
border-top-left-radius: $dropdown-item-border-radius;
|
||||
border-top-right-radius: $dropdown-item-border-radius;
|
||||
border-bottom-left-radius: 0;
|
||||
border-bottom-right-radius: 0;
|
||||
.dropdown-item {
|
||||
border-top-left-radius: 0.25rem;
|
||||
border-top-right-radius: 0.25rem;
|
||||
border-top-left-radius: $dropdown-item-border-radius;
|
||||
border-top-right-radius: $dropdown-item-border-radius;
|
||||
border-bottom-left-radius: 0;
|
||||
border-bottom-right-radius: 0;
|
||||
}
|
||||
|
|
@ -31,33 +31,40 @@
|
|||
&:last-child {
|
||||
border-top-left-radius: 0;
|
||||
border-top-right-radius: 0;
|
||||
border-bottom-left-radius: 0.25rem;
|
||||
border-bottom-right-radius: 0.25rem;
|
||||
border-bottom-left-radius: $dropdown-item-border-radius;
|
||||
border-bottom-right-radius: $dropdown-item-border-radius;
|
||||
.dropdown-item {
|
||||
border-top-left-radius: 0;
|
||||
border-top-right-radius: 0;
|
||||
border-bottom-left-radius: 0.25rem;
|
||||
border-bottom-right-radius: 0.25rem;
|
||||
border-bottom-left-radius: $dropdown-item-border-radius;
|
||||
border-bottom-right-radius: $dropdown-item-border-radius;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
&.animation {
|
||||
display: block;
|
||||
/* Speed up animations */
|
||||
animation-duration: $dropdown-menu-animated-animation-duration;
|
||||
animation-timing-function: $dropdown-menu-animated-animation-timing-function;
|
||||
}
|
||||
}
|
||||
|
||||
.dropdown-item {
|
||||
padding: 0.5rem 1rem;
|
||||
color: #212529;
|
||||
padding: $dropdown-padding-y $dropdown-padding-x;
|
||||
color: $dropdown-color;
|
||||
border-radius: 0;
|
||||
|
||||
&:hover,
|
||||
&:focus {
|
||||
color: #16181b;
|
||||
background-color: #eee;
|
||||
color: $dropdown-state-color;
|
||||
background-color: $dropdown-state-background-color;
|
||||
}
|
||||
|
||||
&.active,
|
||||
&:active {
|
||||
color: #16181b;
|
||||
background-color: #eee;
|
||||
color: $dropdown-state-color;
|
||||
background-color: $dropdown-state-background-color;
|
||||
}
|
||||
}
|
||||
|
||||
|
|
@ -67,15 +74,6 @@
|
|||
}
|
||||
}
|
||||
|
||||
.dropdown-menu {
|
||||
&.animation {
|
||||
display: block;
|
||||
/* Speed up animations */
|
||||
animation-duration: $dropdown-menu-animated-animation-duration;
|
||||
animation-timing-function: $dropdown-menu-animated-animation-timing-function;
|
||||
}
|
||||
}
|
||||
|
||||
.animation {
|
||||
animation-duration: 1s;
|
||||
animation-fill-mode: both;
|
||||
|
|
|
|||
|
|
@ -1,9 +0,0 @@
|
|||
// Footer
|
||||
|
||||
.footer {
|
||||
bottom: 0;
|
||||
}
|
||||
|
||||
.footer-copyright {
|
||||
background-color: rgba($black, 0.2);
|
||||
}
|
||||
|
|
@ -25,7 +25,7 @@
|
|||
.hover-overlay {
|
||||
.mask {
|
||||
opacity: 0;
|
||||
transition: all 0.3s ease-in-out;
|
||||
transition: $image-hover-overlay-transition;
|
||||
&:hover {
|
||||
opacity: 1;
|
||||
}
|
||||
|
|
@ -35,21 +35,22 @@
|
|||
.hover-zoom {
|
||||
img,
|
||||
video {
|
||||
transition: all 0.3s linear;
|
||||
transition: $image-hover-zoom-transition;
|
||||
}
|
||||
&:hover {
|
||||
img,
|
||||
video {
|
||||
transform: scale(1.1);
|
||||
transform: $image-hover-zoom-transform;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.hover-shadow {
|
||||
.hover-shadow,
|
||||
.card.hover-shadow {
|
||||
box-shadow: none;
|
||||
transition: all 0.3s ease-in-out;
|
||||
transition: $image-hover-shadow-transition;
|
||||
&: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;
|
||||
box-shadow: $image-hover-shadow-box-shadow;
|
||||
transition: $image-hover-shadow-transition;
|
||||
}
|
||||
}
|
||||
|
|
|
|||
|
|
@ -3,6 +3,5 @@
|
|||
// Used in conjunction with global variables to enable certain theme features.
|
||||
|
||||
// Components
|
||||
@import './mixins/alert';
|
||||
@import './mixins/buttons';
|
||||
@import './mixins/ripple';
|
||||
|
|
|
|||
|
|
@ -1,5 +1,5 @@
|
|||
// Modal
|
||||
.modal-content {
|
||||
border: 0;
|
||||
box-shadow: $box-shadow-3;
|
||||
box-shadow: $modal-box-shadow;
|
||||
}
|
||||
|
|
|
|||
|
|
@ -8,20 +8,20 @@
|
|||
border-bottom: 0;
|
||||
|
||||
.nav-link {
|
||||
margin-bottom: -$nav-tabs-border-width;
|
||||
border-width: 0 0 2px 0;
|
||||
border-width: $nav-tabs-link-border-width;
|
||||
border-style: solid;
|
||||
border-color: transparent;
|
||||
border-radius: 0;
|
||||
text-transform: uppercase;
|
||||
line-height: 1;
|
||||
font-weight: 500;
|
||||
font-size: 12px;
|
||||
color: rgba(0, 0, 0, 0.6);
|
||||
padding: 17px 29px 16px 29px;
|
||||
font-weight: $nav-tabs-link-font-weight;
|
||||
font-size: $nav-tabs-link-font-size;
|
||||
color: $nav-tabs-link-color;
|
||||
padding: $nav-tabs-link-padding-top $nav-tabs-link-padding-x $nav-tabs-link-padding-bottom
|
||||
$nav-tabs-link-padding-x;
|
||||
|
||||
&:hover {
|
||||
background-color: #f5f5f5;
|
||||
background-color: $nav-tabs-link-hover-background-color;
|
||||
border-color: transparent;
|
||||
}
|
||||
|
||||
|
|
@ -42,18 +42,19 @@
|
|||
//
|
||||
|
||||
.nav-pills {
|
||||
margin-left: -0.5rem;
|
||||
margin-left: -$nav-pills-margin;
|
||||
|
||||
.nav-link {
|
||||
border-radius: 0.25rem;
|
||||
font-size: 12px;
|
||||
border-radius: $nav-pills-link-border-radius;
|
||||
font-size: $nav-pills-link-font-size;
|
||||
text-transform: uppercase;
|
||||
padding: 17px 29px 16px 29px;
|
||||
line-height: 1;
|
||||
background-color: #f5f5f5;
|
||||
font-weight: 500;
|
||||
color: rgba(0, 0, 0, 0.6);
|
||||
margin: 0.5rem;
|
||||
padding: $nav-pills-link-padding-top $nav-pills-link-padding-x $nav-pills-link-padding-bottom
|
||||
$nav-pills-link-padding-x;
|
||||
line-height: $nav-pills-link-line-height;
|
||||
background-color: $nav-pills-link-background-color;
|
||||
font-weight: $nav-pills-link-font-weight;
|
||||
color: $nav-pills-link-color;
|
||||
margin: $nav-pills-margin;
|
||||
}
|
||||
|
||||
.nav-link.active,
|
||||
|
|
|
|||
|
|
@ -1,8 +1,8 @@
|
|||
// Navbar
|
||||
|
||||
.navbar {
|
||||
box-shadow: $box-shadow-3;
|
||||
padding-top: 0.5625rem;
|
||||
box-shadow: $navbar-box-shadow;
|
||||
padding-top: $navbar-padding-top;
|
||||
}
|
||||
|
||||
.navbar-toggler {
|
||||
|
|
@ -22,7 +22,7 @@
|
|||
display: flex;
|
||||
align-items: center;
|
||||
img {
|
||||
margin-right: 0.25rem;
|
||||
margin-right: $navbar-brand-img-margin-right;
|
||||
}
|
||||
}
|
||||
|
||||
|
|
|
|||
|
|
@ -2,16 +2,16 @@
|
|||
|
||||
.page-link {
|
||||
border: 0;
|
||||
font-size: 0.9rem;
|
||||
color: #212529;
|
||||
font-size: $pagination-font-size;
|
||||
color: $pagination-color;
|
||||
background-color: transparent;
|
||||
border: 0;
|
||||
outline: 0;
|
||||
transition: all 0.3s linear;
|
||||
border-radius: 0.125rem;
|
||||
transition: $pagination-transition;
|
||||
border-radius: $pagination-border-radius;
|
||||
|
||||
&:hover {
|
||||
color: #212529;
|
||||
color: $pagination-hover-color;
|
||||
}
|
||||
|
||||
&:focus {
|
||||
|
|
@ -23,21 +23,21 @@
|
|||
&.active .page-link {
|
||||
background-color: $pagination-active-bg;
|
||||
border: 0;
|
||||
box-shadow: $btn-box-shadow;
|
||||
transition: all 0.2s linear;
|
||||
box-shadow: $pagination-active-box-shadow;
|
||||
transition: $pagination-active-transition;
|
||||
}
|
||||
|
||||
&:first-child {
|
||||
.page-link {
|
||||
border-top-left-radius: 0.125rem;
|
||||
border-bottom-left-radius: 0.125rem;
|
||||
border-top-left-radius: $pagination-border-radius;
|
||||
border-bottom-left-radius: $pagination-border-radius;
|
||||
}
|
||||
}
|
||||
|
||||
&:last-child {
|
||||
.page-link {
|
||||
border-top-right-radius: 0.125rem;
|
||||
border-bottom-right-radius: 0.125rem;
|
||||
border-top-right-radius: $pagination-border-radius;
|
||||
border-bottom-right-radius: $pagination-border-radius;
|
||||
}
|
||||
}
|
||||
&:not(:first-child) {
|
||||
|
|
@ -51,12 +51,12 @@
|
|||
.pagination-sm {
|
||||
.page-item {
|
||||
&:first-child .page-link {
|
||||
border-top-left-radius: 0.125rem;
|
||||
border-bottom-left-radius: 0.125rem;
|
||||
border-top-left-radius: $pagination-border-radius;
|
||||
border-bottom-left-radius: $pagination-border-radius;
|
||||
}
|
||||
&:last-child .page-link {
|
||||
border-top-right-radius: 0.125rem;
|
||||
border-bottom-right-radius: 0.125rem;
|
||||
border-top-right-radius: $pagination-border-radius;
|
||||
border-bottom-right-radius: $pagination-border-radius;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
|
@ -65,32 +65,32 @@
|
|||
.page-item {
|
||||
&:first-child {
|
||||
.page-link {
|
||||
border-radius: 50%;
|
||||
border-radius: $pagination-circle-border-radius;
|
||||
}
|
||||
}
|
||||
|
||||
&:last-child {
|
||||
.page-link {
|
||||
border-radius: 50%;
|
||||
border-radius: $pagination-circle-border-radius;
|
||||
}
|
||||
}
|
||||
}
|
||||
.page-link {
|
||||
border-radius: 50%;
|
||||
padding-left: 0.841rem;
|
||||
padding-right: 0.841rem;
|
||||
border-radius: $pagination-circle-border-radius;
|
||||
padding-left: $pagination-circle-padding-x;
|
||||
padding-right: $pagination-circle-padding-x;
|
||||
}
|
||||
|
||||
&.pagination-lg {
|
||||
.page-link {
|
||||
padding-left: 1.399414rem;
|
||||
padding-right: 1.399415rem;
|
||||
padding-left: $pagination-circle-lg-padding-left;
|
||||
padding-right: $pagination-circle-lg-padding-right;
|
||||
}
|
||||
}
|
||||
&.pagination-sm {
|
||||
.page-link {
|
||||
padding-left: 0.696rem;
|
||||
padding-right: 0.688rem;
|
||||
padding-left: $pagination-circle-sm-padding-left;
|
||||
padding-right: $pagination-circle-sm-padding-right;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
|
|
|||
|
|
@ -2,7 +2,7 @@
|
|||
|
||||
.popover {
|
||||
border: 0;
|
||||
box-shadow: $box-shadow-2;
|
||||
box-shadow: $popover-box-shadow;
|
||||
|
||||
.popover-arrow {
|
||||
display: none;
|
||||
|
|
@ -10,5 +10,5 @@
|
|||
}
|
||||
|
||||
.popover-header {
|
||||
background-color: #fff;
|
||||
background-color: $popover-background-color;
|
||||
}
|
||||
|
|
|
|||
|
|
@ -1,6 +1,5 @@
|
|||
// Progress
|
||||
|
||||
.progress {
|
||||
height: 4px;
|
||||
border-radius: 0;
|
||||
}
|
||||
|
|
|
|||
|
|
@ -3,25 +3,26 @@
|
|||
.nav-pills {
|
||||
&.menu-sidebar {
|
||||
.nav-link {
|
||||
font-size: 0.8rem;
|
||||
font-size: $scrollspy-menu-sidebar-font-size;
|
||||
background-color: transparent;
|
||||
color: #262626;
|
||||
line-height: 1.1rem;
|
||||
padding: 0 5px;
|
||||
font-weight: 400;
|
||||
transition: all 0.2s ease-in-out;
|
||||
color: $scrollspy-menu-sidebar-color;
|
||||
line-height: $scrollspy-menu-sidebar-line-height;
|
||||
padding: 0 $scrollspy-menu-sidebar-padding-x;
|
||||
font-weight: $scrollspy-menu-sidebar-font-weight;
|
||||
transition: $scrollspy-menu-sidebar-transition;
|
||||
text-transform: initial;
|
||||
margin-top: 3px;
|
||||
margin-bottom: 3px;
|
||||
margin-top: $scrollspy-menu-sidebar-margin-y;
|
||||
margin-bottom: $scrollspy-menu-sidebar-margin-y;
|
||||
}
|
||||
|
||||
.nav-link.active,
|
||||
.show > .nav-link {
|
||||
background-color: transparent;
|
||||
box-shadow: none;
|
||||
color: $primary;
|
||||
font-weight: 600;
|
||||
border-left: 0.125rem solid $primary;
|
||||
color: $scrollspy-menu-sidebar-active-color;
|
||||
font-weight: $scrollspy-menu-sidebar-active-font-weight;
|
||||
border-left: $scrollspy-menu-sidebar-active-border-width solid
|
||||
$scrollspy-menu-sidebar-active-border-color;
|
||||
border-radius: 0;
|
||||
}
|
||||
}
|
||||
|
|
|
|||
|
|
@ -1,11 +1,11 @@
|
|||
// Toasts
|
||||
|
||||
.toast {
|
||||
background-color: #fff;
|
||||
background-color: $toast-background-color;
|
||||
border: 0;
|
||||
box-shadow: $box-shadow-2;
|
||||
box-shadow: $toast-box-shadow;
|
||||
}
|
||||
|
||||
.toast-header {
|
||||
background-color: #fff;
|
||||
background-color: $toast-header-background-color;
|
||||
}
|
||||
|
|
|
|||
|
|
@ -11,9 +11,9 @@
|
|||
}
|
||||
|
||||
.tooltip-inner {
|
||||
color: #fff;
|
||||
padding: 6px 16px;
|
||||
font-size: 14px;
|
||||
background-color: #6d6d6d;
|
||||
border-radius: 4px;
|
||||
color: $tooltip-inner-color;
|
||||
padding: $tooltip-inner-padding-y $tooltip-inner-padding-x;
|
||||
font-size: $tooltip-inner-font-size;
|
||||
background-color: $tooltip-inner-background-color;
|
||||
border-radius: $tooltip-inner-border-radius;
|
||||
}
|
||||
|
|
|
|||
|
|
@ -1,13 +1,13 @@
|
|||
// Type
|
||||
.note {
|
||||
padding: 10px;
|
||||
border-left: 6px solid;
|
||||
border-radius: 5px;
|
||||
padding: $note-padding;
|
||||
border-left: $note-border-width solid;
|
||||
border-radius: $note-border-radius;
|
||||
strong {
|
||||
font-weight: 600;
|
||||
font-weight: $note-strong-font-weight;
|
||||
}
|
||||
p {
|
||||
font-weight: 500;
|
||||
font-weight: $note-paragraph-font-weight;
|
||||
}
|
||||
}
|
||||
|
||||
|
|
|
|||
|
|
@ -1,9 +1,6 @@
|
|||
// Variables
|
||||
|
||||
// Color system
|
||||
|
||||
// Grays
|
||||
|
||||
$white: #fff;
|
||||
$gray-50: #fbfbfb;
|
||||
$gray-100: #f5f5f5;
|
||||
|
|
@ -17,7 +14,7 @@ $gray-800: #4f4f4f;
|
|||
$gray-900: #262626;
|
||||
$black: #000;
|
||||
|
||||
// fusv-disable
|
||||
// Material Design Color System - start
|
||||
$blue-50: #e3f2fd;
|
||||
$blue-100: #bbdefb;
|
||||
$blue-200: #90caf9;
|
||||
|
|
@ -279,10 +276,9 @@ $blue-gray-600: #546e7a;
|
|||
$blue-gray-700: #455a64;
|
||||
$blue-gray-800: #37474f;
|
||||
$blue-gray-900: #263238;
|
||||
// fusv-enable
|
||||
// Material Design Color System - end
|
||||
|
||||
// Theme colors
|
||||
|
||||
$primary: #1266f1;
|
||||
$secondary: #b23cfd;
|
||||
$success: #00b74a;
|
||||
|
|
@ -292,6 +288,7 @@ $danger: #f93154;
|
|||
$light: $gray-50;
|
||||
$dark: $gray-900;
|
||||
|
||||
// scss-docs-start theme-colors-map
|
||||
$theme-colors: (
|
||||
'primary': $primary,
|
||||
'secondary': $secondary,
|
||||
|
|
@ -304,8 +301,10 @@ $theme-colors: (
|
|||
'white': $white,
|
||||
'black': $black,
|
||||
);
|
||||
// scss-docs-end theme-colors-map
|
||||
|
||||
$note: () !default;
|
||||
// scss-docs-start note-colors-map
|
||||
$note: ();
|
||||
$note: map-merge(
|
||||
(
|
||||
'primary': (
|
||||
|
|
@ -339,10 +338,17 @@ $note: map-merge(
|
|||
),
|
||||
$note
|
||||
);
|
||||
// scss-docs-end note-colors-map
|
||||
|
||||
// Body
|
||||
//
|
||||
// Settings for the `<body>` element.
|
||||
|
||||
$body-color: $gray-800;
|
||||
|
||||
// Components
|
||||
//
|
||||
// Shadows offset, blur, spread and color
|
||||
|
||||
$box-shadow-0: none;
|
||||
$box-shadow-1: 0 2px 10px 0 rgba(0, 0, 0, 0.05);
|
||||
|
|
@ -357,6 +363,7 @@ $box-shadow-3-strong: 0px 6px 11px 0px rgba(0, 0, 0, 0.25), 0px 7px 20px 3px rgb
|
|||
$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);
|
||||
|
||||
// scss-docs-start light-shadows-values
|
||||
$shadows-light: (
|
||||
'0': $box-shadow-0,
|
||||
'1': $box-shadow-1,
|
||||
|
|
@ -365,7 +372,9 @@ $shadows-light: (
|
|||
'4': $box-shadow-4,
|
||||
'5': $box-shadow-5,
|
||||
);
|
||||
// scss-docs-end light-shadows-values
|
||||
|
||||
// scss-docs-start strong-shadows-values
|
||||
$shadows-strong: (
|
||||
'1': $box-shadow-1-strong,
|
||||
'2': $box-shadow-2-strong,
|
||||
|
|
@ -373,77 +382,519 @@ $shadows-strong: (
|
|||
'4': $box-shadow-4-strong,
|
||||
'5': $box-shadow-5-strong,
|
||||
);
|
||||
// scss-docs-end strong-shadows-values
|
||||
|
||||
// Typography
|
||||
//
|
||||
// Font, line-height, and color for body text, headings, and more.
|
||||
|
||||
$font-family-roboto: 'Roboto', sans-serif;
|
||||
$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
|
||||
//
|
||||
// For each of MDB's buttons, define text, background, and border color.
|
||||
|
||||
$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-padding-top: 0.625rem;
|
||||
$btn-padding-bottom: 0.5rem;
|
||||
$btn-font-size: 0.75rem;
|
||||
$btn-padding-left: 1.5rem;
|
||||
$btn-padding-right: 1.5rem;
|
||||
$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-border-width: 0.125rem;
|
||||
|
||||
$btn-outline-padding-top: 8px;
|
||||
$btn-outline-padding-bottom: 6px;
|
||||
$btn-outline-padding-left: 22px;
|
||||
$btn-outline-padding-right: 22px;
|
||||
$btn-outline-padding-top: 0.5rem;
|
||||
$btn-outline-padding-bottom: 0.375rem;
|
||||
$btn-outline-padding-left: 1.375rem;
|
||||
$btn-outline-padding-right: 1.375rem;
|
||||
|
||||
$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-sm: 0.25rem;
|
||||
$btn-outline-padding-bottom-sm: 0.1875rem;
|
||||
$btn-outline-padding-right-sm: 0.875rem;
|
||||
$btn-outline-padding-left-sm: 0.875rem;
|
||||
|
||||
$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-outline-padding-top-lg: 0.625rem;
|
||||
$btn-outline-padding-bottom-lg: 0.5625rem;
|
||||
$btn-outline-padding-right-lg: 1.5625rem;
|
||||
$btn-outline-padding-left-lg: 1.5625rem;
|
||||
|
||||
$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-font-size-lg: 0.875rem;
|
||||
$btn-padding-top-lg: 0.75rem;
|
||||
$btn-padding-bottom-lg: 0.6875rem;
|
||||
$btn-padding-right-lg: 1.6875rem;
|
||||
$btn-padding-left-lg: 1.6875rem;
|
||||
|
||||
$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-font-size-sm: 0.75rem;
|
||||
$btn-padding-top-sm: 0.375rem;
|
||||
$btn-padding-bottom-sm: 0.3125rem;
|
||||
$btn-padding-right-sm: 1rem;
|
||||
$btn-padding-left-sm: 1rem;
|
||||
|
||||
$btn-link-bgc: #f5f5f5;
|
||||
$btn-rounded-border-radius: 10rem;
|
||||
|
||||
// Button group
|
||||
$btn-floating-border-radius: 50%;
|
||||
|
||||
$btn-group-border-radius: calc(0.25rem - 1px);
|
||||
$btn-floating-width: 2.3125rem;
|
||||
$btn-floating-height: 2.3125rem;
|
||||
$btn-floating-icon-width: 2.3125rem;
|
||||
$btn-floating-icon-line-height: 2.3125rem;
|
||||
|
||||
$btn-floating-width-lg: 2.8125rem;
|
||||
$btn-floating-height-lg: 2.8125rem;
|
||||
$btn-floating-icon-width-lg: 2.8125rem;
|
||||
$btn-floating-icon-line-height-lg: 2.8125rem;
|
||||
|
||||
$btn-floating-width-sm: 1.8125rem;
|
||||
$btn-floating-height-sm: 1.8125rem;
|
||||
$btn-floating-icon-width-sm: 1.8125rem;
|
||||
$btn-floating-icon-line-height-sm: 1.8125rem;
|
||||
|
||||
$btn-outline-floating-icon-width: 2.0625rem;
|
||||
$btn-outline-floating-icon-line-height: 2.0625rem;
|
||||
|
||||
$btn-outline-floating-icon-width-lg: 2.5625rem;
|
||||
$btn-outline-floating-icon-line-height-lg: 2.5625rem;
|
||||
|
||||
$btn-outline-floating-icon-width-sm: 1.5625rem;
|
||||
$btn-outline-floating-icon-line-height-sm: 1.5625rem;
|
||||
|
||||
$btn-floating-border-radius: 50%;
|
||||
|
||||
// Button group
|
||||
//
|
||||
// Material styling for group of buttons
|
||||
|
||||
$btn-group-border-radius: calc(4px - 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;
|
||||
|
||||
// Dropdown
|
||||
// Forms
|
||||
//
|
||||
// Material styling for outline forms border, label, size
|
||||
|
||||
$input-padding-top: 0.33em;
|
||||
$input-padding-bottom: $input-padding-top;
|
||||
$input-transition: all 0.2s linear;
|
||||
|
||||
$form-label-left: 0.75em;
|
||||
$form-label-padding-top: 0.37em;
|
||||
$form-label-transition: all 0.2s ease-out;
|
||||
$form-label-color: rgba(0, 0, 0, 0.6);
|
||||
|
||||
$input-focus-active-label-transform: translateY(-1em) translateY(0.1em) scale(0.8);
|
||||
$input-focus-label-color: $primary;
|
||||
$input-focus-border-width: 0.125em;
|
||||
$input-focus-border-color: $primary;
|
||||
$input-disabled-background-color: #e9ecef;
|
||||
|
||||
$input-font-size-lg: 1em;
|
||||
$input-line-height-lg: 2.15;
|
||||
$input-focus-active-label-transform-lg: translateY(-1.25em) translateY(0.1em) scale(0.8);
|
||||
|
||||
$input-font-size-sm: 0.775em;
|
||||
$input-line-height-sm: 1.5;
|
||||
$input-focus-active-label-transform-sm: translateY(-0.83em) translateY(0.1em) scale(0.8);
|
||||
|
||||
$form-notch-div-border-color: #bdbdbd;
|
||||
$form-notch-leading-width: 0.5em;
|
||||
$form-notch-leading-border-radius: 0.25em;
|
||||
$form-notch-middle-max-width: 1em;
|
||||
$form-notch-trailing-border-radius: $form-notch-leading-border-radius;
|
||||
|
||||
$form-label-padding-top-lg: 0.7em;
|
||||
$form-label-padding-top-sm: 0.33em;
|
||||
$form-label-font-size-sm: 0.775em;
|
||||
|
||||
$form-white-input-color: $white;
|
||||
$form-white-label-color: $gray-50;
|
||||
$form-white-notch-div-border-color: $gray-50;
|
||||
$form-white-input-focus-label-color: $white;
|
||||
$form-white-input-focus-border-color: $white;
|
||||
|
||||
$form-check-input-margin-left: 1.79em;
|
||||
$form-check-input-radio-margin-left: 1.85em;
|
||||
$form-check-input-width: 1.125em;
|
||||
$form-check-input-height: $form-check-input-width;
|
||||
$form-check-input-background-color: $white;
|
||||
$form-check-input-border-width: 0.125em;
|
||||
$form-check-input-border-color: rgb(117, 117, 117);
|
||||
|
||||
$form-check-input-before-box-shadow: 0px 0px 0px 13px transparent;
|
||||
$form-check-input-before-border-radius: 50%;
|
||||
$form-check-input-before-width: 0.875em;
|
||||
$form-check-input-before-height: $form-check-input-before-width;
|
||||
$form-check-input-before-transform: scale(0);
|
||||
|
||||
$form-check-input-hover-before-opacity: 0.04;
|
||||
$form-check-input-hover-before-box-shadow: 0px 0px 0px 13px rgba(0, 0, 0, 0.6);
|
||||
|
||||
$form-check-input-focus-border-color: $form-check-input-border-color;
|
||||
$form-check-input-focus-transition: border-color 0.2s;
|
||||
|
||||
$form-check-input-focus-before-opacity: 0.12;
|
||||
$form-check-input-focus-before-box-shadow: $form-check-input-hover-before-box-shadow;
|
||||
$form-check-input-focus-before-transform: scale(1);
|
||||
$form-check-input-focus-before-transition: box-shadow 0.2s, transform 0.2s;
|
||||
|
||||
$form-check-input-checked-border-color: $primary;
|
||||
$form-check-input-checked-before-opacity: 0.16;
|
||||
$form-check-input-checked-focus-border-color: $primary;
|
||||
$form-check-input-checked-focus-before-box-shadow: 0px 0px 0px 13px $primary;
|
||||
$form-check-input-checked-focus-before-transform: $form-check-input-focus-before-transform;
|
||||
$form-check-input-checked-focus-before-transition: $form-check-input-focus-before-transition;
|
||||
|
||||
$form-check-input-checkbox-border-radius: 0.125em;
|
||||
$form-check-input-checkbox-focus-after-width: 0.875em;
|
||||
$form-check-input-checkbox-focus-after-height: $form-check-input-checkbox-focus-after-width;
|
||||
$form-check-input-checkbox-focus-after-background-color: $white;
|
||||
$form-check-input-checkbox-checked-background-color: $primary;
|
||||
$form-check-input-checkbox-checked-focus-background-color: $primary;
|
||||
|
||||
$form-check-input-checkbox-checked-after-transform: rotate(45deg);
|
||||
$form-check-input-checkbox-checked-after-border-width: 0.125em;
|
||||
$form-check-input-checkbox-checked-after-border-color: $white;
|
||||
$form-check-input-checkbox-checked-after-width: 0.375em;
|
||||
$form-check-input-checkbox-checked-after-height: 0.8125em;
|
||||
$form-check-input-checkbox-checked-after-margin-left: 0.25em;
|
||||
$form-check-input-checkbox-checked-after-margin-top: -1px;
|
||||
|
||||
$form-check-input-indeterminate-focus-before-box-shadow: 0px 0px 0px 13px $primary;
|
||||
$form-check-input-indeterminate-checked-background-color: $primary;
|
||||
$form-check-input-indeterminate-checked-after-transform: rotate(90deg);
|
||||
$form-check-input-indeterminate-checked-after-border-width: 0.125em;
|
||||
$form-check-input-indeterminate-checked-after-border-color: $white;
|
||||
$form-check-input-indeterminate-checked-after-width: 0.125em;
|
||||
$form-check-input-indeterminate-checked-after-height: 0.875em;
|
||||
$form-check-input-indeterminate-checked-after-margin-left: 0.375em;
|
||||
$form-check-input-indeterminate-focus-background-color: $primary;
|
||||
|
||||
$form-check-input-radio-border-radius: 50%;
|
||||
$form-check-input-radio-width: 1.25em;
|
||||
$form-check-input-radio-height: $form-check-input-radio-width;
|
||||
|
||||
$form-check-input-radio-before-width: 1em;
|
||||
$form-check-input-radio-before-height: $form-check-input-radio-before-width;
|
||||
|
||||
$form-check-input-radio-after-width: $form-check-input-radio-before-width;
|
||||
$form-check-input-radio-after-height: $form-check-input-radio-after-width;
|
||||
$form-check-input-radio-after-border-radius: $form-check-input-radio-border-radius;
|
||||
$form-check-input-radio-after-background-color: $white;
|
||||
|
||||
$form-check-input-radio-checked-background-color: $white;
|
||||
$form-check-input-radio-checked-after-border-radius: $form-check-input-radio-border-radius;
|
||||
$form-check-input-radio-checked-after-width: 0.625em;
|
||||
$form-check-input-radio-checked-after-height: $form-check-input-radio-checked-after-width;
|
||||
$form-check-input-radio-checked-after-border-color: $primary;
|
||||
$form-check-input-radio-checked-after-background-color: $primary;
|
||||
$form-check-input-radio-checked-after-margin-top: 0.1875em;
|
||||
$form-check-input-radio-checked-after-margin-left: 0.1875em;
|
||||
$form-check-input-radio-checked-after-transition: border-color;
|
||||
$form-check-input-radio-checked-focus-background-color: $white;
|
||||
|
||||
$form-switch-padding-left: 1.85em;
|
||||
$form-switch-form-check-input-border-radius: 0.4375em;
|
||||
$form-switch-form-check-input-width: 2.25em;
|
||||
$form-switch-form-check-input-height: 0.875em;
|
||||
$form-switch-form-check-input-background-color: rgba(0, 0, 0, 0.38);
|
||||
$form-switch-form-check-input-margin-top: 0.35em;
|
||||
$form-switch-form-check-input-margin-right: 0.7em;
|
||||
|
||||
$form-switch-form-check-input-after-border-radius: 50%;
|
||||
$form-switch-form-check-input-after-width: 1.25em;
|
||||
$form-switch-form-check-input-after-height: $form-switch-form-check-input-after-width;
|
||||
$form-switch-form-check-input-after-background-color: $white;
|
||||
$form-switch-form-check-input-after-margin-top: -0.1875em;
|
||||
$form-switch-form-check-input-after-box-shadow: 0 3px 1px -2px rgba(0, 0, 0, 0.2),
|
||||
0 2px 2px 0 rgba(0, 0, 0, 0.14), 0 1px 5px 0 rgba(0, 0, 0, 0.12);
|
||||
$form-switch-form-check-input-after-transition: background-color 0.2s, transform 0.2s;
|
||||
|
||||
$form-switch-form-check-input-focus-before-box-shadow: 3px -1px 0px 13px rgba(0, 0, 0, 0.6);
|
||||
$form-switch-form-check-input-focus-before-transform: scale(1);
|
||||
$form-switch-form-check-input-focus-before-transition: box-shadow 0.2s, transform 0.2s;
|
||||
|
||||
$form-switch-form-check-input-focus-after-border-radius: $form-switch-form-check-input-after-border-radius;
|
||||
$form-switch-form-check-input-focus-after-width: 1.25em;
|
||||
$form-switch-form-check-input-focus-after-height: $form-switch-form-check-input-focus-after-width;
|
||||
|
||||
$form-switch-form-check-input-checked-focus-before-margin-left: 1.0625em;
|
||||
$form-switch-form-check-input-checked-focus-before-box-shadow: 3px -1px 0px 13px $primary;
|
||||
$form-switch-form-check-input-checked-focus-before-transform: scale(1);
|
||||
$form-switch-form-check-input-checked-focus-before-transition: box-shadow 0.2s, transform 0.2s;
|
||||
|
||||
$form-switch-form-check-input-checked-checkbox-after-border-radius: 50%;
|
||||
$form-switch-form-check-input-checked-checkbox-after-width: 1.25em;
|
||||
$form-switch-form-check-input-checked-checkbox-after-height: 1.25em;
|
||||
$form-switch-form-check-input-checked-checkbox-after-background-color: $primary;
|
||||
$form-switch-form-check-input-checked-checkbox-after-margin-top: -3px;
|
||||
$form-switch-form-check-input-checked-checkbox-after-margin-left: 1.0625em;
|
||||
$form-switch-form-check-input-checked-checkbox-after-box-shadow: 0 3px 1px -2px rgba(0, 0, 0, 0.2),
|
||||
0 2px 2px 0 rgba(0, 0, 0, 0.14), 0 1px 5px 0 rgba(0, 0, 0, 0.12);
|
||||
$form-switch-form-check-input-checked-checkbox-after-transition: background-color 0.2s,
|
||||
transform 0.2s;
|
||||
|
||||
$form-file-height: calc(1.8em + 0.33rem + 2px);
|
||||
|
||||
$form-file-label-focus-border-color: $primary;
|
||||
$form-file-label-focus-transition: all 0.2s linear;
|
||||
$form-file-label-focus-text-border-width: 2px 1px 2px 2px;
|
||||
$form-file-label-focus-button-border-width: 2px 2px 2px 1px;
|
||||
$form-file-label-disabled-background-color: #e9ecef;
|
||||
$form-file-label-height: $form-file-height;
|
||||
$form-file-label-border-color: rgba(0, 0, 0, 0.38);
|
||||
|
||||
$form-file-text-padding-y: 0.33rem;
|
||||
$form-file-text-border-color: #bdbdbd;
|
||||
|
||||
$form-file-button-line-height: 1.5;
|
||||
$form-file-button-background-color: #fff;
|
||||
$form-file-button-border-color: $form-file-text-border-color;
|
||||
|
||||
$form-file-sm-height: calc(1.7em + 0.33rem + 2px);
|
||||
$form-file-sm-font-size: 0.775rem;
|
||||
$form-file-sm-line-height: $form-file-button-line-height;
|
||||
$form-file-sm-padding-y: $form-file-text-padding-y;
|
||||
|
||||
$form-file-lg-height: calc(2.315em + 0.33rem + 2px);
|
||||
$form-file-lg-font-size: 1rem;
|
||||
$form-file-lg-line-height: 2.15;
|
||||
$form-file-lg-padding-y: $form-file-text-padding-y;
|
||||
|
||||
$form-range-webkit-slider-thumb-margin-top: -6px;
|
||||
$form-range-webkit-slider-runnable-track-height: 4px;
|
||||
|
||||
$input-group-min-height: calc(1.5em + 0.33rem + 2px);
|
||||
$input-group-padding-y: 0.27rem;
|
||||
$input-group-transition: all 0.2s linear;
|
||||
|
||||
$input-group-focus-transition: $input-group-transition;
|
||||
$input-group-focus-border-color: $primary;
|
||||
$input-group-focus-box-shadow: inset 0 0 0 1px $primary;
|
||||
|
||||
$input-group-text-padding-y: 0.27rem;
|
||||
|
||||
$input-group-lg-height: calc(2.315em + 0.33rem + 2px);
|
||||
$input-group-lg-font-size: 1rem;
|
||||
$input-group-lg-padding-y: 0.33rem;
|
||||
$input-group-lg-text-font-size: $input-group-lg-font-size;
|
||||
|
||||
$input-group-sm-height-height: calc(1.7em + 0.33rem + 2px);
|
||||
$input-group-sm-font-size: 0.775rem;
|
||||
$input-group-sm-padding-y: $input-group-lg-padding-y;
|
||||
$input-group-sm-text-font-size: $input-group-sm-font-size;
|
||||
$input-group-sm-text-line-height: 1.5;
|
||||
|
||||
$input-group-form-outline-border-left-width: 1px;
|
||||
$input-group-form-outline-border-left-color: #bdbdbd;
|
||||
|
||||
// Form validation
|
||||
|
||||
$form-feedback-valid-tooltip-color: $white;
|
||||
$form-feedback-valid-color: $success;
|
||||
$form-feedback-invalid-color: $danger;
|
||||
|
||||
// scss-docs-start form-validation-states
|
||||
$form-validation-states-mdb: (
|
||||
'valid': (
|
||||
'color': $form-feedback-valid-color,
|
||||
),
|
||||
'invalid': (
|
||||
'color': $form-feedback-invalid-color,
|
||||
),
|
||||
);
|
||||
// scss-docs-end form-validation-states
|
||||
|
||||
// Navs
|
||||
|
||||
$nav-tabs-link-border-width: 0 0 2px 0;
|
||||
$nav-tabs-link-font-weight: 500;
|
||||
$nav-tabs-link-font-size: 12px;
|
||||
$nav-tabs-link-color: rgba(0, 0, 0, 0.6);
|
||||
$nav-tabs-link-padding-top: 17px;
|
||||
$nav-tabs-link-padding-bottom: 16px;
|
||||
$nav-tabs-link-padding-x: 29px;
|
||||
$nav-tabs-link-hover-background-color: #f5f5f5;
|
||||
|
||||
$nav-pills-margin: 0.5rem;
|
||||
$nav-pills-link-border-radius: 0.25rem;
|
||||
$nav-pills-link-font-size: $nav-tabs-link-font-size;
|
||||
$nav-pills-link-padding-top: $nav-tabs-link-padding-top;
|
||||
$nav-pills-link-padding-bottom: $nav-tabs-link-padding-bottom;
|
||||
$nav-pills-link-padding-x: $nav-tabs-link-padding-x;
|
||||
$nav-pills-link-line-height: 1;
|
||||
$nav-pills-link-background-color: $nav-tabs-link-hover-background-color;
|
||||
$nav-pills-link-font-weight: $nav-tabs-link-font-weight;
|
||||
$nav-pills-link-color: $nav-tabs-link-color;
|
||||
|
||||
// Navbar
|
||||
|
||||
$navbar-box-shadow: $box-shadow-3;
|
||||
$navbar-padding-top: 0.5625rem;
|
||||
$navbar-brand-img-margin-right: 0.25rem;
|
||||
|
||||
// Dropdowns
|
||||
//
|
||||
// Dropdown menu container and content;
|
||||
|
||||
$dropdown-color: #212529;
|
||||
$dropdown-margin-top: 0.125rem;
|
||||
$dropdown-box-shadow: $box-shadow-2;
|
||||
$dropdown-font-size: 0.875rem;
|
||||
$dropdown-item-border-radius: 0.25rem;
|
||||
$dropdown-padding-y: 0.5rem;
|
||||
$dropdown-padding-x: 1rem;
|
||||
|
||||
$dropdown-state-color: #16181b;
|
||||
$dropdown-state-background-color: #eee;
|
||||
|
||||
$dropdown-menu-animated-animation-duration: 0.55s;
|
||||
$dropdown-menu-animated-animation-timing-function: ease;
|
||||
|
||||
// Pagination
|
||||
|
||||
$pagination-font-size: 0.9rem;
|
||||
$pagination-color: #212529;
|
||||
$pagination-transition: all 0.3s linear;
|
||||
$pagination-border-radius: 0.125rem;
|
||||
|
||||
$pagination-hover-color: $pagination-color;
|
||||
$pagination-active-box-shadow: $btn-box-shadow;
|
||||
$pagination-active-transition: all 0.2s linear;
|
||||
|
||||
$pagination-circle-border-radius: 50%;
|
||||
$pagination-circle-padding-x: 0.841rem;
|
||||
|
||||
$pagination-circle-lg-padding-left: 1.399414rem;
|
||||
$pagination-circle-lg-padding-right: 1.399415rem;
|
||||
|
||||
$pagination-circle-sm-padding-left: 0.696rem;
|
||||
$pagination-circle-sm-padding-right: 0.688rem;
|
||||
|
||||
// Cards
|
||||
|
||||
$card-box-shadow: $box-shadow-3;
|
||||
$card-header-background-color: rgba(255, 255, 255, 0);
|
||||
$card-footer-background-color: rgba(255, 255, 255, 0);
|
||||
$card-border-radius: 0.25rem;
|
||||
|
||||
// Tooltips
|
||||
|
||||
$tooltip-inner-color: #fff;
|
||||
$tooltip-inner-padding-y: 6px;
|
||||
$tooltip-inner-padding-x: 16px;
|
||||
$tooltip-inner-font-size: 14px;
|
||||
$tooltip-inner-background-color: #6d6d6d;
|
||||
$tooltip-inner-border-radius: 0.25rem;
|
||||
|
||||
// Popovers
|
||||
|
||||
$popover-box-shadow: $box-shadow-2;
|
||||
$popover-background-color: #fff;
|
||||
|
||||
// Toasts
|
||||
|
||||
$toast-background-color: #fff;
|
||||
$toast-box-shadow: $box-shadow-2;
|
||||
$toast-header-background-color: #fff;
|
||||
|
||||
// Badges
|
||||
|
||||
$badge-dot-border-radius: 4.5px;
|
||||
$badge-dot-height: 9px;
|
||||
$badge-dot-width: $badge-dot-height;
|
||||
$badge-dot-margin-left: -0.3125rem;
|
||||
|
||||
$badge-notification-font-size: 0.6rem;
|
||||
$badge-notification-margin-top: -0.1rem;
|
||||
$badge-notification-margin-left: -0.5rem;
|
||||
$badge-notification-padding-y: 0.2em;
|
||||
$badge-notification-padding-x: 0.45em;
|
||||
|
||||
// Modals
|
||||
|
||||
$modal-box-shadow: $box-shadow-3;
|
||||
|
||||
// Progress bars
|
||||
|
||||
$progress-height: 4px;
|
||||
|
||||
// Breadcrumbs
|
||||
|
||||
$breadcrumb-item-color: rgba(0, 0, 0, 0.55);
|
||||
$breadcrumb-item-transition: color 0.15s ease-in-out;
|
||||
$breadcrumb-item-hover-color: rgba(0, 0, 0, 0.7);
|
||||
$breadcrumb-item-before-color: $breadcrumb-item-color;
|
||||
|
||||
// Images
|
||||
|
||||
$image-hover-overlay-transition: all 0.3s ease-in-out;
|
||||
|
||||
$image-hover-zoom-transition: all 0.3s linear;
|
||||
$image-hover-zoom-transform: scale(1.1);
|
||||
|
||||
$image-hover-shadow-transition: $image-hover-overlay-transition;
|
||||
$image-hover-shadow-box-shadow: 0 8px 17px 0 rgba(0, 0, 0, 0.2), 0 6px 20px 0 rgba(0, 0, 0, 0.19);
|
||||
|
||||
// Scrollspy
|
||||
|
||||
$scrollspy-menu-sidebar-font-size: 0.8rem;
|
||||
$scrollspy-menu-sidebar-color: #262626;
|
||||
$scrollspy-menu-sidebar-line-height: 1.1rem;
|
||||
$scrollspy-menu-sidebar-padding-x: 5px;
|
||||
$scrollspy-menu-sidebar-font-weight: 400;
|
||||
$scrollspy-menu-sidebar-transition: all 0.2s ease-in-out;
|
||||
$scrollspy-menu-sidebar-margin-y: 3px;
|
||||
|
||||
$scrollspy-menu-sidebar-active-color: $primary;
|
||||
$scrollspy-menu-sidebar-active-font-weight: 600;
|
||||
$scrollspy-menu-sidebar-active-border-width: 0.125rem;
|
||||
$scrollspy-menu-sidebar-active-border-color: $primary;
|
||||
|
||||
// Breadcrumbs
|
||||
|
||||
$breadcrumb-item-color: rgba(0, 0, 0, 0.55);
|
||||
$breadcrumb-item-transition: color 0.15s ease-in-out;
|
||||
$breadcrumb-item-hover-color: rgba(0, 0, 0, 0.7);
|
||||
$breadcrumb-item-before-color: $breadcrumb-item-color;
|
||||
|
||||
// Images
|
||||
|
||||
$image-hover-overlay-transition: all 0.3s ease-in-out;
|
||||
|
||||
$image-hover-zoom-transition: all 0.3s linear;
|
||||
$image-hover-zoom-transform: scale(1.1);
|
||||
|
||||
$image-hover-shadow-transition: $image-hover-overlay-transition;
|
||||
$image-hover-shadow-box-shadow: 0 8px 17px 0 rgba(0, 0, 0, 0.2), 0 6px 20px 0 rgba(0, 0, 0, 0.19);
|
||||
|
||||
// Scrollspy
|
||||
|
||||
$scrollspy-menu-sidebar-font-size: 0.8rem;
|
||||
$scrollspy-menu-sidebar-color: #262626;
|
||||
$scrollspy-menu-sidebar-line-height: 1.1rem;
|
||||
$scrollspy-menu-sidebar-padding-x: 5px;
|
||||
$scrollspy-menu-sidebar-font-weight: 400;
|
||||
$scrollspy-menu-sidebar-transition: all 0.2s ease-in-out;
|
||||
$scrollspy-menu-sidebar-margin-y: 3px;
|
||||
|
||||
$scrollspy-menu-sidebar-active-color: $primary;
|
||||
$scrollspy-menu-sidebar-active-font-weight: 600;
|
||||
$scrollspy-menu-sidebar-active-border-width: 0.125rem;
|
||||
$scrollspy-menu-sidebar-active-border-color: $primary;
|
||||
|
||||
// Type
|
||||
|
||||
$note-padding: 10px;
|
||||
$note-border-width: 6px;
|
||||
$note-border-radius: 5px;
|
||||
$note-strong-font-weight: 600;
|
||||
$note-paragraph-font-weight: 500;
|
||||
|
|
|
|||
|
|
@ -4,10 +4,10 @@
|
|||
|
||||
.form-check {
|
||||
.form-check-input {
|
||||
margin-left: 1.79rem * -1;
|
||||
margin-left: $form-check-input-margin-left * -1;
|
||||
|
||||
&[type='radio'] {
|
||||
margin-left: 1.85rem * -1;
|
||||
margin-left: $form-check-input-radio-margin-left * -1;
|
||||
}
|
||||
}
|
||||
|
||||
|
|
@ -16,51 +16,51 @@
|
|||
}
|
||||
|
||||
.form-check-input {
|
||||
width: 18px;
|
||||
height: 18px;
|
||||
background-color: #fff;
|
||||
border: 2px solid rgb(117, 117, 117);
|
||||
width: $form-check-input-width;
|
||||
height: $form-check-input-height;
|
||||
background-color: $form-check-input-background-color;
|
||||
border: $form-check-input-border-width solid $form-check-input-border-color;
|
||||
|
||||
&:before {
|
||||
content: '';
|
||||
position: absolute;
|
||||
box-shadow: 0px 0px 0px 13px transparent;
|
||||
border-radius: 50%;
|
||||
width: 14px;
|
||||
height: 14px;
|
||||
box-shadow: $form-check-input-before-box-shadow;
|
||||
border-radius: $form-check-input-before-border-radius;
|
||||
width: $form-check-input-before-width;
|
||||
height: $form-check-input-before-height;
|
||||
background-color: transparent;
|
||||
opacity: 0;
|
||||
pointer-events: none;
|
||||
transform: scale(0);
|
||||
transform: $form-check-input-before-transform;
|
||||
}
|
||||
|
||||
&:hover {
|
||||
cursor: pointer;
|
||||
|
||||
&:before {
|
||||
opacity: 0.04;
|
||||
box-shadow: 0px 0px 0px 13px rgba(0, 0, 0, 0.6);
|
||||
opacity: $form-check-input-hover-before-opacity;
|
||||
box-shadow: $form-check-input-hover-before-box-shadow;
|
||||
}
|
||||
}
|
||||
|
||||
&:focus {
|
||||
box-shadow: none;
|
||||
border-color: rgb(117, 117, 117);
|
||||
transition: border-color 0.2s;
|
||||
border-color: $form-check-input-focus-border-color;
|
||||
transition: $form-check-input-focus-transition;
|
||||
|
||||
&: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;
|
||||
opacity: $form-check-input-focus-before-opacity;
|
||||
box-shadow: $form-check-input-focus-before-box-shadow;
|
||||
transform: $form-check-input-focus-before-transform;
|
||||
transition: $form-check-input-focus-before-transition;
|
||||
}
|
||||
}
|
||||
|
||||
&:checked {
|
||||
border-color: $primary;
|
||||
border-color: $form-check-input-checked-border-color;
|
||||
|
||||
&:before {
|
||||
opacity: 0.16;
|
||||
opacity: $form-check-input-checked-before-opacity;
|
||||
}
|
||||
|
||||
&:after {
|
||||
|
|
@ -69,12 +69,12 @@
|
|||
}
|
||||
|
||||
&:focus {
|
||||
border-color: $primary;
|
||||
border-color: $form-check-input-checked-focus-border-color;
|
||||
|
||||
&:before {
|
||||
box-shadow: 0px 0px 0px 13px $primary;
|
||||
transform: scale(1);
|
||||
transition: box-shadow 0.2s, transform 0.2s;
|
||||
box-shadow: $form-check-input-checked-focus-before-box-shadow;
|
||||
transform: $form-check-input-checked-focus-before-transform;
|
||||
transition: $form-check-input-checked-focus-before-transition;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
|
@ -82,115 +82,114 @@
|
|||
&:indeterminate {
|
||||
&:focus {
|
||||
&:before {
|
||||
box-shadow: 0px 0px 0px 13px $primary;
|
||||
box-shadow: $form-check-input-indeterminate-focus-before-box-shadow;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
&[type='checkbox'] {
|
||||
border-radius: 2px;
|
||||
border-radius: $form-check-input-checkbox-border-radius;
|
||||
|
||||
&:focus {
|
||||
&:after {
|
||||
content: '';
|
||||
position: absolute;
|
||||
width: 14px;
|
||||
height: 14px;
|
||||
width: $form-check-input-checkbox-focus-after-width;
|
||||
height: $form-check-input-checkbox-focus-after-height;
|
||||
z-index: 1;
|
||||
display: block;
|
||||
border-radius: 0;
|
||||
background-color: #fff;
|
||||
background-color: $form-check-input-checkbox-focus-after-background-color;
|
||||
}
|
||||
}
|
||||
|
||||
&:checked {
|
||||
background-image: none;
|
||||
background-color: $primary;
|
||||
background-color: $form-check-input-checkbox-checked-background-color;
|
||||
|
||||
&:after {
|
||||
display: block;
|
||||
transform: rotate(45deg);
|
||||
border-width: 2px;
|
||||
border-color: #fff;
|
||||
width: 6px;
|
||||
height: 13px;
|
||||
transform: $form-check-input-checkbox-checked-after-transform;
|
||||
border-width: $form-check-input-checkbox-checked-after-border-width;
|
||||
border-color: $form-check-input-checkbox-checked-after-border-color;
|
||||
width: $form-check-input-checkbox-checked-after-width;
|
||||
height: $form-check-input-checkbox-checked-after-height;
|
||||
border-style: solid;
|
||||
border-top: 0;
|
||||
border-left: 0;
|
||||
margin-left: 4px;
|
||||
margin-top: -1px;
|
||||
margin-left: $form-check-input-checkbox-checked-after-margin-left;
|
||||
margin-top: $form-check-input-checkbox-checked-after-margin-top;
|
||||
background-color: transparent;
|
||||
}
|
||||
|
||||
&:focus {
|
||||
background-color: $primary;
|
||||
background-color: $form-check-input-checkbox-checked-focus-background-color;
|
||||
}
|
||||
}
|
||||
|
||||
&:checked:indeterminate,
|
||||
&:indeterminate {
|
||||
background-image: none;
|
||||
background-color: $primary;
|
||||
background-color: $form-check-input-indeterminate-checked-background-color;
|
||||
|
||||
&:after {
|
||||
display: block;
|
||||
transform: rotate(90deg);
|
||||
border-width: 2px;
|
||||
border-color: #fff;
|
||||
border-width: 2px;
|
||||
width: 2px;
|
||||
height: 14px;
|
||||
transform: $form-check-input-indeterminate-checked-after-transform;
|
||||
border-width: $form-check-input-indeterminate-checked-after-border-width;
|
||||
border-color: $form-check-input-indeterminate-checked-after-border-color;
|
||||
width: $form-check-input-indeterminate-checked-after-width;
|
||||
height: $form-check-input-indeterminate-checked-after-height;
|
||||
border-style: solid;
|
||||
border-top: 0;
|
||||
border-left: 0;
|
||||
margin-left: 6px;
|
||||
margin-left: $form-check-input-indeterminate-checked-after-margin-left;
|
||||
margin-top: 0;
|
||||
}
|
||||
|
||||
&:focus {
|
||||
background-color: $primary;
|
||||
background-color: $form-check-input-indeterminate-focus-background-color;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
&[type='radio'] {
|
||||
border-radius: 50%;
|
||||
width: 20px;
|
||||
height: 20px;
|
||||
border-radius: $form-check-input-radio-border-radius;
|
||||
width: $form-check-input-radio-width;
|
||||
height: $form-check-input-radio-height;
|
||||
|
||||
&:before {
|
||||
width: 16px;
|
||||
height: 16px;
|
||||
width: $form-check-input-radio-before-width;
|
||||
height: $form-check-input-radio-before-height;
|
||||
}
|
||||
|
||||
&:after {
|
||||
content: '';
|
||||
position: absolute;
|
||||
width: 16px;
|
||||
height: 16px;
|
||||
width: $form-check-input-radio-after-width;
|
||||
height: $form-check-input-radio-after-height;
|
||||
z-index: 1;
|
||||
display: block;
|
||||
border-radius: 50%;
|
||||
background-color: #fff;
|
||||
border-radius: $form-check-input-radio-after-border-radius;
|
||||
background-color: $form-check-input-radio-after-background-color;
|
||||
}
|
||||
|
||||
&:checked {
|
||||
background-image: none;
|
||||
background-color: #fff;
|
||||
background-color: $form-check-input-radio-checked-background-color;
|
||||
|
||||
&:after {
|
||||
border-radius: 50%;
|
||||
width: 10px;
|
||||
height: 10px;
|
||||
border-color: $primary;
|
||||
background-color: $primary;
|
||||
margin-top: 3px;
|
||||
margin-left: 3px;
|
||||
transition: border-color;
|
||||
border-radius: $form-check-input-radio-checked-after-border-radius;
|
||||
width: $form-check-input-radio-checked-after-width;
|
||||
height: $form-check-input-radio-checked-after-height;
|
||||
border-color: $form-check-input-radio-checked-after-border-color;
|
||||
background-color: $form-check-input-radio-checked-after-background-color;
|
||||
margin-top: $form-check-input-radio-checked-after-margin-top;
|
||||
margin-left: $form-check-input-radio-checked-after-margin-left;
|
||||
transition: $form-check-input-radio-checked-after-transition;
|
||||
}
|
||||
|
||||
&:focus {
|
||||
background-color: #fff;
|
||||
background-color: $form-check-input-radio-checked-focus-background-color;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
|
@ -202,40 +201,50 @@
|
|||
}
|
||||
}
|
||||
|
||||
//
|
||||
// Switch
|
||||
//
|
||||
|
||||
.form-switch {
|
||||
padding-left: 1.85rem;
|
||||
padding-left: $form-switch-padding-left;
|
||||
|
||||
.form-check-input {
|
||||
background-image: none;
|
||||
border-width: 0px;
|
||||
border-radius: 7px;
|
||||
width: 36px;
|
||||
height: 14px;
|
||||
background-color: rgba(0, 0, 0, 0.38);
|
||||
margin-top: 0.35rem;
|
||||
margin-right: 0.7rem;
|
||||
border-width: 0;
|
||||
border-radius: $form-switch-form-check-input-border-radius;
|
||||
width: $form-switch-form-check-input-width;
|
||||
height: $form-switch-form-check-input-height;
|
||||
background-color: $form-switch-form-check-input-background-color;
|
||||
margin-top: $form-switch-form-check-input-margin-top;
|
||||
margin-right: $form-switch-form-check-input-margin-right;
|
||||
|
||||
&:after {
|
||||
content: '';
|
||||
position: absolute;
|
||||
border: none;
|
||||
z-index: 2;
|
||||
border-radius: 50%;
|
||||
width: 20px;
|
||||
height: 20px;
|
||||
background-color: #fff;
|
||||
margin-top: -3px;
|
||||
box-shadow: 0 3px 1px -2px rgba(0, 0, 0, 0.2), 0 2px 2px 0 rgba(0, 0, 0, 0.14),
|
||||
0 1px 5px 0 rgba(0, 0, 0, 0.12);
|
||||
transition: background-color 0.2s, transform 0.2s;
|
||||
border-radius: $form-switch-form-check-input-after-border-radius;
|
||||
width: $form-switch-form-check-input-after-width;
|
||||
height: $form-switch-form-check-input-after-height;
|
||||
background-color: $form-switch-form-check-input-after-background-color;
|
||||
margin-top: $form-switch-form-check-input-after-margin-top;
|
||||
box-shadow: $form-switch-form-check-input-after-box-shadow;
|
||||
transition: $form-switch-form-check-input-after-transition;
|
||||
}
|
||||
|
||||
&: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;
|
||||
box-shadow: $form-switch-form-check-input-focus-before-box-shadow;
|
||||
transform: $form-switch-form-check-input-focus-before-transform;
|
||||
transition: $form-switch-form-check-input-focus-before-transition;
|
||||
}
|
||||
|
||||
&:after {
|
||||
border-radius: $form-switch-form-check-input-focus-after-border-radius;
|
||||
width: $form-switch-form-check-input-focus-after-width;
|
||||
height: $form-switch-form-check-input-focus-after-height;
|
||||
}
|
||||
}
|
||||
|
||||
|
|
@ -246,10 +255,10 @@
|
|||
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;
|
||||
margin-left: $form-switch-form-check-input-checked-focus-before-margin-left;
|
||||
box-shadow: $form-switch-form-check-input-checked-focus-before-box-shadow;
|
||||
transform: $form-switch-form-check-input-checked-focus-before-transform;
|
||||
transition: $form-switch-form-check-input-checked-focus-before-transition;
|
||||
}
|
||||
}
|
||||
|
||||
|
|
@ -261,15 +270,14 @@
|
|||
position: absolute;
|
||||
border: none;
|
||||
z-index: 2;
|
||||
border-radius: 50%;
|
||||
width: 20px;
|
||||
height: 20px;
|
||||
background-color: $primary;
|
||||
margin-top: -3px;
|
||||
margin-left: 17px;
|
||||
box-shadow: 0 3px 1px -2px rgba(0, 0, 0, 0.2), 0 2px 2px 0 rgba(0, 0, 0, 0.14),
|
||||
0 1px 5px 0 rgba(0, 0, 0, 0.12);
|
||||
transition: background-color 0.2s, transform 0.2s;
|
||||
border-radius: $form-switch-form-check-input-checked-checkbox-after-border-radius;
|
||||
width: $form-switch-form-check-input-checked-checkbox-after-width;
|
||||
height: $form-switch-form-check-input-checked-checkbox-after-height;
|
||||
background-color: $form-switch-form-check-input-checked-checkbox-after-background-color;
|
||||
margin-top: $form-switch-form-check-input-checked-checkbox-after-margin-top;
|
||||
margin-left: $form-switch-form-check-input-checked-checkbox-after-margin-left;
|
||||
box-shadow: $form-switch-form-check-input-checked-checkbox-after-box-shadow;
|
||||
transition: $form-switch-form-check-input-checked-checkbox-after-transition;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
|
|
|||
|
|
@ -6,20 +6,20 @@
|
|||
position: relative;
|
||||
.form-control {
|
||||
min-height: auto;
|
||||
padding-top: 0.33rem;
|
||||
padding-bottom: 0.33rem;
|
||||
padding-top: $input-padding-top;
|
||||
padding-bottom: $input-padding-bottom;
|
||||
border: 0;
|
||||
background: transparent;
|
||||
transition: all 0.2s linear;
|
||||
transition: $input-transition;
|
||||
~ .form-label {
|
||||
position: absolute;
|
||||
top: 0;
|
||||
left: 0.75rem;
|
||||
padding-top: 0.37rem;
|
||||
left: $form-label-left;
|
||||
padding-top: $form-label-padding-top;
|
||||
pointer-events: none;
|
||||
transform-origin: 0 0;
|
||||
transition: all 0.2s ease-out;
|
||||
color: rgba(0, 0, 0, 0.6);
|
||||
transition: $form-label-transition;
|
||||
color: $form-label-color;
|
||||
margin-bottom: 0;
|
||||
}
|
||||
~ .form-notch {
|
||||
|
|
@ -34,8 +34,8 @@
|
|||
pointer-events: none;
|
||||
div {
|
||||
pointer-events: none;
|
||||
border: 1px solid;
|
||||
border-color: #bdbdbd;
|
||||
border: $border-width solid;
|
||||
border-color: $form-notch-div-border-color;
|
||||
box-sizing: border-box;
|
||||
background: transparent;
|
||||
}
|
||||
|
|
@ -43,14 +43,14 @@
|
|||
left: 0;
|
||||
top: 0;
|
||||
height: 100%;
|
||||
width: 8px;
|
||||
width: $form-notch-leading-width;
|
||||
border-right: none;
|
||||
border-radius: 4px 0 0 4px;
|
||||
border-radius: $form-notch-leading-border-radius 0 0 $form-notch-leading-border-radius;
|
||||
}
|
||||
.form-notch-middle {
|
||||
flex: 0 0 auto;
|
||||
width: auto;
|
||||
max-width: calc(100% - 16px);
|
||||
max-width: calc(100% - #{$form-notch-middle-max-width});
|
||||
height: 100%;
|
||||
border-right: none;
|
||||
border-left: none;
|
||||
|
|
@ -59,7 +59,7 @@
|
|||
flex-grow: 1;
|
||||
height: 100%;
|
||||
border-left: none;
|
||||
border-radius: 0 4px 4px 0;
|
||||
border-radius: 0 $form-notch-trailing-border-radius $form-notch-trailing-border-radius 0;
|
||||
}
|
||||
}
|
||||
&:focus,
|
||||
|
|
@ -73,104 +73,100 @@
|
|||
}
|
||||
&:focus ~ .form-label,
|
||||
&.active ~ .form-label {
|
||||
transform: translateY(-1rem) translateY(0.1rem) scale(0.8);
|
||||
transform: $input-focus-active-label-transform;
|
||||
}
|
||||
&:focus ~ .form-label {
|
||||
color: $primary;
|
||||
color: $input-focus-label-color;
|
||||
}
|
||||
&:focus ~ .form-notch .form-notch-middle,
|
||||
&.active ~ .form-notch .form-notch-middle {
|
||||
border-top: none;
|
||||
border-right: none;
|
||||
border-left: none;
|
||||
transition: $input-transition;
|
||||
}
|
||||
&:focus ~ .form-notch .form-notch-middle {
|
||||
border-bottom: 2px solid;
|
||||
border-color: $primary;
|
||||
transition: all 0.2s linear;
|
||||
border-bottom: $input-focus-border-width solid;
|
||||
border-color: $input-focus-border-color;
|
||||
}
|
||||
&:focus ~ .form-notch .form-notch-leading,
|
||||
&.active ~ .form-notch .form-notch-leading {
|
||||
border-right: none;
|
||||
transition: $input-transition;
|
||||
}
|
||||
&:focus ~ .form-notch .form-notch-leading {
|
||||
border-top: 2px solid $primary;
|
||||
border-bottom: 2px solid $primary;
|
||||
border-left: 2px solid $primary;
|
||||
transition: all 0.2s linear;
|
||||
border-top: $input-focus-border-width solid $input-focus-border-color;
|
||||
border-bottom: $input-focus-border-width solid $input-focus-border-color;
|
||||
border-left: $input-focus-border-width solid $input-focus-border-color;
|
||||
}
|
||||
&:focus ~ .form-notch .form-notch-trailing,
|
||||
&.active ~ .form-notch .form-notch-trailing {
|
||||
border-left: none;
|
||||
transition: $input-transition;
|
||||
}
|
||||
&:focus ~ .form-notch .form-notch-trailing {
|
||||
border-top: 2px solid;
|
||||
border-bottom: 2px solid;
|
||||
border-right: 2px solid;
|
||||
border-color: $primary;
|
||||
transition: all 0.2s linear;
|
||||
border-top: $input-focus-border-width solid;
|
||||
border-bottom: $input-focus-border-width solid;
|
||||
border-right: $input-focus-border-width solid;
|
||||
border-color: $input-focus-border-color;
|
||||
}
|
||||
&:disabled,
|
||||
&.disabled,
|
||||
&[readonly] {
|
||||
background-color: #e9ecef;
|
||||
background-color: $input-disabled-background-color;
|
||||
}
|
||||
&::placeholder {
|
||||
opacity: 0;
|
||||
}
|
||||
&.form-control-lg {
|
||||
font-size: 1rem;
|
||||
line-height: 2.15;
|
||||
padding-left: 0.75rem;
|
||||
padding-right: 0.75rem;
|
||||
font-size: $input-font-size-lg;
|
||||
line-height: $input-line-height-lg;
|
||||
~ .form-label {
|
||||
padding-top: 0.7rem;
|
||||
padding-top: $form-label-padding-top-lg;
|
||||
}
|
||||
&:focus ~ .form-label,
|
||||
&.active ~ .form-label {
|
||||
transform: translateY(-1.25rem) translateY(0.1rem) scale(0.8);
|
||||
transform: $input-focus-active-label-transform-lg;
|
||||
}
|
||||
}
|
||||
&.form-control-sm {
|
||||
font-size: 0.775rem;
|
||||
line-height: 1.5;
|
||||
padding-left: 0.75rem;
|
||||
padding-right: 0.75rem;
|
||||
font-size: $input-font-size-sm;
|
||||
line-height: $input-line-height-sm;
|
||||
~ .form-label {
|
||||
padding-top: 0.33rem;
|
||||
font-size: 0.775rem;
|
||||
padding-top: $form-label-padding-top-sm;
|
||||
font-size: $form-label-font-size-sm;
|
||||
}
|
||||
&:focus ~ .form-label,
|
||||
&.active ~ .form-label {
|
||||
transform: translateY(-0.83rem) translateY(0.1rem) scale(0.8);
|
||||
transform: $input-focus-active-label-transform-sm;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
&.form-white {
|
||||
.form-control {
|
||||
color: #fff;
|
||||
color: $form-white-input-color;
|
||||
~ .form-label {
|
||||
color: #fbfbfb;
|
||||
color: $form-white-label-color;
|
||||
}
|
||||
~ .form-notch {
|
||||
div {
|
||||
border-color: #fbfbfb;
|
||||
border-color: $form-white-notch-div-border-color;
|
||||
}
|
||||
}
|
||||
&:focus ~ .form-label {
|
||||
color: #fff;
|
||||
color: $form-white-input-focus-label-color;
|
||||
}
|
||||
&:focus ~ .form-notch .form-notch-middle {
|
||||
border-color: #fff;
|
||||
border-color: $form-white-input-focus-border-color;
|
||||
}
|
||||
&:focus ~ .form-notch .form-notch-leading {
|
||||
border-top: 2px solid #fff;
|
||||
border-bottom: 2px solid #fff;
|
||||
border-left: 2px solid #fff;
|
||||
border-top: $input-focus-border-width solid $form-white-input-focus-border-color;
|
||||
border-bottom: $input-focus-border-width solid $form-white-input-focus-border-color;
|
||||
border-left: $input-focus-border-width solid $form-white-input-focus-border-color;
|
||||
}
|
||||
&:focus ~ .form-notch .form-notch-trailing {
|
||||
border-color: #fff;
|
||||
border-color: $form-white-input-focus-border-color;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
|
|
|||
|
|
@ -1,9 +1,9 @@
|
|||
.form-file {
|
||||
height: calc(1.8em + 0.33rem + 2px);
|
||||
height: $form-file-height;
|
||||
}
|
||||
|
||||
.form-file-input {
|
||||
height: calc(1.8em + 0.33rem + 2px);
|
||||
height: $form-file-height;
|
||||
|
||||
&:focus-within ~ .form-file-label {
|
||||
border: none;
|
||||
|
|
@ -13,83 +13,79 @@
|
|||
&:focus-within ~ .form-file-label .form-file-text,
|
||||
&:focus-within ~ .form-file-label .form-file-button {
|
||||
border-style: solid;
|
||||
border-color: $primary;
|
||||
transition: all 0.2s linear;
|
||||
border-color: $form-file-label-focus-border-color;
|
||||
transition: $form-file-label-focus-transition;
|
||||
}
|
||||
|
||||
&:focus-within ~ .form-file-label .form-file-text {
|
||||
border-width: 2px 1px 2px 2px;
|
||||
border-width: $form-file-label-focus-text-border-width;
|
||||
}
|
||||
|
||||
&:focus-within ~ .form-file-label .form-file-button {
|
||||
border-width: 2px 2px 2px 1px;
|
||||
border-width: $form-file-label-focus-button-border-width;
|
||||
}
|
||||
|
||||
&[disabled] ~ .form-file-label .form-file-text,
|
||||
&:disabled ~ .form-file-label .form-file-text,
|
||||
&[disabled] ~ .form-file-label .form-file-button,
|
||||
&:disabled ~ .form-file-label .form-file-button {
|
||||
background-color: #e9ecef;
|
||||
background-color: $form-file-label-disabled-background-color;
|
||||
}
|
||||
}
|
||||
|
||||
.form-file-label {
|
||||
height: calc(1.8em + 0.33rem + 2px);
|
||||
border-color: rgba(0, 0, 0, 0.38);
|
||||
height: $form-file-label-height;
|
||||
border-color: $form-file-label-border-color;
|
||||
}
|
||||
|
||||
.form-file-text {
|
||||
padding-top: 0.33rem;
|
||||
padding-bottom: 0.33rem;
|
||||
border-color: #bdbdbd;
|
||||
padding-top: $form-file-text-padding-y;
|
||||
padding-bottom: $form-file-text-padding-y;
|
||||
border-color: $form-file-text-border-color;
|
||||
}
|
||||
|
||||
.form-file-button {
|
||||
line-height: 1.5;
|
||||
background-color: #fff;
|
||||
border-color: #bdbdbd;
|
||||
line-height: $form-file-button-line-height;
|
||||
background-color: $form-file-button-background-color;
|
||||
border-color: $form-file-button-border-color;
|
||||
}
|
||||
|
||||
.form-file-sm {
|
||||
height: calc(1.7em + 0.33rem + 2px);
|
||||
font-size: 0.775rem;
|
||||
height: $form-file-sm-height;
|
||||
font-size: $form-file-sm-font-size;
|
||||
|
||||
.form-file-input {
|
||||
height: calc(1.7em + 0.33rem + 2px);
|
||||
height: $form-file-sm-height;
|
||||
}
|
||||
|
||||
.form-file-label {
|
||||
height: calc(1.7em + 0.33rem + 2px);
|
||||
height: $form-file-sm-height;
|
||||
}
|
||||
|
||||
.form-file-text,
|
||||
.form-file-button {
|
||||
line-height: 1.5;
|
||||
padding-top: 0.33rem;
|
||||
padding-bottom: 0.33rem;
|
||||
line-height: $form-file-sm-line-height;
|
||||
padding-top: $form-file-sm-padding-y;
|
||||
padding-bottom: $form-file-sm-padding-y;
|
||||
}
|
||||
}
|
||||
|
||||
.form-file-lg {
|
||||
height: calc(2.315em + 0.33rem + 2px);
|
||||
font-size: 1rem;
|
||||
height: $form-file-lg-height;
|
||||
font-size: $form-file-lg-font-size;
|
||||
|
||||
.form-file-input {
|
||||
height: calc(2.315em + 0.33rem + 2px);
|
||||
height: $form-file-lg-height;
|
||||
}
|
||||
|
||||
.form-file-label {
|
||||
height: calc(2.315em + 0.33rem + 2px);
|
||||
height: $form-file-lg-height;
|
||||
}
|
||||
|
||||
.form-file-text,
|
||||
.form-file-button {
|
||||
line-height: 2.15;
|
||||
padding-top: 0.33rem;
|
||||
padding-bottom: 0.33rem;
|
||||
line-height: $form-file-lg-line-height;
|
||||
padding-top: $form-file-lg-padding-y;
|
||||
padding-bottom: $form-file-lg-padding-y;
|
||||
}
|
||||
}
|
||||
|
||||
.form-file.test .form-file-input:focus-within ~ .form-file-label .form-file-text {
|
||||
border-width: 2px;
|
||||
}
|
||||
|
|
|
|||
|
|
@ -1,146 +0,0 @@
|
|||
.form-outline {
|
||||
position: relative;
|
||||
.form-control {
|
||||
min-height: auto;
|
||||
padding-top: 0.33rem;
|
||||
padding-bottom: 0.33rem;
|
||||
border: 0;
|
||||
background: transparent;
|
||||
transition: all 0.2s linear;
|
||||
~ .form-label {
|
||||
position: absolute;
|
||||
top: 0;
|
||||
left: 0.75rem;
|
||||
padding-top: 0.37rem;
|
||||
pointer-events: none;
|
||||
transform-origin: 0 0;
|
||||
transition: all 0.2s ease-out;
|
||||
color: rgba(0, 0, 0, 0.6);
|
||||
margin-bottom: 0;
|
||||
}
|
||||
~ .form-notch {
|
||||
display: flex;
|
||||
position: absolute;
|
||||
left: 0;
|
||||
top: 0;
|
||||
width: 100%;
|
||||
max-width: 100%;
|
||||
height: 100%;
|
||||
text-align: left;
|
||||
pointer-events: none;
|
||||
div {
|
||||
pointer-events: none;
|
||||
border: 1px solid;
|
||||
border-color: #bdbdbd;
|
||||
box-sizing: border-box;
|
||||
background: transparent;
|
||||
}
|
||||
.form-notch-leading {
|
||||
left: 0;
|
||||
top: 0;
|
||||
height: 100%;
|
||||
width: 8px;
|
||||
border-right: none;
|
||||
border-radius: 4px 0 0 4px;
|
||||
}
|
||||
.form-notch-middle {
|
||||
flex: 0 0 auto;
|
||||
width: auto;
|
||||
max-width: calc(100% - 16px);
|
||||
height: 100%;
|
||||
border-right: none;
|
||||
border-left: none;
|
||||
}
|
||||
.form-notch-trailing {
|
||||
flex-grow: 1;
|
||||
height: 100%;
|
||||
border-left: none;
|
||||
border-radius: 0 4px 4px 0;
|
||||
}
|
||||
}
|
||||
&:focus,
|
||||
&.active {
|
||||
&::placeholder {
|
||||
opacity: 1;
|
||||
}
|
||||
}
|
||||
&:focus {
|
||||
box-shadow: none !important;
|
||||
}
|
||||
&:focus ~ .form-label,
|
||||
&.active ~ .form-label {
|
||||
transform: translateY(-1rem) translateY(0.1rem) scale(0.8);
|
||||
}
|
||||
&:focus ~ .form-label {
|
||||
color: $primary;
|
||||
}
|
||||
&:focus ~ .form-notch .form-notch-middle,
|
||||
&.active ~ .form-notch .form-notch-middle {
|
||||
border-top: none;
|
||||
border-right: none;
|
||||
border-left: none;
|
||||
}
|
||||
&:focus ~ .form-notch .form-notch-middle {
|
||||
border-bottom: 2px solid;
|
||||
border-color: $primary;
|
||||
transition: all 0.2s linear;
|
||||
}
|
||||
&:focus ~ .form-notch .form-notch-leading,
|
||||
&.active ~ .form-notch .form-notch-leading {
|
||||
border-right: none;
|
||||
}
|
||||
&:focus ~ .form-notch .form-notch-leading {
|
||||
border-top: 2px solid;
|
||||
border-bottom: 2px solid;
|
||||
border-left: 2px solid;
|
||||
border-color: $primary;
|
||||
transition: all 0.2s linear;
|
||||
}
|
||||
&:focus ~ .form-notch .form-notch-trailing,
|
||||
&.active ~ .form-notch .form-notch-trailing {
|
||||
border-left: none;
|
||||
}
|
||||
&:focus ~ .form-notch .form-notch-trailing {
|
||||
border-top: 2px solid;
|
||||
border-bottom: 2px solid;
|
||||
border-right: 2px solid;
|
||||
border-color: $primary;
|
||||
transition: all 0.2s linear;
|
||||
}
|
||||
&:disabled,
|
||||
&.disabled,
|
||||
&[readonly] {
|
||||
background-color: #e9ecef;
|
||||
}
|
||||
&::placeholder {
|
||||
opacity: 0;
|
||||
}
|
||||
&.form-control-lg {
|
||||
font-size: 1rem;
|
||||
line-height: 2.15;
|
||||
padding-left: 0.75rem;
|
||||
padding-right: 0.75rem;
|
||||
~ .form-label {
|
||||
padding-top: 0.7rem;
|
||||
}
|
||||
&:focus ~ .form-label,
|
||||
&.active ~ .form-label {
|
||||
transform: translateY(-1.25rem) translateY(0.1rem) scale(0.8);
|
||||
}
|
||||
}
|
||||
&.form-control-sm {
|
||||
font-size: 0.775rem;
|
||||
line-height: 1.5;
|
||||
padding-left: 0.75rem;
|
||||
padding-right: 0.75rem;
|
||||
~ .form-label {
|
||||
padding-top: 0.33rem;
|
||||
font-size: 0.775rem;
|
||||
}
|
||||
&:focus ~ .form-label,
|
||||
&.active ~ .form-label {
|
||||
transform: translateY(-0.83rem) translateY(0.1rem) scale(0.8);
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
|
@ -26,13 +26,13 @@
|
|||
}
|
||||
|
||||
&::-webkit-slider-thumb {
|
||||
margin-top: -6px; // Webkit specific
|
||||
margin-top: $form-range-webkit-slider-thumb-margin-top; // Webkit specific
|
||||
box-shadow: none;
|
||||
appearance: none;
|
||||
}
|
||||
|
||||
&::-webkit-slider-runnable-track {
|
||||
height: 4px;
|
||||
height: $form-range-webkit-slider-runnable-track-height;
|
||||
border-radius: 0;
|
||||
}
|
||||
|
||||
|
|
|
|||
|
|
@ -1,3 +0,0 @@
|
|||
//
|
||||
// Form text
|
||||
//
|
||||
|
|
@ -4,50 +4,50 @@
|
|||
|
||||
.input-group {
|
||||
> .form-control {
|
||||
min-height: calc(1.5em + 0.33rem + 2px);
|
||||
padding-top: 0.27rem;
|
||||
padding-bottom: 0.27rem;
|
||||
transition: all 0.2s linear;
|
||||
min-height: $input-group-min-height;
|
||||
padding-top: $input-group-padding-y;
|
||||
padding-bottom: $input-group-padding-y;
|
||||
transition: $input-group-transition;
|
||||
|
||||
&:focus {
|
||||
transition: all 0.2s linear;
|
||||
border-color: $primary;
|
||||
transition: $input-group-focus-transition;
|
||||
border-color: $input-group-focus-border-color;
|
||||
outline: 0;
|
||||
box-shadow: inset 0 0 0 1px $primary;
|
||||
box-shadow: $input-group-focus-box-shadow;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.input-group-text {
|
||||
background-color: transparent;
|
||||
padding-top: 0.27rem;
|
||||
padding-bottom: 0.27rem;
|
||||
padding-top: $input-group-text-padding-y;
|
||||
padding-bottom: $input-group-text-padding-y;
|
||||
}
|
||||
|
||||
.input-group-lg {
|
||||
> .form-control {
|
||||
height: calc(2.315em + 0.33rem + 2px);
|
||||
font-size: 1rem;
|
||||
padding-top: 0.33rem;
|
||||
padding-bottom: 0.33rem;
|
||||
height: $input-group-lg-height;
|
||||
font-size: $input-group-lg-font-size;
|
||||
padding-top: $input-group-lg-padding-y;
|
||||
padding-bottom: $input-group-lg-padding-y;
|
||||
}
|
||||
|
||||
.input-group-text {
|
||||
font-size: 1rem;
|
||||
font-size: $input-group-lg-text-font-size;
|
||||
}
|
||||
}
|
||||
|
||||
.input-group-sm {
|
||||
> .form-control {
|
||||
height: calc(1.7em + 0.33rem + 2px);
|
||||
font-size: 0.775rem;
|
||||
padding-top: 0.33rem;
|
||||
padding-bottom: 0.33rem;
|
||||
height: $input-group-sm-height-height;
|
||||
font-size: $input-group-sm-font-size;
|
||||
padding-top: $input-group-sm-padding-y;
|
||||
padding-bottom: $input-group-sm-padding-y;
|
||||
}
|
||||
|
||||
.input-group-text {
|
||||
font-size: 0.775rem;
|
||||
line-height: 1.5;
|
||||
font-size: $input-group-sm-text-font-size;
|
||||
line-height: $input-group-sm-text-line-height;
|
||||
}
|
||||
}
|
||||
|
||||
|
|
@ -58,7 +58,8 @@
|
|||
}
|
||||
input + .input-group-text {
|
||||
border: 0;
|
||||
border-left: 1px solid #bdbdbd;
|
||||
border-left: $input-group-form-outline-border-left-width solid
|
||||
$input-group-form-outline-border-left-color;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
|
|
|||
|
|
@ -1,36 +0,0 @@
|
|||
//
|
||||
// Labels
|
||||
//
|
||||
|
||||
.form-label {
|
||||
margin-bottom: $form-label-margin-bottom;
|
||||
@include font-size($form-label-font-size);
|
||||
font-style: $form-label-font-style;
|
||||
font-weight: $form-label-font-weight;
|
||||
color: $form-label-color;
|
||||
}
|
||||
|
||||
// For use with horizontal and inline forms, when you need the label (or legend)
|
||||
// text to align with the form controls.
|
||||
.col-form-label {
|
||||
padding-top: add($input-padding-y, $input-border-width);
|
||||
padding-bottom: add($input-padding-y, $input-border-width);
|
||||
margin-bottom: 0; // Override the `<legend>` default
|
||||
@include font-size(inherit); // Override the `<legend>` default
|
||||
font-style: $form-label-font-style;
|
||||
font-weight: $form-label-font-weight;
|
||||
line-height: $input-line-height;
|
||||
color: $form-label-color;
|
||||
}
|
||||
|
||||
.col-form-label-lg {
|
||||
padding-top: add($input-padding-y-lg, $input-border-width);
|
||||
padding-bottom: add($input-padding-y-lg, $input-border-width);
|
||||
@include font-size($input-font-size-lg);
|
||||
}
|
||||
|
||||
.col-form-label-sm {
|
||||
padding-top: add($input-padding-y-sm, $input-border-width);
|
||||
padding-bottom: add($input-padding-y-sm, $input-border-width);
|
||||
@include font-size($input-font-size-sm);
|
||||
}
|
||||
|
|
@ -1,45 +1,142 @@
|
|||
// Form validation
|
||||
//
|
||||
.was-validated :valid ~ .valid-feedback,
|
||||
.was-validated :valid ~ .valid-tooltip,
|
||||
.is-valid ~ .valid-feedback,
|
||||
.is-valid ~ .valid-tooltip {
|
||||
position: absolute;
|
||||
}
|
||||
|
||||
.was-validated .form-control:valid,
|
||||
.form-control.is-valid,
|
||||
.was-validated .form-control:invalid,
|
||||
.form-control.is-invalid {
|
||||
margin-bottom: 1rem;
|
||||
}
|
||||
|
||||
.valid-feedback,
|
||||
.invalid-feedback {
|
||||
margin-top: -0.75rem;
|
||||
}
|
||||
|
||||
.was-validated :invalid ~ .invalid-feedback,
|
||||
.was-validated :invalid ~ .invalid-tooltip,
|
||||
.is-invalid ~ .invalid-feedback,
|
||||
.is-invalid ~ .invalid-tooltip {
|
||||
position: absolute;
|
||||
}
|
||||
|
||||
.was-validated .form-control:valid,
|
||||
.form-control.is-valid,
|
||||
.was-validated .form-control:invalid,
|
||||
.form-control.is-invalid,
|
||||
.was-validated .form-select:invalid,
|
||||
.form-select.is-invalid {
|
||||
background-image: none;
|
||||
}
|
||||
// Material styles for form validation
|
||||
//
|
||||
|
||||
.was-validated {
|
||||
:valid {
|
||||
~ .valid-feedback,
|
||||
~ .valid-tooltip {
|
||||
position: absolute;
|
||||
}
|
||||
&.form-check-input {
|
||||
&:focus {
|
||||
box-shadow: none;
|
||||
&:before {
|
||||
box-shadow: 0px 0px 0px 13px $success;
|
||||
}
|
||||
}
|
||||
&:checked {
|
||||
&:focus {
|
||||
&:before {
|
||||
box-shadow: 0px 0px 0px 13px $success;
|
||||
}
|
||||
}
|
||||
}
|
||||
&[type='checkbox'] {
|
||||
&:checked {
|
||||
&:focus {
|
||||
background-color: $success;
|
||||
border-color: $success;
|
||||
}
|
||||
}
|
||||
}
|
||||
&[type='radio'] {
|
||||
&:checked {
|
||||
border-color: $success;
|
||||
background-color: $white;
|
||||
&:focus {
|
||||
&:before {
|
||||
box-shadow: 0px 0px 0px 13px $success;
|
||||
}
|
||||
}
|
||||
&:after {
|
||||
border-color: $success;
|
||||
background-color: $success;
|
||||
}
|
||||
}
|
||||
}
|
||||
~ .form-check-label {
|
||||
margin-bottom: 1rem;
|
||||
}
|
||||
}
|
||||
&.form-file-input {
|
||||
&:focus {
|
||||
~ .form-file-label {
|
||||
box-shadow: none;
|
||||
}
|
||||
}
|
||||
&:focus-within {
|
||||
~ .form-file-label {
|
||||
.form-file-text,
|
||||
.form-file-button {
|
||||
border-color: $success;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
:invalid {
|
||||
~ .invalid-feedback,
|
||||
~ .invalid-tooltip {
|
||||
position: absolute;
|
||||
}
|
||||
&.form-check-input {
|
||||
&:focus {
|
||||
box-shadow: none;
|
||||
&:before {
|
||||
box-shadow: 0px 0px 0px 13px $danger;
|
||||
}
|
||||
}
|
||||
&:checked {
|
||||
&:focus {
|
||||
&:before {
|
||||
box-shadow: 0px 0px 0px 13px $danger;
|
||||
}
|
||||
}
|
||||
}
|
||||
&[type='checkbox'] {
|
||||
&:checked {
|
||||
&:focus {
|
||||
background-color: $danger;
|
||||
border-color: $danger;
|
||||
}
|
||||
}
|
||||
}
|
||||
&[type='radio'] {
|
||||
&:checked {
|
||||
border-color: $danger;
|
||||
background-color: $white;
|
||||
&:focus {
|
||||
&:before {
|
||||
box-shadow: 0px 0px 0px 13px $danger;
|
||||
}
|
||||
}
|
||||
&:after {
|
||||
border-color: $danger;
|
||||
background-color: $danger;
|
||||
}
|
||||
}
|
||||
}
|
||||
~ .form-check-label {
|
||||
margin-bottom: 1rem;
|
||||
}
|
||||
}
|
||||
&.form-file-input {
|
||||
&:focus {
|
||||
~ .form-file-label {
|
||||
box-shadow: none;
|
||||
}
|
||||
}
|
||||
&:focus-within {
|
||||
~ .form-file-label {
|
||||
.form-file-text,
|
||||
.form-file-button {
|
||||
border-color: $danger;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
.form-control {
|
||||
&:valid,
|
||||
&:invalid {
|
||||
margin-bottom: 1rem;
|
||||
background-image: none;
|
||||
}
|
||||
}
|
||||
.form-outline {
|
||||
.form-control {
|
||||
&:valid,
|
||||
&.is-valid {
|
||||
&:valid {
|
||||
~ .form-label {
|
||||
color: $success;
|
||||
}
|
||||
|
|
@ -50,8 +147,7 @@
|
|||
}
|
||||
}
|
||||
|
||||
&:invalid,
|
||||
&.is-invalid {
|
||||
&:invalid {
|
||||
~ .form-label {
|
||||
color: $danger;
|
||||
}
|
||||
|
|
@ -63,6 +159,212 @@
|
|||
}
|
||||
}
|
||||
}
|
||||
.input-group {
|
||||
.form-control {
|
||||
&:valid,
|
||||
&:invalid {
|
||||
margin-bottom: 0;
|
||||
}
|
||||
}
|
||||
.valid-feedback,
|
||||
.invalid-feedback {
|
||||
margin-top: 2.5rem;
|
||||
}
|
||||
.valid-tooltip,
|
||||
.invalid-tooltip {
|
||||
border-radius: 0.25rem !important;
|
||||
}
|
||||
}
|
||||
.form-file {
|
||||
margin-bottom: 2.5rem;
|
||||
.form-file-input {
|
||||
&:focus-within {
|
||||
~ .form-file-label {
|
||||
border: none;
|
||||
box-shadow: none;
|
||||
}
|
||||
}
|
||||
&:valid {
|
||||
~ .form-file-label {
|
||||
.form-file-text,
|
||||
.form-file-button {
|
||||
border-color: $success;
|
||||
}
|
||||
}
|
||||
}
|
||||
&:invalid {
|
||||
~ .form-file-label {
|
||||
.form-file-text,
|
||||
.form-file-button {
|
||||
border-color: $danger;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.is-valid {
|
||||
~ .valid-feedback,
|
||||
~ .valid-tooltip {
|
||||
position: absolute;
|
||||
}
|
||||
&.form-control {
|
||||
margin-bottom: 1rem;
|
||||
background-image: none;
|
||||
}
|
||||
&.form-select {
|
||||
background-image: none;
|
||||
}
|
||||
&.form-check-input {
|
||||
&:focus {
|
||||
box-shadow: none;
|
||||
&:before {
|
||||
box-shadow: 0px 0px 0px 13px $success;
|
||||
}
|
||||
}
|
||||
&:checked {
|
||||
&:focus {
|
||||
&:before {
|
||||
box-shadow: 0px 0px 0px 13px $success;
|
||||
}
|
||||
}
|
||||
}
|
||||
&[type='checkbox'] {
|
||||
border-color: $success;
|
||||
&:before {
|
||||
border-color: $white;
|
||||
}
|
||||
&:checked {
|
||||
background-color: $success;
|
||||
border-color: $success;
|
||||
&:before {
|
||||
border-color: $white;
|
||||
}
|
||||
&:focus {
|
||||
background-color: $success;
|
||||
border-color: $success;
|
||||
}
|
||||
}
|
||||
}
|
||||
&[type='radio'] {
|
||||
&:checked {
|
||||
border-color: $success;
|
||||
background-color: $white;
|
||||
&:focus {
|
||||
&:before {
|
||||
box-shadow: 0px 0px 0px 13px $success;
|
||||
}
|
||||
}
|
||||
&:after {
|
||||
border-color: $success;
|
||||
background-color: $success;
|
||||
}
|
||||
}
|
||||
}
|
||||
~ .form-check-label {
|
||||
margin-bottom: 1rem;
|
||||
}
|
||||
}
|
||||
&.form-file-input {
|
||||
&:focus {
|
||||
~ .form-file-label {
|
||||
box-shadow: none;
|
||||
}
|
||||
}
|
||||
&:focus-within {
|
||||
~ .form-file-label {
|
||||
.form-file-text,
|
||||
.form-file-button {
|
||||
border-color: $success;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.is-invalid {
|
||||
~ .invalid-feedback,
|
||||
~ .invalid-tooltip {
|
||||
position: absolute;
|
||||
}
|
||||
&.form-control {
|
||||
margin-bottom: 1rem;
|
||||
background-image: none;
|
||||
}
|
||||
&.form-select {
|
||||
background-image: none;
|
||||
}
|
||||
&.form-check-input {
|
||||
&:focus {
|
||||
box-shadow: none;
|
||||
&:before {
|
||||
box-shadow: 0px 0px 0px 13px $danger;
|
||||
}
|
||||
}
|
||||
&:checked {
|
||||
&:focus {
|
||||
&:before {
|
||||
box-shadow: 0px 0px 0px 13px $danger;
|
||||
}
|
||||
}
|
||||
}
|
||||
&[type='checkbox'] {
|
||||
border-color: $danger;
|
||||
&:before {
|
||||
border-color: $white;
|
||||
}
|
||||
&:checked {
|
||||
background-color: $danger;
|
||||
border-color: $danger;
|
||||
&:before {
|
||||
border-color: $white;
|
||||
}
|
||||
&:focus {
|
||||
background-color: $danger;
|
||||
border-color: $danger;
|
||||
}
|
||||
}
|
||||
}
|
||||
&[type='radio'] {
|
||||
&:checked {
|
||||
border-color: $danger;
|
||||
background-color: $white;
|
||||
&:focus {
|
||||
&:before {
|
||||
box-shadow: 0px 0px 0px 13px $danger;
|
||||
}
|
||||
}
|
||||
&:after {
|
||||
border-color: $danger;
|
||||
background-color: $danger;
|
||||
}
|
||||
}
|
||||
}
|
||||
~ .form-check-label {
|
||||
margin-bottom: 1rem;
|
||||
}
|
||||
}
|
||||
&.form-file-input {
|
||||
&:focus {
|
||||
~ .form-file-label {
|
||||
box-shadow: none;
|
||||
}
|
||||
}
|
||||
&:focus-within {
|
||||
~ .form-file-label {
|
||||
.form-file-text,
|
||||
.form-file-button {
|
||||
border-color: $danger;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.valid-feedback,
|
||||
.invalid-feedback {
|
||||
margin-top: -0.75rem;
|
||||
}
|
||||
|
||||
.form-outline {
|
||||
|
|
@ -91,228 +393,34 @@
|
|||
}
|
||||
}
|
||||
|
||||
.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;
|
||||
.input-group {
|
||||
.form-control {
|
||||
&.is-valid,
|
||||
&.is-invalid {
|
||||
margin-bottom: 0;
|
||||
}
|
||||
}
|
||||
.valid-feedback,
|
||||
.invalid-feedback {
|
||||
margin-top: 2.5rem;
|
||||
}
|
||||
.valid-tooltip,
|
||||
.invalid-tooltip {
|
||||
border-radius: 0.25rem !important;
|
||||
}
|
||||
}
|
||||
|
||||
.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;
|
||||
}
|
||||
|
||||
.form-check-input.is-valid:checked[type='checkbox']:before {
|
||||
border-color: #fff;
|
||||
}
|
||||
.form-check-input.is-valid:checked[type='checkbox'] {
|
||||
background-color: $success;
|
||||
border-color: $success;
|
||||
}
|
||||
|
||||
.form-check-input.is-invalid:checked[type='checkbox']:before {
|
||||
border-color: #fff;
|
||||
}
|
||||
.form-check-input.is-invalid:checked[type='checkbox'] {
|
||||
background-color: $danger;
|
||||
border-color: $danger;
|
||||
}
|
||||
.form-check-input.is-invalid[type='checkbox']:before {
|
||||
border-color: #fff;
|
||||
}
|
||||
.form-check-input.is-invalid[type='checkbox'] {
|
||||
border-color: $danger;
|
||||
}
|
||||
|
||||
.was-validated .form-check-input:valid ~ .form-check-label,
|
||||
.form-check-input.is-valid ~ .form-check-label,
|
||||
.was-validated .form-check-input:invalid ~ .form-check-label,
|
||||
.form-check-input.is-invalid ~ .form-check-label {
|
||||
margin-bottom: 1rem;
|
||||
}
|
||||
|
||||
.was-validated .form-check-input:invalid:focus,
|
||||
.form-check-input.is-invalid:focus {
|
||||
box-shadow: none;
|
||||
}
|
||||
|
||||
.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:invalid:focus:before {
|
||||
box-shadow: 0px 0px 0px 13px $danger;
|
||||
}
|
||||
|
||||
.form-check-input.is-valid:checked:focus:before {
|
||||
box-shadow: 0px 0px 0px 13px $success;
|
||||
}
|
||||
|
||||
.form-check-input.is-invalid:checked:focus:before {
|
||||
box-shadow: 0px 0px 0px 13px $danger;
|
||||
}
|
||||
|
||||
.form-check-input.is-invalid: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,
|
||||
.input-group .form-control.is-invalid,
|
||||
.was-validated .input-group .form-control:valid,
|
||||
.input-group .form-control.is-valid {
|
||||
margin-bottom: 0;
|
||||
}
|
||||
|
||||
.was-validated .input-group .valid-feedback,
|
||||
.was-validated .input-group .invalid-feedback,
|
||||
.input-group .valid-feedback,
|
||||
.input-group .invalid-feedback {
|
||||
margin-top: 2.5rem;
|
||||
}
|
||||
|
||||
.form-file .valid-feedback,
|
||||
.form-file .invalid-feedback {
|
||||
margin-top: 0.25rem;
|
||||
}
|
||||
|
||||
// Valid radio
|
||||
|
||||
.was-validated .form-check-input[type='radio']:valid:checked {
|
||||
border-color: $success;
|
||||
}
|
||||
|
||||
.was-validated .form-check-input[type='radio']:valid:checked:focus:before {
|
||||
box-shadow: 1px 1px 0px 13px $success;
|
||||
}
|
||||
|
||||
.was-validated .form-check-input[type='radio']:valid:checked {
|
||||
background-color: #fff;
|
||||
}
|
||||
|
||||
.was-validated .form-check-input[type='radio']:valid:checked:after {
|
||||
border-color: $success;
|
||||
background-color: $success;
|
||||
}
|
||||
|
||||
.form-check-input[type='radio'].is-valid:checked {
|
||||
border-color: $success;
|
||||
}
|
||||
|
||||
.form-check-input[type='radio'].is-valid:checked:focus:before {
|
||||
box-shadow: 1px 1px 0px 13px $success;
|
||||
}
|
||||
|
||||
.form-check-input[type='radio'].is-valid:checked {
|
||||
background-color: #fff;
|
||||
}
|
||||
|
||||
.form-check-input[type='radio'].is-valid:checked:after {
|
||||
border-color: $success;
|
||||
background-color: $success;
|
||||
}
|
||||
|
||||
// Invalid radio
|
||||
|
||||
.was-validated .form-check-input[type='radio']:invalid:checked {
|
||||
border-color: $danger;
|
||||
}
|
||||
|
||||
.was-validated .form-check-input[type='radio']:invalid:checked:focus:before {
|
||||
box-shadow: 1px 1px 0px 13px $danger;
|
||||
}
|
||||
|
||||
.was-validated .form-check-input[type='radio']:invalid:checked {
|
||||
background-color: #fff;
|
||||
}
|
||||
|
||||
.was-validated .form-check-input[type='radio']:invalid:checked:after {
|
||||
border-color: $danger;
|
||||
background-color: $danger;
|
||||
}
|
||||
|
||||
.form-check-input[type='radio'].is-invalid:checked {
|
||||
border-color: $danger;
|
||||
}
|
||||
|
||||
.form-check-input[type='radio'].is-invalid:checked:focus:before {
|
||||
box-shadow: 1px 1px 0px 13px $danger;
|
||||
}
|
||||
|
||||
.form-check-input[type='radio'].is-invalid:checked {
|
||||
background-color: #fff;
|
||||
}
|
||||
|
||||
.form-check-input[type='radio'].is-invalid:checked:after {
|
||||
border-color: $danger;
|
||||
background-color: $danger;
|
||||
}
|
||||
|
||||
.was-validated .form-file-input:invalid:focus ~ .form-file-label,
|
||||
.form-file-input.is-invalid:focus ~ .form-file-label,
|
||||
.was-validated .form-file-input:valid:focus ~ .form-file-label,
|
||||
.form-file-input.is-valid:focus ~ .form-file-label {
|
||||
box-shadow: none;
|
||||
}
|
||||
|
||||
.was-validated .form-file-input:focus-within ~ .form-file-label {
|
||||
border: none;
|
||||
box-shadow: none;
|
||||
}
|
||||
|
||||
.was-validated .form-file-input:invalid:focus-within ~ .form-file-label .form-file-text,
|
||||
.was-validated .form-file-input:invalid:focus-within ~ .form-file-label .form-file-button,
|
||||
.form-file-input.is-invalid:focus-within ~ .form-file-label .form-file-text,
|
||||
.form-file-input.is-invalid:focus-within ~ .form-file-label .form-file-button {
|
||||
border-color: $danger;
|
||||
}
|
||||
|
||||
.was-validated .form-file-input:valid:focus-within ~ .form-file-label .form-file-text,
|
||||
.was-validated .form-file-input:valid:focus-within ~ .form-file-label .form-file-button,
|
||||
.form-file-input.is-valid:focus-within ~ .form-file-label .form-file-text,
|
||||
.form-file-input.is-valid:focus-within ~ .form-file-label .form-file-button {
|
||||
border-color: $success;
|
||||
}
|
||||
|
||||
.was-validated :invalid ~ .invalid-tooltip,
|
||||
.is-invalid ~ .invalid-feedback,
|
||||
.is-invalid ~ .invalid-tooltip {
|
||||
border-radius: 0.25rem !important;
|
||||
.form-file {
|
||||
.valid-feedback,
|
||||
.invalid-feedback {
|
||||
margin-top: 0.25rem;
|
||||
}
|
||||
}
|
||||
|
||||
.valid-tooltip {
|
||||
color: #fff;
|
||||
color: $form-feedback-valid-tooltip-color;
|
||||
}
|
||||
|
||||
.was-validated .form-file .form-file-input:invalid ~ .form-file-label .form-file-text,
|
||||
.was-validated .form-file .form-file-input:invalid ~ .form-file-label .form-file-button {
|
||||
border-color: $danger;
|
||||
}
|
||||
|
||||
.was-validated .form-file .form-file-input:valid ~ .form-file-label .form-file-text,
|
||||
.was-validated .form-file .form-file-input:valid ~ .form-file-label .form-file-button {
|
||||
border-color: $success;
|
||||
}
|
||||
|
||||
.was-validated .form-file {
|
||||
margin-bottom: 2.5rem;
|
||||
.invalid-feedback {
|
||||
width: auto;
|
||||
}
|
||||
|
|
|
|||
|
|
@ -1,9 +0,0 @@
|
|||
.alert {
|
||||
border: 0;
|
||||
}
|
||||
|
||||
@each $color, $value in $theme-colors {
|
||||
.alert-#{$color} {
|
||||
@include alert-variant(color-level($value, $alert-bg-level), color-level($value, $alert-border-level), color-level($value, $alert-color-level));
|
||||
}
|
||||
}
|
||||
|
|
@ -1,5 +1,4 @@
|
|||
// Button variant
|
||||
|
||||
@mixin button-variant-mdb($background) {
|
||||
color: set-notification-text-color($background);
|
||||
background-color: $background;
|
||||
|
|
@ -15,11 +14,17 @@
|
|||
background-color: darken($background, 7.5%);
|
||||
}
|
||||
|
||||
.btn-check:checked + &,
|
||||
.btn-check:active + &,
|
||||
&:active,
|
||||
&.active,
|
||||
.show > &.dropdown-toggle {
|
||||
color: set-notification-text-color($background);
|
||||
background-color: darken($background, 20%);
|
||||
|
||||
&:focus {
|
||||
box-shadow: $btn-focus-box-shadow;
|
||||
}
|
||||
}
|
||||
|
||||
&:disabled,
|
||||
|
|
@ -30,7 +35,6 @@
|
|||
}
|
||||
|
||||
// Button variant outline
|
||||
|
||||
@mixin button-outline-variant-mdb($color) {
|
||||
color: $color;
|
||||
border-color: $color;
|
||||
|
|
@ -62,3 +66,22 @@
|
|||
color: $color;
|
||||
}
|
||||
}
|
||||
|
||||
// Button sizes
|
||||
@mixin button-size-mdb(
|
||||
$padding-top,
|
||||
$padding-right,
|
||||
$padding-bottom,
|
||||
$padding-left,
|
||||
$font-size,
|
||||
$line-height
|
||||
) {
|
||||
padding: $padding-top $padding-right $padding-bottom $padding-left;
|
||||
font-size: $font-size;
|
||||
line-height: $line-height;
|
||||
}
|
||||
|
||||
// Button size variant outline
|
||||
@mixin button-outline-size-mdb($padding-top, $padding-right, $padding-bottom, $padding-left) {
|
||||
padding: $padding-top $padding-right $padding-bottom $padding-left;
|
||||
}
|
||||
|
|
|
|||
|
|
@ -1 +0,0 @@
|
|||
// Colors
|
||||
|
|
@ -41,6 +41,7 @@
|
|||
@import './bootstrap/popover';
|
||||
@import './bootstrap/carousel';
|
||||
@import './bootstrap/spinners';
|
||||
@import './bootstrap/tooltip';
|
||||
|
||||
// Helpers
|
||||
@import './bootstrap/helpers';
|
||||
|
|
@ -87,4 +88,3 @@
|
|||
@import './free/popover';
|
||||
@import './free/scrollspy';
|
||||
@import './free/ripple';
|
||||
@import './free/footer';
|
||||
|
|
|
|||
Loading…
Reference in New Issue
Block a user