restore composer.json, add mysqli extension
This commit is contained in:
927
public/vendor/dashboard/src/js/core/app-menu.js
vendored
Executable file
927
public/vendor/dashboard/src/js/core/app-menu.js
vendored
Executable file
@@ -0,0 +1,927 @@
|
||||
/*=========================================================================================
|
||||
File Name: app-menu.js
|
||||
Description: Menu navigation, custom scrollbar, hover scroll bar, multilevel menu
|
||||
initialization and manipulations
|
||||
----------------------------------------------------------------------------------------
|
||||
Item Name: Vuesax HTML Admin Template
|
||||
Version: 1.1
|
||||
Author: Pixinvent
|
||||
Author URL: hhttp://www.themeforest.net/user/pixinvent
|
||||
==========================================================================================*/
|
||||
(function (window, document, $) {
|
||||
'use strict';
|
||||
|
||||
$.app = $.app || {};
|
||||
|
||||
var $body = $('body');
|
||||
var $window = $(window);
|
||||
var menuWrapper_el = $('div[data-menu="menu-wrapper"]').html();
|
||||
var menuWrapperClasses = $('div[data-menu="menu-wrapper"]').attr('class');
|
||||
|
||||
// Main menu
|
||||
$.app.menu = {
|
||||
expanded: null,
|
||||
collapsed: null,
|
||||
hidden: null,
|
||||
container: null,
|
||||
horizontalMenu: false,
|
||||
|
||||
manualScroller: {
|
||||
obj: null,
|
||||
|
||||
init: function () {
|
||||
var scroll_theme = ($('.main-menu').hasClass('menu-dark')) ? 'light' : 'dark';
|
||||
this.obj = new PerfectScrollbar(".main-menu-content", {
|
||||
suppressScrollX: true,
|
||||
wheelPropagation: false
|
||||
});
|
||||
},
|
||||
|
||||
update: function () {
|
||||
if (this.obj) {
|
||||
// Scroll to currently active menu on page load if data-scroll-to-active is true
|
||||
if ($('.main-menu').data('scroll-to-active') === true) {
|
||||
var activeEl, menu;
|
||||
activeEl = document.querySelector('.main-menu-content li.active');
|
||||
if ($body.hasClass('menu-collapsed')) {
|
||||
if ($('.main-menu-content li.sidebar-group-active').length) {
|
||||
activeEl = document.querySelector('.main-menu-content li.sidebar-group-active');
|
||||
}
|
||||
}
|
||||
menu = document.querySelector('.main-menu-content');
|
||||
activeEl = activeEl.getBoundingClientRect().top + menu.scrollTop;
|
||||
// If active element's top position is less than 2/3 (66%) of menu height than do not scroll
|
||||
if (activeEl > parseInt((menu.clientHeight * 2) / 3)) {
|
||||
var start = menu.scrollTop,
|
||||
change = activeEl - start - parseInt(menu.clientHeight / 2);
|
||||
}
|
||||
setTimeout(function () {
|
||||
$.app.menu.container.stop().animate({ scrollTop: change }, 300);
|
||||
$('.main-menu').data('scroll-to-active', 'false');
|
||||
}, 300);
|
||||
}
|
||||
this.obj.update();
|
||||
}
|
||||
},
|
||||
|
||||
enable: function () {
|
||||
if (!$('.main-menu-content').hasClass('ps')) {
|
||||
this.init();
|
||||
}
|
||||
},
|
||||
|
||||
disable: function () {
|
||||
if (this.obj) {
|
||||
this.obj.destroy();
|
||||
}
|
||||
},
|
||||
|
||||
updateHeight: function () {
|
||||
if (($body.data('menu') == 'vertical-menu' || $body.data('menu') == 'vertical-menu-modern' || $body.data('menu') == 'vertical-overlay-menu') && $('.main-menu').hasClass('menu-fixed')) {
|
||||
$('.main-menu-content').css('height', $(window).height() - $('.header-navbar').height() - $('.main-menu-header').outerHeight() - $('.main-menu-footer').outerHeight());
|
||||
this.update();
|
||||
}
|
||||
}
|
||||
},
|
||||
|
||||
init: function (compactMenu) {
|
||||
if ($('.main-menu-content').length > 0) {
|
||||
this.container = $('.main-menu-content');
|
||||
|
||||
var menuObj = this;
|
||||
var defMenu = '';
|
||||
|
||||
if (compactMenu === true) {
|
||||
defMenu = 'collapsed';
|
||||
}
|
||||
|
||||
if ($body.data('menu') == 'vertical-menu-modern') {
|
||||
var menuToggle = '';
|
||||
if (menuToggle === "false") {
|
||||
this.change('collapsed');
|
||||
}
|
||||
else {
|
||||
this.change(defMenu);
|
||||
}
|
||||
}
|
||||
else {
|
||||
this.change(defMenu);
|
||||
}
|
||||
}
|
||||
},
|
||||
|
||||
drillDownMenu: function (screenSize) {
|
||||
if ($('.drilldown-menu').length) {
|
||||
if (screenSize == 'sm' || screenSize == 'xs') {
|
||||
if ($('#navbar-mobile').attr('aria-expanded') == 'true') {
|
||||
|
||||
$('.drilldown-menu').slidingMenu({
|
||||
backLabel: true
|
||||
});
|
||||
}
|
||||
}
|
||||
else {
|
||||
$('.drilldown-menu').slidingMenu({
|
||||
backLabel: true
|
||||
});
|
||||
}
|
||||
}
|
||||
},
|
||||
|
||||
change: function (defMenu) {
|
||||
var currentBreakpoint = Unison.fetch.now(); // Current Breakpoint
|
||||
|
||||
this.reset();
|
||||
|
||||
var menuType = $body.data('menu');
|
||||
|
||||
if (currentBreakpoint) {
|
||||
switch (currentBreakpoint.name) {
|
||||
case 'xl':
|
||||
if (menuType === 'vertical-overlay-menu') {
|
||||
this.hide();
|
||||
}
|
||||
else {
|
||||
if (defMenu === 'collapsed')
|
||||
this.collapse(defMenu);
|
||||
else
|
||||
this.expand();
|
||||
}
|
||||
break;
|
||||
case 'lg':
|
||||
if (menuType === 'vertical-overlay-menu' || menuType === 'vertical-menu-modern') {
|
||||
this.hide();
|
||||
}
|
||||
else {
|
||||
this.collapse();
|
||||
}
|
||||
break;
|
||||
case 'md':
|
||||
case 'sm':
|
||||
this.hide();
|
||||
break;
|
||||
case 'xs':
|
||||
this.hide();
|
||||
break;
|
||||
}
|
||||
}
|
||||
|
||||
// On the small and extra small screen make them overlay menu
|
||||
if (menuType === 'vertical-menu' || menuType === 'vertical-menu-modern') {
|
||||
this.toOverlayMenu(currentBreakpoint.name, menuType);
|
||||
}
|
||||
|
||||
if ($body.is('.horizontal-layout') && !$body.hasClass('.horizontal-menu-demo')) {
|
||||
this.changeMenu(currentBreakpoint.name);
|
||||
|
||||
$('.menu-toggle').removeClass('is-active');
|
||||
}
|
||||
|
||||
// Initialize drill down menu for vertical layouts, for horizontal layouts drilldown menu is intitialized in changemenu function
|
||||
if (menuType != 'horizontal-menu') {
|
||||
// Drill down menu
|
||||
// ------------------------------
|
||||
this.drillDownMenu(currentBreakpoint.name);
|
||||
}
|
||||
|
||||
// Dropdown submenu on large screen on hover For Large screen only
|
||||
// ---------------------------------------------------------------
|
||||
if (currentBreakpoint.name == 'xl') {
|
||||
$('body[data-open="hover"] .dropdown').on('mouseenter', function () {
|
||||
if (!($(this).hasClass('show'))) {
|
||||
$(this).addClass('show');
|
||||
} else {
|
||||
$(this).removeClass('show');
|
||||
}
|
||||
}).on('mouseleave', function (event) {
|
||||
$(this).removeClass('show');
|
||||
});
|
||||
|
||||
$('body[data-open="hover"] .dropdown a').on('click', function (e) {
|
||||
if (menuType == 'horizontal-menu') {
|
||||
var $this = $(this);
|
||||
if ($this.hasClass('dropdown-toggle')) {
|
||||
return false;
|
||||
}
|
||||
}
|
||||
});
|
||||
}
|
||||
|
||||
// Added data attribute brand-center for navbar-brand-center
|
||||
// TODO:AJ: Shift this feature in JADE.
|
||||
if ($('.header-navbar').hasClass('navbar-brand-center')) {
|
||||
$('.header-navbar').attr('data-nav', 'brand-center');
|
||||
}
|
||||
if (currentBreakpoint.name == 'sm' || currentBreakpoint.name == 'xs') {
|
||||
$('.header-navbar[data-nav=brand-center]').removeClass('navbar-brand-center');
|
||||
} else {
|
||||
$('.header-navbar[data-nav=brand-center]').addClass('navbar-brand-center');
|
||||
}
|
||||
|
||||
// Dropdown submenu on small screen on click
|
||||
// --------------------------------------------------
|
||||
$('ul.dropdown-menu [data-toggle=dropdown]').on('click', function (event) {
|
||||
if ($(this).siblings('ul.dropdown-menu').length > 0) {
|
||||
event.preventDefault();
|
||||
}
|
||||
event.stopPropagation();
|
||||
$(this).parent().siblings().removeClass('show');
|
||||
$(this).parent().toggleClass('show');
|
||||
});
|
||||
|
||||
// Horizontal Fixed Nav Sticky hight issue on small screens
|
||||
if (menuType == 'horizontal-menu') {
|
||||
if (currentBreakpoint.name == 'sm' || currentBreakpoint.name == 'xs') {
|
||||
if ($(".menu-fixed").length) {
|
||||
$(".menu-fixed").unstick();
|
||||
}
|
||||
}
|
||||
else {
|
||||
if ($(".navbar-fixed").length) {
|
||||
$(".navbar-fixed").sticky();
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
/********************************************
|
||||
* Searchable Menu *
|
||||
********************************************/
|
||||
|
||||
function searchMenu(list) {
|
||||
|
||||
var input = $(".menu-search");
|
||||
$(input)
|
||||
.change(function () {
|
||||
var filter = $(this).val();
|
||||
if (filter) {
|
||||
// Hide Main Navigation Headers
|
||||
$('.navigation-header').hide();
|
||||
// this finds all links in a list that contain the input,
|
||||
// and hide the ones not containing the input while showing the ones that do
|
||||
$(list).find("li a:not(:Contains(" + filter + "))").hide().parent().hide();
|
||||
// $(list).find("li a:Contains(" + filter + ")").show().parents('li').show().addClass('open').closest('li').children('a').show();
|
||||
var searchFilter = $(list).find("li a:Contains(" + filter + ")");
|
||||
if (searchFilter.parent().hasClass('has-sub')) {
|
||||
searchFilter.show()
|
||||
.parents('li').show()
|
||||
.addClass('open')
|
||||
.closest('li')
|
||||
.children('a').show()
|
||||
.children('li').show();
|
||||
|
||||
// searchFilter.parents('li').find('li').show().children('a').show();
|
||||
if (searchFilter.siblings('ul').length > 0) {
|
||||
searchFilter.siblings('ul').children('li').show().children('a').show();
|
||||
}
|
||||
|
||||
}
|
||||
else {
|
||||
searchFilter.show().parents('li').show().addClass('open').closest('li').children('a').show();
|
||||
}
|
||||
} else {
|
||||
// return to default
|
||||
$('.navigation-header').show();
|
||||
$(list).find("li a").show().parent().show().removeClass('open');
|
||||
}
|
||||
$.app.menu.manualScroller.update();
|
||||
return false;
|
||||
})
|
||||
.keyup(function () {
|
||||
// fire the above change event after every letter
|
||||
$(this).change();
|
||||
});
|
||||
}
|
||||
|
||||
if (menuType === 'vertical-menu' || menuType === 'vertical-overlay-menu') {
|
||||
// custom css expression for a case-insensitive contains()
|
||||
jQuery.expr[':'].Contains = function (a, i, m) {
|
||||
return (a.textContent || a.innerText || "").toUpperCase().indexOf(m[3].toUpperCase()) >= 0;
|
||||
};
|
||||
|
||||
searchMenu($("#main-menu-navigation"));
|
||||
}
|
||||
},
|
||||
|
||||
transit: function (callback1, callback2) {
|
||||
var menuObj = this;
|
||||
$body.addClass('changing-menu');
|
||||
|
||||
callback1.call(menuObj);
|
||||
|
||||
if ($body.hasClass('vertical-layout')) {
|
||||
if ($body.hasClass('menu-open') || $body.hasClass('menu-expanded')) {
|
||||
$('.menu-toggle').addClass('is-active');
|
||||
|
||||
// Show menu header search when menu is normally visible
|
||||
if ($body.data('menu') === 'vertical-menu') {
|
||||
if ($('.main-menu-header')) {
|
||||
$('.main-menu-header').show();
|
||||
}
|
||||
}
|
||||
}
|
||||
else {
|
||||
$('.menu-toggle').removeClass('is-active');
|
||||
|
||||
// Hide menu header search when only menu icons are visible
|
||||
if ($body.data('menu') === 'vertical-menu') {
|
||||
if ($('.main-menu-header')) {
|
||||
$('.main-menu-header').hide();
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
setTimeout(function () {
|
||||
callback2.call(menuObj);
|
||||
$body.removeClass('changing-menu');
|
||||
|
||||
menuObj.update();
|
||||
}, 500);
|
||||
},
|
||||
|
||||
open: function () {
|
||||
this.transit(function () {
|
||||
$body.removeClass('menu-hide menu-collapsed').addClass('menu-open');
|
||||
this.hidden = false;
|
||||
this.expanded = true;
|
||||
|
||||
if ($body.hasClass('vertical-overlay-menu')) {
|
||||
$('.sidenav-overlay').removeClass('d-none').addClass('d-block');
|
||||
$('body').css('overflow', 'hidden');
|
||||
}
|
||||
}, function () {
|
||||
if (!$('.main-menu').hasClass('menu-native-scroll') && $('.main-menu').hasClass('menu-fixed')) {
|
||||
this.manualScroller.enable();
|
||||
$('.main-menu-content').css('height', $(window).height() - $('.header-navbar').height() - $('.main-menu-header').outerHeight() - $('.main-menu-footer').outerHeight());
|
||||
// this.manualScroller.update();
|
||||
}
|
||||
|
||||
if (!$body.hasClass('vertical-overlay-menu')) {
|
||||
$('.sidenav-overlay').removeClass('d-block d-none');
|
||||
$('body').css('overflow', 'auto');
|
||||
}
|
||||
});
|
||||
},
|
||||
|
||||
hide: function () {
|
||||
|
||||
this.transit(function () {
|
||||
$body.removeClass('menu-open menu-expanded').addClass('menu-hide');
|
||||
this.hidden = true;
|
||||
this.expanded = false;
|
||||
|
||||
if ($body.hasClass('vertical-overlay-menu')) {
|
||||
$('.sidenav-overlay').removeClass('d-block').addClass('d-none');
|
||||
$('body').css('overflow', 'auto');
|
||||
}
|
||||
}, function () {
|
||||
if (!$('.main-menu').hasClass('menu-native-scroll') && $('.main-menu').hasClass('menu-fixed')) {
|
||||
this.manualScroller.enable();
|
||||
}
|
||||
|
||||
if (!$body.hasClass('vertical-overlay-menu')) {
|
||||
$('.sidenav-overlay').removeClass('d-block d-none');
|
||||
$('body').css('overflow', 'auto');
|
||||
}
|
||||
});
|
||||
},
|
||||
|
||||
expand: function () {
|
||||
if (this.expanded === false) {
|
||||
if ($body.data('menu') == 'vertical-menu-modern') {
|
||||
$('.modern-nav-toggle').find('.toggle-icon')
|
||||
.removeClass('feather icon-circle').addClass('feather icon-disc');
|
||||
}
|
||||
this.transit(function () {
|
||||
$body.removeClass('menu-collapsed').addClass('menu-expanded');
|
||||
this.collapsed = false;
|
||||
this.expanded = true;
|
||||
|
||||
$('.sidenav-overlay').removeClass('d-block d-none');
|
||||
}, function () {
|
||||
|
||||
if (($('.main-menu').hasClass('menu-native-scroll') || $body.data('menu') == 'horizontal-menu')) {
|
||||
this.manualScroller.disable();
|
||||
}
|
||||
else {
|
||||
if ($('.main-menu').hasClass('menu-fixed'))
|
||||
this.manualScroller.enable();
|
||||
}
|
||||
|
||||
if (($body.data('menu') == 'vertical-menu' || $body.data('menu') == 'vertical-menu-modern') && $('.main-menu').hasClass('menu-fixed')) {
|
||||
$('.main-menu-content').css('height', $(window).height() - $('.header-navbar').height() - $('.main-menu-header').outerHeight() - $('.main-menu-footer').outerHeight());
|
||||
// this.manualScroller.update();
|
||||
}
|
||||
|
||||
});
|
||||
}
|
||||
},
|
||||
|
||||
collapse: function (defMenu) {
|
||||
if (this.collapsed === false) {
|
||||
if ($body.data('menu') == 'vertical-menu-modern') {
|
||||
$('.modern-nav-toggle').find('.toggle-icon')
|
||||
.removeClass('feather icon-disc').addClass('feather icon-circle');
|
||||
}
|
||||
this.transit(function () {
|
||||
$body.removeClass('menu-expanded').addClass('menu-collapsed');
|
||||
this.collapsed = true;
|
||||
this.expanded = false;
|
||||
|
||||
$('.content-overlay').removeClass('d-block d-none');
|
||||
}, function () {
|
||||
|
||||
if (($body.data('menu') == 'horizontal-menu') && $body.hasClass('vertical-overlay-menu')) {
|
||||
if ($('.main-menu').hasClass('menu-fixed'))
|
||||
this.manualScroller.enable();
|
||||
}
|
||||
if (($body.data('menu') == 'vertical-menu' || $body.data('menu') == 'vertical-menu-modern') && $('.main-menu').hasClass('menu-fixed')) {
|
||||
$('.main-menu-content').css('height', $(window).height() - $('.header-navbar').height());
|
||||
// this.manualScroller.update();
|
||||
}
|
||||
if ($body.data('menu') == 'vertical-menu-modern') {
|
||||
if ($('.main-menu').hasClass('menu-fixed'))
|
||||
this.manualScroller.enable();
|
||||
}
|
||||
});
|
||||
}
|
||||
},
|
||||
|
||||
toOverlayMenu: function (screen, menuType) {
|
||||
var menu = $body.data('menu');
|
||||
if (menuType == 'vertical-menu-modern') {
|
||||
if (screen == 'lg' || screen == 'md' || screen == 'sm' || screen == 'xs') {
|
||||
if ($body.hasClass(menu)) {
|
||||
$body.removeClass(menu).addClass('vertical-overlay-menu');
|
||||
}
|
||||
}
|
||||
else {
|
||||
if ($body.hasClass('vertical-overlay-menu')) {
|
||||
$body.removeClass('vertical-overlay-menu').addClass(menu);
|
||||
}
|
||||
}
|
||||
}
|
||||
else {
|
||||
if (screen == 'sm' || screen == 'xs') {
|
||||
if ($body.hasClass(menu)) {
|
||||
$body.removeClass(menu).addClass('vertical-overlay-menu');
|
||||
}
|
||||
}
|
||||
else {
|
||||
if ($body.hasClass('vertical-overlay-menu')) {
|
||||
$body.removeClass('vertical-overlay-menu').addClass(menu);
|
||||
}
|
||||
}
|
||||
}
|
||||
},
|
||||
|
||||
changeMenu: function (screen) {
|
||||
// Replace menu html
|
||||
$('div[data-menu="menu-wrapper"]').html('');
|
||||
$('div[data-menu="menu-wrapper"]').html(menuWrapper_el);
|
||||
|
||||
var menuWrapper = $('div[data-menu="menu-wrapper"]'),
|
||||
menuContainer = $('div[data-menu="menu-container"]'),
|
||||
menuNavigation = $('ul[data-menu="menu-navigation"]'),
|
||||
/*megaMenu = $('li[data-menu="megamenu"]'),
|
||||
megaMenuCol = $('li[data-mega-col]'),*/
|
||||
dropdownMenu = $('li[data-menu="dropdown"]'),
|
||||
dropdownSubMenu = $('li[data-menu="dropdown-submenu"]');
|
||||
|
||||
if (screen == 'sm' || screen == 'xs') {
|
||||
|
||||
// Change body classes
|
||||
$body.removeClass($body.data('menu')).addClass('vertical-layout vertical-overlay-menu fixed-navbar');
|
||||
|
||||
// Add navbar-fix-top class on small screens
|
||||
$('nav.header-navbar').addClass('fixed-top');
|
||||
|
||||
// Change menu wrapper, menu container, menu navigation classes
|
||||
menuWrapper.removeClass().addClass('main-menu menu-light menu-fixed menu-shadow');
|
||||
// menuContainer.removeClass().addClass('main-menu-content');
|
||||
menuNavigation.removeClass().addClass('navigation navigation-main');
|
||||
|
||||
// If Dropdown Menu
|
||||
dropdownMenu.removeClass('dropdown').addClass('has-sub');
|
||||
dropdownMenu.find('a').removeClass('dropdown-toggle nav-link');
|
||||
dropdownMenu.children('ul').find('a').removeClass('dropdown-item');
|
||||
dropdownMenu.find('ul').removeClass('dropdown-menu');
|
||||
dropdownSubMenu.removeClass().addClass('has-sub');
|
||||
|
||||
$.app.nav.init();
|
||||
|
||||
// Dropdown submenu on small screen on click
|
||||
// --------------------------------------------------
|
||||
$('ul.dropdown-menu [data-toggle=dropdown]').on('click', function (event) {
|
||||
event.preventDefault();
|
||||
event.stopPropagation();
|
||||
$(this).parent().siblings().removeClass('open');
|
||||
$(this).parent().toggleClass('open');
|
||||
});
|
||||
}
|
||||
else {
|
||||
// Change body classes
|
||||
$body.removeClass('vertical-layout vertical-overlay-menu fixed-navbar').addClass($body.data('menu'));
|
||||
|
||||
// Remove navbar-fix-top class on large screens
|
||||
$('nav.header-navbar').removeClass('fixed-top');
|
||||
|
||||
// Change menu wrapper, menu container, menu navigation classes
|
||||
menuWrapper.removeClass().addClass(menuWrapperClasses);
|
||||
|
||||
// Intitialize drill down menu for horizontal layouts
|
||||
// --------------------------------------------------
|
||||
this.drillDownMenu(screen);
|
||||
|
||||
$('a.dropdown-item.nav-has-children').on('click', function () {
|
||||
event.preventDefault();
|
||||
event.stopPropagation();
|
||||
});
|
||||
$('a.dropdown-item.nav-has-parent').on('click', function () {
|
||||
event.preventDefault();
|
||||
event.stopPropagation();
|
||||
});
|
||||
}
|
||||
},
|
||||
|
||||
toggle: function () {
|
||||
var currentBreakpoint = Unison.fetch.now(); // Current Breakpoint
|
||||
var collapsed = this.collapsed;
|
||||
var expanded = this.expanded;
|
||||
var hidden = this.hidden;
|
||||
var menu = $body.data('menu');
|
||||
|
||||
switch (currentBreakpoint.name) {
|
||||
case 'xl':
|
||||
if (expanded === true) {
|
||||
if (menu == 'vertical-overlay-menu') {
|
||||
this.hide();
|
||||
}
|
||||
else {
|
||||
this.collapse();
|
||||
}
|
||||
}
|
||||
else {
|
||||
if (menu == 'vertical-overlay-menu') {
|
||||
this.open();
|
||||
}
|
||||
else {
|
||||
this.expand();
|
||||
}
|
||||
}
|
||||
break;
|
||||
case 'lg':
|
||||
if (expanded === true) {
|
||||
if (menu == 'vertical-overlay-menu' || menu == 'vertical-menu-modern') {
|
||||
this.hide();
|
||||
}
|
||||
else {
|
||||
this.collapse();
|
||||
}
|
||||
}
|
||||
else {
|
||||
if (menu == 'vertical-overlay-menu' || menu == 'vertical-menu-modern') {
|
||||
this.open();
|
||||
}
|
||||
else {
|
||||
this.expand();
|
||||
}
|
||||
}
|
||||
break;
|
||||
case 'md':
|
||||
case 'sm':
|
||||
if (hidden === true) {
|
||||
this.open();
|
||||
} else {
|
||||
this.hide();
|
||||
}
|
||||
break;
|
||||
case 'xs':
|
||||
if (hidden === true) {
|
||||
this.open();
|
||||
} else {
|
||||
this.hide();
|
||||
}
|
||||
break;
|
||||
}
|
||||
|
||||
// Re-init sliding menu to update width
|
||||
this.drillDownMenu(currentBreakpoint.name);
|
||||
},
|
||||
|
||||
update: function () {
|
||||
this.manualScroller.update();
|
||||
},
|
||||
|
||||
reset: function () {
|
||||
this.expanded = false;
|
||||
this.collapsed = false;
|
||||
this.hidden = false;
|
||||
$body.removeClass('menu-hide menu-open menu-collapsed menu-expanded');
|
||||
},
|
||||
};
|
||||
|
||||
// Navigation Menu
|
||||
$.app.nav = {
|
||||
container: $('.navigation-main'),
|
||||
initialized: false,
|
||||
navItem: $('.navigation-main').find('li').not('.navigation-category'),
|
||||
|
||||
config: {
|
||||
speed: 300,
|
||||
},
|
||||
|
||||
init: function (config) {
|
||||
this.initialized = true; // Set to true when initialized
|
||||
$.extend(this.config, config);
|
||||
|
||||
this.bind_events();
|
||||
},
|
||||
|
||||
bind_events: function () {
|
||||
var menuObj = this;
|
||||
|
||||
$('.navigation-main').on('mouseenter.app.menu', 'li', function () {
|
||||
var $this = $(this);
|
||||
$('.hover', '.navigation-main').removeClass('hover');
|
||||
if ($body.hasClass('menu-collapsed') && $body.data('menu') != 'vertical-menu-modern') {
|
||||
$('.main-menu-content').children('span.menu-title').remove();
|
||||
$('.main-menu-content').children('a.menu-title').remove();
|
||||
$('.main-menu-content').children('ul.menu-content').remove();
|
||||
|
||||
// Title
|
||||
var menuTitle = $this.find('span.menu-title').clone(),
|
||||
tempTitle,
|
||||
tempLink;
|
||||
if (!$this.hasClass('has-sub')) {
|
||||
tempTitle = $this.find('span.menu-title').text();
|
||||
tempLink = $this.children('a').attr('href');
|
||||
if (tempTitle !== '') {
|
||||
menuTitle = $("<a>");
|
||||
menuTitle.attr("href", tempLink);
|
||||
menuTitle.attr("title", tempTitle);
|
||||
menuTitle.text(tempTitle);
|
||||
menuTitle.addClass("menu-title");
|
||||
}
|
||||
}
|
||||
// menu_header_height = ($('.main-menu-header').length) ? $('.main-menu-header').height() : 0,
|
||||
// fromTop = menu_header_height + $this.position().top + parseInt($this.css( "border-top" ),10);
|
||||
var fromTop;
|
||||
if ($this.css("border-top")) {
|
||||
fromTop = $this.position().top + parseInt($this.css("border-top"), 10);
|
||||
}
|
||||
else {
|
||||
fromTop = $this.position().top;
|
||||
}
|
||||
if ($body.data('menu') !== 'vertical-compact-menu') {
|
||||
menuTitle.appendTo('.main-menu-content').css({
|
||||
position: 'fixed',
|
||||
top: fromTop,
|
||||
});
|
||||
}
|
||||
|
||||
// Content
|
||||
if ($this.hasClass('has-sub') && $this.hasClass('nav-item')) {
|
||||
var menuContent = $this.children('ul:first');
|
||||
menuObj.adjustSubmenu($this);
|
||||
}
|
||||
}
|
||||
$this.addClass('hover');
|
||||
}).on('mouseleave.app.menu', 'li', function () {
|
||||
// $(this).removeClass('hover');
|
||||
}).on('active.app.menu', 'li', function (e) {
|
||||
$(this).addClass('active');
|
||||
e.stopPropagation();
|
||||
}).on('deactive.app.menu', 'li.active', function (e) {
|
||||
$(this).removeClass('active');
|
||||
e.stopPropagation();
|
||||
}).on('open.app.menu', 'li', function (e) {
|
||||
|
||||
var $listItem = $(this);
|
||||
$listItem.addClass('open');
|
||||
|
||||
menuObj.expand($listItem);
|
||||
|
||||
// If menu collapsible then do not take any action
|
||||
if ($('.main-menu').hasClass('menu-collapsible')) {
|
||||
return false;
|
||||
}
|
||||
// If menu accordion then close all except clicked once
|
||||
else {
|
||||
$listItem.siblings('.open').find('li.open').trigger('close.app.menu');
|
||||
$listItem.siblings('.open').trigger('close.app.menu');
|
||||
}
|
||||
|
||||
e.stopPropagation();
|
||||
}).on('close.app.menu', 'li.open', function (e) {
|
||||
var $listItem = $(this);
|
||||
|
||||
$listItem.removeClass('open');
|
||||
menuObj.collapse($listItem);
|
||||
|
||||
e.stopPropagation();
|
||||
}).on('click.app.menu', 'li', function (e) {
|
||||
var $listItem = $(this);
|
||||
if ($listItem.is('.disabled')) {
|
||||
e.preventDefault();
|
||||
}
|
||||
else {
|
||||
if ($body.hasClass('menu-collapsed') && $body.data('menu') != 'vertical-menu-modern') {
|
||||
e.preventDefault();
|
||||
}
|
||||
else {
|
||||
if ($listItem.has('ul')) {
|
||||
if ($listItem.is('.open')) {
|
||||
$listItem.trigger('close.app.menu');
|
||||
} else {
|
||||
$listItem.trigger('open.app.menu');
|
||||
}
|
||||
} else {
|
||||
if (!$listItem.is('.active')) {
|
||||
$listItem.siblings('.active').trigger('deactive.app.menu');
|
||||
$listItem.trigger('active.app.menu');
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
e.stopPropagation();
|
||||
});
|
||||
|
||||
|
||||
$('.navbar-header, .main-menu').on('mouseenter', modernMenuExpand).on('mouseleave', modernMenuCollapse);
|
||||
|
||||
function modernMenuExpand() {
|
||||
if ($body.data('menu') == 'vertical-menu-modern') {
|
||||
$('.main-menu, .navbar-header').addClass('expanded');
|
||||
if ($body.hasClass('menu-collapsed')) {
|
||||
if ($('.main-menu li.open').length === 0) {
|
||||
$(".main-menu-content").find('li.active').parents('li').addClass('open');
|
||||
}
|
||||
var $listItem = $('.main-menu li.menu-collapsed-open'),
|
||||
$subList = $listItem.children('ul');
|
||||
|
||||
$subList.hide().slideDown(200, function () {
|
||||
$(this).css('display', '');
|
||||
});
|
||||
|
||||
$listItem.addClass('open').removeClass('menu-collapsed-open');
|
||||
// $.app.menu.changeLogo('expand');
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
function modernMenuCollapse() {
|
||||
if ($body.hasClass('menu-collapsed') && $body.data('menu') == 'vertical-menu-modern') {
|
||||
setTimeout(function () {
|
||||
if ($('.main-menu:hover').length === 0 && $('.navbar-header:hover').length === 0) {
|
||||
|
||||
$('.main-menu, .navbar-header').removeClass('expanded');
|
||||
if ($body.hasClass('menu-collapsed')) {
|
||||
var $listItem = $('.main-menu li.open'),
|
||||
$subList = $listItem.children('ul');
|
||||
$listItem.addClass('menu-collapsed-open');
|
||||
|
||||
$subList.show().slideUp(200, function () {
|
||||
$(this).css('display', '');
|
||||
});
|
||||
|
||||
$listItem.removeClass('open');
|
||||
// $.app.menu.changeLogo();
|
||||
}
|
||||
}
|
||||
}, 1);
|
||||
}
|
||||
}
|
||||
|
||||
$('.main-menu-content').on('mouseleave', function () {
|
||||
if ($body.hasClass('menu-collapsed')) {
|
||||
$('.main-menu-content').children('span.menu-title').remove();
|
||||
$('.main-menu-content').children('a.menu-title').remove();
|
||||
$('.main-menu-content').children('ul.menu-content').remove();
|
||||
}
|
||||
$('.hover', '.navigation-main').removeClass('hover');
|
||||
});
|
||||
|
||||
// If list item has sub menu items then prevent redirection.
|
||||
$('.navigation-main li.has-sub > a').on('click', function (e) {
|
||||
e.preventDefault();
|
||||
});
|
||||
|
||||
$('ul.menu-content').on('click', 'li', function (e) {
|
||||
var $listItem = $(this);
|
||||
if ($listItem.is('.disabled')) {
|
||||
e.preventDefault();
|
||||
}
|
||||
else {
|
||||
if ($listItem.has('ul')) {
|
||||
if ($listItem.is('.open')) {
|
||||
$listItem.removeClass('open');
|
||||
menuObj.collapse($listItem);
|
||||
} else {
|
||||
$listItem.addClass('open');
|
||||
|
||||
menuObj.expand($listItem);
|
||||
|
||||
// If menu collapsible then do not take any action
|
||||
if ($('.main-menu').hasClass('menu-collapsible')) {
|
||||
return false;
|
||||
}
|
||||
// If menu accordion then close all except clicked once
|
||||
else {
|
||||
$listItem.siblings('.open').find('li.open').trigger('close.app.menu');
|
||||
$listItem.siblings('.open').trigger('close.app.menu');
|
||||
}
|
||||
|
||||
e.stopPropagation();
|
||||
}
|
||||
} else {
|
||||
if (!$listItem.is('.active')) {
|
||||
$listItem.siblings('.active').trigger('deactive.app.menu');
|
||||
$listItem.trigger('active.app.menu');
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
e.stopPropagation();
|
||||
});
|
||||
},
|
||||
|
||||
/**
|
||||
* Ensure an admin submenu is within the visual viewport.
|
||||
* @param {jQuery} $menuItem The parent menu item containing the submenu.
|
||||
*/
|
||||
adjustSubmenu: function ($menuItem) {
|
||||
var menuHeaderHeight, menutop, topPos, winHeight,
|
||||
bottomOffset, subMenuHeight, popOutMenuHeight, borderWidth, scroll_theme,
|
||||
$submenu = $menuItem.children('ul:first'),
|
||||
ul = $submenu.clone(true);
|
||||
|
||||
menuHeaderHeight = $('.main-menu-header').height();
|
||||
menutop = $menuItem.position().top;
|
||||
winHeight = $window.height() - $('.header-navbar').height();
|
||||
borderWidth = 0;
|
||||
subMenuHeight = $submenu.height();
|
||||
|
||||
if (parseInt($menuItem.css("border-top"), 10) > 0) {
|
||||
borderWidth = parseInt($menuItem.css("border-top"), 10);
|
||||
}
|
||||
|
||||
popOutMenuHeight = winHeight - menutop - $menuItem.height() - 30;
|
||||
scroll_theme = ($('.main-menu').hasClass('menu-dark')) ? 'light' : 'dark';
|
||||
|
||||
topPos = menutop + $menuItem.height() + borderWidth;
|
||||
|
||||
ul.addClass('menu-popout').appendTo('.main-menu-content').css({
|
||||
'top': topPos,
|
||||
'position': 'fixed',
|
||||
'max-height': popOutMenuHeight,
|
||||
});
|
||||
|
||||
var menu_content = new PerfectScrollbar('.main-menu-content > ul.menu-content', {
|
||||
wheelPropagation: false
|
||||
});
|
||||
},
|
||||
|
||||
collapse: function ($listItem, callback) {
|
||||
var $subList = $listItem.children('ul');
|
||||
|
||||
$subList.show().slideUp($.app.nav.config.speed, function () {
|
||||
$(this).css('display', '');
|
||||
|
||||
$(this).find('> li').removeClass('is-shown');
|
||||
|
||||
if (callback) {
|
||||
callback();
|
||||
}
|
||||
|
||||
$.app.nav.container.trigger('collapsed.app.menu');
|
||||
});
|
||||
},
|
||||
|
||||
expand: function ($listItem, callback) {
|
||||
var $subList = $listItem.children('ul');
|
||||
var $children = $subList.children('li').addClass('is-hidden');
|
||||
|
||||
$subList.hide().slideDown($.app.nav.config.speed, function () {
|
||||
$(this).css('display', '');
|
||||
|
||||
if (callback) {
|
||||
callback();
|
||||
}
|
||||
|
||||
$.app.nav.container.trigger('expanded.app.menu');
|
||||
});
|
||||
|
||||
setTimeout(function () {
|
||||
$children.addClass('is-shown');
|
||||
$children.removeClass('is-hidden');
|
||||
}, 0);
|
||||
},
|
||||
|
||||
refresh: function () {
|
||||
$.app.nav.container.find('.open').removeClass('open');
|
||||
},
|
||||
};
|
||||
|
||||
})(window, document, jQuery);
|
||||
785
public/vendor/dashboard/src/js/core/app.js
vendored
Executable file
785
public/vendor/dashboard/src/js/core/app.js
vendored
Executable file
@@ -0,0 +1,785 @@
|
||||
/*=========================================================================================
|
||||
File Name: app.js
|
||||
Description: Template related app JS.
|
||||
----------------------------------------------------------------------------------------
|
||||
Item Name: Vuesax HTML Admin Template
|
||||
Version: 1.1
|
||||
Author: Pixinvent
|
||||
Author URL: hhttp://www.themeforest.net/user/pixinvent
|
||||
==========================================================================================*/
|
||||
|
||||
(function (window, document, $) {
|
||||
'use strict';
|
||||
var $html = $('html');
|
||||
var $body = $('body');
|
||||
var $danger = "#ea5455";
|
||||
var $primary = "#7367f0";
|
||||
var $textcolor = "#4e5154";
|
||||
|
||||
|
||||
$(window).on('load', function () {
|
||||
var rtl;
|
||||
var compactMenu = false; // Set it to true, if you want default menu to be compact
|
||||
|
||||
if ($body.hasClass('menu-collapsed')) {
|
||||
compactMenu = true;
|
||||
}
|
||||
|
||||
if ($('html').data('textdirection') == 'rtl') {
|
||||
rtl = true;
|
||||
}
|
||||
|
||||
setTimeout(function () {
|
||||
$html.removeClass('loading').addClass('loaded');
|
||||
}, 1200);
|
||||
|
||||
$.app.menu.init(compactMenu);
|
||||
|
||||
// Navigation configurations
|
||||
var config = {
|
||||
speed: 300 // set speed to expand / collpase menu
|
||||
};
|
||||
if ($.app.nav.initialized === false) {
|
||||
$.app.nav.init(config);
|
||||
}
|
||||
|
||||
Unison.on('change', function (bp) {
|
||||
$.app.menu.change();
|
||||
});
|
||||
|
||||
// Tooltip Initialization
|
||||
$('[data-toggle="tooltip"]').tooltip({
|
||||
container: 'body'
|
||||
});
|
||||
|
||||
// Top Navbars - Hide on Scroll
|
||||
if ($(".navbar-hide-on-scroll").length > 0) {
|
||||
$(".navbar-hide-on-scroll.fixed-top").headroom({
|
||||
"offset": 205,
|
||||
"tolerance": 5,
|
||||
"classes": {
|
||||
// when element is initialised
|
||||
initial: "headroom",
|
||||
// when scrolling up
|
||||
pinned: "headroom--pinned-top",
|
||||
// when scrolling down
|
||||
unpinned: "headroom--unpinned-top",
|
||||
}
|
||||
});
|
||||
// Bottom Navbars - Hide on Scroll
|
||||
$(".navbar-hide-on-scroll.fixed-bottom").headroom({
|
||||
"offset": 205,
|
||||
"tolerance": 5,
|
||||
"classes": {
|
||||
// when element is initialised
|
||||
initial: "headroom",
|
||||
// when scrolling up
|
||||
pinned: "headroom--pinned-bottom",
|
||||
// when scrolling down
|
||||
unpinned: "headroom--unpinned-bottom",
|
||||
}
|
||||
});
|
||||
}
|
||||
|
||||
// Collapsible Card
|
||||
$('a[data-action="collapse"]').on('click', function (e) {
|
||||
e.preventDefault();
|
||||
$(this).closest('.card').children('.card-content').collapse('toggle');
|
||||
// Adding bottom padding on card collapse
|
||||
$(this).closest('.card').children('.card-header').css('padding-bottom', '1.5rem');
|
||||
$(this).closest('.card').find('[data-action="collapse"]').toggleClass('rotate');
|
||||
});
|
||||
|
||||
// Toggle fullscreen
|
||||
$('a[data-action="expand"]').on('click', function (e) {
|
||||
e.preventDefault();
|
||||
$(this).closest('.card').find('[data-action="expand"] i').toggleClass('icon-maximize icon-minimize');
|
||||
$(this).closest('.card').toggleClass('card-fullscreen');
|
||||
});
|
||||
|
||||
// Notifications & messages scrollable
|
||||
$('.scrollable-container').each(function () {
|
||||
var scrollable_container = new PerfectScrollbar($(this)[0], {
|
||||
wheelPropagation: false
|
||||
});
|
||||
});
|
||||
|
||||
// Reload Card
|
||||
$('a[data-action="reload"]').on('click', function () {
|
||||
var block_ele = $(this).closest('.card').find(".card-content");
|
||||
var reloadActionOverlay;
|
||||
if ($body.hasClass("dark-layout")) {
|
||||
var reloadActionOverlay = "#10163a";
|
||||
}
|
||||
else {
|
||||
var reloadActionOverlay = "#fff";
|
||||
}
|
||||
// Block Element
|
||||
block_ele.block({
|
||||
message: '<div class="feather icon-refresh-cw icon-spin font-medium-2 text-primary"></div>',
|
||||
timeout: 2000, //unblock after 2 seconds
|
||||
overlayCSS: {
|
||||
backgroundColor: reloadActionOverlay,
|
||||
cursor: 'wait',
|
||||
},
|
||||
css: {
|
||||
border: 0,
|
||||
padding: 0,
|
||||
backgroundColor: 'none'
|
||||
}
|
||||
});
|
||||
});
|
||||
|
||||
// Close Card
|
||||
$('a[data-action="close"]').on('click', function () {
|
||||
$(this).closest('.card').removeClass().slideUp('fast');
|
||||
});
|
||||
|
||||
// Match the height of each card in a row
|
||||
setTimeout(function () {
|
||||
$('.row.match-height').each(function () {
|
||||
$(this).find('.card').not('.card .card').matchHeight(); // Not .card .card prevents collapsible cards from taking height
|
||||
});
|
||||
}, 500);
|
||||
|
||||
|
||||
$('.card .heading-elements a[data-action="collapse"]').on('click', function () {
|
||||
var $this = $(this),
|
||||
card = $this.closest('.card');
|
||||
var cardHeight;
|
||||
|
||||
if (parseInt(card[0].style.height, 10) > 0) {
|
||||
cardHeight = card.css('height');
|
||||
card.css('height', '').attr('data-height', cardHeight);
|
||||
} else {
|
||||
if (card.data('height')) {
|
||||
cardHeight = card.data('height');
|
||||
card.css('height', cardHeight).attr('data-height', '');
|
||||
}
|
||||
}
|
||||
});
|
||||
|
||||
// Add sidebar group active class to active menu
|
||||
$(".main-menu-content").find('li.active').parents('li').addClass('sidebar-group-active');
|
||||
|
||||
// Add open class to parent list item if subitem is active except compact menu
|
||||
var menuType = $body.data('menu');
|
||||
if (menuType != 'horizontal-menu' && compactMenu === false) {
|
||||
$(".main-menu-content").find('li.active').parents('li').addClass('open');
|
||||
}
|
||||
if (menuType == 'horizontal-menu') {
|
||||
$(".main-menu-content").find('li.active').parents('li:not(.nav-item)').addClass('open');
|
||||
$(".main-menu-content").find('li.active').parents('li').addClass('active');
|
||||
}
|
||||
|
||||
//card heading actions buttons small screen support
|
||||
$(".heading-elements-toggle").on("click", function () {
|
||||
$(this).next(".heading-elements").toggleClass("visible");
|
||||
});
|
||||
|
||||
// Dynamic height for the chartjs div for the chart animations to work
|
||||
var chartjsDiv = $('.chartjs'),
|
||||
canvasHeight = chartjsDiv.children('canvas').attr('height');
|
||||
chartjsDiv.css('height', canvasHeight);
|
||||
|
||||
if ($body.hasClass('boxed-layout')) {
|
||||
if ($body.hasClass('vertical-overlay-menu')) {
|
||||
var menuWidth = $('.main-menu').width();
|
||||
var contentPosition = $('.app-content').position().left;
|
||||
var menuPositionAdjust = contentPosition - menuWidth;
|
||||
if ($body.hasClass('menu-flipped')) {
|
||||
$('.main-menu').css('right', menuPositionAdjust + 'px');
|
||||
} else {
|
||||
$('.main-menu').css('left', menuPositionAdjust + 'px');
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
//Custom File Input
|
||||
$('.custom-file input').change(function (e) {
|
||||
$(this).next('.custom-file-label').html(e.target.files[0].name);
|
||||
});
|
||||
|
||||
|
||||
/* Text Area Counter Set Start */
|
||||
|
||||
$(".char-textarea").on("keyup", function (event) {
|
||||
checkTextAreaMaxLength(this, event);
|
||||
// to later change text color in dark layout
|
||||
$(this).addClass("active")
|
||||
});
|
||||
|
||||
/*
|
||||
Checks the MaxLength of the Textarea
|
||||
-----------------------------------------------------
|
||||
@prerequisite: textBox = textarea dom element
|
||||
e = textarea event
|
||||
length = Max length of characters
|
||||
*/
|
||||
function checkTextAreaMaxLength(textBox, e) {
|
||||
|
||||
var maxLength = parseInt($(textBox).data("length"));
|
||||
|
||||
|
||||
if (!checkSpecialKeys(e)) {
|
||||
if (textBox.value.length < maxLength - 1) textBox.value = textBox.value.substring(0, maxLength);
|
||||
}
|
||||
$(".char-count").html(textBox.value.length);
|
||||
|
||||
if (textBox.value.length > maxLength) {
|
||||
$(".counter-value").css("background-color", $danger);
|
||||
$(".char-textarea").css("color", $danger);
|
||||
// to change text color after limit is maxedout out
|
||||
$(".char-textarea").addClass("max-limit")
|
||||
}
|
||||
else {
|
||||
$(".counter-value").css("background-color", $primary);
|
||||
$(".char-textarea").css("color", $textcolor);
|
||||
$(".char-textarea").removeClass("max-limit")
|
||||
|
||||
}
|
||||
|
||||
return true;
|
||||
}
|
||||
/*
|
||||
Checks if the keyCode pressed is inside special chars
|
||||
-------------------------------------------------------
|
||||
@prerequisite: e = e.keyCode object for the key pressed
|
||||
*/
|
||||
function checkSpecialKeys(e) {
|
||||
if (e.keyCode != 8 && e.keyCode != 46 && e.keyCode != 37 && e.keyCode != 38 && e.keyCode != 39 && e.keyCode != 40)
|
||||
return false;
|
||||
else
|
||||
return true;
|
||||
}
|
||||
|
||||
$('.content-overlay').on('click', function () {
|
||||
$('.search-list').removeClass('show');
|
||||
$('.app-content').removeClass('show-overlay');
|
||||
$('.bookmark-wrapper .bookmark-input').removeClass('show');
|
||||
});
|
||||
|
||||
// To show shadow in main menu when menu scrolls
|
||||
var container = document.getElementsByClassName('main-menu-content');
|
||||
if (container.length > 0) {
|
||||
container[0].addEventListener('ps-scroll-y', function () {
|
||||
if ($(this).find('.ps__thumb-y').position().top > 0) {
|
||||
$(".shadow-bottom").css('display', 'block');
|
||||
} else {
|
||||
$(".shadow-bottom").css('display', 'none');
|
||||
}
|
||||
});
|
||||
}
|
||||
});
|
||||
|
||||
// Hide overlay menu on content overlay click on small screens
|
||||
$(document).on('click', '.sidenav-overlay', function (e) {
|
||||
// Hide menu
|
||||
$.app.menu.hide();
|
||||
return false;
|
||||
});
|
||||
|
||||
// Execute below code only if we find hammer js for touch swipe feature on small screen
|
||||
if (typeof Hammer !== 'undefined') {
|
||||
|
||||
// Swipe menu gesture
|
||||
var swipeInElement = document.querySelector('.drag-target');
|
||||
|
||||
if ($(swipeInElement).length > 0) {
|
||||
var swipeInMenu = new Hammer(swipeInElement);
|
||||
|
||||
swipeInMenu.on("panright", function (ev) {
|
||||
if ($body.hasClass('vertical-overlay-menu')) {
|
||||
$.app.menu.open();
|
||||
return false;
|
||||
}
|
||||
});
|
||||
}
|
||||
|
||||
// menu swipe out gesture
|
||||
setTimeout(function () {
|
||||
var swipeOutElement = document.querySelector('.main-menu');
|
||||
var swipeOutMenu;
|
||||
|
||||
if ($(swipeOutElement).length > 0) {
|
||||
swipeOutMenu = new Hammer(swipeOutElement);
|
||||
|
||||
swipeOutMenu.get('pan').set({
|
||||
direction: Hammer.DIRECTION_ALL,
|
||||
threshold: 100
|
||||
});
|
||||
|
||||
swipeOutMenu.on("panleft", function (ev) {
|
||||
if ($body.hasClass('vertical-overlay-menu')) {
|
||||
$.app.menu.hide();
|
||||
return false;
|
||||
}
|
||||
});
|
||||
}
|
||||
}, 300);
|
||||
|
||||
// menu overlay swipe out gestrue
|
||||
var swipeOutOverlayElement = document.querySelector('.sidenav-overlay');
|
||||
|
||||
if ($(swipeOutOverlayElement).length > 0) {
|
||||
|
||||
var swipeOutOverlayMenu = new Hammer(swipeOutOverlayElement);
|
||||
|
||||
swipeOutOverlayMenu.on("panleft", function (ev) {
|
||||
if ($body.hasClass('vertical-overlay-menu')) {
|
||||
$.app.menu.hide();
|
||||
return false;
|
||||
}
|
||||
});
|
||||
}
|
||||
}
|
||||
|
||||
$(document).on('click', '.menu-toggle, .modern-nav-toggle', function (e) {
|
||||
e.preventDefault();
|
||||
|
||||
// Toggle menu
|
||||
$.app.menu.toggle();
|
||||
|
||||
setTimeout(function () {
|
||||
$(window).trigger("resize");
|
||||
}, 200);
|
||||
|
||||
if ($('#collapsed-sidebar').length > 0) {
|
||||
setTimeout(function () {
|
||||
if ($body.hasClass('menu-expanded') || $body.hasClass('menu-open')) {
|
||||
$('#collapsed-sidebar').prop('checked', false);
|
||||
} else {
|
||||
$('#collapsed-sidebar').prop('checked', true);
|
||||
}
|
||||
}, 1000);
|
||||
}
|
||||
|
||||
// Hides dropdown on click of menu toggle
|
||||
// $('[data-toggle="dropdown"]').dropdown('hide');
|
||||
|
||||
// Hides collapse dropdown on click of menu toggle
|
||||
if ($('.vertical-overlay-menu .navbar-with-menu .navbar-container .navbar-collapse').hasClass('show')) {
|
||||
$('.vertical-overlay-menu .navbar-with-menu .navbar-container .navbar-collapse').removeClass('show');
|
||||
}
|
||||
|
||||
return false;
|
||||
});
|
||||
|
||||
// Add Children Class
|
||||
$('.navigation').find('li').has('ul').addClass('has-sub');
|
||||
|
||||
$('.carousel').carousel({
|
||||
interval: 2000
|
||||
});
|
||||
|
||||
// Page full screen
|
||||
$('.nav-link-expand').on('click', function (e) {
|
||||
if (typeof screenfull != 'undefined') {
|
||||
if (screenfull.enabled) {
|
||||
screenfull.toggle();
|
||||
}
|
||||
}
|
||||
});
|
||||
if (typeof screenfull != 'undefined') {
|
||||
if (screenfull.enabled) {
|
||||
$(document).on(screenfull.raw.fullscreenchange, function () {
|
||||
if (screenfull.isFullscreen) {
|
||||
$('.nav-link-expand').find('i').toggleClass('icon-minimize icon-maximize');
|
||||
$("html").addClass("full-screen");
|
||||
} else {
|
||||
$('.nav-link-expand').find('i').toggleClass('icon-maximize icon-minimize');
|
||||
$("html").removeClass("full-screen");
|
||||
}
|
||||
});
|
||||
}
|
||||
}
|
||||
$(document).ready(function () {
|
||||
|
||||
/**********************************
|
||||
* Form Wizard Step Icon
|
||||
**********************************/
|
||||
$('.step-icon').each(function () {
|
||||
var $this = $(this);
|
||||
if ($this.siblings('span.step').length > 0) {
|
||||
$this.siblings('span.step').empty();
|
||||
$(this).appendTo($(this).siblings('span.step'));
|
||||
}
|
||||
});
|
||||
});
|
||||
|
||||
// Update manual scroller when window is resized
|
||||
$(window).resize(function () {
|
||||
$.app.menu.manualScroller.updateHeight();
|
||||
});
|
||||
|
||||
$('#sidebar-page-navigation').on('click', 'a.nav-link', function (e) {
|
||||
e.preventDefault();
|
||||
e.stopPropagation();
|
||||
var $this = $(this),
|
||||
href = $this.attr('href');
|
||||
var offset = $(href).offset();
|
||||
var scrollto = offset.top - 80; // minus fixed header height
|
||||
$('html, body').animate({
|
||||
scrollTop: scrollto
|
||||
}, 0);
|
||||
setTimeout(function () {
|
||||
$this.parent('.nav-item').siblings('.nav-item').children('.nav-link').removeClass('active');
|
||||
$this.addClass('active');
|
||||
}, 100);
|
||||
});
|
||||
|
||||
// main menu internationalization
|
||||
|
||||
// init i18n and load language file
|
||||
i18next
|
||||
.use(window.i18nextXHRBackend)
|
||||
.init({
|
||||
debug: true,
|
||||
fallbackLng: "en",
|
||||
backend: {
|
||||
loadPath: "../../../app-assets/data/locales/{{lng}}.json",
|
||||
},
|
||||
returnObjects: true
|
||||
},
|
||||
function (err, t) {
|
||||
// resources have been loaded
|
||||
jqueryI18next.init(i18next, $);
|
||||
});
|
||||
|
||||
// change language according to data-language of dropdown item
|
||||
$(".dropdown-language .dropdown-item").on("click", function () {
|
||||
var $this = $(this);
|
||||
$this.siblings(".selected").removeClass("selected")
|
||||
$this.addClass("selected");
|
||||
var selectedLang = $this.text()
|
||||
var selectedFlag = $this.find(".flag-icon").attr("class");
|
||||
$("#dropdown-flag .selected-language").text(selectedLang);
|
||||
$("#dropdown-flag .flag-icon").removeClass().addClass(selectedFlag);
|
||||
var currentLanguage = $this.data("language");
|
||||
i18next.changeLanguage(currentLanguage, function (err, t) {
|
||||
$(".main-menu").localize();
|
||||
});
|
||||
})
|
||||
|
||||
/********************* Bookmark & Search ***********************/
|
||||
// This variable is used for mouseenter and mouseleave events of search list
|
||||
var $filename = $('.search-input input').data('search');
|
||||
|
||||
// Bookmark icon click
|
||||
$('.bookmark-wrapper .bookmark-star').on('click', function (e) {
|
||||
e.stopPropagation();
|
||||
$('.bookmark-wrapper .bookmark-input').toggleClass('show');
|
||||
$('.bookmark-wrapper .bookmark-input input').val('');
|
||||
$('.bookmark-wrapper .bookmark-input input').blur();
|
||||
$('.bookmark-wrapper .bookmark-input input').focus();
|
||||
$('.bookmark-wrapper .search-list').addClass('show');
|
||||
|
||||
var arrList = $('ul.nav.navbar-nav.bookmark-icons li'),
|
||||
$arrList = "",
|
||||
$activeItemClass = "";
|
||||
|
||||
$("ul.search-list li").remove();
|
||||
|
||||
for (var i = 0; i < arrList.length; i++) {
|
||||
if (i === 0) {
|
||||
$activeItemClass = "current_item";
|
||||
}
|
||||
else {
|
||||
$activeItemClass = "";
|
||||
}
|
||||
$arrList += '<li class="auto-suggestion d-flex align-items-center justify-content-between cursor-pointer ' + $activeItemClass + '">' +
|
||||
'<a class="d-flex align-items-center justify-content-between w-100" href=' + arrList[i].firstChild.href + '>' +
|
||||
'<div class="d-flex justify-content-start">' +
|
||||
'<span class="mr-75 ' + arrList[i].firstChild.firstChild.className + '" data-icon="' + arrList[i].firstChild.firstChild.className + '"></span>' +
|
||||
'<span>' + arrList[i].firstChild.dataset.originalTitle + '</span>' +
|
||||
'</div>' +
|
||||
'<span class="float-right bookmark-icon feather icon-star warning"></span>' +
|
||||
'</a>' +
|
||||
'</li>';
|
||||
}
|
||||
$("ul.search-list").append($arrList);
|
||||
});
|
||||
|
||||
// Navigation Search area Open
|
||||
$('.nav-link-search').on('click', function () {
|
||||
var $this = $(this);
|
||||
var searchInput = $(this).parent('.nav-search').find('.search-input');
|
||||
searchInput.addClass('open');
|
||||
$(".search-input input").focus();
|
||||
$('.search-input .search-list li').remove();
|
||||
$('.search-input .search-list').addClass('show');
|
||||
$('.bookmark-wrapper .bookmark-input').removeClass('show');
|
||||
});
|
||||
|
||||
// Navigation Search area Close
|
||||
$('.search-input-close i').on('click', function () {
|
||||
var $this = $(this),
|
||||
searchInput = $(this).closest('.search-input');
|
||||
if (searchInput.hasClass('open')) {
|
||||
searchInput.removeClass('open');
|
||||
$(".search-input input").val("");
|
||||
$(".search-input input").blur();
|
||||
$('.search-input .search-list').removeClass('show');
|
||||
if ($('.app-content').hasClass('show-overlay')) {
|
||||
$('.app-content').removeClass('show-overlay');
|
||||
}
|
||||
}
|
||||
});
|
||||
|
||||
// Filter
|
||||
$(".search-input .input").on("keyup", function (e) {
|
||||
if (e.keyCode !== 38 && e.keyCode !== 40 && e.keyCode !== 13) {
|
||||
if (e.keyCode == 27) {
|
||||
$('.app-content').removeClass('show-overlay');
|
||||
$('.bookmark-input input').val('');
|
||||
$('.bookmark-input input').blur();
|
||||
$('.search-input input').val('');
|
||||
$('.search-input input').blur();
|
||||
$('.search-input').removeClass('open');
|
||||
if ($('.search-list').hasClass('show')) {
|
||||
$(this).removeClass('show');
|
||||
$('.search-input').removeClass('show');
|
||||
}
|
||||
}
|
||||
|
||||
// Define variables
|
||||
var value = $(this).val().toLowerCase(), //get values of inout on keyup
|
||||
activeClass = "",
|
||||
bookmark = false,
|
||||
liList = $('ul.search-list li'); // get all the list items of the search
|
||||
liList.remove();
|
||||
// To check if current is bookmark input
|
||||
if ($(this).parent().hasClass('bookmark-input')) {
|
||||
bookmark = true;
|
||||
}
|
||||
|
||||
// If input value is blank
|
||||
if (value != "") {
|
||||
$('.app-content').addClass('show-overlay');
|
||||
|
||||
// condition for bookmark and search input click
|
||||
if ($('.bookmark-input').focus()) {
|
||||
$('.bookmark-input .search-list').addClass('show');
|
||||
}
|
||||
else {
|
||||
$('.search-input .search-list').addClass('show');
|
||||
$('.bookmark-input .search-list').removeClass('show');
|
||||
}
|
||||
if (bookmark === false) {
|
||||
$('.search-input .search-list').addClass('show');
|
||||
$('.bookmark-input .search-list').removeClass('show');
|
||||
}
|
||||
|
||||
var $startList = "",
|
||||
$otherList = "",
|
||||
$htmlList = "",
|
||||
$activeItemClass = "",
|
||||
$bookmarkIcon = "",
|
||||
a = 0;
|
||||
|
||||
// getting json data from file for search results
|
||||
$.getJSON("../../../app-assets/data/" + $filename + ".json", function (data) {
|
||||
|
||||
for (var i = 0; i < data.listItems.length; i++) {
|
||||
// if current is bookmark then give class to star icon
|
||||
if (bookmark === true) {
|
||||
activeClass = ""; // resetting active bookmark class
|
||||
var arrList = $('ul.nav.navbar-nav.bookmark-icons li'),
|
||||
$arrList = "";
|
||||
// Loop to check if current seach value match with the bookmarks already there in navbar
|
||||
for (var j = 0; j < arrList.length; j++) {
|
||||
if (data.listItems[i].name === arrList[j].firstChild.dataset.originalTitle) {
|
||||
activeClass = " warning";
|
||||
break;
|
||||
}
|
||||
else {
|
||||
activeClass = "";
|
||||
}
|
||||
}
|
||||
$bookmarkIcon = '<span class="float-right bookmark-icon feather icon-star' + activeClass + '"></span>';
|
||||
}
|
||||
// Search list item start with entered letters and create list
|
||||
if ((data.listItems[i].name.toLowerCase().indexOf(value) == 0) && (a < 10)) {
|
||||
if (a === 0) {
|
||||
$activeItemClass = "current_item";
|
||||
}
|
||||
else {
|
||||
$activeItemClass = "";
|
||||
}
|
||||
$startList += '<li class="auto-suggestion d-flex align-items-center justify-content-between cursor-pointer ' + $activeItemClass + '">' +
|
||||
'<a class="d-flex align-items-center justify-content-between w-100" href=' + data.listItems[i].url + '>' +
|
||||
'<div class="d-flex justify-content-start">' +
|
||||
'<span class="mr-75 ' + data.listItems[i].icon + '" data-icon="' + data.listItems[i].icon + '"></span>' +
|
||||
'<span>' + data.listItems[i].name + '</span>' +
|
||||
'</div>' +
|
||||
$bookmarkIcon +
|
||||
'</a>' +
|
||||
'</li>';
|
||||
a++;
|
||||
}
|
||||
}
|
||||
for (var i = 0; i < data.listItems.length; i++) {
|
||||
if (bookmark === true) {
|
||||
activeClass = ""; // resetting active bookmark class
|
||||
var arrList = $('ul.nav.navbar-nav.bookmark-icons li'),
|
||||
$arrList = "";
|
||||
// Loop to check if current seach value match with the bookmarks already there in navbar
|
||||
for (var j = 0; j < arrList.length; j++) {
|
||||
if (data.listItems[i].name === arrList[j].firstChild.dataset.originalTitle) {
|
||||
activeClass = " warning";
|
||||
}
|
||||
else {
|
||||
activeClass = "";
|
||||
}
|
||||
}
|
||||
$bookmarkIcon = '<span class="float-right bookmark-icon feather icon-star' + activeClass + '"></span>';
|
||||
}
|
||||
// Search list item not start with letters and create list
|
||||
if (!(data.listItems[i].name.toLowerCase().indexOf(value) == 0) && (data.listItems[i].name.toLowerCase().indexOf(value) > -1) && (a < 10)) {
|
||||
if (a === 0) {
|
||||
$activeItemClass = "current_item";
|
||||
}
|
||||
else {
|
||||
$activeItemClass = "";
|
||||
}
|
||||
$otherList += '<li class="auto-suggestion d-flex align-items-center justify-content-between cursor-pointer ' + $activeItemClass + '">' +
|
||||
'<a class="d-flex align-items-center justify-content-between w-100" href=' + data.listItems[i].url + '>' +
|
||||
'<div class="d-flex justify-content-start">' +
|
||||
'<span class="mr-75 ' + data.listItems[i].icon + '" data-icon="' + data.listItems[i].icon + '"></span>' +
|
||||
'<span>' + data.listItems[i].name + '</span>' +
|
||||
'</div>' +
|
||||
$bookmarkIcon +
|
||||
'</a>' +
|
||||
'</li>';
|
||||
a++;
|
||||
}
|
||||
}
|
||||
if ($startList == "" && $otherList == "") {
|
||||
$otherList = '<li class="auto-suggestion d-flex align-items-center justify-content-between cursor-pointer">' +
|
||||
'<a class="d-flex align-items-center justify-content-between w-100">' +
|
||||
'<div class="d-flex justify-content-start">' +
|
||||
'<span class="mr-75 feather icon-alert-circle"></span>' +
|
||||
'<span>No results found.</span>' +
|
||||
'</div>' +
|
||||
'</a>' +
|
||||
'</li>';
|
||||
}
|
||||
|
||||
$htmlList = $startList.concat($otherList); // merging start with and other list
|
||||
$("ul.search-list").append($htmlList); // Appending list to <ul>
|
||||
});
|
||||
}
|
||||
else {
|
||||
if (bookmark === true) {
|
||||
var arrList = $('ul.nav.navbar-nav.bookmark-icons li'),
|
||||
$arrList = "";
|
||||
for (var i = 0; i < arrList.length; i++) {
|
||||
if (i === 0) {
|
||||
$activeItemClass = "current_item";
|
||||
}
|
||||
else {
|
||||
$activeItemClass = "";
|
||||
}
|
||||
$arrList += '<li class="auto-suggestion d-flex align-items-center justify-content-between cursor-pointer">' +
|
||||
'<a class="d-flex align-items-center justify-content-between w-100" href=' + arrList[i].firstChild.href + '>' +
|
||||
'<div class="d-flex justify-content-start">' +
|
||||
'<span class="mr-75 ' + arrList[i].firstChild.firstChild.className + '" data-icon="' + arrList[i].firstChild.firstChild.className + '"></span>' +
|
||||
'<span>' + arrList[i].firstChild.dataset.originalTitle + '</span>' +
|
||||
'</div>' +
|
||||
'<span class="float-right bookmark-icon feather icon-star warning"></span>' +
|
||||
'</a>' +
|
||||
'</li>';
|
||||
}
|
||||
$("ul.search-list").append($arrList);
|
||||
}
|
||||
else {
|
||||
// if search input blank, hide overlay
|
||||
if ($('.app-content').hasClass('show-overlay')) {
|
||||
$('.app-content').removeClass('show-overlay');
|
||||
}
|
||||
// If filter box is empty
|
||||
if ($('.search-list').hasClass('show')) {
|
||||
$('.search-list').removeClass('show');
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
});
|
||||
|
||||
// Add class on hover of the list
|
||||
$(document).on("mouseenter", ".search-list li", function (e) {
|
||||
$(this).siblings().removeClass('current_item');
|
||||
$(this).addClass('current_item');
|
||||
});
|
||||
$(document).on("click", ".search-list li", function (e) {
|
||||
e.stopPropagation();
|
||||
});
|
||||
|
||||
$('html').on("click", function ($this) {
|
||||
if (!$($this.target).hasClass('bookmark-icon')) {
|
||||
if ($('.bookmark-input .search-list').hasClass('show')) {
|
||||
$('.bookmark-input .search-list').removeClass('show');
|
||||
}
|
||||
if ($('.bookmark-input').hasClass('show')) {
|
||||
$('.bookmark-input').removeClass('show');
|
||||
}
|
||||
}
|
||||
});
|
||||
|
||||
// Favorite star click
|
||||
$(document).on("click", ".bookmark-input .search-list .bookmark-icon", function (e) {
|
||||
e.stopPropagation();
|
||||
if ($(this).hasClass("warning")) {
|
||||
$(this).removeClass("warning");
|
||||
var arrList = $('ul.nav.navbar-nav.bookmark-icons li');
|
||||
for (var i = 0; i < arrList.length; i++) {
|
||||
if (arrList[i].firstChild.dataset.originalTitle == $(this).parent()[0].innerText) {
|
||||
arrList[i].remove();
|
||||
}
|
||||
}
|
||||
e.preventDefault();
|
||||
}
|
||||
else {
|
||||
var arrList = $('ul.nav.navbar-nav.bookmark-icons li');
|
||||
$(this).addClass("warning");
|
||||
e.preventDefault();
|
||||
var $url = $(this).parent()[0].href,
|
||||
$name = $(this).parent()[0].innerText,
|
||||
$icon = $(this).parent()[0].firstChild.firstChild.dataset.icon,
|
||||
$listItem = "",
|
||||
$listItemDropdown = "";
|
||||
$listItem = '<li class="nav-item d-none d-lg-block">' +
|
||||
'<a class="nav-link" href="' + $url + '" data-toggle="tooltip" data-placement="top" title="" data-original-title="' + $name + '">' +
|
||||
'<i class="ficon ' + $icon + '"></i>' +
|
||||
'</a>' +
|
||||
'</li>';
|
||||
$("ul.nav.bookmark-icons").append($listItem);
|
||||
$('[data-toggle="tooltip"]').tooltip();
|
||||
}
|
||||
});
|
||||
|
||||
// If we use up key(38) Down key (40) or Enter key(13)
|
||||
$(window).on('keydown', function (e) {
|
||||
var $current = $(".search-list li.current_item"), $next, $prev;
|
||||
if (e.keyCode === 40) {
|
||||
$next = $current.next();
|
||||
$current.removeClass('current_item');
|
||||
$current = $next.addClass('current_item');
|
||||
}
|
||||
else if (e.keyCode === 38) {
|
||||
$prev = $current.prev();
|
||||
$current.removeClass('current_item');
|
||||
$current = $prev.addClass('current_item');
|
||||
}
|
||||
|
||||
if (e.keyCode === 13 && $('.search-list li.current_item').length > 0) {
|
||||
var selected_item = $('.search-list li.current_item a');
|
||||
window.location = selected_item.attr('href');
|
||||
$(selected_item).trigger('click');
|
||||
}
|
||||
});
|
||||
|
||||
// Waves Effect
|
||||
Waves.init()
|
||||
Waves.attach('.btn', ['waves-light'])
|
||||
})(window, document, jQuery);
|
||||
7
public/vendor/dashboard/src/js/core/libraries/bootstrap.min.js
vendored
Executable file
7
public/vendor/dashboard/src/js/core/libraries/bootstrap.min.js
vendored
Executable file
File diff suppressed because one or more lines are too long
2
public/vendor/dashboard/src/js/core/libraries/jquery.min.js
vendored
Executable file
2
public/vendor/dashboard/src/js/core/libraries/jquery.min.js
vendored
Executable file
File diff suppressed because one or more lines are too long
693
public/vendor/dashboard/src/js/scripts/cards/card-analytics.js
vendored
Executable file
693
public/vendor/dashboard/src/js/scripts/cards/card-analytics.js
vendored
Executable file
@@ -0,0 +1,693 @@
|
||||
/*=========================================================================================
|
||||
File Name: card-statistics.js
|
||||
Description: Card-statistics page content with Apexchart Examples
|
||||
----------------------------------------------------------------------------------------
|
||||
Item Name: Vuesax HTML Admin Template
|
||||
Version: 1.1
|
||||
Author: PIXINVENT
|
||||
Author URL: http://www.themeforest.net/user/pixinvent
|
||||
==========================================================================================*/
|
||||
|
||||
$(window).on("load", function(){
|
||||
|
||||
var $primary = '#7367F0';
|
||||
var $danger = '#EA5455';
|
||||
var $warning = '#FF9F43';
|
||||
var $info = '#00cfe8';
|
||||
var $success = '#00db89';
|
||||
var $primary_light = '#9c8cfc';
|
||||
var $warning_light = '#FFC085';
|
||||
var $danger_light = '#f29292';
|
||||
var $info_light = '#1edec5';
|
||||
var $strok_color = '#b9c3cd';
|
||||
var $label_color = '#e7eef7';
|
||||
var $purple = '#df87f2';
|
||||
var $white = '#fff';
|
||||
|
||||
|
||||
// Session Chart
|
||||
// ----------------------------------
|
||||
|
||||
var sessionChartoptions = {
|
||||
chart: {
|
||||
type: 'donut',
|
||||
height: 315,
|
||||
toolbar: {
|
||||
show: false
|
||||
}
|
||||
},
|
||||
dataLabels: {
|
||||
enabled: false
|
||||
},
|
||||
series: [58.6, 34.9, 6.5],
|
||||
legend: { show: false },
|
||||
comparedResult: [2, -3, 8],
|
||||
labels: ['Desktop', 'Mobile', 'Tablet'],
|
||||
stroke: { width: 0 },
|
||||
colors: [$primary, $warning, $danger],
|
||||
fill: {
|
||||
type: 'gradient',
|
||||
gradient: {
|
||||
gradientToColors: [$primary_light, $warning_light, $danger_light]
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
var sessionChart = new ApexCharts(
|
||||
document.querySelector("#session-chart"),
|
||||
sessionChartoptions
|
||||
);
|
||||
|
||||
sessionChart.render();
|
||||
|
||||
// Product Order Chart
|
||||
// -----------------------------
|
||||
|
||||
var orderChartoptions = {
|
||||
chart: {
|
||||
height: 325,
|
||||
type: 'radialBar',
|
||||
},
|
||||
colors: [$primary, $warning, $danger],
|
||||
fill: {
|
||||
type: 'gradient',
|
||||
gradient: {
|
||||
// enabled: true,
|
||||
shade: 'dark',
|
||||
type: 'vertical',
|
||||
shadeIntensity: 0.5,
|
||||
gradientToColors: [$primary_light, $warning_light, $danger_light],
|
||||
inverseColors: false,
|
||||
opacityFrom: 1,
|
||||
opacityTo: 1,
|
||||
stops: [0, 100]
|
||||
},
|
||||
},
|
||||
stroke: {
|
||||
lineCap: 'round'
|
||||
},
|
||||
plotOptions: {
|
||||
radialBar: {
|
||||
size: 150,
|
||||
hollow: {
|
||||
size: '20%'
|
||||
},
|
||||
track: {
|
||||
strokeWidth: '100%',
|
||||
margin: 15,
|
||||
},
|
||||
dataLabels: {
|
||||
name: {
|
||||
fontSize: '18px',
|
||||
},
|
||||
value: {
|
||||
fontSize: '16px',
|
||||
},
|
||||
total: {
|
||||
show: true,
|
||||
label: 'Total',
|
||||
|
||||
formatter: function (w) {
|
||||
// By default this function returns the average of all series. The below is just an example to show the use of custom formatter function
|
||||
return 42459
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
},
|
||||
series: [70, 52, 26],
|
||||
labels: ['Finished', 'Pending', 'Rejected'],
|
||||
|
||||
}
|
||||
|
||||
var orderChart = new ApexCharts(
|
||||
document.querySelector("#product-order-chart"),
|
||||
orderChartoptions
|
||||
);
|
||||
|
||||
orderChart.render();
|
||||
|
||||
|
||||
// Customer Chart
|
||||
// -----------------------------
|
||||
|
||||
var customerChartoptions = {
|
||||
chart: {
|
||||
type: 'pie',
|
||||
height: 325,
|
||||
dropShadow: {
|
||||
enabled: false,
|
||||
blur: 5,
|
||||
left: 1,
|
||||
top: 1,
|
||||
opacity: 0.2
|
||||
},
|
||||
toolbar: {
|
||||
show: false
|
||||
}
|
||||
},
|
||||
labels: ['New', 'Returning', 'Referrals'],
|
||||
series: [690, 258, 149],
|
||||
dataLabels: {
|
||||
enabled: false
|
||||
},
|
||||
legend: { show: false },
|
||||
stroke: {
|
||||
width: 5
|
||||
},
|
||||
colors: [$primary, $warning, $danger],
|
||||
fill: {
|
||||
type: 'gradient',
|
||||
gradient: {
|
||||
gradientToColors: [$primary_light, $warning_light, $danger_light]
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
var customerChart = new ApexCharts(
|
||||
document.querySelector("#customer-chart"),
|
||||
customerChartoptions
|
||||
);
|
||||
|
||||
customerChart.render();
|
||||
|
||||
// Sales Chart
|
||||
// -----------------------------
|
||||
|
||||
var salesChartoptions = {
|
||||
chart: {
|
||||
height: 300,
|
||||
type: 'radar',
|
||||
dropShadow: {
|
||||
enabled: true,
|
||||
blur: 8,
|
||||
left: 1,
|
||||
top: 1,
|
||||
opacity: 0.2
|
||||
},
|
||||
toolbar: {
|
||||
show: false
|
||||
}
|
||||
},
|
||||
toolbar: { show: false },
|
||||
series: [{
|
||||
name: 'Sales',
|
||||
data: [90, 50, 86, 40, 100, 20],
|
||||
}, {
|
||||
name: 'Visit',
|
||||
data: [70, 75, 70, 76, 20, 85],
|
||||
}],
|
||||
stroke: {
|
||||
width: 0
|
||||
},
|
||||
colors: [$primary, $info],
|
||||
plotOptions: {
|
||||
radar: {
|
||||
polygons: {
|
||||
strokeColors: [$strok_color, 'transparent', 'transparent', 'transparent', 'transparent', 'transparent'],
|
||||
connectorColors: 'transparent'
|
||||
}
|
||||
}
|
||||
},
|
||||
fill: {
|
||||
type: 'gradient',
|
||||
gradient: {
|
||||
shade: 'dark',
|
||||
gradientToColors: ['#9f8ed7', $info_light],
|
||||
shadeIntensity: 1,
|
||||
type: 'horizontal',
|
||||
opacityFrom: 1,
|
||||
opacityTo: 1,
|
||||
stops: [0, 100, 100, 100]
|
||||
},
|
||||
},
|
||||
markers: {
|
||||
size: 0,
|
||||
},
|
||||
legend: {
|
||||
show: false,
|
||||
},
|
||||
labels: ['Jan', 'Feb', 'Mar', 'Apr', 'May', 'Jun'],
|
||||
dataLabels: {
|
||||
style: {
|
||||
colors: [$strok_color, $strok_color, $strok_color, $strok_color, $strok_color, $strok_color]
|
||||
}
|
||||
},
|
||||
yaxis: {
|
||||
show: false,
|
||||
},
|
||||
grid: {
|
||||
show: false,
|
||||
},
|
||||
|
||||
}
|
||||
|
||||
var salesChart = new ApexCharts(
|
||||
document.querySelector("#sales-chart"),
|
||||
salesChartoptions
|
||||
);
|
||||
|
||||
salesChart.render();
|
||||
|
||||
// Support Tracker Chart
|
||||
// -----------------------------
|
||||
|
||||
var supportChartoptions = {
|
||||
chart: {
|
||||
height: 270,
|
||||
type: 'radialBar',
|
||||
sparkline:{
|
||||
enabled: false,
|
||||
}
|
||||
},
|
||||
plotOptions: {
|
||||
radialBar: {
|
||||
size: 150,
|
||||
offsetY: 20,
|
||||
startAngle: -150,
|
||||
endAngle: 150,
|
||||
hollow: {
|
||||
size: '65%',
|
||||
},
|
||||
track: {
|
||||
background: $white,
|
||||
strokeWidth: '100%',
|
||||
|
||||
},
|
||||
dataLabels: {
|
||||
value: {
|
||||
offsetY: 30,
|
||||
color: '#99a2ac',
|
||||
fontSize: '2rem'
|
||||
}
|
||||
}
|
||||
},
|
||||
},
|
||||
colors: [$danger],
|
||||
fill: {
|
||||
type: 'gradient',
|
||||
gradient: {
|
||||
// enabled: true,
|
||||
shade: 'dark',
|
||||
type: 'horizontal',
|
||||
shadeIntensity: 0.5,
|
||||
gradientToColors: [$primary],
|
||||
inverseColors: true,
|
||||
opacityFrom: 1,
|
||||
opacityTo: 1,
|
||||
stops: [0, 100]
|
||||
},
|
||||
},
|
||||
stroke: {
|
||||
dashArray: 8
|
||||
},
|
||||
series: [83],
|
||||
labels: ['Completed Tickets'],
|
||||
}
|
||||
|
||||
var supportChart = new ApexCharts(
|
||||
document.querySelector("#support-tracker-chart"),
|
||||
supportChartoptions
|
||||
);
|
||||
|
||||
supportChart.render();
|
||||
|
||||
// Revenue Chart
|
||||
// -----------------------------
|
||||
|
||||
var revenueChartoptions = {
|
||||
chart: {
|
||||
height: 260,
|
||||
toolbar: { show: false },
|
||||
type: 'line',
|
||||
},
|
||||
stroke: {
|
||||
curve: 'smooth',
|
||||
dashArray: [0, 8],
|
||||
width: [4, 2],
|
||||
},
|
||||
grid: {
|
||||
borderColor: $label_color,
|
||||
},
|
||||
legend: {
|
||||
show: false,
|
||||
},
|
||||
colors: [$danger_light, $strok_color],
|
||||
|
||||
fill: {
|
||||
type: 'gradient',
|
||||
gradient: {
|
||||
shade: 'dark',
|
||||
inverseColors: false,
|
||||
gradientToColors: [$primary, $strok_color],
|
||||
shadeIntensity: 1,
|
||||
type: 'horizontal',
|
||||
opacityFrom: 1,
|
||||
opacityTo: 1,
|
||||
stops: [0, 100, 100, 100]
|
||||
},
|
||||
},
|
||||
markers: {
|
||||
size: 0,
|
||||
hover: {
|
||||
size: 5
|
||||
}
|
||||
},
|
||||
xaxis: {
|
||||
labels: {
|
||||
style: {
|
||||
colors: $strok_color,
|
||||
}
|
||||
},
|
||||
axisTicks: {
|
||||
show: false,
|
||||
},
|
||||
categories: ['01', '05', '09', '13', '17', '21', '26', '31'],
|
||||
axisBorder: {
|
||||
show: false,
|
||||
},
|
||||
tickPlacement: 'on',
|
||||
},
|
||||
yaxis: {
|
||||
tickAmount: 5,
|
||||
labels: {
|
||||
style: {
|
||||
color: $strok_color,
|
||||
},
|
||||
formatter: function(val) {
|
||||
return val > 999 ? (val / 1000).toFixed(1) + 'k' : val;
|
||||
}
|
||||
}
|
||||
},
|
||||
tooltip: {
|
||||
x: { show: false }
|
||||
},
|
||||
series: [{
|
||||
name: "This Month",
|
||||
data: [45000, 47000, 44800, 47500, 45500, 48000, 46500, 48600]
|
||||
},
|
||||
{
|
||||
name: "Last Month",
|
||||
data: [46000, 48000, 45500, 46600, 44500, 46500, 45000, 47000]
|
||||
}
|
||||
],
|
||||
|
||||
}
|
||||
|
||||
var revenueChart = new ApexCharts(
|
||||
document.querySelector("#revenue-chart"),
|
||||
revenueChartoptions
|
||||
);
|
||||
|
||||
revenueChart.render();
|
||||
|
||||
|
||||
// Goal Overview Chart
|
||||
// -----------------------------
|
||||
|
||||
var goalChartoptions = {
|
||||
chart: {
|
||||
height: 250,
|
||||
type: 'radialBar',
|
||||
sparkline: {
|
||||
enabled: true,
|
||||
},
|
||||
dropShadow: {
|
||||
enabled: true,
|
||||
blur: 3,
|
||||
left: 1,
|
||||
top: 1,
|
||||
opacity: 0.1
|
||||
},
|
||||
},
|
||||
colors: [$success],
|
||||
plotOptions: {
|
||||
radialBar: {
|
||||
size: 110,
|
||||
startAngle: -150,
|
||||
endAngle: 150,
|
||||
hollow: {
|
||||
size: '77%',
|
||||
},
|
||||
track: {
|
||||
background: $strok_color,
|
||||
strokeWidth: '50%',
|
||||
},
|
||||
dataLabels: {
|
||||
name: {
|
||||
show: false
|
||||
},
|
||||
value: {
|
||||
offsetY: 18,
|
||||
color: $strok_color,
|
||||
fontSize: '4rem'
|
||||
}
|
||||
}
|
||||
}
|
||||
},
|
||||
fill: {
|
||||
type: 'gradient',
|
||||
gradient: {
|
||||
shade: 'dark',
|
||||
type: 'horizontal',
|
||||
shadeIntensity: 0.5,
|
||||
gradientToColors: ['#00b5b5'],
|
||||
inverseColors: true,
|
||||
opacityFrom: 1,
|
||||
opacityTo: 1,
|
||||
stops: [0, 100]
|
||||
},
|
||||
},
|
||||
series: [83],
|
||||
stroke: {
|
||||
lineCap: 'round'
|
||||
},
|
||||
|
||||
}
|
||||
|
||||
var goalChart = new ApexCharts(
|
||||
document.querySelector("#goal-overview-chart"),
|
||||
goalChartoptions
|
||||
);
|
||||
|
||||
goalChart.render();
|
||||
|
||||
|
||||
// Average Session Chart
|
||||
// ----------------------------------
|
||||
|
||||
var avgsessionChartoptions = {
|
||||
chart: {
|
||||
type: 'bar',
|
||||
height: 200,
|
||||
sparkline: { enabled: true },
|
||||
toolbar: { show: false },
|
||||
},
|
||||
states: {
|
||||
hover: {
|
||||
filter: 'none'
|
||||
}
|
||||
},
|
||||
colors: [$label_color, $label_color, $primary, $label_color, $label_color, $label_color],
|
||||
series: [{
|
||||
name: 'Sessions',
|
||||
data: [75, 125, 225, 175, 125, 75, 25]
|
||||
}],
|
||||
grid: {
|
||||
show: false,
|
||||
padding: {
|
||||
left: 0,
|
||||
right: 0
|
||||
}
|
||||
},
|
||||
|
||||
plotOptions: {
|
||||
bar: {
|
||||
columnWidth: '45%',
|
||||
distributed: true,
|
||||
}
|
||||
},
|
||||
tooltip: {
|
||||
x: { show: false }
|
||||
},
|
||||
xaxis: {
|
||||
type: 'numeric',
|
||||
}
|
||||
}
|
||||
|
||||
var avgsessionChart = new ApexCharts(
|
||||
document.querySelector("#avg-session-chart"),
|
||||
avgsessionChartoptions
|
||||
);
|
||||
|
||||
avgsessionChart.render();
|
||||
|
||||
// Sales Chart
|
||||
// -----------------------------
|
||||
|
||||
var salesavgChartoptions = {
|
||||
chart: {
|
||||
height: 270,
|
||||
toolbar: { show: false },
|
||||
type: 'line',
|
||||
dropShadow: {
|
||||
enabled: true,
|
||||
top: 20,
|
||||
left: 2,
|
||||
blur: 6,
|
||||
opacity: 0.20
|
||||
},
|
||||
},
|
||||
stroke: {
|
||||
curve: 'smooth',
|
||||
width: 4,
|
||||
},
|
||||
grid: {
|
||||
borderColor: $label_color,
|
||||
},
|
||||
legend: {
|
||||
show: false,
|
||||
},
|
||||
colors: [$purple],
|
||||
fill: {
|
||||
type: 'gradient',
|
||||
gradient: {
|
||||
shade: 'dark',
|
||||
inverseColors: false,
|
||||
gradientToColors: [$primary],
|
||||
shadeIntensity: 1,
|
||||
type: 'horizontal',
|
||||
opacityFrom: 1,
|
||||
opacityTo: 1,
|
||||
stops: [0, 100, 100, 100]
|
||||
},
|
||||
},
|
||||
markers: {
|
||||
size: 0,
|
||||
hover: {
|
||||
size: 5
|
||||
}
|
||||
},
|
||||
xaxis: {
|
||||
labels: {
|
||||
style: {
|
||||
colors: $strok_color,
|
||||
}
|
||||
},
|
||||
axisTicks: {
|
||||
show: false,
|
||||
},
|
||||
categories: ['Jan', 'Feb', 'Mar', 'Apr', 'May', 'Jun', 'July', 'Aug', 'Sep', 'Oct', 'Nov', 'Dec'],
|
||||
axisBorder: {
|
||||
show: false,
|
||||
},
|
||||
tickPlacement: 'on'
|
||||
},
|
||||
yaxis: {
|
||||
tickAmount: 5,
|
||||
labels: {
|
||||
style: {
|
||||
color: $strok_color,
|
||||
},
|
||||
formatter: function(val) {
|
||||
return val > 999 ? (val / 1000).toFixed(1) + 'k' : val;
|
||||
}
|
||||
}
|
||||
},
|
||||
tooltip: {
|
||||
x: { show: false }
|
||||
},
|
||||
series: [{
|
||||
name: "Sales",
|
||||
data: [140, 180, 150, 205, 160, 295, 125, 255, 205, 305, 240, 295]
|
||||
}],
|
||||
|
||||
}
|
||||
|
||||
var salesavgChart = new ApexCharts(
|
||||
document.querySelector("#sales-line-chart"),
|
||||
salesavgChartoptions
|
||||
);
|
||||
|
||||
salesavgChart.render();
|
||||
|
||||
// Client Retention Chart
|
||||
// ----------------------------------
|
||||
|
||||
var retentionChartoptions = {
|
||||
chart: {
|
||||
stacked: true,
|
||||
type: 'bar',
|
||||
toolbar: { show: false },
|
||||
height: 290,
|
||||
},
|
||||
plotOptions: {
|
||||
bar: {
|
||||
columnWidth: '10%'
|
||||
}
|
||||
},
|
||||
colors: [$primary, $danger],
|
||||
series: [{
|
||||
name: 'New Clients',
|
||||
data: [175, 125, 225, 175, 160, 189, 206, 134, 159, 216, 148, 123]
|
||||
}, {
|
||||
name: 'Retained Clients',
|
||||
data: [-144, -155, -141, -167, -122, -143, -158, -107, -126, -131, -140, -137]
|
||||
}],
|
||||
grid: {
|
||||
borderColor: $label_color,
|
||||
padding: {
|
||||
left: 0,
|
||||
right: 0
|
||||
}
|
||||
},
|
||||
legend: {
|
||||
show: true,
|
||||
position: 'top',
|
||||
horizontalAlign: 'left',
|
||||
offsetX: 0,
|
||||
fontSize: '14px',
|
||||
markers: {
|
||||
radius: 50,
|
||||
width: 10,
|
||||
height: 10,
|
||||
}
|
||||
},
|
||||
dataLabels: {
|
||||
enabled: false
|
||||
},
|
||||
xaxis: {
|
||||
labels: {
|
||||
style: {
|
||||
colors: $strok_color,
|
||||
}
|
||||
},
|
||||
axisTicks: {
|
||||
show: false,
|
||||
},
|
||||
categories: ['Jan', 'Feb', 'Mar', 'Apr', 'May', 'Jun', 'Jul', 'Aug', 'Sep', 'Oct', 'Nov', 'Dec'],
|
||||
axisBorder: {
|
||||
show: false,
|
||||
},
|
||||
},
|
||||
yaxis: {
|
||||
tickAmount: 5,
|
||||
labels: {
|
||||
style: {
|
||||
color: $strok_color,
|
||||
}
|
||||
}
|
||||
},
|
||||
tooltip: {
|
||||
x: { show: false }
|
||||
},
|
||||
}
|
||||
|
||||
var retentionChart = new ApexCharts(
|
||||
document.querySelector("#client-retention-chart"),
|
||||
retentionChartoptions
|
||||
);
|
||||
|
||||
retentionChart.render();
|
||||
|
||||
});
|
||||
534
public/vendor/dashboard/src/js/scripts/cards/card-statistics.js
vendored
Executable file
534
public/vendor/dashboard/src/js/scripts/cards/card-statistics.js
vendored
Executable file
@@ -0,0 +1,534 @@
|
||||
/*=========================================================================================
|
||||
File Name: card-statistics.js
|
||||
Description: Card-statistics page content with Apexchart Examples
|
||||
----------------------------------------------------------------------------------------
|
||||
Item Name: Vuesax HTML Admin Template
|
||||
Version: 1.1
|
||||
Author: PIXINVENT
|
||||
Author URL: http://www.themeforest.net/user/pixinvent
|
||||
==========================================================================================*/
|
||||
|
||||
$(window).on("load", function(){
|
||||
|
||||
var $primary = '#7367F0';
|
||||
var $success = '#28C76F';
|
||||
var $danger = '#EA5455';
|
||||
var $warning = '#FF9F43';
|
||||
var $primary_light = '#A9A2F6';
|
||||
var $success_light = '#55DD92';
|
||||
var $warning_light = '#ffc085';
|
||||
|
||||
// Subscribed Gained Chart
|
||||
// ----------------------------------
|
||||
|
||||
var gainedChartoptions = {
|
||||
chart: {
|
||||
height: 100,
|
||||
type: 'area',
|
||||
toolbar:{
|
||||
show: false,
|
||||
},
|
||||
sparkline: {
|
||||
enabled: true
|
||||
},
|
||||
grid: {
|
||||
show: false,
|
||||
padding: {
|
||||
left: 0,
|
||||
right: 0
|
||||
}
|
||||
},
|
||||
},
|
||||
colors: [$primary],
|
||||
dataLabels: {
|
||||
enabled: false
|
||||
},
|
||||
stroke: {
|
||||
curve: 'smooth',
|
||||
width: 2.5
|
||||
},
|
||||
fill: {
|
||||
type: 'gradient',
|
||||
gradient: {
|
||||
shadeIntensity: 0.9,
|
||||
opacityFrom: 0.7,
|
||||
opacityTo: 0.5,
|
||||
stops: [0, 80, 100]
|
||||
}
|
||||
},
|
||||
series: [{
|
||||
name: 'Subscribers',
|
||||
data: [28, 40, 36, 52, 38, 60, 55]
|
||||
}],
|
||||
|
||||
xaxis: {
|
||||
labels: {
|
||||
show: false,
|
||||
},
|
||||
axisBorder: {
|
||||
show: false,
|
||||
}
|
||||
},
|
||||
yaxis: [{
|
||||
y: 0,
|
||||
offsetX: 0,
|
||||
offsetY: 0,
|
||||
padding: { left: 0, right: 0 },
|
||||
}],
|
||||
tooltip: {
|
||||
x: { show: false }
|
||||
},
|
||||
}
|
||||
|
||||
var gainedChart = new ApexCharts(
|
||||
document.querySelector("#line-area-chart-1"),
|
||||
gainedChartoptions
|
||||
);
|
||||
|
||||
gainedChart.render();
|
||||
|
||||
|
||||
|
||||
// Revenue Generated Chart
|
||||
// ----------------------------------
|
||||
|
||||
var revenueChartoptions = {
|
||||
chart: {
|
||||
height: 100,
|
||||
type: 'area',
|
||||
toolbar:{
|
||||
show: false,
|
||||
},
|
||||
sparkline: {
|
||||
enabled: true
|
||||
},
|
||||
grid: {
|
||||
show: false,
|
||||
padding: {
|
||||
left: 0,
|
||||
right: 0
|
||||
}
|
||||
},
|
||||
},
|
||||
colors: [$success],
|
||||
dataLabels: {
|
||||
enabled: false
|
||||
},
|
||||
stroke: {
|
||||
curve: 'smooth',
|
||||
width: 2.5
|
||||
},
|
||||
fill: {
|
||||
type: 'gradient',
|
||||
gradient: {
|
||||
shadeIntensity: 0.9,
|
||||
opacityFrom: 0.7,
|
||||
opacityTo: 0.5,
|
||||
stops: [0, 80, 100]
|
||||
}
|
||||
},
|
||||
series: [{
|
||||
name: 'Revenue',
|
||||
data: [350, 275, 400, 300, 350, 300, 450]
|
||||
}],
|
||||
|
||||
xaxis: {
|
||||
labels: {
|
||||
show: false,
|
||||
},
|
||||
axisBorder: {
|
||||
show: false,
|
||||
}
|
||||
},
|
||||
yaxis: [{
|
||||
y: 0,
|
||||
offsetX: 0,
|
||||
offsetY: 0,
|
||||
padding: { left: 0, right: 0 },
|
||||
}],
|
||||
tooltip: {
|
||||
x: { show: false }
|
||||
},
|
||||
}
|
||||
|
||||
var revenueChart = new ApexCharts(
|
||||
document.querySelector("#line-area-chart-2"),
|
||||
revenueChartoptions
|
||||
);
|
||||
|
||||
revenueChart.render();
|
||||
|
||||
|
||||
// Quaterly Sales Chart
|
||||
// ----------------------------------
|
||||
|
||||
var salesChartoptions = {
|
||||
chart: {
|
||||
height: 100,
|
||||
type: 'area',
|
||||
toolbar:{
|
||||
show: false,
|
||||
},
|
||||
sparkline: {
|
||||
enabled: true
|
||||
},
|
||||
grid: {
|
||||
show: false,
|
||||
padding: {
|
||||
left: 0,
|
||||
right: 0
|
||||
}
|
||||
},
|
||||
},
|
||||
colors: [$danger],
|
||||
dataLabels: {
|
||||
enabled: false
|
||||
},
|
||||
stroke: {
|
||||
curve: 'smooth',
|
||||
width: 2.5
|
||||
},
|
||||
fill: {
|
||||
type: 'gradient',
|
||||
gradient: {
|
||||
shadeIntensity: 0.9,
|
||||
opacityFrom: 0.7,
|
||||
opacityTo: 0.5,
|
||||
stops: [0, 80, 100]
|
||||
}
|
||||
},
|
||||
series: [{
|
||||
name: 'Sales',
|
||||
data: [10, 15, 7, 12, 3, 16]
|
||||
}],
|
||||
|
||||
xaxis: {
|
||||
labels: {
|
||||
show: false,
|
||||
},
|
||||
axisBorder: {
|
||||
show: false,
|
||||
}
|
||||
},
|
||||
yaxis: [{
|
||||
y: 0,
|
||||
offsetX: 0,
|
||||
offsetY: 0,
|
||||
padding: { left: 0, right: 0 },
|
||||
}],
|
||||
tooltip: {
|
||||
x: { show: false }
|
||||
},
|
||||
}
|
||||
|
||||
var salesChart = new ApexCharts(
|
||||
document.querySelector("#line-area-chart-3"),
|
||||
salesChartoptions
|
||||
);
|
||||
|
||||
salesChart.render();
|
||||
|
||||
// Order Received Chart
|
||||
// ----------------------------------
|
||||
|
||||
var orderChartoptions = {
|
||||
chart: {
|
||||
height: 100,
|
||||
type: 'area',
|
||||
toolbar:{
|
||||
show: false,
|
||||
},
|
||||
sparkline: {
|
||||
enabled: true
|
||||
},
|
||||
grid: {
|
||||
show: false,
|
||||
padding: {
|
||||
left: 0,
|
||||
right: 0
|
||||
}
|
||||
},
|
||||
},
|
||||
colors: [$warning],
|
||||
dataLabels: {
|
||||
enabled: false
|
||||
},
|
||||
stroke: {
|
||||
curve: 'smooth',
|
||||
width: 2.5
|
||||
},
|
||||
fill: {
|
||||
type: 'gradient',
|
||||
gradient: {
|
||||
shadeIntensity: 0.9,
|
||||
opacityFrom: 0.7,
|
||||
opacityTo: 0.5,
|
||||
stops: [0, 80, 100]
|
||||
}
|
||||
},
|
||||
series: [{
|
||||
name: 'Orders',
|
||||
data: [10, 15, 8, 15, 7, 12, 8]
|
||||
}],
|
||||
|
||||
xaxis: {
|
||||
labels: {
|
||||
show: false,
|
||||
},
|
||||
axisBorder: {
|
||||
show: false,
|
||||
}
|
||||
},
|
||||
yaxis: [{
|
||||
y: 0,
|
||||
offsetX: 0,
|
||||
offsetY: 0,
|
||||
padding: { left: 0, right: 0 },
|
||||
}],
|
||||
tooltip: {
|
||||
x: { show: false }
|
||||
},
|
||||
}
|
||||
|
||||
var orderChart = new ApexCharts(
|
||||
document.querySelector("#line-area-chart-4"),
|
||||
orderChartoptions
|
||||
);
|
||||
|
||||
orderChart.render();
|
||||
|
||||
|
||||
// Site Traffic Chart
|
||||
// ----------------------------------
|
||||
|
||||
var trafficChartoptions = {
|
||||
chart: {
|
||||
height: 100,
|
||||
type: 'line',
|
||||
dropShadow: {
|
||||
enabled: true,
|
||||
top: 5,
|
||||
left: 0,
|
||||
blur: 4,
|
||||
opacity: 0.10,
|
||||
},
|
||||
toolbar:{
|
||||
show: false,
|
||||
},
|
||||
sparkline: {
|
||||
enabled: true
|
||||
},
|
||||
grid: {
|
||||
show: false,
|
||||
padding: {
|
||||
left: 0,
|
||||
right: 0
|
||||
}
|
||||
},
|
||||
},
|
||||
colors: [$primary],
|
||||
dataLabels: {
|
||||
enabled: false
|
||||
},
|
||||
stroke: {
|
||||
curve: 'smooth',
|
||||
width: 5
|
||||
},
|
||||
fill: {
|
||||
type: 'gradient',
|
||||
gradient: {
|
||||
shadeIntensity: 1,
|
||||
gradientToColors: [$primary_light],
|
||||
opacityFrom: 1,
|
||||
opacityTo: 1,
|
||||
stops: [0, 100, 100, 100]
|
||||
}
|
||||
},
|
||||
series: [{
|
||||
name: 'Traffic Rate',
|
||||
data: [150, 200, 125, 225, 200, 250]
|
||||
}],
|
||||
|
||||
xaxis: {
|
||||
labels: {
|
||||
show: false,
|
||||
},
|
||||
axisBorder: {
|
||||
show: false,
|
||||
}
|
||||
},
|
||||
yaxis: [{
|
||||
y: 0,
|
||||
offsetX: 0,
|
||||
offsetY: 0,
|
||||
padding: { left: 0, right: 0 },
|
||||
}],
|
||||
tooltip: {
|
||||
x: { show: false }
|
||||
},
|
||||
}
|
||||
|
||||
var trafficChart = new ApexCharts(
|
||||
document.querySelector("#line-area-chart-5"),
|
||||
trafficChartoptions
|
||||
);
|
||||
|
||||
trafficChart.render();
|
||||
|
||||
|
||||
// Active Users Chart
|
||||
// ----------------------------------
|
||||
|
||||
var userChartoptions = {
|
||||
chart: {
|
||||
height: 100,
|
||||
type: 'line',
|
||||
dropShadow: {
|
||||
enabled: true,
|
||||
top: 5,
|
||||
left: 0,
|
||||
blur: 4,
|
||||
opacity: 0.10,
|
||||
},
|
||||
toolbar:{
|
||||
show: false,
|
||||
},
|
||||
sparkline: {
|
||||
enabled: true
|
||||
},
|
||||
grid: {
|
||||
show: false,
|
||||
padding: {
|
||||
left: 0,
|
||||
right: 0
|
||||
}
|
||||
},
|
||||
},
|
||||
colors: [$success],
|
||||
dataLabels: {
|
||||
enabled: false
|
||||
},
|
||||
stroke: {
|
||||
curve: 'smooth',
|
||||
width: 5
|
||||
},
|
||||
fill: {
|
||||
type: 'gradient',
|
||||
gradient: {
|
||||
shadeIntensity: 1,
|
||||
gradientToColors: [$success_light],
|
||||
opacityFrom: 1,
|
||||
opacityTo: 1,
|
||||
stops: [0, 100, 100, 100]
|
||||
}
|
||||
},
|
||||
series: [{
|
||||
name: 'Active Users',
|
||||
data: [750, 1000, 900, 1250, 1000, 1200, 1100]
|
||||
}],
|
||||
|
||||
xaxis: {
|
||||
labels: {
|
||||
show: false,
|
||||
},
|
||||
axisBorder: {
|
||||
show: false,
|
||||
}
|
||||
},
|
||||
yaxis: [{
|
||||
y: 0,
|
||||
offsetX: 0,
|
||||
offsetY: 0,
|
||||
padding: { left: 0, right: 0 },
|
||||
}],
|
||||
tooltip: {
|
||||
x: { show: false }
|
||||
},
|
||||
}
|
||||
|
||||
var userChart = new ApexCharts(
|
||||
document.querySelector("#line-area-chart-6"),
|
||||
userChartoptions
|
||||
);
|
||||
|
||||
userChart.render();
|
||||
|
||||
|
||||
// News Letter Chart
|
||||
// ----------------------------------
|
||||
|
||||
var newsletterChartoptions = {
|
||||
chart: {
|
||||
height: 100,
|
||||
type: 'line',
|
||||
dropShadow: {
|
||||
enabled: true,
|
||||
top: 5,
|
||||
left: 0,
|
||||
blur: 4,
|
||||
opacity: 0.10,
|
||||
},
|
||||
toolbar:{
|
||||
show: false,
|
||||
},
|
||||
sparkline: {
|
||||
enabled: true
|
||||
},
|
||||
grid: {
|
||||
show: false,
|
||||
padding: {
|
||||
left: 0,
|
||||
right: 0
|
||||
}
|
||||
},
|
||||
},
|
||||
colors: [$warning],
|
||||
dataLabels: {
|
||||
enabled: false
|
||||
},
|
||||
stroke: {
|
||||
curve: 'smooth',
|
||||
width: 5
|
||||
},
|
||||
fill: {
|
||||
type: 'gradient',
|
||||
gradient: {
|
||||
shadeIntensity: 1,
|
||||
gradientToColors: [$warning_light],
|
||||
opacityFrom: 1,
|
||||
opacityTo: 1,
|
||||
stops: [0, 100, 100, 100]
|
||||
}
|
||||
},
|
||||
series: [{
|
||||
name: 'Newsletter',
|
||||
data: [365, 390, 365, 400, 375, 400]
|
||||
}],
|
||||
|
||||
xaxis: {
|
||||
labels: {
|
||||
show: false,
|
||||
},
|
||||
axisBorder: {
|
||||
show: false,
|
||||
}
|
||||
},
|
||||
yaxis: [{
|
||||
y: 0,
|
||||
offsetX: 0,
|
||||
offsetY: 0,
|
||||
padding: { left: 0, right: 0 },
|
||||
}],
|
||||
tooltip: {
|
||||
x: { show: false }
|
||||
},
|
||||
}
|
||||
|
||||
var newsletterChart = new ApexCharts(
|
||||
document.querySelector("#line-area-chart-7"),
|
||||
newsletterChartoptions
|
||||
);
|
||||
|
||||
newsletterChart.render();
|
||||
|
||||
});
|
||||
989
public/vendor/dashboard/src/js/scripts/charts/chart-apex.js
vendored
Executable file
989
public/vendor/dashboard/src/js/scripts/charts/chart-apex.js
vendored
Executable file
@@ -0,0 +1,989 @@
|
||||
/*=========================================================================================
|
||||
File Name: chart-apex.js
|
||||
Description: Apexchart Examples
|
||||
----------------------------------------------------------------------------------------
|
||||
Item Name: Vuesax HTML Admin Template
|
||||
Version: 1.1
|
||||
Author: PIXINVENT
|
||||
Author URL: http://www.themeforest.net/user/pixinvent
|
||||
==========================================================================================*/
|
||||
|
||||
$(document).ready(function () {
|
||||
|
||||
var $primary = '#7367F0',
|
||||
$success = '#28C76F',
|
||||
$danger = '#EA5455',
|
||||
$warning = '#FF9F43',
|
||||
$info = '#00cfe8',
|
||||
$label_color_light = '#dae1e7';
|
||||
|
||||
var themeColors = [$primary, $success, $danger, $warning, $info];
|
||||
|
||||
// Line Chart
|
||||
// ----------------------------------
|
||||
var lineChartOptions = {
|
||||
chart: {
|
||||
height: 350,
|
||||
type: 'line',
|
||||
zoom: {
|
||||
enabled: false
|
||||
}
|
||||
},
|
||||
colors: themeColors,
|
||||
dataLabels: {
|
||||
enabled: false
|
||||
},
|
||||
stroke: {
|
||||
curve: 'straight'
|
||||
},
|
||||
series: [{
|
||||
name: "Desktops",
|
||||
data: [10, 41, 35, 51, 49, 62, 69, 91, 148],
|
||||
}],
|
||||
title: {
|
||||
text: 'Product Trends by Month',
|
||||
align: 'left'
|
||||
},
|
||||
grid: {
|
||||
row: {
|
||||
colors: ['#f3f3f3', 'transparent'], // takes an array which will be repeated on columns
|
||||
opacity: 0.5
|
||||
},
|
||||
},
|
||||
xaxis: {
|
||||
categories: ['Jan', 'Feb', 'Mar', 'Apr', 'May', 'Jun', 'Jul', 'Aug', 'Sep'],
|
||||
},
|
||||
yaxis: {
|
||||
tickAmount: 5,
|
||||
}
|
||||
}
|
||||
var lineChart = new ApexCharts(
|
||||
document.querySelector("#line-chart"),
|
||||
lineChartOptions
|
||||
);
|
||||
lineChart.render();
|
||||
|
||||
// Line Area Chart
|
||||
// ----------------------------------
|
||||
var lineAreaOptions = {
|
||||
chart: {
|
||||
height: 350,
|
||||
type: 'area',
|
||||
},
|
||||
colors: themeColors,
|
||||
dataLabels: {
|
||||
enabled: false
|
||||
},
|
||||
stroke: {
|
||||
curve: 'smooth'
|
||||
},
|
||||
series: [{
|
||||
name: 'series1',
|
||||
data: [31, 40, 28, 51, 42, 109, 100]
|
||||
}, {
|
||||
name: 'series2',
|
||||
data: [11, 32, 45, 32, 34, 52, 41]
|
||||
}],
|
||||
legend: {
|
||||
offsetY: -10
|
||||
},
|
||||
xaxis: {
|
||||
type: 'datetime',
|
||||
categories: ["2019-09-18T00:00:00", "2019-09-18T01:00:00", "2019-09-18T02:00:00",
|
||||
"2019-09-18T03:00:00", "2019-09-18T04:00:00", "2019-09-18T05:00:00",
|
||||
"2019-09-18T06:00:00"
|
||||
],
|
||||
},
|
||||
tooltip: {
|
||||
x: {
|
||||
format: 'dd/MM/yy HH:mm'
|
||||
},
|
||||
}
|
||||
}
|
||||
var lineAreaChart = new ApexCharts(
|
||||
document.querySelector("#line-area-chart"),
|
||||
lineAreaOptions
|
||||
);
|
||||
lineAreaChart.render();
|
||||
|
||||
// Column Chart
|
||||
// ----------------------------------
|
||||
var columnChartOptions = {
|
||||
chart: {
|
||||
height: 350,
|
||||
type: 'bar',
|
||||
},
|
||||
colors: themeColors,
|
||||
plotOptions: {
|
||||
bar: {
|
||||
horizontal: false,
|
||||
endingShape: 'rounded',
|
||||
columnWidth: '55%',
|
||||
},
|
||||
},
|
||||
dataLabels: {
|
||||
enabled: false
|
||||
},
|
||||
stroke: {
|
||||
show: true,
|
||||
width: 2,
|
||||
colors: ['transparent']
|
||||
},
|
||||
series: [{
|
||||
name: 'Net Profit',
|
||||
data: [44, 55, 57, 56, 61, 58, 63, 60, 66]
|
||||
}, {
|
||||
name: 'Revenue',
|
||||
data: [76, 85, 101, 98, 87, 105, 91, 114, 94]
|
||||
}, {
|
||||
name: 'Free Cash Flow',
|
||||
data: [35, 41, 36, 26, 45, 48, 52, 53, 41]
|
||||
}],
|
||||
legend: {
|
||||
offsetY: -10
|
||||
},
|
||||
xaxis: {
|
||||
categories: ['Feb', 'Mar', 'Apr', 'May', 'Jun', 'Jul', 'Aug', 'Sep', 'Oct'],
|
||||
},
|
||||
yaxis: {
|
||||
title: {
|
||||
text: '$ (thousands)'
|
||||
}
|
||||
},
|
||||
fill: {
|
||||
opacity: 1
|
||||
|
||||
},
|
||||
tooltip: {
|
||||
y: {
|
||||
formatter: function (val) {
|
||||
return "$ " + val + " thousands"
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
var columnChart = new ApexCharts(
|
||||
document.querySelector("#column-chart"),
|
||||
columnChartOptions
|
||||
);
|
||||
|
||||
columnChart.render();
|
||||
|
||||
// Bar Chart
|
||||
// ----------------------------------
|
||||
var barChartOptions = {
|
||||
chart: {
|
||||
height: 350,
|
||||
type: 'bar',
|
||||
},
|
||||
colors: themeColors,
|
||||
plotOptions: {
|
||||
bar: {
|
||||
horizontal: true,
|
||||
}
|
||||
},
|
||||
dataLabels: {
|
||||
enabled: false
|
||||
},
|
||||
series: [{
|
||||
data: [400, 430, 448, 470, 540, 580, 690, 1100, 1200, 1380]
|
||||
}],
|
||||
xaxis: {
|
||||
categories: ['South Korea', 'Canada', 'United Kingdom', 'Netherlands', 'Italy', 'France', 'Japan', 'United States', 'China', 'Germany'],
|
||||
tickAmount: 5
|
||||
}
|
||||
}
|
||||
var barChart = new ApexCharts(
|
||||
document.querySelector("#bar-chart"),
|
||||
barChartOptions
|
||||
);
|
||||
barChart.render();
|
||||
|
||||
|
||||
// Mixed Chart
|
||||
// -----------------------------
|
||||
var mixedChartOptions = {
|
||||
chart: {
|
||||
height: 350,
|
||||
type: 'line',
|
||||
stacked: false,
|
||||
},
|
||||
colors: themeColors,
|
||||
stroke: {
|
||||
width: [0, 2, 5],
|
||||
curve: 'smooth'
|
||||
},
|
||||
plotOptions: {
|
||||
bar: {
|
||||
columnWidth: '50%'
|
||||
}
|
||||
},
|
||||
// colors: ['#3A5794', '#A5C351', '#E14A84'],
|
||||
series: [{
|
||||
name: 'TEAM A',
|
||||
type: 'column',
|
||||
data: [23, 11, 22, 27, 13, 22, 37, 21, 44, 22, 30]
|
||||
}, {
|
||||
name: 'TEAM B',
|
||||
type: 'area',
|
||||
data: [44, 55, 41, 67, 22, 43, 21, 41, 56, 27, 43]
|
||||
}, {
|
||||
name: 'TEAM C',
|
||||
type: 'line',
|
||||
data: [30, 25, 36, 30, 45, 35, 64, 52, 59, 36, 39]
|
||||
}],
|
||||
fill: {
|
||||
opacity: [0.85, 0.25, 1],
|
||||
gradient: {
|
||||
inverseColors: false,
|
||||
shade: 'light',
|
||||
type: "vertical",
|
||||
opacityFrom: 0.85,
|
||||
opacityTo: 0.55,
|
||||
stops: [0, 100, 100, 100]
|
||||
}
|
||||
},
|
||||
labels: ['01/01/2003', '02/01/2003', '03/01/2003', '04/01/2003', '05/01/2003', '06/01/2003', '07/01/2003', '08/01/2003', '09/01/2003', '10/01/2003', '11/01/2003'],
|
||||
markers: {
|
||||
size: 0
|
||||
},
|
||||
legend: {
|
||||
offsetY: -10
|
||||
},
|
||||
xaxis: {
|
||||
type: 'datetime'
|
||||
},
|
||||
yaxis: {
|
||||
min: 0,
|
||||
tickAmount: 5,
|
||||
title: {
|
||||
text: 'Points'
|
||||
}
|
||||
},
|
||||
tooltip: {
|
||||
shared: true,
|
||||
intersect: false,
|
||||
y: {
|
||||
formatter: function (y) {
|
||||
if (typeof y !== "undefined") {
|
||||
return y.toFixed(0) + " views";
|
||||
}
|
||||
return y;
|
||||
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
var mixedChart = new ApexCharts(
|
||||
document.querySelector("#mixed-chart"),
|
||||
mixedChartOptions
|
||||
);
|
||||
mixedChart.render();
|
||||
|
||||
// Candlestick Chart
|
||||
// -----------------------------
|
||||
var candleStickOptions = {
|
||||
chart: {
|
||||
height: 350,
|
||||
type: 'candlestick',
|
||||
},
|
||||
colors: themeColors,
|
||||
series: [{
|
||||
data: [{
|
||||
x: new Date(1538778600000),
|
||||
y: [6629.81, 6650.5, 6623.04, 6633.33]
|
||||
},
|
||||
{
|
||||
x: new Date(1538780400000),
|
||||
y: [6632.01, 6643.59, 6620, 6630.11]
|
||||
},
|
||||
{
|
||||
x: new Date(1538782200000),
|
||||
y: [6630.71, 6648.95, 6623.34, 6635.65]
|
||||
},
|
||||
{
|
||||
x: new Date(1538784000000),
|
||||
y: [6635.65, 6651, 6629.67, 6638.24]
|
||||
},
|
||||
{
|
||||
x: new Date(1538785800000),
|
||||
y: [6638.24, 6640, 6620, 6624.47]
|
||||
},
|
||||
{
|
||||
x: new Date(1538787600000),
|
||||
y: [6624.53, 6636.03, 6621.68, 6624.31]
|
||||
},
|
||||
{
|
||||
x: new Date(1538789400000),
|
||||
y: [6624.61, 6632.2, 6617, 6626.02]
|
||||
},
|
||||
{
|
||||
x: new Date(1538791200000),
|
||||
y: [6627, 6627.62, 6584.22, 6603.02]
|
||||
},
|
||||
{
|
||||
x: new Date(1538793000000),
|
||||
y: [6605, 6608.03, 6598.95, 6604.01]
|
||||
},
|
||||
{
|
||||
x: new Date(1538794800000),
|
||||
y: [6604.5, 6614.4, 6602.26, 6608.02]
|
||||
},
|
||||
{
|
||||
x: new Date(1538796600000),
|
||||
y: [6608.02, 6610.68, 6601.99, 6608.91]
|
||||
},
|
||||
{
|
||||
x: new Date(1538798400000),
|
||||
y: [6608.91, 6618.99, 6608.01, 6612]
|
||||
},
|
||||
{
|
||||
x: new Date(1538800200000),
|
||||
y: [6612, 6615.13, 6605.09, 6612]
|
||||
},
|
||||
{
|
||||
x: new Date(1538802000000),
|
||||
y: [6612, 6624.12, 6608.43, 6622.95]
|
||||
},
|
||||
{
|
||||
x: new Date(1538803800000),
|
||||
y: [6623.91, 6623.91, 6615, 6615.67]
|
||||
},
|
||||
{
|
||||
x: new Date(1538805600000),
|
||||
y: [6618.69, 6618.74, 6610, 6610.4]
|
||||
},
|
||||
{
|
||||
x: new Date(1538807400000),
|
||||
y: [6611, 6622.78, 6610.4, 6614.9]
|
||||
},
|
||||
{
|
||||
x: new Date(1538809200000),
|
||||
y: [6614.9, 6626.2, 6613.33, 6623.45]
|
||||
},
|
||||
{
|
||||
x: new Date(1538811000000),
|
||||
y: [6623.48, 6627, 6618.38, 6620.35]
|
||||
},
|
||||
{
|
||||
x: new Date(1538812800000),
|
||||
y: [6619.43, 6620.35, 6610.05, 6615.53]
|
||||
},
|
||||
{
|
||||
x: new Date(1538814600000),
|
||||
y: [6615.53, 6617.93, 6610, 6615.19]
|
||||
},
|
||||
{
|
||||
x: new Date(1538816400000),
|
||||
y: [6615.19, 6621.6, 6608.2, 6620]
|
||||
},
|
||||
{
|
||||
x: new Date(1538818200000),
|
||||
y: [6619.54, 6625.17, 6614.15, 6620]
|
||||
},
|
||||
{
|
||||
x: new Date(1538820000000),
|
||||
y: [6620.33, 6634.15, 6617.24, 6624.61]
|
||||
},
|
||||
{
|
||||
x: new Date(1538821800000),
|
||||
y: [6625.95, 6626, 6611.66, 6617.58]
|
||||
},
|
||||
{
|
||||
x: new Date(1538823600000),
|
||||
y: [6619, 6625.97, 6595.27, 6598.86]
|
||||
},
|
||||
{
|
||||
x: new Date(1538825400000),
|
||||
y: [6598.86, 6598.88, 6570, 6587.16]
|
||||
},
|
||||
{
|
||||
x: new Date(1538827200000),
|
||||
y: [6588.86, 6600, 6580, 6593.4]
|
||||
},
|
||||
{
|
||||
x: new Date(1538829000000),
|
||||
y: [6593.99, 6598.89, 6585, 6587.81]
|
||||
},
|
||||
{
|
||||
x: new Date(1538830800000),
|
||||
y: [6587.81, 6592.73, 6567.14, 6578]
|
||||
},
|
||||
{
|
||||
x: new Date(1538832600000),
|
||||
y: [6578.35, 6581.72, 6567.39, 6579]
|
||||
},
|
||||
{
|
||||
x: new Date(1538834400000),
|
||||
y: [6579.38, 6580.92, 6566.77, 6575.96]
|
||||
},
|
||||
{
|
||||
x: new Date(1538836200000),
|
||||
y: [6575.96, 6589, 6571.77, 6588.92]
|
||||
},
|
||||
{
|
||||
x: new Date(1538838000000),
|
||||
y: [6588.92, 6594, 6577.55, 6589.22]
|
||||
},
|
||||
{
|
||||
x: new Date(1538839800000),
|
||||
y: [6589.3, 6598.89, 6589.1, 6596.08]
|
||||
},
|
||||
{
|
||||
x: new Date(1538841600000),
|
||||
y: [6597.5, 6600, 6588.39, 6596.25]
|
||||
},
|
||||
{
|
||||
x: new Date(1538843400000),
|
||||
y: [6598.03, 6600, 6588.73, 6595.97]
|
||||
},
|
||||
{
|
||||
x: new Date(1538845200000),
|
||||
y: [6595.97, 6602.01, 6588.17, 6602]
|
||||
},
|
||||
{
|
||||
x: new Date(1538847000000),
|
||||
y: [6602, 6607, 6596.51, 6599.95]
|
||||
},
|
||||
{
|
||||
x: new Date(1538848800000),
|
||||
y: [6600.63, 6601.21, 6590.39, 6591.02]
|
||||
},
|
||||
{
|
||||
x: new Date(1538850600000),
|
||||
y: [6591.02, 6603.08, 6591, 6591]
|
||||
},
|
||||
{
|
||||
x: new Date(1538852400000),
|
||||
y: [6591, 6601.32, 6585, 6592]
|
||||
},
|
||||
{
|
||||
x: new Date(1538854200000),
|
||||
y: [6593.13, 6596.01, 6590, 6593.34]
|
||||
},
|
||||
{
|
||||
x: new Date(1538856000000),
|
||||
y: [6593.34, 6604.76, 6582.63, 6593.86]
|
||||
},
|
||||
{
|
||||
x: new Date(1538857800000),
|
||||
y: [6593.86, 6604.28, 6586.57, 6600.01]
|
||||
},
|
||||
{
|
||||
x: new Date(1538859600000),
|
||||
y: [6601.81, 6603.21, 6592.78, 6596.25]
|
||||
},
|
||||
{
|
||||
x: new Date(1538861400000),
|
||||
y: [6596.25, 6604.2, 6590, 6602.99]
|
||||
},
|
||||
{
|
||||
x: new Date(1538863200000),
|
||||
y: [6602.99, 6606, 6584.99, 6587.81]
|
||||
},
|
||||
{
|
||||
x: new Date(1538865000000),
|
||||
y: [6587.81, 6595, 6583.27, 6591.96]
|
||||
},
|
||||
{
|
||||
x: new Date(1538866800000),
|
||||
y: [6591.97, 6596.07, 6585, 6588.39]
|
||||
},
|
||||
{
|
||||
x: new Date(1538868600000),
|
||||
y: [6587.6, 6598.21, 6587.6, 6594.27]
|
||||
},
|
||||
{
|
||||
x: new Date(1538870400000),
|
||||
y: [6596.44, 6601, 6590, 6596.55]
|
||||
},
|
||||
{
|
||||
x: new Date(1538872200000),
|
||||
y: [6598.91, 6605, 6596.61, 6600.02]
|
||||
},
|
||||
{
|
||||
x: new Date(1538874000000),
|
||||
y: [6600.55, 6605, 6589.14, 6593.01]
|
||||
},
|
||||
{
|
||||
x: new Date(1538875800000),
|
||||
y: [6593.15, 6605, 6592, 6603.06]
|
||||
},
|
||||
{
|
||||
x: new Date(1538877600000),
|
||||
y: [6603.07, 6604.5, 6599.09, 6603.89]
|
||||
},
|
||||
{
|
||||
x: new Date(1538879400000),
|
||||
y: [6604.44, 6604.44, 6600, 6603.5]
|
||||
},
|
||||
{
|
||||
x: new Date(1538881200000),
|
||||
y: [6603.5, 6603.99, 6597.5, 6603.86]
|
||||
},
|
||||
{
|
||||
x: new Date(1538883000000),
|
||||
y: [6603.85, 6605, 6600, 6604.07]
|
||||
},
|
||||
{
|
||||
x: new Date(1538884800000),
|
||||
y: [6604.98, 6606, 6604.07, 6606]
|
||||
},
|
||||
]
|
||||
}],
|
||||
xaxis: {
|
||||
type: 'datetime'
|
||||
},
|
||||
yaxis: {
|
||||
tickAmount: 5,
|
||||
tooltip: {
|
||||
enabled: true
|
||||
}
|
||||
}
|
||||
}
|
||||
var candleStickChart = new ApexCharts(
|
||||
document.querySelector("#candlestick-chart"),
|
||||
candleStickOptions
|
||||
);
|
||||
candleStickChart.render();
|
||||
|
||||
// 3D Bubble Chart
|
||||
// -----------------------------
|
||||
|
||||
function generateDataBubbleChart(baseval, count, yrange) {
|
||||
var i = 0;
|
||||
var seriesBubbleChart = [];
|
||||
while (i < count) {
|
||||
// var x = Math.floor(Math.random() * (750 - 1 + 1)) + 1;
|
||||
var y = Math.floor(Math.random() * (yrange.max - yrange.min + 1)) + yrange.min;
|
||||
var z = Math.floor(Math.random() * (75 - 15 + 1)) + 15;
|
||||
|
||||
seriesBubbleChart.push([baseval, y, z]);
|
||||
baseval += 86400000;
|
||||
i++;
|
||||
}
|
||||
return seriesBubbleChart;
|
||||
}
|
||||
var bubbleChartOptions = {
|
||||
chart: {
|
||||
height: 350,
|
||||
type: 'bubble',
|
||||
},
|
||||
colors: themeColors,
|
||||
dataLabels: {
|
||||
enabled: false
|
||||
},
|
||||
legend: {
|
||||
offsetY: -10
|
||||
},
|
||||
series: [{
|
||||
name: 'Product1',
|
||||
data: generateDataBubbleChart(new Date('11 Feb 2017 GMT').getTime(), 20, {
|
||||
min: 10,
|
||||
max: 60
|
||||
})
|
||||
},
|
||||
{
|
||||
name: 'Product2',
|
||||
data: generateDataBubbleChart(new Date('11 Feb 2017 GMT').getTime(), 20, {
|
||||
min: 10,
|
||||
max: 60
|
||||
})
|
||||
},
|
||||
{
|
||||
name: 'Product3',
|
||||
data: generateDataBubbleChart(new Date('11 Feb 2017 GMT').getTime(), 20, {
|
||||
min: 10,
|
||||
max: 60
|
||||
})
|
||||
},
|
||||
{
|
||||
name: 'Product4',
|
||||
data: generateDataBubbleChart(new Date('11 Feb 2017 GMT').getTime(), 20, {
|
||||
min: 10,
|
||||
max: 60
|
||||
})
|
||||
}
|
||||
],
|
||||
fill: {
|
||||
type: 'gradient',
|
||||
},
|
||||
xaxis: {
|
||||
tickAmount: 12,
|
||||
type: 'datetime',
|
||||
|
||||
labels: {
|
||||
rotate: 0,
|
||||
}
|
||||
},
|
||||
yaxis: {
|
||||
max: 70,
|
||||
tickAmount: 5,
|
||||
},
|
||||
theme: {
|
||||
palette: 'palette2'
|
||||
}
|
||||
}
|
||||
var bubbleChart = new ApexCharts(
|
||||
document.querySelector("#bubble-chart"),
|
||||
bubbleChartOptions
|
||||
);
|
||||
bubbleChart.render();
|
||||
|
||||
// Scatter Chart
|
||||
// -----------------------------
|
||||
|
||||
var scatterChartOptions = {
|
||||
chart: {
|
||||
height: 350,
|
||||
type: 'scatter',
|
||||
zoom: {
|
||||
enabled: true,
|
||||
type: 'xy'
|
||||
},
|
||||
},
|
||||
colors: themeColors,
|
||||
series: [{
|
||||
name: "SAMPLE A",
|
||||
data: [
|
||||
[16.4, 5.4],
|
||||
[21.7, 2],
|
||||
[25.4, 3],
|
||||
[19, 2],
|
||||
[10.9, 1],
|
||||
[13.6, 3.2],
|
||||
[10.9, 7.4],
|
||||
[10.9, 0],
|
||||
[10.9, 8.2],
|
||||
[16.4, 0],
|
||||
[16.4, 1.8],
|
||||
[13.6, 0.3],
|
||||
[13.6, 0],
|
||||
[29.9, 0],
|
||||
[27.1, 2.3],
|
||||
[16.4, 0],
|
||||
[13.6, 3.7],
|
||||
[10.9, 5.2],
|
||||
[16.4, 6.5],
|
||||
[10.9, 0],
|
||||
[24.5, 7.1],
|
||||
[10.9, 0],
|
||||
[8.1, 4.7],
|
||||
[19, 0],
|
||||
[21.7, 1.8],
|
||||
[27.1, 0],
|
||||
[24.5, 0],
|
||||
[27.1, 0],
|
||||
[29.9, 1.5],
|
||||
[27.1, 0.8],
|
||||
[22.1, 2]
|
||||
]
|
||||
}, {
|
||||
name: "SAMPLE B",
|
||||
data: [
|
||||
[6.4, 13.4],
|
||||
[1.7, 11],
|
||||
[5.4, 8],
|
||||
[9, 17],
|
||||
[1.9, 4],
|
||||
[3.6, 12.2],
|
||||
[1.9, 14.4],
|
||||
[1.9, 9],
|
||||
[1.9, 13.2],
|
||||
[1.4, 7],
|
||||
[6.4, 8.8],
|
||||
[3.6, 4.3],
|
||||
[1.6, 10],
|
||||
[9.9, 2],
|
||||
[7.1, 15],
|
||||
[1.4, 0],
|
||||
[3.6, 13.7],
|
||||
[1.9, 15.2],
|
||||
[6.4, 16.5],
|
||||
[0.9, 10],
|
||||
[4.5, 17.1],
|
||||
[10.9, 10],
|
||||
[0.1, 14.7],
|
||||
[9, 10],
|
||||
[12.7, 11.8],
|
||||
[2.1, 10],
|
||||
[2.5, 10],
|
||||
[27.1, 10],
|
||||
[2.9, 11.5],
|
||||
[7.1, 10.8],
|
||||
[2.1, 12]
|
||||
]
|
||||
}, {
|
||||
name: "SAMPLE C",
|
||||
data: [
|
||||
[21.7, 3],
|
||||
[23.6, 3.5],
|
||||
[24.6, 3],
|
||||
[29.9, 3],
|
||||
[21.7, 20],
|
||||
[23, 2],
|
||||
[10.9, 3],
|
||||
[28, 4],
|
||||
[27.1, 0.3],
|
||||
[16.4, 4],
|
||||
[13.6, 0],
|
||||
[19, 5],
|
||||
[22.4, 3],
|
||||
[24.5, 3],
|
||||
[32.6, 3],
|
||||
[27.1, 4],
|
||||
[29.6, 6],
|
||||
[31.6, 8],
|
||||
[21.6, 5],
|
||||
[20.9, 4],
|
||||
[22.4, 0],
|
||||
[32.6, 10.3],
|
||||
[29.7, 20.8],
|
||||
[24.5, 0.8],
|
||||
[21.4, 0],
|
||||
[21.7, 6.9],
|
||||
[28.6, 7.7],
|
||||
[15.4, 0],
|
||||
[18.1, 0],
|
||||
[33.4, 0],
|
||||
[16.4, 0]
|
||||
]
|
||||
}],
|
||||
legend: {
|
||||
offsetY: -10
|
||||
},
|
||||
xaxis: {
|
||||
tickAmount: 10
|
||||
},
|
||||
yaxis: {
|
||||
tickAmount: 7
|
||||
}
|
||||
}
|
||||
var scatterChart = new ApexCharts(
|
||||
document.querySelector("#scatter-chart"),
|
||||
scatterChartOptions
|
||||
);
|
||||
scatterChart.render();
|
||||
|
||||
// Pie Chart
|
||||
// -----------------------------
|
||||
var pieChartOptions = {
|
||||
chart: {
|
||||
type: 'pie',
|
||||
height: 350
|
||||
},
|
||||
colors: themeColors,
|
||||
labels: ['Team A', 'Team B', 'Team C', 'Team D'],
|
||||
series: [44, 55, 13, 43],
|
||||
legend: {
|
||||
itemMargin: {
|
||||
horizontal: 2
|
||||
},
|
||||
},
|
||||
responsive: [{
|
||||
breakpoint: 480,
|
||||
options: {
|
||||
chart: {
|
||||
width: 350
|
||||
},
|
||||
legend: {
|
||||
position: 'bottom'
|
||||
}
|
||||
}
|
||||
}]
|
||||
}
|
||||
var pieChart = new ApexCharts(
|
||||
document.querySelector("#pie-chart"),
|
||||
pieChartOptions
|
||||
);
|
||||
pieChart.render();
|
||||
|
||||
// Donut Chart
|
||||
// -----------------------------
|
||||
var donutChartOptions = {
|
||||
chart: {
|
||||
type: 'donut',
|
||||
height: 350
|
||||
},
|
||||
colors: themeColors,
|
||||
series: [44, 55, 41, 17],
|
||||
legend: {
|
||||
itemMargin: {
|
||||
horizontal: 2
|
||||
},
|
||||
},
|
||||
responsive: [{
|
||||
breakpoint: 480,
|
||||
options: {
|
||||
chart: {
|
||||
width: 350
|
||||
},
|
||||
legend: {
|
||||
position: 'bottom'
|
||||
}
|
||||
}
|
||||
}]
|
||||
}
|
||||
var donutChart = new ApexCharts(
|
||||
document.querySelector("#donut-chart"),
|
||||
donutChartOptions
|
||||
);
|
||||
|
||||
donutChart.render();
|
||||
|
||||
// Radial Bar Chart
|
||||
// -----------------------------
|
||||
var radialBarChartOptions = {
|
||||
chart: {
|
||||
height: 350,
|
||||
type: 'radialBar',
|
||||
},
|
||||
colors: themeColors,
|
||||
plotOptions: {
|
||||
radialBar: {
|
||||
dataLabels: {
|
||||
name: {
|
||||
fontSize: '22px',
|
||||
},
|
||||
value: {
|
||||
fontSize: '16px',
|
||||
},
|
||||
total: {
|
||||
show: true,
|
||||
label: 'Total',
|
||||
// color: $label_color,
|
||||
formatter: function (w) {
|
||||
// By default this function returns the average of all series. The below is just an example to show the use of custom formatter function
|
||||
return 249
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
},
|
||||
series: [44, 55, 67, 83],
|
||||
labels: ['Apples', 'Oranges', 'Bananas', 'Berries'],
|
||||
}
|
||||
var radialBarChart = new ApexCharts(
|
||||
document.querySelector("#radial-bar-chart"),
|
||||
radialBarChartOptions
|
||||
);
|
||||
radialBarChart.render();
|
||||
|
||||
// Radar Chart
|
||||
// -----------------------------
|
||||
var radarChartOptions = {
|
||||
chart: {
|
||||
height: 350,
|
||||
type: 'radar',
|
||||
},
|
||||
colors: themeColors,
|
||||
series: [{
|
||||
name: 'Series 1',
|
||||
data: [80, 50, 30, 40, 100, 20],
|
||||
}],
|
||||
labels: ['January', 'February', 'March', 'April', 'May', 'June'],
|
||||
dataLabels: {
|
||||
style: {
|
||||
color: $label_color_light
|
||||
}
|
||||
}
|
||||
}
|
||||
var radarChart = new ApexCharts(document.querySelector("#radar-chart"), radarChartOptions);
|
||||
radarChart.render();
|
||||
|
||||
// Heat Map Chart
|
||||
// -----------------------------
|
||||
function generateData(count, yrange) {
|
||||
var i = 0,
|
||||
series = [];
|
||||
while (i < count) {
|
||||
var x = 'w' + (i + 1).toString(),
|
||||
y = Math.floor(Math.random() * (yrange.max - yrange.min + 1)) + yrange.min;
|
||||
|
||||
series.push({
|
||||
x: x,
|
||||
y: y
|
||||
});
|
||||
i++;
|
||||
}
|
||||
return series;
|
||||
}
|
||||
var heatChartOptions = {
|
||||
chart: {
|
||||
height: 350,
|
||||
type: 'heatmap',
|
||||
},
|
||||
dataLabels: {
|
||||
enabled: false
|
||||
},
|
||||
colors: [$primary],
|
||||
series: [{
|
||||
name: 'Metric1',
|
||||
data: generateData(18, {
|
||||
min: 0,
|
||||
max: 90
|
||||
})
|
||||
},
|
||||
{
|
||||
name: 'Metric2',
|
||||
data: generateData(18, {
|
||||
min: 0,
|
||||
max: 90
|
||||
})
|
||||
},
|
||||
{
|
||||
name: 'Metric3',
|
||||
data: generateData(18, {
|
||||
min: 0,
|
||||
max: 90
|
||||
})
|
||||
},
|
||||
{
|
||||
name: 'Metric4',
|
||||
data: generateData(18, {
|
||||
min: 0,
|
||||
max: 90
|
||||
})
|
||||
},
|
||||
{
|
||||
name: 'Metric5',
|
||||
data: generateData(18, {
|
||||
min: 0,
|
||||
max: 90
|
||||
})
|
||||
},
|
||||
{
|
||||
name: 'Metric6',
|
||||
data: generateData(18, {
|
||||
min: 0,
|
||||
max: 90
|
||||
})
|
||||
},
|
||||
{
|
||||
name: 'Metric7',
|
||||
data: generateData(18, {
|
||||
min: 0,
|
||||
max: 90
|
||||
})
|
||||
},
|
||||
{
|
||||
name: 'Metric8',
|
||||
data: generateData(18, {
|
||||
min: 0,
|
||||
max: 90
|
||||
})
|
||||
},
|
||||
{
|
||||
name: 'Metric9',
|
||||
data: generateData(18, {
|
||||
min: 0,
|
||||
max: 90
|
||||
})
|
||||
}
|
||||
],
|
||||
}
|
||||
var heatChart = new ApexCharts(
|
||||
document.querySelector("#heat-map-chart"),
|
||||
heatChartOptions);
|
||||
heatChart.render();
|
||||
});
|
||||
693
public/vendor/dashboard/src/js/scripts/charts/chart-chartjs.js
vendored
Executable file
693
public/vendor/dashboard/src/js/scripts/charts/chart-chartjs.js
vendored
Executable file
@@ -0,0 +1,693 @@
|
||||
/*=========================================================================================
|
||||
File Name: chart-chartjs.js
|
||||
Description: Chartjs Examples
|
||||
----------------------------------------------------------------------------------------
|
||||
Item Name: Vuesax HTML Admin Template
|
||||
Version: 1.1
|
||||
Author: PIXINVENT
|
||||
Author URL: http://www.themeforest.net/user/pixinvent
|
||||
==========================================================================================*/
|
||||
|
||||
$(window).on("load", function () {
|
||||
|
||||
var $primary = '#7367F0';
|
||||
var $success = '#28C76F';
|
||||
var $danger = '#EA5455';
|
||||
var $warning = '#FF9F43';
|
||||
var $label_color = '#1E1E1E';
|
||||
var grid_line_color = '#dae1e7';
|
||||
var scatter_grid_color = '#f3f3f3';
|
||||
var $scatter_point_light = '#D1D4DB';
|
||||
var $scatter_point_dark = '#5175E0';
|
||||
var $white = '#fff';
|
||||
var $black = '#000';
|
||||
|
||||
var themeColors = [$primary, $success, $danger, $warning, $label_color];
|
||||
|
||||
// Line Chart
|
||||
// ------------------------------------------
|
||||
|
||||
//Get the context of the Chart canvas element we want to select
|
||||
var lineChartctx = $("#line-chart");
|
||||
|
||||
// Chart Options
|
||||
var linechartOptions = {
|
||||
responsive: true,
|
||||
maintainAspectRatio: false,
|
||||
legend: {
|
||||
position: 'top',
|
||||
},
|
||||
hover: {
|
||||
mode: 'label'
|
||||
},
|
||||
scales: {
|
||||
xAxes: [{
|
||||
display: true,
|
||||
gridLines: {
|
||||
color: grid_line_color,
|
||||
},
|
||||
scaleLabel: {
|
||||
display: true,
|
||||
}
|
||||
}],
|
||||
yAxes: [{
|
||||
display: true,
|
||||
gridLines: {
|
||||
color: grid_line_color,
|
||||
},
|
||||
scaleLabel: {
|
||||
display: true,
|
||||
}
|
||||
}]
|
||||
},
|
||||
title: {
|
||||
display: true,
|
||||
text: 'World population per region (in millions)'
|
||||
}
|
||||
};
|
||||
|
||||
// Chart Data
|
||||
var linechartData = {
|
||||
labels: [1500, 1600, 1700, 1750, 1800, 1850, 1900, 1950, 1999, 2050],
|
||||
datasets: [{
|
||||
label: "Africa",
|
||||
data: [86, 114, 106, 106, 107, 111, 133, 221, 783, 2478],
|
||||
borderColor: $primary,
|
||||
fill: false
|
||||
}, {
|
||||
data: [282, 350, 411, 502, 635, 809, 947, 1402, 3700, 5267],
|
||||
label: "Asia",
|
||||
borderColor: $success,
|
||||
fill: false
|
||||
}, {
|
||||
data: [168, 170, 178, 190, 203, 276, 408, 547, 675, 734],
|
||||
label: "Europe",
|
||||
borderColor: $danger,
|
||||
fill: false
|
||||
}, {
|
||||
data: [40, 20, 10, 16, 24, 38, 74, 167, 508, 784],
|
||||
label: "Latin America",
|
||||
borderColor: $warning,
|
||||
fill: false
|
||||
}, {
|
||||
data: [6, 3, 2, 2, 7, 26, 82, 172, 312, 433],
|
||||
label: "North America",
|
||||
borderColor: $label_color,
|
||||
fill: false
|
||||
}]
|
||||
};
|
||||
|
||||
var lineChartconfig = {
|
||||
type: 'line',
|
||||
|
||||
// Chart Options
|
||||
options: linechartOptions,
|
||||
|
||||
data: linechartData
|
||||
};
|
||||
|
||||
// Create the chart
|
||||
var lineChart = new Chart(lineChartctx, lineChartconfig);
|
||||
|
||||
|
||||
|
||||
|
||||
// Bar Chart
|
||||
// ------------------------------------------
|
||||
|
||||
//Get the context of the Chart canvas element we want to select
|
||||
var barChartctx = $("#bar-chart");
|
||||
|
||||
// Chart Options
|
||||
var barchartOptions = {
|
||||
// Elements options apply to all of the options unless overridden in a dataset
|
||||
// In this case, we are setting the border of each bar to be 2px wide
|
||||
elements: {
|
||||
rectangle: {
|
||||
borderWidth: 2,
|
||||
borderSkipped: 'left'
|
||||
}
|
||||
},
|
||||
responsive: true,
|
||||
maintainAspectRatio: false,
|
||||
responsiveAnimationDuration: 500,
|
||||
legend: { display: false },
|
||||
scales: {
|
||||
xAxes: [{
|
||||
display: true,
|
||||
gridLines: {
|
||||
color: grid_line_color,
|
||||
},
|
||||
scaleLabel: {
|
||||
display: true,
|
||||
}
|
||||
}],
|
||||
yAxes: [{
|
||||
display: true,
|
||||
gridLines: {
|
||||
color: grid_line_color,
|
||||
},
|
||||
scaleLabel: {
|
||||
display: true,
|
||||
},
|
||||
ticks: {
|
||||
stepSize: 1000
|
||||
},
|
||||
}],
|
||||
},
|
||||
title: {
|
||||
display: true,
|
||||
text: 'Predicted world population (millions) in 2050'
|
||||
},
|
||||
|
||||
};
|
||||
|
||||
// Chart Data
|
||||
var barchartData = {
|
||||
labels: ["Africa", "Asia", "Europe", "Latin America", "North America"],
|
||||
datasets: [{
|
||||
label: "Population (millions)",
|
||||
data: [2478, 5267, 734, 784, 433],
|
||||
backgroundColor: themeColors,
|
||||
borderColor: "transparent"
|
||||
}]
|
||||
};
|
||||
|
||||
var barChartconfig = {
|
||||
type: 'bar',
|
||||
|
||||
// Chart Options
|
||||
options: barchartOptions,
|
||||
|
||||
data: barchartData
|
||||
};
|
||||
|
||||
// Create the chart
|
||||
var barChart = new Chart(barChartctx, barChartconfig);
|
||||
|
||||
|
||||
|
||||
// Horizontal Chart
|
||||
// -------------------------------------
|
||||
|
||||
// Get the context of the Chart canvas element we want to select
|
||||
var horizontalChartctx = $("#horizontal-bar");
|
||||
|
||||
var horizontalchartOptions = {
|
||||
// Elements options apply to all of the options unless overridden in a dataset
|
||||
// In this case, we are setting the border of each horizontal bar to be 2px wide
|
||||
elements: {
|
||||
rectangle: {
|
||||
borderWidth: 2,
|
||||
borderSkipped: 'right',
|
||||
borderSkipped: 'top',
|
||||
}
|
||||
},
|
||||
responsive: true,
|
||||
maintainAspectRatio: false,
|
||||
responsiveAnimationDuration: 500,
|
||||
legend: {
|
||||
display: false,
|
||||
},
|
||||
scales: {
|
||||
xAxes: [{
|
||||
display: true,
|
||||
gridLines: {
|
||||
color: grid_line_color,
|
||||
},
|
||||
scaleLabel: {
|
||||
display: true,
|
||||
}
|
||||
}],
|
||||
yAxes: [{
|
||||
display: true,
|
||||
gridLines: {
|
||||
color: grid_line_color,
|
||||
},
|
||||
scaleLabel: {
|
||||
display: true,
|
||||
}
|
||||
}]
|
||||
},
|
||||
title: {
|
||||
display: true,
|
||||
text: 'Predicted world population (millions) in 2050'
|
||||
}
|
||||
};
|
||||
|
||||
// Chart Data
|
||||
var horizontalchartData = {
|
||||
labels: ["Africa", "Asia", "Europe", "Latin America", "North America"],
|
||||
datasets: [{
|
||||
label: "Population (millions)",
|
||||
data: [2478, 5267, 734, 784, 433],
|
||||
backgroundColor: themeColors,
|
||||
borderColor: "transparent"
|
||||
}]
|
||||
};
|
||||
|
||||
var horizontalChartconfig = {
|
||||
type: 'horizontalBar',
|
||||
|
||||
// Chart Options
|
||||
options: horizontalchartOptions,
|
||||
|
||||
data: horizontalchartData
|
||||
};
|
||||
|
||||
// Create the chart
|
||||
var horizontalChart = new Chart(horizontalChartctx, horizontalChartconfig);
|
||||
|
||||
|
||||
|
||||
// Pie Chart
|
||||
// --------------------------------
|
||||
|
||||
|
||||
//Get the context of the Chart canvas element we want to select
|
||||
var pieChartctx = $("#simple-pie-chart");
|
||||
|
||||
// Chart Options
|
||||
var piechartOptions = {
|
||||
responsive: true,
|
||||
maintainAspectRatio: false,
|
||||
responsiveAnimationDuration: 500,
|
||||
title: {
|
||||
display: true,
|
||||
text: 'Predicted world population (millions) in 2050'
|
||||
}
|
||||
};
|
||||
|
||||
// Chart Data
|
||||
var piechartData = {
|
||||
labels: ["Africa", "Asia", "Europe", "Latin America", "North America"],
|
||||
datasets: [{
|
||||
label: "My First dataset",
|
||||
data: [2478, 5267, 734, 784, 433],
|
||||
backgroundColor: themeColors,
|
||||
}]
|
||||
};
|
||||
|
||||
var pieChartconfig = {
|
||||
type: 'pie',
|
||||
|
||||
// Chart Options
|
||||
options: piechartOptions,
|
||||
|
||||
data: piechartData
|
||||
};
|
||||
|
||||
// Create the chart
|
||||
var pieSimpleChart = new Chart(pieChartctx, pieChartconfig);
|
||||
|
||||
|
||||
|
||||
// Doughnut Chart
|
||||
// ---------------------------------------------
|
||||
|
||||
//Get the context of the Chart canvas element we want to select
|
||||
var doughnutChartctx = $("#simple-doughnut-chart");
|
||||
|
||||
// Chart Options
|
||||
var doughnutchartOptions = {
|
||||
responsive: true,
|
||||
maintainAspectRatio: false,
|
||||
responsiveAnimationDuration: 500,
|
||||
title: {
|
||||
display: true,
|
||||
text: 'Predicted world population (millions) in 2050'
|
||||
}
|
||||
};
|
||||
|
||||
// Chart Data
|
||||
var doughnutchartData = {
|
||||
labels: ["Africa", "Asia", "Europe", "Latin America", "North America"],
|
||||
datasets: [{
|
||||
label: "My First dataset",
|
||||
data: [2478, 5267, 734, 784, 433],
|
||||
backgroundColor: themeColors,
|
||||
}]
|
||||
};
|
||||
|
||||
var doughnutChartconfig = {
|
||||
type: 'doughnut',
|
||||
|
||||
// Chart Options
|
||||
options: doughnutchartOptions,
|
||||
|
||||
data: doughnutchartData
|
||||
};
|
||||
|
||||
// Create the chart
|
||||
var doughnutSimpleChart = new Chart(doughnutChartctx, doughnutChartconfig);
|
||||
|
||||
|
||||
// Radar Chart
|
||||
// ----------------------------------------
|
||||
|
||||
//Get the context of the Chart canvas element we want to select
|
||||
var radarChartctx = $("#radar-chart");
|
||||
|
||||
// Chart Options
|
||||
var radarchartOptions = {
|
||||
responsive: true,
|
||||
maintainAspectRatio: false,
|
||||
responsiveAnimationDuration: 500,
|
||||
legend: {
|
||||
position: 'top',
|
||||
},
|
||||
tooltips: {
|
||||
callbacks: {
|
||||
label: function (tooltipItems, data) {
|
||||
return data.datasets[tooltipItems.datasetIndex].label + ": " + tooltipItems.yLabel;
|
||||
}
|
||||
}
|
||||
},
|
||||
title: {
|
||||
display: true,
|
||||
text: 'Distribution in % of world population'
|
||||
},
|
||||
scale: {
|
||||
reverse: false,
|
||||
ticks: {
|
||||
beginAtZero: true,
|
||||
stepSize: 10
|
||||
}
|
||||
}
|
||||
};
|
||||
|
||||
// Chart Data
|
||||
var radarchartData = {
|
||||
labels: ["Africa", "Asia", "Europe", "Latin America", "North America"],
|
||||
datasets: [{
|
||||
label: "1950",
|
||||
fill: true,
|
||||
backgroundColor: "rgba(179,181,198,0.2)",
|
||||
borderColor: "rgba(179,181,198,1)",
|
||||
pointBorderColor: $white,
|
||||
pointBackgroundColor: "rgba(179,181,198,1)",
|
||||
data: [8.77, 55.61, 21.69, 6.62, 6.82],
|
||||
}, {
|
||||
label: "2050",
|
||||
fill: true,
|
||||
backgroundColor: "rgba(255,99,132,0.2)",
|
||||
borderColor: "rgba(255,99,132,1)",
|
||||
pointBorderColor: $white,
|
||||
pointBackgroundColor: "rgba(255,99,132,1)",
|
||||
data: [25.48, 54.16, 7.61, 8.06, 4.45],
|
||||
},]
|
||||
};
|
||||
|
||||
var radarChartconfig = {
|
||||
type: 'radar',
|
||||
|
||||
// Chart Options
|
||||
options: radarchartOptions,
|
||||
|
||||
data: radarchartData
|
||||
};
|
||||
|
||||
// Create the chart
|
||||
var polarChart = new Chart(radarChartctx, radarChartconfig);
|
||||
|
||||
|
||||
|
||||
// Polar Chart
|
||||
// -----------------------------------
|
||||
|
||||
//Get the context of the Chart canvas element we want to select
|
||||
var polarChartctx = $("#polar-chart");
|
||||
|
||||
// Chart Options
|
||||
var polarchartOptions = {
|
||||
responsive: true,
|
||||
maintainAspectRatio: false,
|
||||
responsiveAnimationDuration: 500,
|
||||
legend: {
|
||||
position: 'top',
|
||||
},
|
||||
title: {
|
||||
display: true,
|
||||
text: 'Predicted world population (millions) in 2050'
|
||||
},
|
||||
scale: {
|
||||
ticks: {
|
||||
beginAtZero: true,
|
||||
stepSize: 2000
|
||||
},
|
||||
reverse: false
|
||||
},
|
||||
animation: {
|
||||
animateRotate: false
|
||||
}
|
||||
};
|
||||
|
||||
// Chart Data
|
||||
var polarchartData = {
|
||||
labels: ["Africa", "Asia", "Europe", "Latin America", "North America"],
|
||||
datasets: [{
|
||||
label: "Population (millions)",
|
||||
backgroundColor: themeColors,
|
||||
data: [2478, 5267, 734, 784, 433]
|
||||
}],
|
||||
};
|
||||
|
||||
var polarChartconfig = {
|
||||
type: 'polarArea',
|
||||
|
||||
// Chart Options
|
||||
options: polarchartOptions,
|
||||
|
||||
data: polarchartData
|
||||
};
|
||||
|
||||
// Create the chart
|
||||
var polarChart = new Chart(polarChartctx, polarChartconfig);
|
||||
|
||||
|
||||
|
||||
|
||||
// Bubble Chart
|
||||
// ---------------------------------------
|
||||
|
||||
//Get the context of the Chart canvas element we want to select
|
||||
var bubbleChartctx = $("#bubble-chart");
|
||||
|
||||
var randomScalingFactor = function () {
|
||||
return (Math.random() > 0.5 ? 1.0 : -1.0) * Math.round(Math.random() * 100);
|
||||
};
|
||||
|
||||
// Chart Options
|
||||
var bubblechartOptions = {
|
||||
responsive: true,
|
||||
maintainAspectRatio: false,
|
||||
scales: {
|
||||
xAxes: [{
|
||||
display: true,
|
||||
gridLines: {
|
||||
color: grid_line_color,
|
||||
},
|
||||
scaleLabel: {
|
||||
display: true,
|
||||
labelString: "GDP (PPP)"
|
||||
}
|
||||
}],
|
||||
yAxes: [{
|
||||
display: true,
|
||||
gridLines: {
|
||||
color: grid_line_color,
|
||||
},
|
||||
scaleLabel: {
|
||||
display: true,
|
||||
labelString: "Happiness"
|
||||
},
|
||||
ticks: {
|
||||
stepSize: 0.5
|
||||
},
|
||||
}]
|
||||
},
|
||||
title: {
|
||||
display: true,
|
||||
text: 'Predicted world population (millions) in 2050'
|
||||
}
|
||||
};
|
||||
|
||||
// Chart Data
|
||||
var bubblechartData = {
|
||||
animation: {
|
||||
duration: 10000
|
||||
},
|
||||
datasets: [{
|
||||
label: ["China"],
|
||||
backgroundColor: "rgba(255,221,50,0.2)",
|
||||
borderColor: "rgba(255,221,50,1)",
|
||||
data: [{
|
||||
x: 21269017,
|
||||
y: 5.245,
|
||||
r: 15
|
||||
}],
|
||||
}, {
|
||||
label: ["Denmark"],
|
||||
backgroundColor: "rgba(60,186,159,0.2)",
|
||||
borderColor: "rgba(60,186,159,1)",
|
||||
data: [{
|
||||
x: 258702,
|
||||
y: 7.526,
|
||||
r: 10
|
||||
}]
|
||||
}, {
|
||||
label: ["Germany"],
|
||||
backgroundColor: "rgba(0,0,0,0.2)",
|
||||
borderColor: $black,
|
||||
data: [{
|
||||
x: 3979083,
|
||||
y: 6.994,
|
||||
r: 15
|
||||
}]
|
||||
}, {
|
||||
label: ["Japan"],
|
||||
backgroundColor: "rgba(193,46,12,0.2)",
|
||||
borderColor: "rgba(193,46,12,1)",
|
||||
data: [{
|
||||
x: 4931877,
|
||||
y: 5.921,
|
||||
r: 15
|
||||
}]
|
||||
}]
|
||||
};
|
||||
|
||||
var bubbleChartconfig = {
|
||||
type: 'bubble',
|
||||
|
||||
// Chart Options
|
||||
options: bubblechartOptions,
|
||||
|
||||
data: bubblechartData
|
||||
};
|
||||
|
||||
// Create the chart
|
||||
var bubbleChart = new Chart(bubbleChartctx, bubbleChartconfig);
|
||||
|
||||
|
||||
|
||||
// Scatter Chart
|
||||
// ------------------------------------
|
||||
|
||||
//Get the context of the Chart canvas element we want to select
|
||||
var scatterChartctx = $("#scatter-chart");
|
||||
|
||||
// Chart Options
|
||||
var scatterchartOptions = {
|
||||
responsive: true,
|
||||
maintainAspectRatio: false,
|
||||
responsiveAnimationDuration: 800,
|
||||
title: {
|
||||
display: false,
|
||||
text: 'Chart.js Scatter Chart'
|
||||
},
|
||||
scales: {
|
||||
xAxes: [{
|
||||
position: 'top',
|
||||
gridLines: {
|
||||
color: scatter_grid_color,
|
||||
drawTicks: false,
|
||||
},
|
||||
scaleLabel: {
|
||||
display: true,
|
||||
labelString: 'x axis'
|
||||
}
|
||||
}],
|
||||
yAxes: [{
|
||||
position: 'right',
|
||||
gridLines: {
|
||||
color: scatter_grid_color,
|
||||
drawTicks: false,
|
||||
},
|
||||
scaleLabel: {
|
||||
display: true,
|
||||
labelString: 'y axis'
|
||||
}
|
||||
}]
|
||||
}
|
||||
};
|
||||
|
||||
// Chart Data
|
||||
var scatterchartData = {
|
||||
datasets: [{
|
||||
label: "My First dataset",
|
||||
data: [{
|
||||
x: 65,
|
||||
y: 28,
|
||||
}, {
|
||||
x: 59,
|
||||
y: 48,
|
||||
}, {
|
||||
x: 80,
|
||||
y: 40,
|
||||
}, {
|
||||
x: 81,
|
||||
y: 19,
|
||||
}, {
|
||||
x: 56,
|
||||
y: 86,
|
||||
}, {
|
||||
x: 55,
|
||||
y: 27,
|
||||
}, {
|
||||
x: 40,
|
||||
y: 89,
|
||||
}],
|
||||
backgroundColor: "rgba(209,212,219,.3)",
|
||||
borderColor: "transparent",
|
||||
pointBorderColor: $scatter_point_light,
|
||||
pointBackgroundColor: $white,
|
||||
pointBorderWidth: 2,
|
||||
pointHoverBorderWidth: 2,
|
||||
pointRadius: 4,
|
||||
}, {
|
||||
label: "My Second dataset",
|
||||
data: [{
|
||||
x: 45,
|
||||
y: 17,
|
||||
}, {
|
||||
x: 25,
|
||||
y: 62,
|
||||
}, {
|
||||
x: 16,
|
||||
y: 78,
|
||||
}, {
|
||||
x: 36,
|
||||
y: 88,
|
||||
}, {
|
||||
x: 67,
|
||||
y: 26,
|
||||
}, {
|
||||
x: 18,
|
||||
y: 48,
|
||||
}, {
|
||||
x: 76,
|
||||
y: 73,
|
||||
}],
|
||||
backgroundColor: "rgba(81,117,224,.6)",
|
||||
borderColor: "transparent",
|
||||
pointBorderColor: $scatter_point_dark,
|
||||
pointBackgroundColor: $white,
|
||||
pointBorderWidth: 2,
|
||||
pointHoverBorderWidth: 2,
|
||||
pointRadius: 4,
|
||||
}]
|
||||
};
|
||||
|
||||
var scatterChartconfig = {
|
||||
type: 'scatter',
|
||||
|
||||
// Chart Options
|
||||
options: scatterchartOptions,
|
||||
|
||||
data: scatterchartData
|
||||
};
|
||||
|
||||
// Create the chart
|
||||
var scatterChart = new Chart(scatterChartctx, scatterChartconfig);
|
||||
|
||||
});
|
||||
328
public/vendor/dashboard/src/js/scripts/charts/chart-echart.js
vendored
Executable file
328
public/vendor/dashboard/src/js/scripts/charts/chart-echart.js
vendored
Executable file
@@ -0,0 +1,328 @@
|
||||
/*=========================================================================================
|
||||
File Name: chart-echart.js
|
||||
Description: echarts examples
|
||||
----------------------------------------------------------------------------------------
|
||||
Item Name: Vuesax HTML Admin Template
|
||||
Version: 1.1
|
||||
Author: PIXINVENT
|
||||
Author URL: http://www.themeforest.net/user/pixinvent
|
||||
==========================================================================================*/
|
||||
|
||||
$(window).on("load", function(){
|
||||
|
||||
var $dark_green = '#4ea397';
|
||||
var $green = '#22c3aa';
|
||||
var $light_green = '#7bd9a5';
|
||||
var $lighten_green = '#a8e7d2';
|
||||
|
||||
|
||||
|
||||
// Bar chart
|
||||
// ------------------------------
|
||||
|
||||
var barChart = echarts.init(document.getElementById('bar-chart'));
|
||||
|
||||
|
||||
// var i;
|
||||
function randomize() {
|
||||
return Math.round(300 + Math.random() * 700) / 10
|
||||
};
|
||||
|
||||
var barChartoption = {
|
||||
legend: {},
|
||||
tooltip: {},
|
||||
dataset: {
|
||||
source: [
|
||||
['product', '2015', '2016', '2017'],
|
||||
['Matcha Latte', randomize(), randomize(), randomize()],
|
||||
['Milk Tea', randomize(), randomize(), randomize()],
|
||||
['Cheese Cocoa', randomize(), randomize(), randomize()],
|
||||
['Walnut Brownie', randomize(), randomize(), randomize()],
|
||||
],
|
||||
},
|
||||
|
||||
|
||||
xAxis: {
|
||||
type: 'category',
|
||||
splitLine: { show: true },
|
||||
},
|
||||
yAxis: {},
|
||||
// Declare several bar series, each will be mapped
|
||||
// to a column of dataset.source by default.
|
||||
series: [
|
||||
{
|
||||
type: 'bar',
|
||||
itemStyle: {color: $dark_green},
|
||||
},
|
||||
{
|
||||
type: 'bar',
|
||||
itemStyle: {color: $green},
|
||||
},
|
||||
{
|
||||
type: 'bar',
|
||||
itemStyle: {color: $light_green},
|
||||
}
|
||||
]
|
||||
};
|
||||
barChart.setOption(barChartoption);
|
||||
|
||||
|
||||
|
||||
// Line chart
|
||||
// ------------------------------
|
||||
|
||||
var lineChart = echarts.init(document.getElementById('line-chart'));
|
||||
|
||||
data = [["2000-06-05",116],["2000-06-06",129],["2000-06-07",135],["2000-06-08",86],["2000-06-09",73],["2000-06-10",85],["2000-06-11",73],["2000-06-12",68],["2000-06-13",92],["2000-06-14",130],["2000-06-15",245],["2000-06-16",139],["2000-06-17",115],["2000-06-18",111],["2000-06-19",309],["2000-06-20",206],["2000-06-21",137],["2000-06-22",128],["2000-06-23",85],["2000-06-24",94],["2000-06-25",71],["2000-06-26",106],["2000-06-27",84],["2000-06-28",93],["2000-06-29",85],["2000-06-30",73],["2000-07-01",83],["2000-07-02",125],["2000-07-03",107],["2000-07-04",82],["2000-07-05",44],["2000-07-06",72],["2000-07-07",106],["2000-07-08",107],["2000-07-09",66],["2000-07-10",91],["2000-07-11",92],["2000-07-12",113],["2000-07-13",107],["2000-07-14",131],["2000-07-15",111],["2000-07-16",64],["2000-07-17",69],["2000-07-18",88],["2000-07-19",77],["2000-07-20",83],["2000-07-21",111],["2000-07-22",57],["2000-07-23",55],["2000-07-24",60]];
|
||||
|
||||
var dateList = data.map(function (item) {
|
||||
return item[0];
|
||||
});
|
||||
var valueList = data.map(function (item) {
|
||||
return item[1];
|
||||
});
|
||||
|
||||
var lineChartoption = {
|
||||
|
||||
// Make gradient line here
|
||||
visualMap: [{
|
||||
show: false,
|
||||
type: 'continuous',
|
||||
seriesIndex: 0,
|
||||
min: 0,
|
||||
max: 400,
|
||||
color: [$dark_green, $lighten_green]
|
||||
}],
|
||||
tooltip: {
|
||||
trigger: 'axis'
|
||||
},
|
||||
xAxis: [{
|
||||
data: dateList,
|
||||
splitLine: {show: true}
|
||||
}],
|
||||
yAxis: [{
|
||||
splitLine: {show: false}
|
||||
}],
|
||||
series: [{
|
||||
type: 'line',
|
||||
showSymbol: false,
|
||||
data: valueList
|
||||
}]
|
||||
};
|
||||
|
||||
lineChart.setOption(lineChartoption);
|
||||
|
||||
|
||||
// Pie chart
|
||||
// ------------------------------
|
||||
|
||||
var pieChart = echarts.init(document.getElementById('pie-chart'));
|
||||
|
||||
var pieChartoption = {
|
||||
tooltip : {
|
||||
trigger: 'item',
|
||||
formatter: "{a} <br/>{b} : {c} ({d}%)"
|
||||
},
|
||||
legend: {
|
||||
orient: 'vertical',
|
||||
left: 'left',
|
||||
data: ['Direct interview', 'Email marketing', 'Alliance advertising', 'Video ad', 'Search engine']
|
||||
},
|
||||
series : [
|
||||
{
|
||||
name: 'Access source',
|
||||
type: 'pie',
|
||||
radius : '55%',
|
||||
center: ['50%', '60%'],
|
||||
color: ['#FF9F43','#28C76F','#EA5455','#87ceeb','#7367F0'],
|
||||
data: [
|
||||
{value: 335, name: 'Direct interview'},
|
||||
{value: 310, name: 'Email marketing'},
|
||||
{value: 234, name: 'Alliance advertising'},
|
||||
{value: 135, name: 'Video ad'},
|
||||
{value: 1548, name: 'Search engine'}
|
||||
],
|
||||
itemStyle: {
|
||||
emphasis: {
|
||||
shadowBlur: 10,
|
||||
shadowOffsetX: 0,
|
||||
shadowColor: 'rgba(0, 0, 0, 0.5)'
|
||||
}
|
||||
}
|
||||
}
|
||||
],
|
||||
};
|
||||
|
||||
pieChart.setOption(pieChartoption);
|
||||
|
||||
|
||||
// Scatter chart
|
||||
// ------------------------------
|
||||
|
||||
var scatterChart = echarts.init(document.getElementById('scatter-chart'));
|
||||
|
||||
var data = [
|
||||
[[28604,77,17096869,'Australia',1990],[31163,77.4,27662440,'Canada',1990],[1516,68,1154605773,'China',1990],[13670,74.7,10582082,'Cuba',1990],[28599,75,4986705,'Finland',1990],[29476,77.1,56943299,'France',1990],[31476,75.4,78958237,'Germany',1990],[28666,78.1,254830,'Iceland',1990],[1777,57.7,870601776,'India',1990],[29550,79.1,122249285,'Japan',1990],[2076,67.9,20194354,'North Korea',1990],[12087,72,42972254,'South Korea',1990],[24021,75.4,3397534,'New Zealand',1990],[43296,76.8,4240375,'Norway',1990],[10088,70.8,38195258,'Poland',1990],[19349,69.6,147568552,'Russia',1990],[10670,67.3,53994605,'Turkey',1990],[26424,75.7,57110117,'United Kingdom',1990],[37062,75.4,252847810,'United States',1990]],
|
||||
[[44056,81.8,23968973,'Australia',2015],[43294,81.7,35939927,'Canada',2015],[13334,76.9,1376048943,'China',2015],[21291,78.5,11389562,'Cuba',2015],[38923,80.8,5503457,'Finland',2015],[37599,81.9,64395345,'France',2015],[44053,81.1,80688545,'Germany',2015],[42182,82.8,329425,'Iceland',2015],[5903,66.8,1311050527,'India',2015],[36162,83.5,126573481,'Japan',2015],[1390,71.4,25155317,'North Korea',2015],[34644,80.7,50293439,'South Korea',2015],[34186,80.6,4528526,'New Zealand',2015],[64304,81.6,5210967,'Norway',2015],[24787,77.3,38611794,'Poland',2015],[23038,73.13,143456918,'Russia',2015],[19360,76.5,78665830,'Turkey',2015],[38225,81.4,64715810,'United Kingdom',2015],[53354,79.1,321773631,'United States',2015]]
|
||||
];
|
||||
|
||||
var scatterChartoption = {
|
||||
|
||||
legend: {
|
||||
right: 10,
|
||||
data: ['1990', '2015']
|
||||
},
|
||||
xAxis: {
|
||||
splitLine: {
|
||||
lineStyle: {
|
||||
type: 'dashed'
|
||||
}
|
||||
}
|
||||
},
|
||||
yAxis: {
|
||||
splitLine: {
|
||||
lineStyle: {
|
||||
type: 'dashed'
|
||||
}
|
||||
},
|
||||
scale: true
|
||||
},
|
||||
series: [{
|
||||
name: '1990',
|
||||
data: data[0],
|
||||
type: 'scatter',
|
||||
symbolSize: function (data) {
|
||||
return Math.sqrt(data[2]) / 5e2;
|
||||
},
|
||||
label: {
|
||||
emphasis: {
|
||||
show: true,
|
||||
formatter: function (param) {
|
||||
return param.data[3];
|
||||
},
|
||||
position: 'top'
|
||||
}
|
||||
},
|
||||
itemStyle: {
|
||||
normal: {
|
||||
shadowBlur: 10,
|
||||
shadowColor: 'rgba(120, 36, 50, 0.5)',
|
||||
shadowOffsetY: 5,
|
||||
color: new echarts.graphic.RadialGradient(0.4, 0.3, 1, [{
|
||||
offset: 0,
|
||||
color: 'rgb(251, 118, 123)'
|
||||
}, {
|
||||
offset: 1,
|
||||
color: 'rgb(204, 46, 72)'
|
||||
}])
|
||||
}
|
||||
}
|
||||
}, {
|
||||
name: '2015',
|
||||
data: data[1],
|
||||
type: 'scatter',
|
||||
symbolSize: function (data) {
|
||||
return Math.sqrt(data[2]) / 5e2;
|
||||
},
|
||||
label: {
|
||||
emphasis: {
|
||||
show: true,
|
||||
formatter: function (param) {
|
||||
return param.data[3];
|
||||
},
|
||||
position: 'top'
|
||||
}
|
||||
},
|
||||
itemStyle: {
|
||||
normal: {
|
||||
shadowBlur: 10,
|
||||
shadowColor: 'rgba(25, 100, 150, 0.5)',
|
||||
shadowOffsetY: 5,
|
||||
color: new echarts.graphic.RadialGradient(0.4, 0.3, 1, [{
|
||||
offset: 0,
|
||||
color: 'rgb(129, 227, 238)'
|
||||
}, {
|
||||
offset: 1,
|
||||
color: 'rgb(25, 183, 207)'
|
||||
}])
|
||||
}
|
||||
}
|
||||
}]
|
||||
};
|
||||
|
||||
scatterChart.setOption(scatterChartoption);
|
||||
|
||||
|
||||
// Polar chart
|
||||
// ------------------------------
|
||||
|
||||
var polarChart = echarts.init(document.getElementById('polar-chart'));
|
||||
|
||||
var data = [];
|
||||
|
||||
for (var i = 0; i <= 360; i++) {
|
||||
var t = i / 180 * Math.PI;
|
||||
var r = Math.sin(2 * t) * Math.cos(2 * t);
|
||||
data.push([r, i]);
|
||||
}
|
||||
|
||||
var polarChartoption = {
|
||||
legend: {
|
||||
data: ['line']
|
||||
},
|
||||
polar: {
|
||||
center: ['50%', '54%']
|
||||
},
|
||||
tooltip: {
|
||||
trigger: 'axis',
|
||||
axisPointer: {
|
||||
type: 'cross'
|
||||
}
|
||||
},
|
||||
angleAxis: {
|
||||
type: 'value',
|
||||
startAngle: 0
|
||||
},
|
||||
radiusAxis: {
|
||||
min: 0
|
||||
},
|
||||
series: [{
|
||||
coordinateSystem: 'polar',
|
||||
name: 'line',
|
||||
type: 'line',
|
||||
showSymbol: false,
|
||||
data: data
|
||||
}],
|
||||
animationDuration: 2000
|
||||
};
|
||||
|
||||
polarChart.setOption(polarChartoption);
|
||||
|
||||
|
||||
// Radar chart
|
||||
// ------------------------------
|
||||
|
||||
var radarChart = echarts.init(document.getElementById('radar-chart'));
|
||||
|
||||
var radarChartoption = {
|
||||
tooltip: {},
|
||||
radar: {
|
||||
indicator: [
|
||||
{ name: 'Attack', max: 20 },
|
||||
{ name: 'Defensive', max: 20 },
|
||||
{ name: 'Speed', max: 20 },
|
||||
{ name: 'Power', max: 20 },
|
||||
{ name: 'Endurance', max: 20 },
|
||||
{ name: 'Agile', max: 20 }
|
||||
]
|
||||
},
|
||||
series: [{
|
||||
name: 'Ability value',
|
||||
type: 'radar',
|
||||
data: [{ value: [19, 9, 18, 16, 16, 20] }]
|
||||
}]
|
||||
};
|
||||
|
||||
radarChart.setOption(radarChartoption);
|
||||
|
||||
});
|
||||
109
public/vendor/dashboard/src/js/scripts/charts/gmaps/maps.js
vendored
Executable file
109
public/vendor/dashboard/src/js/scripts/charts/gmaps/maps.js
vendored
Executable file
@@ -0,0 +1,109 @@
|
||||
/*=========================================================================================
|
||||
File Name: maps.js
|
||||
Description: google maps
|
||||
----------------------------------------------------------------------------------------
|
||||
Item Name: Vuesax HTML Admin Template
|
||||
Version: 1.1
|
||||
Author: PIXINVENT
|
||||
Author URL: http://www.themeforest.net/user/pixinvent
|
||||
==========================================================================================*/
|
||||
|
||||
// Gmaps Maps
|
||||
// ------------------------------
|
||||
|
||||
$(window).on("load", function(){
|
||||
|
||||
// Basic Map
|
||||
// ------------------------------
|
||||
|
||||
map = new GMaps({
|
||||
div: '#basic-map',
|
||||
lat: 9.0820,
|
||||
lng: 8.6753,
|
||||
zoom: 7
|
||||
});
|
||||
map.addMarker({
|
||||
lat: 9.0765,
|
||||
lng: 7.3986,
|
||||
title: 'Marker1',
|
||||
draggable: true,
|
||||
});
|
||||
|
||||
// Info Window
|
||||
// ------------------------------
|
||||
|
||||
map = new GMaps({
|
||||
div: '#info-window',
|
||||
lat: 47.4073,
|
||||
lng: 7.7526,
|
||||
zoom: 7
|
||||
});
|
||||
map.addMarker({
|
||||
lat: 47.4073,
|
||||
lng: 7.76,
|
||||
title: 'Marker1',
|
||||
infoWindow: {
|
||||
content: '<p>Marker1</p>'
|
||||
}
|
||||
});
|
||||
map.addMarker({
|
||||
lat: 47.3769,
|
||||
lng: 8.5417,
|
||||
title: 'Marker2',
|
||||
infoWindow: {
|
||||
content: '<p>Marker2</p>'
|
||||
}
|
||||
});
|
||||
map.addMarker({
|
||||
lat: 46.9480,
|
||||
lng: 7.4474,
|
||||
title: 'Marker3',
|
||||
infoWindow: {
|
||||
content: '<p>Marker3</p>'
|
||||
}
|
||||
});
|
||||
|
||||
// Street View Markers
|
||||
// ------------------------------
|
||||
|
||||
map = GMaps.createPanorama({
|
||||
el: '#street-view',
|
||||
lat : 52.201272,
|
||||
lng: 0.118720,
|
||||
});
|
||||
|
||||
// Random Value for street heading
|
||||
|
||||
$(".street-heading").on("click", function(){
|
||||
map = GMaps.createPanorama({
|
||||
el: '#street-view',
|
||||
lat : 52.201272,
|
||||
lng: 0.118720,
|
||||
pov: { heading: Math.random() * 360, pitch: 5 }
|
||||
});
|
||||
});
|
||||
|
||||
// Random Value for street Pitch
|
||||
|
||||
$(".street-pitch").on("click", function(){
|
||||
map = GMaps.createPanorama({
|
||||
el: '#street-view',
|
||||
lat : 52.201272,
|
||||
lng: 0.118720,
|
||||
pov: { heading: 20, pitch: Math.random() * 180 - 90 }
|
||||
});
|
||||
});
|
||||
|
||||
// Random Value for both street heading and street pitch
|
||||
|
||||
$(".street-both").on("click", function(){
|
||||
map = GMaps.createPanorama({
|
||||
el: '#street-view',
|
||||
lat : 52.201272,
|
||||
lng: 0.118720,
|
||||
pov: { heading: Math.random() * 360, pitch: Math.random() * 180 - 90 }
|
||||
});
|
||||
});
|
||||
|
||||
});
|
||||
|
||||
83
public/vendor/dashboard/src/js/scripts/components.js
vendored
Executable file
83
public/vendor/dashboard/src/js/scripts/components.js
vendored
Executable file
@@ -0,0 +1,83 @@
|
||||
/*=========================================================================================
|
||||
File Name: Components.js
|
||||
Description: For Generic Components.
|
||||
----------------------------------------------------------------------------------------
|
||||
Item Name: Vuesax HTML Admin Template
|
||||
Version: 1.1
|
||||
Author: Pixinvent
|
||||
Author URL: http://www.themeforest.net/user/pixinvent
|
||||
==========================================================================================*/
|
||||
|
||||
(function (window, document, $) {
|
||||
/***** Component Variables *****/
|
||||
var alertValidationInput = $(".alert-validation"),
|
||||
alertRegex = /^[0-9]+$/,
|
||||
alertValidationMsg = $(".alert-validation-msg"),
|
||||
accordion = $(".accordion"),
|
||||
collapseTitle = $(".collapse-title"),
|
||||
collapseHoverTitle = $(".collapse-hover-title"),
|
||||
dropdownMenuIcon = $(".dropdown-icon-wrapper .dropdown-item");
|
||||
|
||||
/***** Alerts *****/
|
||||
/* validation with alert */
|
||||
alertValidationInput.on('input', function () {
|
||||
if (alertValidationInput.val().match(alertRegex)) {
|
||||
alertValidationMsg.css("display", "none");
|
||||
} else {
|
||||
alertValidationMsg.css("display", "block");
|
||||
}
|
||||
});
|
||||
|
||||
/***** Carousel *****/
|
||||
// For Carousel With Enabled Keyboard Controls
|
||||
$(document).on("keyup", function (e) {
|
||||
if (e.which == 39) {
|
||||
$('.carousel[data-keyboard="true"]').carousel('next');
|
||||
} else if (e.which == 37) {
|
||||
$('.carousel[data-keyboard="true"]').carousel('prev');
|
||||
}
|
||||
})
|
||||
|
||||
// To open Collapse on hover
|
||||
if (accordion.attr("data-toggle-hover", "true")) {
|
||||
collapseHoverTitle.closest(".card").on("mouseenter", function () {
|
||||
$(this).children(".collapse").collapse("show");
|
||||
});
|
||||
}
|
||||
// Accordion with Shadow - When Collapse open
|
||||
$('.accordion-shadow .collapse-header .card-header').on("click", function () {
|
||||
var $this = $(this);
|
||||
$this.parent().siblings(".collapse-header.open").removeClass("open");
|
||||
$this.parent(".collapse-header").toggleClass("open");
|
||||
});
|
||||
|
||||
/***** Dropdown *****/
|
||||
// For Dropdown With Icons
|
||||
dropdownMenuIcon.on("click", function () {
|
||||
$(".dropdown-icon-wrapper .dropdown-toggle i").remove();
|
||||
$(this).find("i").clone().appendTo(".dropdown-icon-wrapper .dropdown-toggle");
|
||||
$(".dropdown-icon-wrapper .dropdown-toggle .dropdown-item").removeClass("dropdown-item");
|
||||
});
|
||||
|
||||
|
||||
/***** Pagination *****/
|
||||
// For Pagination styles
|
||||
if ($(".pagination .page-item.prev-item").length > 0) {
|
||||
$(".pagination .page-item.prev-item").next(".page-item").find(".page-link").css({
|
||||
"border-top-left-radius": "20px",
|
||||
"border-bottom-left-radius": "20px"
|
||||
});
|
||||
}
|
||||
if ($(".pagination .page-item.next-item").length > 0) {
|
||||
$(".pagination .page-item.next-item").prev(".page-item").find(".page-link").css({
|
||||
"border-top-right-radius": "20px",
|
||||
"border-bottom-right-radius": "20px"
|
||||
});
|
||||
}
|
||||
|
||||
/***** Chips *****/
|
||||
// To close chips
|
||||
$('.chip-closeable').on('click', function () {
|
||||
$(this).closest('.chip').remove();
|
||||
})
|
||||
})(window, document, jQuery);
|
||||
241
public/vendor/dashboard/src/js/scripts/customizer.js
vendored
Executable file
241
public/vendor/dashboard/src/js/scripts/customizer.js
vendored
Executable file
@@ -0,0 +1,241 @@
|
||||
/*=========================================================================================
|
||||
File Name: customizer.js
|
||||
Description: Template customizer js.
|
||||
----------------------------------------------------------------------------------------
|
||||
Item Name: Vuesax HTML Admin Template
|
||||
Version: 1.1
|
||||
Author: Pixinvent
|
||||
Author URL: hhttp://www.themeforest.net/user/pixinvent
|
||||
==========================================================================================*/
|
||||
|
||||
(function (window, document, $) {
|
||||
'use strict';
|
||||
// main menu active gradient colors object
|
||||
var themeColor = {
|
||||
"theme-primary": "linear-gradient(118deg, #7367f0, rgba(115, 103, 240, 0.7))",
|
||||
"theme-success": "linear-gradient(118deg, #28c76f, rgba(40, 199, 111 , 0.7))",
|
||||
"theme-danger": "linear-gradient(118deg, #ea5455, rgba(234, 84, 85, 0.7))",
|
||||
"theme-info": "linear-gradient(118deg, #00cfe8, rgba(0, 207, 232, 0.7))",
|
||||
"theme-warning": "linear-gradient(118deg, #ff9f43, rgba(255, 159, 67, 0.7))",
|
||||
"theme-dark": "linear-gradient(118deg, #1e1e1e, rgba(30, 30, 30, 0.7))"
|
||||
}
|
||||
// main menu active box shadow object
|
||||
var themeBoxShadow = {
|
||||
"theme-primary": "0 0 10px 1px rgba(115, 103, 240, 0.7)",
|
||||
"theme-success": "0 0 10px 1px rgba(40, 199, 111 , 0.7)",
|
||||
"theme-danger": "0 0 10px 1px rgba(234, 84, 85, 0.7)",
|
||||
"theme-info": "0 0 10px 1px rgba(0, 207, 232, 0.7)",
|
||||
"theme-warning": "0 0 10px 1px rgba(255, 159, 67, 0.7)",
|
||||
"theme-dark": "0 0 10px 1px rgba(30, 30, 30, 0.7)"
|
||||
}
|
||||
// colors for navbar header text of main menu
|
||||
var currentColor = {
|
||||
"theme-default": "#fff",
|
||||
"theme-primary": "#7367f0",
|
||||
"theme-success": "#28c76f",
|
||||
"theme-danger": "#ea5455",
|
||||
"theme-info": "#00cfe8",
|
||||
"theme-warning": "#ff9f43",
|
||||
"theme-dark": "#adb5bd"
|
||||
}
|
||||
// Brand Logo Poisitons
|
||||
var LogoPosition = {
|
||||
"theme-primary": "-65px -54px",
|
||||
"theme-success": "-120px -10px",
|
||||
"theme-danger": "-10px -10px",
|
||||
"theme-info": "-10px -54px",
|
||||
"theme-warning": "-120px -54px",
|
||||
"theme-dark": "-65px -10px"
|
||||
}
|
||||
|
||||
var body = $("body"),
|
||||
appContent = $(".app-content"),
|
||||
mainMenu = $(".main-menu"),
|
||||
mainMenuContent = $(".menu-content"),
|
||||
menuCollapsed = $(".menu-collapsed"),
|
||||
menuExpanded = $(".menu-expanded"),
|
||||
footer = $(".footer"),
|
||||
navbar = $(".header-navbar"),
|
||||
navBarShadow = $(".header-navbar-shadow"),
|
||||
toggleIcon = $(".toggle-icon"),
|
||||
collapseSidebar = $("#collapse-sidebar-switch"),
|
||||
customizer = $(".customizer"),
|
||||
brandLogo = $(".brand-logo");
|
||||
|
||||
// Customizer toggle & close button click events [Remove customizer code from production]
|
||||
$('.customizer-toggle').on('click', function (e) {
|
||||
e.preventDefault();
|
||||
$(customizer).toggleClass('open');
|
||||
});
|
||||
$('.customizer-close').on('click', function () {
|
||||
$(customizer).removeClass('open');
|
||||
});
|
||||
|
||||
// perfect scrollbar for customizer
|
||||
if ($('.customizer-content').length > 0) {
|
||||
var customizer_content = new PerfectScrollbar('.customizer-content');
|
||||
}
|
||||
|
||||
/***** Theme Colors Options *****/
|
||||
$(document).on("click", "#customizer-theme-colors .color-box", function () {
|
||||
var $this = $(this);
|
||||
$this.siblings().removeClass('selected');
|
||||
$this.addClass("selected");
|
||||
var selectedColor = $(this).data("color"),
|
||||
changeColor = themeColor[selectedColor],
|
||||
selectedShadow = themeBoxShadow[selectedColor],
|
||||
selectedTextColor = currentColor[selectedColor],
|
||||
selectedLogo = LogoPosition[selectedColor];
|
||||
|
||||
// main-menu
|
||||
if (mainMenuContent.find("li.active").length) {
|
||||
mainMenuContent.find("li.active").css(
|
||||
{
|
||||
"background": changeColor,
|
||||
"box-shadow": selectedShadow
|
||||
}
|
||||
);
|
||||
|
||||
}
|
||||
else {
|
||||
mainMenu.find(".nav-item.active a").css(
|
||||
{
|
||||
"background": changeColor,
|
||||
"box-shadow": selectedShadow
|
||||
}
|
||||
);
|
||||
}
|
||||
// Text with logo
|
||||
$(".brand-text").css("color", selectedTextColor);
|
||||
// toggle icon
|
||||
toggleIcon.removeClass("primary").css("color", selectedTextColor);
|
||||
// Changes logo color
|
||||
brandLogo.css("background-position", selectedLogo);
|
||||
});
|
||||
|
||||
/***** Theme Layout Options *****/
|
||||
$(".layout-name").on("click", function () {
|
||||
var $this = $(this);
|
||||
var currentLayout = $this.data("layout");
|
||||
body.removeClass("dark-layout semi-dark-layout").addClass(currentLayout);
|
||||
if (currentLayout === "") {
|
||||
mainMenu.removeClass("menu-dark").addClass("menu-light");
|
||||
navbar.removeClass("navbar-dark").addClass("navbar-light");
|
||||
}
|
||||
})
|
||||
|
||||
// checks right radio if layout type matches
|
||||
var layout = body.data("layout");
|
||||
$(".layout-name[data-layout='" + layout + "']").prop('checked', true);
|
||||
|
||||
/***** Collapse menu switch *****/
|
||||
collapseSidebar.on("click", function () {
|
||||
if ($(body).hasClass("menu-expanded")) {
|
||||
body.removeClass("menu-expanded").addClass("menu-collapsed");
|
||||
mainMenu.find(".sidebar-group-active").removeClass("open").addClass("menu-collapsed-open");
|
||||
toggleIcon.removeClass("feather icon-disc").addClass("feather icon-circle");
|
||||
|
||||
}
|
||||
else {
|
||||
body.removeClass("menu-collapsed").addClass("menu-expanded");
|
||||
mainMenu.find(".sidebar-group-active").addClass("open");
|
||||
toggleIcon.removeClass("feather icon-circle").addClass("feather icon-disc");
|
||||
}
|
||||
})
|
||||
// connects toggle icon with collapse sidebar switch
|
||||
toggleIcon.on("click", function () {
|
||||
collapseSidebar.prop("checked", !collapseSidebar.prop("checked"));
|
||||
})
|
||||
|
||||
// checks if main menu is collapsed by default
|
||||
if (body.hasClass("menu-collapsed")) {
|
||||
collapseSidebar.prop("checked", true);
|
||||
}
|
||||
else {
|
||||
collapseSidebar.prop("checked", false);
|
||||
}
|
||||
|
||||
/***** Navbar Color Options *****/
|
||||
$("#customizer-navbar-colors .color-box").on("click", function () {
|
||||
var $this = $(this);
|
||||
$this.siblings().removeClass('selected');
|
||||
$this.addClass("selected");
|
||||
var navbarColor = $this.data("navbar-color");
|
||||
// changes navbar colors
|
||||
if (navbarColor) {
|
||||
appContent
|
||||
.find(navbar)
|
||||
.removeClass("bg-primary bg-success bg-danger bg-info bg-warning bg-dark")
|
||||
.addClass(navbarColor + " navbar-dark");
|
||||
}
|
||||
else {
|
||||
appContent
|
||||
.find(navbar)
|
||||
.removeClass("bg-primary bg-success bg-danger bg-info bg-warning bg-dark navbar-dark");
|
||||
}
|
||||
if (body.hasClass("dark-layout")) {
|
||||
navbar.addClass("navbar-dark")
|
||||
}
|
||||
})
|
||||
|
||||
/***** Navbar Type *****/
|
||||
// Hides Navbar
|
||||
$("#navbar-hidden").on("click", function () {
|
||||
navbar.addClass("d-none");
|
||||
navBarShadow.addClass("d-none");
|
||||
body.removeClass("navbar-static navbar-floating navbar-sticky").addClass("navbar-hidden");
|
||||
});
|
||||
// changes to Static navbar
|
||||
$("#navbar-static").on("click", function () {
|
||||
navBarShadow.addClass("d-none");
|
||||
navbar
|
||||
.removeClass("d-none floating-nav fixed-top")
|
||||
.addClass("navbar-static-top");
|
||||
body.removeClass("navbar-hidden navbar-floating navbar-sticky").addClass("navbar-static");
|
||||
});
|
||||
// change to floating navbar
|
||||
$("#navbar-floating").on("click", function () {
|
||||
navBarShadow.removeClass("d-none");
|
||||
navbar
|
||||
.removeClass("d-none fixed-top navbar-static-top fixed-top")
|
||||
.addClass("floating-nav");
|
||||
body.removeClass("navbar-static navbar-hidden navbar-sticky").addClass("navbar-floating");
|
||||
});
|
||||
// changes to Static navbar
|
||||
$("#navbar-sticky").on("click", function () {
|
||||
navBarShadow.addClass("d-none");
|
||||
navbar
|
||||
.removeClass("d-none floating-nav navbar-static-top")
|
||||
.addClass("fixed-top");
|
||||
body.removeClass("navbar-static navbar-floating navbar-hidden").addClass("navbar-sticky");
|
||||
});
|
||||
|
||||
/***** Footer Type *****/
|
||||
// Hides footer
|
||||
$("#footer-hidden").on("click", function () {
|
||||
footer.addClass("d-none");
|
||||
body.removeClass("footer-static fixed-footer").addClass("footer-hidden");
|
||||
});
|
||||
// changes to Static footer
|
||||
$("#footer-static").on("click", function () {
|
||||
body.removeClass("fixed-footer");
|
||||
footer.removeClass("d-none").addClass("footer-static");
|
||||
body.removeClass("footer-hidden fixed-footer").addClass("footer-static");
|
||||
});
|
||||
// changes to Sticky footer
|
||||
$("#footer-sticky").on("click", function () {
|
||||
body.removeClass("footer-static fixed-hidden").addClass("fixed-footer");
|
||||
footer.removeClass("d-none footer-static");
|
||||
});
|
||||
|
||||
/***** Hide Scroll To Top *****/
|
||||
$("#hide-scroll-top-switch").on("click", function () {
|
||||
var scrollTopBtn = $(".scroll-top")
|
||||
if ($(this).prop("checked")) {
|
||||
scrollTopBtn.addClass("d-none");
|
||||
}
|
||||
else {
|
||||
scrollTopBtn.removeClass("d-none");
|
||||
}
|
||||
});
|
||||
})(window, document, jQuery);
|
||||
141
public/vendor/dashboard/src/js/scripts/datatables/datatable.js
vendored
Executable file
141
public/vendor/dashboard/src/js/scripts/datatables/datatable.js
vendored
Executable file
@@ -0,0 +1,141 @@
|
||||
/*=========================================================================================
|
||||
File Name: datatables-basic.js
|
||||
Description: Basic Datatable
|
||||
----------------------------------------------------------------------------------------
|
||||
Item Name: Vuesax HTML Admin Template
|
||||
Version: 1.1
|
||||
Author: PIXINVENT
|
||||
Author URL: http://www.themeforest.net/user/pixinvent
|
||||
==========================================================================================*/
|
||||
|
||||
$(document).ready(function() {
|
||||
|
||||
/****************************************
|
||||
* js of zero configuration *
|
||||
****************************************/
|
||||
|
||||
$('.zero-configuration').DataTable();
|
||||
|
||||
/********************************************
|
||||
* js of Order by the grouping *
|
||||
********************************************/
|
||||
|
||||
var groupingTable = $('.row-grouping').DataTable({
|
||||
"columnDefs": [{
|
||||
"visible": false,
|
||||
"targets": 2
|
||||
}],
|
||||
"order": [
|
||||
[2, 'asc']
|
||||
],
|
||||
"displayLength": 10,
|
||||
"drawCallback": function(settings) {
|
||||
var api = this.api();
|
||||
var rows = api.rows({
|
||||
page: 'current'
|
||||
}).nodes();
|
||||
var last = null;
|
||||
|
||||
api.column(2, {
|
||||
page: 'current'
|
||||
}).data().each(function(group, i) {
|
||||
if (last !== group) {
|
||||
$(rows).eq(i).before(
|
||||
'<tr class="group"><td colspan="5">' + group + '</td></tr>'
|
||||
);
|
||||
|
||||
last = group;
|
||||
}
|
||||
});
|
||||
}
|
||||
});
|
||||
|
||||
$('.row-grouping tbody').on('click', 'tr.group', function() {
|
||||
var currentOrder = groupingTable.order()[0];
|
||||
if (currentOrder[0] === 2 && currentOrder[1] === 'asc') {
|
||||
groupingTable.order([2, 'desc']).draw();
|
||||
}
|
||||
else {
|
||||
groupingTable.order([2, 'asc']).draw();
|
||||
}
|
||||
});
|
||||
|
||||
/*************************************
|
||||
* js of complex headers *
|
||||
*************************************/
|
||||
|
||||
$('.complex-headers').DataTable();
|
||||
|
||||
|
||||
/*****************************
|
||||
* js of Add Row *
|
||||
******************************/
|
||||
|
||||
var t = $('.add-rows').DataTable();
|
||||
var counter = 2;
|
||||
|
||||
$('#addRow').on( 'click', function () {
|
||||
t.row.add( [
|
||||
counter +'.1',
|
||||
counter +'.2',
|
||||
counter +'.3',
|
||||
counter +'.4',
|
||||
counter +'.5'
|
||||
] ).draw( false );
|
||||
|
||||
counter++;
|
||||
});
|
||||
|
||||
|
||||
/**************************************************************
|
||||
* js of Tab for COLUMN SELECTORS WITH EXPORT AND PRINT OPTIONS *
|
||||
***************************************************************/
|
||||
|
||||
$('.dataex-html5-selectors').DataTable( {
|
||||
dom: 'Bfrtip',
|
||||
buttons: [
|
||||
{
|
||||
extend: 'copyHtml5',
|
||||
exportOptions: {
|
||||
columns: [ 0, ':visible' ]
|
||||
}
|
||||
},
|
||||
{
|
||||
extend: 'pdfHtml5',
|
||||
exportOptions: {
|
||||
columns: ':visible'
|
||||
}
|
||||
},
|
||||
{
|
||||
text: 'JSON',
|
||||
action: function ( e, dt, button, config ) {
|
||||
var data = dt.buttons.exportData();
|
||||
|
||||
$.fn.dataTable.fileSave(
|
||||
new Blob( [ JSON.stringify( data ) ] ),
|
||||
'Export.json'
|
||||
);
|
||||
}
|
||||
},
|
||||
{
|
||||
extend: 'print',
|
||||
exportOptions: {
|
||||
columns: ':visible'
|
||||
}
|
||||
}
|
||||
]
|
||||
});
|
||||
|
||||
/**************************************************
|
||||
* js of scroll horizontal & vertical *
|
||||
**************************************************/
|
||||
|
||||
$('.scroll-horizontal-vertical').DataTable( {
|
||||
"scrollY": 200,
|
||||
"scrollX": true
|
||||
});
|
||||
|
||||
|
||||
|
||||
|
||||
});
|
||||
48
public/vendor/dashboard/src/js/scripts/datatables/user-datatable.js
vendored
Executable file
48
public/vendor/dashboard/src/js/scripts/datatables/user-datatable.js
vendored
Executable file
@@ -0,0 +1,48 @@
|
||||
/*=========================================================================================
|
||||
File Name: user-datatable.js
|
||||
Description: User Datatable
|
||||
----------------------------------------------------------------------------------------
|
||||
Item Name: Vuesax HTML Admin Template
|
||||
Version: 1.1
|
||||
Author: PIXINVENT
|
||||
Author URL: http://www.themeforest.net/user/pixinvent
|
||||
==========================================================================================*/
|
||||
|
||||
$(document).ready(function() {
|
||||
|
||||
/************************************************
|
||||
* js of select checkbox and Length *
|
||||
************************************************/
|
||||
|
||||
$('#check-slct').DataTable( {
|
||||
columnDefs: [ {
|
||||
orderable: false,
|
||||
className: 'select-checkbox',
|
||||
targets: 0
|
||||
} ],
|
||||
select: {
|
||||
style: 'os',
|
||||
selector: 'td:first-child'
|
||||
},
|
||||
order: [[ 1, 'asc' ]],
|
||||
|
||||
"lengthMenu": [[5, 25, 50, -1], [5, 25, 50, "All"]],
|
||||
|
||||
/**************************************
|
||||
* js of Search Placeholder *
|
||||
***************************************/
|
||||
|
||||
language: {
|
||||
search: "_INPUT_",
|
||||
"search": '<i class="fa fa-search"></i>',
|
||||
"searchPlaceholder": "search",
|
||||
}
|
||||
|
||||
|
||||
} );
|
||||
|
||||
|
||||
|
||||
|
||||
} );
|
||||
|
||||
13
public/vendor/dashboard/src/js/scripts/documentation.js
vendored
Executable file
13
public/vendor/dashboard/src/js/scripts/documentation.js
vendored
Executable file
@@ -0,0 +1,13 @@
|
||||
/*=========================================================================================
|
||||
File Name: documentation.js
|
||||
Description: Theme documentation js file
|
||||
----------------------------------------------------------------------------------------
|
||||
Item Name: Vuesax HTML Admin Template
|
||||
Version: 1.1
|
||||
Author: PIXINVENT
|
||||
Author URL: http://www.themeforest.net/user/pixinvent
|
||||
==========================================================================================*/
|
||||
|
||||
$(document).ready(function(){
|
||||
$('body').scrollspy({ target: '#sidebar-page-navigation' });
|
||||
});
|
||||
90
public/vendor/dashboard/src/js/scripts/editors/editor-quill.js
vendored
Executable file
90
public/vendor/dashboard/src/js/scripts/editors/editor-quill.js
vendored
Executable file
@@ -0,0 +1,90 @@
|
||||
/*=========================================================================================
|
||||
File Name: editor-quill.js
|
||||
Description: Quill is a modern rich text editor built for compatibility and extensibility.
|
||||
----------------------------------------------------------------------------------------
|
||||
Item Name: Vuesax HTML Admin Template
|
||||
Version: 1.1
|
||||
Author: GeeksLabs
|
||||
Author URL: http://www.themeforest.net/user/geekslabs
|
||||
==========================================================================================*/
|
||||
(function (window, document, $) {
|
||||
'use strict';
|
||||
|
||||
var Font = Quill.import('formats/font');
|
||||
Font.whitelist = ['sofia', 'slabo', 'roboto', 'inconsolata', 'ubuntu'];
|
||||
Quill.register(Font, true);
|
||||
|
||||
// Bubble Editor
|
||||
|
||||
var bubbleEditor = new Quill('#bubble-container .editor', {
|
||||
bounds: '#bubble-container .editor',
|
||||
modules: {
|
||||
'formula': true,
|
||||
'syntax': true
|
||||
},
|
||||
theme: 'bubble'
|
||||
});
|
||||
|
||||
// Snow Editor
|
||||
|
||||
var snowEditor = new Quill('#snow-container .editor', {
|
||||
bounds: '#snow-container .editor',
|
||||
modules: {
|
||||
'formula': true,
|
||||
'syntax': true,
|
||||
'toolbar': '#snow-container .quill-toolbar'
|
||||
},
|
||||
theme: 'snow'
|
||||
});
|
||||
|
||||
// Full Editor
|
||||
|
||||
var fullEditor = new Quill('#full-container .editor', {
|
||||
bounds: '#full-container .editor',
|
||||
modules: {
|
||||
'formula': true,
|
||||
'syntax': true,
|
||||
'toolbar': [
|
||||
[{
|
||||
'font': []
|
||||
}, {
|
||||
'size': []
|
||||
}],
|
||||
['bold', 'italic', 'underline', 'strike'],
|
||||
[{
|
||||
'color': []
|
||||
}, {
|
||||
'background': []
|
||||
}],
|
||||
[{
|
||||
'script': 'super'
|
||||
}, {
|
||||
'script': 'sub'
|
||||
}],
|
||||
[{
|
||||
'header': '1'
|
||||
}, {
|
||||
'header': '2'
|
||||
}, 'blockquote', 'code-block'],
|
||||
[{
|
||||
'list': 'ordered'
|
||||
}, {
|
||||
'list': 'bullet'
|
||||
}, {
|
||||
'indent': '-1'
|
||||
}, {
|
||||
'indent': '+1'
|
||||
}],
|
||||
['direction', {
|
||||
'align': []
|
||||
}],
|
||||
['link', 'image', 'video', 'formula'],
|
||||
['clean']
|
||||
],
|
||||
},
|
||||
theme: 'snow'
|
||||
});
|
||||
|
||||
var editors = [bubbleEditor, snowEditor, fullEditor];
|
||||
|
||||
})(window, document, jQuery);
|
||||
12
public/vendor/dashboard/src/js/scripts/extensions/const-plyr.js
vendored
Executable file
12
public/vendor/dashboard/src/js/scripts/extensions/const-plyr.js
vendored
Executable file
@@ -0,0 +1,12 @@
|
||||
/*=========================================================================================
|
||||
File Name: const-plyr.js
|
||||
Description: Media Player
|
||||
--------------------------------------------------------------------------------------
|
||||
Item Name: Vuesax HTML Admin Template
|
||||
Version: 1.1
|
||||
Author: PIXINVENT
|
||||
Author URL: http://www.themeforest.net/user/pixinvent
|
||||
==========================================================================================*/
|
||||
|
||||
// Media Player
|
||||
var player = new Plyr('#player');
|
||||
79
public/vendor/dashboard/src/js/scripts/extensions/context-menu.js
vendored
Executable file
79
public/vendor/dashboard/src/js/scripts/extensions/context-menu.js
vendored
Executable file
@@ -0,0 +1,79 @@
|
||||
/*=========================================================================================
|
||||
File Name: context-menu.js
|
||||
Description: Context Menu
|
||||
--------------------------------------------------------------------------------------
|
||||
Item Name: Vuesax HTML Admin Template
|
||||
Version: 1.1
|
||||
Author: PIXINVENT
|
||||
Author URL: http://www.themeforest.net/user/pixinvent
|
||||
==========================================================================================*/
|
||||
|
||||
// Basic Context Menu
|
||||
$.contextMenu({
|
||||
selector: "#basic-context-menu",
|
||||
callback: function (key, options) {
|
||||
var r = "clicked " + key;
|
||||
window.console && toastr.success(r);
|
||||
},
|
||||
items: {
|
||||
"Option 1": { name: "Option 1" },
|
||||
"Option 2": { name: "Option 2" },
|
||||
}
|
||||
})
|
||||
|
||||
// Left Click Trigger
|
||||
$.contextMenu({
|
||||
selector: '#left-click-context-menu',
|
||||
trigger: "left",
|
||||
callback: function (key, options) {
|
||||
var r = "clicked " + key
|
||||
window.console && toastr.success(r);
|
||||
},
|
||||
items: {
|
||||
"Option 1": { name: "Option 1" },
|
||||
"Option 2": { name: "Option 2" },
|
||||
}
|
||||
});
|
||||
|
||||
// Hover Trigger
|
||||
$.contextMenu({
|
||||
selector: '#hover-context-menu',
|
||||
trigger: 'hover',
|
||||
autoHide: true,
|
||||
callback: function (key, options) {
|
||||
var r = "clicked " + key
|
||||
window.console && toastr.success(r);
|
||||
},
|
||||
items: {
|
||||
"Option 1": { name: "Option 1" },
|
||||
"Option 2": { name: "Option 2" },
|
||||
}
|
||||
});
|
||||
|
||||
|
||||
// Submenu
|
||||
$.contextMenu({
|
||||
selector: '#submenu-context-menu',
|
||||
callback: function (key, options) {
|
||||
var r = "clicked " + key
|
||||
window.console && toastr.success(r);
|
||||
},
|
||||
items: {
|
||||
"Option 1": { name: "Option 1" },
|
||||
"name": { name: "Option 2" },
|
||||
"fold1": {
|
||||
"name": "Sub Group",
|
||||
"items": {
|
||||
"Foo Bar": { "name": "Foo bar" },
|
||||
"fold1a": {
|
||||
"name": "Other group",
|
||||
"items": {
|
||||
"Echo": { "name": "echo" },
|
||||
"Foxtrot": { "name": "foxtrot" },
|
||||
"Golf": { "name": "golf" }
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
})
|
||||
18
public/vendor/dashboard/src/js/scripts/extensions/copy-to-clipboard.js
vendored
Executable file
18
public/vendor/dashboard/src/js/scripts/extensions/copy-to-clipboard.js
vendored
Executable file
@@ -0,0 +1,18 @@
|
||||
/*=========================================================================================
|
||||
File Name: copy-to-clipboard.js
|
||||
Description: Copy to clipboard
|
||||
--------------------------------------------------------------------------------------
|
||||
Item Name: Vuesax HTML Admin Template
|
||||
Version: 1.1
|
||||
Author: PIXINVENT
|
||||
Author URL: http://www.themeforest.net/user/pixinvent
|
||||
==========================================================================================*/
|
||||
|
||||
var userText = $("#copy-to-clipboard-input");
|
||||
var btnCopy = $("#btn-copy");
|
||||
|
||||
// copy text on click
|
||||
btnCopy.on("click", function () {
|
||||
userText.select();
|
||||
document.execCommand("copy");
|
||||
})
|
||||
34
public/vendor/dashboard/src/js/scripts/extensions/drag-drop.js
vendored
Executable file
34
public/vendor/dashboard/src/js/scripts/extensions/drag-drop.js
vendored
Executable file
@@ -0,0 +1,34 @@
|
||||
/*=========================================================================================
|
||||
File Name: drag-drop.js
|
||||
Description: drag & drop elements using dragula js
|
||||
--------------------------------------------------------------------------------------
|
||||
Item Name: Vuesax HTML Admin Template
|
||||
Version: 1.1
|
||||
Author: PIXINVENT
|
||||
Author URL: http://www.themeforest.net/user/pixinvent
|
||||
==========================================================================================*/
|
||||
|
||||
|
||||
$(document).ready(function () {
|
||||
|
||||
// Draggable Cards
|
||||
dragula([document.getElementById('card-drag-area')]);
|
||||
|
||||
// Sortable Lists
|
||||
dragula([document.getElementById('basic-list-group')]);
|
||||
dragula([document.getElementById('multiple-list-group-a'), document.getElementById('multiple-list-group-b')]);
|
||||
|
||||
// Cloning
|
||||
dragula([document.getElementById('chips-list-1'), document.getElementById('chips-list-2')], {
|
||||
copy: true
|
||||
});
|
||||
|
||||
// With Handles
|
||||
|
||||
dragula([document.getElementById("handle-list-1"), document.getElementById("handle-list-2")], {
|
||||
moves: function (el, container, handle) {
|
||||
return handle.classList.contains('handle');
|
||||
}
|
||||
});
|
||||
|
||||
});
|
||||
92
public/vendor/dashboard/src/js/scripts/extensions/dropzone.js
vendored
Executable file
92
public/vendor/dashboard/src/js/scripts/extensions/dropzone.js
vendored
Executable file
@@ -0,0 +1,92 @@
|
||||
/*=========================================================================================
|
||||
File Name: dropzone.js
|
||||
Description: dropzone
|
||||
--------------------------------------------------------------------------------------
|
||||
Item Name: Vuesax HTML Admin Template
|
||||
Version: 1.1
|
||||
Author: PIXINVENT
|
||||
Author URL: http://www.themeforest.net/user/pixinvent
|
||||
==========================================================================================*/
|
||||
|
||||
Dropzone.options.dpzSingleFile = {
|
||||
paramName: "file", // The name that will be used to transfer the file
|
||||
maxFiles: 1,
|
||||
init: function () {
|
||||
this.on("maxfilesexceeded", function (file) {
|
||||
this.removeAllFiles();
|
||||
this.addFile(file);
|
||||
});
|
||||
}
|
||||
};
|
||||
|
||||
/********************************************
|
||||
* Multiple Files *
|
||||
********************************************/
|
||||
Dropzone.options.dpzMultipleFiles = {
|
||||
paramName: "file", // The name that will be used to transfer the file
|
||||
maxFilesize: 0.5, // MB
|
||||
clickable: true
|
||||
}
|
||||
|
||||
|
||||
/********************************************************
|
||||
* Use Button To Select Files *
|
||||
********************************************************/
|
||||
new Dropzone(document.body, { // Make the whole body a dropzone
|
||||
url: "#", // Set the url
|
||||
previewsContainer: "#dpz-btn-select-files", // Define the container to display the previews
|
||||
clickable: "#select-files" // Define the element that should be used as click trigger to select files.
|
||||
});
|
||||
|
||||
|
||||
/****************************************************************
|
||||
* Limit File Size and No. Of Files *
|
||||
****************************************************************/
|
||||
Dropzone.options.dpzFileLimits = {
|
||||
paramName: "file", // The name that will be used to transfer the file
|
||||
maxFilesize: 0.5, // MB
|
||||
maxFiles: 5,
|
||||
maxThumbnailFilesize: 1, // MB
|
||||
}
|
||||
|
||||
|
||||
/********************************************
|
||||
* Accepted Files *
|
||||
********************************************/
|
||||
Dropzone.options.dpAcceptFiles = {
|
||||
paramName: "file", // The name that will be used to transfer the file
|
||||
maxFilesize: 1, // MB
|
||||
acceptedFiles: 'image/*'
|
||||
}
|
||||
|
||||
|
||||
/************************************************
|
||||
* Remove Thumbnail *
|
||||
************************************************/
|
||||
Dropzone.options.dpzRemoveThumb = {
|
||||
paramName: "file", // The name that will be used to transfer the file
|
||||
maxFilesize: 1, // MB
|
||||
addRemoveLinks: true,
|
||||
dictRemoveFile: " Trash"
|
||||
}
|
||||
|
||||
/*****************************************************
|
||||
* Remove All Thumbnails *
|
||||
*****************************************************/
|
||||
Dropzone.options.dpzRemoveAllThumb = {
|
||||
paramName: "file", // The name that will be used to transfer the file
|
||||
maxFilesize: 1, // MB
|
||||
init: function () {
|
||||
|
||||
// Using a closure.
|
||||
var _this = this;
|
||||
|
||||
// Setup the observer for the button.
|
||||
$("#clear-dropzone").on("click", function () {
|
||||
// Using "_this" here, because "this" doesn't point to the dropzone anymore
|
||||
_this.removeAllFiles();
|
||||
// If you want to cancel uploads as well, you
|
||||
// could also call _this.removeAllFiles(true);
|
||||
});
|
||||
}
|
||||
}
|
||||
195
public/vendor/dashboard/src/js/scripts/extensions/fullcalendar.js
vendored
Executable file
195
public/vendor/dashboard/src/js/scripts/extensions/fullcalendar.js
vendored
Executable file
@@ -0,0 +1,195 @@
|
||||
/*=========================================================================================
|
||||
File Name: fullcalendar.js
|
||||
Description: Fullcalendar
|
||||
--------------------------------------------------------------------------------------
|
||||
Item Name: Vuesax HTML Admin Template
|
||||
Version: 1.1
|
||||
Author: PIXINVENT
|
||||
Author URL: http://www.themeforest.net/user/pixinvent
|
||||
==========================================================================================*/
|
||||
|
||||
document.addEventListener('DOMContentLoaded', function () {
|
||||
|
||||
// color object for different event types
|
||||
var colors = {
|
||||
primary: "#7367f0",
|
||||
success: "#28c76f",
|
||||
danger: "#ea5455",
|
||||
warning: "#ff9f43"
|
||||
};
|
||||
|
||||
// chip text object for different event types
|
||||
var categoryText = {
|
||||
primary: "Others",
|
||||
success: "Business",
|
||||
danger: "Personal",
|
||||
warning: "Work"
|
||||
};
|
||||
var categoryBullets = $(".cal-category-bullets").html(),
|
||||
evtColor = "",
|
||||
eventColor = "";
|
||||
|
||||
// calendar init
|
||||
var calendarEl = document.getElementById('fc-default');
|
||||
|
||||
var calendar = new FullCalendar.Calendar(calendarEl, {
|
||||
plugins: ["dayGrid", "timeGrid", "interaction"],
|
||||
customButtons: {
|
||||
addNew: {
|
||||
text: ' Add',
|
||||
click: function () {
|
||||
var calDate = new Date,
|
||||
todaysDate = calDate.toISOString().slice(0, 10);
|
||||
$(".modal-calendar").modal("show");
|
||||
$(".modal-calendar .cal-submit-event").addClass("d-none");
|
||||
$(".modal-calendar .remove-event").addClass("d-none");
|
||||
$(".modal-calendar .cal-add-event").removeClass("d-none")
|
||||
$(".modal-calendar .cancel-event").removeClass("d-none")
|
||||
$(".modal-calendar .add-category .chip").remove();
|
||||
$("#cal-start-date").val(todaysDate);
|
||||
$("#cal-end-date").val(todaysDate);
|
||||
$(".modal-calendar #cal-start-date").attr("disabled", false);
|
||||
}
|
||||
}
|
||||
},
|
||||
header: {
|
||||
left: "",
|
||||
center: " prev,title,next",
|
||||
right: "dayGridMonth timeGridWeek timeGridDay addNew"
|
||||
},
|
||||
displayEventTime: false,
|
||||
navLinks: true,
|
||||
editable: true,
|
||||
allDay: true,
|
||||
navLinkDayClick: function (date) {
|
||||
$(".modal-calendar").modal("show");
|
||||
},
|
||||
dateClick: function (info) {
|
||||
$(".modal-calendar #cal-start-date").val(info.dateStr).attr("disabled", true);
|
||||
$(".modal-calendar #cal-end-date").val(info.dateStr);
|
||||
},
|
||||
// displays saved event values on click
|
||||
eventClick: function (info) {
|
||||
$(".modal-calendar").modal("show");
|
||||
$(".modal-calendar #cal-event-title").val(info.event.title);
|
||||
$(".modal-calendar #cal-start-date").val(moment(info.event.start).format('YYYY-MM-DD'));
|
||||
$(".modal-calendar #cal-end-date").val(moment(info.event.end).format('YYYY-MM-DD'));
|
||||
$(".modal-calendar #cal-description").val(info.event.extendedProps.description);
|
||||
$(".modal-calendar .cal-submit-event").removeClass("d-none");
|
||||
$(".modal-calendar .remove-event").removeClass("d-none");
|
||||
$(".modal-calendar .cal-add-event").addClass("d-none");
|
||||
$(".modal-calendar .cancel-event").addClass("d-none");
|
||||
$(".calendar-dropdown .dropdown-menu").find(".selected").removeClass("selected");
|
||||
var eventCategory = info.event.extendedProps.dataEventColor;
|
||||
var eventText = categoryText[eventCategory]
|
||||
$(".modal-calendar .chip-wrapper .chip").remove();
|
||||
$(".modal-calendar .chip-wrapper").append($("<div class='chip chip-" + eventCategory + "'>" +
|
||||
"<div class='chip-body'>" +
|
||||
"<span class='chip-text'> " + eventText + " </span>" +
|
||||
"</div>" +
|
||||
"</div>"));
|
||||
},
|
||||
});
|
||||
|
||||
// render calendar
|
||||
calendar.render();
|
||||
|
||||
// appends bullets to left class of header
|
||||
$("#basic-examples .fc-left").append(categoryBullets);
|
||||
|
||||
// Close modal on submit button
|
||||
$(".modal-calendar .cal-submit-event").on("click", function () {
|
||||
$(".modal-calendar").modal("hide");
|
||||
});
|
||||
|
||||
// Remove Event
|
||||
$(".remove-event").on("click", function () {
|
||||
var removeEvent = calendar.getEventById('newEvent');
|
||||
removeEvent.remove();
|
||||
});
|
||||
|
||||
|
||||
// reset input element's value for new event
|
||||
if ($("td:not(.fc-event-container)").length > 0) {
|
||||
$(".modal-calendar").on('hidden.bs.modal', function (e) {
|
||||
$('.modal-calendar .form-control').val('');
|
||||
})
|
||||
}
|
||||
|
||||
// remove disabled attr from button after entering info
|
||||
$(".modal-calendar .form-control").on("keyup", function () {
|
||||
if ($(".modal-calendar #cal-event-title").val().length >= 1) {
|
||||
$(".modal-calendar .modal-footer .btn").removeAttr("disabled");
|
||||
}
|
||||
else {
|
||||
$(".modal-calendar .modal-footer .btn").attr("disabled", true);
|
||||
}
|
||||
});
|
||||
|
||||
// open add event modal on click of day
|
||||
$(document).on("click", ".fc-day", function () {
|
||||
$(".modal-calendar").modal("show");
|
||||
$(".calendar-dropdown .dropdown-menu").find(".selected").removeClass("selected");
|
||||
$(".modal-calendar .cal-submit-event").addClass("d-none");
|
||||
$(".modal-calendar .remove-event").addClass("d-none");
|
||||
$(".modal-calendar .cal-add-event").removeClass("d-none");
|
||||
$(".modal-calendar .cancel-event").removeClass("d-none");
|
||||
$(".modal-calendar .add-category .chip").remove();
|
||||
$(".modal-calendar .modal-footer .btn").attr("disabled", true);
|
||||
evtColor = colors.primary;
|
||||
eventColor = "primary";
|
||||
});
|
||||
|
||||
// change chip's and event's color according to event type
|
||||
$(".calendar-dropdown .dropdown-menu .dropdown-item").on("click", function () {
|
||||
var selectedColor = $(this).data("color");
|
||||
evtColor = colors[selectedColor];
|
||||
eventTag = categoryText[selectedColor];
|
||||
eventColor = selectedColor;
|
||||
|
||||
// changes event color after selecting category
|
||||
$(".cal-add-event").on("click", function () {
|
||||
calendar.addEvent({
|
||||
color: evtColor,
|
||||
dataEventColor: eventColor,
|
||||
className: eventColor
|
||||
});
|
||||
})
|
||||
|
||||
$(".calendar-dropdown .dropdown-menu").find(".selected").removeClass("selected");
|
||||
$(this).addClass("selected");
|
||||
|
||||
// add chip according to category
|
||||
$(".modal-calendar .chip-wrapper .chip").remove();
|
||||
$(".modal-calendar .chip-wrapper").append($("<div class='chip chip-" + selectedColor + "'>" +
|
||||
"<div class='chip-body'>" +
|
||||
"<span class='chip-text'> " + eventTag + " </span>" +
|
||||
"</div>" +
|
||||
"</div>"));
|
||||
});
|
||||
|
||||
// calendar add event
|
||||
$(".cal-add-event").on("click", function () {
|
||||
$(".modal-calendar").modal("hide");
|
||||
var eventTitle = $("#cal-event-title").val(),
|
||||
startDate = $("#cal-start-date").val(),
|
||||
endDate = $("#cal-end-date").val(),
|
||||
eventDescription = $("#cal-description").val(),
|
||||
correctEndDate = new Date(endDate);
|
||||
calendar.addEvent({
|
||||
id: "newEvent",
|
||||
title: eventTitle,
|
||||
start: startDate,
|
||||
end: correctEndDate,
|
||||
description: eventDescription,
|
||||
color: evtColor,
|
||||
dataEventColor: eventColor,
|
||||
allDay: true
|
||||
});
|
||||
});
|
||||
|
||||
// date picker
|
||||
$(".pickadate").pickadate({
|
||||
format: 'yyyy-mm-dd'
|
||||
});
|
||||
});
|
||||
38
public/vendor/dashboard/src/js/scripts/extensions/i18n.js
vendored
Executable file
38
public/vendor/dashboard/src/js/scripts/extensions/i18n.js
vendored
Executable file
@@ -0,0 +1,38 @@
|
||||
/*=========================================================================================
|
||||
File Name: i18n.js
|
||||
Description: Internationalization
|
||||
--------------------------------------------------------------------------------------
|
||||
Item Name: Vuesax HTML Admin Template
|
||||
Version: 1.1
|
||||
Author: PIXINVENT
|
||||
Author URL: http://www.themeforest.net/user/pixinvent
|
||||
==========================================================================================*/
|
||||
|
||||
// For Language Select
|
||||
var changeText = $('.card-localization .card-text')
|
||||
|
||||
// for extensions i18n page
|
||||
// i18n has been initialized already we have have to add resource bundle
|
||||
i18next.addResourceBundle('en_p', 'translation', {
|
||||
key: "Cake sesame snaps cupcake gingerbread danish I love gingerbread. Apple pie pie jujubes chupa chups muffin halvah lollipop. Chocolate cake oat cake tiramisu marzipan sugar plum. Donut sweet pie oat cake dragée fruitcake cotton candy lemon drops."
|
||||
});
|
||||
|
||||
i18next.addResourceBundle('pt_p', 'translation', {
|
||||
key: "O sésamo do bolo agarra dinamarquês do pão-de-espécie do queque eu amo o pão-de-espécie. Torta de torta de maçã jujubes chupa chups pirulito halvah muffin. Ameixa do açúcar do maçapão do tiramisu do bolo da aveia do bolo de chocolate. Donut doce aveia torta dragée fruitcake algodão doce gotas de limão."
|
||||
});
|
||||
|
||||
i18next.addResourceBundle('fr_p', 'translation', {
|
||||
key: "Gâteau au sésame s'enclenche petit pain au pain d'épices danois J'adore le pain d'épices. Tarte aux pommes jujubes chupa chups muffin halva sucette. Gateau au chocolat gateau d \ 'avoine tiramisu prune sucre. Donut tourte sucrée gateau dragée fruit gateau barbe a papa citron gouttes.."
|
||||
});
|
||||
i18next.addResourceBundle('de_p', 'translation', {
|
||||
key: "Kuchen Sesam Snaps Cupcake Lebkuchen dänisch Ich liebe Lebkuchen. Apfelkuchen Jujubes Chupa Chups Muffin Halwa Lutscher. Schokoladenkuchen-Haferkuchen-Tiramisumarzipanzuckerpflaume. Donut süße Torte Hafer Kuchen Dragée Obstkuchen Zuckerwatte Zitronentropfen."
|
||||
});
|
||||
|
||||
// Change Card Text Language On Click
|
||||
$(".language-options").on("click", ".i18n-lang-option", function () {
|
||||
var selected_lng = $(this).data('lng');
|
||||
i18next.changeLanguage(selected_lng, function (err, t) {
|
||||
// resources have been loaded
|
||||
changeText.localize();
|
||||
});
|
||||
})
|
||||
851
public/vendor/dashboard/src/js/scripts/extensions/noui-slider.js
vendored
Executable file
851
public/vendor/dashboard/src/js/scripts/extensions/noui-slider.js
vendored
Executable file
@@ -0,0 +1,851 @@
|
||||
/*=========================================================================================
|
||||
File Name: noui-slider.js
|
||||
Description: noUiSlider is a lightweight JavaScript range slider library.
|
||||
----------------------------------------------------------------------------------------
|
||||
Item Name: Vuesax HTML Admin Template
|
||||
Version: 1.1
|
||||
Author: PIXINVENT
|
||||
Author URL: http://www.themeforest.net/user/pixinvent
|
||||
==========================================================================================*/
|
||||
$(document).ready(function () {
|
||||
|
||||
|
||||
/********************************************
|
||||
* Slider values *
|
||||
********************************************/
|
||||
|
||||
// Handles
|
||||
var handlesSlider = document.getElementById('slider-handles');
|
||||
|
||||
noUiSlider.create(handlesSlider, {
|
||||
start: [4000, 8000],
|
||||
range: {
|
||||
'min': [2000],
|
||||
'max': [10000]
|
||||
}
|
||||
});
|
||||
|
||||
|
||||
// Snapping between steps
|
||||
var snapSlider = document.getElementById('slider-snap');
|
||||
|
||||
noUiSlider.create(snapSlider, {
|
||||
start: [0, 500],
|
||||
snap: true,
|
||||
connect: true,
|
||||
range: {
|
||||
'min': 0,
|
||||
'10%': 50,
|
||||
'20%': 100,
|
||||
'30%': 150,
|
||||
'40%': 500,
|
||||
'50%': 800,
|
||||
'max': 1000
|
||||
}
|
||||
});
|
||||
|
||||
|
||||
|
||||
/************************************************
|
||||
* Slider behaviour *
|
||||
************************************************/
|
||||
|
||||
// Tap
|
||||
tapSlider = document.getElementById('tap');
|
||||
|
||||
noUiSlider.create(tapSlider, {
|
||||
start: 40,
|
||||
behaviour: 'tap',
|
||||
connect: 'upper',
|
||||
range: {
|
||||
'min': 20,
|
||||
'max': 80
|
||||
}
|
||||
});
|
||||
|
||||
|
||||
// Drag
|
||||
var dragSlider = document.getElementById('drag');
|
||||
|
||||
noUiSlider.create(dragSlider, {
|
||||
start: [40, 60],
|
||||
behaviour: 'drag',
|
||||
connect: true,
|
||||
range: {
|
||||
'min': 20,
|
||||
'max': 80
|
||||
}
|
||||
});
|
||||
|
||||
|
||||
// Fixed dragging
|
||||
dragFixedSlider = document.getElementById('drag-fixed');
|
||||
|
||||
noUiSlider.create(dragFixedSlider, {
|
||||
start: [40, 60],
|
||||
behaviour: 'drag-fixed',
|
||||
connect: true,
|
||||
range: {
|
||||
'min': 20,
|
||||
'max': 80
|
||||
}
|
||||
});
|
||||
|
||||
|
||||
|
||||
|
||||
// Hover
|
||||
var hoverSlider = document.getElementById('hover'),
|
||||
field = document.getElementById('hover-val');
|
||||
|
||||
noUiSlider.create(hoverSlider, {
|
||||
start: 20,
|
||||
behaviour: 'hover-snap',
|
||||
range: {
|
||||
'min': 0,
|
||||
'max': 10
|
||||
}
|
||||
});
|
||||
|
||||
hoverSlider.noUiSlider.on('hover', function (value) {
|
||||
field.innerHTML = value;
|
||||
});
|
||||
|
||||
|
||||
// Combined options
|
||||
dragTapSlider = document.getElementById('combined');
|
||||
|
||||
noUiSlider.create(dragTapSlider, {
|
||||
start: [40, 60],
|
||||
behaviour: 'drag-tap',
|
||||
connect: true,
|
||||
range: {
|
||||
'min': 20,
|
||||
'max': 80
|
||||
}
|
||||
});
|
||||
|
||||
|
||||
|
||||
/****************************************************
|
||||
* Slider Scales / Pips *
|
||||
****************************************************/
|
||||
|
||||
var range_all_sliders = {
|
||||
'min': [0],
|
||||
'10%': [5, 5],
|
||||
'50%': [40, 10],
|
||||
'max': [100]
|
||||
};
|
||||
|
||||
// Range
|
||||
var pipsRange = document.getElementById('pips-range');
|
||||
|
||||
noUiSlider.create(pipsRange, {
|
||||
range: range_all_sliders,
|
||||
start: 0,
|
||||
pips: {
|
||||
mode: 'range',
|
||||
density: 3
|
||||
}
|
||||
});
|
||||
|
||||
|
||||
// Steps
|
||||
var range_step_sliders = {
|
||||
'min': [0],
|
||||
'10%': [5, 5],
|
||||
'50%': [25, 20],
|
||||
'max': [50, 50]
|
||||
};
|
||||
function filter500(value, type) {
|
||||
if (type === 0) {
|
||||
return value < 50 ? -1 : 0;
|
||||
}
|
||||
return value % 50 ? 2 : 1;
|
||||
}
|
||||
|
||||
var pipsStepsFilter = document.getElementById('pips-steps-filter');
|
||||
|
||||
noUiSlider.create(pipsStepsFilter, {
|
||||
range: range_step_sliders,
|
||||
start: 0,
|
||||
pips: {
|
||||
mode: 'steps',
|
||||
density: 5,
|
||||
filter: filter500,
|
||||
format: wNumb({
|
||||
decimals: 0,
|
||||
prefix: '$'
|
||||
})
|
||||
}
|
||||
});
|
||||
|
||||
|
||||
|
||||
/********************************************
|
||||
* Slider Colors *
|
||||
********************************************/
|
||||
|
||||
// Default
|
||||
var defaultColorSlider = document.getElementById('default-color-slider');
|
||||
|
||||
noUiSlider.create(defaultColorSlider, {
|
||||
start: [45, 55],
|
||||
behaviour: 'drag',
|
||||
connect: true,
|
||||
range: {
|
||||
'min': 20,
|
||||
'max': 80
|
||||
}
|
||||
});
|
||||
|
||||
|
||||
// Success
|
||||
var successColorSlider = document.getElementById('success-color-slider');
|
||||
|
||||
noUiSlider.create(successColorSlider, {
|
||||
start: [40, 60],
|
||||
behaviour: 'drag',
|
||||
connect: true,
|
||||
range: {
|
||||
'min': 20,
|
||||
'max': 80
|
||||
}
|
||||
});
|
||||
|
||||
|
||||
// Info
|
||||
var infoColorSlider = document.getElementById('info-color-slider');
|
||||
|
||||
noUiSlider.create(infoColorSlider, {
|
||||
start: [35, 65],
|
||||
behaviour: 'drag',
|
||||
connect: true,
|
||||
range: {
|
||||
'min': 20,
|
||||
'max': 80
|
||||
}
|
||||
});
|
||||
|
||||
|
||||
// Warning
|
||||
var warningColorSlider = document.getElementById('warning-color-slider');
|
||||
|
||||
noUiSlider.create(warningColorSlider, {
|
||||
start: [45, 55],
|
||||
behaviour: 'drag',
|
||||
connect: true,
|
||||
range: {
|
||||
'min': 20,
|
||||
'max': 80
|
||||
}
|
||||
});
|
||||
|
||||
|
||||
// Danger
|
||||
var dangerColorSlider = document.getElementById('danger-color-slider');
|
||||
|
||||
noUiSlider.create(dangerColorSlider, {
|
||||
start: [40, 60],
|
||||
behaviour: 'drag',
|
||||
connect: true,
|
||||
range: {
|
||||
'min': 20,
|
||||
'max': 80
|
||||
}
|
||||
});
|
||||
|
||||
// Colored Connects
|
||||
|
||||
var sliderColoredConnects = document.getElementById('colored-connect');
|
||||
|
||||
noUiSlider.create(sliderColoredConnects, {
|
||||
start: [4000, 8000, 12000, 16000],
|
||||
connect: [false, true, true, true, true],
|
||||
range: {
|
||||
'min': [2000],
|
||||
'max': [20000]
|
||||
}
|
||||
});
|
||||
|
||||
var connect = sliderColoredConnects.querySelectorAll('.noUi-connect');
|
||||
var classes = ['bg-primary', 'bg-success', 'bg-info', 'bg-danger', 'bg-warning'];
|
||||
|
||||
for (var i = 0; i < connect.length; i++) {
|
||||
connect[i].classList.add(classes[i]);
|
||||
}
|
||||
|
||||
|
||||
/********************************************
|
||||
* Slider Sizing *
|
||||
********************************************/
|
||||
|
||||
// Extra large options
|
||||
var xl_options = {
|
||||
start: [45, 55],
|
||||
behaviour: 'drag',
|
||||
connect: true,
|
||||
range: {
|
||||
'min': 20,
|
||||
'max': 80
|
||||
}
|
||||
};
|
||||
|
||||
var lg_options = {
|
||||
start: [40, 60],
|
||||
behaviour: 'drag',
|
||||
connect: true,
|
||||
range: {
|
||||
'min': 20,
|
||||
'max': 80
|
||||
}
|
||||
};
|
||||
|
||||
var default_options = {
|
||||
start: [35, 65],
|
||||
behaviour: 'drag',
|
||||
connect: true,
|
||||
range: {
|
||||
'min': 20,
|
||||
'max': 80
|
||||
}
|
||||
};
|
||||
|
||||
var sm_options = {
|
||||
start: [30, 70],
|
||||
behaviour: 'drag',
|
||||
connect: true,
|
||||
range: {
|
||||
'min': 20,
|
||||
'max': 80
|
||||
}
|
||||
};
|
||||
|
||||
var xs_options = {
|
||||
start: [25, 75],
|
||||
behaviour: 'drag',
|
||||
connect: true,
|
||||
range: {
|
||||
'min': 20,
|
||||
'max': 80
|
||||
}
|
||||
};
|
||||
|
||||
// Extra Large
|
||||
var extraLargeSlider = document.getElementById('extra-large-slider');
|
||||
var circleExtraLargeSlider = document.getElementById('circle-extra-large-slider');
|
||||
var squareExtraLargeSlider = document.getElementById('square-extra-large-slider');
|
||||
|
||||
noUiSlider.create(extraLargeSlider, xl_options);
|
||||
noUiSlider.create(circleExtraLargeSlider, xl_options);
|
||||
noUiSlider.create(squareExtraLargeSlider, xl_options);
|
||||
|
||||
// Large
|
||||
var largeSlider = document.getElementById('large-slider');
|
||||
var circleLargeSlider = document.getElementById('circle-large-slider');
|
||||
var squareLargeSlider = document.getElementById('square-large-slider');
|
||||
|
||||
noUiSlider.create(largeSlider, lg_options);
|
||||
noUiSlider.create(circleLargeSlider, lg_options);
|
||||
noUiSlider.create(squareLargeSlider, lg_options);
|
||||
|
||||
// Default
|
||||
var defaultSlider = document.getElementById('default-slider');
|
||||
var circleDefaultSlider = document.getElementById('circle-default-slider');
|
||||
var squareDefaultSlider = document.getElementById('square-default-slider');
|
||||
|
||||
noUiSlider.create(defaultSlider, default_options);
|
||||
noUiSlider.create(circleDefaultSlider, default_options);
|
||||
noUiSlider.create(squareDefaultSlider, default_options);
|
||||
|
||||
// Small
|
||||
var smallSlider = document.getElementById('small-slider');
|
||||
var circleSmallSlider = document.getElementById('circle-small-slider');
|
||||
var squareSmallSlider = document.getElementById('square-small-slider');
|
||||
|
||||
noUiSlider.create(smallSlider, sm_options);
|
||||
noUiSlider.create(circleSmallSlider, sm_options);
|
||||
noUiSlider.create(squareSmallSlider, sm_options);
|
||||
|
||||
// Extra Small
|
||||
var extraSmallSlider = document.getElementById('extra-small-slider');
|
||||
var circleExtraSmallSlider = document.getElementById('circle-extra-small-slider');
|
||||
var squareExtraSmallSlider = document.getElementById('square-extra-small-slider');
|
||||
|
||||
noUiSlider.create(extraSmallSlider, xs_options);
|
||||
noUiSlider.create(circleExtraSmallSlider, xs_options);
|
||||
noUiSlider.create(squareExtraSmallSlider, xs_options);
|
||||
|
||||
|
||||
/********************************************
|
||||
* Vertical Slider *
|
||||
********************************************/
|
||||
|
||||
// Default
|
||||
var vertical_slider_1 = document.getElementById('slider-vertical-1');
|
||||
|
||||
noUiSlider.create(vertical_slider_1, {
|
||||
start: 20,
|
||||
orientation: 'vertical',
|
||||
range: {
|
||||
'min': 0,
|
||||
'max': 100
|
||||
}
|
||||
});
|
||||
|
||||
var vertical_slider_2 = document.getElementById('slider-vertical-2');
|
||||
|
||||
noUiSlider.create(vertical_slider_2, {
|
||||
start: 50,
|
||||
orientation: 'vertical',
|
||||
range: {
|
||||
'min': 0,
|
||||
'max': 100
|
||||
}
|
||||
});
|
||||
|
||||
var vertical_slider_3 = document.getElementById('slider-vertical-3');
|
||||
|
||||
noUiSlider.create(vertical_slider_3, {
|
||||
start: 20,
|
||||
orientation: 'vertical',
|
||||
range: {
|
||||
'min': 0,
|
||||
'max': 100
|
||||
}
|
||||
});
|
||||
|
||||
var vertical_slider_4 = document.getElementById('slider-vertical-4');
|
||||
|
||||
noUiSlider.create(vertical_slider_4, {
|
||||
start: 50,
|
||||
orientation: 'vertical',
|
||||
range: {
|
||||
'min': 0,
|
||||
'max': 100
|
||||
}
|
||||
});
|
||||
|
||||
var vertical_slider_5 = document.getElementById('slider-vertical-5');
|
||||
|
||||
noUiSlider.create(vertical_slider_5, {
|
||||
start: 20,
|
||||
orientation: 'vertical',
|
||||
range: {
|
||||
'min': 0,
|
||||
'max': 100
|
||||
}
|
||||
});
|
||||
|
||||
|
||||
// Connect to lower
|
||||
var connectLowerSlider1 = document.getElementById('connect-lower-1');
|
||||
|
||||
noUiSlider.create(connectLowerSlider1, {
|
||||
start: 30,
|
||||
orientation: 'vertical',
|
||||
connect: 'lower',
|
||||
range: {
|
||||
'min': 0,
|
||||
'max': 100
|
||||
}
|
||||
});
|
||||
|
||||
var connectLowerSlider2 = document.getElementById('connect-lower-2');
|
||||
|
||||
noUiSlider.create(connectLowerSlider2, {
|
||||
start: 40,
|
||||
orientation: 'vertical',
|
||||
connect: 'lower',
|
||||
range: {
|
||||
'min': 0,
|
||||
'max': 100
|
||||
}
|
||||
});
|
||||
|
||||
var connectLowerSlider3 = document.getElementById('connect-lower-3');
|
||||
|
||||
noUiSlider.create(connectLowerSlider3, {
|
||||
start: 50,
|
||||
orientation: 'vertical',
|
||||
connect: 'lower',
|
||||
range: {
|
||||
'min': 0,
|
||||
'max': 100
|
||||
}
|
||||
});
|
||||
|
||||
var connectLowerSlider4 = document.getElementById('connect-lower-4');
|
||||
|
||||
noUiSlider.create(connectLowerSlider4, {
|
||||
start: 60,
|
||||
orientation: 'vertical',
|
||||
connect: 'lower',
|
||||
range: {
|
||||
'min': 0,
|
||||
'max': 100
|
||||
}
|
||||
});
|
||||
|
||||
var connectLowerSlider5 = document.getElementById('connect-lower-5');
|
||||
|
||||
noUiSlider.create(connectLowerSlider5, {
|
||||
start: 70,
|
||||
orientation: 'vertical',
|
||||
connect: 'lower',
|
||||
range: {
|
||||
'min': 0,
|
||||
'max': 100
|
||||
}
|
||||
});
|
||||
|
||||
|
||||
// Connect to upper
|
||||
var connectUpperSlider1 = document.getElementById('connect-upper-1');
|
||||
|
||||
noUiSlider.create(connectUpperSlider1, {
|
||||
start: 30,
|
||||
orientation: 'vertical',
|
||||
connect: 'upper',
|
||||
range: {
|
||||
'min': 0,
|
||||
'max': 100
|
||||
}
|
||||
});
|
||||
|
||||
var connectUpperSlider2 = document.getElementById('connect-upper-2');
|
||||
|
||||
noUiSlider.create(connectUpperSlider2, {
|
||||
start: 40,
|
||||
orientation: 'vertical',
|
||||
connect: 'upper',
|
||||
range: {
|
||||
'min': 0,
|
||||
'max': 100
|
||||
}
|
||||
});
|
||||
|
||||
var connectUpperSlider3 = document.getElementById('connect-upper-3');
|
||||
|
||||
noUiSlider.create(connectUpperSlider3, {
|
||||
start: 50,
|
||||
orientation: 'vertical',
|
||||
connect: 'upper',
|
||||
range: {
|
||||
'min': 0,
|
||||
'max': 100
|
||||
}
|
||||
});
|
||||
|
||||
var connectUpperSlider4 = document.getElementById('connect-upper-4');
|
||||
|
||||
noUiSlider.create(connectUpperSlider4, {
|
||||
start: 60,
|
||||
orientation: 'vertical',
|
||||
connect: 'upper',
|
||||
range: {
|
||||
'min': 0,
|
||||
'max': 100
|
||||
}
|
||||
});
|
||||
|
||||
var connectUpperSlider5 = document.getElementById('connect-upper-5');
|
||||
|
||||
noUiSlider.create(connectUpperSlider5, {
|
||||
start: 70,
|
||||
orientation: 'vertical',
|
||||
connect: 'upper',
|
||||
range: {
|
||||
'min': 0,
|
||||
'max': 100
|
||||
}
|
||||
});
|
||||
|
||||
|
||||
// Tooltips
|
||||
var tooltipSlider1 = document.getElementById('slider-tooltips-1');
|
||||
|
||||
noUiSlider.create(tooltipSlider1, {
|
||||
start: [20, 80],
|
||||
orientation: 'vertical',
|
||||
tooltips: [false, wNumb({
|
||||
decimals: 1
|
||||
})],
|
||||
range: {
|
||||
'min': 0,
|
||||
'max': 100
|
||||
}
|
||||
});
|
||||
|
||||
var tooltipSlider2 = document.getElementById('slider-tooltips-2');
|
||||
|
||||
noUiSlider.create(tooltipSlider2, {
|
||||
start: [20, 80],
|
||||
orientation: 'vertical',
|
||||
tooltips: [false, wNumb({
|
||||
decimals: 1
|
||||
})],
|
||||
range: {
|
||||
'min': 0,
|
||||
'max': 100
|
||||
}
|
||||
});
|
||||
|
||||
var tooltipSlider3 = document.getElementById('slider-tooltips-3');
|
||||
|
||||
noUiSlider.create(tooltipSlider3, {
|
||||
start: [20, 80],
|
||||
orientation: 'vertical',
|
||||
tooltips: [false, wNumb({
|
||||
decimals: 1
|
||||
})],
|
||||
range: {
|
||||
'min': 0,
|
||||
'max': 100
|
||||
}
|
||||
});
|
||||
|
||||
// Direction top to bottom
|
||||
var directionTopBottom1 = document.getElementById('slider-direction-top-bottom-1');
|
||||
|
||||
noUiSlider.create(directionTopBottom1, {
|
||||
range: range_all_sliders,
|
||||
start: 30,
|
||||
connect: 'lower',
|
||||
orientation: 'vertical',
|
||||
pips: {
|
||||
mode: 'range',
|
||||
density: 5
|
||||
}
|
||||
});
|
||||
|
||||
var directionTopBottom2 = document.getElementById('slider-direction-top-bottom-2');
|
||||
|
||||
noUiSlider.create(directionTopBottom2, {
|
||||
range: range_all_sliders,
|
||||
start: 50,
|
||||
connect: 'lower',
|
||||
orientation: 'vertical',
|
||||
pips: {
|
||||
mode: 'range',
|
||||
density: 5
|
||||
}
|
||||
});
|
||||
|
||||
var directionTopBottom3 = document.getElementById('slider-direction-top-bottom-3');
|
||||
|
||||
noUiSlider.create(directionTopBottom3, {
|
||||
range: range_all_sliders,
|
||||
start: 70,
|
||||
connect: 'lower',
|
||||
orientation: 'vertical',
|
||||
pips: {
|
||||
mode: 'range',
|
||||
density: 5
|
||||
}
|
||||
});
|
||||
|
||||
|
||||
|
||||
// Limit
|
||||
var verticalLimitSlider1 = document.getElementById('vertical-limit-1');
|
||||
|
||||
noUiSlider.create(verticalLimitSlider1, {
|
||||
start: [40, 60],
|
||||
orientation: 'vertical',
|
||||
limit: 40,
|
||||
behaviour: 'drag',
|
||||
connect: true,
|
||||
range: {
|
||||
'min': 0,
|
||||
'max': 100
|
||||
}
|
||||
});
|
||||
|
||||
var verticalLimitSlider2 = document.getElementById('vertical-limit-2');
|
||||
|
||||
noUiSlider.create(verticalLimitSlider2, {
|
||||
start: [35, 65],
|
||||
orientation: 'vertical',
|
||||
limit: 40,
|
||||
behaviour: 'drag',
|
||||
connect: true,
|
||||
range: {
|
||||
'min': 0,
|
||||
'max': 100
|
||||
}
|
||||
});
|
||||
|
||||
var verticalLimitSlider3 = document.getElementById('vertical-limit-3');
|
||||
|
||||
noUiSlider.create(verticalLimitSlider3, {
|
||||
start: [30, 70],
|
||||
orientation: 'vertical',
|
||||
limit: 50,
|
||||
behaviour: 'drag',
|
||||
connect: true,
|
||||
range: {
|
||||
'min': 0,
|
||||
'max': 100
|
||||
}
|
||||
});
|
||||
|
||||
var verticalLimitSlider4 = document.getElementById('vertical-limit-4');
|
||||
|
||||
noUiSlider.create(verticalLimitSlider4, {
|
||||
start: [25, 75],
|
||||
orientation: 'vertical',
|
||||
limit: 50,
|
||||
behaviour: 'drag',
|
||||
connect: true,
|
||||
range: {
|
||||
'min': 0,
|
||||
'max': 100
|
||||
}
|
||||
});
|
||||
|
||||
var verticalLimitSlider5 = document.getElementById('vertical-limit-5');
|
||||
|
||||
noUiSlider.create(verticalLimitSlider5, {
|
||||
start: [20, 80],
|
||||
orientation: 'vertical',
|
||||
limit: 70,
|
||||
behaviour: 'drag',
|
||||
connect: true,
|
||||
range: {
|
||||
'min': 0,
|
||||
'max': 100
|
||||
}
|
||||
});
|
||||
|
||||
/****************************************************
|
||||
* Horizontal Slider With Time *
|
||||
****************************************************/
|
||||
// Create a new date from a string, return as a timestamp.
|
||||
function timestamp(str) {
|
||||
return new Date(str).getTime();
|
||||
}
|
||||
1
|
||||
function timestamp(str) {
|
||||
2
|
||||
return new Date(str).getTime();
|
||||
3
|
||||
}
|
||||
|
||||
// weekdays and months
|
||||
|
||||
var weekdays = [
|
||||
"Sunday", "Monday", "Tuesday",
|
||||
"Wednesday", "Thursday", "Friday",
|
||||
"Saturday"
|
||||
];
|
||||
|
||||
var months = [
|
||||
"January", "February", "March",
|
||||
"April", "May", "June", "July",
|
||||
"August", "September", "October",
|
||||
"November", "December"
|
||||
];
|
||||
|
||||
// Append a suffix to dates.
|
||||
// Example: 23 => 23rd, 1 => 1st.
|
||||
function nth(d) {
|
||||
if (d > 3 && d < 21) return 'th';
|
||||
switch (d % 10) {
|
||||
case 1:
|
||||
return "st";
|
||||
case 2:
|
||||
return "nd";
|
||||
case 3:
|
||||
return "rd";
|
||||
default:
|
||||
return "th";
|
||||
}
|
||||
}
|
||||
|
||||
// Create a string representation of the date.
|
||||
function formatDate(date) {
|
||||
return weekdays[date.getDay()] + ", " +
|
||||
date.getDate() + nth(date.getDate()) + " " +
|
||||
months[date.getMonth()] + " " +
|
||||
date.getFullYear();
|
||||
}
|
||||
var date = new Date();
|
||||
|
||||
// set previous month
|
||||
var previousMonth = new Date();
|
||||
previousMonth.setMonth(previousMonth.getMonth() - 1);
|
||||
|
||||
var dateSlider = document.getElementById('slider-with-date');
|
||||
|
||||
// nouislider settings
|
||||
noUiSlider.create(dateSlider, {
|
||||
behaviour: 'tap',
|
||||
connect: true,
|
||||
range: {
|
||||
min: timestamp('2016-06-01') + 24 * 60 * 60 * 1000,
|
||||
max: timestamp(date)
|
||||
},
|
||||
step: 1 * 24 * 60 * 60 * 1000,
|
||||
start: [timestamp(previousMonth), timestamp(date)]
|
||||
});
|
||||
|
||||
// get range infos at html
|
||||
var dateValues = [
|
||||
document.getElementById('event-start'), document.getElementById('event-end')
|
||||
];
|
||||
|
||||
dateSlider.noUiSlider.on('update', function (values, handle) {
|
||||
dateValues[handle].innerHTML = formatDate(new Date(+values[handle]));
|
||||
});
|
||||
|
||||
/****************************************************
|
||||
* Slider With Input *
|
||||
****************************************************/
|
||||
|
||||
var select = document.getElementById('slider-select');
|
||||
|
||||
// Append the option elements
|
||||
for (var i = -20; i <= 40; i++) {
|
||||
|
||||
var option = document.createElement("option");
|
||||
option.text = i;
|
||||
option.value = i;
|
||||
|
||||
select.appendChild(option);
|
||||
}
|
||||
|
||||
var sliderWithInput = document.getElementById('slider-with-input');
|
||||
|
||||
noUiSlider.create(sliderWithInput, {
|
||||
start: [10, 30],
|
||||
connect: true,
|
||||
range: {
|
||||
'min': -20,
|
||||
'max': 40
|
||||
}
|
||||
});
|
||||
|
||||
var inputNumber = document.getElementById('slider-input-number');
|
||||
|
||||
sliderWithInput.noUiSlider.on('update', function (values, handle) {
|
||||
|
||||
var value = values[handle];
|
||||
|
||||
if (handle) {
|
||||
inputNumber.value = value;
|
||||
} else {
|
||||
select.value = Math.round(value);
|
||||
}
|
||||
});
|
||||
|
||||
select.addEventListener('change', function () {
|
||||
sliderWithInput.noUiSlider.set([this.value, null]);
|
||||
});
|
||||
|
||||
inputNumber.addEventListener('change', function () {
|
||||
sliderWithInput.noUiSlider.set([null, this.value]);
|
||||
});
|
||||
|
||||
});
|
||||
391
public/vendor/dashboard/src/js/scripts/extensions/sweet-alerts.js
vendored
Executable file
391
public/vendor/dashboard/src/js/scripts/extensions/sweet-alerts.js
vendored
Executable file
@@ -0,0 +1,391 @@
|
||||
/*=========================================================================================
|
||||
File Name: sweet-alerts.js
|
||||
Description: A beautiful replacement for javascript alerts
|
||||
----------------------------------------------------------------------------------------
|
||||
Item Name: Vuesax HTML Admin Template
|
||||
Version: 1.1
|
||||
Author: Pixinvent
|
||||
Author URL: hhttp://www.themeforest.net/user/pixinvent
|
||||
==========================================================================================*/
|
||||
$(document).ready(function () {
|
||||
|
||||
// Basic
|
||||
|
||||
$('#basic-alert').on('click', function () {
|
||||
Swal.fire({
|
||||
title: 'Any fool can use a computer',
|
||||
confirmButtonClass: 'btn btn-primary',
|
||||
buttonsStyling: false,
|
||||
})
|
||||
});
|
||||
|
||||
$('#with-title').on('click', function () {
|
||||
Swal.fire({
|
||||
title: 'The Internet?,',
|
||||
text: "That thing is still around?",
|
||||
confirmButtonClass: 'btn btn-primary',
|
||||
buttonsStyling: false,
|
||||
}
|
||||
)
|
||||
});
|
||||
|
||||
$('#footer-alert').on('click', function () {
|
||||
Swal.fire({
|
||||
type: 'error',
|
||||
title: 'Oops...',
|
||||
text: 'Something went wrong!',
|
||||
footer: '<a href>Why do I have this issue?</a>',
|
||||
confirmButtonClass: 'btn btn-primary',
|
||||
buttonsStyling: false,
|
||||
})
|
||||
});
|
||||
|
||||
$('#html-alert').on('click', function () {
|
||||
Swal.fire({
|
||||
title: '<strong>HTML <u>example</u></strong>',
|
||||
type: 'info',
|
||||
html:
|
||||
'You can use <b>bold text</b>, ' +
|
||||
'<a href="https://pixinvent.com/" target="_blank">links</a> ' +
|
||||
'and other HTML tags',
|
||||
showCloseButton: true,
|
||||
showCancelButton: true,
|
||||
focusConfirm: false,
|
||||
confirmButtonText:
|
||||
'<i class="fa fa-thumbs-up"></i> Great!',
|
||||
confirmButtonAriaLabel: 'Thumbs up, great!',
|
||||
cancelButtonText:
|
||||
'<i class="fa fa-thumbs-down"></i>',
|
||||
cancelButtonAriaLabel: 'Thumbs down',
|
||||
confirmButtonClass: 'btn btn-primary',
|
||||
buttonsStyling: false,
|
||||
cancelButtonClass: 'btn btn-danger ml-1',
|
||||
})
|
||||
});
|
||||
|
||||
// Position
|
||||
|
||||
$('#position-top-start').on('click', function () {
|
||||
Swal.fire({
|
||||
position: 'top-start',
|
||||
type: 'success',
|
||||
title: 'Your work has been saved',
|
||||
showConfirmButton: false,
|
||||
timer: 1500,
|
||||
confirmButtonClass: 'btn btn-primary',
|
||||
buttonsStyling: false,
|
||||
})
|
||||
})
|
||||
|
||||
$('#position-top-end').on('click', function () {
|
||||
Swal.fire({
|
||||
position: 'top-end',
|
||||
type: 'success',
|
||||
title: 'Your work has been saved',
|
||||
showConfirmButton: false,
|
||||
timer: 1500,
|
||||
confirmButtonClass: 'btn btn-primary',
|
||||
buttonsStyling: false,
|
||||
})
|
||||
})
|
||||
|
||||
$('#position-bottom-start').on('click', function () {
|
||||
Swal.fire({
|
||||
position: 'bottom-start',
|
||||
type: 'success',
|
||||
title: 'Your work has been saved',
|
||||
showConfirmButton: false,
|
||||
timer: 1500,
|
||||
confirmButtonClass: 'btn btn-primary',
|
||||
buttonsStyling: false,
|
||||
})
|
||||
})
|
||||
$('#position-bottom-end').on('click', function () {
|
||||
Swal.fire({
|
||||
position: 'bottom-end',
|
||||
type: 'success',
|
||||
title: 'Your work has been saved',
|
||||
showConfirmButton: false,
|
||||
timer: 1500,
|
||||
confirmButtonClass: 'btn btn-primary',
|
||||
buttonsStyling: false,
|
||||
})
|
||||
})
|
||||
|
||||
// Animations
|
||||
|
||||
$("#bounce-in-animation").on('click', function () {
|
||||
Swal.fire({
|
||||
title: 'Bounce In Animation',
|
||||
animation: false,
|
||||
customClass: 'animated bounceIn',
|
||||
confirmButtonClass: 'btn btn-primary',
|
||||
buttonsStyling: false,
|
||||
})
|
||||
|
||||
})
|
||||
$("#fade-in-animation").on('click', function () {
|
||||
Swal.fire({
|
||||
title: 'Fade In Animation',
|
||||
animation: false,
|
||||
customClass: 'animated fadeIn',
|
||||
confirmButtonClass: 'btn btn-primary',
|
||||
buttonsStyling: false,
|
||||
})
|
||||
})
|
||||
$("#flip-x-animation").on('click', function () {
|
||||
Swal.fire({
|
||||
title: 'Flip In Animation',
|
||||
animation: false,
|
||||
customClass: 'animated flipInX',
|
||||
confirmButtonClass: 'btn btn-primary',
|
||||
buttonsStyling: false,
|
||||
})
|
||||
})
|
||||
$("#tada-animation").on('click', function () {
|
||||
Swal.fire({
|
||||
title: 'Tada Animation',
|
||||
animation: false,
|
||||
customClass: 'animated tada',
|
||||
confirmButtonClass: 'btn btn-primary',
|
||||
buttonsStyling: false,
|
||||
})
|
||||
})
|
||||
$("#shake-animation").on('click', function () {
|
||||
Swal.fire({
|
||||
title: 'Shake Animation',
|
||||
animation: false,
|
||||
customClass: 'animated shake',
|
||||
confirmButtonClass: 'btn btn-primary',
|
||||
buttonsStyling: false,
|
||||
})
|
||||
})
|
||||
|
||||
// type
|
||||
|
||||
$('#type-success').on('click', function () {
|
||||
Swal.fire({
|
||||
title: "Good job!",
|
||||
text: "You clicked the button!",
|
||||
type: "success",
|
||||
confirmButtonClass: 'btn btn-primary',
|
||||
buttonsStyling: false,
|
||||
});
|
||||
});
|
||||
|
||||
$('#type-info').on('click', function () {
|
||||
Swal.fire({
|
||||
title: "Info!",
|
||||
text: "You clicked the button!",
|
||||
type: "info",
|
||||
confirmButtonClass: 'btn btn-primary',
|
||||
buttonsStyling: false,
|
||||
});
|
||||
});
|
||||
|
||||
$('#type-warning').on('click', function () {
|
||||
Swal.fire({
|
||||
title: "Warning!",
|
||||
text: " You clicked the button!",
|
||||
type: "warning",
|
||||
confirmButtonClass: 'btn btn-primary',
|
||||
buttonsStyling: false,
|
||||
});
|
||||
});
|
||||
|
||||
$('#type-error').on('click', function () {
|
||||
Swal.fire({
|
||||
title: "Error!",
|
||||
text: " You clicked the button!",
|
||||
type: "error",
|
||||
confirmButtonClass: 'btn btn-primary',
|
||||
buttonsStyling: false,
|
||||
});
|
||||
});
|
||||
|
||||
// options
|
||||
|
||||
$('#custom-icon').on('click', function () {
|
||||
Swal.fire({
|
||||
title: 'Sweet!',
|
||||
text: 'Modal with a custom image.',
|
||||
imageUrl: '../../../app-assets/images/slider/04.jpg',
|
||||
imageWidth: 400,
|
||||
imageHeight: 200,
|
||||
imageAlt: 'Custom image',
|
||||
animation: false,
|
||||
confirmButtonClass: 'btn btn-primary',
|
||||
buttonsStyling: false,
|
||||
})
|
||||
});
|
||||
|
||||
$('#auto-close').on('click', function () {
|
||||
var timerInterval
|
||||
Swal.fire({
|
||||
title: 'Auto close alert!',
|
||||
html: 'I will close in <strong></strong> seconds.',
|
||||
timer: 2000,
|
||||
confirmButtonClass: 'btn btn-primary',
|
||||
buttonsStyling: false,
|
||||
onBeforeOpen: function () {
|
||||
Swal.showLoading()
|
||||
timerInterval = setInterval(function () {
|
||||
Swal.getContent().querySelector('strong')
|
||||
.textContent = Swal.getTimerLeft()
|
||||
}, 100)
|
||||
},
|
||||
onClose: function () {
|
||||
clearInterval(timerInterval)
|
||||
}
|
||||
}).then(function (result) {
|
||||
if (
|
||||
// Read more about handling dismissals
|
||||
result.dismiss === Swal.DismissReason.timer
|
||||
) {
|
||||
console.log('I was closed by the timer')
|
||||
}
|
||||
})
|
||||
});
|
||||
|
||||
$('#outside-click').on('click', function () {
|
||||
Swal.fire({
|
||||
title: 'Click outside to close!',
|
||||
text: 'This is a cool message!',
|
||||
allowOutsideClick: true,
|
||||
confirmButtonClass: 'btn btn-primary',
|
||||
buttonsStyling: false,
|
||||
});
|
||||
});
|
||||
|
||||
$('#prompt-function').on('click', function () {
|
||||
Swal.mixin({
|
||||
input: 'text',
|
||||
confirmButtonText: 'Next →',
|
||||
showCancelButton: true,
|
||||
progressSteps: ['1', '2', '3'],
|
||||
confirmButtonClass: 'btn btn-primary',
|
||||
buttonsStyling: false,
|
||||
cancelButtonClass: "btn btn-danger ml-1"
|
||||
}).queue([
|
||||
{
|
||||
title: 'Question 1',
|
||||
text: 'Chaining swal2 modals is easy'
|
||||
},
|
||||
'Question 2',
|
||||
'Question 3'
|
||||
]).then(function (result) {
|
||||
if (result.value) {
|
||||
Swal.fire({
|
||||
title: 'All done!',
|
||||
html:
|
||||
'Your answers: <pre><code>' +
|
||||
JSON.stringify(result.value) +
|
||||
'</code></pre>',
|
||||
confirmButtonText: 'Lovely!'
|
||||
})
|
||||
}
|
||||
})
|
||||
});
|
||||
|
||||
$('#ajax-request').on('click', function () {
|
||||
Swal.fire({
|
||||
title: 'Search for a user',
|
||||
input: 'text',
|
||||
confirmButtonClass: 'btn btn-primary',
|
||||
buttonsStyling: false,
|
||||
inputAttributes: {
|
||||
autocapitalize: 'off'
|
||||
},
|
||||
showCancelButton: true,
|
||||
confirmButtonText: 'Look up',
|
||||
showLoaderOnConfirm: true,
|
||||
cancelButtonClass: "btn btn-danger ml-1",
|
||||
preConfirm: function (login) {
|
||||
return fetch("//api.github.com/users/" + login + "")
|
||||
.then(function (response) {
|
||||
if (!response.ok) {
|
||||
console.log(response)
|
||||
throw new Error(response.statusText)
|
||||
}
|
||||
return response.json()
|
||||
})
|
||||
.catch(function (error) {
|
||||
Swal.showValidationMessage(
|
||||
"Request failed: " + error + ""
|
||||
)
|
||||
})
|
||||
},
|
||||
allowOutsideClick: function () {
|
||||
!Swal.isLoading()
|
||||
}
|
||||
}).then(function (result) {
|
||||
if (result.value) {
|
||||
Swal.fire({
|
||||
title: "" + result.value.login + "'s avatar",
|
||||
imageUrl: result.value.avatar_url
|
||||
})
|
||||
}
|
||||
})
|
||||
});
|
||||
|
||||
// confirm options
|
||||
|
||||
$('#confirm-text').on('click', function () {
|
||||
Swal.fire({
|
||||
title: 'Are you sure?',
|
||||
text: "You won't be able to revert this!",
|
||||
type: 'warning',
|
||||
showCancelButton: true,
|
||||
confirmButtonColor: '#3085d6',
|
||||
cancelButtonColor: '#d33',
|
||||
confirmButtonText: 'Yes, delete it!',
|
||||
confirmButtonClass: 'btn btn-primary',
|
||||
cancelButtonClass: 'btn btn-danger ml-1',
|
||||
buttonsStyling: false,
|
||||
}).then(function (result) {
|
||||
if (result.value) {
|
||||
Swal.fire(
|
||||
{
|
||||
type: "success",
|
||||
title: 'Deleted!',
|
||||
text: 'Your file has been deleted.',
|
||||
confirmButtonClass: 'btn btn-success',
|
||||
}
|
||||
)
|
||||
}
|
||||
})
|
||||
});
|
||||
|
||||
$('#confirm-color').on('click', function () {
|
||||
Swal.fire({
|
||||
title: 'Are you sure?',
|
||||
text: "You won't be able to revert this!",
|
||||
type: 'warning',
|
||||
showCancelButton: true,
|
||||
confirmButtonColor: '#3085d6',
|
||||
cancelButtonColor: '#d33',
|
||||
confirmButtonText: 'Yes, delete it!',
|
||||
confirmButtonClass: 'btn btn-primary',
|
||||
cancelButtonClass: 'btn btn-danger ml-1',
|
||||
buttonsStyling: false,
|
||||
}).then(function (result) {
|
||||
if (result.value) {
|
||||
Swal.fire({
|
||||
type: "success",
|
||||
title: 'Deleted!',
|
||||
text: 'Your file has been deleted.',
|
||||
confirmButtonClass: 'btn btn-success',
|
||||
})
|
||||
}
|
||||
else if (result.dismiss === Swal.DismissReason.cancel) {
|
||||
Swal.fire({
|
||||
title: 'Cancelled',
|
||||
text: 'Your imaginary file is safe :)',
|
||||
type: 'error',
|
||||
confirmButtonClass: 'btn btn-success',
|
||||
})
|
||||
}
|
||||
})
|
||||
});
|
||||
|
||||
});
|
||||
1
public/vendor/dashboard/src/js/scripts/extensions/sweet-alerts.min.js
vendored
Executable file
1
public/vendor/dashboard/src/js/scripts/extensions/sweet-alerts.min.js
vendored
Executable file
File diff suppressed because one or more lines are too long
141
public/vendor/dashboard/src/js/scripts/extensions/toastr.js
vendored
Executable file
141
public/vendor/dashboard/src/js/scripts/extensions/toastr.js
vendored
Executable file
@@ -0,0 +1,141 @@
|
||||
/*=========================================================================================
|
||||
File Name: toastr.js
|
||||
Description: Toastr notifications
|
||||
----------------------------------------------------------------------------------------
|
||||
Item Name: Vuesax HTML Admin Template
|
||||
Version: 1.1
|
||||
Author: Pixinvent
|
||||
Author URL: hhttp://www.themeforest.net/user/pixinvent
|
||||
==========================================================================================*/
|
||||
$(document).ready(function () {
|
||||
|
||||
// Success Type
|
||||
$('#type-success').on('click', function () {
|
||||
toastr.success('Have fun storming the castle!', 'Miracle Max Says');
|
||||
});
|
||||
|
||||
// Info Type
|
||||
$('#type-info').on('click', function () {
|
||||
toastr.info('We do have the Kapua suite available.', 'Turtle Bay Resort');
|
||||
});
|
||||
|
||||
// Warning Type
|
||||
$('#type-warning').on('click', function () {
|
||||
toastr.warning('My name is Inigo Montoya. You killed my father, prepare to die!');
|
||||
});
|
||||
|
||||
// Error Type
|
||||
$('#type-error').on('click', function () {
|
||||
toastr.error('I do not think that word means what you think it means.', 'Inconceivable!');
|
||||
});
|
||||
|
||||
// Position Top Left
|
||||
$('#position-top-left').on('click', function () {
|
||||
toastr.info('I do not think that word means what you think it means.', 'Top Left!', { positionClass: 'toast-top-left', containerId: 'toast-top-left' });
|
||||
});
|
||||
|
||||
// Position Top Center
|
||||
$('#position-top-center').on('click', function () {
|
||||
toastr.info('I do not think that word means what you think it means.', 'Top Center!', { positionClass: 'toast-top-center', containerId: 'toast-top-center' });
|
||||
});
|
||||
|
||||
// Position Top Right
|
||||
$('#position-top-right').on('click', function () {
|
||||
toastr.info('I do not think that word means what you think it means.', 'Top Right!', { positionClass: 'toast-top-right', containerId: 'toast-top-right' });
|
||||
});
|
||||
|
||||
// Position Top Full Width
|
||||
$('#position-top-full').on('click', function () {
|
||||
toastr.info('I do not think that word means what you think it means.', 'Top Full Width!', { positionClass: 'toast-top-full-width', });
|
||||
});
|
||||
|
||||
// Position Bottom Left
|
||||
$('#position-bottom-left').on('click', function () {
|
||||
toastr.info('I do not think that word means what you think it means.', 'Bottom Left!', { positionClass: 'toast-bottom-left', containerId: 'toast-bottom-left' });
|
||||
});
|
||||
|
||||
// Position Bottom Center
|
||||
$('#position-bottom-center').on('click', function () {
|
||||
toastr.info('I do not think that word means what you think it means.', 'Bottom Center!', { positionClass: 'toast-bottom-center', containerId: 'toast-bottom-center' });
|
||||
});
|
||||
|
||||
// Position Bottom Right
|
||||
$('#position-bottom-right').on('click', function () {
|
||||
toastr.info('I do not think that word means what you think it means.', 'Bottom Right!', { positionClass: 'toast-bottom-right', containerId: 'toast-bottom-right' });
|
||||
});
|
||||
|
||||
// Position Bottom Full Width
|
||||
$('#position-bottom-full').on('click', function () {
|
||||
toastr.info('I do not think that word means what you think it means.', 'Bottom Full Width!', { positionClass: 'toast-bottom-full-width' });
|
||||
});
|
||||
|
||||
// Text Notification
|
||||
$('#text-notification').on('click', function () {
|
||||
toastr.info('Have fun storming the castle!', 'Miracle Max Says');
|
||||
});
|
||||
|
||||
// Close Button
|
||||
$('#close-button').on('click', function () {
|
||||
toastr.success('Have fun storming the castle!', 'With Close Button', { "closeButton": true });
|
||||
});
|
||||
|
||||
// Progress Bar
|
||||
$('#progress-bar').on('click', function () {
|
||||
toastr.warning('Have fun storming the castle!', 'Progress Bar', { "progressBar": true });
|
||||
});
|
||||
|
||||
// Clear Toast Button
|
||||
$('#clear-toast-btn').on('click', function () {
|
||||
toastr.error('Clear itself?<br /><br /><button type="button" class="btn btn-primary clear">Yes</button>', 'Clear Toast Button');
|
||||
});
|
||||
|
||||
|
||||
// Immediately remove current toasts without using animation
|
||||
$('#show-remove-toast').on('click', function () {
|
||||
toastr.info('Have fun storming the castle!', 'Miracle Max Says');
|
||||
});
|
||||
|
||||
$('#remove-toast').on('click', function () {
|
||||
toastr.remove();
|
||||
});
|
||||
|
||||
// Remove current toasts using animation
|
||||
$('#show-clear-toast').on('click', function () {
|
||||
toastr.info('Have fun storming the castle!', 'Miracle Max Says');
|
||||
});
|
||||
|
||||
$('#clear-toast').on('click', function () {
|
||||
toastr.clear();
|
||||
});
|
||||
|
||||
|
||||
// Fast Duration
|
||||
$('#fast-duration').on('click', function () {
|
||||
toastr.success('Have fun storming the castle!', 'Fast Duration', { "showDuration": 500 });
|
||||
});
|
||||
|
||||
// Slow Duration
|
||||
$('#slow-duration').on('click', function () {
|
||||
toastr.warning('Have fun storming the castle!', 'Slow Duration', { "hideDuration": 3000 });
|
||||
});
|
||||
|
||||
// Timeout
|
||||
$('#timeout').on('click', function () {
|
||||
toastr.error('I do not think that word means what you think it means.', 'Timeout!', { "timeOut": 5000 });
|
||||
});
|
||||
|
||||
// Sticky
|
||||
$('#sticky').on('click', function () {
|
||||
toastr.info('I do not think that word means what you think it means.', 'Sticky!', { "timeOut": 0 });
|
||||
});
|
||||
|
||||
// Slide Down / Slide Up
|
||||
$('#slide-toast').on('click', function () {
|
||||
toastr.success('I do not think that word means what you think it means.', 'Slide Down / Slide Up!', { "showMethod": "slideDown", "hideMethod": "slideUp", timeOut: 2000 });
|
||||
});
|
||||
|
||||
// Fade In / Fade Out
|
||||
$('#fade-toast').on('click', function () {
|
||||
toastr.success('I do not think that word means what you think it means.', 'Slide Down / Slide Up!', { "showMethod": "fadeIn", "hideMethod": "fadeOut", timeOut: 2000 });
|
||||
});
|
||||
});
|
||||
115
public/vendor/dashboard/src/js/scripts/extensions/tour.js
vendored
Executable file
115
public/vendor/dashboard/src/js/scripts/extensions/tour.js
vendored
Executable file
@@ -0,0 +1,115 @@
|
||||
/*=========================================================================================
|
||||
File Name: tour.js
|
||||
Description: tour
|
||||
----------------------------------------------------------------------------------------
|
||||
Item Name: Vuesax HTML Admin Template
|
||||
Version: 1.1
|
||||
Author: Pixinvent
|
||||
Author URL: hhttp://www.themeforest.net/user/pixinvent
|
||||
==========================================================================================*/
|
||||
|
||||
$(document).ready(function () {
|
||||
displayTour();
|
||||
$(window).resize(displayTour)
|
||||
var tour = new Shepherd.Tour({
|
||||
classes: 'shadow-md bg-purple-dark',
|
||||
scrollTo: true
|
||||
})
|
||||
|
||||
// tour steps
|
||||
tour.addStep('step-1', {
|
||||
text: 'Here is page title.',
|
||||
attachTo: '.breadcrumbs-top .content-header-title bottom',
|
||||
buttons: [
|
||||
|
||||
{
|
||||
text: "Skip",
|
||||
action: tour.complete
|
||||
},
|
||||
{
|
||||
text: 'Next',
|
||||
action: tour.next
|
||||
},
|
||||
]
|
||||
});
|
||||
|
||||
tour.addStep('step-2', {
|
||||
text: 'Check your notifications from here.',
|
||||
attachTo: '.dropdown-notification .icon-bell bottom',
|
||||
buttons: [
|
||||
|
||||
{
|
||||
text: "Skip",
|
||||
action: tour.complete
|
||||
},
|
||||
|
||||
{
|
||||
text: "previous",
|
||||
action: tour.back
|
||||
},
|
||||
{
|
||||
text: 'Next',
|
||||
action: tour.next
|
||||
},
|
||||
]
|
||||
});
|
||||
|
||||
tour.addStep('step-3', {
|
||||
text: 'Click here for user options.',
|
||||
attachTo: '.dropdown-user-link img bottom',
|
||||
buttons: [
|
||||
|
||||
{
|
||||
text: "Skip",
|
||||
action: tour.complete
|
||||
},
|
||||
|
||||
{
|
||||
text: "previous",
|
||||
action: tour.back
|
||||
},
|
||||
{
|
||||
text: 'Next',
|
||||
action: tour.next
|
||||
},
|
||||
]
|
||||
});
|
||||
|
||||
tour.addStep('step-4', {
|
||||
text: 'Buy this awesomeness at affordable price!',
|
||||
attachTo: '.buy-now bottom',
|
||||
buttons: [
|
||||
|
||||
{
|
||||
text: "previous",
|
||||
action: tour.back
|
||||
},
|
||||
|
||||
{
|
||||
text: "Finish",
|
||||
action: tour.complete
|
||||
},
|
||||
]
|
||||
});
|
||||
|
||||
// function to remove tour on small screen
|
||||
function displayTour() {
|
||||
window.resizeEvt;
|
||||
if ($(window).width() > 576) {
|
||||
$('#tour').on("click", function () {
|
||||
clearTimeout(window.resizeEvt);
|
||||
tour.start();
|
||||
})
|
||||
}
|
||||
else {
|
||||
$('#tour').on("click", function () {
|
||||
clearTimeout(window.resizeEvt);
|
||||
tour.cancel()
|
||||
window.resizeEvt = setTimeout(function () {
|
||||
alert("Tour only works for large screens!");
|
||||
}, 250);;
|
||||
})
|
||||
}
|
||||
}
|
||||
|
||||
});
|
||||
69
public/vendor/dashboard/src/js/scripts/extensions/unslider.js
vendored
Executable file
69
public/vendor/dashboard/src/js/scripts/extensions/unslider.js
vendored
Executable file
@@ -0,0 +1,69 @@
|
||||
/*=========================================================================================
|
||||
File Name: sweet-alerts.js
|
||||
Description: A beautiful replacement for javascript alerts
|
||||
----------------------------------------------------------------------------------------
|
||||
Item Name: Vuesax HTML Admin Template
|
||||
Version: 1.1
|
||||
Author: PIXINVENT
|
||||
Author URL: http://www.themeforest.net/user/pixinvent
|
||||
==========================================================================================*/
|
||||
$(document).ready(function(){
|
||||
|
||||
// RTL Support
|
||||
var rtl = false;
|
||||
if($('html').data('textdirection') == 'rtl'){
|
||||
rtl = true;
|
||||
}
|
||||
if(rtl === true){
|
||||
$("#default-slider").attr('dir', 'rtl');
|
||||
$("#automatic-slider").attr('dir', 'rtl');
|
||||
$("#vertical-slider").attr('dir', 'rtl');
|
||||
$("#automcatic-anim-slider").attr('dir', 'rtl');
|
||||
$("#infinite-slider").attr('dir', 'rtl');
|
||||
$("#manual-slider").attr('dir', 'rtl');
|
||||
$("#manual").attr('dir', 'rtl');
|
||||
}
|
||||
|
||||
|
||||
// Default
|
||||
$("#default-slider").unslider({
|
||||
animation: 'fade'
|
||||
});
|
||||
|
||||
// Automatic
|
||||
$("#automatic-slider").unslider({
|
||||
autoplay: true,
|
||||
animation: "fade"
|
||||
});
|
||||
|
||||
// Vertical
|
||||
$("#vertical-slider").unslider({
|
||||
animation: 'vertical',
|
||||
autoplay: true,
|
||||
infinite: true
|
||||
});
|
||||
|
||||
// Automatic Animation
|
||||
$("#automcatic-anim-slider").unslider({
|
||||
animation: 'fade',
|
||||
autoplay: true,
|
||||
arrows: false
|
||||
});
|
||||
|
||||
// Infinite
|
||||
$("#infinite-slider").unslider({
|
||||
animation: "fade",
|
||||
infinite: true
|
||||
});
|
||||
|
||||
// Manual Slider
|
||||
$("#manual-slider").unslider({
|
||||
keys: false,
|
||||
arrows: false,
|
||||
nav: false
|
||||
});
|
||||
|
||||
$('#manual').on('keyup', function() {
|
||||
$('.manual-slider').unslider('animate:' + $(this).val());
|
||||
});
|
||||
});
|
||||
26
public/vendor/dashboard/src/js/scripts/footer.js
vendored
Executable file
26
public/vendor/dashboard/src/js/scripts/footer.js
vendored
Executable file
@@ -0,0 +1,26 @@
|
||||
/*=========================================================================================
|
||||
File Name: footer.js
|
||||
Description: Template footer js.
|
||||
----------------------------------------------------------------------------------------
|
||||
Item Name: Vuesax HTML Admin Template
|
||||
Version: 1.1
|
||||
Author: Pixinvent
|
||||
Author URL: hhttp://www.themeforest.net/user/pixinvent
|
||||
==========================================================================================*/
|
||||
|
||||
//Check to see if the window is top if not then display button
|
||||
$(document).ready(function(){
|
||||
$(window).scroll(function(){
|
||||
if ($(this).scrollTop() > 400) {
|
||||
$('.scroll-top').fadeIn();
|
||||
} else {
|
||||
$('.scroll-top').fadeOut();
|
||||
}
|
||||
});
|
||||
|
||||
//Click event to scroll to top
|
||||
$('.scroll-top').click(function(){
|
||||
$('html, body').animate({scrollTop : 0},1000);
|
||||
});
|
||||
|
||||
});
|
||||
37
public/vendor/dashboard/src/js/scripts/forms/basic-inputs.js
vendored
Executable file
37
public/vendor/dashboard/src/js/scripts/forms/basic-inputs.js
vendored
Executable file
@@ -0,0 +1,37 @@
|
||||
/*=========================================================================================
|
||||
File Name: basic-inputs.js
|
||||
Description: Input field js for label type
|
||||
----------------------------------------------------------------------------------------
|
||||
Item Name: Vuesax HTML Admin Template
|
||||
Version: 1.1
|
||||
Author: Pixinvent
|
||||
Author URL: hhttp://www.themeforest.net/user/pixinvent
|
||||
==========================================================================================*/
|
||||
|
||||
(function(window, document, $) {
|
||||
'use strict';
|
||||
var $html = $('html');
|
||||
|
||||
//label Positions
|
||||
$(".labelUp").labelinplace();
|
||||
$(".labelDown").labelinplace({
|
||||
labelPosition: "down"
|
||||
});
|
||||
|
||||
// Label Icons
|
||||
$(".labelIcon").labelinplace({
|
||||
labelArrowRight: ' <i class="icon-hand-o-right"></i> ',
|
||||
labelArrowDown: ' <i class="icon-hand-o-down"></i> ',
|
||||
labelArrowUp: ' <i class="icon-hand-o-up"></i> '
|
||||
});
|
||||
|
||||
// Icons After Label
|
||||
$(".labelIconAfter").labelinplace({
|
||||
labelArrowRight: ' <i class="icon-caret-right"></i> ',
|
||||
labelArrowDown: ' <i class="icon-caret-down"></i> ',
|
||||
labelArrowUp: ' <i class="icon-caret-up"></i> ',
|
||||
labelIconPosition: "after",
|
||||
inputAttr: "id"
|
||||
});
|
||||
|
||||
})(window, document, jQuery);
|
||||
69
public/vendor/dashboard/src/js/scripts/forms/form-maxlength.js
vendored
Executable file
69
public/vendor/dashboard/src/js/scripts/forms/form-maxlength.js
vendored
Executable file
@@ -0,0 +1,69 @@
|
||||
/*=========================================================================================
|
||||
File Name: form-maxlength.js
|
||||
Description: Bootstrap-Maxlength uses a Twitter Bootstrap label to show a visual
|
||||
feedback to the user about the maximum length of the field where the user is
|
||||
inserting text. Uses the HTML5 attribute "maxlength" to work.
|
||||
----------------------------------------------------------------------------------------
|
||||
Item Name: Vuesax HTML Admin Template
|
||||
Version: 1.1
|
||||
Author: Pixinvent
|
||||
Author URL: hhttp://www.themeforest.net/user/pixinvent
|
||||
==========================================================================================*/
|
||||
(function (window, document, $) {
|
||||
'use strict';
|
||||
|
||||
var $danger = "#ea5455";
|
||||
var $primary = "#7367f0";
|
||||
var $textcolor = "#4e5154";
|
||||
|
||||
$(".char-textarea").on("keyup", function (event) {
|
||||
checkTextAreaMaxLength(this, event);
|
||||
// to later change text color in dark layout
|
||||
$(this).addClass("active")
|
||||
});
|
||||
|
||||
/*
|
||||
Checks the MaxLength of the Textarea
|
||||
-----------------------------------------------------
|
||||
@prerequisite: textBox = textarea dom element
|
||||
e = textarea event
|
||||
length = Max length of characters
|
||||
*/
|
||||
function checkTextAreaMaxLength(textBox, e) {
|
||||
|
||||
var maxLength = parseInt($(textBox).data("length"));
|
||||
|
||||
|
||||
if (!checkSpecialKeys(e)) {
|
||||
if (textBox.value.length < maxLength - 1) textBox.value = textBox.value.substring(0, maxLength);
|
||||
}
|
||||
$(".char-count").html(textBox.value.length);
|
||||
|
||||
if (textBox.value.length > maxLength) {
|
||||
$(".counter-value").css("background-color", $danger);
|
||||
$(".char-textarea").css("color", $danger);
|
||||
// to change text color after limit is maxedout out
|
||||
$(".char-textarea").addClass("max-limit")
|
||||
}
|
||||
else {
|
||||
$(".counter-value").css("background-color", $primary);
|
||||
$(".char-textarea").css("color", $textcolor);
|
||||
$(".char-textarea").removeClass("max-limit")
|
||||
|
||||
}
|
||||
|
||||
return true;
|
||||
}
|
||||
/*
|
||||
Checks if the keyCode pressed is inside special chars
|
||||
-------------------------------------------------------
|
||||
@prerequisite: e = e.keyCode object for the key pressed
|
||||
*/
|
||||
function checkSpecialKeys(e) {
|
||||
if (e.keyCode != 8 && e.keyCode != 46 && e.keyCode != 37 && e.keyCode != 38 && e.keyCode != 39 && e.keyCode != 40)
|
||||
return false;
|
||||
else
|
||||
return true;
|
||||
}
|
||||
|
||||
})(window, document, jQuery);
|
||||
24
public/vendor/dashboard/src/js/scripts/forms/form-tooltip-valid.js
vendored
Executable file
24
public/vendor/dashboard/src/js/scripts/forms/form-tooltip-valid.js
vendored
Executable file
@@ -0,0 +1,24 @@
|
||||
/*=========================================================================================
|
||||
File Name: form-tooltip-valid.js
|
||||
Description: form tooltip validation etc..
|
||||
----------------------------------------------------------------------------------------
|
||||
Item Name: Vuesax HTML Admin Template
|
||||
Version: 1.1
|
||||
Author: Pixinvent
|
||||
Author URL: hhttp://www.themeforest.net/user/pixinvent
|
||||
==========================================================================================*/
|
||||
(function(window, document, $) {
|
||||
'use strict';
|
||||
|
||||
// Fetch all the forms we want to apply custom Bootstrap validation styles to
|
||||
// Loop over them and prevent submission
|
||||
$("button").click(function () {
|
||||
var form = $(".needs-validation");
|
||||
if (form[0].checkValidity() === false) {
|
||||
event.preventDefault();
|
||||
event.stopPropagation();
|
||||
}
|
||||
form.addClass('was-validated');
|
||||
});
|
||||
|
||||
})(window, document, jQuery);
|
||||
77
public/vendor/dashboard/src/js/scripts/forms/number-input.js
vendored
Executable file
77
public/vendor/dashboard/src/js/scripts/forms/number-input.js
vendored
Executable file
@@ -0,0 +1,77 @@
|
||||
/*=========================================================================================
|
||||
File Name: input-groups.js
|
||||
Description: Input Groups js
|
||||
----------------------------------------------------------------------------------------
|
||||
Item Name: Vuesax HTML Admin Template
|
||||
Version: 1.1
|
||||
Author: PIXINVENT
|
||||
Author URL: http://www.themeforest.net/user/pixinvent
|
||||
==========================================================================================*/
|
||||
|
||||
(function (window, document, $) {
|
||||
'use strict';
|
||||
var $html = $('html');
|
||||
|
||||
// Default Spin
|
||||
$(".touchspin").TouchSpin({
|
||||
buttondown_class: "btn btn-primary",
|
||||
buttonup_class: "btn btn-primary",
|
||||
});
|
||||
|
||||
// Icon Change
|
||||
$(".touchspin-icon").TouchSpin({
|
||||
buttondown_txt: '<i class="feather icon-chevron-down"></i>',
|
||||
buttonup_txt: '<i class="feather icon-chevron-up"></i>'
|
||||
});
|
||||
|
||||
// Min - Max
|
||||
|
||||
var touchspinValue = $(".touchspin-min-max"),
|
||||
counterMin = 15,
|
||||
counterMax = 21;
|
||||
if (touchspinValue.length > 0) {
|
||||
touchspinValue.TouchSpin({
|
||||
min: counterMin,
|
||||
max: counterMax
|
||||
}).on('touchspin.on.startdownspin', function () {
|
||||
var $this = $(this);
|
||||
$('.bootstrap-touchspin-up').removeClass("disabled-max-min");
|
||||
if ($this.val() == counterMin) {
|
||||
$(this).siblings().find('.bootstrap-touchspin-down').addClass("disabled-max-min");
|
||||
}
|
||||
}).on('touchspin.on.startupspin', function () {
|
||||
var $this = $(this);
|
||||
$('.bootstrap-touchspin-down').removeClass("disabled-max-min");
|
||||
if ($this.val() == counterMax) {
|
||||
$(this).siblings().find('.bootstrap-touchspin-up').addClass("disabled-max-min");
|
||||
}
|
||||
});
|
||||
}
|
||||
|
||||
|
||||
// Step
|
||||
$(".touchspin-step").TouchSpin({
|
||||
step: 5
|
||||
});
|
||||
|
||||
// Color Options
|
||||
$(".touchspin-color").each(function (index) {
|
||||
var down = "btn btn-primary",
|
||||
up = "btn btn-primary",
|
||||
$this = $(this);
|
||||
if ($this.data('bts-button-down-class')) {
|
||||
down = $this.data('bts-button-down-class');
|
||||
}
|
||||
if ($this.data('bts-button-up-class')) {
|
||||
up = $this.data('bts-button-up-class');
|
||||
}
|
||||
$this.TouchSpin({
|
||||
mousewheel: false,
|
||||
buttondown_class: down,
|
||||
buttonup_class: up,
|
||||
buttondown_txt: '<i class="feather icon-minus"></i>',
|
||||
buttonup_txt: '<i class="feather icon-plus"></i>'
|
||||
});
|
||||
});
|
||||
|
||||
})(window, document, jQuery);
|
||||
248
public/vendor/dashboard/src/js/scripts/forms/select/form-select2.js
vendored
Executable file
248
public/vendor/dashboard/src/js/scripts/forms/select/form-select2.js
vendored
Executable file
@@ -0,0 +1,248 @@
|
||||
/*=========================================================================================
|
||||
File Name: form-select2.js
|
||||
Description: Select2 is a jQuery-based replacement for select boxes.
|
||||
It supports searching, remote data sets, and pagination of results.
|
||||
----------------------------------------------------------------------------------------
|
||||
Item Name: Vuesax HTML Admin Template
|
||||
Version: 1.1
|
||||
Author: Pixinvent
|
||||
Author URL: hhttp://www.themeforest.net/user/pixinvent
|
||||
==========================================================================================*/
|
||||
(function(window, document, $) {
|
||||
'use strict';
|
||||
|
||||
// Basic Select2 select
|
||||
$(".select2").select2();
|
||||
|
||||
// Select With Icon
|
||||
$(".select2-icons").select2({
|
||||
minimumResultsForSearch: Infinity,
|
||||
templateResult: iconFormat,
|
||||
templateSelection: iconFormat,
|
||||
escapeMarkup: function(es) { return es; }
|
||||
});
|
||||
|
||||
// Format icon
|
||||
function iconFormat(icon) {
|
||||
var originalOption = icon.element;
|
||||
if (!icon.id) { return icon.text; }
|
||||
var $icon = "<i class='" + $(icon.element).data('icon') + "'></i>" + icon.text;
|
||||
|
||||
return $icon;
|
||||
}
|
||||
|
||||
|
||||
// Limiting the number of selections
|
||||
$(".max-length").select2({
|
||||
maximumSelectionLength: 2,
|
||||
placeholder: "Select maximum 2 items"
|
||||
});
|
||||
|
||||
|
||||
// Programmatic access
|
||||
var $select = $(".js-example-programmatic").select2();
|
||||
var $selectMulti = $(".js-example-programmatic-multi").select2();
|
||||
$selectMulti.select2({
|
||||
placeholder: "Programmatic Events"
|
||||
});
|
||||
$(".js-programmatic-set-val").on("click", function () { $select.val("CA").trigger("change"); });
|
||||
|
||||
$(".js-programmatic-open").on("click", function () { $select.select2("open"); });
|
||||
$(".js-programmatic-close").on("click", function () { $select.select2("close"); });
|
||||
|
||||
$(".js-programmatic-init").on("click", function () { $select.select2(); });
|
||||
$(".js-programmatic-destroy").on("click", function () { $select.select2("destroy"); });
|
||||
|
||||
$(".js-programmatic-multi-set-val").on("click", function () { $selectMulti.val(["CA", "AL"]).trigger("change"); });
|
||||
$(".js-programmatic-multi-clear").on("click", function () { $selectMulti.val(null).trigger("change"); });
|
||||
|
||||
// Loading array data
|
||||
var data = [
|
||||
{ id: 0, text: 'enhancement' },
|
||||
{ id: 1, text: 'bug' },
|
||||
{ id: 2, text: 'duplicate' },
|
||||
{ id: 3, text: 'invalid' },
|
||||
{ id: 4, text: 'wontfix' }
|
||||
];
|
||||
|
||||
$(".select2-data-array").select2({
|
||||
data: data
|
||||
});
|
||||
|
||||
// Loading remote data
|
||||
$(".select2-data-ajax").select2({
|
||||
ajax: {
|
||||
url: "https://api.github.com/search/repositories",
|
||||
dataType: 'json',
|
||||
delay: 250,
|
||||
data: function (params) {
|
||||
return {
|
||||
q: params.term, // search term
|
||||
page: params.page
|
||||
};
|
||||
},
|
||||
processResults: function (data, params) {
|
||||
// parse the results into the format expected by Select2
|
||||
// since we are using custom formatting functions we do not need to
|
||||
// alter the remote JSON data, except to indicate that infinite
|
||||
// scrolling can be used
|
||||
params.page = params.page || 1;
|
||||
|
||||
return {
|
||||
results: data.items,
|
||||
pagination: {
|
||||
more: (params.page * 30) < data.total_count
|
||||
}
|
||||
};
|
||||
},
|
||||
cache: true
|
||||
},
|
||||
placeholder: 'Search for a repository',
|
||||
escapeMarkup: function (markup) { return markup; }, // let our custom formatter work
|
||||
minimumInputLength: 1,
|
||||
templateResult: formatRepo,
|
||||
templateSelection: formatRepoSelection
|
||||
});
|
||||
|
||||
function formatRepo (repo) {
|
||||
if (repo.loading) return repo.text;
|
||||
|
||||
var markup = "<div class='select2-result-repository clearfix'>" +
|
||||
"<div class='select2-result-repository__avatar'><img src='" + repo.owner.avatar_url + "' /></div>" +
|
||||
"<div class='select2-result-repository__meta'>" +
|
||||
"<div class='select2-result-repository__title'>" + repo.full_name + "</div>";
|
||||
|
||||
if (repo.description) {
|
||||
markup += "<div class='select2-result-repository__description'>" + repo.description + "</div>";
|
||||
}
|
||||
|
||||
markup += "<div class='select2-result-repository__statistics'>" +
|
||||
"<div class='select2-result-repository__forks'><i class='icon-code-fork mr-0'></i> " + repo.forks_count + " Forks</div>" +
|
||||
"<div class='select2-result-repository__stargazers'><i class='icon-star5 mr-0'></i> " + repo.stargazers_count + " Stars</div>" +
|
||||
"<div class='select2-result-repository__watchers'><i class='icon-eye mr-0'></i> " + repo.watchers_count + " Watchers</div>" +
|
||||
"</div>" +
|
||||
"</div></div>";
|
||||
|
||||
return markup;
|
||||
}
|
||||
|
||||
function formatRepoSelection (repo) {
|
||||
return repo.full_name || repo.text;
|
||||
}
|
||||
|
||||
|
||||
// Customizing how results are matched
|
||||
function matchStart (term, text) {
|
||||
if (text.toUpperCase().indexOf(term.toUpperCase()) === 0) {
|
||||
return true;
|
||||
}
|
||||
|
||||
return false;
|
||||
}
|
||||
|
||||
$.fn.select2.amd.require(['select2/compat/matcher'], function (oldMatcher) {
|
||||
$(".select2-customize-result").select2({
|
||||
placeholder: "Search by 'a'",
|
||||
matcher: oldMatcher(matchStart)
|
||||
});
|
||||
});
|
||||
|
||||
// Theme support
|
||||
$(".select2-theme").select2({
|
||||
placeholder: "Classic Theme",
|
||||
theme: "classic"
|
||||
});
|
||||
|
||||
|
||||
// Sizing options
|
||||
|
||||
// Large
|
||||
$('.select2-size-lg').select2({
|
||||
containerCssClass: 'select-lg'
|
||||
});
|
||||
|
||||
// Small
|
||||
$('.select2-size-sm').select2({
|
||||
containerCssClass: 'select-sm'
|
||||
});
|
||||
|
||||
// Color Options
|
||||
|
||||
// Background Color
|
||||
$('.select2-bg').each(function(i, obj) {
|
||||
var variation = "",
|
||||
textVariation = "",
|
||||
textColor = "";
|
||||
var color = $(this).data('bgcolor');
|
||||
variation = $(this).data('bgcolor-variation');
|
||||
textVariation = $(this).data('text-variation');
|
||||
textColor = $(this).data('text-color');
|
||||
if(textVariation !== ""){
|
||||
textVariation = " "+textVariation;
|
||||
}
|
||||
if(variation !== ""){
|
||||
variation = " bg-"+variation;
|
||||
}
|
||||
var className = "bg-"+color + variation + " " + textColor + textVariation + " border-"+color + ' border-darken-2 ';
|
||||
|
||||
$(this).select2({
|
||||
containerCssClass: className
|
||||
});
|
||||
});
|
||||
|
||||
// Border Color
|
||||
$('.select2-border').each(function(i, obj) {
|
||||
var variation = "",
|
||||
textVariation = "",
|
||||
textColor = "";
|
||||
var color = $(this).data('border-color');
|
||||
textVariation = $(this).data('text-variation');
|
||||
variation = $(this).data('border-variation');
|
||||
textColor = $(this).data('text-color');
|
||||
if(textVariation !== ""){
|
||||
textVariation = " "+textVariation;
|
||||
}
|
||||
if(variation !== ""){
|
||||
variation = " border-"+variation;
|
||||
}
|
||||
|
||||
var className = "border-"+color + " " +variation + " " + textColor + textVariation;
|
||||
|
||||
$(this).select2({
|
||||
containerCssClass: className
|
||||
});
|
||||
});
|
||||
|
||||
// Full Background Color
|
||||
$('.select2-full-bg').each(function(i, obj) {
|
||||
var variation = "",
|
||||
textVariation = "",
|
||||
textColor = "";
|
||||
var color = $(this).data('bgcolor');
|
||||
variation = $(this).data('bgcolor-variation');
|
||||
textVariation = $(this).data('text-variation');
|
||||
textColor = $(this).data('text-color');
|
||||
if(variation !== ""){
|
||||
variation = " bg-"+variation;
|
||||
}
|
||||
if(textVariation !== ""){
|
||||
textVariation = " "+textVariation;
|
||||
}
|
||||
var className = "bg-"+color + variation + " " + textColor + textVariation + " border-"+color + ' border-darken-2 ';
|
||||
|
||||
$(this).select2({
|
||||
containerCssClass: className,
|
||||
dropdownCssClass: className
|
||||
});
|
||||
});
|
||||
|
||||
$('select[data-text-color]').each(function(i, obj) {
|
||||
var text = $(this).data('text-color'),textVariation;
|
||||
textVariation = $(this).data('text-variation');
|
||||
if(textVariation !== ""){
|
||||
textVariation = " "+textVariation;
|
||||
}
|
||||
$(this).next(".select2").find(".select2-selection__rendered").addClass(text+textVariation);
|
||||
});
|
||||
|
||||
})(window, document, jQuery);
|
||||
17
public/vendor/dashboard/src/js/scripts/forms/validation/form-validation.js
vendored
Executable file
17
public/vendor/dashboard/src/js/scripts/forms/validation/form-validation.js
vendored
Executable file
@@ -0,0 +1,17 @@
|
||||
/*=========================================================================================
|
||||
File Name: form-validation.js
|
||||
Description: jquery bootsreap validation js
|
||||
----------------------------------------------------------------------------------------
|
||||
Item Name: Vuesax HTML Admin Template
|
||||
Version: 1.1
|
||||
Author: PIXINVENT
|
||||
Author URL: http://www.themeforest.net/user/pixinvent
|
||||
==========================================================================================*/
|
||||
|
||||
(function(window, document, $) {
|
||||
'use strict';
|
||||
|
||||
// Input, Select, Textarea validations except submit button
|
||||
$("input,select,textarea").not("[type=submit]").jqBootstrapValidation();
|
||||
|
||||
})(window, document, jQuery);
|
||||
95
public/vendor/dashboard/src/js/scripts/forms/wizard-steps.js
vendored
Executable file
95
public/vendor/dashboard/src/js/scripts/forms/wizard-steps.js
vendored
Executable file
@@ -0,0 +1,95 @@
|
||||
/*=========================================================================================
|
||||
File Name: wizard-steps.js
|
||||
Description: wizard steps page specific js
|
||||
----------------------------------------------------------------------------------------
|
||||
Item Name: Vuesax HTML Admin Template
|
||||
Version: 1.1
|
||||
Author: PIXINVENT
|
||||
Author URL: http://www.themeforest.net/user/pixinvent
|
||||
==========================================================================================*/
|
||||
|
||||
// Wizard tabs with numbers setup
|
||||
$(".number-tab-steps").steps({
|
||||
headerTag: "h6",
|
||||
bodyTag: "fieldset",
|
||||
transitionEffect: "fade",
|
||||
titleTemplate: '<span class="step">#index#</span> #title#',
|
||||
labels: {
|
||||
finish: 'Submit'
|
||||
},
|
||||
onFinished: function (event, currentIndex) {
|
||||
alert("Form submitted.");
|
||||
}
|
||||
});
|
||||
|
||||
// Wizard tabs with icons setup
|
||||
$(".icons-tab-steps").steps({
|
||||
headerTag: "h6",
|
||||
bodyTag: "fieldset",
|
||||
transitionEffect: "fade",
|
||||
titleTemplate: '<span class="step">#index#</span> #title#',
|
||||
labels: {
|
||||
finish: 'Submit'
|
||||
},
|
||||
onFinished: function (event, currentIndex) {
|
||||
alert("Form submitted.");
|
||||
}
|
||||
});
|
||||
|
||||
// Validate steps wizard
|
||||
|
||||
// Show form
|
||||
var form = $(".steps-validation").show();
|
||||
|
||||
$(".steps-validation").steps({
|
||||
headerTag: "h6",
|
||||
bodyTag: "fieldset",
|
||||
transitionEffect: "fade",
|
||||
titleTemplate: '<span class="step">#index#</span> #title#',
|
||||
labels: {
|
||||
finish: 'Submit'
|
||||
},
|
||||
onStepChanging: function (event, currentIndex, newIndex) {
|
||||
// Allways allow previous action even if the current form is not valid!
|
||||
if (currentIndex > newIndex) {
|
||||
return true;
|
||||
}
|
||||
|
||||
// Needed in some cases if the user went back (clean up)
|
||||
if (currentIndex < newIndex) {
|
||||
// To remove error styles
|
||||
form.find(".body:eq(" + newIndex + ") label.error").remove();
|
||||
form.find(".body:eq(" + newIndex + ") .error").removeClass("error");
|
||||
}
|
||||
form.validate().settings.ignore = ":disabled,:hidden";
|
||||
return form.valid();
|
||||
},
|
||||
onFinishing: function (event, currentIndex) {
|
||||
form.validate().settings.ignore = ":disabled";
|
||||
return form.valid();
|
||||
},
|
||||
onFinished: function (event, currentIndex) {
|
||||
alert("Submitted!");
|
||||
}
|
||||
});
|
||||
|
||||
// Initialize validation
|
||||
$(".steps-validation").validate({
|
||||
ignore: 'input[type=hidden]', // ignore hidden fields
|
||||
errorClass: 'danger',
|
||||
successClass: 'success',
|
||||
highlight: function (element, errorClass) {
|
||||
$(element).removeClass(errorClass);
|
||||
},
|
||||
unhighlight: function (element, errorClass) {
|
||||
$(element).removeClass(errorClass);
|
||||
},
|
||||
errorPlacement: function (error, element) {
|
||||
error.insertAfter(element);
|
||||
},
|
||||
rules: {
|
||||
email: {
|
||||
email: true
|
||||
}
|
||||
}
|
||||
});
|
||||
41
public/vendor/dashboard/src/js/scripts/modal/components-modal.js
vendored
Executable file
41
public/vendor/dashboard/src/js/scripts/modal/components-modal.js
vendored
Executable file
@@ -0,0 +1,41 @@
|
||||
/*=========================================================================================
|
||||
File Name: components-modal.js
|
||||
Description: Modals are streamlined, but flexible, dialog prompts with the minimum
|
||||
required functionality and smart defaults.
|
||||
----------------------------------------------------------------------------------------
|
||||
Item Name: Vuesax HTML Admin Template
|
||||
Version: 1.1
|
||||
Author: Pixinvent
|
||||
Author URL: hhttp://www.themeforest.net/user/pixinvent
|
||||
==========================================================================================*/
|
||||
(function(window, document, $) {
|
||||
'use strict';
|
||||
|
||||
// onShow event
|
||||
$('#onshowbtn').on('click', function() {
|
||||
$('#onshow').on('show.bs.modal', function() {
|
||||
alert('onShow event fired.');
|
||||
});
|
||||
});
|
||||
|
||||
// onShown event
|
||||
$('#onshownbtn').on('click', function() {
|
||||
$('#onshown').on('shown.bs.modal', function() {
|
||||
alert('onShown event fired.');
|
||||
});
|
||||
});
|
||||
|
||||
// onHide event
|
||||
$('#onhidebtn').on('click', function() {
|
||||
$('#onhide').on('hide.bs.modal', function() {
|
||||
alert('onHide event fired.');
|
||||
});
|
||||
});
|
||||
|
||||
// onHidden event
|
||||
$('#onhiddenbtn').on('click', function() {
|
||||
$('#onhidden').on('hidden.bs.modal', function() {
|
||||
alert('onHidden event fired.');
|
||||
});
|
||||
});
|
||||
})(window, document, jQuery);
|
||||
19
public/vendor/dashboard/src/js/scripts/navs/navs.js
vendored
Executable file
19
public/vendor/dashboard/src/js/scripts/navs/navs.js
vendored
Executable file
@@ -0,0 +1,19 @@
|
||||
/*=========================================================================================
|
||||
File Name: nav.js
|
||||
Description: Navigation available in Bootstrap share general markup and styles,
|
||||
from the base .nav class to the active and disabled states.
|
||||
Swap modifier classes to switch between each style.
|
||||
----------------------------------------------------------------------------------------
|
||||
Item Name: Vuesax HTML Admin Template
|
||||
Version: 1.1
|
||||
Author: PIXINVENT
|
||||
Author URL: http://www.themeforest.net/user/pixinvent
|
||||
==========================================================================================*/
|
||||
(function(window, document, $) {
|
||||
'use strict';
|
||||
|
||||
var heightLeft = $('.nav-left + .tab-content').height();
|
||||
$('ul.nav-left').height(heightLeft);
|
||||
var heightRight = $('.nav-right + .tab-content').height();
|
||||
$('ul.nav-right').height(heightRight);
|
||||
})(window, document, jQuery);
|
||||
39
public/vendor/dashboard/src/js/scripts/pages/3-columns-left-sidebar.js
vendored
Executable file
39
public/vendor/dashboard/src/js/scripts/pages/3-columns-left-sidebar.js
vendored
Executable file
@@ -0,0 +1,39 @@
|
||||
/*=========================================================================================
|
||||
File Name: 3-columns-left-sidebar.js
|
||||
Description: Invoices list datables configurations
|
||||
----------------------------------------------------------------------------------------
|
||||
Item Name: Vuesax HTML Admin Template
|
||||
Version: 1.1
|
||||
Author: Pixinvent
|
||||
Author URL: hhttp://www.themeforest.net/user/pixinvent
|
||||
==========================================================================================*/
|
||||
|
||||
$(document).ready(function() {
|
||||
/***********************************
|
||||
* js of small Slider *
|
||||
************************************/
|
||||
|
||||
var sm_options = {
|
||||
start: [30,70],
|
||||
behaviour: 'drag',
|
||||
connect: true,
|
||||
range: {
|
||||
'min': 20,
|
||||
'max': 80
|
||||
}
|
||||
};
|
||||
var smallSlider = document.getElementById('small-slider');
|
||||
noUiSlider.create(smallSlider, sm_options);
|
||||
|
||||
|
||||
/*************************************
|
||||
* Default Score Rating *
|
||||
**************************************/
|
||||
$.fn.raty.defaults.path = '../../../app-assets/images/raty/';
|
||||
|
||||
$('#score-rating').raty({
|
||||
score: 3
|
||||
});
|
||||
|
||||
$(".sidebar-sticky").sticky();
|
||||
});
|
||||
161
public/vendor/dashboard/src/js/scripts/pages/app-chat.js
vendored
Executable file
161
public/vendor/dashboard/src/js/scripts/pages/app-chat.js
vendored
Executable file
@@ -0,0 +1,161 @@
|
||||
(function($) {
|
||||
"use strict";
|
||||
|
||||
// Chat user list
|
||||
if($('.chat-application .chat-user-list').length > 0){
|
||||
var chat_user_list = new PerfectScrollbar(".chat-user-list");
|
||||
}
|
||||
|
||||
// Chat user profile
|
||||
if($('.chat-application .profile-sidebar-area .scroll-area').length > 0){
|
||||
var chat_user_list = new PerfectScrollbar(".profile-sidebar-area .scroll-area");
|
||||
}
|
||||
|
||||
// Chat area
|
||||
if($('.chat-application .user-chats').length > 0){
|
||||
var chat_user = new PerfectScrollbar(".user-chats");
|
||||
}
|
||||
|
||||
// User profile right area
|
||||
if($('.chat-application .user-profile-sidebar-area').length > 0){
|
||||
var user_profile = new PerfectScrollbar(".user-profile-sidebar-area");
|
||||
}
|
||||
|
||||
// Chat Profile sidebar toggle
|
||||
$('.chat-application .sidebar-profile-toggle').on('click',function(){
|
||||
$('.chat-profile-sidebar').addClass('show');
|
||||
$('.chat-overlay').addClass('show');
|
||||
});
|
||||
|
||||
// User Profile sidebar toggle
|
||||
$('.chat-application .user-profile-toggle').on('click',function(){
|
||||
$('.user-profile-sidebar').addClass('show');
|
||||
$('.chat-overlay').addClass('show');
|
||||
});
|
||||
|
||||
// Update status by clickin on Radio
|
||||
$('.chat-application .user-status input:radio[name=userStatus]').on('change', function(){
|
||||
var $className = "avatar-status-"+this.value;
|
||||
$(".header-profile-sidebar .avatar span").removeClass();
|
||||
$(".sidebar-profile-toggle .avatar span").removeClass();
|
||||
$(".header-profile-sidebar .avatar span").addClass($className+" avatar-status-lg");
|
||||
$(".sidebar-profile-toggle .avatar span").addClass($className);
|
||||
});
|
||||
|
||||
// On Profile close click
|
||||
$(".chat-application .close-icon").on('click',function(){
|
||||
$('.chat-profile-sidebar').removeClass('show');
|
||||
$('.user-profile-sidebar').removeClass('show');
|
||||
if(!$(".sidebar-content").hasClass("show")){
|
||||
$('.chat-overlay').removeClass('show');
|
||||
}
|
||||
});
|
||||
|
||||
// On sidebar close click
|
||||
$(".chat-application .sidebar-close-icon").on('click',function(){
|
||||
$('.sidebar-content').removeClass('show');
|
||||
$('.chat-overlay').removeClass('show');
|
||||
});
|
||||
|
||||
// On overlay click
|
||||
$(".chat-application .chat-overlay").on('click',function(){
|
||||
$('.app-content .sidebar-content').removeClass('show');
|
||||
$('.chat-application .chat-overlay').removeClass('show');
|
||||
$('.chat-profile-sidebar').removeClass('show');
|
||||
$('.user-profile-sidebar').removeClass('show');
|
||||
});
|
||||
|
||||
// Add class active on click of Chat users list
|
||||
$(".chat-application .chat-user-list ul li").on('click', function(){
|
||||
if($('.chat-user-list ul li').hasClass('active')){
|
||||
$('.chat-user-list ul li').removeClass('active');
|
||||
}
|
||||
$(this).addClass("active");
|
||||
$(this).find(".badge").remove();
|
||||
if($('.chat-user-list ul li').hasClass('active')){
|
||||
$('.start-chat-area').addClass('d-none');
|
||||
$('.active-chat').removeClass('d-none');
|
||||
}
|
||||
else{
|
||||
$('.start-chat-area').removeClass('d-none');
|
||||
$('.active-chat').addClass('d-none');
|
||||
}
|
||||
});
|
||||
|
||||
// Favorite star click
|
||||
$(".chat-application .favorite i").on("click", function(e) {
|
||||
$(this).parent('.favorite').toggleClass("warning");
|
||||
e.stopPropagation();
|
||||
});
|
||||
|
||||
// Main menu toggle should hide app menu
|
||||
$('.chat-application .menu-toggle').on('click',function(e){
|
||||
$('.app-content .sidebar-left').removeClass('show');
|
||||
$('.chat-application .chat-overlay').removeClass('show');
|
||||
});
|
||||
|
||||
// Chat sidebar toggle
|
||||
if ($(window).width() < 992) {
|
||||
$('.chat-application .sidebar-toggle').on('click',function(){
|
||||
$('.app-content .sidebar-content').addClass('show');
|
||||
$('.chat-application .chat-overlay').addClass('show');
|
||||
});
|
||||
}
|
||||
|
||||
// For chat sidebar on small screen
|
||||
if ($(window).width() > 992) {
|
||||
if($('.chat-application .chat-overlay').hasClass('show')){
|
||||
$('.chat-application .chat-overlay').removeClass('show');
|
||||
}
|
||||
}
|
||||
|
||||
// Scroll Chat area
|
||||
$(".user-chats").scrollTop($(".user-chats > .chats").height());
|
||||
|
||||
// Filter
|
||||
$(".chat-application #chat-search").on("keyup", function() {
|
||||
var value = $(this).val().toLowerCase();
|
||||
if(value!=""){
|
||||
$(".chat-user-list .chat-users-list-wrapper li").filter(function() {
|
||||
$(this).toggle($(this).text().toLowerCase().indexOf(value) > -1);
|
||||
});
|
||||
}
|
||||
else{
|
||||
// If filter box is empty
|
||||
$(".chat-user-list .chat-users-list-wrapper li").show();
|
||||
}
|
||||
});
|
||||
|
||||
})(jQuery);
|
||||
|
||||
$(window).on("resize", function() {
|
||||
// remove show classes from sidebar and overlay if size is > 992
|
||||
if ($(window).width() > 992) {
|
||||
if($('.chat-application .chat-overlay').hasClass('show')){
|
||||
$('.app-content .sidebar-left').removeClass('show');
|
||||
$('.chat-application .chat-overlay').removeClass('show');
|
||||
}
|
||||
}
|
||||
|
||||
// Chat sidebar toggle
|
||||
if ($(window).width() < 992) {
|
||||
if($('.chat-application .chat-profile-sidebar').hasClass('show')){
|
||||
$('.chat-profile-sidebar').removeClass('show');
|
||||
}
|
||||
$('.chat-application .sidebar-toggle').on('click',function(){
|
||||
$('.app-content .sidebar-content').addClass('show');
|
||||
$('.chat-application .chat-overlay').addClass('show');
|
||||
});
|
||||
}
|
||||
});
|
||||
|
||||
// Add message to chat
|
||||
function enter_chat(source) {
|
||||
var message = $(".message").val();
|
||||
if(message != ""){
|
||||
var html = '<div class="chat-content">' + "<p>" + message + "</p>" + "</div>";
|
||||
$(".chat:last-child .chat-body").append(html);
|
||||
$(".message").val("");
|
||||
$(".user-chats").scrollTop($(".user-chats > .chats").height());
|
||||
}
|
||||
}
|
||||
168
public/vendor/dashboard/src/js/scripts/pages/app-ecommerce-shop.js
vendored
Executable file
168
public/vendor/dashboard/src/js/scripts/pages/app-ecommerce-shop.js
vendored
Executable file
@@ -0,0 +1,168 @@
|
||||
/*=========================================================================================
|
||||
File Name: app-ecommerce-shop.js
|
||||
Description: Ecommerce Shop
|
||||
----------------------------------------------------------------------------------------
|
||||
Item Name: Vuesax HTML Admin Template
|
||||
Version: 1.1
|
||||
Author: PIXINVENT
|
||||
Author URL: http://www.themeforest.net/user/pixinvent
|
||||
==========================================================================================*/
|
||||
$(document).ready(function () {
|
||||
"use strict";
|
||||
var sidebarShop = $(".sidebar-shop"),
|
||||
shopOverlay = $(".shop-content-overlay"),
|
||||
sidebarToggler = $(".shop-sidebar-toggler"),
|
||||
priceFilter = $(".price-options"),
|
||||
gridViewBtn = $(".grid-view-btn"),
|
||||
listViewBtn = $(".list-view-btn"),
|
||||
ecommerceProducts = $("#ecommerce-products"),
|
||||
cart = $(".cart"),
|
||||
wishlist = $(".wishlist");
|
||||
|
||||
|
||||
// show sidebar
|
||||
sidebarToggler.on("click", function () {
|
||||
sidebarShop.toggleClass("show");
|
||||
shopOverlay.toggleClass("show");
|
||||
});
|
||||
|
||||
// remove sidebar
|
||||
$(".shop-content-overlay, .sidebar-close-icon").on("click", function () {
|
||||
sidebarShop.removeClass("show");
|
||||
shopOverlay.removeClass("show");
|
||||
})
|
||||
|
||||
//price slider
|
||||
var slider = document.getElementById("price-slider");
|
||||
if (slider) {
|
||||
noUiSlider.create(slider, {
|
||||
start: [51, 5000],
|
||||
connect: true,
|
||||
tooltips: [true, true],
|
||||
format: wNumb({
|
||||
decimals: 0,
|
||||
}),
|
||||
range: {
|
||||
"min": 51,
|
||||
"max": 5000
|
||||
}
|
||||
});
|
||||
}
|
||||
// for select in ecommerce header
|
||||
if (priceFilter.length > 0) {
|
||||
priceFilter.select2({
|
||||
minimumResultsForSearch: -1
|
||||
});
|
||||
}
|
||||
|
||||
/***** CHANGE VIEW *****/
|
||||
// Grid View
|
||||
gridViewBtn.on("click", function () {
|
||||
ecommerceProducts.removeClass("list-view").addClass("grid-view");
|
||||
listViewBtn.removeClass("active");
|
||||
gridViewBtn.addClass("active");
|
||||
});
|
||||
|
||||
// List View
|
||||
listViewBtn.on("click", function () {
|
||||
ecommerceProducts.removeClass("grid-view").addClass("list-view");
|
||||
gridViewBtn.removeClass("active");
|
||||
listViewBtn.addClass("active");
|
||||
});
|
||||
|
||||
// For View in cart
|
||||
cart.on("click", function () {
|
||||
var $this = $(this)
|
||||
$this.find(".add-to-cart").addClass("d-none");
|
||||
$this.find(".view-in-cart").addClass("d-inline-block");
|
||||
})
|
||||
|
||||
// For Wishlist Icon
|
||||
wishlist.on("click", function () {
|
||||
var $this = $(this)
|
||||
$this.find("i").toggleClass("fa-heart-o fa-heart")
|
||||
$this.toggleClass("added");
|
||||
})
|
||||
|
||||
// Checkout Wizard
|
||||
var checkoutWizard = $(".checkout-tab-steps"),
|
||||
checkoutValidation = checkoutWizard.show();
|
||||
if (checkoutWizard.length > 0) {
|
||||
$(checkoutWizard).steps({
|
||||
headerTag: "h6",
|
||||
bodyTag: "fieldset",
|
||||
transitionEffect: "fade",
|
||||
titleTemplate: '<span class="step">#index#</span> #title#',
|
||||
enablePagination: false,
|
||||
onStepChanging: function (event, currentIndex, newIndex) {
|
||||
// allows to go back to previous step if form is
|
||||
if (currentIndex > newIndex) {
|
||||
return true;
|
||||
}
|
||||
// Needed in some cases if the user went back (clean up)
|
||||
if (currentIndex < newIndex) {
|
||||
// To remove error styles
|
||||
checkoutValidation.find(".body:eq(" + newIndex + ") label.error").remove();
|
||||
checkoutValidation.find(".body:eq(" + newIndex + ") .error").removeClass("error");
|
||||
}
|
||||
// check for valid details and show notification accordingly
|
||||
if (currentIndex === 1 && Number($(".form-control.required").val().length) < 1) {
|
||||
toastr.warning('Error', 'Please Enter Valid Details', { "positionClass": "toast-bottom-right" });
|
||||
}
|
||||
checkoutValidation.validate().settings.ignore = ":disabled,:hidden";
|
||||
return checkoutValidation.valid();
|
||||
},
|
||||
});
|
||||
// to move to next step on place order and save address click
|
||||
$(".place-order, .delivery-address").on("click", function () {
|
||||
$(".checkout-tab-steps").steps("next", {});
|
||||
});
|
||||
// check if user has entered valid cvv
|
||||
$(".btn-cvv").on("click", function () {
|
||||
if ($(".input-cvv").val().length == 3) {
|
||||
toastr.success('Success', 'Payment received Successfully', { "positionClass": "toast-bottom-right" });
|
||||
}
|
||||
else {
|
||||
toastr.warning('Error', 'Please Enter Valid Details', { "positionClass": "toast-bottom-right" });
|
||||
}
|
||||
})
|
||||
}
|
||||
|
||||
// checkout quantity counter
|
||||
var quantityCounter = $(".quantity-counter"),
|
||||
CounterMin = 1,
|
||||
CounterMax = 10;
|
||||
if (quantityCounter.length > 0) {
|
||||
quantityCounter.TouchSpin({
|
||||
min: CounterMin,
|
||||
max: CounterMax
|
||||
}).on('touchspin.on.startdownspin', function () {
|
||||
var $this = $(this);
|
||||
$('.bootstrap-touchspin-up').removeClass("disabled-max-min");
|
||||
if ($this.val() == 1) {
|
||||
$(this).siblings().find('.bootstrap-touchspin-down').addClass("disabled-max-min");
|
||||
}
|
||||
}).on('touchspin.on.startupspin', function () {
|
||||
var $this = $(this);
|
||||
$('.bootstrap-touchspin-down').removeClass("disabled-max-min");
|
||||
if ($this.val() == 10) {
|
||||
$(this).siblings().find('.bootstrap-touchspin-up').addClass("disabled-max-min");
|
||||
}
|
||||
});
|
||||
}
|
||||
|
||||
// remove items from wishlist page
|
||||
$(".remove-wishlist , .move-cart").on("click", function () {
|
||||
$(this).closest(".ecommerce-card").remove();
|
||||
})
|
||||
})
|
||||
// on window resize hide sidebar
|
||||
$(window).on("resize", function () {
|
||||
if ($(window).width() <= 991) {
|
||||
$(".sidebar-shop").removeClass("show");
|
||||
$(".shop-content-overlay").removeClass("show");
|
||||
}
|
||||
else {
|
||||
$(".sidebar-shop").addClass("show");
|
||||
}
|
||||
});
|
||||
185
public/vendor/dashboard/src/js/scripts/pages/app-email.js
vendored
Executable file
185
public/vendor/dashboard/src/js/scripts/pages/app-email.js
vendored
Executable file
@@ -0,0 +1,185 @@
|
||||
// Notifications & messages scrollable
|
||||
|
||||
$(function () {
|
||||
"use strict";
|
||||
|
||||
var Font = Quill.import('formats/font');
|
||||
Font.whitelist = ['sofia', 'slabo', 'roboto', 'inconsolata', 'ubuntu'];
|
||||
Quill.register(Font, true);
|
||||
|
||||
// Email left Sidebar
|
||||
if ($('.sidebar-menu-list').length > 0) {
|
||||
var sidebar_menu_list = new PerfectScrollbar(".sidebar-menu-list");
|
||||
}
|
||||
|
||||
// User list scroll
|
||||
if ($('.email-user-list').length > 0) {
|
||||
var users_list = new PerfectScrollbar(".email-user-list");
|
||||
}
|
||||
|
||||
// Email detail section
|
||||
if ($('.email-scroll-area').length > 0) {
|
||||
var users_list = new PerfectScrollbar(".email-scroll-area");
|
||||
}
|
||||
|
||||
// Modal dialog scroll
|
||||
if ($('.modal-dialog-scrollable .modal-body').length > 0) {
|
||||
var sidebar_menu_list = new PerfectScrollbar(".modal-dialog-scrollable .modal-body");
|
||||
}
|
||||
|
||||
// Compose Modal - Reset Input Value on Click compose btn
|
||||
$('.compose-btn .btn').on('click', function (e) {
|
||||
// all input forms
|
||||
$(".modal .modal-body input").val("");
|
||||
// quill editor content
|
||||
var quill_editor = $(".modal .modal-body .ql-editor");
|
||||
quill_editor[0].innerHTML = "";
|
||||
// file input content
|
||||
var file_input = $(".modal .modal-body .custom-file .custom-file-label");
|
||||
file_input[0].innerHTML = "";
|
||||
});
|
||||
|
||||
// Main menu toggle should hide app menu
|
||||
$('.menu-toggle').on('click', function (e) {
|
||||
$('.app-content .sidebar-left').removeClass('show');
|
||||
$('.app-content .app-content-overlay').removeClass('show');
|
||||
});
|
||||
|
||||
// On sidebar close click
|
||||
$(".email-application .sidebar-close-icon").on('click', function () {
|
||||
$('.sidebar-left').removeClass('show');
|
||||
$('.app-content-overlay').removeClass('show');
|
||||
});
|
||||
|
||||
// Email sidebar toggle
|
||||
$('.sidebar-toggle').on('click', function (e) {
|
||||
e.stopPropagation();
|
||||
$('.app-content .sidebar-left').toggleClass('show');
|
||||
$('.app-content .app-content-overlay').addClass('show');
|
||||
});
|
||||
$('.app-content .app-content-overlay').on('click', function (e) {
|
||||
$('.app-content .sidebar-left').removeClass('show');
|
||||
$('.app-content .app-content-overlay').removeClass('show');
|
||||
});
|
||||
|
||||
// Email Right sidebar toggle
|
||||
$('.email-app-list .email-user-list li').on('click', function (e) {
|
||||
$('.app-content .email-app-details').toggleClass('show');
|
||||
});
|
||||
|
||||
// Add class active on click of sidebar list
|
||||
$(".email-application .list-group-messages a").on('click', function () {
|
||||
if ($('.email-application .list-group-messages a').hasClass('active')) {
|
||||
$('.email-application .list-group-messages a').removeClass('active');
|
||||
}
|
||||
$(this).addClass("active");
|
||||
});
|
||||
|
||||
// Email detail view back button click
|
||||
$('.go-back').on('click', function (e) {
|
||||
e.stopPropagation();
|
||||
$('.app-content .email-app-details').removeClass('show');
|
||||
});
|
||||
|
||||
// For app sidebar on small screen
|
||||
if ($(window).width() > 768) {
|
||||
if ($('.app-content .app-content-overlay').hasClass('show')) {
|
||||
$('.app-content .app-content-overlay').removeClass('show');
|
||||
}
|
||||
}
|
||||
// Favorite star click
|
||||
$(".email-application .favorite i").on("click", function (e) {
|
||||
$(this).parent('.favorite').toggleClass("warning");
|
||||
e.stopPropagation();
|
||||
});
|
||||
|
||||
// On checkbox click stop propogation
|
||||
$(".email-user-list .vs-checkbox-con input").on("click", function (e) {
|
||||
e.stopPropagation();
|
||||
});
|
||||
|
||||
// Select all checkbox
|
||||
$(document).on("click", ".email-app-list .selectAll input", function () {
|
||||
$(".user-action .vs-checkbox-con input").prop('checked', this.checked);
|
||||
});
|
||||
|
||||
// Delete Mail from list
|
||||
$(".email-application .mail-delete").on("click", function () {
|
||||
$(".email-application .user-action .vs-checkbox-con input:checked").closest("li").remove();
|
||||
$(".email-application .selectAll input").prop('checked', "");
|
||||
});
|
||||
|
||||
// Mark mail unread
|
||||
$(".email-application .mail-unread").on("click", function () {
|
||||
$(".email-application .user-action .vs-checkbox-con input:checked").closest("li").removeClass("mail-read");
|
||||
});
|
||||
|
||||
// Filter
|
||||
$(".email-app-list #email-search").on("keyup", function () {
|
||||
var value = $(this).val().toLowerCase();
|
||||
if (value != "") {
|
||||
$(".email-user-list .users-list-wrapper li").filter(function () {
|
||||
$(this).toggle($(this).text().toLowerCase().indexOf(value) > -1);
|
||||
});
|
||||
var tbl_row = $(".email-user-list .users-list-wrapper li:visible").length; //here tbl_test is table name
|
||||
|
||||
//Check if table has row or not
|
||||
if (tbl_row == 0) {
|
||||
$('.email-user-list .no-results').addClass('show');
|
||||
}
|
||||
else {
|
||||
if ($('.email-user-list .no-results').hasClass('show')) {
|
||||
$('.email-user-list .no-results').removeClass('show');
|
||||
}
|
||||
}
|
||||
}
|
||||
else {
|
||||
// If filter box is empty
|
||||
$(".email-user-list .users-list-wrapper li").show();
|
||||
if ($('.email-user-list .no-results').hasClass('show')) {
|
||||
$('.email-user-list .no-results').removeClass('show');
|
||||
}
|
||||
}
|
||||
});
|
||||
|
||||
// Email compose Editor
|
||||
|
||||
var emailEditor = new Quill('#email-container .editor', {
|
||||
bounds: '#email-container .editor',
|
||||
modules: {
|
||||
'formula': true,
|
||||
'syntax': true,
|
||||
'toolbar': [
|
||||
['bold', 'italic', 'underline', 'strike', 'link', 'blockquote', 'code-block',
|
||||
{
|
||||
'header': '1'
|
||||
}, {
|
||||
'header': '2'
|
||||
}, {
|
||||
'list': 'ordered'
|
||||
}, {
|
||||
'list': 'bullet'
|
||||
}],
|
||||
[{
|
||||
'font': []
|
||||
}]
|
||||
],
|
||||
},
|
||||
placeholder: 'Message',
|
||||
theme: 'snow'
|
||||
});
|
||||
|
||||
var editors = [emailEditor];
|
||||
|
||||
});
|
||||
|
||||
$(window).on("resize", function () {
|
||||
// remove show classes from sidebar and overlay if size is > 992
|
||||
if ($(window).width() > 768) {
|
||||
if ($('.app-content .app-content-overlay').hasClass('show')) {
|
||||
$('.app-content .sidebar-left').removeClass('show');
|
||||
$('.app-content .app-content-overlay').removeClass('show');
|
||||
}
|
||||
}
|
||||
});
|
||||
|
||||
324
public/vendor/dashboard/src/js/scripts/pages/app-todo.js
vendored
Executable file
324
public/vendor/dashboard/src/js/scripts/pages/app-todo.js
vendored
Executable file
@@ -0,0 +1,324 @@
|
||||
/*=========================================================================================
|
||||
File Name: app-todo.js
|
||||
Description: app-todo
|
||||
----------------------------------------------------------------------------------------
|
||||
Item Name: Vuesax HTML Admin Template
|
||||
Version: 1.1
|
||||
Author: PIXINVENT
|
||||
Author URL: http://www.themeforest.net/user/pixinvent
|
||||
==========================================================================================*/
|
||||
|
||||
$(function() {
|
||||
"use strict";
|
||||
|
||||
var $curr_title, $curr_desc, $curr_info, $curr_fav, $curr_chipVal;
|
||||
|
||||
// --------------------------------------------
|
||||
// Sidebar menu scrollbar
|
||||
// --------------------------------------------
|
||||
if($('.todo-application .sidebar-menu-list').length > 0){
|
||||
var content = new PerfectScrollbar('.sidebar-menu-list',{
|
||||
theme: "dark"
|
||||
});
|
||||
}
|
||||
|
||||
// --------------------------------------------
|
||||
// Todo task list scrollbar
|
||||
// --------------------------------------------
|
||||
if($('.todo-application .todo-task-list').length > 0){
|
||||
var sidebar_todo = new PerfectScrollbar('.todo-task-list',{
|
||||
theme: "dark"
|
||||
});
|
||||
}
|
||||
|
||||
|
||||
// --------------------------------------------
|
||||
// Info star click
|
||||
// --------------------------------------------
|
||||
$(document).on("click", ".todo-application .todo-item-info i", function(e) {
|
||||
$(this).parent('.todo-item-info').toggleClass("success");
|
||||
e.stopPropagation();
|
||||
});
|
||||
|
||||
|
||||
// --------------------------------------------
|
||||
// Favorite star click
|
||||
// --------------------------------------------
|
||||
$(document).on("click", ".todo-application .todo-item-favorite i", function(e) {
|
||||
$(this).parent('.todo-item-favorite').toggleClass("warning");
|
||||
e.stopPropagation();
|
||||
});
|
||||
|
||||
// --------------------------------------------
|
||||
// Main menu toggle should hide app menu
|
||||
// --------------------------------------------
|
||||
$('.menu-toggle').on('click',function(e){
|
||||
$('.app-content .sidebar-left').removeClass('show');
|
||||
$('.app-content .app-content-overlay').removeClass('show');
|
||||
});
|
||||
|
||||
// --------------------------------------------
|
||||
// On sidebar close click
|
||||
// --------------------------------------------
|
||||
$(".todo-application .sidebar-close-icon").on('click',function(){
|
||||
$('.sidebar-left').removeClass('show');
|
||||
$('.app-content-overlay').removeClass('show');
|
||||
});
|
||||
|
||||
// --------------------------------------------
|
||||
// Todo sidebar toggle
|
||||
// --------------------------------------------
|
||||
$('.sidebar-toggle').on('click',function(e){
|
||||
e.stopPropagation();
|
||||
$('.app-content .sidebar-left').toggleClass('show');
|
||||
$('.app-content .app-content-overlay').addClass('show');
|
||||
});
|
||||
$('.app-content .app-content-overlay').on('click',function(e){
|
||||
$('.app-content .sidebar-left').removeClass('show');
|
||||
$('.app-content .app-content-overlay').removeClass('show');
|
||||
});
|
||||
|
||||
// --------------------------------------------
|
||||
// Add class active on click of sidebar filters list
|
||||
// --------------------------------------------
|
||||
$(".todo-application .list-group-filters a").on('click', function(){
|
||||
if($('.todo-application .list-group-filters a').hasClass('active')){
|
||||
$('.todo-application .list-group-filters a').removeClass('active');
|
||||
}
|
||||
$(this).addClass("active");
|
||||
});
|
||||
|
||||
// --------------------------------------------
|
||||
// For chat sidebar on small screen
|
||||
// --------------------------------------------
|
||||
if ($(window).width() > 992) {
|
||||
if($('.todo-application .app-content-overlay').hasClass('show')){
|
||||
$('.todo-application .app-content-overlay').removeClass('show');
|
||||
}
|
||||
}
|
||||
|
||||
// --------------------------------------------
|
||||
// On add new item, clear modal popup fields
|
||||
// --------------------------------------------
|
||||
$(".add-task button").on('click', function(e){
|
||||
$('.modal .new-todo-item-title').val("");
|
||||
$('.modal .new-todo-item-desc').val("");
|
||||
$('.modal .dropdown-menu input').prop("checked", false);
|
||||
if($('.modal .todo-item-info').hasClass('success')){$('.modal .todo-item-info').removeClass('success')}
|
||||
if($('.modal .todo-item-favorite').hasClass('warning')){$('.modal .todo-item-favorite').removeClass('warning')}
|
||||
});
|
||||
|
||||
|
||||
// --------------------------------------------
|
||||
// Add New ToDo List Item
|
||||
// --------------------------------------------
|
||||
|
||||
|
||||
// To add new todo list item
|
||||
$(".add-todo-item").on('click', function(e){
|
||||
e.preventDefault();
|
||||
var todoInfo = "",
|
||||
todoFav = "",
|
||||
todoChip = "";
|
||||
|
||||
var todoTitle = $(".new-todo-item-title").val();
|
||||
var todoDesc = $(".new-todo-item-desc").val();
|
||||
if($(".modal.show .todo-item-info").hasClass('success')){
|
||||
todoInfo = " success";
|
||||
}
|
||||
if($(".modal.show .todo-item-favorite").hasClass('warning')){
|
||||
todoFav = " warning";
|
||||
}
|
||||
|
||||
// Chip calculation loop
|
||||
var selected = $('.modal .dropdown-menu input:checked');
|
||||
|
||||
selected.each(function(){
|
||||
todoChip += '<div class="chip mb-0">' +
|
||||
'<div class="chip-body">' +
|
||||
'<span class="chip-text" data-value="'+$(this).data('value')+'"><span class="bullet bullet-'+$(this).data('color')+' bullet-xs"></span> '+$(this).data('value')+'</span>' +
|
||||
'</div>' +
|
||||
'</div>';
|
||||
});
|
||||
// HTML Output
|
||||
if(todoTitle != ""){
|
||||
$(".todo-task-list-wrapper").append('<li class="todo-item" style="animation-delay: 0s;" data-toggle="modal" data-target="#editTaskModal">' +
|
||||
'<div class="todo-title-wrapper d-flex justify-content-between mb-50">' +
|
||||
'<div class="todo-title-area d-flex align-items-center">' +
|
||||
'<div class="title-wrapper d-flex">'+
|
||||
'<div class="vs-checkbox-con">' +
|
||||
'<input type="checkbox" >' +
|
||||
'<span class="vs-checkbox vs-checkbox-sm">' +
|
||||
'<span class="vs-checkbox--check">' +
|
||||
'<i class="vs-icon feather icon-check"></i>' +
|
||||
'</span>' +
|
||||
'</span>' +
|
||||
'</div>' +
|
||||
'<h6 class="todo-title mt-50 mx-50">'+ todoTitle +'</h6>' +
|
||||
'</div>' +
|
||||
'<div class="chip-wrapper">' + todoChip + '</div>' +
|
||||
'</div>' +
|
||||
'<div class="float-right todo-item-action d-flex">' +
|
||||
'<a class="todo-item-info'+ todoInfo +'"><i class="feather icon-info"></i></a>' +
|
||||
'<a class="todo-item-favorite'+ todoFav +'"><i class="feather icon-star"></i></a>' +
|
||||
'<a class="todo-item-delete"><i class="feather icon-trash"></i></a>' +
|
||||
'</div>' +
|
||||
'</div>' +
|
||||
'<p class="mb-0 todo-desc truncate">'+ todoDesc +'</p>' +
|
||||
'</li>');
|
||||
}
|
||||
|
||||
$('#form-edit-todo .edit-todo-item-title').val(todoTitle);
|
||||
$('#form-edit-todo .edit-todo-item-desc').val(todoDesc);
|
||||
$('#form-edit-todo .dropdown-menu input').prop("checked", false);
|
||||
if($('#form-edit-todo .edit-todo-item-info').hasClass('success')){$('#form-edit-todo .edit-todo-item-info').addClass('success')}
|
||||
if($('#form-edit-todo .edit-todo-item-favorite').hasClass('warning')){$('#form-edit-todo .edit-todo-item-favorite').addClass('warning')}
|
||||
});
|
||||
|
||||
|
||||
// --------------------------------------------
|
||||
// To update todo list item
|
||||
// --------------------------------------------
|
||||
$(document).on('click',".todo-task-list-wrapper .todo-item", function(e){
|
||||
|
||||
// Saving all values in variable
|
||||
$curr_title = $(this).find('.todo-title'); // Set path for Current Title, use this variable when updating title
|
||||
$curr_desc = $(this).find('.todo-desc'); // Set path for Current Description, use this variable when updating Description
|
||||
$curr_info = $(this).find('.todo-item-info'); // Set path for Current info, use this variable when updating info
|
||||
$curr_fav = $(this).find('.todo-item-favorite'); // Set path for Current favorite, use this variable when updating favorite
|
||||
$curr_chipVal = $(this).find('.chip-wrapper'); // Set path for Chips, use this variable when updating chip value
|
||||
|
||||
var $title = $(this).find('.todo-title').html();
|
||||
var $desc = $(this).find('.todo-desc').html();
|
||||
var $info = $(this).find('.todo-item-info');
|
||||
var $fav = $(this).find('.todo-item-favorite');
|
||||
$('#form-edit-todo .dropdown-menu input').prop("checked",false);
|
||||
|
||||
|
||||
// Checkbox checked as per chips
|
||||
|
||||
var selected = $(this).find('.chip');
|
||||
selected.each(function(){
|
||||
|
||||
var chipVal = $(this).find('.chip-text').data('value');
|
||||
$('#form-edit-todo .dropdown-menu input[data-value="'+chipVal+'"]').prop("checked",true);
|
||||
});
|
||||
|
||||
// apply all variable values to fields
|
||||
$('#form-edit-todo .edit-todo-item-title').val($title);
|
||||
$('#form-edit-todo .edit-todo-item-desc').val($desc);
|
||||
|
||||
if($('#form-edit-todo .todo-item-info').hasClass('success')){$('#form-edit-todo .todo-item-info').removeClass('success')}
|
||||
if($('#form-edit-todo .edit-todo-item-favorite').hasClass('warning')){$('#form-edit-todo .edit-todo-item-favorite').removeClass('warning')}
|
||||
|
||||
if( $($info).hasClass('success') ) {
|
||||
$('#form-edit-todo .todo-item-info').addClass('success');
|
||||
}
|
||||
|
||||
if( $($fav).hasClass('warning') ) {
|
||||
$('#form-edit-todo .edit-todo-item-favorite').addClass('warning');
|
||||
}
|
||||
});
|
||||
|
||||
|
||||
// --------------------------------------------
|
||||
// Updating Data Values to Fields
|
||||
// --------------------------------------------
|
||||
$('.update-todo-item').on('click', function(){
|
||||
var $edit_title = $('#form-edit-todo .edit-todo-item-title').val();
|
||||
var $edit_desc = $('#form-edit-todo .edit-todo-item-desc').val();
|
||||
var $edit_info = $('#form-edit-todo .todo-item-info i');
|
||||
var $edit_fav = $('#form-edit-todo .todo-item-favorite i');
|
||||
|
||||
$($curr_title).text($edit_title);
|
||||
$($curr_desc).text($edit_desc);
|
||||
|
||||
if($($curr_info).hasClass('success')){$($curr_info).removeClass('success')}
|
||||
if($($curr_fav).hasClass('warning')){$($curr_fav).removeClass('warning')}
|
||||
|
||||
if( $($edit_info).parent('.todo-item-info').hasClass('success')) {
|
||||
$curr_info.addClass('success');
|
||||
}
|
||||
|
||||
if( $($edit_fav).parent('.todo-item-favorite').hasClass('warning')) {
|
||||
$curr_fav.addClass('warning');
|
||||
}
|
||||
|
||||
// Chip calculation loop
|
||||
var $edit_selected = $('#form-edit-todo .dropdown-menu input:checked');
|
||||
var $edit_todoChip = "";
|
||||
|
||||
$edit_selected.each(function(){
|
||||
$edit_todoChip += '<div class="chip mb-0">' +
|
||||
'<div class="chip-body">' +
|
||||
'<span class="chip-text" data-value="'+$(this).data('value')+'"><span class="bullet bullet-'+$(this).data('color')+' bullet-xs"></span> '+$(this).data('value')+'</span>' +
|
||||
'</div>' +
|
||||
'</div>';
|
||||
});
|
||||
|
||||
$curr_chipVal.empty();
|
||||
|
||||
$($curr_chipVal).append($edit_todoChip);
|
||||
|
||||
|
||||
});
|
||||
|
||||
|
||||
// --------------------------------------------
|
||||
//EVENT DELETION
|
||||
// --------------------------------------------
|
||||
$(document).on('click', '.todo-item-delete', function(e){
|
||||
var item = this;
|
||||
e.stopPropagation();
|
||||
$(item).closest('.todo-item').remove();
|
||||
})
|
||||
|
||||
// Complete task strike through
|
||||
$(document).on('click', '.todo-item input', function(event){
|
||||
event.stopPropagation();
|
||||
$(this).closest('.todo-item').toggleClass("completed");
|
||||
});
|
||||
|
||||
|
||||
// --------------------------------------------
|
||||
// Filter
|
||||
// --------------------------------------------
|
||||
$("#todo-search").on("keyup", function() {
|
||||
var value = $(this).val().toLowerCase();
|
||||
if(value!=""){
|
||||
$(".todo-item").filter(function() {
|
||||
$(this).toggle($(this).text().toLowerCase().indexOf(value) > -1);
|
||||
});
|
||||
var tbl_row = $(".todo-item:visible").length; //here tbl_test is table name
|
||||
|
||||
//Check if table has row or not
|
||||
if ( tbl_row == 0 ){
|
||||
if(!$('.no-results').hasClass('show') ){
|
||||
$('.no-results').addClass('show');
|
||||
}
|
||||
}
|
||||
else{
|
||||
$('.no-results').removeClass('show');
|
||||
|
||||
}
|
||||
}
|
||||
else{
|
||||
// If filter box is empty
|
||||
$(".todo-item").show();
|
||||
if($('.no-results').hasClass('show') ){
|
||||
$('.no-results').removeClass('show');
|
||||
}
|
||||
}
|
||||
});
|
||||
|
||||
});
|
||||
|
||||
$(window).on("resize", function() {
|
||||
// remove show classes from sidebar and overlay if size is > 992
|
||||
if ($(window).width() > 992) {
|
||||
if($('.app-content .app-content-overlay').hasClass('show')){
|
||||
$('.app-content .sidebar-left').removeClass('show');
|
||||
$('.app-content .app-content-overlay').removeClass('show');
|
||||
}
|
||||
}
|
||||
});
|
||||
13
public/vendor/dashboard/src/js/scripts/pages/bootstrap-toast.js
vendored
Executable file
13
public/vendor/dashboard/src/js/scripts/pages/bootstrap-toast.js
vendored
Executable file
@@ -0,0 +1,13 @@
|
||||
$('.toast-toggler').on('click', function () {
|
||||
$(this).next('.toast').prependTo('.toast-bs-container .toast-position').toast('show')
|
||||
|
||||
// if ($('.toast-bs-container .toast-position .toast').hasClass('hide')) {
|
||||
// $('.toast-bs-container .toast-position .toast').toast('show')
|
||||
// }
|
||||
});
|
||||
|
||||
$('.placement').on('click', function () {
|
||||
$('.toast-placement').toast('show');
|
||||
$('.toast-placement .toast').toast('show');
|
||||
});
|
||||
|
||||
33
public/vendor/dashboard/src/js/scripts/pages/coming-soon.js
vendored
Executable file
33
public/vendor/dashboard/src/js/scripts/pages/coming-soon.js
vendored
Executable file
@@ -0,0 +1,33 @@
|
||||
/*=========================================================================================
|
||||
File Name: page-coming-soon.js
|
||||
Description: Coming Soon
|
||||
----------------------------------------------------------------------------------------
|
||||
Item Name: Vuesax HTML Admin Template
|
||||
Version: 1.1
|
||||
Author: PIXINVENT
|
||||
Author URL: http://www.themeforest.net/user/pixinvent
|
||||
==========================================================================================*/
|
||||
|
||||
/*******************************
|
||||
* js of Countdown *
|
||||
********************************/
|
||||
|
||||
$(document).ready(function() {
|
||||
|
||||
var todayDate = new Date();
|
||||
var dd = todayDate.getDate();
|
||||
var mm = todayDate.getMonth() + 1;
|
||||
var yy = todayDate.getFullYear();
|
||||
var currentDate = yy + "/" + (mm+2) + "/" + dd;
|
||||
|
||||
|
||||
$('#clockFlat').countdown(currentDate).on('update.countdown', function(event) {
|
||||
var $this = $(this).html(event.strftime(''
|
||||
+ '<div class="clockCard px-1"> <span>%d</span> <br> <p class="bg-amber clockFormat lead px-1 black"> Day%!d </p> </div>'
|
||||
+ '<div class="clockCard px-1"> <span>%H</span> <br> <p class="bg-amber clockFormat lead px-1 black"> Hour%!H </p> </div>'
|
||||
+ '<div class="clockCard px-1"> <span>%M</span> <br> <p class="bg-amber clockFormat lead px-1 black"> Minute%!M </p> </div>'
|
||||
+ '<div class="clockCard px-1"> <span>%S</span> <br> <p class="bg-amber clockFormat lead px-1 black"> Second%!S </p> </div>'))
|
||||
});
|
||||
|
||||
|
||||
});
|
||||
59
public/vendor/dashboard/src/js/scripts/pages/content-sidebar.js
vendored
Executable file
59
public/vendor/dashboard/src/js/scripts/pages/content-sidebar.js
vendored
Executable file
@@ -0,0 +1,59 @@
|
||||
/*=========================================================================================
|
||||
File Name: content-sidebar.js
|
||||
Description: Invoices list datables configurations
|
||||
----------------------------------------------------------------------------------------
|
||||
Item Name: Vuesax HTML Admin Template
|
||||
Version: 1.1
|
||||
Author: PIXINVENT
|
||||
Author URL: http://www.themeforest.net/user/pixinvent
|
||||
==========================================================================================*/
|
||||
|
||||
$(document).ready(function() {
|
||||
/***********************************
|
||||
* js of small Slider *
|
||||
************************************/
|
||||
|
||||
var sm_options = {
|
||||
start: [30,70],
|
||||
behaviour: 'drag',
|
||||
connect: true,
|
||||
range: {
|
||||
'min': 20,
|
||||
'max': 80
|
||||
}
|
||||
};
|
||||
var smallSlider = document.getElementById('small-slider');
|
||||
noUiSlider.create(smallSlider, sm_options);
|
||||
|
||||
|
||||
/*************************************
|
||||
* Default Score Rating *
|
||||
**************************************/
|
||||
$.fn.raty.defaults.path = '../../../app-assets/images/raty/';
|
||||
|
||||
$('#score-rating').raty({
|
||||
score: 3
|
||||
});
|
||||
|
||||
if($(".sidebar-sticky").length){
|
||||
var headerNavbarHeight,
|
||||
footerNavbarHeight;
|
||||
|
||||
// Header & Footer offset only for right & left sticky sidebar
|
||||
if($("body").hasClass('content-right-sidebar') || $("body").hasClass('content-left-sidebar')){
|
||||
headerNavbarHeight = $('.header-navbar').height();
|
||||
footerNavbarHeight = $('footer.footer').height();
|
||||
}
|
||||
// Header & Footer offset with padding for detached right & left dsticky sidebar
|
||||
else{
|
||||
headerNavbarHeight = $('.header-navbar').height()+24;
|
||||
footerNavbarHeight = $('footer.footer').height()+10;
|
||||
}
|
||||
|
||||
$(".sidebar-sticky").sticky({
|
||||
topSpacing: headerNavbarHeight,
|
||||
bottomSpacing: footerNavbarHeight
|
||||
});
|
||||
|
||||
}
|
||||
});
|
||||
558
public/vendor/dashboard/src/js/scripts/pages/dashboard-analytics.js
vendored
Executable file
558
public/vendor/dashboard/src/js/scripts/pages/dashboard-analytics.js
vendored
Executable file
@@ -0,0 +1,558 @@
|
||||
/*=========================================================================================
|
||||
File Name: dashboard-analytics.js
|
||||
Description: dashboard analytics page content with Apexchart Examples
|
||||
----------------------------------------------------------------------------------------
|
||||
Item Name: Vuesax HTML Admin Template
|
||||
Version: 1.1
|
||||
Author: PIXINVENT
|
||||
Author URL: http://www.themeforest.net/user/pixinvent
|
||||
==========================================================================================*/
|
||||
|
||||
$(window).on("load", function () {
|
||||
|
||||
var $primary = '#7367F0';
|
||||
var $danger = '#EA5455';
|
||||
var $warning = '#FF9F43';
|
||||
var $info = '#0DCCE1';
|
||||
var $primary_light = '#8F80F9';
|
||||
var $warning_light = '#FFC085';
|
||||
var $danger_light = '#f29292';
|
||||
var $info_light = '#1edec5';
|
||||
var $strok_color = '#b9c3cd';
|
||||
var $label_color = '#e7eef7';
|
||||
var $white = '#fff';
|
||||
|
||||
|
||||
// Subscribers Gained Chart starts //
|
||||
// ----------------------------------
|
||||
|
||||
var gainedChartoptions = {
|
||||
chart: {
|
||||
height: 100,
|
||||
type: 'area',
|
||||
toolbar: {
|
||||
show: false,
|
||||
},
|
||||
sparkline: {
|
||||
enabled: true
|
||||
},
|
||||
grid: {
|
||||
show: false,
|
||||
padding: {
|
||||
left: 0,
|
||||
right: 0
|
||||
}
|
||||
},
|
||||
},
|
||||
colors: [$primary],
|
||||
dataLabels: {
|
||||
enabled: false
|
||||
},
|
||||
stroke: {
|
||||
curve: 'smooth',
|
||||
width: 2.5
|
||||
},
|
||||
fill: {
|
||||
type: 'gradient',
|
||||
gradient: {
|
||||
shadeIntensity: 0.9,
|
||||
opacityFrom: 0.7,
|
||||
opacityTo: 0.5,
|
||||
stops: [0, 80, 100]
|
||||
}
|
||||
},
|
||||
series: [{
|
||||
name: 'Subscribers',
|
||||
data: [28, 40, 36, 52, 38, 60, 55]
|
||||
}],
|
||||
|
||||
xaxis: {
|
||||
labels: {
|
||||
show: false,
|
||||
},
|
||||
axisBorder: {
|
||||
show: false,
|
||||
}
|
||||
},
|
||||
yaxis: [{
|
||||
y: 0,
|
||||
offsetX: 0,
|
||||
offsetY: 0,
|
||||
padding: { left: 0, right: 0 },
|
||||
}],
|
||||
tooltip: {
|
||||
x: { show: false }
|
||||
},
|
||||
}
|
||||
|
||||
var gainedChart = new ApexCharts(
|
||||
document.querySelector("#subscribe-gain-chart"),
|
||||
gainedChartoptions
|
||||
);
|
||||
|
||||
gainedChart.render();
|
||||
|
||||
// Subscribers Gained Chart ends //
|
||||
|
||||
|
||||
|
||||
// Orders Received Chart starts //
|
||||
// ----------------------------------
|
||||
|
||||
var orderChartoptions = {
|
||||
chart: {
|
||||
height: 100,
|
||||
type: 'area',
|
||||
toolbar: {
|
||||
show: false,
|
||||
},
|
||||
sparkline: {
|
||||
enabled: true
|
||||
},
|
||||
grid: {
|
||||
show: false,
|
||||
padding: {
|
||||
left: 0,
|
||||
right: 0
|
||||
}
|
||||
},
|
||||
},
|
||||
colors: [$warning],
|
||||
dataLabels: {
|
||||
enabled: false
|
||||
},
|
||||
stroke: {
|
||||
curve: 'smooth',
|
||||
width: 2.5
|
||||
},
|
||||
fill: {
|
||||
type: 'gradient',
|
||||
gradient: {
|
||||
shadeIntensity: 0.9,
|
||||
opacityFrom: 0.7,
|
||||
opacityTo: 0.5,
|
||||
stops: [0, 80, 100]
|
||||
}
|
||||
},
|
||||
series: [{
|
||||
name: 'Orders',
|
||||
data: [10, 15, 8, 15, 7, 12, 8]
|
||||
}],
|
||||
|
||||
xaxis: {
|
||||
labels: {
|
||||
show: false,
|
||||
},
|
||||
axisBorder: {
|
||||
show: false,
|
||||
}
|
||||
},
|
||||
yaxis: [{
|
||||
y: 0,
|
||||
offsetX: 0,
|
||||
offsetY: 0,
|
||||
padding: { left: 0, right: 0 },
|
||||
}],
|
||||
tooltip: {
|
||||
x: { show: false }
|
||||
},
|
||||
}
|
||||
|
||||
var orderChart = new ApexCharts(
|
||||
document.querySelector("#orders-received-chart"),
|
||||
orderChartoptions
|
||||
);
|
||||
|
||||
orderChart.render();
|
||||
|
||||
// Orders Received Chart ends //
|
||||
|
||||
|
||||
|
||||
// Avg Session Chart Starts
|
||||
// ----------------------------------
|
||||
|
||||
var sessionChartoptions = {
|
||||
chart: {
|
||||
type: 'bar',
|
||||
height: 200,
|
||||
sparkline: { enabled: true },
|
||||
toolbar: { show: false },
|
||||
},
|
||||
states: {
|
||||
hover: {
|
||||
filter: 'none'
|
||||
}
|
||||
},
|
||||
colors: [$label_color, $label_color, $primary, $label_color, $label_color, $label_color],
|
||||
series: [{
|
||||
name: 'Sessions',
|
||||
data: [75, 125, 225, 175, 125, 75, 25]
|
||||
}],
|
||||
grid: {
|
||||
show: false,
|
||||
padding: {
|
||||
left: 0,
|
||||
right: 0
|
||||
}
|
||||
},
|
||||
|
||||
plotOptions: {
|
||||
bar: {
|
||||
columnWidth: '45%',
|
||||
distributed: true,
|
||||
}
|
||||
},
|
||||
tooltip: {
|
||||
x: { show: false }
|
||||
},
|
||||
xaxis: {
|
||||
type: 'numeric',
|
||||
}
|
||||
}
|
||||
|
||||
var sessionChart = new ApexCharts(
|
||||
document.querySelector("#avg-session-chart"),
|
||||
sessionChartoptions
|
||||
);
|
||||
|
||||
sessionChart.render();
|
||||
|
||||
// Avg Session Chart ends //
|
||||
|
||||
|
||||
// Support Tracker Chart starts
|
||||
// -----------------------------
|
||||
|
||||
var supportChartoptions = {
|
||||
chart: {
|
||||
height: 270,
|
||||
type: 'radialBar',
|
||||
},
|
||||
plotOptions: {
|
||||
radialBar: {
|
||||
size: 150,
|
||||
startAngle: -150,
|
||||
endAngle: 150,
|
||||
offsetY: 20,
|
||||
hollow: {
|
||||
size: '65%',
|
||||
},
|
||||
track: {
|
||||
background: $white,
|
||||
strokeWidth: '100%',
|
||||
|
||||
},
|
||||
dataLabels: {
|
||||
value: {
|
||||
offsetY: 30,
|
||||
color: '#99a2ac',
|
||||
fontSize: '2rem'
|
||||
}
|
||||
}
|
||||
},
|
||||
},
|
||||
colors: [$danger],
|
||||
fill: {
|
||||
type: 'gradient',
|
||||
gradient: {
|
||||
// enabled: true,
|
||||
shade: 'dark',
|
||||
type: 'horizontal',
|
||||
shadeIntensity: 0.5,
|
||||
gradientToColors: [$primary],
|
||||
inverseColors: true,
|
||||
opacityFrom: 1,
|
||||
opacityTo: 1,
|
||||
stops: [0, 100]
|
||||
},
|
||||
},
|
||||
stroke: {
|
||||
dashArray: 8
|
||||
},
|
||||
series: [83],
|
||||
labels: ['Completed Tickets'],
|
||||
|
||||
}
|
||||
|
||||
var supportChart = new ApexCharts(
|
||||
document.querySelector("#support-tracker-chart"),
|
||||
supportChartoptions
|
||||
);
|
||||
|
||||
supportChart.render();
|
||||
|
||||
// Support Tracker Chart ends
|
||||
|
||||
|
||||
// Product Order Chart starts
|
||||
// -----------------------------
|
||||
|
||||
var productChartoptions = {
|
||||
chart: {
|
||||
height: 325,
|
||||
type: 'radialBar',
|
||||
},
|
||||
colors: [$primary, $warning, $danger],
|
||||
fill: {
|
||||
type: 'gradient',
|
||||
gradient: {
|
||||
// enabled: true,
|
||||
shade: 'dark',
|
||||
type: 'vertical',
|
||||
shadeIntensity: 0.5,
|
||||
gradientToColors: [$primary_light, $warning_light, $danger_light],
|
||||
inverseColors: false,
|
||||
opacityFrom: 1,
|
||||
opacityTo: 1,
|
||||
stops: [0, 100]
|
||||
},
|
||||
},
|
||||
stroke: {
|
||||
lineCap: 'round'
|
||||
},
|
||||
plotOptions: {
|
||||
radialBar: {
|
||||
size: 165,
|
||||
hollow: {
|
||||
size: '20%'
|
||||
},
|
||||
track: {
|
||||
strokeWidth: '100%',
|
||||
margin: 15,
|
||||
},
|
||||
dataLabels: {
|
||||
name: {
|
||||
fontSize: '18px',
|
||||
},
|
||||
value: {
|
||||
fontSize: '16px',
|
||||
},
|
||||
total: {
|
||||
show: true,
|
||||
label: 'Total',
|
||||
|
||||
formatter: function (w) {
|
||||
// By default this function returns the average of all series. The below is just an example to show the use of custom formatter function
|
||||
return 42459
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
},
|
||||
series: [70, 52, 26],
|
||||
labels: ['Finished', 'Pending', 'Rejected'],
|
||||
|
||||
}
|
||||
|
||||
var productChart = new ApexCharts(
|
||||
document.querySelector("#product-order-chart"),
|
||||
productChartoptions
|
||||
);
|
||||
|
||||
productChart.render();
|
||||
|
||||
// Product Order Chart ends //
|
||||
|
||||
|
||||
// Sales Chart starts
|
||||
// -----------------------------
|
||||
|
||||
var salesChartoptions = {
|
||||
chart: {
|
||||
height: 400,
|
||||
type: 'radar',
|
||||
dropShadow: {
|
||||
enabled: true,
|
||||
blur: 8,
|
||||
left: 1,
|
||||
top: 1,
|
||||
opacity: 0.2
|
||||
},
|
||||
toolbar: {
|
||||
show: false
|
||||
},
|
||||
},
|
||||
toolbar: { show: false },
|
||||
series: [{
|
||||
name: 'Sales',
|
||||
data: [90, 50, 86, 40, 100, 20],
|
||||
}, {
|
||||
name: 'Visit',
|
||||
data: [70, 75, 70, 76, 20, 85],
|
||||
}],
|
||||
stroke: {
|
||||
width: 0
|
||||
},
|
||||
colors: [$primary, $info],
|
||||
plotOptions: {
|
||||
radar: {
|
||||
polygons: {
|
||||
strokeColors: ['#e8e8e8', 'transparent', 'transparent', 'transparent', 'transparent', 'transparent'],
|
||||
connectorColors: 'transparent'
|
||||
}
|
||||
}
|
||||
},
|
||||
fill: {
|
||||
type: 'gradient',
|
||||
gradient: {
|
||||
shade: 'dark',
|
||||
gradientToColors: ['#9f8ed7', $info_light],
|
||||
shadeIntensity: 1,
|
||||
type: 'horizontal',
|
||||
opacityFrom: 1,
|
||||
opacityTo: 1,
|
||||
stops: [0, 100, 100, 100]
|
||||
},
|
||||
},
|
||||
markers: {
|
||||
size: 0,
|
||||
},
|
||||
legend: {
|
||||
show: true,
|
||||
position: 'top',
|
||||
horizontalAlign: 'left',
|
||||
fontSize: '16px',
|
||||
markers: {
|
||||
width: 10,
|
||||
height: 10,
|
||||
}
|
||||
},
|
||||
labels: ['Jan', 'Feb', 'Mar', 'Apr', 'May', 'Jun'],
|
||||
dataLabels: {
|
||||
style: {
|
||||
colors: [$strok_color, $strok_color, $strok_color, $strok_color, $strok_color, $strok_color]
|
||||
}
|
||||
},
|
||||
yaxis: {
|
||||
show: false,
|
||||
},
|
||||
grid: {
|
||||
show: false,
|
||||
},
|
||||
|
||||
}
|
||||
|
||||
var salesChart = new ApexCharts(
|
||||
document.querySelector("#sales-chart"),
|
||||
salesChartoptions
|
||||
);
|
||||
|
||||
salesChart.render();
|
||||
|
||||
// Sales Chart ends //
|
||||
|
||||
/***** TOUR ******/
|
||||
var tour = new Shepherd.Tour({
|
||||
classes: 'shadow-md bg-purple-dark',
|
||||
scrollTo: true
|
||||
})
|
||||
|
||||
// tour steps
|
||||
tour.addStep('step-1', {
|
||||
text: 'Toggle Collapse Sidebar.',
|
||||
attachTo: '.modern-nav-toggle .collapse-toggle-icon bottom',
|
||||
buttons: [
|
||||
|
||||
{
|
||||
text: "Skip",
|
||||
action: tour.complete
|
||||
},
|
||||
{
|
||||
text: 'Next',
|
||||
action: tour.next
|
||||
},
|
||||
]
|
||||
});
|
||||
|
||||
tour.addStep('step-2', {
|
||||
text: 'Create your own bookmarks. You can also re-arrange them using drag & drop.',
|
||||
attachTo: '.bookmark-icons .icon-mail bottom',
|
||||
buttons: [
|
||||
|
||||
{
|
||||
text: "Skip",
|
||||
action: tour.complete
|
||||
},
|
||||
|
||||
{
|
||||
text: "previous",
|
||||
action: tour.back
|
||||
},
|
||||
{
|
||||
text: 'Next',
|
||||
action: tour.next
|
||||
},
|
||||
]
|
||||
});
|
||||
|
||||
tour.addStep('step-3', {
|
||||
text: 'You can change language from here.',
|
||||
attachTo: '.dropdown-language .flag-icon bottom',
|
||||
buttons: [
|
||||
|
||||
{
|
||||
text: "Skip",
|
||||
action: tour.complete
|
||||
},
|
||||
|
||||
{
|
||||
text: "previous",
|
||||
action: tour.back
|
||||
},
|
||||
{
|
||||
text: 'Next',
|
||||
action: tour.next
|
||||
},
|
||||
]
|
||||
});
|
||||
|
||||
tour.addStep('step-4', {
|
||||
text: 'Try fuzzy search to visit pages in flash.',
|
||||
attachTo: '.nav-link-search .icon-search bottom',
|
||||
buttons: [
|
||||
|
||||
{
|
||||
text: "Skip",
|
||||
action: tour.complete
|
||||
},
|
||||
|
||||
{
|
||||
text: "previous",
|
||||
action: tour.back
|
||||
},
|
||||
{
|
||||
text: 'Next',
|
||||
action: tour.next
|
||||
},
|
||||
]
|
||||
});
|
||||
|
||||
tour.addStep('step-5', {
|
||||
text: 'Buy this awesomeness at affordable price!',
|
||||
attachTo: '.buy-now bottom',
|
||||
buttons: [
|
||||
|
||||
{
|
||||
text: "previous",
|
||||
action: tour.back
|
||||
},
|
||||
|
||||
{
|
||||
text: "Finish",
|
||||
action: tour.complete
|
||||
},
|
||||
]
|
||||
});
|
||||
|
||||
if ($(window).width() > 1200 && !$("body").hasClass("menu-collapsed")) {
|
||||
tour.start()
|
||||
}
|
||||
else {
|
||||
tour.cancel()
|
||||
}
|
||||
$(window).on("resize", function () {
|
||||
tour.cancel()
|
||||
})
|
||||
|
||||
});
|
||||
636
public/vendor/dashboard/src/js/scripts/pages/dashboard-ecommerce.js
vendored
Executable file
636
public/vendor/dashboard/src/js/scripts/pages/dashboard-ecommerce.js
vendored
Executable file
@@ -0,0 +1,636 @@
|
||||
/*=========================================================================================
|
||||
File Name: dashboard-ecommerce.js
|
||||
Description: dashboard ecommerce page content with Apexchart Examples
|
||||
----------------------------------------------------------------------------------------
|
||||
Item Name: Vuesax HTML Admin Template
|
||||
Version: 1.1
|
||||
Author: PIXINVENT
|
||||
Author URL: http://www.themeforest.net/user/pixinvent
|
||||
==========================================================================================*/
|
||||
|
||||
$(window).on("load", function () {
|
||||
|
||||
var $primary = '#7367F0';
|
||||
var $success = '#28C76F';
|
||||
var $danger = '#EA5455';
|
||||
var $warning = '#FF9F43';
|
||||
var $info = '#00cfe8';
|
||||
var $primary_light = '#A9A2F6';
|
||||
var $danger_light = '#f29292';
|
||||
var $success_light = '#55DD92';
|
||||
var $warning_light = '#ffc085';
|
||||
var $info_light = '#1fcadb';
|
||||
var $strok_color = '#b9c3cd';
|
||||
var $label_color = '#e7e7e7';
|
||||
var $white = '#fff';
|
||||
|
||||
|
||||
// Line Area Chart - 1
|
||||
// ----------------------------------
|
||||
|
||||
var gainedlineChartoptions = {
|
||||
chart: {
|
||||
height: 100,
|
||||
type: 'area',
|
||||
toolbar: {
|
||||
show: false,
|
||||
},
|
||||
sparkline: {
|
||||
enabled: true
|
||||
},
|
||||
grid: {
|
||||
show: false,
|
||||
padding: {
|
||||
left: 0,
|
||||
right: 0
|
||||
}
|
||||
},
|
||||
},
|
||||
colors: [$primary],
|
||||
dataLabels: {
|
||||
enabled: false
|
||||
},
|
||||
stroke: {
|
||||
curve: 'smooth',
|
||||
width: 2.5
|
||||
},
|
||||
fill: {
|
||||
type: 'gradient',
|
||||
gradient: {
|
||||
shadeIntensity: 0.9,
|
||||
opacityFrom: 0.7,
|
||||
opacityTo: 0.5,
|
||||
stops: [0, 80, 100]
|
||||
}
|
||||
},
|
||||
series: [{
|
||||
name: 'Subscribers',
|
||||
data: [28, 40, 36, 52, 38, 60, 55]
|
||||
}],
|
||||
|
||||
xaxis: {
|
||||
labels: {
|
||||
show: false,
|
||||
},
|
||||
axisBorder: {
|
||||
show: false,
|
||||
}
|
||||
},
|
||||
yaxis: [{
|
||||
y: 0,
|
||||
offsetX: 0,
|
||||
offsetY: 0,
|
||||
padding: { left: 0, right: 0 },
|
||||
}],
|
||||
tooltip: {
|
||||
x: { show: false }
|
||||
},
|
||||
}
|
||||
|
||||
var gainedlineChart = new ApexCharts(
|
||||
document.querySelector("#line-area-chart-1"),
|
||||
gainedlineChartoptions
|
||||
);
|
||||
|
||||
gainedlineChart.render();
|
||||
|
||||
|
||||
|
||||
// Line Area Chart - 2
|
||||
// ----------------------------------
|
||||
|
||||
var revenuelineChartoptions = {
|
||||
chart: {
|
||||
height: 100,
|
||||
type: 'area',
|
||||
toolbar: {
|
||||
show: false,
|
||||
},
|
||||
sparkline: {
|
||||
enabled: true
|
||||
},
|
||||
grid: {
|
||||
show: false,
|
||||
padding: {
|
||||
left: 0,
|
||||
right: 0
|
||||
}
|
||||
},
|
||||
},
|
||||
colors: [$success],
|
||||
dataLabels: {
|
||||
enabled: false
|
||||
},
|
||||
stroke: {
|
||||
curve: 'smooth',
|
||||
width: 2.5
|
||||
},
|
||||
fill: {
|
||||
type: 'gradient',
|
||||
gradient: {
|
||||
shadeIntensity: 0.9,
|
||||
opacityFrom: 0.7,
|
||||
opacityTo: 0.5,
|
||||
stops: [0, 80, 100]
|
||||
}
|
||||
},
|
||||
series: [{
|
||||
name: 'Revenue',
|
||||
data: [350, 275, 400, 300, 350, 300, 450]
|
||||
}],
|
||||
|
||||
xaxis: {
|
||||
labels: {
|
||||
show: false,
|
||||
},
|
||||
axisBorder: {
|
||||
show: false,
|
||||
}
|
||||
},
|
||||
yaxis: [{
|
||||
y: 0,
|
||||
offsetX: 0,
|
||||
offsetY: 0,
|
||||
padding: { left: 0, right: 0 },
|
||||
}],
|
||||
tooltip: {
|
||||
x: { show: false }
|
||||
},
|
||||
}
|
||||
|
||||
var revenuelineChart = new ApexCharts(
|
||||
document.querySelector("#line-area-chart-2"),
|
||||
revenuelineChartoptions
|
||||
);
|
||||
|
||||
revenuelineChart.render();
|
||||
|
||||
|
||||
// Line Area Chart - 3
|
||||
// ----------------------------------
|
||||
|
||||
var saleslineChartoptions = {
|
||||
chart: {
|
||||
height: 100,
|
||||
type: 'area',
|
||||
toolbar: {
|
||||
show: false,
|
||||
},
|
||||
sparkline: {
|
||||
enabled: true
|
||||
},
|
||||
grid: {
|
||||
show: false,
|
||||
padding: {
|
||||
left: 0,
|
||||
right: 0
|
||||
}
|
||||
},
|
||||
},
|
||||
colors: [$danger],
|
||||
dataLabels: {
|
||||
enabled: false
|
||||
},
|
||||
stroke: {
|
||||
curve: 'smooth',
|
||||
width: 2.5
|
||||
},
|
||||
fill: {
|
||||
type: 'gradient',
|
||||
gradient: {
|
||||
shadeIntensity: 0.9,
|
||||
opacityFrom: 0.7,
|
||||
opacityTo: 0.5,
|
||||
stops: [0, 80, 100]
|
||||
}
|
||||
},
|
||||
series: [{
|
||||
name: 'Sales',
|
||||
data: [10, 15, 7, 12, 3, 16]
|
||||
}],
|
||||
|
||||
xaxis: {
|
||||
labels: {
|
||||
show: false,
|
||||
},
|
||||
axisBorder: {
|
||||
show: false,
|
||||
}
|
||||
},
|
||||
yaxis: [{
|
||||
y: 0,
|
||||
offsetX: 0,
|
||||
offsetY: 0,
|
||||
padding: { left: 0, right: 0 },
|
||||
}],
|
||||
tooltip: {
|
||||
x: { show: false }
|
||||
},
|
||||
}
|
||||
|
||||
var saleslineChart = new ApexCharts(
|
||||
document.querySelector("#line-area-chart-3"),
|
||||
saleslineChartoptions
|
||||
);
|
||||
|
||||
saleslineChart.render();
|
||||
|
||||
// Line Area Chart - 4
|
||||
// ----------------------------------
|
||||
|
||||
var orderlineChartoptions = {
|
||||
chart: {
|
||||
height: 100,
|
||||
type: 'area',
|
||||
toolbar: {
|
||||
show: false,
|
||||
},
|
||||
sparkline: {
|
||||
enabled: true
|
||||
},
|
||||
grid: {
|
||||
show: false,
|
||||
padding: {
|
||||
left: 0,
|
||||
right: 0
|
||||
}
|
||||
},
|
||||
},
|
||||
colors: [$warning],
|
||||
dataLabels: {
|
||||
enabled: false
|
||||
},
|
||||
stroke: {
|
||||
curve: 'smooth',
|
||||
width: 2.5
|
||||
},
|
||||
fill: {
|
||||
type: 'gradient',
|
||||
gradient: {
|
||||
shadeIntensity: 0.9,
|
||||
opacityFrom: 0.7,
|
||||
opacityTo: 0.5,
|
||||
stops: [0, 80, 100]
|
||||
}
|
||||
},
|
||||
series: [{
|
||||
name: 'Orders',
|
||||
data: [10, 15, 8, 15, 7, 12, 8]
|
||||
}],
|
||||
|
||||
xaxis: {
|
||||
labels: {
|
||||
show: false,
|
||||
},
|
||||
axisBorder: {
|
||||
show: false,
|
||||
}
|
||||
},
|
||||
yaxis: [{
|
||||
y: 0,
|
||||
offsetX: 0,
|
||||
offsetY: 0,
|
||||
padding: { left: 0, right: 0 },
|
||||
}],
|
||||
tooltip: {
|
||||
x: { show: false }
|
||||
},
|
||||
}
|
||||
|
||||
var orderlineChart = new ApexCharts(
|
||||
document.querySelector("#line-area-chart-4"),
|
||||
orderlineChartoptions
|
||||
);
|
||||
|
||||
orderlineChart.render();
|
||||
|
||||
// revenue-chart Chart
|
||||
// -----------------------------
|
||||
|
||||
var revenueChartoptions = {
|
||||
chart: {
|
||||
height: 270,
|
||||
toolbar: { show: false },
|
||||
type: 'line',
|
||||
},
|
||||
stroke: {
|
||||
curve: 'smooth',
|
||||
dashArray: [0, 8],
|
||||
width: [4, 2],
|
||||
},
|
||||
grid: {
|
||||
borderColor: $label_color,
|
||||
},
|
||||
legend: {
|
||||
show: false,
|
||||
},
|
||||
colors: [$danger_light, $strok_color],
|
||||
|
||||
fill: {
|
||||
type: 'gradient',
|
||||
gradient: {
|
||||
shade: 'dark',
|
||||
inverseColors: false,
|
||||
gradientToColors: [$primary, $strok_color],
|
||||
shadeIntensity: 1,
|
||||
type: 'horizontal',
|
||||
opacityFrom: 1,
|
||||
opacityTo: 1,
|
||||
stops: [0, 100, 100, 100]
|
||||
},
|
||||
},
|
||||
markers: {
|
||||
size: 0,
|
||||
hover: {
|
||||
size: 5
|
||||
}
|
||||
},
|
||||
xaxis: {
|
||||
labels: {
|
||||
style: {
|
||||
colors: $strok_color,
|
||||
}
|
||||
},
|
||||
axisTicks: {
|
||||
show: false,
|
||||
},
|
||||
categories: ['01', '05', '09', '13', '17', '21', '26', '31'],
|
||||
axisBorder: {
|
||||
show: false,
|
||||
},
|
||||
tickPlacement: 'on',
|
||||
},
|
||||
yaxis: {
|
||||
tickAmount: 5,
|
||||
labels: {
|
||||
style: {
|
||||
color: $strok_color,
|
||||
},
|
||||
formatter: function (val) {
|
||||
return val > 999 ? (val / 1000).toFixed(1) + 'k' : val;
|
||||
}
|
||||
}
|
||||
},
|
||||
tooltip: {
|
||||
x: { show: false }
|
||||
},
|
||||
series: [{
|
||||
name: "This Month",
|
||||
data: [45000, 47000, 44800, 47500, 45500, 48000, 46500, 48600]
|
||||
},
|
||||
{
|
||||
name: "Last Month",
|
||||
data: [46000, 48000, 45500, 46600, 44500, 46500, 45000, 47000]
|
||||
}
|
||||
],
|
||||
|
||||
}
|
||||
|
||||
var revenueChart = new ApexCharts(
|
||||
document.querySelector("#revenue-chart"),
|
||||
revenueChartoptions
|
||||
);
|
||||
|
||||
revenueChart.render();
|
||||
|
||||
|
||||
// Goal Overview Chart
|
||||
// -----------------------------
|
||||
|
||||
var goalChartoptions = {
|
||||
chart: {
|
||||
height: 250,
|
||||
type: 'radialBar',
|
||||
sparkline: {
|
||||
enabled: true,
|
||||
},
|
||||
dropShadow: {
|
||||
enabled: true,
|
||||
blur: 3,
|
||||
left: 1,
|
||||
top: 1,
|
||||
opacity: 0.1
|
||||
},
|
||||
},
|
||||
colors: [$success],
|
||||
plotOptions: {
|
||||
radialBar: {
|
||||
size: 110,
|
||||
startAngle: -150,
|
||||
endAngle: 150,
|
||||
hollow: {
|
||||
size: '77%',
|
||||
},
|
||||
track: {
|
||||
background: $strok_color,
|
||||
strokeWidth: '50%',
|
||||
},
|
||||
dataLabels: {
|
||||
name: {
|
||||
show: false
|
||||
},
|
||||
value: {
|
||||
offsetY: 18,
|
||||
color: '#99a2ac',
|
||||
fontSize: '4rem'
|
||||
}
|
||||
}
|
||||
}
|
||||
},
|
||||
fill: {
|
||||
type: 'gradient',
|
||||
gradient: {
|
||||
shade: 'dark',
|
||||
type: 'horizontal',
|
||||
shadeIntensity: 0.5,
|
||||
gradientToColors: ['#00b5b5'],
|
||||
inverseColors: true,
|
||||
opacityFrom: 1,
|
||||
opacityTo: 1,
|
||||
stops: [0, 100]
|
||||
},
|
||||
},
|
||||
series: [83],
|
||||
stroke: {
|
||||
lineCap: 'round'
|
||||
},
|
||||
|
||||
}
|
||||
|
||||
var goalChart = new ApexCharts(
|
||||
document.querySelector("#goal-overview-chart"),
|
||||
goalChartoptions
|
||||
);
|
||||
|
||||
goalChart.render();
|
||||
|
||||
// Client Retention Chart
|
||||
// ----------------------------------
|
||||
|
||||
var clientChartoptions = {
|
||||
chart: {
|
||||
stacked: true,
|
||||
type: 'bar',
|
||||
toolbar: { show: false },
|
||||
height: 300,
|
||||
},
|
||||
plotOptions: {
|
||||
bar: {
|
||||
columnWidth: '10%'
|
||||
}
|
||||
},
|
||||
colors: [$primary, $danger],
|
||||
series: [{
|
||||
name: 'New Clients',
|
||||
data: [175, 125, 225, 175, 160, 189, 206, 134, 159, 216, 148, 123]
|
||||
}, {
|
||||
name: 'Retained Clients',
|
||||
data: [-144, -155, -141, -167, -122, -143, -158, -107, -126, -131, -140, -137]
|
||||
}],
|
||||
grid: {
|
||||
borderColor: $label_color,
|
||||
padding: {
|
||||
left: 0,
|
||||
right: 0
|
||||
}
|
||||
},
|
||||
legend: {
|
||||
show: true,
|
||||
position: 'top',
|
||||
horizontalAlign: 'left',
|
||||
offsetX: 0,
|
||||
fontSize: '14px',
|
||||
markers: {
|
||||
radius: 50,
|
||||
width: 10,
|
||||
height: 10,
|
||||
}
|
||||
},
|
||||
dataLabels: {
|
||||
enabled: false
|
||||
},
|
||||
xaxis: {
|
||||
labels: {
|
||||
style: {
|
||||
colors: $strok_color,
|
||||
}
|
||||
},
|
||||
axisTicks: {
|
||||
show: false,
|
||||
},
|
||||
categories: ['Jan', 'Feb', 'Mar', 'Apr', 'May', 'Jun', 'Jul', 'Aug', 'Sep', 'Oct', 'Nov', 'Dec'],
|
||||
axisBorder: {
|
||||
show: false,
|
||||
},
|
||||
},
|
||||
yaxis: {
|
||||
tickAmount: 5,
|
||||
labels: {
|
||||
style: {
|
||||
color: $strok_color,
|
||||
}
|
||||
}
|
||||
},
|
||||
tooltip: {
|
||||
x: { show: false }
|
||||
},
|
||||
}
|
||||
|
||||
var clientChart = new ApexCharts(
|
||||
document.querySelector("#client-retention-chart"),
|
||||
clientChartoptions
|
||||
);
|
||||
|
||||
clientChart.render();
|
||||
|
||||
// Session Chart
|
||||
// ----------------------------------
|
||||
|
||||
var sessionChartoptions = {
|
||||
chart: {
|
||||
type: 'donut',
|
||||
height: 325,
|
||||
toolbar: {
|
||||
show: false
|
||||
}
|
||||
},
|
||||
dataLabels: {
|
||||
enabled: false
|
||||
},
|
||||
series: [58.6, 34.9, 6.5],
|
||||
legend: { show: false },
|
||||
comparedResult: [2, -3, 8],
|
||||
labels: ['Desktop', 'Mobile', 'Tablet'],
|
||||
stroke: { width: 0 },
|
||||
colors: [$primary, $warning, $danger],
|
||||
fill: {
|
||||
type: 'gradient',
|
||||
gradient: {
|
||||
gradientToColors: [$primary_light, $warning_light, $danger_light]
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
var sessionChart = new ApexCharts(
|
||||
document.querySelector("#session-chart"),
|
||||
sessionChartoptions
|
||||
);
|
||||
|
||||
sessionChart.render();
|
||||
|
||||
// Customer Chart
|
||||
// -----------------------------
|
||||
|
||||
var customerChartoptions = {
|
||||
chart: {
|
||||
type: 'pie',
|
||||
height: 330,
|
||||
dropShadow: {
|
||||
enabled: false,
|
||||
blur: 5,
|
||||
left: 1,
|
||||
top: 1,
|
||||
opacity: 0.2
|
||||
},
|
||||
toolbar: {
|
||||
show: false
|
||||
}
|
||||
},
|
||||
labels: ['New', 'Returning', 'Referrals'],
|
||||
series: [690, 258, 149],
|
||||
dataLabels: {
|
||||
enabled: false
|
||||
},
|
||||
legend: { show: false },
|
||||
stroke: {
|
||||
width: 5
|
||||
},
|
||||
colors: [$primary, $warning, $danger],
|
||||
fill: {
|
||||
type: 'gradient',
|
||||
gradient: {
|
||||
gradientToColors: [$primary_light, $warning_light, $danger_light]
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
var customerChart = new ApexCharts(
|
||||
document.querySelector("#customer-chart"),
|
||||
customerChartoptions
|
||||
);
|
||||
|
||||
customerChart.render();
|
||||
|
||||
});
|
||||
|
||||
|
||||
// Chat Application
|
||||
(function ($) {
|
||||
"use strict";
|
||||
// Chat area
|
||||
if ($('.chat-application .user-chats').length > 0) {
|
||||
var chat_user = new PerfectScrollbar(".user-chats", { wheelPropagation: false });
|
||||
}
|
||||
|
||||
})(jQuery);
|
||||
|
||||
42
public/vendor/dashboard/src/js/scripts/pages/faq-kb.js
vendored
Executable file
42
public/vendor/dashboard/src/js/scripts/pages/faq-kb.js
vendored
Executable file
@@ -0,0 +1,42 @@
|
||||
/*=========================================================================================
|
||||
File Name: app-todo.js
|
||||
Description: app-todo
|
||||
----------------------------------------------------------------------------------------
|
||||
Item Name: Vuesax HTML Admin Template
|
||||
Version: 1.1
|
||||
Author: PIXINVENT
|
||||
Author URL: http://www.themeforest.net/user/pixinvent
|
||||
==========================================================================================*/
|
||||
|
||||
$(function() {
|
||||
"use strict";
|
||||
|
||||
// Filter
|
||||
$("#searchbar").on("keyup", function() {
|
||||
var value = $(this).val().toLowerCase();
|
||||
if(value!=""){
|
||||
$(".search-content-info .search-content").filter(function() {
|
||||
$(this).toggle($(this).text().toLowerCase().indexOf(value) > -1);
|
||||
});
|
||||
var search_row = $(".search-content-info .search-content:visible").length;
|
||||
|
||||
//Check if search-content has row or not
|
||||
if ( search_row == 0 ){
|
||||
$('.search-content-info .no-result').removeClass('no-items');
|
||||
}
|
||||
else{
|
||||
if(!$('.search-content-info .no-result').hasClass('no-items') ){
|
||||
$('.search-content-info .no-result').addClass('no-items');
|
||||
}
|
||||
}
|
||||
}
|
||||
else {
|
||||
// If filter box is empty
|
||||
$(".search-content-info .search-content").show();
|
||||
if ($('.search-content-info .no-results').hasClass('no-items')) {
|
||||
$('.search-content-info .no-results').removeClass('no-items');
|
||||
}
|
||||
}
|
||||
});
|
||||
|
||||
});
|
||||
33
public/vendor/dashboard/src/js/scripts/pages/sk-content-sidebar.js
vendored
Executable file
33
public/vendor/dashboard/src/js/scripts/pages/sk-content-sidebar.js
vendored
Executable file
@@ -0,0 +1,33 @@
|
||||
/*=========================================================================================
|
||||
File Name: content-sidebar.js
|
||||
Description: Invoices list datables configurations
|
||||
----------------------------------------------------------------------------------------
|
||||
Item Name: Vuesax HTML Admin Template
|
||||
Version: 1.1
|
||||
Author: PIXINVENT
|
||||
Author URL: http://www.themeforest.net/user/pixinvent
|
||||
==========================================================================================*/
|
||||
|
||||
$(document).ready(function() {
|
||||
|
||||
if($(".sidebar-sticky").length){
|
||||
var headerNavbarHeight,
|
||||
footerNavbarHeight;
|
||||
|
||||
// Header & Footer offset only for right & left sticky sidebar
|
||||
if($("body").hasClass('content-right-sidebar') || $("body").hasClass('content-left-sidebar')){
|
||||
headerNavbarHeight = $('.header-navbar').height();
|
||||
footerNavbarHeight = $('footer.footer').height();
|
||||
}
|
||||
// Header & Footer offset with padding for detached right & left dsticky sidebar
|
||||
else{
|
||||
headerNavbarHeight = $('.header-navbar').height()+24;
|
||||
footerNavbarHeight = $('footer.footer').height()+10;
|
||||
}
|
||||
|
||||
$(".sidebar-sticky").sticky({
|
||||
topSpacing: headerNavbarHeight,
|
||||
bottomSpacing: footerNavbarHeight
|
||||
});
|
||||
}
|
||||
});
|
||||
41
public/vendor/dashboard/src/js/scripts/pages/user-profile.js
vendored
Executable file
41
public/vendor/dashboard/src/js/scripts/pages/user-profile.js
vendored
Executable file
@@ -0,0 +1,41 @@
|
||||
/*=========================================================================================
|
||||
File Name: user-profile.js
|
||||
Description: User Profile jQuery Plugin Intialization
|
||||
--------------------------------------------------------------------------------------
|
||||
Item Name: Vuesax HTML Admin Template
|
||||
Version: 1.1
|
||||
Author: PIXINVENT
|
||||
Author URL: http://www.themeforest.net/user/pixinvent
|
||||
==========================================================================================*/
|
||||
|
||||
|
||||
$(document).ready(function(){
|
||||
|
||||
/************************************
|
||||
* Block Examples *
|
||||
************************************/
|
||||
$('.block-element').on('click', function() {
|
||||
var block_ele = $(this);
|
||||
$(block_ele).block({
|
||||
message: '<div class="spinner-border text-primary"></div>',
|
||||
timeout: 2000, //unblock after 2 seconds
|
||||
overlayCSS: {
|
||||
backgroundColor: '#fff',
|
||||
opacity: 0.8,
|
||||
cursor: 'wait'
|
||||
},
|
||||
css: {
|
||||
border: 0,
|
||||
padding: 0,
|
||||
backgroundColor: 'transparent'
|
||||
}
|
||||
});
|
||||
});
|
||||
|
||||
// profile-header-nav toggle
|
||||
$('.navbar-toggler').on('click',function(){
|
||||
$('.navbar-collapse').toggleClass('show');
|
||||
$('.navbar-toggler-icon i').toggleClass('icon-x icon-align-justify');
|
||||
});
|
||||
|
||||
});
|
||||
21
public/vendor/dashboard/src/js/scripts/pages/user-settings.js
vendored
Executable file
21
public/vendor/dashboard/src/js/scripts/pages/user-settings.js
vendored
Executable file
@@ -0,0 +1,21 @@
|
||||
/*=========================================================================================
|
||||
File Name: user-settings.js
|
||||
Description: User Settings jQuery Plugin Intialization
|
||||
--------------------------------------------------------------------------------------
|
||||
Item Name: Vuesax HTML Admin Template
|
||||
Version: 1.1
|
||||
Author: PIXINVENT
|
||||
Author URL: http://www.themeforest.net/user/pixinvent
|
||||
==========================================================================================*/
|
||||
|
||||
// profile picture upload
|
||||
Dropzone.options.profilePicUpload = {
|
||||
paramName: "file", // The name that will be used to transfer the file
|
||||
maxFiles: 1,
|
||||
init: function () {
|
||||
this.on("maxfilesexceeded", function (file) {
|
||||
this.removeAllFiles();
|
||||
this.addFile(file);
|
||||
});
|
||||
}
|
||||
};
|
||||
72
public/vendor/dashboard/src/js/scripts/pagination/pagination.js
vendored
Executable file
72
public/vendor/dashboard/src/js/scripts/pagination/pagination.js
vendored
Executable file
@@ -0,0 +1,72 @@
|
||||
/*=========================================================================================
|
||||
File Name: pagination.js
|
||||
Description: Provide pagination links for your site or app with the multi-page
|
||||
pagination component.
|
||||
----------------------------------------------------------------------------------------
|
||||
Item Name: Vuesax HTML Admin Template
|
||||
Author: Pixinvent
|
||||
Author URL: hhttp://www.themeforest.net/user/pixinvent
|
||||
==========================================================================================*/
|
||||
(function (window, document, $) {
|
||||
'use strict';
|
||||
// default pagination
|
||||
$('.page1-links').twbsPagination({
|
||||
totalPages: 5,
|
||||
visiblePages: 4,
|
||||
prev: 'Prev',
|
||||
first: null,
|
||||
last: null,
|
||||
startPage: 2,
|
||||
onPageClick: function (event, page) {
|
||||
$('#page1-content').text('You are on Page ' + page);
|
||||
$(".pagination").find('li').addClass('page-item');
|
||||
$(".pagination").find('a').addClass("page-link");
|
||||
}
|
||||
});
|
||||
|
||||
//Default Pagination with last & first
|
||||
$('.firstLast1-links').twbsPagination({
|
||||
totalPages: 5,
|
||||
visiblePages: 4,
|
||||
prev: 'Prev',
|
||||
first: 'First',
|
||||
last: 'Last',
|
||||
startPage: 2,
|
||||
onPageClick: function (event, page) {
|
||||
$('#firstLast1-content').text('You are on Page ' + page);
|
||||
$(".pagination").find('li').addClass('page-item');
|
||||
$(".pagination").find('a').addClass("page-link");
|
||||
}
|
||||
});
|
||||
//Set Start Page Of Pagination
|
||||
$('.start-links').twbsPagination({
|
||||
totalPages: 10,
|
||||
visiblePages: 6,
|
||||
startPage: 5,
|
||||
prev: 'Prev',
|
||||
first: 'First',
|
||||
last: 'Last',
|
||||
onPageClick: function (event, page) {
|
||||
$('#start-content').text('Your start Page ' + page);
|
||||
$(".pagination").find('li').addClass('page-item');
|
||||
$(".pagination").find('a').addClass("page-link");
|
||||
}
|
||||
});
|
||||
|
||||
// Pagination drop after reload
|
||||
$('.url1-links').twbsPagination({
|
||||
totalPages: 10,
|
||||
visiblePages: 5,
|
||||
prev: 'Prev',
|
||||
first: 'First',
|
||||
last: 'Last',
|
||||
href: '?page={{page}}&#url1-content',
|
||||
hrefVariable: '{{page}}',
|
||||
onPageClick: function (event, page) {
|
||||
$('#url1-content').text('You are on Page ' + page);
|
||||
$(".pagination").find('li').addClass('page-item');
|
||||
$(".pagination").find('a').addClass("page-link");
|
||||
}
|
||||
});
|
||||
|
||||
})(window, document, jQuery);
|
||||
137
public/vendor/dashboard/src/js/scripts/pickers/dateTime/pick-a-datetime.js
vendored
Executable file
137
public/vendor/dashboard/src/js/scripts/pickers/dateTime/pick-a-datetime.js
vendored
Executable file
@@ -0,0 +1,137 @@
|
||||
/*=========================================================================================
|
||||
File Name: picker-date-time.js
|
||||
Description: Pick a date/time Picker, Date Range Picker JS
|
||||
----------------------------------------------------------------------------------------
|
||||
Item Name: Vuesax HTML Admin Template
|
||||
Version: 1.1
|
||||
Author: Pixinvent
|
||||
Author URL: hhttp://www.themeforest.net/user/pixinvent
|
||||
==========================================================================================*/
|
||||
(function(window, document, $) {
|
||||
'use strict';
|
||||
|
||||
/******* Pick-a-date Picker *****/
|
||||
// Basic date
|
||||
$('.pickadate').pickadate();
|
||||
|
||||
// Format Date Picker
|
||||
$('.format-picker').pickadate({
|
||||
format: 'mmmm, d, yyyy'
|
||||
});
|
||||
|
||||
// Date limits
|
||||
$('.pickadate-limits').pickadate({
|
||||
min: [2019,3,20],
|
||||
max: [2019,5,28]
|
||||
});
|
||||
|
||||
// Disabled Dates & Weeks
|
||||
|
||||
$('.pickadate-disable').pickadate({
|
||||
disable: [
|
||||
1,
|
||||
[2019,3,6],
|
||||
[2019,3,20]
|
||||
]
|
||||
});
|
||||
|
||||
// Picker Translations
|
||||
$( '.pickadate-translations' ).pickadate({
|
||||
formatSubmit: 'dd/mm/yyyy',
|
||||
monthsFull: [ 'Janvier', 'Février', 'Mars', 'Avril', 'Mai', 'Juin', 'Juillet', 'Août', 'Septembre', 'Octobre', 'Novembre', 'Décembre' ],
|
||||
monthsShort: [ 'Jan', 'Fev', 'Mar', 'Avr', 'Mai', 'Juin', 'Juil', 'Aou', 'Sep', 'Oct', 'Nov', 'Dec' ],
|
||||
weekdaysShort: [ 'Dim', 'Lun', 'Mar', 'Mer', 'Jeu', 'Ven', 'Sam' ],
|
||||
today: 'aujourd\'hui',
|
||||
clear: 'clair',
|
||||
close: 'Fermer'
|
||||
});
|
||||
|
||||
// Month Select Picker
|
||||
$('.pickadate-months').pickadate({
|
||||
selectYears: false,
|
||||
selectMonths: true
|
||||
});
|
||||
|
||||
// Month and Year Select Picker
|
||||
$('.pickadate-months-year').pickadate({
|
||||
selectYears: true,
|
||||
selectMonths: true
|
||||
});
|
||||
|
||||
// Short String Date Picker
|
||||
$('.pickadate-short-string').pickadate({
|
||||
weekdaysShort: ['S', 'M', 'Tu', 'W', 'Th', 'F', 'S'],
|
||||
showMonthsShort: true
|
||||
});
|
||||
|
||||
// Change first weekday
|
||||
$('.pickadate-firstday').pickadate({
|
||||
firstDay: 1
|
||||
});
|
||||
|
||||
|
||||
|
||||
/******* Pick-a-time Picker *****/
|
||||
// Basic time
|
||||
$('.pickatime').pickatime();
|
||||
|
||||
// Format options
|
||||
$('.pickatime-format').pickatime({
|
||||
// Escape any “rule” characters with an exclamation mark (!).
|
||||
format: 'T!ime selected: h:i a',
|
||||
formatLabel: 'HH:i a',
|
||||
formatSubmit: 'HH:i',
|
||||
hiddenPrefix: 'prefix__',
|
||||
hiddenSuffix: '__suffix'
|
||||
});
|
||||
|
||||
|
||||
// Format options
|
||||
$('.pickatime-formatlabel').pickatime({
|
||||
formatLabel: function(time) {
|
||||
var hours = ( time.pick - this.get('now').pick ) / 60,
|
||||
label = hours < 0 ? ' !hours to now' : hours > 0 ? ' !hours from now' : 'now';
|
||||
return 'h:i a <sm!all>' + ( hours ? Math.abs(hours) : '' ) + label +'</sm!all>';
|
||||
}
|
||||
});
|
||||
|
||||
// Min - Max Time to select
|
||||
$( '.pickatime-min-max').pickatime({
|
||||
|
||||
// Using Javascript
|
||||
min: new Date(2015,3,20,7),
|
||||
max: new Date(2015,7,14,18,30)
|
||||
|
||||
// Using Array
|
||||
// min: [7,30],
|
||||
// max: [14,0]
|
||||
});
|
||||
|
||||
// Intervals
|
||||
$('.pickatime-intervals').pickatime({
|
||||
interval: 150
|
||||
});
|
||||
|
||||
// Disable Time
|
||||
$('.pickatime-disable').pickatime({
|
||||
disable: [
|
||||
// Disable Using Integers
|
||||
3, 5, 7, 13, 17, 21
|
||||
|
||||
/* Using Array */
|
||||
// [0,30],
|
||||
// [2,0],
|
||||
// [8,30],
|
||||
// [9,0]
|
||||
]
|
||||
});
|
||||
|
||||
|
||||
// Close on a user action
|
||||
$('.pickatime-close-action').pickatime({
|
||||
closeOnSelect: false,
|
||||
closeOnClear: false
|
||||
});
|
||||
|
||||
|
||||
})(window, document, jQuery);
|
||||
107
public/vendor/dashboard/src/js/scripts/popover/popover.js
vendored
Executable file
107
public/vendor/dashboard/src/js/scripts/popover/popover.js
vendored
Executable file
@@ -0,0 +1,107 @@
|
||||
/*=========================================================================================
|
||||
File Name: popover.js
|
||||
Description: Popovers are an updated version, which don’t rely on images,
|
||||
use CSS3 for animations, and data-attributes for local title storage.
|
||||
----------------------------------------------------------------------------------------
|
||||
Item Name: Vuesax HTML Admin Template
|
||||
Version: 1.1
|
||||
Author: PIXINVENT
|
||||
Author URL: http://www.themeforest.net/user/pixinvent
|
||||
==========================================================================================*/
|
||||
(function(window, document, $) {
|
||||
'use strict';
|
||||
$('[data-toggle="popover"]').popover();
|
||||
|
||||
|
||||
/******************/
|
||||
// Popover events //
|
||||
/******************/
|
||||
|
||||
// onShow event
|
||||
$('#show-popover').popover({
|
||||
title: 'Popover Show Event',
|
||||
content: 'Bonbon chocolate cake. Pudding halvah pie apple pie topping marzipan pastry marzipan cupcake.',
|
||||
trigger: 'click',
|
||||
placement: 'right'
|
||||
}).on('show.bs.popover', function() {
|
||||
alert('Show event fired.');
|
||||
});
|
||||
|
||||
// onShown event
|
||||
$('#shown-popover').popover({
|
||||
title: 'Popover Shown Event',
|
||||
content: 'Bonbon chocolate cake. Pudding halvah pie apple pie topping marzipan pastry marzipan cupcake.',
|
||||
trigger: 'click',
|
||||
placement: 'bottom'
|
||||
}).on('shown.bs.popover', function() {
|
||||
alert('Shown event fired.');
|
||||
});
|
||||
|
||||
// onHide event
|
||||
$('#hide-popover').popover({
|
||||
title: 'Popover Hide Event',
|
||||
content: 'Bonbon chocolate cake. Pudding halvah pie apple pie topping marzipan pastry marzipan cupcake.',
|
||||
trigger: 'click',
|
||||
placement: 'bottom'
|
||||
}).on('hide.bs.popover', function() {
|
||||
alert('Hide event fired.');
|
||||
});
|
||||
|
||||
// onHidden event
|
||||
$('#hidden-popover').popover({
|
||||
title: 'Popover Hidden Event',
|
||||
content: 'Bonbon chocolate cake. Pudding halvah pie apple pie topping marzipan pastry marzipan cupcake.',
|
||||
trigger: 'click',
|
||||
placement: 'left'
|
||||
}).on('hidden.bs.popover', function() {
|
||||
alert('Hidden event fired.');
|
||||
});
|
||||
|
||||
/*******************/
|
||||
// Tooltip methods //
|
||||
/*******************/
|
||||
|
||||
// Show method
|
||||
$('#show-method').on('click', function() {
|
||||
$(this).popover('show');
|
||||
});
|
||||
// Hide method
|
||||
$('#hide-method').on('mouseenter', function() {
|
||||
$(this).popover('show');
|
||||
});
|
||||
$('#hide-method').on('click', function() {
|
||||
$(this).popover('hide');
|
||||
});
|
||||
// Toggle method
|
||||
$('#toggle-method').on('click', function() {
|
||||
$(this).popover('toggle');
|
||||
});
|
||||
// Dispose method
|
||||
$('#dispose').on('click', function() {
|
||||
$('#dispose-method').popover('dispose');
|
||||
});
|
||||
|
||||
|
||||
/* Trigger*/
|
||||
$('.manual').on('click', function() {
|
||||
$(this).popover('show');
|
||||
});
|
||||
$('.manual').on('mouseout', function() {
|
||||
$(this).popover('hide');
|
||||
});
|
||||
|
||||
/****************/
|
||||
// Custom color //
|
||||
/****************/
|
||||
$('[data-popup=popover-color]').popover({
|
||||
template: '<div class="popover"><div class="bg-teal"><div class="popover-arrow"></div><div class="popover-inner"></div></div></div>'
|
||||
});
|
||||
|
||||
/**********************/
|
||||
// Custom borer color //
|
||||
/**********************/
|
||||
$('[data-popup=popover-border]').popover({
|
||||
template: '<div class="popover"><div class="border-orange"><div class="popover-arrow"></div><div class="popover-inner"></div></div></div>'
|
||||
});
|
||||
|
||||
})(window, document, jQuery);
|
||||
97
public/vendor/dashboard/src/js/scripts/tooltip/tooltip.js
vendored
Executable file
97
public/vendor/dashboard/src/js/scripts/tooltip/tooltip.js
vendored
Executable file
@@ -0,0 +1,97 @@
|
||||
/*=========================================================================================
|
||||
File Name: tooltip.js
|
||||
Description: Tooltips are an updated version, which don’t rely on images,
|
||||
use CSS3 for animations, and data-attributes for local title storage.
|
||||
----------------------------------------------------------------------------------------
|
||||
Item Name: Vuesax HTML Admin Template
|
||||
Version: 1.1
|
||||
Author: Pixinvent
|
||||
Author URL: hhttp://www.themeforest.net/user/pixinvent
|
||||
==========================================================================================*/
|
||||
(function(window, document, $) {
|
||||
'use strict';
|
||||
|
||||
/******************/
|
||||
// Tooltip events //
|
||||
/******************/
|
||||
|
||||
// onShow event
|
||||
$('#show-tooltip').tooltip({
|
||||
title: 'Tooltip Show Event',
|
||||
trigger: 'click',
|
||||
placement: 'right'
|
||||
}).on('show.bs.tooltip', function() {
|
||||
alert('Show event fired.');
|
||||
});
|
||||
|
||||
// onShown event
|
||||
$('#shown-tooltip').tooltip({
|
||||
title: 'Tooltip Shown Event',
|
||||
trigger: 'click',
|
||||
placement: 'top'
|
||||
}).on('shown.bs.tooltip', function() {
|
||||
alert('Shown event fired.');
|
||||
});
|
||||
|
||||
// onHide event
|
||||
$('#hide-tooltip').tooltip({
|
||||
title: 'Tooltip Hide Event',
|
||||
trigger: 'click',
|
||||
placement: 'bottom'
|
||||
}).on('hide.bs.tooltip', function() {
|
||||
alert('Hide event fired.');
|
||||
});
|
||||
|
||||
// onHidden event
|
||||
$('#hidden-tooltip').tooltip({
|
||||
title: 'Tooltip Hidden Event',
|
||||
trigger: 'click',
|
||||
placement: 'left'
|
||||
}).on('hidden.bs.tooltip', function() {
|
||||
alert('Hidden event fired.');
|
||||
});
|
||||
|
||||
|
||||
/*******************/
|
||||
// Tooltip methods //
|
||||
/*******************/
|
||||
|
||||
// Show method
|
||||
$('#show-method').on('click', function() {
|
||||
$(this).tooltip('show');
|
||||
});
|
||||
// Hide method
|
||||
$('#hide-method').on('mouseenter', function() {
|
||||
$(this).tooltip('show');
|
||||
});
|
||||
$('#hide-method').on('click', function() {
|
||||
$(this).tooltip('hide');
|
||||
});
|
||||
// Toggle method
|
||||
$('#toggle-method').on('click', function() {
|
||||
$(this).tooltip('toggle');
|
||||
});
|
||||
// Dispose method
|
||||
$('#dispose').on('click', function() {
|
||||
$('#dispose-method').tooltip('dispose');
|
||||
});
|
||||
|
||||
/* Trigger*/
|
||||
$('.manual').on('click', function() {
|
||||
$(this).tooltip('show');
|
||||
});
|
||||
$('.manual').on('mouseout', function() {
|
||||
$(this).tooltip('hide');
|
||||
});
|
||||
|
||||
/* Default template */
|
||||
$(".template").on('click', function(){
|
||||
console.log(
|
||||
'<div class="tooltip" role="tooltip">' +
|
||||
'<div class="tooltip-arrow"></div>' +
|
||||
'<div class="tooltip-inner"></div>' +
|
||||
'</div>'
|
||||
);
|
||||
});
|
||||
|
||||
})(window, document, jQuery);
|
||||
140
public/vendor/dashboard/src/js/scripts/ui/data-list-view.js
vendored
Executable file
140
public/vendor/dashboard/src/js/scripts/ui/data-list-view.js
vendored
Executable file
@@ -0,0 +1,140 @@
|
||||
/*=========================================================================================
|
||||
File Name: data-list-view.js
|
||||
Description: List View
|
||||
----------------------------------------------------------------------------------------
|
||||
Item Name: Vuesax HTML Admin Template
|
||||
Version: 1.1
|
||||
Author: PIXINVENT
|
||||
Author URL: http://www.themeforest.net/user/pixinvent
|
||||
==========================================================================================*/
|
||||
|
||||
$(document).ready(function () {
|
||||
"use strict";
|
||||
// init list view datatable
|
||||
var dataListView = $('.data-list-view').DataTable({
|
||||
responsive: false,
|
||||
columnDefs: [{
|
||||
orderable: true,
|
||||
targets: 0,
|
||||
checkboxes: { selectRow: true },
|
||||
}],
|
||||
"dom": '<"top"<"actions action-btns"B><"action-filters"lf>><"clear">rt<"bottom"<"actions">p>',
|
||||
"oLanguage": {
|
||||
"sLengthMenu": "_MENU_",
|
||||
"sSearch": ""
|
||||
},
|
||||
"aLengthMenu": [[4, 10, 15, 20], [4, 10, 15, 20]],
|
||||
select: {
|
||||
selector: 'td:first-child',
|
||||
style: 'multi'
|
||||
},
|
||||
order: [[1, 'asc']],
|
||||
bInfo: false,
|
||||
"pageLength": 4,
|
||||
buttons: [
|
||||
{
|
||||
text: "<i class='feather icon-plus'></i> Add New",
|
||||
action: function () {
|
||||
$(this).removeClass("btn-secondary")
|
||||
$(".add-new-data").addClass("show")
|
||||
$(".overlay-bg").addClass("show")
|
||||
$("#data-name, #data-price").val("");
|
||||
$("#data-category, #data-status").prop('selectedIndex', 0);
|
||||
},
|
||||
className: "btn-outline-primary",
|
||||
}
|
||||
],
|
||||
initComplete: function (settings, json) {
|
||||
$(".dt-buttons .btn").removeClass("btn-secondary");
|
||||
},
|
||||
});
|
||||
|
||||
// init thumb view datatable
|
||||
var dataThumbView = $(".data-thumb-view").DataTable({
|
||||
responsive: false,
|
||||
columnDefs: [{
|
||||
orderable: true,
|
||||
targets: 0,
|
||||
checkboxes: { selectRow: true },
|
||||
}],
|
||||
"dom": '<"top"<"actions action-btns"B><"action-filters"lf>><"clear">rt<"bottom"<"actions">p>',
|
||||
"oLanguage": {
|
||||
"sLengthMenu": "_MENU_",
|
||||
"sSearch": ""
|
||||
},
|
||||
"aLengthMenu": [[4, 10, 15, 20], [4, 10, 15, 20]],
|
||||
select: {
|
||||
selector: 'td:first-child',
|
||||
style: 'multi'
|
||||
},
|
||||
order: [[1, 'asc']],
|
||||
bInfo: false,
|
||||
"pageLength": 4,
|
||||
buttons: [
|
||||
{
|
||||
text: "<i class='feather icon-plus'></i> Add New",
|
||||
action: function () {
|
||||
$(this).removeClass("btn-secondary");
|
||||
$(".add-new-data").addClass("show");
|
||||
$(".overlay-bg").addClass("show");
|
||||
},
|
||||
className: "btn-outline-primary",
|
||||
}
|
||||
],
|
||||
initComplete: function (settings, json) {
|
||||
$(".dt-buttons .btn").removeClass("btn-secondary");
|
||||
},
|
||||
|
||||
})
|
||||
|
||||
// To append actions dropdown before add new button
|
||||
var actionDropdown = $(".actions-dropodown")
|
||||
actionDropdown.insertBefore($(".top .actions .dt-buttons"))
|
||||
|
||||
// to check and uncheck checkboxes on click of <td> tag
|
||||
$(".data-list-view, .data-thumb-view").on("click", "tbody td", function () {
|
||||
var dtCheckbox = $(this).parent("tr").find(".dt-checkboxes-cell .dt-checkboxes")
|
||||
$(this).closest("tr").toggleClass("selected");
|
||||
dtCheckbox.prop("checked", !dtCheckbox.prop("checked"))
|
||||
});
|
||||
|
||||
$(".dt-checkboxes").on("click", function () {
|
||||
$(this).closest("tr").toggleClass("selected");
|
||||
})
|
||||
$(".dt-checkboxes-select-all input").on("click", function () {
|
||||
$(".data-list-view").find("tbody tr").toggleClass("selected")
|
||||
$(".data-thumb-view").find("tbody tr").toggleClass("selected")
|
||||
})
|
||||
// Scrollbar
|
||||
if ($(".data-items").length > 0) {
|
||||
new PerfectScrollbar(".data-items", { wheelPropagation: false });
|
||||
}
|
||||
|
||||
// Close sidebar
|
||||
$(".hide-data-sidebar, .cancel-data-btn").on("click", function () {
|
||||
$(".add-new-data").removeClass("show");
|
||||
$(".overlay-bg").removeClass("show");
|
||||
$("#data-name, #data-price").val("");
|
||||
$("#data-category, #data-status").prop('selectedIndex', 0);
|
||||
})
|
||||
|
||||
// dropzone init
|
||||
Dropzone.options.dataListUpload = {
|
||||
complete: function (files) {
|
||||
var _this = this;
|
||||
// checks files in class dropzone and remove that files
|
||||
$(".hide-data-sidebar, .cancel-data-btn, .actions .dt-buttons").on("click", function () {
|
||||
$('.dropzone')[0].dropzone.files.forEach(function (file) {
|
||||
file.previewElement.remove();
|
||||
});
|
||||
$('.dropzone').removeClass('dz-started');
|
||||
})
|
||||
}
|
||||
};
|
||||
Dropzone.options.dataListUpload.complete();
|
||||
|
||||
// mac chrome checkbox fix
|
||||
if (navigator.userAgent.indexOf('Mac OS X') != -1) {
|
||||
$(".dt-checkboxes-cell input, .dt-checkboxes").addClass("mac-checkbox");
|
||||
}
|
||||
})
|
||||
57
public/vendor/dashboard/src/scss/bootstrap-extended.scss
vendored
Executable file
57
public/vendor/dashboard/src/scss/bootstrap-extended.scss
vendored
Executable file
@@ -0,0 +1,57 @@
|
||||
// ================================================================================================
|
||||
// File Name: bootstrap-extended.scss
|
||||
// Description: List of modified Bootstrap files. This is an actual copy of bootstrap.scss
|
||||
// excluding files that have not been modified.
|
||||
// ----------------------------------------------------------------------------------------------
|
||||
// Item Name: Vuesax HTML Admin Template
|
||||
// Version: 1.1
|
||||
// Author: PIXINVENT
|
||||
// Author URL: http://www.themeforest.net/user/pixinvent
|
||||
// ================================================================================================
|
||||
|
||||
// Core variables and mixins
|
||||
@import "bootstrap/functions";
|
||||
@import "bootstrap/mixins";
|
||||
@import "bootstrap-extended/mixins";
|
||||
|
||||
// Load variable overrides
|
||||
@import "core/variables/variables";
|
||||
@import "bootstrap/variables";
|
||||
|
||||
// Custom template mixins
|
||||
@import "core/mixins/alert";
|
||||
|
||||
// Overrides user variable
|
||||
@import "core/variables/components-variables";
|
||||
|
||||
// // Core CSS
|
||||
@import "bootstrap-extended/reboot";
|
||||
@import "bootstrap-extended/type";
|
||||
@import "bootstrap-extended/code";
|
||||
@import "bootstrap-extended/grid";
|
||||
@import "bootstrap-extended/tables";
|
||||
@import "bootstrap-extended/forms";
|
||||
@import "bootstrap-extended/buttons";
|
||||
|
||||
// // Components
|
||||
@import "bootstrap-extended/animation";
|
||||
@import "bootstrap-extended/dropdown";
|
||||
@import "bootstrap-extended/navbar";
|
||||
@import "bootstrap-extended/card";
|
||||
@import "bootstrap-extended/breadcrumb";
|
||||
@import "bootstrap-extended/badge";
|
||||
@import "bootstrap-extended/nav";
|
||||
@import "bootstrap-extended/alert";
|
||||
@import "bootstrap-extended/media";
|
||||
@import "bootstrap-extended/progress";
|
||||
@import "bootstrap-extended/list-group";
|
||||
@import "bootstrap-extended/toast";
|
||||
@import 'bootstrap-extended/collapse';
|
||||
@import 'bootstrap-extended/pagination';
|
||||
|
||||
// // Components w/ JavaScript
|
||||
@import "bootstrap-extended/modal";
|
||||
@import "bootstrap-extended/popover";
|
||||
|
||||
// // Utility classes
|
||||
@import "bootstrap-extended/utilities";
|
||||
Binary file not shown.
48
public/vendor/dashboard/src/scss/bootstrap-extended/_alert.scss
vendored
Executable file
48
public/vendor/dashboard/src/scss/bootstrap-extended/_alert.scss
vendored
Executable file
@@ -0,0 +1,48 @@
|
||||
// Alerts
|
||||
|
||||
.alert {
|
||||
font-weight: 500;
|
||||
border: none;
|
||||
|
||||
// close
|
||||
|
||||
.close:focus{
|
||||
outline: 0;
|
||||
}
|
||||
|
||||
// For Alert Content
|
||||
p {
|
||||
font-weight: 500;
|
||||
padding: 2px 0;
|
||||
margin-bottom: 0;
|
||||
vertical-align: middle;
|
||||
}
|
||||
|
||||
span{
|
||||
vertical-align: middle;
|
||||
}
|
||||
|
||||
// For alert heading
|
||||
.alert-heading {
|
||||
font-weight: 700;
|
||||
font-size: 0.9rem;
|
||||
padding: 0;
|
||||
padding-bottom: 8px;
|
||||
}
|
||||
|
||||
// For dark alert
|
||||
|
||||
&.alert-dark {
|
||||
.alert-heading {
|
||||
@include alert-heading-bs($dark);
|
||||
}
|
||||
}
|
||||
|
||||
// For light alert
|
||||
|
||||
&.alert-light {
|
||||
.alert-heading {
|
||||
@include alert-heading-bs($light);
|
||||
}
|
||||
}
|
||||
}
|
||||
67
public/vendor/dashboard/src/scss/bootstrap-extended/_animation.scss
vendored
Executable file
67
public/vendor/dashboard/src/scss/bootstrap-extended/_animation.scss
vendored
Executable file
@@ -0,0 +1,67 @@
|
||||
.collapse-icon {
|
||||
.card-header {
|
||||
position: relative;
|
||||
}
|
||||
|
||||
[data-toggle="collapse"] {
|
||||
&:after {
|
||||
position: absolute;
|
||||
top: 48%;
|
||||
right: 20px;
|
||||
margin-top: -8px;
|
||||
font-family: 'feather';
|
||||
content: "\e845";
|
||||
transition: all 300ms linear 0s;
|
||||
font-size: 0.9rem;
|
||||
}
|
||||
|
||||
&:before {
|
||||
position: absolute;
|
||||
top: 48%;
|
||||
right: 20px;
|
||||
margin-top: -8px;
|
||||
font-family: 'feather';
|
||||
content: "\e842";
|
||||
transition: all 300ms linear 0s;
|
||||
font-size: 0.9rem;
|
||||
}
|
||||
}
|
||||
|
||||
&.left {
|
||||
a {
|
||||
padding-left: 28px;
|
||||
|
||||
&:before,
|
||||
&:after {
|
||||
left: 20px;
|
||||
right: auto;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
[aria-expanded="true"] {
|
||||
&:before {
|
||||
opacity: 0;
|
||||
}
|
||||
}
|
||||
|
||||
[aria-expanded="false"] {
|
||||
&:after {
|
||||
opacity: 0;
|
||||
}
|
||||
}
|
||||
|
||||
&.accordion-icon-rotate {
|
||||
[aria-expanded="true"] {
|
||||
&:before {
|
||||
transform: rotate(180deg);
|
||||
}
|
||||
}
|
||||
|
||||
[aria-expanded="false"] {
|
||||
&:after {
|
||||
transform: rotate(-180deg);
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
88
public/vendor/dashboard/src/scss/bootstrap-extended/_badge.scss
vendored
Executable file
88
public/vendor/dashboard/src/scss/bootstrap-extended/_badge.scss
vendored
Executable file
@@ -0,0 +1,88 @@
|
||||
// Badge
|
||||
|
||||
.badge {
|
||||
color: $white;
|
||||
background-color: $primary;
|
||||
font-weight: 400;
|
||||
&[class*='badge-'] {
|
||||
[class*='icon-'] {
|
||||
line-height: 1;
|
||||
}
|
||||
|
||||
a {
|
||||
color: $white;
|
||||
}
|
||||
|
||||
i{
|
||||
vertical-align: middle;
|
||||
}
|
||||
|
||||
// badge dropdown alignment
|
||||
.dropdown-toggle,
|
||||
&.dropdown-toggle {
|
||||
span,i {
|
||||
vertical-align: text-top;
|
||||
}
|
||||
i{
|
||||
padding-left: .2rem;
|
||||
}
|
||||
&::after {
|
||||
position: relative;
|
||||
top: 0;
|
||||
left: 0;
|
||||
font-size: 1rem;
|
||||
}
|
||||
}
|
||||
.dropdown-menu {
|
||||
a {
|
||||
color: $dropdown-color;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
// square badge
|
||||
&.badge-square {
|
||||
border-radius: 0;
|
||||
}
|
||||
|
||||
// badge-up
|
||||
// to align badge over any element
|
||||
&.badge-up {
|
||||
position: absolute;
|
||||
top: -1rem;
|
||||
right: -1rem;
|
||||
&.badge-sm{
|
||||
top: -.5rem;
|
||||
right: -.5rem;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
// badge sizes
|
||||
.badge-xl {
|
||||
font-size: 1.8rem;
|
||||
}
|
||||
.badge-lg {
|
||||
font-size: 1.2rem;
|
||||
}
|
||||
.badge-md {
|
||||
font-size: 1rem;
|
||||
}
|
||||
.badge-sm {
|
||||
font-size: 0.7rem;
|
||||
}
|
||||
|
||||
// For fullscreen search
|
||||
.badge-icon {
|
||||
i {
|
||||
font-size: 100%;
|
||||
margin-right: 5px;
|
||||
}
|
||||
}
|
||||
|
||||
// badge dropup pointer
|
||||
.dropup{
|
||||
.badge{
|
||||
cursor: pointer;
|
||||
}
|
||||
}
|
||||
111
public/vendor/dashboard/src/scss/bootstrap-extended/_breadcrumb.scss
vendored
Executable file
111
public/vendor/dashboard/src/scss/bootstrap-extended/_breadcrumb.scss
vendored
Executable file
@@ -0,0 +1,111 @@
|
||||
.breadcrumb {
|
||||
font-size: $font-size-base;
|
||||
font-family: $font-family-monospace;
|
||||
background-color: transparent;
|
||||
padding: 0.5rem 0 0.5rem $breadcrumb-padding-x !important;
|
||||
border-left: 1px solid lighten($gray-600, 10%);
|
||||
border-radius: 0;
|
||||
> li {
|
||||
+ li::before {
|
||||
padding-right: .6rem;
|
||||
padding-left: .6rem;
|
||||
}
|
||||
}
|
||||
/* .breadcrumb-item:first-child{
|
||||
a{
|
||||
&:after{
|
||||
content: "\e965";
|
||||
font-family: 'feather';
|
||||
}
|
||||
}
|
||||
} */
|
||||
.breadcrumb-item + .breadcrumb-item{
|
||||
padding-left: 0;
|
||||
&:before{
|
||||
content: "\e847";
|
||||
font-family: 'feather';
|
||||
color: $body-color;
|
||||
}
|
||||
}
|
||||
.breadcrumb-item.active{
|
||||
color: $body-color;
|
||||
}
|
||||
}
|
||||
|
||||
/* Custom scss for page headers style */
|
||||
.breadcrumbs-right{
|
||||
.breadcrumb {
|
||||
float:right;
|
||||
}
|
||||
}
|
||||
.breadcrumbs-top{
|
||||
.breadcrumb {
|
||||
margin: 0;
|
||||
padding: 0;
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
/* Component Specific */
|
||||
|
||||
#component-breadcrumbs{
|
||||
.breadcrumb{
|
||||
border: none;
|
||||
.breadcrumb-item + .breadcrumb-item:before{
|
||||
font-family: none;
|
||||
padding: 0 1rem;
|
||||
}
|
||||
}
|
||||
.default-breadcrumb{
|
||||
&.breadcrumb{
|
||||
.breadcrumb-item + .breadcrumb-item:before{
|
||||
content: "/";
|
||||
}
|
||||
}
|
||||
}
|
||||
.breadcrumb-dots{
|
||||
&.breadcrumb{
|
||||
.breadcrumb-item + .breadcrumb-item:before{
|
||||
content: ".";
|
||||
position: relative;
|
||||
top: -4px;
|
||||
}
|
||||
}
|
||||
}
|
||||
.breadcrumb-dashes{
|
||||
&.breadcrumb{
|
||||
.breadcrumb-item + .breadcrumb-item:before{
|
||||
content: "-";
|
||||
}
|
||||
}
|
||||
}
|
||||
.breadcrumb-pipes{
|
||||
&.breadcrumb{
|
||||
.breadcrumb-item + .breadcrumb-item:before{
|
||||
content: "|";
|
||||
}
|
||||
}
|
||||
}
|
||||
.breadcrumb-chevron{
|
||||
&.breadcrumb{
|
||||
.breadcrumb-item + .breadcrumb-item:before{
|
||||
content: "\e844";
|
||||
font-family: 'feather';
|
||||
position: relative;
|
||||
top: 1px;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
#breadcrumb-alignment{
|
||||
.breadcrumb-wrapper{
|
||||
box-shadow: 1px 1px 10px rgba($pure-black,.1);
|
||||
padding: 1px;
|
||||
border-radius: 10px;
|
||||
.breadcrumb{
|
||||
margin-top: .8rem;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
198
public/vendor/dashboard/src/scss/bootstrap-extended/_buttons.scss
vendored
Executable file
198
public/vendor/dashboard/src/scss/bootstrap-extended/_buttons.scss
vendored
Executable file
@@ -0,0 +1,198 @@
|
||||
// var for boxshadow of gradient buttons
|
||||
// Buttons
|
||||
.btn {
|
||||
// to change cursor of disabled button
|
||||
&:disabled{
|
||||
cursor: default;
|
||||
}
|
||||
// for white button
|
||||
&.btn-white{
|
||||
color: $body-color;
|
||||
&:hover,&:focus,&:active{
|
||||
color: $body-color !important;
|
||||
}
|
||||
}
|
||||
|
||||
// box shadow for gradient colors
|
||||
&[class*="bg-gradient-"]:hover{
|
||||
box-shadow: $gradient-button-bs;
|
||||
}
|
||||
|
||||
// For Boxshadow on hover of normal light, dark and secondary btn
|
||||
&.btn-secondary {
|
||||
color: $white;
|
||||
&:hover {
|
||||
box-shadow: 0 8px 25px -8px rgba($secondary, 1);
|
||||
}
|
||||
}
|
||||
&.btn-dark {
|
||||
&:hover {
|
||||
box-shadow: 0 8px 25px -8px rgba($dark, 1);
|
||||
}
|
||||
}
|
||||
&.btn-light {
|
||||
&:hover {
|
||||
box-shadow: 0 8px 25px -8px rgba($light, 1);
|
||||
}
|
||||
}
|
||||
|
||||
// For Light,dark and secondary outline btns
|
||||
&.btn-outline-secondary,
|
||||
&.btn-outline-dark,
|
||||
&.btn-outline-light {
|
||||
border: 1px solid;
|
||||
}
|
||||
|
||||
// Flat Secondary, Light and Dark
|
||||
&.btn-flat-secondary {
|
||||
&:hover {
|
||||
background-color: rgba($secondary, 0.1);
|
||||
}
|
||||
&:active,
|
||||
&:focus {
|
||||
background: $secondary
|
||||
}
|
||||
}
|
||||
|
||||
&.btn-flat-dark {
|
||||
&:hover {
|
||||
background-color: rgba($dark, 0.1);
|
||||
}
|
||||
&:active,
|
||||
&:focus {
|
||||
background: $dark;
|
||||
color: $white;
|
||||
}
|
||||
}
|
||||
|
||||
&.btn-flat-light {
|
||||
&:hover {
|
||||
background-color: rgba($light, 0.1);
|
||||
}
|
||||
&:active,
|
||||
&:focus {
|
||||
background: $light;
|
||||
}
|
||||
}
|
||||
|
||||
// to remove extra spacing because of border in btn outline
|
||||
&[class*="btn-outline-"]{
|
||||
padding-top: calc(#{$btn-padding-y} - 1px);
|
||||
padding-bottom: calc(#{$btn-padding-y} - 1px);
|
||||
&.btn-lg{
|
||||
padding-top: calc(#{$btn-padding-y-lg} - 1px);
|
||||
padding-bottom: calc(#{$btn-padding-y-lg} - 1px);
|
||||
}
|
||||
&.btn-sm{
|
||||
padding-top: calc(#{$btn-padding-y-sm} - 1px);
|
||||
padding-bottom: calc(#{$btn-padding-y-sm} - 1px);
|
||||
}
|
||||
}
|
||||
|
||||
// Relief Buttons Secondary, Light and Dark
|
||||
&.btn-relief-secondary {
|
||||
background-color: $secondary;
|
||||
box-shadow: inset 0 -3px 0 0 rgba($pure-black, .2);
|
||||
color: $white;
|
||||
|
||||
&:hover {
|
||||
color: $white;
|
||||
}
|
||||
|
||||
&:active,
|
||||
&:focus {
|
||||
outline: none;
|
||||
transform: translateY(3px);
|
||||
}
|
||||
}
|
||||
&.btn-relief-light {
|
||||
background-color: $light;
|
||||
box-shadow: inset 0 -3px 0 0 rgba(0, 0, 0, .2);
|
||||
color: $white;
|
||||
|
||||
&:hover {
|
||||
color: $white;
|
||||
}
|
||||
|
||||
&:active,
|
||||
&:focus {
|
||||
outline: none;
|
||||
transform: translateY(3px);
|
||||
}
|
||||
}
|
||||
&.btn-relief-dark {
|
||||
background-color: $dark;
|
||||
box-shadow: inset 0 -3px 0 0 rgba(255, 255, 255, .1);
|
||||
color: $white;
|
||||
|
||||
&:hover {
|
||||
color: $white;
|
||||
}
|
||||
|
||||
&:active,
|
||||
&:focus {
|
||||
outline: none;
|
||||
transform: translateY(3px);
|
||||
}
|
||||
}
|
||||
|
||||
// For btn-icon
|
||||
&.btn-icon {
|
||||
padding: .715rem .736rem;
|
||||
}
|
||||
&.btn-sm{
|
||||
&.btn-icon{
|
||||
padding: .5rem;
|
||||
}
|
||||
}
|
||||
&.btn-lg{
|
||||
&.btn-icon{
|
||||
padding: 1rem;
|
||||
}
|
||||
}
|
||||
|
||||
// Remove focus/active focus outline
|
||||
&.btn-square {
|
||||
@include button-square-variant(0);
|
||||
}
|
||||
|
||||
&.btn-round {
|
||||
@include button-round-variant(2rem);
|
||||
}
|
||||
|
||||
&:focus,
|
||||
&.focus,
|
||||
&:active,
|
||||
&.active {
|
||||
outline: none;
|
||||
box-shadow: none !important;
|
||||
}
|
||||
&.btn-icon {
|
||||
i {
|
||||
font-size: 1.1rem;
|
||||
}
|
||||
|
||||
}
|
||||
}
|
||||
|
||||
// For White Btn
|
||||
.btn.btn-outline-white,
|
||||
.btn-white{
|
||||
&:hover{
|
||||
color: $black !important;
|
||||
}
|
||||
|
||||
}
|
||||
|
||||
// Added cursor pointer as in latest bootstrap do not have this
|
||||
button,
|
||||
html [type="button"],
|
||||
[type="reset"],
|
||||
[type="submit"] {
|
||||
cursor: pointer;
|
||||
}
|
||||
|
||||
// For Waves Padding
|
||||
.waves-button-input {
|
||||
padding: unset;
|
||||
}
|
||||
273
public/vendor/dashboard/src/scss/bootstrap-extended/_card.scss
vendored
Executable file
273
public/vendor/dashboard/src/scss/bootstrap-extended/_card.scss
vendored
Executable file
@@ -0,0 +1,273 @@
|
||||
.card-group, .card-deck{
|
||||
margin-bottom: 0.75rem;
|
||||
}
|
||||
.card {
|
||||
// box-shadow: 0px 2px 1px rgba(0, 0, 0, 0.05);
|
||||
margin-bottom: $spacer * 2.2;
|
||||
border: none;
|
||||
border-radius: $border-radius;
|
||||
box-shadow: 0px 4px 25px 0px rgba(0,0,0,.1);
|
||||
transition: all .3s ease-in-out;
|
||||
.card {
|
||||
box-shadow: none !important;
|
||||
}
|
||||
.card-subtitle{
|
||||
margin-top: .5rem;
|
||||
}
|
||||
.card-title{
|
||||
font-weight: 500;
|
||||
letter-spacing: 0.05rem;
|
||||
font-size: 1.32rem;
|
||||
margin-bottom: $card-spacer-y / 3;
|
||||
}
|
||||
.card-bordered{
|
||||
border: $card-border-width solid $card-border-color;
|
||||
}
|
||||
|
||||
.card-img-overlay{
|
||||
border-radius: $card-border-radius;
|
||||
}
|
||||
|
||||
//fullscreen card
|
||||
&.card-fullscreen {
|
||||
display: block;
|
||||
z-index: 9999;
|
||||
position: fixed;
|
||||
width: 100% !important;
|
||||
height: 100% !important;
|
||||
top: 0;
|
||||
right: 0;
|
||||
left: 0;
|
||||
bottom: 0;
|
||||
overflow: auto;
|
||||
}
|
||||
.card-body[class*='border-bottom-'] {
|
||||
border-bottom-width: 2px !important;
|
||||
}
|
||||
.card-img-overlay{
|
||||
&.bg-overlay{
|
||||
background: rgba(0,0,0,0.45);
|
||||
}
|
||||
.text-muted{
|
||||
color:$gray-800 !important;
|
||||
}
|
||||
}
|
||||
&.card-minimal{
|
||||
border: none;
|
||||
box-shadow: none;
|
||||
}
|
||||
|
||||
.card-header {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
flex-wrap: wrap;
|
||||
justify-content: space-between;
|
||||
border-bottom: none;
|
||||
padding: 1.5rem 1.5rem 0;
|
||||
background-color: transparent;
|
||||
.card-title{
|
||||
margin-bottom: 0;
|
||||
}
|
||||
|
||||
.heading-elements,
|
||||
.heading-elements-toggle{
|
||||
background-color: inherit;
|
||||
position: absolute;
|
||||
top: 17px;
|
||||
right: 21px;
|
||||
cursor: pointer;
|
||||
&.heading-top-elements{
|
||||
// top: 0px;
|
||||
.page-item{
|
||||
display: inline-block
|
||||
}
|
||||
}
|
||||
|
||||
a{
|
||||
padding: 0;
|
||||
padding-left: 8px;
|
||||
&.btn{
|
||||
padding-top:6px;
|
||||
padding-bottom:6px;
|
||||
}
|
||||
&[data-action="collapse"]{
|
||||
i{
|
||||
transition: all .25s ease-out;
|
||||
display: inline-block;
|
||||
}
|
||||
&.rotate{
|
||||
i{
|
||||
transform: rotate(-180deg);
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
.card-footer{
|
||||
border-top: 1px solid $gray-300;
|
||||
}
|
||||
}
|
||||
// Card Column
|
||||
.card-columns{
|
||||
.card{
|
||||
margin-bottom: $spacer * 2.2;
|
||||
}
|
||||
}
|
||||
|
||||
.text-white{
|
||||
.card-text{
|
||||
color: rgba($white,1);
|
||||
}
|
||||
|
||||
.card-img-overlay{
|
||||
.text-muted{
|
||||
color: $white !important;
|
||||
}
|
||||
}
|
||||
code{
|
||||
background-color: rgba($white, 1);
|
||||
}
|
||||
.heading-elements{
|
||||
i{
|
||||
color: $white;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.card-head-inverse{
|
||||
.heading-elements{
|
||||
i{
|
||||
color: $white;
|
||||
}
|
||||
}
|
||||
color: $white;
|
||||
}
|
||||
.card-transparent{
|
||||
background-color:transparent;
|
||||
}
|
||||
@include media-breakpoint-down(md) {
|
||||
.heading-elements{
|
||||
text-align: center;
|
||||
.list-inline{
|
||||
display: none;
|
||||
}
|
||||
&.visible{
|
||||
top: 22px !important;
|
||||
.list-inline{
|
||||
background-color: $white;
|
||||
display: block;
|
||||
position: absolute;
|
||||
top: 12px;
|
||||
right: 15px;
|
||||
}
|
||||
display: block;
|
||||
margin-top: 0;
|
||||
top: 100%;
|
||||
top: 50px;
|
||||
height: auto;
|
||||
left: 0px;
|
||||
padding: 10px;
|
||||
z-index: 997;
|
||||
position: absolute;
|
||||
width: 100%;
|
||||
}
|
||||
}
|
||||
}
|
||||
@include media-breakpoint-up(lg) {
|
||||
.heading-elements-toggle{
|
||||
display: none;
|
||||
}
|
||||
}
|
||||
|
||||
// overlay-img-card
|
||||
.overlay-img-card{
|
||||
.card-img-overlay,img{
|
||||
max-height: 34.64rem;
|
||||
}
|
||||
}
|
||||
|
||||
// activity timeline for cards page
|
||||
.activity-timeline{
|
||||
|
||||
// for left time line
|
||||
&.timeline-left{
|
||||
border-left: 2px solid $gray-300;
|
||||
padding-left: 40px;
|
||||
margin-left: 1.5rem;
|
||||
li{
|
||||
position: relative;
|
||||
margin-bottom: 20px;
|
||||
p{
|
||||
margin-bottom: 0;
|
||||
}
|
||||
|
||||
//icon styles
|
||||
.timeline-icon{
|
||||
position: absolute;
|
||||
top: 0;
|
||||
left: -4.3rem;
|
||||
padding: .7rem;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
border-radius: 50%;
|
||||
color: $white;
|
||||
i{
|
||||
vertical-align: sub;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
// for right timeline
|
||||
&.timeline-right{
|
||||
border-right: 2px solid $gray-300;
|
||||
padding-right: 40px;
|
||||
margin-right: 1.5rem;
|
||||
li{
|
||||
position: relative;
|
||||
margin-bottom: 20px;
|
||||
text-align: right;
|
||||
p{
|
||||
margin-bottom: 0;
|
||||
}
|
||||
// icon styles
|
||||
.timeline-icon{
|
||||
position: absolute;
|
||||
top: 0;
|
||||
right: -4.3rem;
|
||||
padding: .6rem .7rem;
|
||||
border-radius: 50%;
|
||||
color: $white;
|
||||
i{
|
||||
vertical-align: sub;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
// IE Specific CSS
|
||||
@media screen and (-ms-high-contrast: active), (-ms-high-contrast: none) {
|
||||
// img-fluid class
|
||||
.card-body, .card-content{
|
||||
min-height: 1px;
|
||||
}
|
||||
.profile-card-2{
|
||||
.card{
|
||||
.card-header{
|
||||
display: block;
|
||||
}
|
||||
}
|
||||
}
|
||||
.profile-card-1,
|
||||
.profile-card-3{
|
||||
.card{
|
||||
.avatar{
|
||||
margin-left: auto;
|
||||
margin-right: auto;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
16
public/vendor/dashboard/src/scss/bootstrap-extended/_code.scss
vendored
Executable file
16
public/vendor/dashboard/src/scss/bootstrap-extended/_code.scss
vendored
Executable file
@@ -0,0 +1,16 @@
|
||||
|
||||
// Inline code
|
||||
code {
|
||||
padding: .1rem .4rem;
|
||||
font-size: 90%;
|
||||
color: $code-color;
|
||||
background-color: $kbd-bg;
|
||||
@include border-radius($border-radius/2);
|
||||
}
|
||||
pre{
|
||||
background-color : #f7f7f9;
|
||||
code
|
||||
{
|
||||
background-color: transparent !important;
|
||||
}
|
||||
}
|
||||
113
public/vendor/dashboard/src/scss/bootstrap-extended/_collapse.scss
vendored
Executable file
113
public/vendor/dashboard/src/scss/bootstrap-extended/_collapse.scss
vendored
Executable file
@@ -0,0 +1,113 @@
|
||||
// For Collaspe And Accordion
|
||||
|
||||
// For collapse-title
|
||||
.accordion,
|
||||
.collapse-bordered {
|
||||
.collapse-title {
|
||||
font-weight: 400;
|
||||
font-size: 1.2rem;
|
||||
}
|
||||
.card-header{
|
||||
cursor: pointer;
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
// For collapse title
|
||||
.collapse-title{
|
||||
color: inherit;
|
||||
&:hover{
|
||||
color: inherit;
|
||||
}
|
||||
}
|
||||
|
||||
// To add a border below collapse/accordion heading
|
||||
.collapse-bordered {
|
||||
.card:first-child {
|
||||
border-top: 0;
|
||||
}
|
||||
.card:last-child {
|
||||
border-bottom: 0;
|
||||
}
|
||||
.card {
|
||||
margin-bottom: 0;
|
||||
border-bottom: 1px solid rgba($pure-black, .04);
|
||||
border-radius: 0;
|
||||
.card-header {
|
||||
padding: 1rem;
|
||||
}
|
||||
.card-body {
|
||||
padding: 1rem;
|
||||
line-height: 1.5;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.accordion {
|
||||
.collapse-border-item {
|
||||
&.card {
|
||||
border: 1px solid rgba($pure-black, .1);
|
||||
margin-bottom: 0;
|
||||
&:first-child {
|
||||
border-bottom: 0;
|
||||
}
|
||||
.card-header {
|
||||
padding: 1rem;
|
||||
}
|
||||
.card-body {
|
||||
padding: 1rem;
|
||||
line-height: 1.5;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
// For Collapse with shadow
|
||||
.accordion-shadow {
|
||||
box-shadow: 0 0px 4px 0 rgba(0, 0, 0, 0.1) ;
|
||||
padding: .15rem .75rem;
|
||||
border-radius: $border-radius;
|
||||
.card {
|
||||
&.open{
|
||||
border-radius: 0.571rem;
|
||||
margin: 10px 0;
|
||||
border: 0;
|
||||
box-shadow: 0px 0px 8px 0px rgba(0, 0, 0, 0.1) !important;
|
||||
}
|
||||
}
|
||||
.card:first-child {
|
||||
border-top-left-radius: 0.571rem;
|
||||
border-top-right-radius: 0.571rem;
|
||||
}
|
||||
.card:last-child {
|
||||
border-bottom-left-radius: 0.571rem;
|
||||
border-bottom-right-radius: 0.571rem;
|
||||
}
|
||||
}
|
||||
|
||||
// For Collapse with border
|
||||
.collapse-border {
|
||||
border: 1px solid rgba($pure-black, .1);
|
||||
border-radius: 0.5rem;
|
||||
&+.collapse.show {
|
||||
border: 1px solid rgba($pure-black, .1)
|
||||
}
|
||||
}
|
||||
|
||||
// For Collapse with margin
|
||||
.collapse-margin {
|
||||
margin-top: .71rem;
|
||||
margin-bottom: .71rem !important;
|
||||
box-shadow: 0 2px 15px 0 rgba(0, 0, 0, .05);
|
||||
border-radius: 5px;
|
||||
border-bottom: 0 solid transparent !important;
|
||||
.card-header {
|
||||
padding: 1rem;
|
||||
border-radius: 5px;
|
||||
}
|
||||
.card-body {
|
||||
padding: 1rem;
|
||||
line-height: 1.5rem;
|
||||
}
|
||||
}
|
||||
355
public/vendor/dashboard/src/scss/bootstrap-extended/_dropdown.scss
vendored
Executable file
355
public/vendor/dashboard/src/scss/bootstrap-extended/_dropdown.scss
vendored
Executable file
@@ -0,0 +1,355 @@
|
||||
// The dropdown menu
|
||||
.dropdown{
|
||||
|
||||
// split warning dropdown toggle
|
||||
&.show{
|
||||
.btn-outline-warning,
|
||||
.btn-outline-light{
|
||||
&.dropdown-toggle{
|
||||
color: $white;
|
||||
}
|
||||
}
|
||||
}
|
||||
.btn:not(.btn-sm):not(.btn-lg),
|
||||
.btn:not(.btn-sm):not(.btn-lg).dropdown-toggle {
|
||||
padding: $dropdown-btn-padding-y $dropdown-btn-padding-x;
|
||||
&.btn-round {
|
||||
@include button-round-variant(2rem);
|
||||
}
|
||||
}
|
||||
|
||||
.btn.dropdown-toggle.dropdown-toggle-split {
|
||||
padding: $dropdown-btn-padding-y $dropdown-btn-split-padding-x;
|
||||
border-left-color: rgba($white, 0.2) !important;
|
||||
border-top-left-radius: 0;
|
||||
border-bottom-left-radius: 0;
|
||||
}
|
||||
|
||||
[class*="btn-outline-"].dropdown-toggle.dropdown-toggle-split {
|
||||
border-left: 0 !important;
|
||||
|
||||
&:active {
|
||||
color: $white;
|
||||
}
|
||||
}
|
||||
|
||||
// dropdown menu
|
||||
.dropdown-menu {
|
||||
border: 1px solid rgba($pure-black, .05); // border opacity has been reduced to make it look same as vue's dropdown border [component page, list view page]
|
||||
border-radius: $dropdown-border-radius;
|
||||
transform: scale(1, 0);
|
||||
box-shadow: 0 5px 25px rgba($pure-black, 0.1); // this according to vue version
|
||||
// left: 5px; // it creates issue in navbar - notification dropdown
|
||||
min-width: 8rem;
|
||||
&::before {
|
||||
content: '';
|
||||
position: absolute;
|
||||
top: -1px;
|
||||
left: 1.2rem;
|
||||
width: .75rem;
|
||||
height: .75rem;
|
||||
display: block;
|
||||
background: $white;
|
||||
transform: rotate(45deg) translate(-7px);
|
||||
border-top: 1px solid rgba($pure-black, .1);
|
||||
border-left: 1px solid rgba($pure-black, .1);
|
||||
z-index: 10;
|
||||
box-sizing: border-box;
|
||||
}
|
||||
|
||||
&.dropdown-menu-right {
|
||||
&::before {
|
||||
right: .6rem;
|
||||
left: auto;
|
||||
}
|
||||
|
||||
}
|
||||
|
||||
.dropdown-header {
|
||||
padding: .714rem 1.428rem;
|
||||
margin-top: .714rem;
|
||||
}
|
||||
|
||||
.dropdown-item {
|
||||
padding: .5rem 1rem;
|
||||
color: $body-color;
|
||||
width: auto;
|
||||
cursor: pointer;
|
||||
&:hover{
|
||||
background-color: $body-bg;
|
||||
color: $primary;
|
||||
}
|
||||
&.active {
|
||||
color: $white;
|
||||
}
|
||||
|
||||
&:active {
|
||||
background-color: transparent;
|
||||
color: $dropdown-color;
|
||||
}
|
||||
}
|
||||
|
||||
}
|
||||
|
||||
i {
|
||||
margin-right: 0.5rem;
|
||||
}
|
||||
|
||||
// If don't won't dropdown/up arrow
|
||||
&.no-arrow{
|
||||
.dropdown-toggle{
|
||||
&:after{
|
||||
display: none;
|
||||
}
|
||||
i{
|
||||
margin-right: 0;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
// same padding for diffrent directions
|
||||
.dropdown,
|
||||
.dropup,
|
||||
.dropright,
|
||||
.dropleft{
|
||||
position: relative;
|
||||
.dropdown-menu{
|
||||
.dropdown-item{
|
||||
padding: .714rem 1.428rem;
|
||||
}
|
||||
}
|
||||
}
|
||||
.show {
|
||||
>.dropdown-menu {
|
||||
transform: scale(1, 1);
|
||||
opacity: 1;
|
||||
display: block;
|
||||
}
|
||||
}
|
||||
|
||||
.dropdown-toggle {
|
||||
// changed icon caret
|
||||
|
||||
&::after {
|
||||
border: none !important;
|
||||
font-family: 'feather';
|
||||
content: "\e842" !important;
|
||||
position: relative;
|
||||
top: 1px;
|
||||
right: 0px;
|
||||
left: .714rem;
|
||||
padding: 0;
|
||||
// left: 1.4rem;
|
||||
margin: 0;
|
||||
vertical-align: 0;
|
||||
}
|
||||
|
||||
&.dropdown-toggle-split {
|
||||
border-left: 1px solid rgba($white, 0.2);
|
||||
|
||||
&:after {
|
||||
left: 0;
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
// hide default arrow to show custom icon DD
|
||||
&.nav-hide-arrow {
|
||||
&::after {
|
||||
display: none;
|
||||
}
|
||||
}
|
||||
|
||||
// Prevent the focus on the dropdown toggle when closing dropdowns
|
||||
&:focus {
|
||||
outline: 0;
|
||||
}
|
||||
}
|
||||
|
||||
// Horizontal layout navigation menu dropdown arrow
|
||||
.navbar-horizontal {
|
||||
.dropdown-submenu {
|
||||
.dropdown-toggle::after {
|
||||
top: -9px !important;
|
||||
margin-top: 1.25rem;
|
||||
right: 1px;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
// Add extra class to `.dropdown-menu` to flip the alignment of the dropdown menu with the parent.
|
||||
/* .dropdown-menu-right {
|
||||
left: auto !important; // Input group with dropdown issue for dropdown-menu-right
|
||||
right: 0;
|
||||
} */
|
||||
|
||||
|
||||
// Color theme active & hover
|
||||
.btn-secondary~.dropdown-menu {
|
||||
.dropdown-item {
|
||||
&.active,
|
||||
&:hover {
|
||||
background-color: darken($white, 20%);
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
// DropUp
|
||||
.dropup {
|
||||
position: relative;
|
||||
.btn,
|
||||
.btn.dropdown-toggle {
|
||||
padding: $dropdown-btn-padding-y $dropdown-btn-padding-x;
|
||||
}
|
||||
.btn.dropdown-toggle.dropdown-toggle-split {
|
||||
padding: $dropdown-btn-padding-y $dropdown-btn-split-padding-x;
|
||||
border-color: rgba($white, 0.2) !important;
|
||||
}
|
||||
.dropdown-toggle {
|
||||
// changed icon dropup caret
|
||||
&::after {
|
||||
content: "\e845" !important;
|
||||
vertical-align: 0.05rem;
|
||||
}
|
||||
}
|
||||
.dropdown-menu {
|
||||
&::before {
|
||||
content: '';
|
||||
position: absolute;
|
||||
bottom: -.714rem;
|
||||
left: 1.214rem;
|
||||
width: .714rem;
|
||||
height: .714rem;
|
||||
display: block;
|
||||
background: $white;
|
||||
transform: rotate(45deg) translate(-7px);
|
||||
border-bottom: 1px solid rgba($pure-black, .1);
|
||||
border-right: 1px solid rgba($pure-black, .1);
|
||||
z-index: 10;
|
||||
box-sizing: border-box;
|
||||
}
|
||||
&.dropdown-menu-right{
|
||||
&::before{
|
||||
left: auto;
|
||||
right: .714rem;
|
||||
}
|
||||
}
|
||||
|
||||
}
|
||||
.dropdown-submenu {
|
||||
.dropdown-menu {
|
||||
bottom: auto;
|
||||
top: 0;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
// DropLeft
|
||||
.dropleft {
|
||||
.btn,
|
||||
.btn.dropdown-toggle {
|
||||
padding: $dropdown-btn-padding-y $dropdown-btn-padding-x;
|
||||
}
|
||||
.btn.dropdown-toggle.dropdown-toggle-split {
|
||||
padding: $dropdown-btn-padding-y $dropdown-btn-split-padding-x;
|
||||
}
|
||||
.dropdown-toggle {
|
||||
// changed icon dropup caret
|
||||
&::before {
|
||||
border: none !important;
|
||||
font-family: 'feather';
|
||||
content: "\e843" !important;
|
||||
}
|
||||
}
|
||||
.dropdown-menu {
|
||||
&::before {
|
||||
content: '';
|
||||
position: absolute;
|
||||
top: 1.285rem;
|
||||
right: 0;
|
||||
width: .714rem;
|
||||
height: .714rem;
|
||||
display: block;
|
||||
background: $white;
|
||||
transform: rotate(130deg) translate(-8px);
|
||||
border-top: 1px solid rgba($pure-black, .1);
|
||||
border-left: 1px solid rgba($pure-black, .1);
|
||||
z-index: 10;
|
||||
box-sizing: border-box;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
// DropRight
|
||||
.dropright {
|
||||
.btn,
|
||||
.btn.dropdown-toggle {
|
||||
padding: $dropdown-btn-padding-y $dropdown-btn-padding-x;
|
||||
}
|
||||
.btn.dropdown-toggle.dropdown-toggle-split {
|
||||
padding: $dropdown-btn-padding-y $dropdown-btn-split-padding-x;
|
||||
}
|
||||
.dropdown-toggle {
|
||||
// changed icon dropup caret
|
||||
&::after {
|
||||
border: none !important;
|
||||
font-family: 'feather';
|
||||
content: "\e844" !important;
|
||||
}
|
||||
}
|
||||
.dropdown-menu {
|
||||
&::before {
|
||||
content: '';
|
||||
position: absolute;
|
||||
top: 1.285rem;
|
||||
left: -0.9rem;
|
||||
width: .714rem;
|
||||
height: .714rem;
|
||||
display: block;
|
||||
background: $white;
|
||||
transform: rotate(140deg) translate(-9px);
|
||||
border-bottom: 1px solid rgba($pure-black, .1);
|
||||
border-right: 1px solid rgba($pure-black, .1);
|
||||
z-index: 10;
|
||||
box-sizing: border-box;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
// Dropdown icon
|
||||
.dropdown,
|
||||
.dropup {
|
||||
&.dropdown-icon-wrapper {
|
||||
.dropdown-toggle {
|
||||
&:after {
|
||||
display: none;
|
||||
}
|
||||
}
|
||||
.dropdown-menu {
|
||||
min-width: auto;
|
||||
.dropdown-item {
|
||||
padding: 0.5rem 1.1rem;
|
||||
cursor: pointer;
|
||||
i {
|
||||
font-size: 1.3rem;
|
||||
color: $body-color;
|
||||
}
|
||||
&:hover{
|
||||
color: $white;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
// for white button
|
||||
.btn.btn-white ~ .dropdown-menu {
|
||||
.dropdown-item:not(.acitve):hover{
|
||||
color: $body-color !important;
|
||||
}
|
||||
.dropdown-item.active{
|
||||
color: $body-color;
|
||||
}
|
||||
}
|
||||
825
public/vendor/dashboard/src/scss/bootstrap-extended/_forms.scss
vendored
Executable file
825
public/vendor/dashboard/src/scss/bootstrap-extended/_forms.scss
vendored
Executable file
@@ -0,0 +1,825 @@
|
||||
// placeholder spacific scss
|
||||
.form-control{
|
||||
&::placeholder{
|
||||
font-size: 0.85rem;
|
||||
color: rgba($black, 0.4);
|
||||
transition: all .2s ease;
|
||||
}
|
||||
|
||||
&:-ms-input-placeholder {
|
||||
color: darken($body-bg, 20%);
|
||||
}
|
||||
|
||||
&:focus{
|
||||
&::placeholder{
|
||||
transform: translate(5px);
|
||||
transition: all .2s ease;
|
||||
}
|
||||
~.form-control-position{
|
||||
i{
|
||||
color: $primary;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
/* Form specific Scss */
|
||||
|
||||
// Form Label Scscc
|
||||
label{
|
||||
color: darken($body-bg, 70%);
|
||||
font-size: 0.85rem;
|
||||
margin-bottom: 0;
|
||||
padding-left: 0.2rem;
|
||||
}
|
||||
|
||||
// Text area fontsize and line height
|
||||
textarea.form-control{
|
||||
line-height: 1.6rem;
|
||||
font-size: 1rem;
|
||||
}
|
||||
|
||||
// Form group Scscc
|
||||
.form-group{
|
||||
margin-bottom: 1.5rem;
|
||||
}
|
||||
|
||||
|
||||
// Form control Scscc
|
||||
.form-control{
|
||||
border: 1px solid darken($body-bg, 12%);
|
||||
color: darken($body-bg, 60%);
|
||||
}
|
||||
// Used for Card - Check it and remove if not used
|
||||
.form-section{
|
||||
color: $gray-600;
|
||||
line-height: 3rem;
|
||||
margin-bottom: 20px;
|
||||
border-bottom: 1px solid $gray-600;
|
||||
|
||||
i{
|
||||
font-size: 20px;
|
||||
margin-left: 5px;
|
||||
margin-right: 10px;
|
||||
}
|
||||
}
|
||||
|
||||
/* .form-body{
|
||||
overflow: hidden;
|
||||
} */
|
||||
|
||||
// Used for Card - Check it and remove if not used
|
||||
.form-actions{
|
||||
border-top: 1px solid darken($body-bg, 10%);
|
||||
padding: 20px 0;
|
||||
margin-top: 20px;
|
||||
|
||||
&.filled{
|
||||
background-color: $body-bg;
|
||||
}
|
||||
&.center{
|
||||
text-align: center;
|
||||
}
|
||||
&.right{
|
||||
text-align: right;
|
||||
}
|
||||
|
||||
&.top{
|
||||
border-top: 0;
|
||||
border-bottom: 1px solid darken($body-bg, 10%);
|
||||
margin-top: 0;
|
||||
margin-bottom: 20px;
|
||||
}
|
||||
|
||||
@include media-breakpoint-down(sm) {
|
||||
.buttons-group{
|
||||
float: left !important;
|
||||
margin-bottom: 10px;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
// Form-horizotnal layout
|
||||
.form-horizontal{
|
||||
.form-group{
|
||||
@include media-breakpoint-up(sm) {
|
||||
.label-control{
|
||||
text-align: right;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
// Form Control Large
|
||||
.form-control.form-control-lg{
|
||||
padding: 1rem;
|
||||
&::placeholder{
|
||||
font-size: 1.25rem;
|
||||
}
|
||||
}
|
||||
|
||||
// Form Control Small
|
||||
.form-control.form-control-sm{
|
||||
padding: 0.6rem;
|
||||
&::placeholder{
|
||||
font-size: 0.7rem;
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
// Custom-File-Input
|
||||
.custom-file-label{
|
||||
padding: ($custom-file-padding-y - 0.3) $custom-file-padding-x;
|
||||
&::after{
|
||||
padding: ($custom-file-padding-y - 0.3) $custom-file-padding-x;
|
||||
height: auto;
|
||||
}
|
||||
}
|
||||
|
||||
// Select Inputs Specific SCSS
|
||||
select.form-control {
|
||||
&:not([multiple="multiple"]){
|
||||
background-image:
|
||||
url("../../app-assets/images/pages/arrow-down.png");
|
||||
background-position:
|
||||
calc(100% - 12px) 13px,
|
||||
calc(100% - 20px) 13px,
|
||||
100% 0;
|
||||
background-size:
|
||||
12px 12px,
|
||||
10px 10px;
|
||||
background-repeat: no-repeat;
|
||||
-webkit-appearance: none;
|
||||
-moz-appearance: none;
|
||||
padding-right: 1.5rem;
|
||||
}
|
||||
}
|
||||
|
||||
// For customs-select remove double arrow
|
||||
.custom-select{
|
||||
-moz-appearance: none; // For firefox
|
||||
-webkit-appearance: none; // for chorme
|
||||
}
|
||||
|
||||
// input group addon
|
||||
.input-group-addon {
|
||||
background-color: #ECEFF1;
|
||||
border-color: #BABFC7;
|
||||
}
|
||||
|
||||
// Custom Checkbox
|
||||
.custom-control-label::before, .custom-control-label::after{
|
||||
width: 1.143rem;
|
||||
height: 1.143rem;
|
||||
top: 0.08rem;
|
||||
}
|
||||
|
||||
// Custom-checkbox when not disabled and active
|
||||
.custom-control-input:not(:disabled){
|
||||
&:active ~ .custom-control-label{
|
||||
&::before {
|
||||
background-color: $primary;
|
||||
border-color: $primary;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
/* Floating label Group */
|
||||
.form-label-group{
|
||||
position: relative;
|
||||
margin-bottom: 1.5rem;
|
||||
|
||||
// Form-Control-Large in Floating Label Group
|
||||
.form-control-lg{
|
||||
~ label{
|
||||
font-size: 1.25rem;
|
||||
padding: 1rem;
|
||||
}
|
||||
}
|
||||
|
||||
// Form-Control-Small in Floating Label Group
|
||||
.form-control-sm{
|
||||
~ label{
|
||||
font-size: 0.7rem;
|
||||
}
|
||||
}
|
||||
|
||||
// Form-label
|
||||
> label {
|
||||
position: absolute;
|
||||
top: 0;
|
||||
left: 0;
|
||||
display: block;
|
||||
transition: all .25s ease-in-out;
|
||||
padding: .6rem;
|
||||
color: rgba($black, 0.4);
|
||||
font-size: .85rem;
|
||||
opacity: 0;
|
||||
}
|
||||
// form-input
|
||||
> input, textarea{
|
||||
padding: .6rem;
|
||||
|
||||
// from-input on focus change label color
|
||||
&:focus, &:not(:active){
|
||||
&:not(:placeholder-shown) ~ label {
|
||||
color: rgba($primary, 1) !important;
|
||||
transition: all .25s ease-in-out;
|
||||
opacity: 1;
|
||||
}
|
||||
}
|
||||
&:not(:focus){
|
||||
&:not(:placeholder-shown) ~ label {
|
||||
color: rgba($black, 0.4) !important;
|
||||
}
|
||||
}
|
||||
// form-label after entering text in input box
|
||||
&:not(:placeholder-shown) ~ label {
|
||||
padding : .25rem 0;
|
||||
font-size: .7rem;
|
||||
top: -20px;
|
||||
left: 3px;
|
||||
}
|
||||
}
|
||||
|
||||
// has-icon left with input
|
||||
&.has-icon-left{
|
||||
> label{
|
||||
left: 36px;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
/* VueSax Custom Checkbox */
|
||||
.vs-checkbox-con{
|
||||
position: relative;
|
||||
display: flex;
|
||||
align-items:center;
|
||||
justify-content: flex-start;
|
||||
margin: .25rem 0;
|
||||
input {
|
||||
position: absolute;
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
opacity: 0;
|
||||
z-index: 200;
|
||||
cursor: pointer;
|
||||
top: 0;
|
||||
&:checked{
|
||||
~.vs-checkbox{
|
||||
transform: rotate(0deg);
|
||||
border-color: $primary;
|
||||
.vs-checkbox--check{
|
||||
transform: translate(0);
|
||||
background-color: $primary;
|
||||
.vs-icon{
|
||||
transform: translate(0);
|
||||
line-height: 1.2;
|
||||
opacity: 1;
|
||||
}
|
||||
}
|
||||
&.vs-checkbox-sm{
|
||||
.vs-checkbox--check .vs-icon{
|
||||
font-size: 0.75rem;
|
||||
}
|
||||
}
|
||||
&.vs-checkbox-lg{
|
||||
.vs-checkbox--check .vs-icon{
|
||||
font-size: 1.2rem;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
&:active:checked+.vs-checkbox{
|
||||
.vs-checkbox--check{
|
||||
transform: translate(3px);
|
||||
background-color: $primary;
|
||||
.vs-icon{
|
||||
opacity: 1;
|
||||
transform: translate(6px);
|
||||
}
|
||||
}
|
||||
}
|
||||
&:disabled{
|
||||
cursor: default;
|
||||
pointer-events: none;
|
||||
+.vs-checkbox {
|
||||
cursor: default;
|
||||
opacity: .5;
|
||||
}
|
||||
}
|
||||
}
|
||||
.vs-checkbox{
|
||||
cursor: pointer;
|
||||
position: relative;
|
||||
width: $vs-checkbox-box;
|
||||
height: $vs-checkbox-box;
|
||||
border-width: $vs-checkbox-radio-border-width;
|
||||
border-style: solid;
|
||||
border-color: $vs-checkbox-radio-border-color;
|
||||
border-radius: 2px;
|
||||
transform: rotate(-90deg);
|
||||
transition: all .2s ease;
|
||||
overflow: hidden;
|
||||
margin-right: .5rem;
|
||||
&.vs-checkbox-sm{
|
||||
width: $vs-checkbox-box-sm;
|
||||
height: $vs-checkbox-box-sm;
|
||||
}
|
||||
&.vs-checkbox-lg{
|
||||
width: $vs-checkbox-box-lg;
|
||||
height: $vs-checkbox-box-lg;
|
||||
}
|
||||
.vs-checkbox--check{
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
position: absolute;
|
||||
left: 0;
|
||||
transform: translate(100%);
|
||||
transform-origin: right;
|
||||
transition: all .2s ease;
|
||||
z-index: 10;
|
||||
.vs-icon{
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
color: $white;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
/* VueSax Custom Radio */
|
||||
.vs-radio-con{
|
||||
position: relative;
|
||||
display: flex;
|
||||
align-items:center;
|
||||
justify-content: flex-start;
|
||||
margin: .25rem 0;
|
||||
input {
|
||||
position: absolute;
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
opacity: 0;
|
||||
z-index: 200;
|
||||
cursor: pointer;
|
||||
&:checked{
|
||||
~.vs-radio{
|
||||
transform: rotate(0deg);
|
||||
outline: 0;
|
||||
.vs-radio--circle{
|
||||
background: rgba($primary,1);
|
||||
box-shadow: 0 3px 12px 0 rgba($primary,.4);
|
||||
opacity: 1;
|
||||
transform: scale(1);
|
||||
}
|
||||
.vs-radio--border{
|
||||
opacity: 0;
|
||||
transform: scale(0.3);
|
||||
}
|
||||
}
|
||||
}
|
||||
&:disabled{
|
||||
cursor: default;
|
||||
pointer-events: none;
|
||||
+.vs-radio {
|
||||
cursor: default;
|
||||
opacity: .5;
|
||||
}
|
||||
}
|
||||
&:active{
|
||||
~.vs-radio{
|
||||
transform: scale(1.1);
|
||||
}
|
||||
|
||||
}
|
||||
}
|
||||
.vs-radio{
|
||||
cursor: pointer;
|
||||
position: relative;
|
||||
width: $vs-radio-box;
|
||||
height: $vs-radio-box;
|
||||
transition: all .2s ease;
|
||||
margin-right: .5rem;
|
||||
&.vs-radio-sm{
|
||||
width: $vs-radio-box-sm;
|
||||
height: $vs-radio-box-sm;
|
||||
}
|
||||
&.vs-radio-lg{
|
||||
width: $vs-radio-box-lg;
|
||||
height: $vs-radio-box-lg;
|
||||
}
|
||||
.vs-radio--border, .vs-radio--circle {
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
position: absolute;
|
||||
left: 0;
|
||||
transition: all .25s ease;
|
||||
top: 0;
|
||||
border-radius: 50%;
|
||||
}
|
||||
.vs-radio--border{
|
||||
background: transparent;
|
||||
border: $vs-checkbox-radio-border-width solid $vs-checkbox-radio-border-color;
|
||||
}
|
||||
.vs-radio--circle{
|
||||
opacity: 0;
|
||||
transform: scale(0.1);
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
/* Switches */
|
||||
|
||||
.custom-switch{
|
||||
padding-left: 0;
|
||||
|
||||
.custom-control-label{
|
||||
height: 1.571rem;
|
||||
width: 3.1rem;
|
||||
padding: 0;
|
||||
|
||||
/* For bg color of switch*/
|
||||
&::before{
|
||||
border: none;
|
||||
background-color: $switch-bg-color;
|
||||
height: 1.571rem;
|
||||
left: -.2857rem;
|
||||
box-shadow: none !important;
|
||||
transition: all .25s ease;
|
||||
cursor: pointer;
|
||||
user-select: none;
|
||||
top: 0;
|
||||
left: 0;
|
||||
}
|
||||
/*For Switch handle*/
|
||||
&:after{
|
||||
position: absolute;
|
||||
top: 2px;
|
||||
left: 2px;
|
||||
box-shadow: none;
|
||||
background-color: $switch-indicator-color;
|
||||
transition:all .25s ease;
|
||||
cursor: pointer;
|
||||
user-select: none;
|
||||
}
|
||||
|
||||
/*For Switch text*/
|
||||
.switch-text-left,.switch-text-right,
|
||||
.switch-icon-left,.switch-icon-right{
|
||||
position: absolute;
|
||||
top: 5px;
|
||||
font-size: .7rem;
|
||||
cursor: pointer;
|
||||
user-select: none;
|
||||
}
|
||||
.switch-text-left,.switch-icon-left{
|
||||
left: 7px;
|
||||
color: $white
|
||||
}
|
||||
.switch-text-right,.switch-icon-right{
|
||||
right: 7px
|
||||
}
|
||||
&:focus{
|
||||
outline: 0;
|
||||
}
|
||||
}
|
||||
|
||||
/*For Switch label*/
|
||||
|
||||
.switch-label{
|
||||
padding-left: 1rem;
|
||||
}
|
||||
|
||||
// after its checked
|
||||
|
||||
.custom-control-input:checked ~ .custom-control-label::before{
|
||||
box-shadow: none;
|
||||
}
|
||||
|
||||
/*For Switch Handle Animation*/
|
||||
.custom-control-input:checked ~ .custom-control-label::after{
|
||||
transform: translateX(1.4rem);
|
||||
}
|
||||
.custom-control-input:not(:checked) ~ .custom-control-label{
|
||||
.switch-text-left{
|
||||
opacity: 0;
|
||||
}
|
||||
.switch-text-right{
|
||||
opacity: 1;
|
||||
}
|
||||
}
|
||||
.custom-control-input:checked ~ .custom-control-label{
|
||||
.switch-text-right{
|
||||
opacity: 0;
|
||||
}
|
||||
.switch-text-left{
|
||||
opacity: 1;
|
||||
}
|
||||
}
|
||||
.custom-control-input:not(:disabled):active ~ .custom-control-label::before{
|
||||
background-color: $switch-bg-color;
|
||||
}
|
||||
// For Switch Sizes
|
||||
|
||||
// switch md
|
||||
&.switch-md{
|
||||
.custom-control-label{
|
||||
width: $switch-md-size;
|
||||
height: 1.571rem;
|
||||
&::before{
|
||||
width: $switch-md-size;
|
||||
border: none;
|
||||
background-color: $switch-bg-color;
|
||||
height: 1.571rem;
|
||||
left: -.2857rem;
|
||||
box-shadow: none !important;
|
||||
transition: all .25s ease;
|
||||
cursor: pointer;
|
||||
user-select: none;
|
||||
}
|
||||
&:after{
|
||||
box-shadow: none;
|
||||
background-color: $switch-indicator-color;
|
||||
transition:all .25s ease;
|
||||
cursor: pointer;
|
||||
user-select: none;
|
||||
position: absolute;
|
||||
top: 2px;
|
||||
left:-2px;
|
||||
}
|
||||
.switch-text-right,.switch-icon-right{
|
||||
right: 9px;
|
||||
|
||||
}
|
||||
.switch-text-left,.switch-icon-left{
|
||||
left: 5px;
|
||||
|
||||
}
|
||||
}
|
||||
.custom-control-input:checked ~ .custom-control-label::after{
|
||||
transform: translateX(2.3rem);
|
||||
}
|
||||
}
|
||||
|
||||
// switch lg
|
||||
&.switch-lg{
|
||||
.custom-control-label{
|
||||
width: $switch-lg-size;
|
||||
height: 1.571rem;
|
||||
&::before{
|
||||
width: $switch-lg-size;
|
||||
border: none;
|
||||
background-color: $switch-bg-color;
|
||||
height: 1.571rem;
|
||||
left: -.2857rem;
|
||||
box-shadow: none !important;
|
||||
transition: all .25s ease;
|
||||
cursor: pointer;
|
||||
user-select: none;
|
||||
}
|
||||
&:after{
|
||||
position: absolute;
|
||||
top: 2px;
|
||||
left: -2px;
|
||||
box-shadow: none;
|
||||
background-color: $switch-indicator-color;
|
||||
transition:all .25s ease;
|
||||
cursor: pointer;
|
||||
user-select: none;
|
||||
}
|
||||
.switch-text-right,.switch-icon-right{
|
||||
right: 10px;
|
||||
|
||||
}
|
||||
}
|
||||
.custom-control-input:checked ~ .custom-control-label::after{
|
||||
transform: translateX(3.8rem);
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
/* Textarea with Counter */
|
||||
|
||||
.counter-value{
|
||||
background-color: $primary;
|
||||
color: $white;
|
||||
padding: 1px 6px;
|
||||
font-size: .6rem;
|
||||
border-radius: 0 0 5px 5px;
|
||||
margin-right: 1rem;
|
||||
}
|
||||
|
||||
|
||||
/* Input box with icon divider */
|
||||
|
||||
.form-group{
|
||||
&.input-divider-left{
|
||||
.form-control-position{
|
||||
i{
|
||||
padding: 0.2rem 0.5rem;
|
||||
border-right: 1px solid darken($body-bg, 12%);
|
||||
}
|
||||
}
|
||||
}
|
||||
&.input-divider-right{
|
||||
.form-control-position{
|
||||
i{
|
||||
padding: 0.2rem 0.5rem;
|
||||
border-left: 1px solid darken($body-bg, 12%);
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
/* input-groups-lg and input-groups-sm */
|
||||
|
||||
.input-group-lg, .input-group-sm{
|
||||
.form-control{
|
||||
padding: 0.7rem;
|
||||
}
|
||||
}
|
||||
|
||||
/* Bootstrap touchspin */
|
||||
|
||||
.bootstrap-touchspin{
|
||||
&.input-group{
|
||||
width: 8.4rem;
|
||||
align-items: center;
|
||||
.form-control{
|
||||
padding: 5px;
|
||||
height: auto;
|
||||
border: 0;
|
||||
background-color: $body-bg;
|
||||
border-radius: 5px !important;
|
||||
text-align: center;
|
||||
font-weight: 500;
|
||||
&:focus{
|
||||
z-index: 1;
|
||||
box-shadow: none;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.bootstrap-touchspin-injected{
|
||||
margin: 0 !important;
|
||||
.bootstrap-touchspin-down, .bootstrap-touchspin-up{
|
||||
padding: 0;
|
||||
min-width: 22px;
|
||||
min-height: 22px;
|
||||
border-radius: 5px !important;
|
||||
position: relative;
|
||||
i{
|
||||
font-size: 0.8rem;
|
||||
position: relative;
|
||||
top: -1px;
|
||||
}
|
||||
}
|
||||
.bootstrap-touchspin-down{
|
||||
left: 12px;
|
||||
}
|
||||
.bootstrap-touchspin-up{
|
||||
right: 12px;
|
||||
}
|
||||
}
|
||||
|
||||
// Disabled Touchspin
|
||||
&.disabled-touchspin{
|
||||
.bootstrap-touchspin-down, .bootstrap-touchspin-up{
|
||||
background-color: rgba(0,0,0,.5) !important;
|
||||
cursor: default;
|
||||
opacity: .5;
|
||||
}
|
||||
}
|
||||
|
||||
// Touchspin Large
|
||||
&.input-group-lg{
|
||||
width: 9.375rem;
|
||||
.touchspin{
|
||||
&.form-control{
|
||||
height: auto !important;
|
||||
}
|
||||
}
|
||||
.bootstrap-touchspin-down, .bootstrap-touchspin-up{
|
||||
i{
|
||||
font-size: 1rem;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
// Touchspin Small
|
||||
&.input-group-sm{
|
||||
width: 6.25rem;
|
||||
.touchspin{
|
||||
&.form-control{
|
||||
height: auto !important;
|
||||
}
|
||||
}
|
||||
.bootstrap-touchspin-injected{
|
||||
.bootstrap-touchspin-down, .bootstrap-touchspin-up{
|
||||
min-width: 16px;
|
||||
min-height: 16px;
|
||||
padding-top: 2.2px;
|
||||
i{
|
||||
font-size: 0.6rem;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.btn.disabled-max-min{
|
||||
background-color: rgba(0,0,0,.5) !important;
|
||||
cursor: default;
|
||||
}
|
||||
|
||||
|
||||
/* Number Type Input Box Scss for - Remove arrow on hover */
|
||||
input[type=number]::-webkit-inner-spin-button,
|
||||
input[type=number]::-webkit-outer-spin-button{
|
||||
-webkit-appearance: none;
|
||||
}
|
||||
|
||||
/* Number Type Input Box Scss for Touchspin - Remove arrow for firefox */
|
||||
.bootstrap-touchspin{
|
||||
&.input-group{
|
||||
input[type=number] {-moz-appearance: textfield;}
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
// IE Specific CSS
|
||||
@media screen and (-ms-high-contrast: active), (-ms-high-contrast: none) {
|
||||
|
||||
// floating Label Group
|
||||
.form-label-group{
|
||||
label {
|
||||
display: none;
|
||||
}
|
||||
}
|
||||
|
||||
// Bootstrap Select
|
||||
select.form-control {
|
||||
&:not([multiple="multiple"]){
|
||||
background: none;
|
||||
}
|
||||
}
|
||||
// Custom-File-Input
|
||||
.custom-file-label{
|
||||
&::after{
|
||||
padding: 1.34rem 0.7rem 1.25rem;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
// Date & Time Picker - Form Control Bg color
|
||||
.picker__input{
|
||||
&.form-control {
|
||||
background-color: $white;
|
||||
}
|
||||
}
|
||||
|
||||
// input Groups specific SCSS
|
||||
.input-group {
|
||||
.form-control{
|
||||
height: auto;
|
||||
}
|
||||
.input-group-prepend, .input-group-append {
|
||||
// dropdown arrow position
|
||||
.dropdown-toggle{
|
||||
&::after{
|
||||
left: 0;
|
||||
}
|
||||
}
|
||||
// checkbox and radio margin
|
||||
.vs-checkbox-con, .vs-checkbox, .vs-radio-con, .vs-radio{
|
||||
margin: 0;
|
||||
}
|
||||
}
|
||||
&.input-group-lg{
|
||||
.form-control{
|
||||
&::placeholder{
|
||||
font-size: 1.25rem;
|
||||
}
|
||||
}
|
||||
.input-group-prepend, .input-group-append{
|
||||
.btn{
|
||||
line-height: 1.3;
|
||||
font-size: 1.3rem;
|
||||
}
|
||||
}
|
||||
|
||||
}
|
||||
&.input-group-sm{
|
||||
.form-control{
|
||||
&::placeholder{
|
||||
font-size: 0.7rem;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
86
public/vendor/dashboard/src/scss/bootstrap-extended/_grid.scss
vendored
Executable file
86
public/vendor/dashboard/src/scss/bootstrap-extended/_grid.scss
vendored
Executable file
@@ -0,0 +1,86 @@
|
||||
// .bs-example{
|
||||
// [class^="col-"]{
|
||||
// span{
|
||||
// padding: .75rem;
|
||||
// background-color: rgba(86, 61, 124, 0.15);
|
||||
// border: 1px solid rgba(86, 61, 124, 0.2);
|
||||
// display: block;
|
||||
// }
|
||||
// margin-bottom: 1rem;
|
||||
// }
|
||||
// .row + .row {
|
||||
// margin-top: 1rem;
|
||||
// }
|
||||
// }
|
||||
|
||||
|
||||
//
|
||||
// Grid examples
|
||||
//
|
||||
|
||||
.bd-example-row {
|
||||
.row + .row {
|
||||
margin-top: 1rem;
|
||||
}
|
||||
|
||||
.row {
|
||||
> .col,
|
||||
> [class^="col-"] {
|
||||
padding-top: .75rem;
|
||||
padding-bottom: .75rem;
|
||||
background-color: rgba(86,61,124,.15);
|
||||
border: 1px solid rgba(86,61,124,.2);
|
||||
}
|
||||
}
|
||||
|
||||
.flex-items-top,
|
||||
.flex-items-middle,
|
||||
.flex-items-bottom {
|
||||
min-height: 6rem;
|
||||
background-color: rgba(255,0,0,.1);
|
||||
}
|
||||
}
|
||||
|
||||
.bd-example-row-flex-cols .row {
|
||||
min-height: 10rem;
|
||||
background-color: rgba(255,0,0,.1);
|
||||
}
|
||||
|
||||
.bd-highlight {
|
||||
background-color: rgba(86, 61, 124, .15);
|
||||
border: 1px solid rgba(86, 61, 124, .15);
|
||||
}
|
||||
|
||||
// Grid mixins
|
||||
.example-container {
|
||||
width: 800px;
|
||||
@include make-container();
|
||||
}
|
||||
|
||||
.example-row {
|
||||
@include make-row();
|
||||
}
|
||||
|
||||
.example-content-main {
|
||||
@include make-col-ready();
|
||||
|
||||
@include media-breakpoint-up(sm) {
|
||||
@include make-col(6);
|
||||
}
|
||||
|
||||
@include media-breakpoint-up(lg) {
|
||||
@include make-col(8);
|
||||
}
|
||||
}
|
||||
|
||||
.example-content-secondary {
|
||||
@include make-col-ready();
|
||||
|
||||
@include media-breakpoint-up(sm) {
|
||||
@include make-col(6);
|
||||
}
|
||||
|
||||
@include media-breakpoint-up(lg) {
|
||||
@include make-col(4);
|
||||
}
|
||||
}
|
||||
88
public/vendor/dashboard/src/scss/bootstrap-extended/_list-group.scss
vendored
Executable file
88
public/vendor/dashboard/src/scss/bootstrap-extended/_list-group.scss
vendored
Executable file
@@ -0,0 +1,88 @@
|
||||
/* ===============================================================================================
|
||||
File Name: list-group.scss
|
||||
Description: Contain list item, list group related extended SCSS.
|
||||
----------------------------------------------------------------------------------------------
|
||||
Item Name: Vuesax HTML Admin Template
|
||||
Version: 1.1
|
||||
Author: PIXINVENT
|
||||
Author URL: http://www.themeforest.net/user/pixinvent
|
||||
================================================================================================*/
|
||||
|
||||
// Inline list style with pipeline seperator
|
||||
|
||||
ul.list-inline {
|
||||
li {
|
||||
display: inline-block;
|
||||
}
|
||||
&.list-inline-pipe {
|
||||
>li+li:before {
|
||||
content: ' | ';
|
||||
padding-right: 2px;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
// bootstrap list group
|
||||
.list-group {
|
||||
.list-group-item {
|
||||
line-height: 1.5;
|
||||
&.active {
|
||||
&:hover {
|
||||
background-color: $primary;
|
||||
}
|
||||
&:focus{
|
||||
color: $body-color;
|
||||
outline: 0;
|
||||
&:hover{
|
||||
color: $white;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
&:hover {
|
||||
background-color: $body-bg;
|
||||
}
|
||||
|
||||
i {
|
||||
font-size: 1.2rem;
|
||||
font-weight: 100;
|
||||
position: relative;
|
||||
top: 2px;
|
||||
}
|
||||
|
||||
&:not(.active):focus:active{
|
||||
color: inherit;
|
||||
}
|
||||
}
|
||||
.list-group-item-action{
|
||||
&:active{
|
||||
background-color: $primary;
|
||||
color: $white;
|
||||
}
|
||||
&:focus{
|
||||
background-color: $body-bg;
|
||||
outline: 0;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
// for drag and drop border radius on selected
|
||||
.list-group-item.gu-mirror{
|
||||
border-radius: 0;
|
||||
}
|
||||
|
||||
// Inline users list
|
||||
.users-list{
|
||||
li+li {
|
||||
margin-left: -.785rem;
|
||||
}
|
||||
li{
|
||||
img{
|
||||
border: 2px solid $white;
|
||||
box-shadow: 0px 2px 10px 0px rgba($gray-600, 0.3)
|
||||
}
|
||||
.badge{
|
||||
color: $black;
|
||||
}
|
||||
}
|
||||
}
|
||||
25
public/vendor/dashboard/src/scss/bootstrap-extended/_media.scss
vendored
Executable file
25
public/vendor/dashboard/src/scss/bootstrap-extended/_media.scss
vendored
Executable file
@@ -0,0 +1,25 @@
|
||||
.media-list{
|
||||
.media{
|
||||
padding: 1.25rem;
|
||||
width: 100%;
|
||||
margin-top: 0;
|
||||
.media-left{
|
||||
padding-right: 1rem
|
||||
}
|
||||
.media-right{
|
||||
padding-left: 1rem;
|
||||
}
|
||||
}
|
||||
a.media{
|
||||
color: $gray-600 !important;
|
||||
}
|
||||
}
|
||||
|
||||
.media-bordered{
|
||||
.media{
|
||||
border-top: 1px solid $custom-border-color;
|
||||
&:first-child{
|
||||
border-top: 0;
|
||||
}
|
||||
}
|
||||
}
|
||||
21
public/vendor/dashboard/src/scss/bootstrap-extended/_mixins.scss
vendored
Executable file
21
public/vendor/dashboard/src/scss/bootstrap-extended/_mixins.scss
vendored
Executable file
@@ -0,0 +1,21 @@
|
||||
// ===============================================================================================
|
||||
// File Name: mixins.scss
|
||||
// Description: Extended mixins file with new mixins features.
|
||||
// ----------------------------------------------------------------------------------------------
|
||||
// Item Name: Vuesax HTML Admin Template
|
||||
// Version: 1.1
|
||||
// Author: PIXINVENT
|
||||
// Author URL: http://www.themeforest.net/user/pixinvent
|
||||
// ================================================================================================
|
||||
|
||||
// // Components
|
||||
@import "mixins/_buttons";
|
||||
@import "mixins/_label";
|
||||
|
||||
@import "mixins/_label";
|
||||
@import "mixins/_type"; //(NEW)
|
||||
|
||||
// // // Components
|
||||
@import "mixins/_buttons";
|
||||
@import "mixins/_navs";
|
||||
@import "mixins/_forms";
|
||||
142
public/vendor/dashboard/src/scss/bootstrap-extended/_modal.scss
vendored
Executable file
142
public/vendor/dashboard/src/scss/bootstrap-extended/_modal.scss
vendored
Executable file
@@ -0,0 +1,142 @@
|
||||
// Modals
|
||||
|
||||
.modal {
|
||||
|
||||
// Modal Header
|
||||
|
||||
.modal-header {
|
||||
background-color: $body-bg;
|
||||
border-radius: .42rem;
|
||||
padding: .8rem;
|
||||
border-bottom: none;
|
||||
|
||||
// close button
|
||||
|
||||
.close {
|
||||
padding: .2rem .62rem;
|
||||
box-shadow: 0 5px 20px 0 rgba($pure-black, .1);
|
||||
border-radius: .357rem;
|
||||
background: $white;
|
||||
opacity: 1;
|
||||
transition: all .23s ease .1s;
|
||||
position: relative;
|
||||
transform: translate(8px, -2px);
|
||||
span{
|
||||
font-weight: 400;
|
||||
font-size: 2rem;
|
||||
color: $primary;
|
||||
}
|
||||
// For hover effect of close btn
|
||||
|
||||
&:hover,
|
||||
&:focus,&:active {
|
||||
opacity: 1;
|
||||
outline: none;
|
||||
transform: translate(5px, 3px);
|
||||
box-shadow: none;
|
||||
}
|
||||
}
|
||||
|
||||
&[class*="bg-"]{
|
||||
color: $white;
|
||||
border-bottom-left-radius: 5px;
|
||||
border-bottom-right-radius: 5px;
|
||||
|
||||
.modal-title {
|
||||
color: $white;
|
||||
}
|
||||
}
|
||||
|
||||
// Themed Modals
|
||||
&.bg-primary {
|
||||
.close {
|
||||
span {
|
||||
color: $primary;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
&.bg-success {
|
||||
.close {
|
||||
span {
|
||||
color: $success;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
&.bg-info {
|
||||
.close {
|
||||
span {
|
||||
color: $info;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
&.bg-danger {
|
||||
.close {
|
||||
span {
|
||||
color: $danger;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
&.bg-warning {
|
||||
.close {
|
||||
span {
|
||||
color: $warning;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
&.bg-dark {
|
||||
.close {
|
||||
span {
|
||||
color: $dark;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
// Modal Content
|
||||
.modal-content {
|
||||
border: none;
|
||||
// overflow: unset; updated to "visible" as close icon is not visible in IE
|
||||
overflow: visible;
|
||||
box-shadow: 0 5px 20px 0 rgba($pure-black, .1);
|
||||
}
|
||||
|
||||
// Modal Footer
|
||||
.modal-footer {
|
||||
border-color: rgba($pure-black, .05);
|
||||
}
|
||||
}
|
||||
|
||||
// Modal SM
|
||||
.modal-sm {
|
||||
max-width: 400px;
|
||||
}
|
||||
|
||||
// Modal XS
|
||||
.modal-xs {
|
||||
max-width: 300px;
|
||||
}
|
||||
|
||||
// Modal XL
|
||||
.modal-xl {
|
||||
max-width: 94%;
|
||||
margin-left: 3%;
|
||||
margin-right: 3%;
|
||||
}
|
||||
|
||||
// To remove Max-width of XS Modal in Small Screen
|
||||
|
||||
@media(max-width:576px) {
|
||||
.modal {
|
||||
padding-right: 1rem;
|
||||
padding-left: 1rem;
|
||||
.modal-xs,
|
||||
.modal-sm {
|
||||
max-width: unset;
|
||||
}
|
||||
}
|
||||
}
|
||||
265
public/vendor/dashboard/src/scss/bootstrap-extended/_nav.scss
vendored
Executable file
265
public/vendor/dashboard/src/scss/bootstrap-extended/_nav.scss
vendored
Executable file
@@ -0,0 +1,265 @@
|
||||
// Component nav and nav/pill tabs
|
||||
|
||||
.nav {
|
||||
border-radius: 0.25rem;
|
||||
// for component navs
|
||||
// to wrap border around nav component
|
||||
&.wrap-border {
|
||||
border: 1px solid $nav-component-border-color;
|
||||
li.nav-header {
|
||||
margin: 0 0.5rem;
|
||||
}
|
||||
li.nav-item,
|
||||
div {
|
||||
padding: 2px .714rem;
|
||||
}
|
||||
}
|
||||
|
||||
// Square Border
|
||||
&.square-border {
|
||||
border-radius: 0;
|
||||
.nav-item {
|
||||
.nav-link.active {
|
||||
border-radius: 0;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
// for main menu toggle lock
|
||||
.modern-nav-toggle {
|
||||
padding: 1.571rem 0;
|
||||
}
|
||||
|
||||
// nav pills
|
||||
&.nav-pills {
|
||||
margin-bottom: 1rem;
|
||||
// nav item of nav pill
|
||||
.nav-item {
|
||||
.nav-link {
|
||||
border-radius: .357rem;
|
||||
padding: .2rem 1rem;
|
||||
padding-top: .3rem;
|
||||
font-size: 0.98rem;
|
||||
margin-right: 0.5rem;
|
||||
color: $pure-black;
|
||||
&.active {
|
||||
color: $white;
|
||||
}
|
||||
&.disabled {
|
||||
color: $secondary;
|
||||
}
|
||||
&.dropdown-toggle::after {
|
||||
top: 1px;
|
||||
left: 1px;
|
||||
}
|
||||
}
|
||||
|
||||
&.dropdown {
|
||||
&.show{
|
||||
.nav-link {
|
||||
color: $white;
|
||||
}
|
||||
.dropdown-item{
|
||||
&.active{
|
||||
&:hover{
|
||||
color: $primary;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
// Justified Pills
|
||||
&.nav-justified {
|
||||
@include nav-justified;
|
||||
@include nav-tabs-justified;
|
||||
.nav-link {
|
||||
display: block;
|
||||
|
||||
&.active {
|
||||
border: none;
|
||||
|
||||
&:hover,
|
||||
&:focus {
|
||||
border: none;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
// Nav Active Bordered Pill
|
||||
&.nav-active-bordered-pill {
|
||||
.nav-item {
|
||||
a {
|
||||
&.nav-link {
|
||||
|
||||
&.active {
|
||||
border: 1px solid $primary;
|
||||
border-radius: 0.25rem;
|
||||
color: $primary;
|
||||
background-color: $white;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
// Basic Nav Tabs
|
||||
&.nav-tabs {
|
||||
box-shadow: -1px 11px 17px -10px rgba($pure-black, .04);
|
||||
border: none;
|
||||
margin-bottom: 1rem;
|
||||
position: relative;
|
||||
border-radius: 0;
|
||||
// Basic nav item
|
||||
.nav-item {
|
||||
position: relative;
|
||||
.nav-link {
|
||||
color: $pure-black;
|
||||
font-size: 0.95rem;
|
||||
border: none;
|
||||
min-width: auto;
|
||||
font-weight: 450;
|
||||
padding: .61rem .635rem;
|
||||
border-radius: 0;
|
||||
&.active {
|
||||
border: none;
|
||||
position: relative;
|
||||
color: $primary;
|
||||
transition: all .2s ease;
|
||||
background-color: $white;
|
||||
transform: translateY(-2px);
|
||||
&:after{
|
||||
content: attr(data-before);
|
||||
height: 2px;
|
||||
width: 100%;
|
||||
left: 0;
|
||||
position: absolute;
|
||||
bottom: 0;
|
||||
top: 100%;
|
||||
background: linear-gradient(30deg, rgba($primary, 1), rgba($primary, .5)) !important;
|
||||
box-shadow: 0 0 8px 0 rgba($primary, .5) !important;
|
||||
transform: translateY(0px);
|
||||
transition: all .2s linear;
|
||||
}
|
||||
}
|
||||
|
||||
&.dropdown-toggle {
|
||||
&::after {
|
||||
top: 1px;
|
||||
left: 1px;
|
||||
}
|
||||
}
|
||||
|
||||
&.disabled {
|
||||
color: $secondary;
|
||||
}
|
||||
}
|
||||
}
|
||||
// Justified Tabs
|
||||
&.nav-justified {
|
||||
@include nav-justified;
|
||||
@include nav-tabs-justified;
|
||||
|
||||
.nav-item {
|
||||
a.nav-link {
|
||||
display: block;
|
||||
border-radius: 0;
|
||||
|
||||
&.active {
|
||||
border: none;
|
||||
background-color: $white;
|
||||
}
|
||||
&:hover {
|
||||
border-color: transparent;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
// Nav Tabs Vertical
|
||||
.nav-vertical {
|
||||
overflow: hidden;
|
||||
.nav.nav-tabs {
|
||||
// nav item styles for vertical nav tabs
|
||||
.nav-item {
|
||||
.nav-link {
|
||||
border: none;
|
||||
margin-bottom: 0;
|
||||
|
||||
&.active {
|
||||
border: none;
|
||||
border-radius: 0;
|
||||
|
||||
&:after {
|
||||
transform: rotate(90deg);
|
||||
left: -1rem;
|
||||
bottom: 100%;
|
||||
top: 1rem;
|
||||
width: 2.14rem;
|
||||
}
|
||||
}
|
||||
|
||||
&:hover {
|
||||
border-right: none;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
// vertical nav left tabs
|
||||
&.nav-left {
|
||||
float: left;
|
||||
display: table;
|
||||
margin-right: 1rem;
|
||||
|
||||
~.tab-content {
|
||||
.tab-pane {
|
||||
display: none;
|
||||
background-color: $white;
|
||||
overflow-y: auto;
|
||||
padding-left: 1rem;
|
||||
&.active {
|
||||
display: block;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
}
|
||||
|
||||
// vertical right nav tabs
|
||||
&.nav-right {
|
||||
float: right;
|
||||
display: table;
|
||||
margin-left: 1rem;
|
||||
|
||||
.nav-item {
|
||||
.nav-link {
|
||||
|
||||
&.active {
|
||||
|
||||
&:after {
|
||||
left: 2.4rem;
|
||||
}
|
||||
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
~.tab-content {
|
||||
.tab-pane {
|
||||
display: none;
|
||||
background-color: $white;
|
||||
overflow-y: auto;
|
||||
padding-right: 1rem;
|
||||
&.active {
|
||||
display: block;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
972
public/vendor/dashboard/src/scss/bootstrap-extended/_navbar.scss
vendored
Executable file
972
public/vendor/dashboard/src/scss/bootstrap-extended/_navbar.scss
vendored
Executable file
@@ -0,0 +1,972 @@
|
||||
/* ===============================================================================================
|
||||
File Name: navbar.scss
|
||||
Description: Contain header navigation bar, vertical main navigation bar and
|
||||
horiznotal main navigation bar related SCSS.
|
||||
----------------------------------------------------------------------------------------------
|
||||
Item Name: Vuesax HTML Admin Template
|
||||
Version: 1.1
|
||||
Author: PIXINVENT
|
||||
Author URL: http://www.themeforest.net/user/pixinvent
|
||||
================================================================================================*/
|
||||
|
||||
%extend_hamburger_color {
|
||||
|
||||
.hamburger-inner,
|
||||
.hamburger-inner::before,
|
||||
.hamburger-inner::after {
|
||||
background-color: $white;
|
||||
}
|
||||
}
|
||||
|
||||
@function set-navbar-text-color($color) {
|
||||
@if (lightness($color) > 50) {
|
||||
@return $white; // Lighter backgorund, return dark color
|
||||
} @else {
|
||||
@return $black; // Darker background, return light color
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
@mixin fullNav {
|
||||
.navbar-header {
|
||||
width: 100% !important;
|
||||
padding: 0.5rem 1rem;
|
||||
position: relative;
|
||||
|
||||
.menu-toggle {
|
||||
top: 2px;
|
||||
position: relative;
|
||||
}
|
||||
|
||||
.open-navbar-container i {
|
||||
font-size: 1.8rem;
|
||||
}
|
||||
|
||||
.navbar-brand {
|
||||
position: absolute;
|
||||
left: 50%;
|
||||
top: 0;
|
||||
transform: translate(-50%, 0);
|
||||
}
|
||||
}
|
||||
|
||||
&.navbar-with-menu {
|
||||
.navbar-container {
|
||||
width: 100%;
|
||||
display: table;
|
||||
margin: 0;
|
||||
height: auto;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
// Background overlay for scroll
|
||||
.header-navbar-shadow {
|
||||
display: none;
|
||||
}
|
||||
|
||||
// Fixed Navbar
|
||||
.navbar-floating {
|
||||
.header-navbar-shadow {
|
||||
display: block;
|
||||
background: linear-gradient(180deg, hsla(0, 0%, 97.3%, .95) 44%, hsla(0, 0%, 97.3%, .46) 73%, hsla(0, 0%, 100%, 0));
|
||||
padding-top: 2.2rem;
|
||||
background-repeat: repeat;
|
||||
width: 100%;
|
||||
height: 102px;
|
||||
position: fixed;
|
||||
top: 0;
|
||||
z-index: 11;
|
||||
}
|
||||
}
|
||||
|
||||
.header-navbar {
|
||||
padding: 0px;
|
||||
min-height: $navbar-height - .5;
|
||||
font-family: $font-family-monospace;
|
||||
transition: 300ms ease all;
|
||||
background: linear-gradient(180deg, hsla(0, 0%, 97.3%, .95) 44%, hsla(0, 0%, 97.3%, .46) 73%, hsla(0, 0%, 100%, 0));
|
||||
z-index: 1000;
|
||||
&.fixed-top {
|
||||
left: $menu-expanded-width;
|
||||
}
|
||||
|
||||
&[class*="bg-"]{
|
||||
.navbar-nav{
|
||||
.nav-item{
|
||||
a{
|
||||
color: set-navbar-text-color($theme-dark-text-color) !important;
|
||||
i,
|
||||
span{
|
||||
color: set-navbar-text-color($theme-dark-text-color) !important;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.search-input{
|
||||
.input,
|
||||
.search-list .auto-suggestion span{
|
||||
color: $body-color !important;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
&.floating-nav {
|
||||
margin: 1.3rem #{$content-padding} 0;
|
||||
border-radius: 0.5rem;
|
||||
position: fixed;
|
||||
width: calc(100% - calc(#{$content-padding} * 2) - #{$menu-expanded-width});
|
||||
z-index: 11;
|
||||
right: 0;
|
||||
}
|
||||
|
||||
&.navbar-static-top {
|
||||
background: transparent;
|
||||
box-shadow: none !important; // remove this if removing "menu-shadow" class
|
||||
}
|
||||
|
||||
.navbar-wrapper {
|
||||
width: 100%;
|
||||
}
|
||||
|
||||
// add border to navbar
|
||||
&.navbar-border {
|
||||
border-bottom: 1px solid $custom-border-color;
|
||||
}
|
||||
|
||||
&.navbar-dark.navbar-border {
|
||||
border-bottom: 1px solid #8596B5;
|
||||
}
|
||||
|
||||
// add shadow to navbar
|
||||
&.navbar-shadow {
|
||||
box-shadow: 0 4px 20px 0 rgba(0, 0, 0, .05);
|
||||
}
|
||||
|
||||
// hide top horizontal menu drop-down arrow
|
||||
.nav-link {
|
||||
&.dropdown-toggle::after {
|
||||
display: none;
|
||||
}
|
||||
}
|
||||
|
||||
.navbar-container ul.nav li.dropdown-language {
|
||||
padding-right: 0;
|
||||
|
||||
.selected-language {
|
||||
font-size: 0.97rem;
|
||||
letter-spacing: -0.25px;
|
||||
font-weight: 500;
|
||||
}
|
||||
}
|
||||
|
||||
.navbar-container {
|
||||
padding-left: $spacer;
|
||||
// height: $navbar-height;
|
||||
transition: 300ms ease all;
|
||||
background: inherit;
|
||||
margin-left: 0;
|
||||
.bookmark-wrapper{
|
||||
ul.nav {
|
||||
li {
|
||||
>a.nav-link {
|
||||
padding: 1.4rem 0.5rem 1.35rem;
|
||||
i{
|
||||
&:hover{
|
||||
color: $primary;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
// for bookmark z-index
|
||||
.bookmark-input{
|
||||
z-index: 1;
|
||||
}
|
||||
|
||||
ul.nav {
|
||||
li {
|
||||
&.dropdown .dropdown-menu {
|
||||
top: 48px;
|
||||
// top: 90%;
|
||||
}
|
||||
|
||||
.badge {
|
||||
padding: 0.42em 0.6em 0.25rem;
|
||||
|
||||
&.badge-up {
|
||||
position: absolute;
|
||||
top: 12px;
|
||||
right: -2px;
|
||||
}
|
||||
}
|
||||
|
||||
&.dropdown-language {
|
||||
>a.nav-link {
|
||||
padding: 1.75rem 0.5rem;
|
||||
}
|
||||
}
|
||||
|
||||
>a.nav-link {
|
||||
color: $body-color;
|
||||
padding: 1.6rem 0.5rem 1.35rem 1rem;
|
||||
|
||||
i.flag-icon {
|
||||
margin-right: 0.5rem;
|
||||
}
|
||||
}
|
||||
|
||||
&.dropdown-user {
|
||||
.dropdown-menu-right {
|
||||
right: 12px;
|
||||
left: auto;
|
||||
padding: 0.5rem;
|
||||
|
||||
.dropdown-item {
|
||||
padding: 10px;
|
||||
|
||||
&:hover,
|
||||
&:active {
|
||||
background: $primary;
|
||||
color: $white;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
a.dropdown-user-link {
|
||||
padding: 0.7rem 1rem;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
|
||||
.user-name {
|
||||
display: inline-block;
|
||||
margin-bottom: 0.435rem;
|
||||
margin-left: 0.2rem;
|
||||
}
|
||||
|
||||
.user-status {
|
||||
font-size: smaller;
|
||||
}
|
||||
img{
|
||||
box-shadow: 0 4px 8px 0 rgba(0,0,0,.12),0 2px 4px 0 rgba(0,0,0,.08);
|
||||
}
|
||||
}
|
||||
|
||||
a.menu-toggle {
|
||||
// padding: 1.1rem 0.8rem 1rem 1rem;
|
||||
padding: 1.34rem 0.22rem 1.35rem 0;
|
||||
|
||||
i {
|
||||
font-size: 1.75rem;
|
||||
}
|
||||
}
|
||||
|
||||
a.nav-link-label {
|
||||
padding: 1.6rem 0rem 1.35rem 0.8rem;
|
||||
}
|
||||
|
||||
a.dropdown-user-link {
|
||||
.user-nav {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
align-items: flex-end;
|
||||
float: left;
|
||||
margin-right: $spacer - 0.2;
|
||||
}
|
||||
}
|
||||
|
||||
a.nav-link-search,
|
||||
a.nav-link-expand {
|
||||
// padding: 1.4rem 1rem 1.3rem 1rem;
|
||||
}
|
||||
|
||||
div.input-group {
|
||||
padding: 0.7rem 1rem;
|
||||
}
|
||||
|
||||
i.ficon {
|
||||
font-size: 1.5rem;
|
||||
color: $body-color;
|
||||
&:hover{
|
||||
color: $primary;
|
||||
}
|
||||
}
|
||||
|
||||
.media-list {
|
||||
max-height: 18.2rem;
|
||||
}
|
||||
|
||||
.scrollable-container {
|
||||
position: relative;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
//Navbar notification css
|
||||
.dropdown-menu-media {
|
||||
width: 26rem;
|
||||
|
||||
.media-list {
|
||||
.media {
|
||||
padding: 1rem;
|
||||
border: none;
|
||||
border-bottom: 1px solid $gray-300;
|
||||
|
||||
&:hover {
|
||||
background: $body-bg;
|
||||
}
|
||||
|
||||
.media-meta {
|
||||
color: $body-color;
|
||||
}
|
||||
}
|
||||
a:last-of-type{
|
||||
.media{
|
||||
border-bottom: none;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.dropdown-menu-header {
|
||||
border-bottom: 1px solid $gray-300;
|
||||
}
|
||||
|
||||
.dropdown-menu-footer {
|
||||
a {
|
||||
padding: 0.3rem;
|
||||
border-top: 1px solid $gray-300;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
&.navbar-without-menu {
|
||||
.navbar-container {
|
||||
margin-left: 0;
|
||||
}
|
||||
}
|
||||
|
||||
&.navbar-with-menu {
|
||||
.navbar-container {}
|
||||
}
|
||||
|
||||
.nav-item+.nav-item {
|
||||
margin-left: 0rem;
|
||||
}
|
||||
|
||||
/* For sm screen*/
|
||||
@include media-breakpoint-down(sm) {
|
||||
@include fullNav;
|
||||
}
|
||||
|
||||
}
|
||||
|
||||
/* Modern menu For md screen*/
|
||||
@include media-breakpoint-down(md) {
|
||||
[data-menu="vertical-menu-modern"] {
|
||||
.header-navbar {
|
||||
@include fullNav;
|
||||
}
|
||||
|
||||
.navbar-dark,
|
||||
.navbar-semi-dark {
|
||||
.navbar-header .navbar-nav .nav-link {
|
||||
color: $white;
|
||||
}
|
||||
|
||||
.navbar-container .navbar-nav .nav-link {
|
||||
color: $gray-600;
|
||||
}
|
||||
}
|
||||
|
||||
.navbar-light {
|
||||
.navbar-header .navbar-nav .nav-link {
|
||||
color: $gray-600;
|
||||
}
|
||||
}
|
||||
|
||||
}
|
||||
}
|
||||
|
||||
// Navbar colors
|
||||
|
||||
.navbar-light {
|
||||
background: $white;
|
||||
|
||||
&.navbar-horizontal {
|
||||
background: $white;
|
||||
}
|
||||
|
||||
.navbar-nav {
|
||||
li {
|
||||
line-height: 1;
|
||||
}
|
||||
|
||||
.active {
|
||||
&.nav-link {
|
||||
background-color: rgba(0, 0, 0, 0.03);
|
||||
}
|
||||
}
|
||||
|
||||
.disabled {
|
||||
&.nav-link {
|
||||
color: $nav-link-disabled-color;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.navbar-dark {
|
||||
background: $gray-600;
|
||||
|
||||
.navbar-brand {
|
||||
color: $white !important;
|
||||
}
|
||||
|
||||
&.navbar-horizontal {
|
||||
background: $gray-600;
|
||||
}
|
||||
|
||||
@extend %extend_hamburger_color;
|
||||
|
||||
.nav-search {
|
||||
|
||||
.form-control,
|
||||
.btn-secondary {
|
||||
color: $white;
|
||||
background: $gray-600;
|
||||
}
|
||||
}
|
||||
|
||||
.navbar-nav {
|
||||
li {
|
||||
line-height: 1;
|
||||
}
|
||||
|
||||
.active {
|
||||
&.nav-link {
|
||||
background-color: rgba(255, 255, 255, 0.05);
|
||||
}
|
||||
}
|
||||
|
||||
.disabled {
|
||||
&.nav-link {
|
||||
color: $gray-300;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.navbar-semi-dark {
|
||||
.navbar-header {
|
||||
background: $gray-600;
|
||||
|
||||
.brand-text {
|
||||
color: $white;
|
||||
}
|
||||
}
|
||||
|
||||
background:$white;
|
||||
|
||||
.navbar-nav {
|
||||
li {
|
||||
line-height: 1;
|
||||
}
|
||||
|
||||
.nav-link {
|
||||
color: $gray-600;
|
||||
}
|
||||
|
||||
.active {
|
||||
&.nav-link {
|
||||
background-color: rgba(0, 0, 0, 0.03);
|
||||
}
|
||||
}
|
||||
|
||||
.disabled {
|
||||
&.nav-link {
|
||||
color: $nav-link-disabled-color;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.navbar-semi-light {
|
||||
.navbar-header {
|
||||
background: $white;
|
||||
|
||||
.brand-text {
|
||||
color: $gray-600;
|
||||
}
|
||||
}
|
||||
|
||||
background: $gray-600;
|
||||
|
||||
.navbar-nav {
|
||||
li {
|
||||
line-height: 1;
|
||||
}
|
||||
|
||||
.nav-link {
|
||||
color: $white;
|
||||
}
|
||||
|
||||
.active {
|
||||
&.nav-link {
|
||||
background-color: rgba(0, 0, 0, 0.03);
|
||||
}
|
||||
}
|
||||
|
||||
.disabled {
|
||||
&.nav-link {
|
||||
color: $nav-link-disabled-color;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
@-moz-document url-prefix() {
|
||||
ul {
|
||||
li {
|
||||
a {
|
||||
.children-in {
|
||||
position: relative;
|
||||
right: 3px;
|
||||
top: -14px;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
.navbar-menu-icon {
|
||||
span {
|
||||
display: block;
|
||||
position: absolute;
|
||||
height: 2px;
|
||||
width: 100%;
|
||||
background: $gray-600;
|
||||
border-radius: 9px;
|
||||
opacity: 1;
|
||||
left: 0;
|
||||
transform: rotate(0deg);
|
||||
transition: .25s ease-in-out;
|
||||
}
|
||||
}
|
||||
|
||||
.navbar-menu-icon span:nth-child(1) {
|
||||
top: 0px;
|
||||
}
|
||||
|
||||
.navbar-menu-icon span:nth-child(2) {
|
||||
top: 10px;
|
||||
}
|
||||
|
||||
.navbar-menu-icon span:nth-child(3) {
|
||||
top: 20px;
|
||||
}
|
||||
|
||||
.navbar-menu-icon.show span:nth-child(1) {
|
||||
top: 10px;
|
||||
transform: rotate(135deg);
|
||||
}
|
||||
|
||||
.navbar-menu-icon.show span:nth-child(2) {
|
||||
opacity: 0;
|
||||
left: -60px;
|
||||
}
|
||||
|
||||
.navbar-menu-icon.show span:nth-child(3) {
|
||||
top: 10px;
|
||||
transform: rotate(-135deg);
|
||||
}
|
||||
|
||||
// Media queries for device support
|
||||
// =========================================
|
||||
@include media-breakpoint-down(sm) {
|
||||
.header-navbar {
|
||||
|
||||
// generic navbar dropdown specific
|
||||
.navbar-nav {
|
||||
.show {
|
||||
position: static;
|
||||
}
|
||||
|
||||
.open-navbar-container {
|
||||
padding-top: 0.625rem;
|
||||
}
|
||||
}
|
||||
|
||||
.navbar-container {
|
||||
.show {
|
||||
.dropdown-menu {
|
||||
right: 0;
|
||||
left: 0 !important;
|
||||
float: none;
|
||||
width: auto;
|
||||
margin-top: 0;
|
||||
max-height: 400px;
|
||||
overflow-x: hidden;
|
||||
}
|
||||
}
|
||||
|
||||
ul.nav {
|
||||
li {
|
||||
&.nav-item i {
|
||||
margin-right: 0.2rem;
|
||||
}
|
||||
|
||||
a.dropdown-user-link {
|
||||
padding: 0.8rem 0.6rem;
|
||||
}
|
||||
|
||||
.dropdown-toggle::after {
|
||||
margin-right: 0;
|
||||
margin-left: -2px;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
// dark navbar
|
||||
.navbar-dark,
|
||||
.navbar-semi-dark {
|
||||
|
||||
.hamburger-inner,
|
||||
.hamburger-inner::before,
|
||||
.hamburger-inner::after {
|
||||
background-color: $white;
|
||||
}
|
||||
|
||||
.navbar-header {
|
||||
.navbar-nav {
|
||||
.nav-link {
|
||||
color: $white;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.navbar-container {
|
||||
.navbar-nav {
|
||||
.nav-link {
|
||||
color: $gray-600;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
// light navbar
|
||||
.navbar-light,
|
||||
.navbar-semi-light {
|
||||
.navbar-header {
|
||||
.navbar-nav {
|
||||
.nav-link {
|
||||
color: $gray-600;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.navbar-container {
|
||||
.navbar-nav {
|
||||
.nav-link {
|
||||
color: $gray-600;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.headroom {
|
||||
will-change: transform;
|
||||
transition: transform 200ms linear;
|
||||
}
|
||||
|
||||
.headroom--pinned-top {
|
||||
transform: translateY(0%);
|
||||
}
|
||||
|
||||
.headroom--unpinned-top {
|
||||
transform: translateY(-100%);
|
||||
}
|
||||
|
||||
.headroom--pinned-bottom {
|
||||
transform: translateY(0%);
|
||||
}
|
||||
|
||||
.headroom--unpinned-bottom {
|
||||
transform: translateY(100%);
|
||||
}
|
||||
|
||||
@include media-breakpoint-down(xs) {
|
||||
.header-navbar {
|
||||
.navbar-container ul.nav li .selected-language {
|
||||
display: none;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
// header navbar when floating nav
|
||||
body{
|
||||
&[data-col="1-column"]{
|
||||
.header-navbar {
|
||||
&.floating-nav {
|
||||
width: calc(100% - calc(#{$content-padding} * 2));
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
// header navbar when floating nav
|
||||
@media (min-width: 1200px) and (-ms-high-contrast: active),
|
||||
(-ms-high-contrast: none) {
|
||||
body{
|
||||
&:not([data-col="1-columns"]){
|
||||
.header-navbar {
|
||||
&.floating-nav {
|
||||
width: calc(100% - 60px - #{$menu-expanded-width});
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
// For Medium and down: iPad support for navbr
|
||||
|
||||
@include media-breakpoint-down(lg) {
|
||||
.header-navbar {
|
||||
.navbar-container {
|
||||
ul.nav {
|
||||
li {
|
||||
&.dropdown-language {
|
||||
>a.nav-link {
|
||||
padding: 1.75rem 0.5rem;
|
||||
|
||||
}
|
||||
}
|
||||
|
||||
a.dropdown-user-link {
|
||||
padding: 0.7rem 1.23rem;
|
||||
}
|
||||
|
||||
a.nav-link-search {
|
||||
padding: 1.6rem 0 1.35rem 1rem;
|
||||
}
|
||||
|
||||
.dropdown-toggle::after {
|
||||
margin-right: 0;
|
||||
margin-left: -2px;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
@mixin extend_mobile_specific($menu_height) {
|
||||
.header-navbar {
|
||||
.navbar-container {
|
||||
.show {
|
||||
.dropdown-menu {
|
||||
max-height: $menu_height;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
@mixin responsive_sub_nav {
|
||||
|
||||
//For responsive sub nav
|
||||
#navbar-mobile.navbar-collapse {
|
||||
.navbar-nav {
|
||||
margin: 0;
|
||||
flex-flow: row wrap;
|
||||
|
||||
.dropdown-menu {
|
||||
position: absolute;
|
||||
}
|
||||
|
||||
.nav-item {
|
||||
float: left;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
@media (max-width: 767px) {
|
||||
@include responsive_sub_nav;
|
||||
}
|
||||
|
||||
@include media-breakpoint-down(md) {
|
||||
@include responsive_sub_nav;
|
||||
}
|
||||
|
||||
/* ----------- iPhone 5, 5S iPhone 6----------- */
|
||||
|
||||
|
||||
/* Landscape */
|
||||
|
||||
@media only screen and (min-device-width: 26.78em) and (max-device-width: 47.64em) and (-webkit-min-device-pixel-ratio: 2) and (orientation: landscape) {
|
||||
@include extend_mobile_specific(180px);
|
||||
}
|
||||
|
||||
|
||||
/* ----------- iPhone 6+ ----------- */
|
||||
|
||||
|
||||
/* Landscape */
|
||||
|
||||
@media only screen and (min-device-width: 29.57em) and (max-device-width: 52.57em) and (-webkit-min-device-pixel-ratio: 3) and (orientation: landscape) {
|
||||
@include extend_mobile_specific(280px);
|
||||
}
|
||||
|
||||
|
||||
/*----------------------------- For Navbar Component -------------------------*/
|
||||
|
||||
#navbar-component {
|
||||
.navbar {
|
||||
&.floating-nav{
|
||||
border-radius: .5rem;
|
||||
}
|
||||
z-index: auto;
|
||||
// navbar dark color
|
||||
.navbar-nav{
|
||||
.nav-item{
|
||||
a{
|
||||
color: inherit !important;
|
||||
}
|
||||
}
|
||||
}
|
||||
&.header-navbar.navbar-dark{
|
||||
.navbar-nav{
|
||||
.nav-link{
|
||||
color: $white;
|
||||
i{
|
||||
color: $white;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.navbar-nav{
|
||||
.dropdown-language,
|
||||
.dropdown-notification,
|
||||
.dropdown-user {
|
||||
&.show{
|
||||
position: relative;
|
||||
}
|
||||
.dropdown-menu{
|
||||
&.show{
|
||||
position: absolute;
|
||||
right: 0;
|
||||
left: auto !important;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
// for font size of navbar toggler
|
||||
|
||||
&.navbar-dark,
|
||||
&.navbar-light {
|
||||
.navbar-toggler {
|
||||
font-size: 1.2rem;
|
||||
&:focus {
|
||||
outline: 0;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
// to remove border radius for collapsed navbar
|
||||
|
||||
#navbar-collapsed{
|
||||
.navbar{
|
||||
border-radius: 0;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
// for alignment of language dropdown and name
|
||||
@media(min-width: 992px){
|
||||
|
||||
#navbar-component{
|
||||
.navbar{
|
||||
.navbar-container{
|
||||
background: inherit;
|
||||
}
|
||||
}
|
||||
.nav{
|
||||
.dropdown-language{
|
||||
float: right;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
// background color
|
||||
|
||||
@media(max-width: 992px){
|
||||
#navbar-component{
|
||||
.navbar{
|
||||
.navbar-container{
|
||||
background: inherit;
|
||||
.navbar-nav{
|
||||
flex-direction: row;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
// for width of navbar in fixed-top
|
||||
@media(max-width: 1200px){
|
||||
.header-navbar {
|
||||
&.fixed-top {
|
||||
left: 0;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
// for notification dropdown of navbar component page
|
||||
@media (max-width: 768px){
|
||||
#navbar-component{
|
||||
.navbar{
|
||||
.navbar-nav{
|
||||
.dropdown-notification{
|
||||
&.show{
|
||||
position: static;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
@include media-breakpoint-down(xs) {
|
||||
.header-navbar.floating-nav {
|
||||
width: calc(100% - 2.4rem) !important;
|
||||
margin-left: 1.2rem;
|
||||
margin-right: 1.2rem;
|
||||
}
|
||||
.content.app-content .content-area-wrapper{
|
||||
margin-left: 1.2rem !important;
|
||||
margin-right: 1.2rem !important;
|
||||
}
|
||||
}
|
||||
|
||||
// 1-column Layout - Back Link in Center
|
||||
@media(max-width: 992px){
|
||||
.navbar-container{
|
||||
#navbar-mobile{
|
||||
.nav-back{
|
||||
margin-top: 5px;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
176
public/vendor/dashboard/src/scss/bootstrap-extended/_pagination.scss
vendored
Executable file
176
public/vendor/dashboard/src/scss/bootstrap-extended/_pagination.scss
vendored
Executable file
@@ -0,0 +1,176 @@
|
||||
// Pagination
|
||||
|
||||
.pagination {
|
||||
|
||||
// default look for page item, firsy and last item
|
||||
|
||||
.page-item {
|
||||
border-radius: 5rem;
|
||||
&.prev-item,
|
||||
&.next-item,
|
||||
&.first,
|
||||
&.last,
|
||||
&.prev,
|
||||
&.next {
|
||||
.page-link {
|
||||
color: $primary;
|
||||
}
|
||||
|
||||
&.disabled {
|
||||
.page-link {
|
||||
color: $secondary;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
// prev and last item styles
|
||||
|
||||
&.prev-item {
|
||||
margin-right: .3571rem;
|
||||
|
||||
.page-link {
|
||||
background-color: $pagination-bg-color;
|
||||
padding: $pagination-action-padding-y $pagination-action-padding-x;
|
||||
border-radius: 50%;
|
||||
|
||||
i {
|
||||
font-size: 1.2rem;
|
||||
position: relative;
|
||||
top: 1px;
|
||||
}
|
||||
|
||||
&:hover {
|
||||
background: $primary;
|
||||
color: $white;
|
||||
}
|
||||
}
|
||||
|
||||
&~.page-item:nth-child(2){
|
||||
&.active{
|
||||
border-top-left-radius: 1.428rem;
|
||||
border-bottom-left-radius: 1.428rem;
|
||||
.page-link {
|
||||
border-top-left-radius: 5rem !important;
|
||||
border-bottom-left-radius: 5rem !important;
|
||||
}
|
||||
|
||||
}
|
||||
}
|
||||
|
||||
&~.page-item:nth-last-child(-n+2){
|
||||
&.active{
|
||||
border-top-right-radius: 1.428rem;
|
||||
border-bottom-right-radius: 1.428rem;
|
||||
.page-link {
|
||||
border-top-right-radius: 5rem !important;
|
||||
border-bottom-right-radius: 5rem !important;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
&.next-item {
|
||||
margin-left: .3571rem;
|
||||
|
||||
.page-link {
|
||||
background-color: $pagination-bg-color;
|
||||
padding: $pagination-action-padding-y $pagination-action-padding-x;
|
||||
border-radius: 50%;
|
||||
|
||||
i {
|
||||
font-size: 1.2rem;
|
||||
position: relative;
|
||||
top: 1px;
|
||||
}
|
||||
|
||||
|
||||
&:hover {
|
||||
background: $primary;
|
||||
color: $white;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
// page link customization
|
||||
|
||||
.page-link {
|
||||
border: none;
|
||||
margin: 0;
|
||||
color: rgba($pure-black, .6);
|
||||
background-color: $pagination-bg-color;
|
||||
margin-left: 0;
|
||||
font-size: 1rem;
|
||||
font-weight: 700;
|
||||
|
||||
i {
|
||||
position: relative;
|
||||
top: 1px;
|
||||
}
|
||||
|
||||
&:focus {
|
||||
box-shadow: none;
|
||||
}
|
||||
|
||||
&:hover {
|
||||
color: $primary;
|
||||
}
|
||||
|
||||
}
|
||||
|
||||
// for active page item
|
||||
&.active {
|
||||
background-color: $pagination-bg-color;
|
||||
border-radius: 0;
|
||||
|
||||
.page-link {
|
||||
z-index: 3;
|
||||
border-radius: 5rem;
|
||||
background-color: $primary;
|
||||
color: $white;
|
||||
transform: scale(1.05);
|
||||
}
|
||||
}
|
||||
|
||||
// if you dont want seprated look
|
||||
|
||||
&:first-child:not(.prev-item){
|
||||
&.active{
|
||||
border-top-left-radius: 1.428rem;
|
||||
border-bottom-left-radius: 1.428rem;
|
||||
.page-link{
|
||||
border-radius: 5rem;
|
||||
}
|
||||
}
|
||||
.page-link {
|
||||
border-top-left-radius: 1.428rem;
|
||||
border-bottom-left-radius: 1.428rem;
|
||||
}
|
||||
}
|
||||
|
||||
&:last-child:not(.next-item) {
|
||||
&.active{
|
||||
border-top-right-radius: 1.428rem;
|
||||
border-bottom-right-radius: 1.428rem;
|
||||
.page-link{
|
||||
border-radius: 5rem;
|
||||
}
|
||||
}
|
||||
.page-link {
|
||||
border-top-right-radius: 1.428rem;
|
||||
border-bottom-right-radius: 1.428rem;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
// For Pagination lg
|
||||
|
||||
&.pagination-lg {
|
||||
.page-item {
|
||||
.page-link {
|
||||
font-size: $pagination-font-size-lg;
|
||||
transform: scale(1);
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
}
|
||||
17
public/vendor/dashboard/src/scss/bootstrap-extended/_popover.scss
vendored
Executable file
17
public/vendor/dashboard/src/scss/bootstrap-extended/_popover.scss
vendored
Executable file
@@ -0,0 +1,17 @@
|
||||
// Popovers
|
||||
|
||||
// popover header color and border-radius
|
||||
.popover {
|
||||
z-index: 10;
|
||||
.popover-header {
|
||||
color: $white;
|
||||
border: none;
|
||||
border-top-left-radius: 0.3rem;
|
||||
border-top-right-radius: 0.3rem;
|
||||
}
|
||||
&.bs-popover-bottom{
|
||||
.arrow:after{
|
||||
border-bottom-color: $primary;
|
||||
}
|
||||
}
|
||||
}
|
||||
53
public/vendor/dashboard/src/scss/bootstrap-extended/_progress.scss
vendored
Executable file
53
public/vendor/dashboard/src/scss/bootstrap-extended/_progress.scss
vendored
Executable file
@@ -0,0 +1,53 @@
|
||||
/*=========================================================================================
|
||||
File Name: progress.scss
|
||||
Description: Extended bootstrap progress bar scss.
|
||||
----------------------------------------------------------------------------------------
|
||||
Item Name: Vuesax HTML Admin Template
|
||||
Version: 1.1
|
||||
Author: PIXINVENT
|
||||
Author URL: http://www.themeforest.net/user/pixinvent
|
||||
----------------------------------------------------------------------------------------
|
||||
|
||||
Modifiers: `progress-lg`
|
||||
`progress-md`
|
||||
`progress-sm`
|
||||
`progress-xs`
|
||||
|
||||
==========================================================================================*/
|
||||
|
||||
// Size Modifier
|
||||
// ========================================================================
|
||||
|
||||
.progress {
|
||||
margin-bottom: 3rem;
|
||||
|
||||
// margin for last progress bar
|
||||
|
||||
&:last-child {
|
||||
margin-bottom: 1rem;
|
||||
}
|
||||
|
||||
// progress bar sizes
|
||||
|
||||
&.progress-xl {
|
||||
height: $progress-size-xl;
|
||||
}
|
||||
|
||||
&.progress-lg {
|
||||
height: $progress-size-lg;
|
||||
}
|
||||
|
||||
&.progress-md {
|
||||
height: $progress-size-md;
|
||||
}
|
||||
|
||||
&.progress-sm {
|
||||
height: $progress-size-sm;
|
||||
}
|
||||
|
||||
// progress bar radius
|
||||
|
||||
.progress-bar {
|
||||
border-radius: $progress-border-radius;
|
||||
}
|
||||
}
|
||||
5
public/vendor/dashboard/src/scss/bootstrap-extended/_reboot.scss
vendored
Executable file
5
public/vendor/dashboard/src/scss/bootstrap-extended/_reboot.scss
vendored
Executable file
@@ -0,0 +1,5 @@
|
||||
a {
|
||||
&:focus {
|
||||
outline: none
|
||||
}
|
||||
}
|
||||
73
public/vendor/dashboard/src/scss/bootstrap-extended/_tables.scss
vendored
Executable file
73
public/vendor/dashboard/src/scss/bootstrap-extended/_tables.scss
vendored
Executable file
@@ -0,0 +1,73 @@
|
||||
// ================================================================================================
|
||||
// File Name: tables.scss
|
||||
// Description: Tables pages custom scss
|
||||
// ----------------------------------------------------------------------------------------------
|
||||
// Item Name: Vuesax HTML Admin Template
|
||||
// Version: 1.1
|
||||
// Author: PIXINVENT
|
||||
// Author URL: http://www.themeforest.net/user/pixinvent
|
||||
// ================================================================================================
|
||||
|
||||
// table-white-space
|
||||
.table-white-space {
|
||||
th, td {
|
||||
white-space: nowrap;
|
||||
}
|
||||
}
|
||||
|
||||
// table th, td padding
|
||||
.table {
|
||||
thead th{
|
||||
vertical-align: top;
|
||||
}
|
||||
th, td {
|
||||
padding: 1rem;
|
||||
vertical-align: middle;
|
||||
}
|
||||
//table heading font-size
|
||||
th{
|
||||
font-size: $table-th-font-size;
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
// Table - inverse
|
||||
.table-inverse {
|
||||
color: $white;
|
||||
background-color: $info;
|
||||
}
|
||||
|
||||
// Table - hover animation
|
||||
.table-hover-animation{
|
||||
background-color: $body-bg;
|
||||
thead{
|
||||
th{
|
||||
border-top: 2px solid $table-border-color;
|
||||
border-bottom: 0;
|
||||
background-color: $white;
|
||||
}
|
||||
}
|
||||
th, td {
|
||||
border: 0;
|
||||
}
|
||||
tbody{
|
||||
tr{
|
||||
transition: all 0.25s ease;
|
||||
background-color: $white;
|
||||
&:hover{
|
||||
transform: translateY(-4px);
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
// IE Specific CSS
|
||||
@media screen and (-ms-high-contrast: active), (-ms-high-contrast: none) {
|
||||
.table-hover-animation{
|
||||
tr{
|
||||
&:hover{
|
||||
border-bottom-color: $table-border-color;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
87
public/vendor/dashboard/src/scss/bootstrap-extended/_toast.scss
vendored
Executable file
87
public/vendor/dashboard/src/scss/bootstrap-extended/_toast.scss
vendored
Executable file
@@ -0,0 +1,87 @@
|
||||
// Toasts
|
||||
|
||||
// toast container customization
|
||||
.toast-bs-container{
|
||||
z-index: 1040;
|
||||
position: fixed;
|
||||
top: 0;
|
||||
left: 0;
|
||||
width: 100%;
|
||||
|
||||
.toast-position{
|
||||
position: relative;
|
||||
top: 0;
|
||||
right: 0;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
flex-wrap: wrap-reverse;
|
||||
|
||||
.toast.show{
|
||||
// display: block;
|
||||
opacity: 1;
|
||||
z-index: 1030;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
// placement of toast on body
|
||||
.toast-placement{
|
||||
position: static;
|
||||
top: 0;
|
||||
.toast{
|
||||
position: fixed;
|
||||
top: 0;
|
||||
z-index: 1030;
|
||||
}
|
||||
}
|
||||
|
||||
// default toast customization
|
||||
.toast {
|
||||
display: none;
|
||||
background-color: rgba($white,1);
|
||||
margin-top: .75rem;
|
||||
|
||||
.toast-header{
|
||||
.close{
|
||||
&:focus,&:active{
|
||||
outline: none;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
// toast on show
|
||||
|
||||
.toast.show.toast-wrapper{
|
||||
position: static;
|
||||
}
|
||||
|
||||
// translucent toast opacity and display
|
||||
|
||||
.toast.toast-translucent {
|
||||
opacity: 1;
|
||||
display: block;
|
||||
}
|
||||
|
||||
// toast header img size
|
||||
|
||||
.toast-header{
|
||||
img{
|
||||
width: 35px;
|
||||
height: 24px;
|
||||
}
|
||||
}
|
||||
|
||||
// IE Specific CSS
|
||||
@media screen and (-ms-high-contrast: active), (-ms-high-contrast: none){
|
||||
.toast-bs-container {
|
||||
position: fixed !important;
|
||||
left: 74% !important;
|
||||
}
|
||||
}
|
||||
|
||||
_:-ms-lang(x),
|
||||
.toast-bs-container {
|
||||
position: fixed !important;
|
||||
left: 74% !important;
|
||||
}
|
||||
89
public/vendor/dashboard/src/scss/bootstrap-extended/_type.scss
vendored
Executable file
89
public/vendor/dashboard/src/scss/bootstrap-extended/_type.scss
vendored
Executable file
@@ -0,0 +1,89 @@
|
||||
// ================================================================================================
|
||||
// File Name: type.scss
|
||||
// Description: Type pages custom scss
|
||||
// ----------------------------------------------------------------------------------------------
|
||||
// Item Name: Vuesax HTML Admin Template
|
||||
// Version: 1.1
|
||||
// Author: PIXINVENT
|
||||
// Author URL: http://www.themeforest.net/user/pixinvent
|
||||
// ================================================================================================
|
||||
|
||||
|
||||
//small
|
||||
.font-small-1{
|
||||
font-size: 0.7rem !important;
|
||||
}
|
||||
.font-small-2{
|
||||
font-size: 0.8rem !important;
|
||||
}
|
||||
.font-small-3{
|
||||
font-size: 0.9rem !important;
|
||||
}
|
||||
//medium
|
||||
.font-medium-1{
|
||||
font-size: 1.1rem !important;
|
||||
}
|
||||
.font-medium-2{
|
||||
font-size: 1.2rem !important;
|
||||
}
|
||||
.font-medium-3{
|
||||
font-size: 1.3rem !important;
|
||||
}
|
||||
.font-medium-4{
|
||||
font-size: 1.4rem !important;
|
||||
}
|
||||
.font-medium-5{
|
||||
font-size: 1.5rem !important;
|
||||
}
|
||||
//large
|
||||
.font-large-1{
|
||||
font-size: 2rem !important;
|
||||
}
|
||||
.font-large-2{
|
||||
font-size: 3rem !important;
|
||||
}
|
||||
.font-large-3{
|
||||
font-size: 4rem !important;
|
||||
}
|
||||
.font-large-4{
|
||||
font-size: 5rem !important;
|
||||
}
|
||||
.font-large-5{
|
||||
font-size: 6rem !important;
|
||||
}
|
||||
|
||||
// Text styling
|
||||
// -------------------------
|
||||
|
||||
// Font weights
|
||||
|
||||
.text-bold-300 {
|
||||
@include font-weight(light);
|
||||
}
|
||||
.text-bold-400 {
|
||||
@include font-weight(book);
|
||||
}
|
||||
.text-bold-500 {
|
||||
@include font-weight(medium);
|
||||
}
|
||||
.text-bold-600 {
|
||||
@include font-weight(semi-bold);
|
||||
}
|
||||
.text-bold-700 {
|
||||
@include font-weight(bold);
|
||||
}
|
||||
|
||||
// Font style
|
||||
.text-italic {
|
||||
font-style: italic;
|
||||
}
|
||||
.text-highlight {
|
||||
padding: 4px 6px;
|
||||
}
|
||||
|
||||
// //list Item
|
||||
// ol, ul, dl{
|
||||
// li{
|
||||
// line-height: 12;
|
||||
// }
|
||||
// }
|
||||
91
public/vendor/dashboard/src/scss/bootstrap-extended/_utilities.scss
vendored
Executable file
91
public/vendor/dashboard/src/scss/bootstrap-extended/_utilities.scss
vendored
Executable file
@@ -0,0 +1,91 @@
|
||||
.icon-bg-circle{
|
||||
color: $white;
|
||||
padding: 0.5rem;
|
||||
border-radius: 50%;
|
||||
}
|
||||
.icon-left{
|
||||
margin-right:0.5rem;
|
||||
}
|
||||
.icon-right{
|
||||
margin-right:0.5rem;
|
||||
}
|
||||
.icon-spin {
|
||||
display: inline-block;
|
||||
animation: spin 1s infinite linear;
|
||||
}
|
||||
|
||||
.blockOverlay{
|
||||
z-index: 1050 !important;
|
||||
}
|
||||
.blockElement, .blockPage{
|
||||
z-index: 1051 !important;
|
||||
}
|
||||
|
||||
@-moz-keyframes spin {
|
||||
from {
|
||||
-moz-transform: rotate(0deg);
|
||||
}
|
||||
to {
|
||||
-moz-transform: rotate(360deg);
|
||||
}
|
||||
}
|
||||
|
||||
@-webkit-keyframes spin {
|
||||
from {
|
||||
-webkit-transform: rotate(0deg);
|
||||
}
|
||||
to {
|
||||
-webkit-transform: rotate(360deg);
|
||||
}
|
||||
}
|
||||
|
||||
@keyframes spin {
|
||||
from {
|
||||
transform: rotate(0deg);
|
||||
}
|
||||
to {
|
||||
transform: rotate(360deg);
|
||||
}
|
||||
}
|
||||
|
||||
.hidden{
|
||||
display: none;
|
||||
visibility: hidden;
|
||||
}
|
||||
|
||||
//Disabled
|
||||
a{
|
||||
&.disabled{
|
||||
// color: $dropdown-link-disabled-color !important;
|
||||
}
|
||||
&:hover {
|
||||
cursor: pointer;
|
||||
}
|
||||
}
|
||||
|
||||
.round{@include border-radius(1.5rem);}
|
||||
.square{@include border-radius($btn-border-radius-square);}
|
||||
|
||||
.icon-line-height{
|
||||
line-height : 1.5rem !important;
|
||||
}
|
||||
|
||||
//Tables
|
||||
//--------------------------
|
||||
.table-middle{
|
||||
td{
|
||||
vertical-align: middle;
|
||||
}
|
||||
}
|
||||
|
||||
// Spinner classes
|
||||
.spinner {
|
||||
display: inline-block;
|
||||
-webkit-animation: spin 1s linear infinite;
|
||||
-o-animation: spin 1s linear infinite;
|
||||
animation: spin 1s linear infinite;
|
||||
}
|
||||
@keyframes spin {
|
||||
0% { transform: rotate(0deg); }
|
||||
100% { transform: rotate(360deg); }
|
||||
}
|
||||
14
public/vendor/dashboard/src/scss/bootstrap-extended/mixins/_buttons.scss
vendored
Executable file
14
public/vendor/dashboard/src/scss/bootstrap-extended/mixins/_buttons.scss
vendored
Executable file
@@ -0,0 +1,14 @@
|
||||
@mixin button-square-variant($border) {
|
||||
@include border-radius($border);
|
||||
}
|
||||
@mixin button-round-variant($border) {
|
||||
@include border-radius($border);
|
||||
}
|
||||
|
||||
// Button sizes
|
||||
@mixin button-size($padding-y, $padding-x, $font-size, $line-height, $border-radius) {
|
||||
padding: $padding-y $padding-x;
|
||||
font-size: $font-size;
|
||||
// line-height: $line-height-base;
|
||||
@include border-radius($border-radius);
|
||||
}
|
||||
7
public/vendor/dashboard/src/scss/bootstrap-extended/mixins/_forms.scss
vendored
Executable file
7
public/vendor/dashboard/src/scss/bootstrap-extended/mixins/_forms.scss
vendored
Executable file
@@ -0,0 +1,7 @@
|
||||
@mixin input-field-size($input-height, $padding-vertical, $padding-horizontal, $font-size, $line-height, $border-radius) {
|
||||
height: $input-height;
|
||||
padding: $padding-vertical $padding-horizontal;
|
||||
font-size: $font-size;
|
||||
line-height: $line-height-base;
|
||||
border-radius: $border-radius;
|
||||
}
|
||||
13
public/vendor/dashboard/src/scss/bootstrap-extended/mixins/_label.scss
vendored
Executable file
13
public/vendor/dashboard/src/scss/bootstrap-extended/mixins/_label.scss
vendored
Executable file
@@ -0,0 +1,13 @@
|
||||
// tags
|
||||
|
||||
@mixin badge-variant($color) {
|
||||
background-color: $color;
|
||||
&.badge-glow{
|
||||
box-shadow: 0px 0px 10px $color;
|
||||
}
|
||||
&[href] {
|
||||
@include hover-focus {
|
||||
background-color: darken($color, 10%);
|
||||
}
|
||||
}
|
||||
}
|
||||
50
public/vendor/dashboard/src/scss/bootstrap-extended/mixins/_navs.scss
vendored
Executable file
50
public/vendor/dashboard/src/scss/bootstrap-extended/mixins/_navs.scss
vendored
Executable file
@@ -0,0 +1,50 @@
|
||||
// Justified nav links
|
||||
// -------------------------
|
||||
|
||||
@mixin nav-justified {
|
||||
width: 100%;
|
||||
|
||||
.nav-item {
|
||||
float: none;
|
||||
}
|
||||
|
||||
.nav-link {
|
||||
text-align: center;
|
||||
margin-bottom: 5px;
|
||||
}
|
||||
|
||||
> .dropdown .dropdown-menu {
|
||||
top: auto;
|
||||
left: auto;
|
||||
}
|
||||
|
||||
@include media-breakpoint-up(sm) {
|
||||
.nav-item {
|
||||
display: block;
|
||||
width: 1%;
|
||||
}
|
||||
.nav-link {
|
||||
margin-bottom: 0;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
// Move borders to anchors instead of bottom of list
|
||||
//
|
||||
// Mixin for adding on top the shared `.nav-justified` styles for our tabs
|
||||
@mixin nav-tabs-justified {
|
||||
|
||||
.nav-link {
|
||||
// Override margin from .nav-tabs
|
||||
margin-right: 0;
|
||||
border-radius: $border-radius;
|
||||
}
|
||||
|
||||
@include media-breakpoint-up(sm) {
|
||||
.nav-link.active,
|
||||
.nav-link.active:hover,
|
||||
.nav-link.active:focus {
|
||||
border-bottom-color: transparent;//$nav-tabs-justified-active-link-border-color;
|
||||
}
|
||||
}
|
||||
}
|
||||
31
public/vendor/dashboard/src/scss/bootstrap-extended/mixins/_type.scss
vendored
Executable file
31
public/vendor/dashboard/src/scss/bootstrap-extended/mixins/_type.scss
vendored
Executable file
@@ -0,0 +1,31 @@
|
||||
// Font weight mixins
|
||||
// ------------------
|
||||
@mixin font-weight($weight) {
|
||||
$weights: (
|
||||
thin: 100,
|
||||
extra-light: 200,
|
||||
ultra-light: 200,
|
||||
light: 300,
|
||||
normal: 400,
|
||||
book: 400,
|
||||
regular: 400,
|
||||
medium: 500,
|
||||
semi-bold: 600,
|
||||
demi-bold: 600,
|
||||
bold: 700,
|
||||
extra-bold: 800,
|
||||
ultra-bold: 900,
|
||||
heavy: 900,
|
||||
black: 900,
|
||||
ultra: 900,
|
||||
ultra-black: 900,
|
||||
extra-ultra: 900
|
||||
);
|
||||
|
||||
$output: $weight;
|
||||
@if map-has-key($weights, $weight) {
|
||||
$output: map-get($weights, $weight);
|
||||
}
|
||||
|
||||
font-weight: $output;
|
||||
}
|
||||
13
public/vendor/dashboard/src/scss/bootstrap.scss
vendored
Executable file
13
public/vendor/dashboard/src/scss/bootstrap.scss
vendored
Executable file
@@ -0,0 +1,13 @@
|
||||
/*!
|
||||
* Bootstrap v4.3.1 (https://getbootstrap.com/)
|
||||
* Copyright 2011-2019 The Bootstrap Authors
|
||||
* Copyright 2011-2019 Twitter, Inc.
|
||||
* Licensed under MIT (https://github.com/twbs/bootstrap/blob/master/LICENSE)
|
||||
*/
|
||||
|
||||
@import "bootstrap/functions";
|
||||
|
||||
@import "core/variables/variables";
|
||||
@import "bootstrap/variables";
|
||||
|
||||
@import "bootstrap/bootstrap";
|
||||
51
public/vendor/dashboard/src/scss/bootstrap/_alert.scss
vendored
Executable file
51
public/vendor/dashboard/src/scss/bootstrap/_alert.scss
vendored
Executable file
@@ -0,0 +1,51 @@
|
||||
//
|
||||
// Base styles
|
||||
//
|
||||
|
||||
.alert {
|
||||
position: relative;
|
||||
padding: $alert-padding-y $alert-padding-x;
|
||||
margin-bottom: $alert-margin-bottom;
|
||||
border: $alert-border-width solid transparent;
|
||||
@include border-radius($alert-border-radius);
|
||||
}
|
||||
|
||||
// Headings for larger alerts
|
||||
.alert-heading {
|
||||
// Specified to prevent conflicts of changing $headings-color
|
||||
color: inherit;
|
||||
}
|
||||
|
||||
// Provide class for links that match alerts
|
||||
.alert-link {
|
||||
font-weight: $alert-link-font-weight;
|
||||
}
|
||||
|
||||
|
||||
// Dismissible alerts
|
||||
//
|
||||
// Expand the right padding and account for the close button's positioning.
|
||||
|
||||
.alert-dismissible {
|
||||
padding-right: $close-font-size + $alert-padding-x * 2;
|
||||
|
||||
// Adjust close link position
|
||||
.close {
|
||||
position: absolute;
|
||||
top: 0;
|
||||
right: 0;
|
||||
padding: $alert-padding-y $alert-padding-x;
|
||||
color: inherit;
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
// Alternate styles
|
||||
//
|
||||
// Generate contextual modifier classes for colorizing the alert.
|
||||
|
||||
@each $color, $value in $theme-colors {
|
||||
.alert-#{$color} {
|
||||
@include alert-variant(theme-color-level($color, $alert-bg-level), theme-color-level($color, $alert-border-level), theme-color-level($color, $alert-color-level));
|
||||
}
|
||||
}
|
||||
54
public/vendor/dashboard/src/scss/bootstrap/_badge.scss
vendored
Executable file
54
public/vendor/dashboard/src/scss/bootstrap/_badge.scss
vendored
Executable file
@@ -0,0 +1,54 @@
|
||||
// Base class
|
||||
//
|
||||
// Requires one of the contextual, color modifier classes for `color` and
|
||||
// `background-color`.
|
||||
|
||||
.badge {
|
||||
display: inline-block;
|
||||
padding: $badge-padding-y $badge-padding-x;
|
||||
@include font-size($badge-font-size);
|
||||
font-weight: $badge-font-weight;
|
||||
line-height: 1;
|
||||
text-align: center;
|
||||
white-space: nowrap;
|
||||
vertical-align: baseline;
|
||||
@include border-radius($badge-border-radius);
|
||||
@include transition($badge-transition);
|
||||
|
||||
@at-root a#{&} {
|
||||
@include hover-focus {
|
||||
text-decoration: none;
|
||||
}
|
||||
}
|
||||
|
||||
// Empty badges collapse automatically
|
||||
&:empty {
|
||||
display: none;
|
||||
}
|
||||
}
|
||||
|
||||
// Quick fix for badges in buttons
|
||||
.btn .badge {
|
||||
position: relative;
|
||||
top: -1px;
|
||||
}
|
||||
|
||||
// Pill badges
|
||||
//
|
||||
// Make them extra rounded with a modifier to replace v3's badges.
|
||||
|
||||
.badge-pill {
|
||||
padding-right: $badge-pill-padding-x;
|
||||
padding-left: $badge-pill-padding-x;
|
||||
@include border-radius($badge-pill-border-radius);
|
||||
}
|
||||
|
||||
// Colors
|
||||
//
|
||||
// Contextual variations (linked badges get darker on :hover).
|
||||
|
||||
@each $color, $value in $theme-colors {
|
||||
.badge-#{$color} {
|
||||
@include badge-variant($value);
|
||||
}
|
||||
}
|
||||
41
public/vendor/dashboard/src/scss/bootstrap/_breadcrumb.scss
vendored
Executable file
41
public/vendor/dashboard/src/scss/bootstrap/_breadcrumb.scss
vendored
Executable file
@@ -0,0 +1,41 @@
|
||||
.breadcrumb {
|
||||
display: flex;
|
||||
flex-wrap: wrap;
|
||||
padding: $breadcrumb-padding-y $breadcrumb-padding-x;
|
||||
margin-bottom: $breadcrumb-margin-bottom;
|
||||
list-style: none;
|
||||
background-color: $breadcrumb-bg;
|
||||
@include border-radius($breadcrumb-border-radius);
|
||||
}
|
||||
|
||||
.breadcrumb-item {
|
||||
// The separator between breadcrumbs (by default, a forward-slash: "/")
|
||||
+ .breadcrumb-item {
|
||||
padding-left: $breadcrumb-item-padding;
|
||||
|
||||
&::before {
|
||||
display: inline-block; // Suppress underlining of the separator in modern browsers
|
||||
padding-right: $breadcrumb-item-padding;
|
||||
color: $breadcrumb-divider-color;
|
||||
content: $breadcrumb-divider;
|
||||
}
|
||||
}
|
||||
|
||||
// IE9-11 hack to properly handle hyperlink underlines for breadcrumbs built
|
||||
// without `<ul>`s. The `::before` pseudo-element generates an element
|
||||
// *within* the .breadcrumb-item and thereby inherits the `text-decoration`.
|
||||
//
|
||||
// To trick IE into suppressing the underline, we give the pseudo-element an
|
||||
// underline and then immediately remove it.
|
||||
+ .breadcrumb-item:hover::before {
|
||||
text-decoration: underline;
|
||||
}
|
||||
// stylelint-disable-next-line no-duplicate-selectors
|
||||
+ .breadcrumb-item:hover::before {
|
||||
text-decoration: none;
|
||||
}
|
||||
|
||||
&.active {
|
||||
color: $breadcrumb-active-color;
|
||||
}
|
||||
}
|
||||
163
public/vendor/dashboard/src/scss/bootstrap/_button-group.scss
vendored
Executable file
163
public/vendor/dashboard/src/scss/bootstrap/_button-group.scss
vendored
Executable file
@@ -0,0 +1,163 @@
|
||||
// stylelint-disable selector-no-qualifying-type
|
||||
|
||||
// Make the div behave like a button
|
||||
.btn-group,
|
||||
.btn-group-vertical {
|
||||
position: relative;
|
||||
display: inline-flex;
|
||||
vertical-align: middle; // match .btn alignment given font-size hack above
|
||||
|
||||
> .btn {
|
||||
position: relative;
|
||||
flex: 1 1 auto;
|
||||
|
||||
// Bring the hover, focused, and "active" buttons to the front to overlay
|
||||
// the borders properly
|
||||
@include hover {
|
||||
z-index: 1;
|
||||
}
|
||||
&:focus,
|
||||
&:active,
|
||||
&.active {
|
||||
z-index: 1;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
// Optional: Group multiple button groups together for a toolbar
|
||||
.btn-toolbar {
|
||||
display: flex;
|
||||
flex-wrap: wrap;
|
||||
justify-content: flex-start;
|
||||
|
||||
.input-group {
|
||||
width: auto;
|
||||
}
|
||||
}
|
||||
|
||||
.btn-group {
|
||||
// Prevent double borders when buttons are next to each other
|
||||
> .btn:not(:first-child),
|
||||
> .btn-group:not(:first-child) {
|
||||
margin-left: -$btn-border-width;
|
||||
}
|
||||
|
||||
// Reset rounded corners
|
||||
> .btn:not(:last-child):not(.dropdown-toggle),
|
||||
> .btn-group:not(:last-child) > .btn {
|
||||
@include border-right-radius(0);
|
||||
}
|
||||
|
||||
> .btn:not(:first-child),
|
||||
> .btn-group:not(:first-child) > .btn {
|
||||
@include border-left-radius(0);
|
||||
}
|
||||
}
|
||||
|
||||
// Sizing
|
||||
//
|
||||
// Remix the default button sizing classes into new ones for easier manipulation.
|
||||
|
||||
.btn-group-sm > .btn { @extend .btn-sm; }
|
||||
.btn-group-lg > .btn { @extend .btn-lg; }
|
||||
|
||||
|
||||
//
|
||||
// Split button dropdowns
|
||||
//
|
||||
|
||||
.dropdown-toggle-split {
|
||||
padding-right: $btn-padding-x * .75;
|
||||
padding-left: $btn-padding-x * .75;
|
||||
|
||||
&::after,
|
||||
.dropup &::after,
|
||||
.dropright &::after {
|
||||
margin-left: 0;
|
||||
}
|
||||
|
||||
.dropleft &::before {
|
||||
margin-right: 0;
|
||||
}
|
||||
}
|
||||
|
||||
.btn-sm + .dropdown-toggle-split {
|
||||
padding-right: $btn-padding-x-sm * .75;
|
||||
padding-left: $btn-padding-x-sm * .75;
|
||||
}
|
||||
|
||||
.btn-lg + .dropdown-toggle-split {
|
||||
padding-right: $btn-padding-x-lg * .75;
|
||||
padding-left: $btn-padding-x-lg * .75;
|
||||
}
|
||||
|
||||
|
||||
// The clickable button for toggling the menu
|
||||
// Set the same inset shadow as the :active state
|
||||
.btn-group.show .dropdown-toggle {
|
||||
@include box-shadow($btn-active-box-shadow);
|
||||
|
||||
// Show no shadow for `.btn-link` since it has no other button styles.
|
||||
&.btn-link {
|
||||
@include box-shadow(none);
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
//
|
||||
// Vertical button groups
|
||||
//
|
||||
|
||||
.btn-group-vertical {
|
||||
flex-direction: column;
|
||||
align-items: flex-start;
|
||||
justify-content: center;
|
||||
|
||||
> .btn,
|
||||
> .btn-group {
|
||||
width: 100%;
|
||||
}
|
||||
|
||||
> .btn:not(:first-child),
|
||||
> .btn-group:not(:first-child) {
|
||||
margin-top: -$btn-border-width;
|
||||
}
|
||||
|
||||
// Reset rounded corners
|
||||
> .btn:not(:last-child):not(.dropdown-toggle),
|
||||
> .btn-group:not(:last-child) > .btn {
|
||||
@include border-bottom-radius(0);
|
||||
}
|
||||
|
||||
> .btn:not(:first-child),
|
||||
> .btn-group:not(:first-child) > .btn {
|
||||
@include border-top-radius(0);
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
// Checkbox and radio options
|
||||
//
|
||||
// In order to support the browser's form validation feedback, powered by the
|
||||
// `required` attribute, we have to "hide" the inputs via `clip`. We cannot use
|
||||
// `display: none;` or `visibility: hidden;` as that also hides the popover.
|
||||
// Simply visually hiding the inputs via `opacity` would leave them clickable in
|
||||
// certain cases which is prevented by using `clip` and `pointer-events`.
|
||||
// This way, we ensure a DOM element is visible to position the popover from.
|
||||
//
|
||||
// See https://github.com/twbs/bootstrap/pull/12794 and
|
||||
// https://github.com/twbs/bootstrap/pull/14559 for more information.
|
||||
|
||||
.btn-group-toggle {
|
||||
> .btn,
|
||||
> .btn-group > .btn {
|
||||
margin-bottom: 0; // Override default `<label>` value
|
||||
|
||||
input[type="radio"],
|
||||
input[type="checkbox"] {
|
||||
position: absolute;
|
||||
clip: rect(0, 0, 0, 0);
|
||||
pointer-events: none;
|
||||
}
|
||||
}
|
||||
}
|
||||
137
public/vendor/dashboard/src/scss/bootstrap/_buttons.scss
vendored
Executable file
137
public/vendor/dashboard/src/scss/bootstrap/_buttons.scss
vendored
Executable file
@@ -0,0 +1,137 @@
|
||||
// stylelint-disable selector-no-qualifying-type
|
||||
|
||||
//
|
||||
// Base styles
|
||||
//
|
||||
|
||||
.btn {
|
||||
display: inline-block;
|
||||
font-family: $btn-font-family;
|
||||
font-weight: $btn-font-weight;
|
||||
color: $body-color;
|
||||
text-align: center;
|
||||
vertical-align: middle;
|
||||
user-select: none;
|
||||
background-color: transparent;
|
||||
border: $btn-border-width solid transparent;
|
||||
@include button-size($btn-padding-y, $btn-padding-x, $btn-font-size, $btn-line-height, $btn-border-radius);
|
||||
@include transition($btn-transition);
|
||||
|
||||
@include hover {
|
||||
color: $body-color;
|
||||
text-decoration: none;
|
||||
}
|
||||
|
||||
&:focus,
|
||||
&.focus {
|
||||
outline: 0;
|
||||
box-shadow: $btn-focus-box-shadow;
|
||||
}
|
||||
|
||||
// Disabled comes first so active can properly restyle
|
||||
&.disabled,
|
||||
&:disabled {
|
||||
opacity: $btn-disabled-opacity;
|
||||
@include box-shadow(none);
|
||||
}
|
||||
|
||||
&:not(:disabled):not(.disabled):active,
|
||||
&:not(:disabled):not(.disabled).active {
|
||||
@include box-shadow($btn-active-box-shadow);
|
||||
|
||||
&:focus {
|
||||
@include box-shadow($btn-focus-box-shadow, $btn-active-box-shadow);
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
// Future-proof disabling of clicks on `<a>` elements
|
||||
a.btn.disabled,
|
||||
fieldset:disabled a.btn {
|
||||
pointer-events: none;
|
||||
}
|
||||
|
||||
|
||||
//
|
||||
// Alternate buttons
|
||||
//
|
||||
|
||||
@each $color, $value in $theme-colors {
|
||||
.btn-#{$color} {
|
||||
@include button-variant($value, $value);
|
||||
}
|
||||
}
|
||||
|
||||
@each $color, $value in $theme-colors {
|
||||
.btn-outline-#{$color} {
|
||||
@include button-outline-variant($value);
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
//
|
||||
// Link buttons
|
||||
//
|
||||
|
||||
// Make a button look and behave like a link
|
||||
.btn-link {
|
||||
font-weight: $font-weight-normal;
|
||||
color: $link-color;
|
||||
text-decoration: $link-decoration;
|
||||
|
||||
@include hover {
|
||||
color: $link-hover-color;
|
||||
text-decoration: $link-hover-decoration;
|
||||
}
|
||||
|
||||
&:focus,
|
||||
&.focus {
|
||||
text-decoration: $link-hover-decoration;
|
||||
box-shadow: none;
|
||||
}
|
||||
|
||||
&:disabled,
|
||||
&.disabled {
|
||||
color: $btn-link-disabled-color;
|
||||
pointer-events: none;
|
||||
}
|
||||
|
||||
// No need for an active state here
|
||||
}
|
||||
|
||||
|
||||
//
|
||||
// Button Sizes
|
||||
//
|
||||
|
||||
.btn-lg {
|
||||
@include button-size($btn-padding-y-lg, $btn-padding-x-lg, $btn-font-size-lg, $btn-line-height-lg, $btn-border-radius-lg);
|
||||
}
|
||||
|
||||
.btn-sm {
|
||||
@include button-size($btn-padding-y-sm, $btn-padding-x-sm, $btn-font-size-sm, $btn-line-height-sm, $btn-border-radius-sm);
|
||||
}
|
||||
|
||||
|
||||
//
|
||||
// Block button
|
||||
//
|
||||
|
||||
.btn-block {
|
||||
display: block;
|
||||
width: 100%;
|
||||
|
||||
// Vertically space out multiple block buttons
|
||||
+ .btn-block {
|
||||
margin-top: $btn-block-spacing-y;
|
||||
}
|
||||
}
|
||||
|
||||
// Specificity overrides
|
||||
input[type="submit"],
|
||||
input[type="reset"],
|
||||
input[type="button"] {
|
||||
&.btn-block {
|
||||
width: 100%;
|
||||
}
|
||||
}
|
||||
289
public/vendor/dashboard/src/scss/bootstrap/_card.scss
vendored
Executable file
289
public/vendor/dashboard/src/scss/bootstrap/_card.scss
vendored
Executable file
@@ -0,0 +1,289 @@
|
||||
//
|
||||
// Base styles
|
||||
//
|
||||
|
||||
.card {
|
||||
position: relative;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
min-width: 0; // See https://github.com/twbs/bootstrap/pull/22740#issuecomment-305868106
|
||||
word-wrap: break-word;
|
||||
background-color: $card-bg;
|
||||
background-clip: border-box;
|
||||
border: $card-border-width solid $card-border-color;
|
||||
@include border-radius($card-border-radius);
|
||||
|
||||
> hr {
|
||||
margin-right: 0;
|
||||
margin-left: 0;
|
||||
}
|
||||
|
||||
> .list-group:first-child {
|
||||
.list-group-item:first-child {
|
||||
@include border-top-radius($card-border-radius);
|
||||
}
|
||||
}
|
||||
|
||||
> .list-group:last-child {
|
||||
.list-group-item:last-child {
|
||||
@include border-bottom-radius($card-border-radius);
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.card-body {
|
||||
// Enable `flex-grow: 1` for decks and groups so that card blocks take up
|
||||
// as much space as possible, ensuring footers are aligned to the bottom.
|
||||
flex: 1 1 auto;
|
||||
padding: $card-spacer-x;
|
||||
color: $card-color;
|
||||
}
|
||||
|
||||
.card-title {
|
||||
margin-bottom: $card-spacer-y;
|
||||
}
|
||||
|
||||
.card-subtitle {
|
||||
margin-top: -$card-spacer-y / 2;
|
||||
margin-bottom: 0;
|
||||
}
|
||||
|
||||
.card-text:last-child {
|
||||
margin-bottom: 0;
|
||||
}
|
||||
|
||||
.card-link {
|
||||
@include hover {
|
||||
text-decoration: none;
|
||||
}
|
||||
|
||||
+ .card-link {
|
||||
margin-left: $card-spacer-x;
|
||||
}
|
||||
}
|
||||
|
||||
//
|
||||
// Optional textual caps
|
||||
//
|
||||
|
||||
.card-header {
|
||||
padding: $card-spacer-y $card-spacer-x;
|
||||
margin-bottom: 0; // Removes the default margin-bottom of <hN>
|
||||
color: $card-cap-color;
|
||||
background-color: $card-cap-bg;
|
||||
border-bottom: $card-border-width solid $card-border-color;
|
||||
|
||||
&:first-child {
|
||||
@include border-radius($card-inner-border-radius $card-inner-border-radius 0 0);
|
||||
}
|
||||
|
||||
+ .list-group {
|
||||
.list-group-item:first-child {
|
||||
border-top: 0;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.card-footer {
|
||||
padding: $card-spacer-y $card-spacer-x;
|
||||
background-color: $card-cap-bg;
|
||||
border-top: $card-border-width solid $card-border-color;
|
||||
|
||||
&:last-child {
|
||||
@include border-radius(0 0 $card-inner-border-radius $card-inner-border-radius);
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
//
|
||||
// Header navs
|
||||
//
|
||||
|
||||
.card-header-tabs {
|
||||
margin-right: -$card-spacer-x / 2;
|
||||
margin-bottom: -$card-spacer-y;
|
||||
margin-left: -$card-spacer-x / 2;
|
||||
border-bottom: 0;
|
||||
}
|
||||
|
||||
.card-header-pills {
|
||||
margin-right: -$card-spacer-x / 2;
|
||||
margin-left: -$card-spacer-x / 2;
|
||||
}
|
||||
|
||||
// Card image
|
||||
.card-img-overlay {
|
||||
position: absolute;
|
||||
top: 0;
|
||||
right: 0;
|
||||
bottom: 0;
|
||||
left: 0;
|
||||
padding: $card-img-overlay-padding;
|
||||
}
|
||||
|
||||
.card-img {
|
||||
width: 100%; // Required because we use flexbox and this inherently applies align-self: stretch
|
||||
@include border-radius($card-inner-border-radius);
|
||||
}
|
||||
|
||||
// Card image caps
|
||||
.card-img-top {
|
||||
width: 100%; // Required because we use flexbox and this inherently applies align-self: stretch
|
||||
@include border-top-radius($card-inner-border-radius);
|
||||
}
|
||||
|
||||
.card-img-bottom {
|
||||
width: 100%; // Required because we use flexbox and this inherently applies align-self: stretch
|
||||
@include border-bottom-radius($card-inner-border-radius);
|
||||
}
|
||||
|
||||
|
||||
// Card deck
|
||||
|
||||
.card-deck {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
|
||||
.card {
|
||||
margin-bottom: $card-deck-margin;
|
||||
}
|
||||
|
||||
@include media-breakpoint-up(sm) {
|
||||
flex-flow: row wrap;
|
||||
margin-right: -$card-deck-margin;
|
||||
margin-left: -$card-deck-margin;
|
||||
|
||||
.card {
|
||||
display: flex;
|
||||
// Flexbugs #4: https://github.com/philipwalton/flexbugs#flexbug-4
|
||||
flex: 1 0 0%;
|
||||
flex-direction: column;
|
||||
margin-right: $card-deck-margin;
|
||||
margin-bottom: 0; // Override the default
|
||||
margin-left: $card-deck-margin;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
//
|
||||
// Card groups
|
||||
//
|
||||
|
||||
.card-group {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
|
||||
// The child selector allows nested `.card` within `.card-group`
|
||||
// to display properly.
|
||||
> .card {
|
||||
margin-bottom: $card-group-margin;
|
||||
}
|
||||
|
||||
@include media-breakpoint-up(sm) {
|
||||
flex-flow: row wrap;
|
||||
// The child selector allows nested `.card` within `.card-group`
|
||||
// to display properly.
|
||||
> .card {
|
||||
// Flexbugs #4: https://github.com/philipwalton/flexbugs#flexbug-4
|
||||
flex: 1 0 0%;
|
||||
margin-bottom: 0;
|
||||
|
||||
+ .card {
|
||||
margin-left: 0;
|
||||
border-left: 0;
|
||||
}
|
||||
|
||||
// Handle rounded corners
|
||||
@if $enable-rounded {
|
||||
&:not(:last-child) {
|
||||
@include border-right-radius(0);
|
||||
|
||||
.card-img-top,
|
||||
.card-header {
|
||||
// stylelint-disable-next-line property-blacklist
|
||||
border-top-right-radius: 0;
|
||||
}
|
||||
.card-img-bottom,
|
||||
.card-footer {
|
||||
// stylelint-disable-next-line property-blacklist
|
||||
border-bottom-right-radius: 0;
|
||||
}
|
||||
}
|
||||
|
||||
&:not(:first-child) {
|
||||
@include border-left-radius(0);
|
||||
|
||||
.card-img-top,
|
||||
.card-header {
|
||||
// stylelint-disable-next-line property-blacklist
|
||||
border-top-left-radius: 0;
|
||||
}
|
||||
.card-img-bottom,
|
||||
.card-footer {
|
||||
// stylelint-disable-next-line property-blacklist
|
||||
border-bottom-left-radius: 0;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
//
|
||||
// Columns
|
||||
//
|
||||
|
||||
.card-columns {
|
||||
.card {
|
||||
margin-bottom: $card-columns-margin;
|
||||
}
|
||||
|
||||
@include media-breakpoint-up(sm) {
|
||||
column-count: $card-columns-count;
|
||||
column-gap: $card-columns-gap;
|
||||
orphans: 1;
|
||||
widows: 1;
|
||||
|
||||
.card {
|
||||
display: inline-block; // Don't let them vertically span multiple columns
|
||||
width: 100%; // Don't let their width change
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
//
|
||||
// Accordion
|
||||
//
|
||||
|
||||
.accordion {
|
||||
> .card {
|
||||
overflow: hidden;
|
||||
|
||||
&:not(:first-of-type) {
|
||||
.card-header:first-child {
|
||||
@include border-radius(0);
|
||||
}
|
||||
|
||||
&:not(:last-of-type) {
|
||||
border-bottom: 0;
|
||||
@include border-radius(0);
|
||||
}
|
||||
}
|
||||
|
||||
&:first-of-type {
|
||||
border-bottom: 0;
|
||||
@include border-bottom-radius(0);
|
||||
}
|
||||
|
||||
&:last-of-type {
|
||||
@include border-top-radius(0);
|
||||
}
|
||||
|
||||
.card-header {
|
||||
margin-bottom: -$card-border-width;
|
||||
}
|
||||
}
|
||||
}
|
||||
197
public/vendor/dashboard/src/scss/bootstrap/_carousel.scss
vendored
Executable file
197
public/vendor/dashboard/src/scss/bootstrap/_carousel.scss
vendored
Executable file
@@ -0,0 +1,197 @@
|
||||
// Notes on the classes:
|
||||
//
|
||||
// 1. .carousel.pointer-event should ideally be pan-y (to allow for users to scroll vertically)
|
||||
// even when their scroll action started on a carousel, but for compatibility (with Firefox)
|
||||
// we're preventing all actions instead
|
||||
// 2. The .carousel-item-left and .carousel-item-right is used to indicate where
|
||||
// the active slide is heading.
|
||||
// 3. .active.carousel-item is the current slide.
|
||||
// 4. .active.carousel-item-left and .active.carousel-item-right is the current
|
||||
// slide in its in-transition state. Only one of these occurs at a time.
|
||||
// 5. .carousel-item-next.carousel-item-left and .carousel-item-prev.carousel-item-right
|
||||
// is the upcoming slide in transition.
|
||||
|
||||
.carousel {
|
||||
position: relative;
|
||||
}
|
||||
|
||||
.carousel.pointer-event {
|
||||
touch-action: pan-y;
|
||||
}
|
||||
|
||||
.carousel-inner {
|
||||
position: relative;
|
||||
width: 100%;
|
||||
overflow: hidden;
|
||||
@include clearfix();
|
||||
}
|
||||
|
||||
.carousel-item {
|
||||
position: relative;
|
||||
display: none;
|
||||
float: left;
|
||||
width: 100%;
|
||||
margin-right: -100%;
|
||||
backface-visibility: hidden;
|
||||
@include transition($carousel-transition);
|
||||
}
|
||||
|
||||
.carousel-item.active,
|
||||
.carousel-item-next,
|
||||
.carousel-item-prev {
|
||||
display: block;
|
||||
}
|
||||
|
||||
.carousel-item-next:not(.carousel-item-left),
|
||||
.active.carousel-item-right {
|
||||
transform: translateX(100%);
|
||||
}
|
||||
|
||||
.carousel-item-prev:not(.carousel-item-right),
|
||||
.active.carousel-item-left {
|
||||
transform: translateX(-100%);
|
||||
}
|
||||
|
||||
|
||||
//
|
||||
// Alternate transitions
|
||||
//
|
||||
|
||||
.carousel-fade {
|
||||
.carousel-item {
|
||||
opacity: 0;
|
||||
transition-property: opacity;
|
||||
transform: none;
|
||||
}
|
||||
|
||||
.carousel-item.active,
|
||||
.carousel-item-next.carousel-item-left,
|
||||
.carousel-item-prev.carousel-item-right {
|
||||
z-index: 1;
|
||||
opacity: 1;
|
||||
}
|
||||
|
||||
.active.carousel-item-left,
|
||||
.active.carousel-item-right {
|
||||
z-index: 0;
|
||||
opacity: 0;
|
||||
@include transition(0s $carousel-transition-duration opacity);
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
//
|
||||
// Left/right controls for nav
|
||||
//
|
||||
|
||||
.carousel-control-prev,
|
||||
.carousel-control-next {
|
||||
position: absolute;
|
||||
top: 0;
|
||||
bottom: 0;
|
||||
z-index: 1;
|
||||
// Use flex for alignment (1-3)
|
||||
display: flex; // 1. allow flex styles
|
||||
align-items: center; // 2. vertically center contents
|
||||
justify-content: center; // 3. horizontally center contents
|
||||
width: $carousel-control-width;
|
||||
color: $carousel-control-color;
|
||||
text-align: center;
|
||||
opacity: $carousel-control-opacity;
|
||||
@include transition($carousel-control-transition);
|
||||
|
||||
// Hover/focus state
|
||||
@include hover-focus {
|
||||
color: $carousel-control-color;
|
||||
text-decoration: none;
|
||||
outline: 0;
|
||||
opacity: $carousel-control-hover-opacity;
|
||||
}
|
||||
}
|
||||
.carousel-control-prev {
|
||||
left: 0;
|
||||
@if $enable-gradients {
|
||||
background: linear-gradient(90deg, rgba($black, .25), rgba($black, .001));
|
||||
}
|
||||
}
|
||||
.carousel-control-next {
|
||||
right: 0;
|
||||
@if $enable-gradients {
|
||||
background: linear-gradient(270deg, rgba($black, .25), rgba($black, .001));
|
||||
}
|
||||
}
|
||||
|
||||
// Icons for within
|
||||
.carousel-control-prev-icon,
|
||||
.carousel-control-next-icon {
|
||||
display: inline-block;
|
||||
width: $carousel-control-icon-width;
|
||||
height: $carousel-control-icon-width;
|
||||
background: no-repeat 50% / 100% 100%;
|
||||
}
|
||||
.carousel-control-prev-icon {
|
||||
background-image: $carousel-control-prev-icon-bg;
|
||||
}
|
||||
.carousel-control-next-icon {
|
||||
background-image: $carousel-control-next-icon-bg;
|
||||
}
|
||||
|
||||
|
||||
// Optional indicator pips
|
||||
//
|
||||
// Add an ordered list with the following class and add a list item for each
|
||||
// slide your carousel holds.
|
||||
|
||||
.carousel-indicators {
|
||||
position: absolute;
|
||||
right: 0;
|
||||
bottom: 0;
|
||||
left: 0;
|
||||
z-index: 15;
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
padding-left: 0; // override <ol> default
|
||||
// Use the .carousel-control's width as margin so we don't overlay those
|
||||
margin-right: $carousel-control-width;
|
||||
margin-left: $carousel-control-width;
|
||||
list-style: none;
|
||||
|
||||
li {
|
||||
box-sizing: content-box;
|
||||
flex: 0 1 auto;
|
||||
width: $carousel-indicator-width;
|
||||
height: $carousel-indicator-height;
|
||||
margin-right: $carousel-indicator-spacer;
|
||||
margin-left: $carousel-indicator-spacer;
|
||||
text-indent: -999px;
|
||||
cursor: pointer;
|
||||
background-color: $carousel-indicator-active-bg;
|
||||
background-clip: padding-box;
|
||||
// Use transparent borders to increase the hit area by 10px on top and bottom.
|
||||
border-top: $carousel-indicator-hit-area-height solid transparent;
|
||||
border-bottom: $carousel-indicator-hit-area-height solid transparent;
|
||||
opacity: .5;
|
||||
@include transition($carousel-indicator-transition);
|
||||
}
|
||||
|
||||
.active {
|
||||
opacity: 1;
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
// Optional captions
|
||||
//
|
||||
//
|
||||
|
||||
.carousel-caption {
|
||||
position: absolute;
|
||||
right: (100% - $carousel-caption-width) / 2;
|
||||
bottom: 20px;
|
||||
left: (100% - $carousel-caption-width) / 2;
|
||||
z-index: 10;
|
||||
padding-top: 20px;
|
||||
padding-bottom: 20px;
|
||||
color: $carousel-caption-color;
|
||||
text-align: center;
|
||||
}
|
||||
41
public/vendor/dashboard/src/scss/bootstrap/_close.scss
vendored
Executable file
41
public/vendor/dashboard/src/scss/bootstrap/_close.scss
vendored
Executable file
@@ -0,0 +1,41 @@
|
||||
.close {
|
||||
float: right;
|
||||
@include font-size($close-font-size);
|
||||
font-weight: $close-font-weight;
|
||||
line-height: 1;
|
||||
color: $close-color;
|
||||
text-shadow: $close-text-shadow;
|
||||
opacity: .5;
|
||||
|
||||
// Override <a>'s hover style
|
||||
@include hover {
|
||||
color: $close-color;
|
||||
text-decoration: none;
|
||||
}
|
||||
|
||||
&:not(:disabled):not(.disabled) {
|
||||
@include hover-focus {
|
||||
opacity: .75;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
// Additional properties for button version
|
||||
// iOS requires the button element instead of an anchor tag.
|
||||
// If you want the anchor version, it requires `href="#"`.
|
||||
// See https://developer.mozilla.org/en-US/docs/Web/Events/click#Safari_Mobile
|
||||
|
||||
// stylelint-disable-next-line selector-no-qualifying-type
|
||||
button.close {
|
||||
padding: 0;
|
||||
background-color: transparent;
|
||||
border: 0;
|
||||
appearance: none;
|
||||
}
|
||||
|
||||
// Future-proof disabling of clicks on `<a>` elements
|
||||
|
||||
// stylelint-disable-next-line selector-no-qualifying-type
|
||||
a.close.disabled {
|
||||
pointer-events: none;
|
||||
}
|
||||
48
public/vendor/dashboard/src/scss/bootstrap/_code.scss
vendored
Executable file
48
public/vendor/dashboard/src/scss/bootstrap/_code.scss
vendored
Executable file
@@ -0,0 +1,48 @@
|
||||
// Inline code
|
||||
code {
|
||||
@include font-size($code-font-size);
|
||||
color: $code-color;
|
||||
word-break: break-word;
|
||||
|
||||
// Streamline the style when inside anchors to avoid broken underline and more
|
||||
a > & {
|
||||
color: inherit;
|
||||
}
|
||||
}
|
||||
|
||||
// User input typically entered via keyboard
|
||||
kbd {
|
||||
padding: $kbd-padding-y $kbd-padding-x;
|
||||
@include font-size($kbd-font-size);
|
||||
color: $kbd-color;
|
||||
background-color: $kbd-bg;
|
||||
@include border-radius($border-radius-sm);
|
||||
@include box-shadow($kbd-box-shadow);
|
||||
|
||||
kbd {
|
||||
padding: 0;
|
||||
@include font-size(100%);
|
||||
font-weight: $nested-kbd-font-weight;
|
||||
@include box-shadow(none);
|
||||
}
|
||||
}
|
||||
|
||||
// Blocks of code
|
||||
pre {
|
||||
display: block;
|
||||
@include font-size($code-font-size);
|
||||
color: $pre-color;
|
||||
|
||||
// Account for some code outputs that place code tags in pre tags
|
||||
code {
|
||||
@include font-size(inherit);
|
||||
color: inherit;
|
||||
word-break: normal;
|
||||
}
|
||||
}
|
||||
|
||||
// Enable scrollable blocks of code
|
||||
.pre-scrollable {
|
||||
max-height: $pre-scrollable-max-height;
|
||||
overflow-y: scroll;
|
||||
}
|
||||
Some files were not shown because too many files have changed in this diff Show More
Reference in New Issue
Block a user