Пресет для работы с Laravel Mix

package.json

{
    "private": true,
    "scripts": {
        "dev": "npm 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": "cross-env NODE_ENV=development node_modules/webpack/bin/webpack.js --watch --progress --hide-modules --config=node_modules/laravel-mix/setup/webpack.config.js",
        "watch-poll": "npm 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": "npm 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"
    },
    "devDependencies": {
        "axios": "^0.17",
        "browser-sync": "^2.18",
        "browser-sync-webpack-plugin": "^1.2",
        "cross-env": "^5.1.1",
        "file-exists": "^5.0",
        "jquery": "^3.2",
        "laravel-mix": "^1.7.0",
        "lodash": "^4.17",
        "material-design-icons": "^3.0",
        "materialize-css": "1.0.0-alpha.1",
        "roboto-fontface": "^0.8.0",
        "vue": "^2.5.9",
        "vue-router": "^3.0",
        "vuex": "^3.0"
    }
}

resources\assets\js\app.js

import LoadComponent from './plugins/loadComponents';
import store from './plugins/store';

require('./bootstrap');
require('./functions');
require('./routes');

LoadComponent('app-component', 'layouts/app');

new Vue({
    router, store
}).$mount('#app');

resources\assets\js\bootstrap.js

import Helpers from './plugins/helpers';
import LoaderScreen from './plugins/loaderScreen';
import Vuex from 'vuex';

window.$ = window.jQuery = require('jquery');
window._ = require('lodash');
window.Vue = require('vue');
window.helpers = Helpers;
window.loaderScreen = LoaderScreen;

Vue.use(Vuex);

/**
 * We'll load MaterializeCSS which provides support
 * for JavaScript based Bootstrap features such as modals and tabs. This
 * code may be modified to fit the specific needs of your application.
 */

require('materialize-css');

/**
 * We'll load the axios HTTP library which allows us to easily issue requests
 * to our Laravel back-end. This library automatically handles sending the
 * CSRF token as a header based on the value of the "XSRF" token cookie.
 */

window.axios = require('axios');

window.axios.defaults.baseURL = '/api/l';
window.axios.defaults.headers.common['X-Requested-With'] = 'XMLHttpRequest';
window.axios.defaults.headers.get['Content-Type'] = 'application/json';
window.axios.defaults.headers.post['Content-Type'] = 'application/x-www-form-urlencoded';
window.axios.defaults.headers.put['Content-Type'] = 'application/x-www-form-urlencoded';
window.axios.defaults.headers.delete['Content-Type'] = 'application/json';

/**
 * Next we will register the CSRF Token as a common header with Axios so that
 * all outgoing HTTP requests automatically have it attached. This is just
 * a simple convenience so we don't have to attach every token manually.
 */

let token = document.head.querySelector('meta[name="csrf-token"]');

if (token) {
    window.axios.defaults.headers.common['X-CSRF-TOKEN'] = token.content;
} else {
    console.error('CSRF token not found: https://laravel.com/docs/csrf#csrf-x-csrf-token');
}

/**
 * Echo exposes an expressive API for subscribing to channels and listening
 * for events that are broadcast by Laravel. Echo and event broadcasting
 * allows your team to easily build robust real-time web applications.
 */

// import Echo from 'laravel-echo'

// window.Pusher = require('pusher-js');

// window.Echo = new Echo({
//     broadcaster: 'pusher',
//     key: 'your-pusher-key'
// });

resources\assets\js\functions.js

$(document).ready(() => {
    helpers.loadMaterializeCSS('select', 'Select');
});

resources\assets\js\plugins\helpers.js

export default class Helpers {
    // Стили всплывающих уведомлений.
    static toast() {
        return {
            style: {
                error: 'red white-text',
                success: 'green white-text',
                info: 'blue white-text'
            }
        }
    };

    /**
     * Set app title.
     *
     * @param title
     */
    static setTitle(title) {
        $(document).ready(function () {
            if (!title.length || typeof title === 'undefined') {
                title = 'Andrey Helldar';
            }

            $('head title').text(title);
        });
    }

    /**
     * Проверяем находится ли элемент в зоне видимости.
     *
     * @param element
     *
     * @returns {boolean}
     */
    static isScrolledIntoView(element) {
        $(document).ready(() => {
            let docViewTop = $(window).scrollTop();
            let docViewBottom = docViewTop + $(window).height();

            let elemTop = $(element).offset().top;
            let elemBottom = elemTop + $(element).height();

            return ((elemBottom <= docViewBottom) && (elemTop >= docViewTop));
        });
    }

    /**
     * Вывод стандартных возвращаемых ошибок API.
     *
     * @param error
     */
    static showResponseError(error) {
        try {
            if (typeof error.response.data.error !== 'undefined') {
                let msg = error.response.data.error.msg;

                if (typeof msg === 'array') {
                    msg = this.joinObject(error.response.data.error.msg, '<br>');
                }

                this.info(msg, 'error');
                return;
            }

            this.info(error.message, 'error');
        } catch (e) {
        }
    }

    static joinObject(obj, deliter = ', ') {
        if (typeof obj === 'object' || typeof obj === 'array') {
            return obj.join(deliter);
        }

        return obj;
    }

    /**
     * Всплывающее уведомление.
     * Для удобства, функция вынесена в отдельную.
     *
     * @param {string} html
     * @param {string} classes
     * @param {int} delay
     */
    static info(html, classes = 'info', delay = 4000) {
        if (this.empty(classes)) {
            classes = 'info';
        }

        if (delay < 1000 || typeof delay === 'undefined') {
            delay = 4000;
        }

        classes = this.toast().style[classes];

        M.toast({html, classes, delay: delay});
    }

    /**
     * Перебираем входящий двумерный массив, собирая все значения в одиночный.
     *
     * @param data
     * @returns {Array}
     */
    static parseErrors(data) {
        let result = [];

        $.each(data, (index, item) => {
            $.each(item, (i, value) => {
                result.push(value);
            });
        });

        return result;
    }

    /**
     * Компилим массив ошибок в список UL.
     * @param data
     * @returns {string}
     */
    static htmlErrors(data) {
        return '<ul><li>' + data.join('</li><li>') + '</li></ul>';
    }

    /**
     * Определение "пустой" переменной.
     *
     * @param data
     * @returns {boolean}
     */
    static empty(data) {
        return !data.length || typeof data === 'undefined';
    }

    /**
     * Вывод уведомлений в консоль.
     *
     * @param data
     * @param type
     * @returns {boolean}
     */
    static console(data, type) {
        switch (type) {
            case 'info':
                console.info(data);
                break;

            case 'warning':
                console.warn(data);
                break;

            case 'error':
                console.error(data);
                break;

            default:
                console.log(data);
        }
    }

    static build_query(obj) {
        if (typeof obj !== 'array' && typeof obj !== 'object') {
            this.info('Unknown data', 'error');
            return '';
        }

        let query = [];

        for (let key in obj) {
            query.push(`${key}=${obj[key]}`);
        }

        return query.join('&');
    }

    /**
     * Конвертирование объектов в массив.
     *
     * @param obj
     * @returns {*}
     */
    static toArray(obj) {
        if (typeof obj === 'object') {
            obj = $.map(obj, function (value, index) {
                    return [value];
                }
            );
        }

        return obj;
    }

    /**
     * Переводим секунды в человеко-понятное время.
     *
     * @param duration
     * @returns {string}
     */
    static timeToHumans(duration) {
        let date = new Date(1970, 1, 1, 0, 0, duration);
        let hours = date.getHours();
        let minutes = date.getMinutes();
        let seconds = date.getSeconds();
        let exp = [];

        exp = this.pushDateArray(exp, hours);
        exp = this.pushDateArray(exp, minutes, true);
        exp = this.pushDateArray(exp, seconds, true);

        return exp.join(':');
    }

    /**
     * Если число однозначное - добавляем ведущий ноль.
     *
     * @param num
     * @returns {*}
     */
    static numAddZero(num) {
        if (num < 10) {
            return ('0' + num
            );
        }

        return num;
    }

    /**
     * Если число больше нуля - добавляем его в массив.
     * Либо если передан параметр принудительного добавления.
     *
     * @param arr
     * @param num
     * @param zero
     * @returns {*}
     */
    static pushDateArray(arr, num = 0, zero = false) {
        if (num > 0 || zero === true) {
            num = this.numAddZero(num);
            arr.push(num);
        }

        return arr;
    }

    /**
     * Разбить число на разряды.
     *
     * @param num
     *
     * @returns {string}
     */
    static divideNumber(num = 0) {
        return num.toString().split(/(?=(?:\d{3})+(?!\d))/).join("'");
    }

    /**
     * Проверка существования файла на удаленном ресурсе.
     *
     * @param filename
     * @returns {boolean}
     */
    static fileExists(filename) {
        let http = new XMLHttpRequest();
        http.open('HEAD', filename, false);
        http.send();

        return http.status !== 404;
    }

    /**
     * Получаем CSRF-токен.
     *
     * @returns {*|jQuery}
     */
    static getCsrfToken() {
        return $('meta[name="csrf-token"]').attr('content');
    }

    /**
     * Устанавливаем заголовок текущей страницы.
     *
     * @param value
     */
    static pageTitle(value = 'AVANGARD') {
        $('title').text(value.trim());
    }

    /**
     * Проверка статуса авторизации пользователя.
     */
    static isAuth(el) {
        return el.$store.getters.isAuth;
    }

    /**
     * Отправка формы с загрузкой файлов.
     *
     * @param e
     * @param _this
     * @param url
     * @param formSelector
     * @param filesIds
     */
    static sendFormWithFiles(e, _this, url, formSelector = 'form', filesIds = []) {
        e.preventDefault();

        loaderScreen.show('Upload files...');

        let config = {headers: {'Content-Type': 'multipart/form-data'}};
        let form = document.querySelector(formSelector);
        let data = new FormData(form);

        filesIds.forEach((item) => {
            data.append(item, document.getElementById(item).files);
        });

        axios.post(url, data, config)
            .then(response => {
                loaderScreen.hide();
                helpers.info(response.data, 'success');
            })
            .catch(error => {
                loaderScreen.hide();
                helpers.showResponseError(error);
            });
    }

    /**
     * Проверяет, является ли число целым.
     *
     * @param num
     * @returns {boolean}
     */
    static isInt(num) {
        return (num ^ 0) === num;
    }

    /**
     * Поиск подстроки в строке.
     *
     * @param haystack
     * @param needle
     * @param emptyIsTrue
     * @returns {boolean}
     */
    static search(haystack, needle, emptyIsTrue = false) {
        haystack = (typeof haystack === 'undefined' || haystack === null) ? '' : haystack;
        needle = (typeof needle === 'undefined' || needle === null) ? '' : needle;

        if (emptyIsTrue === true && !haystack) {
            return true;
        }

        return (haystack.toString().toLowerCase().search(needle.toLowerCase()) > -1);
    }

    /**
     * Удаление крайнего правого символа.
     *
     * @param string
     * @param charlist
     * @returns {string|*|{version, readme}|void}
     */
    static rtrim(string, charlist = ' ') {
        return string.replace(/\/+$/, '');
    }

    /**
     * Загрузка компонентов MaterializeCSS.
     *
     * TODO: Убрать костыль после выхода 3 патча альфа-версии.
     *
     * @param query
     * @param method
     * @param options
     */
    static loadMaterializeCSS(query, method, options = {}) {
        let elements = document.querySelectorAll(query);
        elements.forEach(el => {
            new M[method](el, options);
        });
    }

    /**
     * Загрузка одиночного компонента MaterializeCSS.
     *
     * @param query
     * @param method
     * @param options
     */
    static loadMaterializeInstance(query, method, options = {}) {
        let el = document.querySelector(query);
        return new M[method](el);
    }

    /**
     * @param key
     * @param attributes
     * @returns {*}
     */
    static trans(key, attributes = {}) {
        let text = _.get(window.trans, key);

        Object
            .keys(attributes)
            .map((key, i) => {
                text = text.replace(`:${key}`, attributes[key]);
            });

        return text;
    }
}

resources\assets\js\plugins\loadComponents.js

export default function (name, filename = '', result = true) {
    if (filename.trim().length === 0 || typeof filename === 'undefined') {
        filename = name.trim();
    }

    let component = Vue.component(name.trim(), require(`../components/${filename}.vue`));

    if (result !== false) {
        return component;
    }
}

resources\assets\js\plugins\store.js

import Vuex from 'vuex';
import Vue from 'vue';

Vue.use(Vuex);

export default new Vuex.Store({
    state: {
        // User
        isAuth: false,

        // User info
        user: {},

        // Loader
        isShowLoading: true,
        loadingMessage: 'Loading...',

        // Menu
        menuPages: [],

        // Loading Screen
        isLoaded: 0,
        isLoadedResult: 0
    },
    mutations: {
        setUser(state, user) {
            state.user = user;
        },

        deleteUser(state) {
            state.user = {};
        },

        setMenuPages(state, pages = []) {
            state.menuPages = pages;
        },

        setIsAuth(state, value = false) {
            state.isAuth = (value === true);
        },

        showLoading(state, message = null) {
            state.loadingMessage = message ? message : 'Loading...';
            state.isShowLoading = true;
        },

        hideLoading(state) {
            state.isShowLoading = false;
        },

        pushIsLoaded(state) {
            state.isLoaded++;
        },

        resetLoaded(state, size = 1) {
            state.isLoaded = 0;
            state.isLoadedResult = size;
        }
    },
    getters: {
        isAuth(state) {
            return state.isAuth;
        },

        loadingPercentage(state) {
            let total = state.isLoadedResult;
            let value = state.isLoaded;

            if (total > 1) {
                value = (value > total) ? total : value;
                value = (value / total) * 100;
                value = Math.round(value);

                return `${value}%`;
            }

            return false;
        },

        isShowLoading(state) {
            return state.isShowLoading;
        },

        loadingMessage(state) {
            return state.loadingMessage;
        },

        user(state) {
            return state.user;
        },

        menuPages(state) {
            return state.menuPages;
        }
    }
});

resources\assets\js\routes.js

import VueRouter from "vue-router";
import LoadComponent from './plugins/loadComponents';
import store from './plugins/store';

let routes = [];

/**
 * Add routes.
 *
 * @param {string} name
 * @param {string} path
 * @param component
 * @param {int} isAuth Где "0" - не учитывать. "1" - требуется авторизация. "2" - требуется ОТСУТСТВИЕ авторизации.
 */
let addRoute = (name, path, component, isAuth = 0) => {
    let beforeEnter = (to, from, next) => {
        store.commit('resetLoaded');
        store.commit('showLoading');
        store.commit('setIsAuth', false);
        next();
    };
    let params = {name, path, component, beforeEnter};

    if (isAuth) {
        params.beforeEnter = (to, from, next) => {
            store.commit('resetLoaded');
            store.commit('showLoading');
            store.commit('setIsAuth', false);

            switch (isAuth) {
                case 1:
                    axios.get('users').then(response => {
                        store.commit('setIsAuth', true);
                        store.commit('setUser', response.data);
                        next();
                    }).catch(error => {
                        store.commit('deleteUser');
                        helpers.showResponseError(error);
                        router.push({name: 'sign-in'});
                    });
                    break;

                case 2:
                    axios.get('users').then(response => {
                        store.commit('setUser', response.data);
                        router.push({name: 'dashboard'});
                    }).catch(error => {
                        store.commit('deleteUser');
                        store.commit('setIsAuth', false);
                        next();
                    });
                    break;
            }
        };
    }

    routes.push(params);
};

/**
 * Routes list.
 */
addRoute('sign-in', '/sign-in', LoadComponent('sign-in', 'users/sign-in'), 2);
addRoute('sign-up', '/sign-up', LoadComponent('sign-up', 'users/sign-up'), 2);
addRoute('password-reset', '/password/reset', LoadComponent('password-reset', 'users/password-reset'), 2);
addRoute('password-reset-token', '/password/reset/{token}', LoadComponent('password-reset-token', 'users/password-reset-token'), 2);

addRoute('dashboard', '/dashboard', LoadComponent('dashboard'), 1);

addRoute('gallery-cars-list', '/cars/list', LoadComponent('gallery-cars-list', 'gallery/list'), 1);
addRoute('gallery-cars-auto', '/cars/auto', LoadComponent('gallery-cars-auto', 'gallery/auto'), 1);
addRoute('gallery-cars-manual', '/cars/manual', LoadComponent('gallery-cars-manual', 'gallery/manual'), 1);
addRoute('gallery-cars-edit', '/cars/edit/:id', LoadComponent('gallery-cars-edit', 'gallery/edit'), 1);

addRoute('auto-ru', '/logs/auto-ru', LoadComponent('auto-ru', 'logs/auto-ru'), 1);
addRoute('compare', '/logs/compare', LoadComponent('compare', 'logs/compare'), 1);

addRoute('settings', '/settings', LoadComponent('settings'), 1);
addRoute('passport', '/passport', LoadComponent('passport', 'passport/index'), 1);

/**
 * Set redirect other URLs to default route.
 */
routes.push({path: '/cars', redirect: '/cars/list'});
routes.push({path: '/*', redirect: '/dashboard'});

/**
 * VueRouter Component.
 *
 * @type {VueRouter}
 */
window.router = new VueRouter({
    routes
});

Vue.use(router);

resources\assets\sass\app.scss

@charset "UTF-8";

// Mixins
@import "components/mixins";
//
// TODO: For a Alpha 2 version
//@import "~materialize-css/sass/components/color-variables";
//@import "~materialize-css/sass/components/color-classes";
// TODO: Remove when upgraded to upper version
@import "~materialize-css/sass/components/color";
//
// Variables;
@import "~materialize-css/sass/components/variables";
@import "components/variables";
//
// Fonts
@import "components/material_icons";
@import "components/roboto";
//
// Reset
@import "~materialize-css/sass/components/normalize";
//
// Components
@import "~materialize-css/sass/components/global";
//@import "~materialize-css/sass/components/badges";
@import "~materialize-css/sass/components/icons-material-design";
@import "~materialize-css/sass/components/grid";
@import "~materialize-css/sass/components/navbar";
@import "~materialize-css/sass/components/typography";
@import "~materialize-css/sass/components/transitions";
@import "~materialize-css/sass/components/cards";
@import "~materialize-css/sass/components/toast";
//@import "~materialize-css/sass/components/tabs";
@import "~materialize-css/sass/components/tooltip";
@import "~materialize-css/sass/components/buttons";
@import "~materialize-css/sass/components/dropdown";
@import "~materialize-css/sass/components/waves";
@import "~materialize-css/sass/components/modal";
@import "~materialize-css/sass/components/collapsible";
//@import "~materialize-css/sass/components/chips";
@import "~materialize-css/sass/components/materialbox";
@import "~materialize-css/sass/components/forms/forms";
@import "~materialize-css/sass/components/table_of_contents";
@import "~materialize-css/sass/components/sidenav";
@import "~materialize-css/sass/components/preloader";
//@import "~materialize-css/sass/components/slider";
//@import "~materialize-css/sass/components/carousel";
@import "~materialize-css/sass/components/tapTarget";
@import "~materialize-css/sass/components/pulse";
//@import "~materialize-css/sass/components/datepicker";
//@import "~materialize-css/sass/components/timepicker";
//
// Local styles
@import "components/base";

resources\assets\sass\components\_base.scss

@charset "UTF-8";

body, .app-container {
    display: flex;
    min-height: 100vh;
    flex-direction: column;
}

main {
    flex: 1 0 auto;
}

hr {
    border-top: none;
    border-left: none;
    border-right: none;
    border-bottom: 1px solid lighten($secondary-color, 10%);
}

pre {
    overflow: auto;
}

resources\assets\sass\components\_material_icons.scss

@charset "UTF-8";

@font-face {
    font-family: 'Material Icons';
    font-style: normal;
    font-weight: 400;
    src: url('#{$material-font-path}MaterialIcons-Regular.eot'); /* For IE6-8 */
    src: local('Material Icons'),
    local('MaterialIcons-Regular'),
    url('#{$material-font-path}MaterialIcons-Regular.woff2') format('woff2'),
    url('#{$material-font-path}MaterialIcons-Regular.woff') format('woff'),
    url('#{$material-font-path}MaterialIcons-Regular.ttf') format('truetype');
}

.material-icons {
    font-family: 'Material Icons';
    font-weight: normal;
    font-style: normal;
    font-size: 24px; /* Preferred icon size */
    display: inline-block;
    line-height: 1;
    text-transform: none;
    letter-spacing: normal;
    word-wrap: normal;
    white-space: nowrap;
    direction: ltr;

    /* Support for all WebKit browsers. */
    -webkit-font-smoothing: antialiased;
    /* Support for Safari and Chrome. */
    text-rendering: optimizeLegibility;

    /* Support for Firefox. */
    -moz-osx-font-smoothing: grayscale;

    /* Support for IE. */
    font-feature-settings: 'liga';
}

resources\assets\sass\components\_mixins.scss

@charset "UTF-8";

@mixin loaderBackground() {
    $animationId: unique_id();
    $size: percentage(length($loader-colors));
    //
    background: linear-gradient($loader-deg, $loader-colors);
    background-size: $size $size;
    animation: $animationId $loader-animation;

    @-webkit-keyframes #{$animationId} {
        0% { background-position: 0% 50% }
        50% { background-position: 100% 50% }
        100% { background-position: 0% 50% }
    }

    @-moz-keyframes #{$animationId} {
        0% { background-position: 0% 50% }
        50% { background-position: 100% 50% }
        100% { background-position: 0% 50% }
    }

    @keyframes #{$animationId} {
        0% { background-position: 0% 50% }
        50% { background-position: 100% 50% }
        100% { background-position: 0% 50% }
    }
}

resources\assets\sass\components\_roboto.scss

@charset "UTF-8";

@import "~roboto-fontface/css/roboto/sass/roboto-fontface-regular";
//@import "~roboto-fontface/css/roboto/sass/roboto-fontface-regular-italic";
@import "~roboto-fontface/css/roboto/sass/roboto-fontface-light";
//@import "~roboto-fontface/css/roboto/sass/roboto-fontface-light-italic";
@import "~roboto-fontface/css/roboto/sass/roboto-fontface-thin";
//@import "~roboto-fontface/css/roboto/sass/roboto-fontface-thin-italic";
@import "~roboto-fontface/css/roboto/sass/roboto-fontface-medium";
//@import "~roboto-fontface/css/roboto/sass/roboto-fontface-medium-italic";
//@import "~roboto-fontface/css/roboto/sass/roboto-fontface-bold";
//@import "~roboto-fontface/css/roboto/sass/roboto-fontface-bold-italic";
//@import "~roboto-fontface/css/roboto/sass/roboto-fontface-black";
//@import "~roboto-fontface/css/roboto/sass/roboto-fontface-black-italic";

resources\assets\sass\components\_variables.scss

@charset "UTF-8";

// ==========================================================================
// Materialize variables
// ==========================================================================
//
// Table of Contents:
//
//  1. Colors
//  2. Badges
//  3. Buttons
//  4. Cards
//  5. Carousel
//  6. Collapsible
//  7. Chips
//  8. Date + Time Picker
//  9. Dropdown
//  10. Forms
//  11. Global
//  12. Grid
//  13. Navigation Bar
//  14. Side Navigation
//  15. Photo Slider
//  16. Spinners | Loaders
//  17. Tabs
//  18. Tables
//  19. Toasts
//  20. Typography
//  21. Footer
//  22. Flow Text
//  23. Collections
//  24. Progress Bar
//  25. Loader
//  26. Fonts

// 1. Colors
// ==========================================================================

$primary-color: #000000;
$primary-color-light: lighten($primary-color, 15%);
$primary-color-dark: darken($primary-color, 15%);

$secondary-color: #00ADEF;
//$success-color: color("green", "base");
//$error-color: color("red", "base");
//$link-color: color("light-blue", "darken-1");

$base-background-first-color: #000000;
$base-background-first-position: 300px;
$base-background-second-position: 1000px;

$base-background-second-color: #2E2E2E;

$content-box-color: #FFFFFF;

// 2. Badges
// ==========================================================================

$badge-bg-color: $secondary-color;
//$badge-height: 22px;

// 3. Buttons
// ==========================================================================

// Shared styles
//$button-border: none ;
$button-background-focus: lighten($secondary-color, 4%);
//$button-font-size: 1rem ;
//$button-icon-font-size: 1.3rem ;
//$button-height: 36px ;
//$button-padding: 0 2rem ;
//$button-radius: 2px ;

// Disabled styles
$button-disabled-background: #DFDFDF;
$button-disabled-color: #9F9F9F;

// Raised buttons
$button-raised-background: $secondary-color;
$button-raised-background-hover: lighten($button-raised-background, 5%);
$button-raised-color: #FFFFFF;

// Large buttons
//$button-large-icon-font-size: 1.6rem ;
//$button-large-height: $button-height * 1.5 ;

// Flat buttons
$button-flat-color: #343434;
$button-flat-disabled-color: lighten(#999999, 10%);

// Floating buttons
$button-floating-background: $secondary-color;
$button-floating-background-hover: $button-floating-background;
$button-floating-color: #FFFFFF;
//$button-floating-size: 40px ;
//$button-floating-large-size: 56px ;
//$button-floating-radius: 50% ;

// 4. Cards
// ==========================================================================

//$card-padding: 24px ;
//$card-bg-color: #fff ;
//$card-link-color: color("orange", "accent-2") ;
//$card-link-color-light: lighten($card-link-color, 20%) ;

// 5. Carousel
// ==========================================================================

//$carousel-height: 400px ;
//$carousel-item-height: $carousel-height / 2 ;
//$carousel-item-width: $carousel-item-height ;

// 6. Collapsible
// ==========================================================================

//$collapsible-height: 3rem ;
//$collapsible-line-height: $collapsible-height ;
//$collapsible-header-color: #fff ;
//$collapsible-border-color: #ddd ;

// 7. Chips
// ==========================================================================

$chip-bg-color: #E4E4E4;
$chip-border-color: #9E9E9E;
$chip-selected-color: $primary-color;
//$chip-margin: 5px ;

// 8. Date + Time Picker
// ==========================================================================

//$datepicker-display-font-size: 2.8rem;
$datepicker-calendar-header-color: #999999;
$datepicker-weekday-color: rgba(0, 0, 0, .87);
$datepicker-weekday-bg: darken($secondary-color, 7%);
$datepicker-date-bg: $secondary-color;
$datepicker-year: rgba(255, 255, 255, .7);
$datepicker-focus: rgba(0, 0, 0, .05);
$datepicker-selected: $secondary-color;
$datepicker-selected-outfocus: desaturate(lighten($secondary-color, 35%), 15%);
$datepicker-day-focus: transparentize(desaturate($secondary-color, 5%), .75);
$datepicker-disabled-day-color: rgba(0, 0, 0, .3);

$timepicker-clock-color: rgba(0, 0, 0, .87);
$timepicker-clock-plate-bg: #EEEEEE;

// 9. Dropdown
// ==========================================================================

$dropdown-bg-color: #FFFFFF;
$dropdown-hover-bg-color: #EEEEEE;
$dropdown-color: $secondary-color;
//$dropdown-item-height: 50px ;

// 10. Forms
// ==========================================================================

// Text Inputs + Textarea
//$input-height: 3rem ;
$input-border-color: color("grey", "base");
$input-border: 1px solid $input-border-color;
$input-background: #FFFFFF;
$input-error-color: $error-color;
$input-success-color: $success-color;
$input-focus-color: $secondary-color;
//$input-font-size: 1rem ;
//$input-margin-bottom: 8px;
//$input-margin: 0 0 $input-margin-bottom 0 ;
//$input-padding: 0 ;
//$input-transition: all .3s ;
//$label-font-size: .8rem ;
$input-disabled-color: rgba(0, 0, 0, .42);
$input-disabled-solid-color: #949494;
$input-disabled-border: 1px dotted $input-disabled-color;
$input-invalid-border: 1px solid $input-error-color;
$placeholder-text-color: lighten($input-border-color, 20%);

// Radio Buttons
$radio-fill-color: $secondary-color;
$radio-empty-color: #5A5A5A;
$radio-border: 2px solid $radio-fill-color;

// Range
//$range-height: 14px ;
//$range-width: 14px ;
//$track-height: 3px ;

// Select
$select-border: 1px solid #F2F2F2;
$select-background: rgba(255, 255, 255, 0.90);
$select-focus: 1px solid lighten($secondary-color, 47%);
$select-option-hover: rgba(0, 0, 0, .08);
$select-option-focus: rgba(0, 0, 0, .08);
$select-option-selected: rgba(0, 0, 0, .03);
//$select-padding: 5px ;
//$select-radius: 2px ;
$select-disabled-color: rgba(0, 0, 0, .3);

// Switches
$switch-bg-color: $secondary-color;
$switch-checked-lever-bg: desaturate(lighten($switch-bg-color, 25%), 25%);
$switch-unchecked-bg: #F1F1F1;
$switch-unchecked-lever-bg: rgba(0, 0, 0, .38);
//$switch-radius: 15px ;

// 12. Global
// ==========================================================================

// Media Query Ranges
//$small-screen-up: 601px ;
//$medium-screen-up: 993px ;
//$large-screen-up: 1201px ;
//$small-screen: 600px ;
//$medium-screen: 992px ;
//$large-screen: 1200px ;

//$medium-and-up: "only screen and (min-width : #{$small-screen-up})" ;
//$large-and-up: "only screen and (min-width : #{$medium-screen-up})" ;
//$extra-large-and-up: "only screen and (min-width : #{$large-screen-up})" ;
//$small-and-down: "only screen and (max-width : #{$small-screen})" ;
//$medium-and-down: "only screen and (max-width : #{$medium-screen})" ;
//$medium-only: "only screen and (min-width : #{$small-screen-up}) and (max-width : #{$medium-screen})" ;

// 13. Grid
// ==========================================================================

//$num-cols: 12 ;
//$gutter-width: 1.5rem ;
//$element-top-margin: $gutter-width/3 ;
//$element-bottom-margin: ($gutter-width*2)/3 ;

// 14. Navigation Bar
// ==========================================================================

$navbar-active-bg: $primary-color;
$navbar-height: 108px;
$navbar-line-height: $navbar-height;
$navbar-height-mobile: 56px;
$navbar-line-height-mobile: $navbar-height-mobile;
//$navbar-font-size: 1rem ;
$navbar-font-color: #FFFFFF;
//$navbar-brand-font-size: 2.1rem ;

// 15. Side Navigation
// ==========================================================================

$sidenav-font-size: 14px;
$sidenav-font-color: rgba(0, 0, 0, .87);
$sidenav-bg-color: #FFFFFF;
//$sidenav-padding: 16px ;
//$sidenav-item-height: 48px ;
//$sidenav-line-height: $sidenav-item-height ;

// 16. Photo Slider
// ==========================================================================

$slider-bg-color: color('grey', 'base');
$slider-bg-color-light: color('grey', 'lighten-2');
$slider-indicator-color: $secondary-color;

// 17. Spinners | Loaders
// ==========================================================================

$spinner-default-color: $secondary-color;

// 18. Tabs
// ==========================================================================

$tabs-underline-color: $primary-color-light;
$tabs-text-color: $primary-color;
$tabs-bg-color: #FFFFFF;

// 19. Tables
// ==========================================================================

$table-border-color: rgba(0, 0, 0, .12);
$table-striped-color: rgba(242, 242, 242, 0.5);

// 20. Toasts
// ==========================================================================

$toast-height: 48px;
$toast-color: #323232;
$toast-text-color: #FFFFFF;
$toast-action-color: #EEFF41;

// 21. Typography
// ==========================================================================

$font-stack: -apple-system, BlinkMacSystemFont, Roboto, "Segoe UI", Oxygen-Sans, Ubuntu, Cantarell, "Helvetica Neue", sans-serif;
$off-black: rgba(0, 0, 0, 0.87);

// Header Styles
$h1-fontsize: 3rem;
$h2-fontsize: 2.92rem;
$h3-fontsize: 2.28rem;
$h4-fontsize: 1.64rem;
$h5-fontsize: 1.25rem;
$h6-fontsize: 1rem;

// 22. Footer
// ==========================================================================

$footer-font-color: #FFFFFF;
$footer-bg-color: $primary-color;
$footer-copyright-font-color: rgba(255, 255, 255, .8);
$footer-copyright-bg-color: rgba(51, 51, 51, .08);

// 23. Flow Text
// ==========================================================================

//$range: $large-screen - $small-screen ;
//$intervals: 20 ;
//$interval-size: $range / $intervals ;

// 24. Collections
// ==========================================================================

//$collection-border-color: #E0E0E0 ;
//$collection-bg-color: #FFFFFF ;
//$collection-active-bg-color: $secondary-color ;
//$collection-active-color: lighten($secondary-color, 55%) ;
//$collection-hover-bg-color: #DDDDDD ;
//$collection-link-color: $secondary-color ;
//$collection-line-height: 1.5rem ;

// 25. Progress Bar
// ==========================================================================

$progress-bar-color: $secondary-color;

// 25. Loader
// ==========================================================================
$loader-animation: 45s ease infinite;
$loader-colors: (rgba(41, 41, 41, 0.9), rgba(0, 0, 0, 0.9), rgba(58, 58, 58, 0.9));
$loader-deg: 227deg;

// 26. Fonts
// ==========================================================================

$material-font-path: "~material-design-icons/iconfont/";

sync.js

module.exports = {
    proxy: 'mysite.loc'
};

webpack.mix.js

let mix = require('laravel-mix');
let fileExists = require('file-exists');

/*
 |--------------------------------------------------------------------------
 | 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.
 |
 */

let assets = './resources/assets/';

mix
    .copyDirectory(assets + 'images', 'public/images')

    .sass(assets + 'sass/app.scss', 'public/css')

    .js(assets + 'js/app.js', 'public/js')
    .extract(['materialize-css', 'axios', 'lodash', 'vue'])

    .disableNotifications()
    .version();

if (mix.inProduction()) {
    mix.sourceMaps();
}
else if (fileExists('./sync.js')) {
    let params = require('./sync');
    mix.browserSync(params);
}