Skip to content

Instantly share code, notes, and snippets.

Embed
What would you like to do?
Material Design Bootstrap Pro jQuery v4.16.0 build with Laravel Mix
// Drop this file in resources/sass/ and put a "@import 'material-design';" into your app.scss
// Head workarounds
$roboto-font-path : '~mdbootstrap-pro/font/roboto/' !default;
$image-path : '~mdbootstrap-pro/img' !default;
$font-awesome-family : 'Font Awesome 5 Pro', 'Font Awesome 5 Free', sans-serif;
// Library import
@import '~mdbootstrap-pro/scss/mdb-pro';
// Addon imports
@import '~mdbootstrap-pro/scss/addons/datatables';
@import '~mdbootstrap-pro/scss/addons/datatables-select';
// Here comes any addon you need
// Tail workarounds
// Use Font Awesome configured family. This allows using Font Awesome 5 Pro if you've paid for it
table.dataTable thead {
.sorting:before, .sorting_asc:before, .sorting_desc:before, .sorting_asc_disabled:before, .sorting_desc_disabled:before {
font-family : $font-awesome-family;
}
.sorting:after, .sorting_asc:after, .sorting_desc:after, .sorting_asc_disabled:after, .sorting_desc_disabled:after {
font-family : $font-awesome-family;
}
}
ul.stepper {
.step {
&.done:before {
font-family : $font-awesome-family;
}
&.wrong:before {
font-family : $font-awesome-family;
}
}
}
@media only screen and (min-width : 993px) {
ul.stepper.horizontal {
.step {
&.done .step-title:before {
font-family : $font-awesome-family;
}
&.wrong .step-title:before {
font-family : $font-awesome-family;
}
}
}
}
table.dataTable thead .sorting:before,
table.dataTable thead .sorting_asc:before,
table.dataTable thead .sorting_desc:before,
table.dataTable thead .sorting_asc_disabled:before,
table.dataTable thead .sorting_desc_disabled:before {
font-family : $font-awesome-family;
}
table.dataTable thead .sorting:after,
table.dataTable thead .sorting_asc:after,
table.dataTable thead .sorting_desc:after,
table.dataTable thead .sorting_asc_disabled:after,
table.dataTable thead .sorting_desc_disabled:after {
font-family : $font-awesome-family;
}
.picker__box {
.picker__header {
.picker__nav--prev:before, .picker__nav--next:before {
font-family : $font-awesome-family;
}
}
}
// End of tail workarounds
// Extras. Feel free to remove if not needed/wanted
// Switches with colors. Add switch-... classes to the example in the MDB website
// Examples: <div class="switch switch-danger-checked switch-success-unchecked">...</div>
// or just: <div class="switch switch-info">...</div>
.switch {
&.switch-info, &.switch-info-checked {
label input[type='checkbox'] {
&:checked:not(:disabled) + .lever {
background-color : desaturate(lighten($info-color, 25%), 25%);
}
&:checked:not(:disabled) + .lever:after {
background-color : $info-color;
}
}
}
&.switch-info-unchecked {
label input[type='checkbox'] {
&:not(:checked):not(:disabled) + .lever {
background-color : desaturate(lighten($info-color, 25%), 25%);
}
&:not(:checked):not(:disabled) + .lever:after {
background-color : $info-color;
}
}
}
&.switch-success, &.switch-success-checked {
label input[type='checkbox'] {
&:checked:not(:disabled) + .lever {
background-color : desaturate(lighten($success-color, 25%), 25%);
}
&:checked:not(:disabled) + .lever:after {
background-color : $success-color;
}
}
}
&.switch-success-unchecked {
label input[type='checkbox'] {
&:not(:checked):not(:disabled) + .lever {
background-color : desaturate(lighten($success-color, 25%), 25%);
}
&:not(:checked):not(:disabled) + .lever:after {
background-color : $success-color;
}
}
}
&.switch-warning, &.switch-warning-checked {
label input[type='checkbox'] {
&:checked:not(:disabled) + .lever {
background-color : desaturate(lighten($warning-color, 25%), 25%);
}
&:checked:not(:disabled) + .lever:after {
background-color : $warning-color;
}
}
}
&.switch-warning-unchecked {
label input[type='checkbox'] {
&:not(:checked):not(:disabled) + .lever {
background-color : desaturate(lighten($warning-color, 25%), 25%);
}
&:not(:checked):not(:disabled) + .lever:after {
background-color : $warning-color;
}
}
}
&.switch-danger, &.switch-danger-checked {
label input[type='checkbox'] {
&:checked:not(:disabled) + .lever {
background-color : desaturate(lighten($danger-color, 25%), 25%);
}
&:checked:not(:disabled) + .lever:after {
background-color : $danger-color;
}
}
}
&.switch-danger-unchecked {
label input[type='checkbox'] {
&:not(:checked):not(:disabled) + .lever {
background-color : desaturate(lighten($danger-color, 25%), 25%);
}
&:not(:checked):not(:disabled) + .lever:after {
background-color : $danger-color;
}
}
}
}
// Drop this file in resources/js/ and put a "import './material-design-bootstrap.js';" into your app.js
// Workaround issue with MDB https://github.com/mdbootstrap/bootstrap-material-design/issues/245
// More info: https://mdbootstrap.com/support/jquery/bscustomfileinput-is-not-defined/
import bsCustomFileInput from 'mdbootstrap-pro/src/js/vendor/free/bs-custom-file-input';
// Import file structure for Material Design Bootstrap
// See https://mdbootstrap.com/support/jquery/latest-version-of-mdb-not-compatible-with-webpack/
// and https://mdbootstrap.com/support/jquery/issue-with-4-9-0-webpack-typescript/ for further info
// Comment out unneeded libraries in order to reduce build size
import 'mdbootstrap-pro/src/js/vendor/free/jquery.easing';
import 'mdbootstrap-pro/src/js/vendor/free/chart';
import 'mdbootstrap-pro/src/js/vendor/free/chartjs-datalabels';
import 'mdbootstrap-pro/src/js/vendor/free/bs-custom-file-input';
import 'mdbootstrap-pro/src/js/vendor/free/enhanced-modals';
import 'mdbootstrap-pro/src/js/vendor/free/velocity';
import 'mdbootstrap-pro/src/js/vendor/free/waves';
import 'mdbootstrap-pro/src/js/free/forms-free';
import 'mdbootstrap-pro/src/js/free/scrolling-navbar';
import 'mdbootstrap-pro/src/js/free/treeview';
import 'mdbootstrap-pro/src/js/free/wow';
import 'mdbootstrap-pro/src/js/vendor/addons/jquery.zmd.hierarchical-display';
import 'mdbootstrap-pro/src/js/vendor/addons/imagesloaded.pkgd.min';
import 'mdbootstrap-pro/src/js/vendor/addons/datatables';
import 'mdbootstrap-pro/src/js/vendor/addons/datatables-select';
import 'mdbootstrap-pro/src/js/vendor/addons/rating';
import 'mdbootstrap-pro/src/js/vendor/pro/jquery.sticky';
import 'mdbootstrap-pro/src/js/vendor/pro/scrollbar';
import 'mdbootstrap-pro/src/js/vendor/pro/scrolling-navbar';
import 'mdbootstrap-pro/src/js/vendor/pro/jarallax';
import 'mdbootstrap-pro/src/js/vendor/pro/jarallax-video';
import 'mdbootstrap-pro/src/js/vendor/pro/lightbox';
import 'mdbootstrap-pro/src/js/vendor/pro/ofi';
import 'mdbootstrap-pro/src/js/vendor/pro/picker';
import 'mdbootstrap-pro/src/js/vendor/pro/picker-date';
import 'mdbootstrap-pro/src/js/vendor/pro/picker-time';
import 'mdbootstrap-pro/src/js/vendor/pro/picker-date-time';
import 'mdbootstrap-pro/src/js/vendor/pro/toastr';
import 'mdbootstrap-pro/src/js/vendor/pro/vector-map';
import 'mdbootstrap-pro/src/js/vendor/pro/vector-map-world-mill';
import 'mdbootstrap-pro/src/js/vendor/addons-pro/chat';
import 'mdbootstrap-pro/src/js/vendor/addons-pro/multi-range';
import 'mdbootstrap-pro/src/js/vendor/addons-pro/simple-charts';
import 'mdbootstrap-pro/src/js/vendor/addons-pro/steppers';
import 'mdbootstrap-pro/src/js/vendor/addons-pro/timeline';
import 'mdbootstrap-pro/src/js/pro/mdb-autocomplete';
import 'mdbootstrap-pro/src/js/pro/picker-time';
import 'mdbootstrap-pro/src/js/pro/buttons';
import 'mdbootstrap-pro/src/js/pro/cards';
import 'mdbootstrap-pro/src/js/pro/character-counter';
import 'mdbootstrap-pro/src/js/pro/chips';
import 'mdbootstrap-pro/src/js/pro/collapsible';
import 'mdbootstrap-pro/src/js/pro/file-input';
import 'mdbootstrap-pro/src/js/pro/preloading';
import 'mdbootstrap-pro/src/js/pro/range-input';
import 'mdbootstrap-pro/src/js/pro/sidenav';
import 'mdbootstrap-pro/src/js/pro/smooth-scroll';
import 'mdbootstrap-pro/src/js/pro/sticky';
import 'mdbootstrap-pro/src/js/pro/dropdown/dropdown';
import 'mdbootstrap-pro/src/js/pro/dropdown/dropdown-searchable';
import 'mdbootstrap-pro/src/js/pro/material-select/material-select';
import 'mdbootstrap-pro/src/js/pro/material-select/material-select-view';
import 'mdbootstrap-pro/src/js/pro/material-select/material-select-view-renderer';
window.bsCustomFileInput = bsCustomFileInput; // Workaround
{
"private": true,
"scripts": {
"dev": "yarn run development",
"development": "cross-env NODE_ENV=development node_modules/webpack/bin/webpack.js --progress --hide-modules --config=node_modules/laravel-mix/setup/webpack.config.js",
"watch": "yarn run development --watch",
"watch-poll": "yarn run watch --watch-poll",
"hot": "cross-env NODE_ENV=development node_modules/webpack-dev-server/bin/webpack-dev-server.js --inline --hot --config=node_modules/laravel-mix/setup/webpack.config.js",
"prod": "yarn run production",
"production": "cross-env NODE_ENV=production node_modules/webpack/bin/webpack.js --no-progress --hide-modules --config=node_modules/laravel-mix/setup/webpack.config.js"
},
"dependencies": {
"@fortawesome/fontawesome-free": "^5.13.0",
"axios": "^0.19.2",
"bootstrap": "^4.4.1",
"cross-env": "^7.0.2",
"jquery": "^3.5.1", // v3.5.1 fixes problem with Bootstrap 4 collapsible cards/accordions
"laravel-mix": "^5.0.4",
"lodash": "^4.17.14",
"mdbootstrap-pro": "git+https://[YOUROAUTHTOKEN]@git.mdbootstrap.com/mdb/jquery/jq-pro.git#4.16.0",
"popper.js": "^1.16.0",
"resolve-url-loader": "~3.1.0",
"sass": "^1.26.3",
"sass-loader": "^8.0.0",
"vue-template-compiler": "^2.6.10",
"webpack": "^4.0.0"
}
}
// Merge properly with your current webpack.mix.js
const mix = require( 'laravel-mix' );
/*
|--------------------------------------------------------------------------
| Mix Asset Management
|--------------------------------------------------------------------------
|
| Mix provides a clean, fluent API for defining some Webpack build steps
| for your Laravel application. By default, we are compiling the Sass
| file for the application as well as bundling up all the JS files.
|
*/
mix
.webpackConfig( {
resolve : {
alias : {
'chart.js' : 'mdbootstrap-pro/src/js/vendor/free/chart' ,
'picker' : 'mdbootstrap-pro/src/js/vendor/pro/picker' ,
'datatables.net' : 'mdbootstrap-pro/src/js/vendor/addons/datatables' ,
// Add here any missing library reported by webpack as an alias
} ,
} ,
} )
.autoload( {
jquery : [ '$' , 'window.$' , 'jQuery' , 'window.jQuery' ]
} )
.js( 'resources/js/app.js' , 'public/js' )
.extract()
.sass( 'resources/sass/app.scss' , 'public/css' )
;
if ( mix.inProduction() )
{
mix.version();
}
else
{
mix.sourceMaps();
}
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment