BISK2023-21-develop-the-frontend-for-the-dashboard #6
Merged
barhen
merged 2 commits from BISK2023-21-develop-the-frontend-for-the-dashboard into dev 2 years ago
94 changed files with 33559 additions and 13 deletions
@ -0,0 +1,11 @@ |
|||||
|
<footer class="content-footer footer bg-footer-theme"> |
||||
|
<div class="container-xxl d-flex flex-wrap justify-content-between py-2 flex-md-row flex-column"> |
||||
|
<div class="mb-2 mb-md-0"> |
||||
|
Biskilog © @DateTime.Now.Year |
||||
|
|
||||
|
</div> |
||||
|
<!-- |
||||
|
TODO add floating bar to either contain quick line or do something else |
||||
|
--> |
||||
|
</div> |
||||
|
</footer> |
||||
@ -0,0 +1,98 @@ |
|||||
|
<!-- Navbar --> |
||||
|
|
||||
|
<nav class="layout-navbar container-xxl navbar navbar-expand-xl navbar-detached align-items-center bg-navbar-theme" |
||||
|
id="layout-navbar"> |
||||
|
<div class="layout-menu-toggle navbar-nav align-items-xl-center me-3 me-xl-0 d-xl-none"> |
||||
|
<a class="nav-item nav-link px-0 me-xl-4" href="javascript:void(0)"> |
||||
|
<i class="bx bx-menu bx-sm"></i> |
||||
|
</a> |
||||
|
</div> |
||||
|
|
||||
|
<div class="navbar-nav-right d-flex align-items-center" id="navbar-collapse"> |
||||
|
<!-- Search --> |
||||
|
<div class="navbar-nav align-items-center"> |
||||
|
<div class="nav-item d-flex align-items-center"> |
||||
|
<i class="bx bx-search fs-4 lh-0"></i> |
||||
|
<input type="text" |
||||
|
class="form-control border-0 shadow-none" |
||||
|
placeholder="Search..." |
||||
|
aria-label="Search..." /> |
||||
|
</div> |
||||
|
</div> |
||||
|
<!-- /Search --> |
||||
|
|
||||
|
<ul class="navbar-nav flex-row align-items-center ms-auto"> |
||||
|
<!-- Place this tag where you want the button to render. --> |
||||
|
<li class="nav-item lh-1 me-3"> |
||||
|
<a class="github-button" |
||||
|
href="https://github.com/themeselection/sneat-html-admin-template-free" |
||||
|
data-icon="octicon-star" |
||||
|
data-size="large" |
||||
|
data-show-count="true" |
||||
|
aria-label="Star themeselection/sneat-html-admin-template-free on GitHub">Star</a> |
||||
|
</li> |
||||
|
|
||||
|
<!-- User --> |
||||
|
<li class="nav-item navbar-dropdown dropdown-user dropdown"> |
||||
|
<a class="nav-link dropdown-toggle hide-arrow" href="javascript:void(0);" data-bs-toggle="dropdown"> |
||||
|
<div class="avatar avatar-online"> |
||||
|
<img src="../assets/img/avatars/1.png" alt class="w-px-40 h-auto rounded-circle" /> |
||||
|
</div> |
||||
|
</a> |
||||
|
<ul class="dropdown-menu dropdown-menu-end"> |
||||
|
<li> |
||||
|
<a class="dropdown-item" href="#"> |
||||
|
<div class="d-flex"> |
||||
|
<div class="flex-shrink-0 me-3"> |
||||
|
<div class="avatar avatar-online"> |
||||
|
<img src="../assets/img/avatars/1.png" alt class="w-px-40 h-auto rounded-circle" /> |
||||
|
</div> |
||||
|
</div> |
||||
|
<div class="flex-grow-1"> |
||||
|
<span class="fw-semibold d-block">John Doe</span> |
||||
|
<small class="text-muted">Admin</small> |
||||
|
</div> |
||||
|
</div> |
||||
|
</a> |
||||
|
</li> |
||||
|
<li> |
||||
|
<div class="dropdown-divider"></div> |
||||
|
</li> |
||||
|
<li> |
||||
|
<a class="dropdown-item" href="#"> |
||||
|
<i class="bx bx-user me-2"></i> |
||||
|
<span class="align-middle">My Profile</span> |
||||
|
</a> |
||||
|
</li> |
||||
|
<li> |
||||
|
<a class="dropdown-item" href="#"> |
||||
|
<i class="bx bx-cog me-2"></i> |
||||
|
<span class="align-middle">Settings</span> |
||||
|
</a> |
||||
|
</li> |
||||
|
<li> |
||||
|
<a class="dropdown-item" href="#"> |
||||
|
<span class="d-flex align-items-center align-middle"> |
||||
|
<i class="flex-shrink-0 bx bx-credit-card me-2"></i> |
||||
|
<span class="flex-grow-1 align-middle">Billing</span> |
||||
|
<span class="flex-shrink-0 badge badge-center rounded-pill bg-danger w-px-20 h-px-20">4</span> |
||||
|
</span> |
||||
|
</a> |
||||
|
</li> |
||||
|
<li> |
||||
|
<div class="dropdown-divider"></div> |
||||
|
</li> |
||||
|
<li> |
||||
|
<a class="dropdown-item" href="auth-login-basic.html"> |
||||
|
<i class="bx bx-power-off me-2"></i> |
||||
|
<span class="align-middle">Log Out</span> |
||||
|
</a> |
||||
|
</li> |
||||
|
</ul> |
||||
|
</li> |
||||
|
<!--/ User --> |
||||
|
</ul> |
||||
|
</div> |
||||
|
</nav> |
||||
|
|
||||
|
<!-- / Navbar --> |
||||
@ -0,0 +1,29 @@ |
|||||
|
@using Biskilog_Accounting.Client.Models; |
||||
|
@if (Item.Children.Count == 0) |
||||
|
{ |
||||
|
<li class="menu-item @(Item.Id == ActiveId ? "active":"")" @onclick="(() => ItemClick(Item.Id))"> |
||||
|
<a href="@Item.Link" class="menu-link"> |
||||
|
<i class="menu-icon tf-icons bx @Item.Icon"></i> |
||||
|
<div data-i18n="Analytics">@Item.Title</div> |
||||
|
</a> |
||||
|
</li> |
||||
|
} |
||||
|
else |
||||
|
{ |
||||
|
<li class="menu-item @m_expand @(Item.Children.Any(a => a.Id == ActiveId) ? "active":"")" @onclick="Toggle"> |
||||
|
<a href="javascript:void(0);" class="menu-link menu-toggle"> |
||||
|
<i class="menu-icon tf-icons bx @Item.Icon"></i> |
||||
|
<div data-i18n="Form Elements">@Item.Title</div> |
||||
|
</a> |
||||
|
<ul class="menu-sub"> |
||||
|
@foreach (NavItem navItem in Item.Children) |
||||
|
{ |
||||
|
<li class="menu-item @(navItem.Id == ActiveId ? "active":"")" @onclick:stopPropagation="true" @onclick="(() => ItemClick(navItem.Id))"> |
||||
|
<a href="@navItem.Link" class="menu-link"> |
||||
|
<div data-i18n="Basic Inputs">@navItem.Title</div> |
||||
|
</a> |
||||
|
</li> |
||||
|
} |
||||
|
</ul> |
||||
|
</li> |
||||
|
} |
||||
@ -0,0 +1,45 @@ |
|||||
|
using Biskilog_Accounting.Client.Models; |
||||
|
using Microsoft.AspNetCore.Components; |
||||
|
using System.Linq; |
||||
|
|
||||
|
namespace Biskilog_Accounting.Client.Elements |
||||
|
{ |
||||
|
public partial class MenuItem |
||||
|
{ |
||||
|
[Parameter] |
||||
|
public NavItem Item { get; set; } |
||||
|
[Parameter] |
||||
|
public double ActiveId { get; set; } |
||||
|
[Parameter] |
||||
|
public EventCallback<double> ActiveChanged { get; set; } |
||||
|
private string m_expand { get; set; } = string.Empty; |
||||
|
|
||||
|
protected override void OnParametersSet() |
||||
|
{ |
||||
|
//Collapse expanded parents if none of its child is active
|
||||
|
if (!Item.Children.Any(i => i.Id == ActiveId)) |
||||
|
{ |
||||
|
m_expand = string.Empty; |
||||
|
} |
||||
|
base.OnParametersSet(); |
||||
|
} |
||||
|
private void Toggle() |
||||
|
{ |
||||
|
if (String.IsNullOrEmpty(m_expand)) |
||||
|
{ |
||||
|
m_expand = "menu-item-animating open"; |
||||
|
} |
||||
|
else |
||||
|
{ |
||||
|
m_expand = ""; |
||||
|
} |
||||
|
} |
||||
|
|
||||
|
private void ItemClick(double a_id) |
||||
|
{ |
||||
|
ActiveId = a_id; |
||||
|
ActiveChanged.InvokeAsync(a_id); |
||||
|
} |
||||
|
|
||||
|
} |
||||
|
} |
||||
@ -0,0 +1,40 @@ |
|||||
|
@using Biskilog_Accounting.Client.Models; |
||||
|
<aside id="layout-menu" class="layout-menu menu-vertical menu bg-menu-theme"> |
||||
|
<div class="app-brand"> |
||||
|
<a href="index.html" class="app-brand-link"> |
||||
|
<span class="app-brand-logo"> |
||||
|
<img src="../icon-512.png" alt="BISKILOG Logo" style="height:60px;"> |
||||
|
</span> |
||||
|
<span class="app-brand-text menu-text fw-bolder ms-2">BISKILOG</span> |
||||
|
</a> |
||||
|
|
||||
|
<a href="javascript:void(0);" class="layout-menu-toggle menu-link text-large ms-auto d-block d-xl-none"> |
||||
|
<i class="bx bx-chevron-left bx-sm align-middle"></i> |
||||
|
</a> |
||||
|
</div> |
||||
|
|
||||
|
<div class="menu-inner-shadow"></div> |
||||
|
|
||||
|
<ul class="menu-inner py-1"> |
||||
|
@foreach (NavItem item in Menu.MenuList()) |
||||
|
{ |
||||
|
<MenuItem Item=@item ActiveId="m_activeId" ActiveChanged="HandleMenuClick" /> |
||||
|
} |
||||
|
<!-- Warehouse |
||||
|
<li class="menu-header small text-uppercase"><span class="menu-header-text">Warehouse Operations</span></li> |
||||
|
--> |
||||
|
|
||||
|
</ul> |
||||
|
</aside> |
||||
|
|
||||
|
|
||||
|
@code { |
||||
|
private double m_activeId = 1; |
||||
|
|
||||
|
|
||||
|
private void HandleMenuClick(double a_selectedId) |
||||
|
{ |
||||
|
m_activeId = a_selectedId; |
||||
|
StateHasChanged(); |
||||
|
} |
||||
|
} |
||||
@ -0,0 +1,28 @@ |
|||||
|
@inherits LayoutComponentBase |
||||
|
@using Biskilog_Accounting.Client.Elements |
||||
|
<!-- Layout wrapper --> |
||||
|
<div class="layout-wrapper layout-content-navbar"> |
||||
|
<div class="layout-container"> |
||||
|
<!-- Menu --> |
||||
|
<Sidebar /> |
||||
|
<!-- / Menu --> |
||||
|
<!-- Body Layout container --> |
||||
|
<div class="layout-page"> |
||||
|
<Headbar /> |
||||
|
<!-- Content wrapper --> |
||||
|
<div class="content-wrapper"> |
||||
|
|
||||
|
<!-- Content --> |
||||
|
@Body |
||||
|
<!-- / Content --> |
||||
|
<!-- Footer --> |
||||
|
|
||||
|
<Footer /> |
||||
|
<!-- / Footer --> |
||||
|
</div> |
||||
|
<!-- Content wrapper --> |
||||
|
</div> |
||||
|
<!-- / Layout page --> |
||||
|
</div> |
||||
|
</div> |
||||
|
<!-- / Layout wrapper --> |
||||
@ -1,5 +0,0 @@ |
|||||
@inherits LayoutComponentBase |
|
||||
|
|
||||
<main> |
|
||||
@Body |
|
||||
</main> |
|
||||
@ -0,0 +1,111 @@ |
|||||
|
namespace Biskilog_Accounting.Client.Models |
||||
|
{ |
||||
|
/// <summary>
|
||||
|
/// Structure of the sidebar navigation menu items
|
||||
|
/// </summary>
|
||||
|
public class NavItem |
||||
|
{ |
||||
|
/// <summary>
|
||||
|
/// The unique id of the menu item
|
||||
|
/// </summary>
|
||||
|
public double Id { get; set; } |
||||
|
/// <summary>
|
||||
|
/// The title of the menu item to display
|
||||
|
/// </summary>
|
||||
|
public string Title { get; set; } = string.Empty; |
||||
|
/// <summary>
|
||||
|
/// The description of the menu item or description of the content of the page
|
||||
|
/// </summary>
|
||||
|
public string Description { get; set; } = string.Empty; |
||||
|
/// <summary>
|
||||
|
/// The link to open the specified page tied to the menu item
|
||||
|
/// </summary>
|
||||
|
public string Link { get; set; } = string.Empty; |
||||
|
/// <summary>
|
||||
|
/// The icon of the menu item
|
||||
|
/// </summary>
|
||||
|
public string Icon { get; set; } = string.Empty; |
||||
|
/// <summary>
|
||||
|
/// Children or sub menu item
|
||||
|
/// </summary>
|
||||
|
public List<NavItem> Children { get; set; } = new List<NavItem>(); |
||||
|
} |
||||
|
/// <summary>
|
||||
|
/// Contains the list of menu Items
|
||||
|
/// </summary>
|
||||
|
public static class Menu |
||||
|
{ |
||||
|
public static IEnumerable<NavItem> MenuList() |
||||
|
{ |
||||
|
var menuItems = new List<NavItem>{ |
||||
|
new NavItem() |
||||
|
{ |
||||
|
Id = 1, |
||||
|
Description = "Analytics page", |
||||
|
Icon = "bx-home-circle", |
||||
|
Link = "", |
||||
|
Title = "Dashboard" |
||||
|
}, |
||||
|
new NavItem() |
||||
|
{ |
||||
|
Id = 2, |
||||
|
Description = "Customers", |
||||
|
Icon = "bx-users", |
||||
|
Link = "customers", |
||||
|
Title = "Customers" |
||||
|
}, |
||||
|
new NavItem() |
||||
|
{ |
||||
|
Id = 3, |
||||
|
Description = "Employees", |
||||
|
Icon = "bx-users", |
||||
|
Link = "employees", |
||||
|
Title = "Employees" |
||||
|
}, |
||||
|
new NavItem() |
||||
|
{ |
||||
|
Id = 4, |
||||
|
Description = "Products", |
||||
|
Icon = "bx-box", |
||||
|
Link = "", |
||||
|
Title = "Products", |
||||
|
Children = new List<NavItem> |
||||
|
{ |
||||
|
new NavItem |
||||
|
{ |
||||
|
Id = 4.1, |
||||
|
Description = "Inventory", |
||||
|
Title = "Inventory" |
||||
|
}, |
||||
|
new NavItem |
||||
|
{ |
||||
|
Id = 4.2, |
||||
|
Description = "Inventory", |
||||
|
Title = "Bulk Price Changes" |
||||
|
}, |
||||
|
new NavItem |
||||
|
{ |
||||
|
Id = 4.3, |
||||
|
Description = "Inventory", |
||||
|
Title = "Products Statistics", |
||||
|
Icon = "bx-detail" |
||||
|
} |
||||
|
} |
||||
|
}, |
||||
|
}; |
||||
|
|
||||
|
var uniqueIds = new HashSet<double>(); |
||||
|
|
||||
|
//Validates list to check if there are no duplicate Ids
|
||||
|
foreach (var menuItem in menuItems) |
||||
|
{ |
||||
|
if (!uniqueIds.Add(menuItem.Id)) |
||||
|
{ |
||||
|
throw new Exception($"Duplicate Id found: {menuItem.Id}"); |
||||
|
} |
||||
|
} |
||||
|
|
||||
|
return menuItems; |
||||
|
} |
||||
|
} |
||||
|
} |
||||
@ -0,0 +1,510 @@ |
|||||
|
@page "/" |
||||
|
|
||||
|
<div class="container-xxl flex-grow-1 container-p-y"> |
||||
|
<div class="row"> |
||||
|
<div class="col-lg-8 mb-4 order-0"> |
||||
|
<div class="card"> |
||||
|
<div class="d-flex align-items-end row"> |
||||
|
<div class="col-sm-7"> |
||||
|
<div class="card-body"> |
||||
|
<h5 class="card-title text-primary">Congratulations John! 🎉</h5> |
||||
|
<p class="mb-4"> |
||||
|
You have done <span class="fw-bold">72%</span> more sales today. Check your new badge in |
||||
|
your profile. |
||||
|
</p> |
||||
|
|
||||
|
<a href="javascript:;" class="btn btn-sm btn-outline-primary">View Badges</a> |
||||
|
</div> |
||||
|
</div> |
||||
|
<div class="col-sm-5 text-center text-sm-left"> |
||||
|
<div class="card-body pb-0 px-0 px-md-4"> |
||||
|
<img src="../assets/img/illustrations/man-with-laptop-light.png" |
||||
|
height="140" |
||||
|
alt="View Badge User" |
||||
|
data-app-dark-img="illustrations/man-with-laptop-dark.png" |
||||
|
data-app-light-img="illustrations/man-with-laptop-light.png" /> |
||||
|
</div> |
||||
|
</div> |
||||
|
</div> |
||||
|
</div> |
||||
|
</div> |
||||
|
<div class="col-lg-4 col-md-4 order-1"> |
||||
|
<div class="row"> |
||||
|
<div class="col-lg-6 col-md-12 col-6 mb-4"> |
||||
|
<div class="card"> |
||||
|
<div class="card-body"> |
||||
|
<div class="card-title d-flex align-items-start justify-content-between"> |
||||
|
<div class="avatar flex-shrink-0"> |
||||
|
<img src="../assets/img/icons/unicons/chart-success.png" |
||||
|
alt="chart success" |
||||
|
class="rounded" /> |
||||
|
</div> |
||||
|
<div class="dropdown"> |
||||
|
<button class="btn p-0" |
||||
|
type="button" |
||||
|
id="cardOpt3" |
||||
|
data-bs-toggle="dropdown" |
||||
|
aria-haspopup="true" |
||||
|
aria-expanded="false"> |
||||
|
<i class="bx bx-dots-vertical-rounded"></i> |
||||
|
</button> |
||||
|
<div class="dropdown-menu dropdown-menu-end" aria-labelledby="cardOpt3"> |
||||
|
<a class="dropdown-item" href="javascript:void(0);">View More</a> |
||||
|
<a class="dropdown-item" href="javascript:void(0);">Delete</a> |
||||
|
</div> |
||||
|
</div> |
||||
|
</div> |
||||
|
<span class="fw-semibold d-block mb-1">Profit</span> |
||||
|
<h3 class="card-title mb-2">$12,628</h3> |
||||
|
<small class="text-success fw-semibold"><i class="bx bx-up-arrow-alt"></i> +72.80%</small> |
||||
|
</div> |
||||
|
</div> |
||||
|
</div> |
||||
|
<div class="col-lg-6 col-md-12 col-6 mb-4"> |
||||
|
<div class="card"> |
||||
|
<div class="card-body"> |
||||
|
<div class="card-title d-flex align-items-start justify-content-between"> |
||||
|
<div class="avatar flex-shrink-0"> |
||||
|
<img src="../assets/img/icons/unicons/wallet-info.png" |
||||
|
alt="Credit Card" |
||||
|
class="rounded" /> |
||||
|
</div> |
||||
|
<div class="dropdown"> |
||||
|
<button class="btn p-0" |
||||
|
type="button" |
||||
|
id="cardOpt6" |
||||
|
data-bs-toggle="dropdown" |
||||
|
aria-haspopup="true" |
||||
|
aria-expanded="false"> |
||||
|
<i class="bx bx-dots-vertical-rounded"></i> |
||||
|
</button> |
||||
|
<div class="dropdown-menu dropdown-menu-end" aria-labelledby="cardOpt6"> |
||||
|
<a class="dropdown-item" href="javascript:void(0);">View More</a> |
||||
|
<a class="dropdown-item" href="javascript:void(0);">Delete</a> |
||||
|
</div> |
||||
|
</div> |
||||
|
</div> |
||||
|
<span>Sales</span> |
||||
|
<h3 class="card-title text-nowrap mb-1">$4,679</h3> |
||||
|
<small class="text-success fw-semibold"><i class="bx bx-up-arrow-alt"></i> +28.42%</small> |
||||
|
</div> |
||||
|
</div> |
||||
|
</div> |
||||
|
</div> |
||||
|
</div> |
||||
|
<!-- Total Revenue --> |
||||
|
<div class="col-12 col-lg-8 order-2 order-md-3 order-lg-2 mb-4"> |
||||
|
<div class="card"> |
||||
|
<div class="row row-bordered g-0"> |
||||
|
<div class="col-md-8"> |
||||
|
<h5 class="card-header m-0 me-2 pb-3">Total Revenue</h5> |
||||
|
<div id="totalRevenueChart" class="px-2"></div> |
||||
|
</div> |
||||
|
<div class="col-md-4"> |
||||
|
<div class="card-body"> |
||||
|
<div class="text-center"> |
||||
|
<div class="dropdown"> |
||||
|
<button class="btn btn-sm btn-outline-primary dropdown-toggle" |
||||
|
type="button" |
||||
|
id="growthReportId" |
||||
|
data-bs-toggle="dropdown" |
||||
|
aria-haspopup="true" |
||||
|
aria-expanded="false"> |
||||
|
2022 |
||||
|
</button> |
||||
|
<div class="dropdown-menu dropdown-menu-end" aria-labelledby="growthReportId"> |
||||
|
<a class="dropdown-item" href="javascript:void(0);">2021</a> |
||||
|
<a class="dropdown-item" href="javascript:void(0);">2020</a> |
||||
|
<a class="dropdown-item" href="javascript:void(0);">2019</a> |
||||
|
</div> |
||||
|
</div> |
||||
|
</div> |
||||
|
</div> |
||||
|
<div id="growthChart"></div> |
||||
|
<div class="text-center fw-semibold pt-3 mb-2">62% Company Growth</div> |
||||
|
|
||||
|
<div class="d-flex px-xxl-4 px-lg-2 p-4 gap-xxl-3 gap-lg-1 gap-3 justify-content-between"> |
||||
|
<div class="d-flex"> |
||||
|
<div class="me-2"> |
||||
|
<span class="badge bg-label-primary p-2"><i class="bx bx-dollar text-primary"></i></span> |
||||
|
</div> |
||||
|
<div class="d-flex flex-column"> |
||||
|
<small>2022</small> |
||||
|
<h6 class="mb-0">$32.5k</h6> |
||||
|
</div> |
||||
|
</div> |
||||
|
<div class="d-flex"> |
||||
|
<div class="me-2"> |
||||
|
<span class="badge bg-label-info p-2"><i class="bx bx-wallet text-info"></i></span> |
||||
|
</div> |
||||
|
<div class="d-flex flex-column"> |
||||
|
<small>2021</small> |
||||
|
<h6 class="mb-0">$41.2k</h6> |
||||
|
</div> |
||||
|
</div> |
||||
|
</div> |
||||
|
</div> |
||||
|
</div> |
||||
|
</div> |
||||
|
</div> |
||||
|
<!--/ Total Revenue --> |
||||
|
<div class="col-12 col-md-8 col-lg-4 order-3 order-md-2"> |
||||
|
<div class="row"> |
||||
|
<div class="col-6 mb-4"> |
||||
|
<div class="card"> |
||||
|
<div class="card-body"> |
||||
|
<div class="card-title d-flex align-items-start justify-content-between"> |
||||
|
<div class="avatar flex-shrink-0"> |
||||
|
<img src="../assets/img/icons/unicons/paypal.png" alt="Credit Card" class="rounded" /> |
||||
|
</div> |
||||
|
<div class="dropdown"> |
||||
|
<button class="btn p-0" |
||||
|
type="button" |
||||
|
id="cardOpt4" |
||||
|
data-bs-toggle="dropdown" |
||||
|
aria-haspopup="true" |
||||
|
aria-expanded="false"> |
||||
|
<i class="bx bx-dots-vertical-rounded"></i> |
||||
|
</button> |
||||
|
<div class="dropdown-menu dropdown-menu-end" aria-labelledby="cardOpt4"> |
||||
|
<a class="dropdown-item" href="javascript:void(0);">View More</a> |
||||
|
<a class="dropdown-item" href="javascript:void(0);">Delete</a> |
||||
|
</div> |
||||
|
</div> |
||||
|
</div> |
||||
|
<span class="d-block mb-1">Payments</span> |
||||
|
<h3 class="card-title text-nowrap mb-2">$2,456</h3> |
||||
|
<small class="text-danger fw-semibold"><i class="bx bx-down-arrow-alt"></i> -14.82%</small> |
||||
|
</div> |
||||
|
</div> |
||||
|
</div> |
||||
|
<div class="col-6 mb-4"> |
||||
|
<div class="card"> |
||||
|
<div class="card-body"> |
||||
|
<div class="card-title d-flex align-items-start justify-content-between"> |
||||
|
<div class="avatar flex-shrink-0"> |
||||
|
<img src="../assets/img/icons/unicons/cc-primary.png" alt="Credit Card" class="rounded" /> |
||||
|
</div> |
||||
|
<div class="dropdown"> |
||||
|
<button class="btn p-0" |
||||
|
type="button" |
||||
|
id="cardOpt1" |
||||
|
data-bs-toggle="dropdown" |
||||
|
aria-haspopup="true" |
||||
|
aria-expanded="false"> |
||||
|
<i class="bx bx-dots-vertical-rounded"></i> |
||||
|
</button> |
||||
|
<div class="dropdown-menu" aria-labelledby="cardOpt1"> |
||||
|
<a class="dropdown-item" href="javascript:void(0);">View More</a> |
||||
|
<a class="dropdown-item" href="javascript:void(0);">Delete</a> |
||||
|
</div> |
||||
|
</div> |
||||
|
</div> |
||||
|
<span class="fw-semibold d-block mb-1">Transactions</span> |
||||
|
<h3 class="card-title mb-2">$14,857</h3> |
||||
|
<small class="text-success fw-semibold"><i class="bx bx-up-arrow-alt"></i> +28.14%</small> |
||||
|
</div> |
||||
|
</div> |
||||
|
</div> |
||||
|
<!-- </div> |
||||
|
<div class="row"> --> |
||||
|
<div class="col-12 mb-4"> |
||||
|
<div class="card"> |
||||
|
<div class="card-body"> |
||||
|
<div class="d-flex justify-content-between flex-sm-row flex-column gap-3"> |
||||
|
<div class="d-flex flex-sm-column flex-row align-items-start justify-content-between"> |
||||
|
<div class="card-title"> |
||||
|
<h5 class="text-nowrap mb-2">Profile Report</h5> |
||||
|
<span class="badge bg-label-warning rounded-pill">Year 2021</span> |
||||
|
</div> |
||||
|
<div class="mt-sm-auto"> |
||||
|
<small class="text-success text-nowrap fw-semibold"><i class="bx bx-chevron-up"></i> 68.2%</small> |
||||
|
<h3 class="mb-0">$84,686k</h3> |
||||
|
</div> |
||||
|
</div> |
||||
|
<div id="profileReportChart"></div> |
||||
|
</div> |
||||
|
</div> |
||||
|
</div> |
||||
|
</div> |
||||
|
</div> |
||||
|
</div> |
||||
|
</div> |
||||
|
<div class="row"> |
||||
|
<!-- Order Statistics --> |
||||
|
<div class="col-md-6 col-lg-4 col-xl-4 order-0 mb-4"> |
||||
|
<div class="card h-100"> |
||||
|
<div class="card-header d-flex align-items-center justify-content-between pb-0"> |
||||
|
<div class="card-title mb-0"> |
||||
|
<h5 class="m-0 me-2">Order Statistics</h5> |
||||
|
<small class="text-muted">42.82k Total Sales</small> |
||||
|
</div> |
||||
|
<div class="dropdown"> |
||||
|
<button class="btn p-0" |
||||
|
type="button" |
||||
|
id="orederStatistics" |
||||
|
data-bs-toggle="dropdown" |
||||
|
aria-haspopup="true" |
||||
|
aria-expanded="false"> |
||||
|
<i class="bx bx-dots-vertical-rounded"></i> |
||||
|
</button> |
||||
|
<div class="dropdown-menu dropdown-menu-end" aria-labelledby="orederStatistics"> |
||||
|
<a class="dropdown-item" href="javascript:void(0);">Select All</a> |
||||
|
<a class="dropdown-item" href="javascript:void(0);">Refresh</a> |
||||
|
<a class="dropdown-item" href="javascript:void(0);">Share</a> |
||||
|
</div> |
||||
|
</div> |
||||
|
</div> |
||||
|
<div class="card-body"> |
||||
|
<div class="d-flex justify-content-between align-items-center mb-3"> |
||||
|
<div class="d-flex flex-column align-items-center gap-1"> |
||||
|
<h2 class="mb-2">8,258</h2> |
||||
|
<span>Total Orders</span> |
||||
|
</div> |
||||
|
<div id="orderStatisticsChart"></div> |
||||
|
</div> |
||||
|
<ul class="p-0 m-0"> |
||||
|
<li class="d-flex mb-4 pb-1"> |
||||
|
<div class="avatar flex-shrink-0 me-3"> |
||||
|
<span class="avatar-initial rounded bg-label-primary"> |
||||
|
<i class="bx bx-mobile-alt"></i> |
||||
|
</span> |
||||
|
</div> |
||||
|
<div class="d-flex w-100 flex-wrap align-items-center justify-content-between gap-2"> |
||||
|
<div class="me-2"> |
||||
|
<h6 class="mb-0">Electronic</h6> |
||||
|
<small class="text-muted">Mobile, Earbuds, TV</small> |
||||
|
</div> |
||||
|
<div class="user-progress"> |
||||
|
<small class="fw-semibold">82.5k</small> |
||||
|
</div> |
||||
|
</div> |
||||
|
</li> |
||||
|
<li class="d-flex mb-4 pb-1"> |
||||
|
<div class="avatar flex-shrink-0 me-3"> |
||||
|
<span class="avatar-initial rounded bg-label-success"><i class="bx bx-closet"></i></span> |
||||
|
</div> |
||||
|
<div class="d-flex w-100 flex-wrap align-items-center justify-content-between gap-2"> |
||||
|
<div class="me-2"> |
||||
|
<h6 class="mb-0">Fashion</h6> |
||||
|
<small class="text-muted">T-shirt, Jeans, Shoes</small> |
||||
|
</div> |
||||
|
<div class="user-progress"> |
||||
|
<small class="fw-semibold">23.8k</small> |
||||
|
</div> |
||||
|
</div> |
||||
|
</li> |
||||
|
<li class="d-flex mb-4 pb-1"> |
||||
|
<div class="avatar flex-shrink-0 me-3"> |
||||
|
<span class="avatar-initial rounded bg-label-info"><i class="bx bx-home-alt"></i></span> |
||||
|
</div> |
||||
|
<div class="d-flex w-100 flex-wrap align-items-center justify-content-between gap-2"> |
||||
|
<div class="me-2"> |
||||
|
<h6 class="mb-0">Decor</h6> |
||||
|
<small class="text-muted">Fine Art, Dining</small> |
||||
|
</div> |
||||
|
<div class="user-progress"> |
||||
|
<small class="fw-semibold">849k</small> |
||||
|
</div> |
||||
|
</div> |
||||
|
</li> |
||||
|
<li class="d-flex"> |
||||
|
<div class="avatar flex-shrink-0 me-3"> |
||||
|
<span class="avatar-initial rounded bg-label-secondary"> |
||||
|
<i class="bx bx-football"></i> |
||||
|
</span> |
||||
|
</div> |
||||
|
<div class="d-flex w-100 flex-wrap align-items-center justify-content-between gap-2"> |
||||
|
<div class="me-2"> |
||||
|
<h6 class="mb-0">Sports</h6> |
||||
|
<small class="text-muted">Football, Cricket Kit</small> |
||||
|
</div> |
||||
|
<div class="user-progress"> |
||||
|
<small class="fw-semibold">99</small> |
||||
|
</div> |
||||
|
</div> |
||||
|
</li> |
||||
|
</ul> |
||||
|
</div> |
||||
|
</div> |
||||
|
</div> |
||||
|
<!--/ Order Statistics --> |
||||
|
<!-- Expense Overview --> |
||||
|
<div class="col-md-6 col-lg-4 order-1 mb-4"> |
||||
|
<div class="card h-100"> |
||||
|
<div class="card-header"> |
||||
|
<ul class="nav nav-pills" role="tablist"> |
||||
|
<li class="nav-item"> |
||||
|
<button type="button" |
||||
|
class="nav-link active" |
||||
|
role="tab" |
||||
|
data-bs-toggle="tab" |
||||
|
data-bs-target="#navs-tabs-line-card-income" |
||||
|
aria-controls="navs-tabs-line-card-income" |
||||
|
aria-selected="true"> |
||||
|
Income |
||||
|
</button> |
||||
|
</li> |
||||
|
<li class="nav-item"> |
||||
|
<button type="button" class="nav-link" role="tab">Expenses</button> |
||||
|
</li> |
||||
|
<li class="nav-item"> |
||||
|
<button type="button" class="nav-link" role="tab">Profit</button> |
||||
|
</li> |
||||
|
</ul> |
||||
|
</div> |
||||
|
<div class="card-body px-0"> |
||||
|
<div class="tab-content p-0"> |
||||
|
<div class="tab-pane fade show active" id="navs-tabs-line-card-income" role="tabpanel"> |
||||
|
<div class="d-flex p-4 pt-3"> |
||||
|
<div class="avatar flex-shrink-0 me-3"> |
||||
|
<img src="../assets/img/icons/unicons/wallet.png" alt="User" /> |
||||
|
</div> |
||||
|
<div> |
||||
|
<small class="text-muted d-block">Total Balance</small> |
||||
|
<div class="d-flex align-items-center"> |
||||
|
<h6 class="mb-0 me-1">$459.10</h6> |
||||
|
<small class="text-success fw-semibold"> |
||||
|
<i class="bx bx-chevron-up"></i> |
||||
|
42.9% |
||||
|
</small> |
||||
|
</div> |
||||
|
</div> |
||||
|
</div> |
||||
|
<div id="incomeChart"></div> |
||||
|
<div class="d-flex justify-content-center pt-4 gap-2"> |
||||
|
<div class="flex-shrink-0"> |
||||
|
<div id="expensesOfWeek"></div> |
||||
|
</div> |
||||
|
<div> |
||||
|
<p class="mb-n1 mt-1">Expenses This Week</p> |
||||
|
<small class="text-muted">$39 less than last week</small> |
||||
|
</div> |
||||
|
</div> |
||||
|
</div> |
||||
|
</div> |
||||
|
</div> |
||||
|
</div> |
||||
|
</div> |
||||
|
<!--/ Expense Overview --> |
||||
|
<!-- Transactions --> |
||||
|
<div class="col-md-6 col-lg-4 order-2 mb-4"> |
||||
|
<div class="card h-100"> |
||||
|
<div class="card-header d-flex align-items-center justify-content-between"> |
||||
|
<h5 class="card-title m-0 me-2">Transactions</h5> |
||||
|
<div class="dropdown"> |
||||
|
<button class="btn p-0" |
||||
|
type="button" |
||||
|
id="transactionID" |
||||
|
data-bs-toggle="dropdown" |
||||
|
aria-haspopup="true" |
||||
|
aria-expanded="false"> |
||||
|
<i class="bx bx-dots-vertical-rounded"></i> |
||||
|
</button> |
||||
|
<div class="dropdown-menu dropdown-menu-end" aria-labelledby="transactionID"> |
||||
|
<a class="dropdown-item" href="javascript:void(0);">Last 28 Days</a> |
||||
|
<a class="dropdown-item" href="javascript:void(0);">Last Month</a> |
||||
|
<a class="dropdown-item" href="javascript:void(0);">Last Year</a> |
||||
|
</div> |
||||
|
</div> |
||||
|
</div> |
||||
|
<div class="card-body"> |
||||
|
<ul class="p-0 m-0"> |
||||
|
<li class="d-flex mb-4 pb-1"> |
||||
|
<div class="avatar flex-shrink-0 me-3"> |
||||
|
<img src="../assets/img/icons/unicons/paypal.png" alt="User" class="rounded" /> |
||||
|
</div> |
||||
|
<div class="d-flex w-100 flex-wrap align-items-center justify-content-between gap-2"> |
||||
|
<div class="me-2"> |
||||
|
<small class="text-muted d-block mb-1">Paypal</small> |
||||
|
<h6 class="mb-0">Send money</h6> |
||||
|
</div> |
||||
|
<div class="user-progress d-flex align-items-center gap-1"> |
||||
|
<h6 class="mb-0">+82.6</h6> |
||||
|
<span class="text-muted">USD</span> |
||||
|
</div> |
||||
|
</div> |
||||
|
</li> |
||||
|
<li class="d-flex mb-4 pb-1"> |
||||
|
<div class="avatar flex-shrink-0 me-3"> |
||||
|
<img src="../assets/img/icons/unicons/wallet.png" alt="User" class="rounded" /> |
||||
|
</div> |
||||
|
<div class="d-flex w-100 flex-wrap align-items-center justify-content-between gap-2"> |
||||
|
<div class="me-2"> |
||||
|
<small class="text-muted d-block mb-1">Wallet</small> |
||||
|
<h6 class="mb-0">Mac'D</h6> |
||||
|
</div> |
||||
|
<div class="user-progress d-flex align-items-center gap-1"> |
||||
|
<h6 class="mb-0">+270.69</h6> |
||||
|
<span class="text-muted">USD</span> |
||||
|
</div> |
||||
|
</div> |
||||
|
</li> |
||||
|
<li class="d-flex mb-4 pb-1"> |
||||
|
<div class="avatar flex-shrink-0 me-3"> |
||||
|
<img src="../assets/img/icons/unicons/chart.png" alt="User" class="rounded" /> |
||||
|
</div> |
||||
|
<div class="d-flex w-100 flex-wrap align-items-center justify-content-between gap-2"> |
||||
|
<div class="me-2"> |
||||
|
<small class="text-muted d-block mb-1">Transfer</small> |
||||
|
<h6 class="mb-0">Refund</h6> |
||||
|
</div> |
||||
|
<div class="user-progress d-flex align-items-center gap-1"> |
||||
|
<h6 class="mb-0">+637.91</h6> |
||||
|
<span class="text-muted">USD</span> |
||||
|
</div> |
||||
|
</div> |
||||
|
</li> |
||||
|
<li class="d-flex mb-4 pb-1"> |
||||
|
<div class="avatar flex-shrink-0 me-3"> |
||||
|
<img src="../assets/img/icons/unicons/cc-success.png" alt="User" class="rounded" /> |
||||
|
</div> |
||||
|
<div class="d-flex w-100 flex-wrap align-items-center justify-content-between gap-2"> |
||||
|
<div class="me-2"> |
||||
|
<small class="text-muted d-block mb-1">Credit Card</small> |
||||
|
<h6 class="mb-0">Ordered Food</h6> |
||||
|
</div> |
||||
|
<div class="user-progress d-flex align-items-center gap-1"> |
||||
|
<h6 class="mb-0">-838.71</h6> |
||||
|
<span class="text-muted">USD</span> |
||||
|
</div> |
||||
|
</div> |
||||
|
</li> |
||||
|
<li class="d-flex mb-4 pb-1"> |
||||
|
<div class="avatar flex-shrink-0 me-3"> |
||||
|
<img src="../assets/img/icons/unicons/wallet.png" alt="User" class="rounded" /> |
||||
|
</div> |
||||
|
<div class="d-flex w-100 flex-wrap align-items-center justify-content-between gap-2"> |
||||
|
<div class="me-2"> |
||||
|
<small class="text-muted d-block mb-1">Wallet</small> |
||||
|
<h6 class="mb-0">Starbucks</h6> |
||||
|
</div> |
||||
|
<div class="user-progress d-flex align-items-center gap-1"> |
||||
|
<h6 class="mb-0">+203.33</h6> |
||||
|
<span class="text-muted">USD</span> |
||||
|
</div> |
||||
|
</div> |
||||
|
</li> |
||||
|
<li class="d-flex"> |
||||
|
<div class="avatar flex-shrink-0 me-3"> |
||||
|
<img src="../assets/img/icons/unicons/cc-warning.png" alt="User" class="rounded" /> |
||||
|
</div> |
||||
|
<div class="d-flex w-100 flex-wrap align-items-center justify-content-between gap-2"> |
||||
|
<div class="me-2"> |
||||
|
<small class="text-muted d-block mb-1">Mastercard</small> |
||||
|
<h6 class="mb-0">Ordered Food</h6> |
||||
|
</div> |
||||
|
<div class="user-progress d-flex align-items-center gap-1"> |
||||
|
<h6 class="mb-0">-92.45</h6> |
||||
|
<span class="text-muted">USD</span> |
||||
|
</div> |
||||
|
</div> |
||||
|
</li> |
||||
|
</ul> |
||||
|
</div> |
||||
|
</div> |
||||
|
</div> |
||||
|
<!--/ Transactions --> |
||||
|
</div> |
||||
|
</div> |
||||
|
|
||||
@ -1,3 +0,0 @@ |
|||||
@page "/welcome" |
|
||||
|
|
||||
<h1>Hello, world!</h1> |
|
||||
|
After Width: | Height: | Size: 14 KiB |
|
After Width: | Height: | Size: 20 KiB |
|
After Width: | Height: | Size: 15 KiB |
|
After Width: | Height: | Size: 15 KiB |
|
After Width: | Height: | Size: 87 KiB |
|
After Width: | Height: | Size: 18 KiB |
|
After Width: | Height: | Size: 19 KiB |
|
After Width: | Height: | Size: 27 KiB |
|
After Width: | Height: | Size: 13 KiB |
|
After Width: | Height: | Size: 19 KiB |
|
After Width: | Height: | Size: 30 KiB |
|
After Width: | Height: | Size: 15 KiB |
|
After Width: | Height: | Size: 13 KiB |
|
After Width: | Height: | Size: 16 KiB |
|
After Width: | Height: | Size: 24 KiB |
|
After Width: | Height: | Size: 22 KiB |
|
After Width: | Height: | Size: 22 KiB |
|
After Width: | Height: | Size: 21 KiB |
|
After Width: | Height: | Size: 1.4 KiB |
|
After Width: | Height: | Size: 2.2 KiB |
|
After Width: | Height: | Size: 1.7 KiB |
|
After Width: | Height: | Size: 2.8 KiB |
|
After Width: | Height: | Size: 681 B |
|
After Width: | Height: | Size: 2.1 KiB |
|
After Width: | Height: | Size: 1.9 KiB |
|
After Width: | Height: | Size: 3.1 KiB |
|
After Width: | Height: | Size: 1.4 KiB |
|
After Width: | Height: | Size: 2.5 KiB |
|
After Width: | Height: | Size: 1.5 KiB |
|
After Width: | Height: | Size: 702 B |
|
After Width: | Height: | Size: 776 B |
|
After Width: | Height: | Size: 689 B |
|
After Width: | Height: | Size: 1.5 KiB |
|
After Width: | Height: | Size: 1.5 KiB |
|
After Width: | Height: | Size: 1.1 KiB |
|
After Width: | Height: | Size: 936 B |
|
After Width: | Height: | Size: 920 B |
|
After Width: | Height: | Size: 214 KiB |
|
After Width: | Height: | Size: 8.6 KiB |
|
After Width: | Height: | Size: 136 KiB |
|
After Width: | Height: | Size: 61 KiB |
|
After Width: | Height: | Size: 57 KiB |
|
After Width: | Height: | Size: 44 KiB |
|
After Width: | Height: | Size: 62 KiB |
@ -0,0 +1,27 @@ |
|||||
|
/** |
||||
|
* Config |
||||
|
* ------------------------------------------------------------------------------------- |
||||
|
* ! IMPORTANT: Make sure you clear the browser local storage In order to see the config changes in the template. |
||||
|
* ! To clear local storage: (https://www.leadshook.com/help/how-to-clear-local-storage-in-google-chrome-browser/).
|
||||
|
*/ |
||||
|
|
||||
|
'use strict'; |
||||
|
|
||||
|
// JS global variables
|
||||
|
let config = { |
||||
|
colors: { |
||||
|
primary: '#11726d', |
||||
|
secondary: '#8592a3', |
||||
|
success: '#71dd37', |
||||
|
info: '#03c3ec', |
||||
|
warning: '#ffab00', |
||||
|
danger: '#ff3e1d', |
||||
|
dark: '#233446', |
||||
|
black: '#000', |
||||
|
white: '#fff', |
||||
|
body: '#f4f5fb', |
||||
|
headingColor: '#566a7f', |
||||
|
axisColor: '#a1acb8', |
||||
|
borderColor: '#eceef1' |
||||
|
} |
||||
|
}; |
||||
@ -0,0 +1,662 @@ |
|||||
|
/** |
||||
|
* Dashboard Analytics |
||||
|
*/ |
||||
|
|
||||
|
'use strict'; |
||||
|
|
||||
|
(function () { |
||||
|
let cardColor, headingColor, axisColor, shadeColor, borderColor; |
||||
|
|
||||
|
cardColor = config.colors.white; |
||||
|
headingColor = config.colors.headingColor; |
||||
|
axisColor = config.colors.axisColor; |
||||
|
borderColor = config.colors.borderColor; |
||||
|
|
||||
|
// Total Revenue Report Chart - Bar Chart
|
||||
|
// --------------------------------------------------------------------
|
||||
|
const totalRevenueChartEl = document.querySelector('#totalRevenueChart'), |
||||
|
totalRevenueChartOptions = { |
||||
|
series: [ |
||||
|
{ |
||||
|
name: '2021', |
||||
|
data: [18, 7, 15, 29, 18, 12, 9] |
||||
|
}, |
||||
|
{ |
||||
|
name: '2020', |
||||
|
data: [-13, -18, -9, -14, -5, -17, -15] |
||||
|
} |
||||
|
], |
||||
|
chart: { |
||||
|
height: 300, |
||||
|
stacked: true, |
||||
|
type: 'bar', |
||||
|
toolbar: { show: false } |
||||
|
}, |
||||
|
plotOptions: { |
||||
|
bar: { |
||||
|
horizontal: false, |
||||
|
columnWidth: '33%', |
||||
|
borderRadius: 12, |
||||
|
startingShape: 'rounded', |
||||
|
endingShape: 'rounded' |
||||
|
} |
||||
|
}, |
||||
|
colors: [config.colors.primary, config.colors.info], |
||||
|
dataLabels: { |
||||
|
enabled: false |
||||
|
}, |
||||
|
stroke: { |
||||
|
curve: 'smooth', |
||||
|
width: 6, |
||||
|
lineCap: 'round', |
||||
|
colors: [cardColor] |
||||
|
}, |
||||
|
legend: { |
||||
|
show: true, |
||||
|
horizontalAlign: 'left', |
||||
|
position: 'top', |
||||
|
markers: { |
||||
|
height: 8, |
||||
|
width: 8, |
||||
|
radius: 12, |
||||
|
offsetX: -3 |
||||
|
}, |
||||
|
labels: { |
||||
|
colors: axisColor |
||||
|
}, |
||||
|
itemMargin: { |
||||
|
horizontal: 10 |
||||
|
} |
||||
|
}, |
||||
|
grid: { |
||||
|
borderColor: borderColor, |
||||
|
padding: { |
||||
|
top: 0, |
||||
|
bottom: -8, |
||||
|
left: 20, |
||||
|
right: 20 |
||||
|
} |
||||
|
}, |
||||
|
xaxis: { |
||||
|
categories: ['Jan', 'Feb', 'Mar', 'Apr', 'May', 'Jun', 'Jul'], |
||||
|
labels: { |
||||
|
style: { |
||||
|
fontSize: '13px', |
||||
|
colors: axisColor |
||||
|
} |
||||
|
}, |
||||
|
axisTicks: { |
||||
|
show: false |
||||
|
}, |
||||
|
axisBorder: { |
||||
|
show: false |
||||
|
} |
||||
|
}, |
||||
|
yaxis: { |
||||
|
labels: { |
||||
|
style: { |
||||
|
fontSize: '13px', |
||||
|
colors: axisColor |
||||
|
} |
||||
|
} |
||||
|
}, |
||||
|
responsive: [ |
||||
|
{ |
||||
|
breakpoint: 1700, |
||||
|
options: { |
||||
|
plotOptions: { |
||||
|
bar: { |
||||
|
borderRadius: 10, |
||||
|
columnWidth: '32%' |
||||
|
} |
||||
|
} |
||||
|
} |
||||
|
}, |
||||
|
{ |
||||
|
breakpoint: 1580, |
||||
|
options: { |
||||
|
plotOptions: { |
||||
|
bar: { |
||||
|
borderRadius: 10, |
||||
|
columnWidth: '35%' |
||||
|
} |
||||
|
} |
||||
|
} |
||||
|
}, |
||||
|
{ |
||||
|
breakpoint: 1440, |
||||
|
options: { |
||||
|
plotOptions: { |
||||
|
bar: { |
||||
|
borderRadius: 10, |
||||
|
columnWidth: '42%' |
||||
|
} |
||||
|
} |
||||
|
} |
||||
|
}, |
||||
|
{ |
||||
|
breakpoint: 1300, |
||||
|
options: { |
||||
|
plotOptions: { |
||||
|
bar: { |
||||
|
borderRadius: 10, |
||||
|
columnWidth: '48%' |
||||
|
} |
||||
|
} |
||||
|
} |
||||
|
}, |
||||
|
{ |
||||
|
breakpoint: 1200, |
||||
|
options: { |
||||
|
plotOptions: { |
||||
|
bar: { |
||||
|
borderRadius: 10, |
||||
|
columnWidth: '40%' |
||||
|
} |
||||
|
} |
||||
|
} |
||||
|
}, |
||||
|
{ |
||||
|
breakpoint: 1040, |
||||
|
options: { |
||||
|
plotOptions: { |
||||
|
bar: { |
||||
|
borderRadius: 11, |
||||
|
columnWidth: '48%' |
||||
|
} |
||||
|
} |
||||
|
} |
||||
|
}, |
||||
|
{ |
||||
|
breakpoint: 991, |
||||
|
options: { |
||||
|
plotOptions: { |
||||
|
bar: { |
||||
|
borderRadius: 10, |
||||
|
columnWidth: '30%' |
||||
|
} |
||||
|
} |
||||
|
} |
||||
|
}, |
||||
|
{ |
||||
|
breakpoint: 840, |
||||
|
options: { |
||||
|
plotOptions: { |
||||
|
bar: { |
||||
|
borderRadius: 10, |
||||
|
columnWidth: '35%' |
||||
|
} |
||||
|
} |
||||
|
} |
||||
|
}, |
||||
|
{ |
||||
|
breakpoint: 768, |
||||
|
options: { |
||||
|
plotOptions: { |
||||
|
bar: { |
||||
|
borderRadius: 10, |
||||
|
columnWidth: '28%' |
||||
|
} |
||||
|
} |
||||
|
} |
||||
|
}, |
||||
|
{ |
||||
|
breakpoint: 640, |
||||
|
options: { |
||||
|
plotOptions: { |
||||
|
bar: { |
||||
|
borderRadius: 10, |
||||
|
columnWidth: '32%' |
||||
|
} |
||||
|
} |
||||
|
} |
||||
|
}, |
||||
|
{ |
||||
|
breakpoint: 576, |
||||
|
options: { |
||||
|
plotOptions: { |
||||
|
bar: { |
||||
|
borderRadius: 10, |
||||
|
columnWidth: '37%' |
||||
|
} |
||||
|
} |
||||
|
} |
||||
|
}, |
||||
|
{ |
||||
|
breakpoint: 480, |
||||
|
options: { |
||||
|
plotOptions: { |
||||
|
bar: { |
||||
|
borderRadius: 10, |
||||
|
columnWidth: '45%' |
||||
|
} |
||||
|
} |
||||
|
} |
||||
|
}, |
||||
|
{ |
||||
|
breakpoint: 420, |
||||
|
options: { |
||||
|
plotOptions: { |
||||
|
bar: { |
||||
|
borderRadius: 10, |
||||
|
columnWidth: '52%' |
||||
|
} |
||||
|
} |
||||
|
} |
||||
|
}, |
||||
|
{ |
||||
|
breakpoint: 380, |
||||
|
options: { |
||||
|
plotOptions: { |
||||
|
bar: { |
||||
|
borderRadius: 10, |
||||
|
columnWidth: '60%' |
||||
|
} |
||||
|
} |
||||
|
} |
||||
|
} |
||||
|
], |
||||
|
states: { |
||||
|
hover: { |
||||
|
filter: { |
||||
|
type: 'none' |
||||
|
} |
||||
|
}, |
||||
|
active: { |
||||
|
filter: { |
||||
|
type: 'none' |
||||
|
} |
||||
|
} |
||||
|
} |
||||
|
}; |
||||
|
if (typeof totalRevenueChartEl !== undefined && totalRevenueChartEl !== null) { |
||||
|
const totalRevenueChart = new ApexCharts(totalRevenueChartEl, totalRevenueChartOptions); |
||||
|
totalRevenueChart.render(); |
||||
|
} |
||||
|
|
||||
|
// Growth Chart - Radial Bar Chart
|
||||
|
// --------------------------------------------------------------------
|
||||
|
const growthChartEl = document.querySelector('#growthChart'), |
||||
|
growthChartOptions = { |
||||
|
series: [78], |
||||
|
labels: ['Growth'], |
||||
|
chart: { |
||||
|
height: 240, |
||||
|
type: 'radialBar' |
||||
|
}, |
||||
|
plotOptions: { |
||||
|
radialBar: { |
||||
|
size: 150, |
||||
|
offsetY: 10, |
||||
|
startAngle: -150, |
||||
|
endAngle: 150, |
||||
|
hollow: { |
||||
|
size: '55%' |
||||
|
}, |
||||
|
track: { |
||||
|
background: cardColor, |
||||
|
strokeWidth: '100%' |
||||
|
}, |
||||
|
dataLabels: { |
||||
|
name: { |
||||
|
offsetY: 15, |
||||
|
color: headingColor, |
||||
|
fontSize: '15px', |
||||
|
fontWeight: '600', |
||||
|
fontFamily: 'Public Sans' |
||||
|
}, |
||||
|
value: { |
||||
|
offsetY: -25, |
||||
|
color: headingColor, |
||||
|
fontSize: '22px', |
||||
|
fontWeight: '500', |
||||
|
fontFamily: 'Public Sans' |
||||
|
} |
||||
|
} |
||||
|
} |
||||
|
}, |
||||
|
colors: [config.colors.primary], |
||||
|
fill: { |
||||
|
type: 'gradient', |
||||
|
gradient: { |
||||
|
shade: 'dark', |
||||
|
shadeIntensity: 0.5, |
||||
|
gradientToColors: [config.colors.primary], |
||||
|
inverseColors: true, |
||||
|
opacityFrom: 1, |
||||
|
opacityTo: 0.6, |
||||
|
stops: [30, 70, 100] |
||||
|
} |
||||
|
}, |
||||
|
stroke: { |
||||
|
dashArray: 5 |
||||
|
}, |
||||
|
grid: { |
||||
|
padding: { |
||||
|
top: -35, |
||||
|
bottom: -10 |
||||
|
} |
||||
|
}, |
||||
|
states: { |
||||
|
hover: { |
||||
|
filter: { |
||||
|
type: 'none' |
||||
|
} |
||||
|
}, |
||||
|
active: { |
||||
|
filter: { |
||||
|
type: 'none' |
||||
|
} |
||||
|
} |
||||
|
} |
||||
|
}; |
||||
|
if (typeof growthChartEl !== undefined && growthChartEl !== null) { |
||||
|
const growthChart = new ApexCharts(growthChartEl, growthChartOptions); |
||||
|
growthChart.render(); |
||||
|
} |
||||
|
|
||||
|
// Profit Report Line Chart
|
||||
|
// --------------------------------------------------------------------
|
||||
|
const profileReportChartEl = document.querySelector('#profileReportChart'), |
||||
|
profileReportChartConfig = { |
||||
|
chart: { |
||||
|
height: 80, |
||||
|
// width: 175,
|
||||
|
type: 'line', |
||||
|
toolbar: { |
||||
|
show: false |
||||
|
}, |
||||
|
dropShadow: { |
||||
|
enabled: true, |
||||
|
top: 10, |
||||
|
left: 5, |
||||
|
blur: 3, |
||||
|
color: config.colors.warning, |
||||
|
opacity: 0.15 |
||||
|
}, |
||||
|
sparkline: { |
||||
|
enabled: true |
||||
|
} |
||||
|
}, |
||||
|
grid: { |
||||
|
show: false, |
||||
|
padding: { |
||||
|
right: 8 |
||||
|
} |
||||
|
}, |
||||
|
colors: [config.colors.warning], |
||||
|
dataLabels: { |
||||
|
enabled: false |
||||
|
}, |
||||
|
stroke: { |
||||
|
width: 5, |
||||
|
curve: 'smooth' |
||||
|
}, |
||||
|
series: [ |
||||
|
{ |
||||
|
data: [110, 270, 145, 245, 205, 285] |
||||
|
} |
||||
|
], |
||||
|
xaxis: { |
||||
|
show: false, |
||||
|
lines: { |
||||
|
show: false |
||||
|
}, |
||||
|
labels: { |
||||
|
show: false |
||||
|
}, |
||||
|
axisBorder: { |
||||
|
show: false |
||||
|
} |
||||
|
}, |
||||
|
yaxis: { |
||||
|
show: false |
||||
|
} |
||||
|
}; |
||||
|
if (typeof profileReportChartEl !== undefined && profileReportChartEl !== null) { |
||||
|
const profileReportChart = new ApexCharts(profileReportChartEl, profileReportChartConfig); |
||||
|
profileReportChart.render(); |
||||
|
} |
||||
|
|
||||
|
// Order Statistics Chart
|
||||
|
// --------------------------------------------------------------------
|
||||
|
const chartOrderStatistics = document.querySelector('#orderStatisticsChart'), |
||||
|
orderChartConfig = { |
||||
|
chart: { |
||||
|
height: 165, |
||||
|
width: 130, |
||||
|
type: 'donut' |
||||
|
}, |
||||
|
labels: ['Electronic', 'Sports', 'Decor', 'Fashion'], |
||||
|
series: [85, 15, 50, 50], |
||||
|
colors: [config.colors.primary, config.colors.secondary, config.colors.info, config.colors.success], |
||||
|
stroke: { |
||||
|
width: 5, |
||||
|
colors: cardColor |
||||
|
}, |
||||
|
dataLabels: { |
||||
|
enabled: false, |
||||
|
formatter: function (val, opt) { |
||||
|
return parseInt(val) + '%'; |
||||
|
} |
||||
|
}, |
||||
|
legend: { |
||||
|
show: false |
||||
|
}, |
||||
|
grid: { |
||||
|
padding: { |
||||
|
top: 0, |
||||
|
bottom: 0, |
||||
|
right: 15 |
||||
|
} |
||||
|
}, |
||||
|
plotOptions: { |
||||
|
pie: { |
||||
|
donut: { |
||||
|
size: '75%', |
||||
|
labels: { |
||||
|
show: true, |
||||
|
value: { |
||||
|
fontSize: '1.5rem', |
||||
|
fontFamily: 'Public Sans', |
||||
|
color: headingColor, |
||||
|
offsetY: -15, |
||||
|
formatter: function (val) { |
||||
|
return parseInt(val) + '%'; |
||||
|
} |
||||
|
}, |
||||
|
name: { |
||||
|
offsetY: 20, |
||||
|
fontFamily: 'Public Sans' |
||||
|
}, |
||||
|
total: { |
||||
|
show: true, |
||||
|
fontSize: '0.8125rem', |
||||
|
color: axisColor, |
||||
|
label: 'Weekly', |
||||
|
formatter: function (w) { |
||||
|
return '38%'; |
||||
|
} |
||||
|
} |
||||
|
} |
||||
|
} |
||||
|
} |
||||
|
} |
||||
|
}; |
||||
|
if (typeof chartOrderStatistics !== undefined && chartOrderStatistics !== null) { |
||||
|
const statisticsChart = new ApexCharts(chartOrderStatistics, orderChartConfig); |
||||
|
statisticsChart.render(); |
||||
|
} |
||||
|
|
||||
|
// Income Chart - Area chart
|
||||
|
// --------------------------------------------------------------------
|
||||
|
const incomeChartEl = document.querySelector('#incomeChart'), |
||||
|
incomeChartConfig = { |
||||
|
series: [ |
||||
|
{ |
||||
|
data: [24, 21, 30, 22, 42, 26, 35, 29] |
||||
|
} |
||||
|
], |
||||
|
chart: { |
||||
|
height: 215, |
||||
|
parentHeightOffset: 0, |
||||
|
parentWidthOffset: 0, |
||||
|
toolbar: { |
||||
|
show: false |
||||
|
}, |
||||
|
type: 'area' |
||||
|
}, |
||||
|
dataLabels: { |
||||
|
enabled: false |
||||
|
}, |
||||
|
stroke: { |
||||
|
width: 2, |
||||
|
curve: 'smooth' |
||||
|
}, |
||||
|
legend: { |
||||
|
show: false |
||||
|
}, |
||||
|
markers: { |
||||
|
size: 6, |
||||
|
colors: 'transparent', |
||||
|
strokeColors: 'transparent', |
||||
|
strokeWidth: 4, |
||||
|
discrete: [ |
||||
|
{ |
||||
|
fillColor: config.colors.white, |
||||
|
seriesIndex: 0, |
||||
|
dataPointIndex: 7, |
||||
|
strokeColor: config.colors.primary, |
||||
|
strokeWidth: 2, |
||||
|
size: 6, |
||||
|
radius: 8 |
||||
|
} |
||||
|
], |
||||
|
hover: { |
||||
|
size: 7 |
||||
|
} |
||||
|
}, |
||||
|
colors: [config.colors.primary], |
||||
|
fill: { |
||||
|
type: 'gradient', |
||||
|
gradient: { |
||||
|
shade: shadeColor, |
||||
|
shadeIntensity: 0.6, |
||||
|
opacityFrom: 0.5, |
||||
|
opacityTo: 0.25, |
||||
|
stops: [0, 95, 100] |
||||
|
} |
||||
|
}, |
||||
|
grid: { |
||||
|
borderColor: borderColor, |
||||
|
strokeDashArray: 3, |
||||
|
padding: { |
||||
|
top: -20, |
||||
|
bottom: -8, |
||||
|
left: -10, |
||||
|
right: 8 |
||||
|
} |
||||
|
}, |
||||
|
xaxis: { |
||||
|
categories: ['', 'Jan', 'Feb', 'Mar', 'Apr', 'May', 'Jun', 'Jul'], |
||||
|
axisBorder: { |
||||
|
show: false |
||||
|
}, |
||||
|
axisTicks: { |
||||
|
show: false |
||||
|
}, |
||||
|
labels: { |
||||
|
show: true, |
||||
|
style: { |
||||
|
fontSize: '13px', |
||||
|
colors: axisColor |
||||
|
} |
||||
|
} |
||||
|
}, |
||||
|
yaxis: { |
||||
|
labels: { |
||||
|
show: false |
||||
|
}, |
||||
|
min: 10, |
||||
|
max: 50, |
||||
|
tickAmount: 4 |
||||
|
} |
||||
|
}; |
||||
|
if (typeof incomeChartEl !== undefined && incomeChartEl !== null) { |
||||
|
const incomeChart = new ApexCharts(incomeChartEl, incomeChartConfig); |
||||
|
incomeChart.render(); |
||||
|
} |
||||
|
|
||||
|
// Expenses Mini Chart - Radial Chart
|
||||
|
// --------------------------------------------------------------------
|
||||
|
const weeklyExpensesEl = document.querySelector('#expensesOfWeek'), |
||||
|
weeklyExpensesConfig = { |
||||
|
series: [65], |
||||
|
chart: { |
||||
|
width: 60, |
||||
|
height: 60, |
||||
|
type: 'radialBar' |
||||
|
}, |
||||
|
plotOptions: { |
||||
|
radialBar: { |
||||
|
startAngle: 0, |
||||
|
endAngle: 360, |
||||
|
strokeWidth: '8', |
||||
|
hollow: { |
||||
|
margin: 2, |
||||
|
size: '45%' |
||||
|
}, |
||||
|
track: { |
||||
|
strokeWidth: '50%', |
||||
|
background: borderColor |
||||
|
}, |
||||
|
dataLabels: { |
||||
|
show: true, |
||||
|
name: { |
||||
|
show: false |
||||
|
}, |
||||
|
value: { |
||||
|
formatter: function (val) { |
||||
|
return '$' + parseInt(val); |
||||
|
}, |
||||
|
offsetY: 5, |
||||
|
color: '#697a8d', |
||||
|
fontSize: '13px', |
||||
|
show: true |
||||
|
} |
||||
|
} |
||||
|
} |
||||
|
}, |
||||
|
fill: { |
||||
|
type: 'solid', |
||||
|
colors: config.colors.primary |
||||
|
}, |
||||
|
stroke: { |
||||
|
lineCap: 'round' |
||||
|
}, |
||||
|
grid: { |
||||
|
padding: { |
||||
|
top: -10, |
||||
|
bottom: -15, |
||||
|
left: -10, |
||||
|
right: -10 |
||||
|
} |
||||
|
}, |
||||
|
states: { |
||||
|
hover: { |
||||
|
filter: { |
||||
|
type: 'none' |
||||
|
} |
||||
|
}, |
||||
|
active: { |
||||
|
filter: { |
||||
|
type: 'none' |
||||
|
} |
||||
|
} |
||||
|
} |
||||
|
}; |
||||
|
if (typeof weeklyExpensesEl !== undefined && weeklyExpensesEl !== null) { |
||||
|
const weeklyExpenses = new ApexCharts(weeklyExpensesEl, weeklyExpensesConfig); |
||||
|
weeklyExpenses.render(); |
||||
|
} |
||||
|
})(); |
||||
@ -0,0 +1,37 @@ |
|||||
|
/** |
||||
|
* Perfect Scrollbar |
||||
|
*/ |
||||
|
'use strict'; |
||||
|
|
||||
|
document.addEventListener('DOMContentLoaded', function () { |
||||
|
(function () { |
||||
|
const verticalExample = document.getElementById('vertical-example'), |
||||
|
horizontalExample = document.getElementById('horizontal-example'), |
||||
|
horizVertExample = document.getElementById('both-scrollbars-example'); |
||||
|
|
||||
|
// Vertical Example
|
||||
|
// --------------------------------------------------------------------
|
||||
|
if (verticalExample) { |
||||
|
new PerfectScrollbar(verticalExample, { |
||||
|
wheelPropagation: false |
||||
|
}); |
||||
|
} |
||||
|
|
||||
|
// Horizontal Example
|
||||
|
// --------------------------------------------------------------------
|
||||
|
if (horizontalExample) { |
||||
|
new PerfectScrollbar(horizontalExample, { |
||||
|
wheelPropagation: false, |
||||
|
suppressScrollY: true |
||||
|
}); |
||||
|
} |
||||
|
|
||||
|
// Both vertical and Horizontal Example
|
||||
|
// --------------------------------------------------------------------
|
||||
|
if (horizVertExample) { |
||||
|
new PerfectScrollbar(horizVertExample, { |
||||
|
wheelPropagation: false |
||||
|
}); |
||||
|
} |
||||
|
})(); |
||||
|
}); |
||||
@ -0,0 +1,11 @@ |
|||||
|
/** |
||||
|
* Form Basic Inputs |
||||
|
*/ |
||||
|
|
||||
|
'use strict'; |
||||
|
|
||||
|
(function () { |
||||
|
// Indeterminate checkbox
|
||||
|
const checkbox = document.getElementById('defaultCheck2'); |
||||
|
checkbox.indeterminate = true; |
||||
|
})(); |
||||
@ -0,0 +1,118 @@ |
|||||
|
/** |
||||
|
* Main |
||||
|
*/ |
||||
|
|
||||
|
'use strict'; |
||||
|
|
||||
|
let menu, animate; |
||||
|
|
||||
|
(function () { |
||||
|
// Initialize menu
|
||||
|
//-----------------
|
||||
|
|
||||
|
let layoutMenuEl = document.querySelectorAll('#layout-menu'); |
||||
|
layoutMenuEl.forEach(function (element) { |
||||
|
menu = new Menu(element, { |
||||
|
orientation: 'vertical', |
||||
|
closeChildren: false |
||||
|
}); |
||||
|
// Change parameter to true if you want scroll animation
|
||||
|
window.Helpers.scrollToActive((animate = false)); |
||||
|
window.Helpers.mainMenu = menu; |
||||
|
}); |
||||
|
|
||||
|
// Initialize menu togglers and bind click on each
|
||||
|
let menuToggler = document.querySelectorAll('.layout-menu-toggle'); |
||||
|
menuToggler.forEach(item => { |
||||
|
item.addEventListener('click', event => { |
||||
|
event.preventDefault(); |
||||
|
window.Helpers.toggleCollapsed(); |
||||
|
}); |
||||
|
}); |
||||
|
|
||||
|
// Display menu toggle (layout-menu-toggle) on hover with delay
|
||||
|
let delay = function (elem, callback) { |
||||
|
let timeout = null; |
||||
|
elem.onmouseenter = function () { |
||||
|
// Set timeout to be a timer which will invoke callback after 300ms (not for small screen)
|
||||
|
if (!Helpers.isSmallScreen()) { |
||||
|
timeout = setTimeout(callback, 300); |
||||
|
} else { |
||||
|
timeout = setTimeout(callback, 0); |
||||
|
} |
||||
|
}; |
||||
|
|
||||
|
elem.onmouseleave = function () { |
||||
|
// Clear any timers set to timeout
|
||||
|
document.querySelector('.layout-menu-toggle').classList.remove('d-block'); |
||||
|
clearTimeout(timeout); |
||||
|
}; |
||||
|
}; |
||||
|
if (document.getElementById('layout-menu')) { |
||||
|
delay(document.getElementById('layout-menu'), function () { |
||||
|
// not for small screen
|
||||
|
if (!Helpers.isSmallScreen()) { |
||||
|
document.querySelector('.layout-menu-toggle').classList.add('d-block'); |
||||
|
} |
||||
|
}); |
||||
|
} |
||||
|
|
||||
|
// Display in main menu when menu scrolls
|
||||
|
let menuInnerContainer = document.getElementsByClassName('menu-inner'), |
||||
|
menuInnerShadow = document.getElementsByClassName('menu-inner-shadow')[0]; |
||||
|
if (menuInnerContainer.length > 0 && menuInnerShadow) { |
||||
|
menuInnerContainer[0].addEventListener('ps-scroll-y', function () { |
||||
|
if (this.querySelector('.ps__thumb-y').offsetTop) { |
||||
|
menuInnerShadow.style.display = 'block'; |
||||
|
} else { |
||||
|
menuInnerShadow.style.display = 'none'; |
||||
|
} |
||||
|
}); |
||||
|
} |
||||
|
|
||||
|
// Init helpers & misc
|
||||
|
// --------------------
|
||||
|
|
||||
|
// Init BS Tooltip
|
||||
|
const tooltipTriggerList = [].slice.call(document.querySelectorAll('[data-bs-toggle="tooltip"]')); |
||||
|
tooltipTriggerList.map(function (tooltipTriggerEl) { |
||||
|
return new bootstrap.Tooltip(tooltipTriggerEl); |
||||
|
}); |
||||
|
|
||||
|
// Accordion active class
|
||||
|
const accordionActiveFunction = function (e) { |
||||
|
if (e.type == 'show.bs.collapse' || e.type == 'show.bs.collapse') { |
||||
|
e.target.closest('.accordion-item').classList.add('active'); |
||||
|
} else { |
||||
|
e.target.closest('.accordion-item').classList.remove('active'); |
||||
|
} |
||||
|
}; |
||||
|
|
||||
|
const accordionTriggerList = [].slice.call(document.querySelectorAll('.accordion')); |
||||
|
const accordionList = accordionTriggerList.map(function (accordionTriggerEl) { |
||||
|
accordionTriggerEl.addEventListener('show.bs.collapse', accordionActiveFunction); |
||||
|
accordionTriggerEl.addEventListener('hide.bs.collapse', accordionActiveFunction); |
||||
|
}); |
||||
|
|
||||
|
// Auto update layout based on screen size
|
||||
|
window.Helpers.setAutoUpdate(true); |
||||
|
|
||||
|
// Toggle Password Visibility
|
||||
|
window.Helpers.initPasswordToggle(); |
||||
|
|
||||
|
// Speech To Text
|
||||
|
window.Helpers.initSpeechToText(); |
||||
|
|
||||
|
// Manage menu expanded/collapsed with templateCustomizer & local storage
|
||||
|
//------------------------------------------------------------------
|
||||
|
|
||||
|
// If current layout is horizontal OR current window screen is small (overlay menu) than return from here
|
||||
|
if (window.Helpers.isSmallScreen()) { |
||||
|
return; |
||||
|
} |
||||
|
|
||||
|
// If current layout is vertical and current window screen is > small
|
||||
|
|
||||
|
// Auto update menu collapsed/expanded based on the themeConfig
|
||||
|
window.Helpers.setCollapsed(true, false); |
||||
|
})(); |
||||
@ -0,0 +1,29 @@ |
|||||
|
/** |
||||
|
* Account Settings - Account |
||||
|
*/ |
||||
|
|
||||
|
'use strict'; |
||||
|
|
||||
|
document.addEventListener('DOMContentLoaded', function (e) { |
||||
|
(function () { |
||||
|
const deactivateAcc = document.querySelector('#formAccountDeactivation'); |
||||
|
|
||||
|
// Update/reset user image of account page
|
||||
|
let accountUserImage = document.getElementById('uploadedAvatar'); |
||||
|
const fileInput = document.querySelector('.account-file-input'), |
||||
|
resetFileInput = document.querySelector('.account-image-reset'); |
||||
|
|
||||
|
if (accountUserImage) { |
||||
|
const resetImage = accountUserImage.src; |
||||
|
fileInput.onchange = () => { |
||||
|
if (fileInput.files[0]) { |
||||
|
accountUserImage.src = window.URL.createObjectURL(fileInput.files[0]); |
||||
|
} |
||||
|
}; |
||||
|
resetFileInput.onclick = () => { |
||||
|
fileInput.value = ''; |
||||
|
accountUserImage.src = resetImage; |
||||
|
}; |
||||
|
} |
||||
|
})(); |
||||
|
}); |
||||
@ -0,0 +1,33 @@ |
|||||
|
/** |
||||
|
* UI Modals |
||||
|
*/ |
||||
|
|
||||
|
'use strict'; |
||||
|
|
||||
|
(function () { |
||||
|
// On hiding modal, remove iframe video/audio to stop playing
|
||||
|
const youTubeModal = document.querySelector('#youTubeModal'), |
||||
|
youTubeModalVideo = youTubeModal.querySelector('iframe'); |
||||
|
youTubeModal.addEventListener('hidden.bs.modal', function () { |
||||
|
youTubeModalVideo.setAttribute('src', ''); |
||||
|
}); |
||||
|
|
||||
|
// Function to get and auto play youTube video
|
||||
|
const autoPlayYouTubeModal = function () { |
||||
|
const modalTriggerList = [].slice.call(document.querySelectorAll('[data-bs-toggle="modal"]')); |
||||
|
modalTriggerList.map(function (modalTriggerEl) { |
||||
|
modalTriggerEl.onclick = function () { |
||||
|
const theModal = this.getAttribute('data-bs-target'), |
||||
|
videoSRC = this.getAttribute('data-theVideo'), |
||||
|
videoSRCauto = `${videoSRC}?autoplay=1`, |
||||
|
modalVideo = document.querySelector(`${theModal} iframe`); |
||||
|
if (modalVideo) { |
||||
|
modalVideo.setAttribute('src', videoSRCauto); |
||||
|
} |
||||
|
}; |
||||
|
}); |
||||
|
}; |
||||
|
|
||||
|
// Calling function on load
|
||||
|
autoPlayYouTubeModal(); |
||||
|
})(); |
||||
@ -0,0 +1,13 @@ |
|||||
|
// /**
|
||||
|
// * UI Tooltips & Popovers
|
||||
|
// */
|
||||
|
|
||||
|
'use strict'; |
||||
|
|
||||
|
(function () { |
||||
|
const popoverTriggerList = [].slice.call(document.querySelectorAll('[data-bs-toggle="popover"]')); |
||||
|
const popoverList = popoverTriggerList.map(function (popoverTriggerEl) { |
||||
|
// added { html: true, sanitize: false } option to render button in content area of popover
|
||||
|
return new bootstrap.Popover(popoverTriggerEl, { html: true, sanitize: false }); |
||||
|
}); |
||||
|
})(); |
||||
@ -0,0 +1,39 @@ |
|||||
|
/** |
||||
|
* UI Toasts |
||||
|
*/ |
||||
|
|
||||
|
'use strict'; |
||||
|
|
||||
|
(function () { |
||||
|
// Bootstrap toasts example
|
||||
|
// --------------------------------------------------------------------
|
||||
|
const toastPlacementExample = document.querySelector('.toast-placement-ex'), |
||||
|
toastPlacementBtn = document.querySelector('#showToastPlacement'); |
||||
|
let selectedType, selectedPlacement, toastPlacement; |
||||
|
|
||||
|
// Dispose toast when open another
|
||||
|
function toastDispose(toast) { |
||||
|
if (toast && toast._element !== null) { |
||||
|
if (toastPlacementExample) { |
||||
|
toastPlacementExample.classList.remove(selectedType); |
||||
|
DOMTokenList.prototype.remove.apply(toastPlacementExample.classList, selectedPlacement); |
||||
|
} |
||||
|
toast.dispose(); |
||||
|
} |
||||
|
} |
||||
|
// Placement Button click
|
||||
|
if (toastPlacementBtn) { |
||||
|
toastPlacementBtn.onclick = function () { |
||||
|
if (toastPlacement) { |
||||
|
toastDispose(toastPlacement); |
||||
|
} |
||||
|
selectedType = document.querySelector('#selectTypeOpt').value; |
||||
|
selectedPlacement = document.querySelector('#selectPlacement').value.split(' '); |
||||
|
|
||||
|
toastPlacementExample.classList.add(selectedType); |
||||
|
DOMTokenList.prototype.add.apply(toastPlacementExample.classList, selectedPlacement); |
||||
|
toastPlacement = new bootstrap.Toast(toastPlacementExample); |
||||
|
toastPlacement.show(); |
||||
|
}; |
||||
|
} |
||||
|
})(); |
||||
File diff suppressed because it is too large
@ -0,0 +1,7 @@ |
|||||
|
.api-key-actions { |
||||
|
position: absolute !important; |
||||
|
top: 0.75rem; |
||||
|
right: 0.5rem; |
||||
|
} |
||||
|
|
||||
|
/*# sourceMappingURL=data:application/json;charset=utf8;base64,eyJ2ZXJzaW9uIjozLCJzb3VyY2VzIjpbInBhZ2VzL3BhZ2UtYWNjb3VudC1zZXR0aW5ncy5jc3MiXSwibmFtZXMiOltdLCJtYXBwaW5ncyI6IkFBQUE7RUFDRSw2QkFBNkI7RUFDN0IsWUFBWTtFQUNaLGFBQWE7QUFDZiIsImZpbGUiOiJwYWdlcy9wYWdlLWFjY291bnQtc2V0dGluZ3MuY3NzIiwic291cmNlc0NvbnRlbnQiOlsiLmFwaS1rZXktYWN0aW9ucyB7XG4gIHBvc2l0aW9uOiBhYnNvbHV0ZSAhaW1wb3J0YW50O1xuICB0b3A6IDAuNzVyZW07XG4gIHJpZ2h0OiAwLjVyZW07XG59XG4iXX0= */ |
||||
File diff suppressed because one or more lines are too long
@ -0,0 +1,29 @@ |
|||||
|
#icons-container .icon-card { |
||||
|
width: 128px; |
||||
|
} |
||||
|
#icons-container .icon-card i { |
||||
|
font-size: 2rem; |
||||
|
} |
||||
|
|
||||
|
@media (max-width: 1024px) { |
||||
|
#icons-container .icon-card { |
||||
|
width: 126px; |
||||
|
} |
||||
|
} |
||||
|
@media (max-width: 767.98px) { |
||||
|
#icons-container .icon-card { |
||||
|
width: 131px; |
||||
|
} |
||||
|
} |
||||
|
@media (max-width: 414px) { |
||||
|
#icons-container .icon-card { |
||||
|
width: 110px; |
||||
|
} |
||||
|
} |
||||
|
@media (max-width: 375px) { |
||||
|
#icons-container .icon-card { |
||||
|
width: 150px; |
||||
|
} |
||||
|
} |
||||
|
|
||||
|
/*# sourceMappingURL=data:application/json;charset=utf8;base64,eyJ2ZXJzaW9uIjozLCJzb3VyY2VzIjpbInBhZ2VzL3BhZ2UtaWNvbnMuY3NzIl0sIm5hbWVzIjpbXSwibWFwcGluZ3MiOiJBQUFBO0VBQ0UsWUFBWTtBQUNkO0FBQ0E7RUFDRSxlQUFlO0FBQ2pCOztBQUVBO0VBQ0U7SUFDRSxZQUFZO0VBQ2Q7QUFDRjtBQUNBO0VBQ0U7SUFDRSxZQUFZO0VBQ2Q7QUFDRjtBQUNBO0VBQ0U7SUFDRSxZQUFZO0VBQ2Q7QUFDRjtBQUNBO0VBQ0U7SUFDRSxZQUFZO0VBQ2Q7QUFDRiIsImZpbGUiOiJwYWdlcy9wYWdlLWljb25zLmNzcyIsInNvdXJjZXNDb250ZW50IjpbIiNpY29ucy1jb250YWluZXIgLmljb24tY2FyZCB7XG4gIHdpZHRoOiAxMjhweDtcbn1cbiNpY29ucy1jb250YWluZXIgLmljb24tY2FyZCBpIHtcbiAgZm9udC1zaXplOiAycmVtO1xufVxuXG5AbWVkaWEgKG1heC13aWR0aDogMTAyNHB4KSB7XG4gICNpY29ucy1jb250YWluZXIgLmljb24tY2FyZCB7XG4gICAgd2lkdGg6IDEyNnB4O1xuICB9XG59XG5AbWVkaWEgKG1heC13aWR0aDogNzY3Ljk4cHgpIHtcbiAgI2ljb25zLWNvbnRhaW5lciAuaWNvbi1jYXJkIHtcbiAgICB3aWR0aDogMTMxcHg7XG4gIH1cbn1cbkBtZWRpYSAobWF4LXdpZHRoOiA0MTRweCkge1xuICAjaWNvbnMtY29udGFpbmVyIC5pY29uLWNhcmQge1xuICAgIHdpZHRoOiAxMTBweDtcbiAgfVxufVxuQG1lZGlhIChtYXgtd2lkdGg6IDM3NXB4KSB7XG4gICNpY29ucy1jb250YWluZXIgLmljb24tY2FyZCB7XG4gICAgd2lkdGg6IDE1MHB4O1xuICB9XG59XG4iXX0= */ |
||||
@ -0,0 +1,10 @@ |
|||||
|
.misc-wrapper { |
||||
|
display: flex; |
||||
|
flex-direction: column; |
||||
|
justify-content: center; |
||||
|
align-items: center; |
||||
|
min-height: calc(100vh - (1.625rem * 2)); |
||||
|
text-align: center; |
||||
|
} |
||||
|
|
||||
|
/*# sourceMappingURL=data:application/json;charset=utf8;base64,eyJ2ZXJzaW9uIjozLCJzb3VyY2VzIjpbInBhZ2VzL3BhZ2UtbWlzYy5jc3MiXSwibmFtZXMiOltdLCJtYXBwaW5ncyI6IkFBQUE7RUFDRSxhQUFhO0VBQ2Isc0JBQXNCO0VBQ3RCLHVCQUF1QjtFQUN2QixtQkFBbUI7RUFDbkIsd0NBQXdDO0VBQ3hDLGtCQUFrQjtBQUNwQiIsImZpbGUiOiJwYWdlcy9wYWdlLW1pc2MuY3NzIiwic291cmNlc0NvbnRlbnQiOlsiLm1pc2Mtd3JhcHBlciB7XG4gIGRpc3BsYXk6IGZsZXg7XG4gIGZsZXgtZGlyZWN0aW9uOiBjb2x1bW47XG4gIGp1c3RpZnktY29udGVudDogY2VudGVyO1xuICBhbGlnbi1pdGVtczogY2VudGVyO1xuICBtaW4taGVpZ2h0OiBjYWxjKDEwMHZoIC0gKDEuNjI1cmVtICogMikpO1xuICB0ZXh0LWFsaWduOiBjZW50ZXI7XG59XG4iXX0= */ |
||||
File diff suppressed because one or more lines are too long
File diff suppressed because it is too large
Binary file not shown.
|
After Width: | Height: | Size: 1.1 MiB |
Binary file not shown.
Binary file not shown.
Binary file not shown.
File diff suppressed because one or more lines are too long
File diff suppressed because one or more lines are too long
File diff suppressed because one or more lines are too long
@ -0,0 +1,746 @@ |
|||||
|
/** |
||||
|
* Apex Charts |
||||
|
*/ |
||||
|
.apexcharts-canvas { |
||||
|
position: relative; |
||||
|
user-select: none; |
||||
|
/* cannot give overflow: hidden as it will crop tooltips which overflow outside chart area */ |
||||
|
} |
||||
|
|
||||
|
/* scrollbar is not visible by default for legend, hence forcing the visibility */ |
||||
|
.apexcharts-canvas ::-webkit-scrollbar { |
||||
|
-webkit-appearance: none; |
||||
|
width: 6px; |
||||
|
} |
||||
|
|
||||
|
.apexcharts-canvas ::-webkit-scrollbar-thumb { |
||||
|
border-radius: 4px; |
||||
|
background-color: rgba(0, 0, 0, 0.5); |
||||
|
box-shadow: 0 0 1px rgba(255, 255, 255, 0.5); |
||||
|
-webkit-box-shadow: 0 0 1px rgba(255, 255, 255, 0.5); |
||||
|
} |
||||
|
|
||||
|
.apexcharts-inner { |
||||
|
position: relative; |
||||
|
} |
||||
|
|
||||
|
.apexcharts-text tspan { |
||||
|
font-family: inherit; |
||||
|
} |
||||
|
|
||||
|
.legend-mouseover-inactive { |
||||
|
transition: 0.15s ease all; |
||||
|
opacity: 0.2; |
||||
|
} |
||||
|
|
||||
|
.apexcharts-series-collapsed { |
||||
|
opacity: 0; |
||||
|
} |
||||
|
|
||||
|
.apexcharts-tooltip { |
||||
|
border-radius: 5px; |
||||
|
box-shadow: 2px 2px 6px -4px #999; |
||||
|
cursor: default; |
||||
|
font-size: 14px; |
||||
|
left: 62px; |
||||
|
opacity: 0; |
||||
|
pointer-events: none; |
||||
|
position: absolute; |
||||
|
top: 20px; |
||||
|
display: flex; |
||||
|
flex-direction: column; |
||||
|
overflow: hidden; |
||||
|
white-space: nowrap; |
||||
|
z-index: 12; |
||||
|
transition: 0.15s ease all; |
||||
|
} |
||||
|
|
||||
|
.apexcharts-tooltip.apexcharts-active { |
||||
|
opacity: 1; |
||||
|
transition: 0.15s ease all; |
||||
|
} |
||||
|
|
||||
|
.apexcharts-tooltip.apexcharts-theme-light { |
||||
|
border: 1px solid #e3e3e3; |
||||
|
background: rgba(255, 255, 255, 0.96); |
||||
|
} |
||||
|
|
||||
|
.apexcharts-tooltip.apexcharts-theme-dark { |
||||
|
color: #fff; |
||||
|
background: rgba(30, 30, 30, 0.8); |
||||
|
} |
||||
|
|
||||
|
.apexcharts-tooltip * { |
||||
|
font-family: inherit; |
||||
|
} |
||||
|
|
||||
|
.apexcharts-tooltip-title { |
||||
|
padding: 6px; |
||||
|
font-size: 15px; |
||||
|
margin-bottom: 4px; |
||||
|
} |
||||
|
|
||||
|
.apexcharts-tooltip.apexcharts-theme-light .apexcharts-tooltip-title { |
||||
|
background: #ECEFF1; |
||||
|
border-bottom: 1px solid #ddd; |
||||
|
} |
||||
|
|
||||
|
.apexcharts-tooltip.apexcharts-theme-dark .apexcharts-tooltip-title { |
||||
|
background: rgba(0, 0, 0, 0.7); |
||||
|
border-bottom: 1px solid #333; |
||||
|
} |
||||
|
|
||||
|
.apexcharts-tooltip-text-y-value, |
||||
|
.apexcharts-tooltip-text-goals-value, |
||||
|
.apexcharts-tooltip-text-z-value { |
||||
|
display: inline-block; |
||||
|
font-weight: 600; |
||||
|
margin-left: 5px; |
||||
|
} |
||||
|
|
||||
|
.apexcharts-tooltip-text-y-label:empty, |
||||
|
.apexcharts-tooltip-text-y-value:empty, |
||||
|
.apexcharts-tooltip-text-goals-label:empty, |
||||
|
.apexcharts-tooltip-text-goals-value:empty, |
||||
|
.apexcharts-tooltip-text-z-value:empty { |
||||
|
display: none; |
||||
|
} |
||||
|
|
||||
|
.apexcharts-tooltip-text-y-value, |
||||
|
.apexcharts-tooltip-text-goals-value, |
||||
|
.apexcharts-tooltip-text-z-value { |
||||
|
font-weight: 600; |
||||
|
} |
||||
|
|
||||
|
.apexcharts-tooltip-text-goals-label, |
||||
|
.apexcharts-tooltip-text-goals-value { |
||||
|
padding: 6px 0 5px; |
||||
|
} |
||||
|
|
||||
|
.apexcharts-tooltip-goals-group, |
||||
|
.apexcharts-tooltip-text-goals-label, |
||||
|
.apexcharts-tooltip-text-goals-value { |
||||
|
display: flex; |
||||
|
} |
||||
|
|
||||
|
.apexcharts-tooltip-text-goals-label:not(:empty), |
||||
|
.apexcharts-tooltip-text-goals-value:not(:empty) { |
||||
|
margin-top: -6px; |
||||
|
} |
||||
|
|
||||
|
.apexcharts-tooltip-marker { |
||||
|
width: 12px; |
||||
|
height: 12px; |
||||
|
position: relative; |
||||
|
top: 0px; |
||||
|
margin-right: 10px; |
||||
|
border-radius: 50%; |
||||
|
} |
||||
|
|
||||
|
.apexcharts-tooltip-series-group { |
||||
|
padding: 0 10px; |
||||
|
display: none; |
||||
|
text-align: left; |
||||
|
justify-content: left; |
||||
|
align-items: center; |
||||
|
} |
||||
|
|
||||
|
.apexcharts-tooltip-series-group.apexcharts-active .apexcharts-tooltip-marker { |
||||
|
opacity: 1; |
||||
|
} |
||||
|
|
||||
|
.apexcharts-tooltip-series-group.apexcharts-active, |
||||
|
.apexcharts-tooltip-series-group:last-child { |
||||
|
padding-bottom: 4px; |
||||
|
} |
||||
|
|
||||
|
.apexcharts-tooltip-series-group-hidden { |
||||
|
opacity: 0; |
||||
|
height: 0; |
||||
|
line-height: 0; |
||||
|
padding: 0 !important; |
||||
|
} |
||||
|
|
||||
|
.apexcharts-tooltip-y-group { |
||||
|
padding: 6px 0 5px; |
||||
|
} |
||||
|
|
||||
|
.apexcharts-tooltip-box, .apexcharts-custom-tooltip { |
||||
|
padding: 4px 8px; |
||||
|
} |
||||
|
|
||||
|
.apexcharts-tooltip-boxPlot { |
||||
|
display: flex; |
||||
|
flex-direction: column-reverse; |
||||
|
} |
||||
|
|
||||
|
.apexcharts-tooltip-box > div { |
||||
|
margin: 4px 0; |
||||
|
} |
||||
|
|
||||
|
.apexcharts-tooltip-box span.value { |
||||
|
font-weight: bold; |
||||
|
} |
||||
|
|
||||
|
.apexcharts-tooltip-rangebar { |
||||
|
padding: 5px 8px; |
||||
|
} |
||||
|
|
||||
|
.apexcharts-tooltip-rangebar .category { |
||||
|
font-weight: 600; |
||||
|
color: #777; |
||||
|
} |
||||
|
|
||||
|
.apexcharts-tooltip-rangebar .series-name { |
||||
|
font-weight: bold; |
||||
|
display: block; |
||||
|
margin-bottom: 5px; |
||||
|
} |
||||
|
|
||||
|
.apexcharts-xaxistooltip { |
||||
|
opacity: 0; |
||||
|
padding: 9px 10px; |
||||
|
pointer-events: none; |
||||
|
color: #373d3f; |
||||
|
font-size: 13px; |
||||
|
text-align: center; |
||||
|
border-radius: 2px; |
||||
|
position: absolute; |
||||
|
z-index: 10; |
||||
|
background: #ECEFF1; |
||||
|
border: 1px solid #90A4AE; |
||||
|
transition: 0.15s ease all; |
||||
|
} |
||||
|
|
||||
|
.apexcharts-xaxistooltip.apexcharts-theme-dark { |
||||
|
background: rgba(0, 0, 0, 0.7); |
||||
|
border: 1px solid rgba(0, 0, 0, 0.5); |
||||
|
color: #fff; |
||||
|
} |
||||
|
|
||||
|
.apexcharts-xaxistooltip:after, |
||||
|
.apexcharts-xaxistooltip:before { |
||||
|
left: 50%; |
||||
|
border: solid transparent; |
||||
|
content: " "; |
||||
|
height: 0; |
||||
|
width: 0; |
||||
|
position: absolute; |
||||
|
pointer-events: none; |
||||
|
} |
||||
|
|
||||
|
.apexcharts-xaxistooltip:after { |
||||
|
border-color: rgba(236, 239, 241, 0); |
||||
|
border-width: 6px; |
||||
|
margin-left: -6px; |
||||
|
} |
||||
|
|
||||
|
.apexcharts-xaxistooltip:before { |
||||
|
border-color: rgba(144, 164, 174, 0); |
||||
|
border-width: 7px; |
||||
|
margin-left: -7px; |
||||
|
} |
||||
|
|
||||
|
.apexcharts-xaxistooltip-bottom:after, |
||||
|
.apexcharts-xaxistooltip-bottom:before { |
||||
|
bottom: 100%; |
||||
|
} |
||||
|
|
||||
|
.apexcharts-xaxistooltip-top:after, |
||||
|
.apexcharts-xaxistooltip-top:before { |
||||
|
top: 100%; |
||||
|
} |
||||
|
|
||||
|
.apexcharts-xaxistooltip-bottom:after { |
||||
|
border-bottom-color: #ECEFF1; |
||||
|
} |
||||
|
|
||||
|
.apexcharts-xaxistooltip-bottom:before { |
||||
|
border-bottom-color: #90A4AE; |
||||
|
} |
||||
|
|
||||
|
.apexcharts-xaxistooltip-bottom.apexcharts-theme-dark:after { |
||||
|
border-bottom-color: rgba(0, 0, 0, 0.5); |
||||
|
} |
||||
|
|
||||
|
.apexcharts-xaxistooltip-bottom.apexcharts-theme-dark:before { |
||||
|
border-bottom-color: rgba(0, 0, 0, 0.5); |
||||
|
} |
||||
|
|
||||
|
.apexcharts-xaxistooltip-top:after { |
||||
|
border-top-color: #ECEFF1; |
||||
|
} |
||||
|
|
||||
|
.apexcharts-xaxistooltip-top:before { |
||||
|
border-top-color: #90A4AE; |
||||
|
} |
||||
|
|
||||
|
.apexcharts-xaxistooltip-top.apexcharts-theme-dark:after { |
||||
|
border-top-color: rgba(0, 0, 0, 0.5); |
||||
|
} |
||||
|
|
||||
|
.apexcharts-xaxistooltip-top.apexcharts-theme-dark:before { |
||||
|
border-top-color: rgba(0, 0, 0, 0.5); |
||||
|
} |
||||
|
|
||||
|
.apexcharts-xaxistooltip.apexcharts-active { |
||||
|
opacity: 1; |
||||
|
transition: 0.15s ease all; |
||||
|
} |
||||
|
|
||||
|
.apexcharts-yaxistooltip { |
||||
|
opacity: 0; |
||||
|
padding: 4px 10px; |
||||
|
pointer-events: none; |
||||
|
color: #373d3f; |
||||
|
font-size: 13px; |
||||
|
text-align: center; |
||||
|
border-radius: 2px; |
||||
|
position: absolute; |
||||
|
z-index: 10; |
||||
|
background: #ECEFF1; |
||||
|
border: 1px solid #90A4AE; |
||||
|
} |
||||
|
|
||||
|
.apexcharts-yaxistooltip.apexcharts-theme-dark { |
||||
|
background: rgba(0, 0, 0, 0.7); |
||||
|
border: 1px solid rgba(0, 0, 0, 0.5); |
||||
|
color: #fff; |
||||
|
} |
||||
|
|
||||
|
.apexcharts-yaxistooltip:after, |
||||
|
.apexcharts-yaxistooltip:before { |
||||
|
top: 50%; |
||||
|
border: solid transparent; |
||||
|
content: " "; |
||||
|
height: 0; |
||||
|
width: 0; |
||||
|
position: absolute; |
||||
|
pointer-events: none; |
||||
|
} |
||||
|
|
||||
|
.apexcharts-yaxistooltip:after { |
||||
|
border-color: rgba(236, 239, 241, 0); |
||||
|
border-width: 6px; |
||||
|
margin-top: -6px; |
||||
|
} |
||||
|
|
||||
|
.apexcharts-yaxistooltip:before { |
||||
|
border-color: rgba(144, 164, 174, 0); |
||||
|
border-width: 7px; |
||||
|
margin-top: -7px; |
||||
|
} |
||||
|
|
||||
|
.apexcharts-yaxistooltip-left:after, |
||||
|
.apexcharts-yaxistooltip-left:before { |
||||
|
left: 100%; |
||||
|
} |
||||
|
|
||||
|
.apexcharts-yaxistooltip-right:after, |
||||
|
.apexcharts-yaxistooltip-right:before { |
||||
|
right: 100%; |
||||
|
} |
||||
|
|
||||
|
.apexcharts-yaxistooltip-left:after { |
||||
|
border-left-color: #ECEFF1; |
||||
|
} |
||||
|
|
||||
|
.apexcharts-yaxistooltip-left:before { |
||||
|
border-left-color: #90A4AE; |
||||
|
} |
||||
|
|
||||
|
.apexcharts-yaxistooltip-left.apexcharts-theme-dark:after { |
||||
|
border-left-color: rgba(0, 0, 0, 0.5); |
||||
|
} |
||||
|
|
||||
|
.apexcharts-yaxistooltip-left.apexcharts-theme-dark:before { |
||||
|
border-left-color: rgba(0, 0, 0, 0.5); |
||||
|
} |
||||
|
|
||||
|
.apexcharts-yaxistooltip-right:after { |
||||
|
border-right-color: #ECEFF1; |
||||
|
} |
||||
|
|
||||
|
.apexcharts-yaxistooltip-right:before { |
||||
|
border-right-color: #90A4AE; |
||||
|
} |
||||
|
|
||||
|
.apexcharts-yaxistooltip-right.apexcharts-theme-dark:after { |
||||
|
border-right-color: rgba(0, 0, 0, 0.5); |
||||
|
} |
||||
|
|
||||
|
.apexcharts-yaxistooltip-right.apexcharts-theme-dark:before { |
||||
|
border-right-color: rgba(0, 0, 0, 0.5); |
||||
|
} |
||||
|
|
||||
|
.apexcharts-yaxistooltip.apexcharts-active { |
||||
|
opacity: 1; |
||||
|
} |
||||
|
|
||||
|
.apexcharts-yaxistooltip-hidden { |
||||
|
display: none; |
||||
|
} |
||||
|
|
||||
|
.apexcharts-xcrosshairs, |
||||
|
.apexcharts-ycrosshairs { |
||||
|
pointer-events: none; |
||||
|
opacity: 0; |
||||
|
transition: 0.15s ease all; |
||||
|
} |
||||
|
|
||||
|
.apexcharts-xcrosshairs.apexcharts-active, |
||||
|
.apexcharts-ycrosshairs.apexcharts-active { |
||||
|
opacity: 1; |
||||
|
transition: 0.15s ease all; |
||||
|
} |
||||
|
|
||||
|
.apexcharts-ycrosshairs-hidden { |
||||
|
opacity: 0; |
||||
|
} |
||||
|
|
||||
|
.apexcharts-selection-rect { |
||||
|
cursor: move; |
||||
|
} |
||||
|
|
||||
|
.svg_select_boundingRect, .svg_select_points_rot { |
||||
|
pointer-events: none; |
||||
|
opacity: 0; |
||||
|
visibility: hidden; |
||||
|
} |
||||
|
|
||||
|
.apexcharts-selection-rect + g .svg_select_boundingRect, |
||||
|
.apexcharts-selection-rect + g .svg_select_points_rot { |
||||
|
opacity: 0; |
||||
|
visibility: hidden; |
||||
|
} |
||||
|
|
||||
|
.apexcharts-selection-rect + g .svg_select_points_l, |
||||
|
.apexcharts-selection-rect + g .svg_select_points_r { |
||||
|
cursor: ew-resize; |
||||
|
opacity: 1; |
||||
|
visibility: visible; |
||||
|
} |
||||
|
|
||||
|
.svg_select_points { |
||||
|
fill: #efefef; |
||||
|
stroke: #333; |
||||
|
rx: 2; |
||||
|
} |
||||
|
|
||||
|
.apexcharts-svg.apexcharts-zoomable.hovering-zoom { |
||||
|
cursor: crosshair; |
||||
|
} |
||||
|
|
||||
|
.apexcharts-svg.apexcharts-zoomable.hovering-pan { |
||||
|
cursor: move; |
||||
|
} |
||||
|
|
||||
|
.apexcharts-zoom-icon, |
||||
|
.apexcharts-zoomin-icon, |
||||
|
.apexcharts-zoomout-icon, |
||||
|
.apexcharts-reset-icon, |
||||
|
.apexcharts-pan-icon, |
||||
|
.apexcharts-selection-icon, |
||||
|
.apexcharts-menu-icon, |
||||
|
.apexcharts-toolbar-custom-icon { |
||||
|
cursor: pointer; |
||||
|
width: 20px; |
||||
|
height: 20px; |
||||
|
line-height: 24px; |
||||
|
color: #6E8192; |
||||
|
text-align: center; |
||||
|
} |
||||
|
|
||||
|
.apexcharts-zoom-icon svg, |
||||
|
.apexcharts-zoomin-icon svg, |
||||
|
.apexcharts-zoomout-icon svg, |
||||
|
.apexcharts-reset-icon svg, |
||||
|
.apexcharts-menu-icon svg { |
||||
|
fill: #6E8192; |
||||
|
} |
||||
|
|
||||
|
.apexcharts-selection-icon svg { |
||||
|
fill: #444; |
||||
|
transform: scale(0.76); |
||||
|
} |
||||
|
|
||||
|
.apexcharts-theme-dark .apexcharts-zoom-icon svg, |
||||
|
.apexcharts-theme-dark .apexcharts-zoomin-icon svg, |
||||
|
.apexcharts-theme-dark .apexcharts-zoomout-icon svg, |
||||
|
.apexcharts-theme-dark .apexcharts-reset-icon svg, |
||||
|
.apexcharts-theme-dark .apexcharts-pan-icon svg, |
||||
|
.apexcharts-theme-dark .apexcharts-selection-icon svg, |
||||
|
.apexcharts-theme-dark .apexcharts-menu-icon svg, |
||||
|
.apexcharts-theme-dark .apexcharts-toolbar-custom-icon svg { |
||||
|
fill: #f3f4f5; |
||||
|
} |
||||
|
|
||||
|
.apexcharts-canvas .apexcharts-zoom-icon.apexcharts-selected svg, |
||||
|
.apexcharts-canvas .apexcharts-selection-icon.apexcharts-selected svg, |
||||
|
.apexcharts-canvas .apexcharts-reset-zoom-icon.apexcharts-selected svg { |
||||
|
fill: #008FFB; |
||||
|
} |
||||
|
|
||||
|
.apexcharts-theme-light .apexcharts-selection-icon:not(.apexcharts-selected):hover svg, |
||||
|
.apexcharts-theme-light .apexcharts-zoom-icon:not(.apexcharts-selected):hover svg, |
||||
|
.apexcharts-theme-light .apexcharts-zoomin-icon:hover svg, |
||||
|
.apexcharts-theme-light .apexcharts-zoomout-icon:hover svg, |
||||
|
.apexcharts-theme-light .apexcharts-reset-icon:hover svg, |
||||
|
.apexcharts-theme-light .apexcharts-menu-icon:hover svg { |
||||
|
fill: #333; |
||||
|
} |
||||
|
|
||||
|
.apexcharts-selection-icon, |
||||
|
.apexcharts-menu-icon { |
||||
|
position: relative; |
||||
|
} |
||||
|
|
||||
|
.apexcharts-reset-icon { |
||||
|
margin-left: 5px; |
||||
|
} |
||||
|
|
||||
|
.apexcharts-zoom-icon, |
||||
|
.apexcharts-reset-icon, |
||||
|
.apexcharts-menu-icon { |
||||
|
transform: scale(0.85); |
||||
|
} |
||||
|
|
||||
|
.apexcharts-zoomin-icon, |
||||
|
.apexcharts-zoomout-icon { |
||||
|
transform: scale(0.7); |
||||
|
} |
||||
|
|
||||
|
.apexcharts-zoomout-icon { |
||||
|
margin-right: 3px; |
||||
|
} |
||||
|
|
||||
|
.apexcharts-pan-icon { |
||||
|
transform: scale(0.62); |
||||
|
position: relative; |
||||
|
left: 1px; |
||||
|
top: 0px; |
||||
|
} |
||||
|
|
||||
|
.apexcharts-pan-icon svg { |
||||
|
fill: #fff; |
||||
|
stroke: #6E8192; |
||||
|
stroke-width: 2; |
||||
|
} |
||||
|
|
||||
|
.apexcharts-pan-icon.apexcharts-selected svg { |
||||
|
stroke: #008FFB; |
||||
|
} |
||||
|
|
||||
|
.apexcharts-pan-icon:not(.apexcharts-selected):hover svg { |
||||
|
stroke: #333; |
||||
|
} |
||||
|
|
||||
|
.apexcharts-toolbar { |
||||
|
position: absolute; |
||||
|
z-index: 11; |
||||
|
max-width: 176px; |
||||
|
text-align: right; |
||||
|
border-radius: 3px; |
||||
|
padding: 0px 6px 2px 6px; |
||||
|
display: flex; |
||||
|
justify-content: space-between; |
||||
|
align-items: center; |
||||
|
} |
||||
|
|
||||
|
.apexcharts-menu { |
||||
|
background: #fff; |
||||
|
position: absolute; |
||||
|
top: 100%; |
||||
|
border: 1px solid #ddd; |
||||
|
border-radius: 3px; |
||||
|
padding: 3px; |
||||
|
right: 10px; |
||||
|
opacity: 0; |
||||
|
min-width: 110px; |
||||
|
transition: 0.15s ease all; |
||||
|
pointer-events: none; |
||||
|
} |
||||
|
|
||||
|
.apexcharts-menu.apexcharts-menu-open { |
||||
|
opacity: 1; |
||||
|
pointer-events: all; |
||||
|
transition: 0.15s ease all; |
||||
|
} |
||||
|
|
||||
|
.apexcharts-menu-item { |
||||
|
padding: 6px 7px; |
||||
|
font-size: 12px; |
||||
|
cursor: pointer; |
||||
|
} |
||||
|
|
||||
|
.apexcharts-theme-light .apexcharts-menu-item:hover { |
||||
|
background: #eee; |
||||
|
} |
||||
|
|
||||
|
.apexcharts-theme-dark .apexcharts-menu { |
||||
|
background: rgba(0, 0, 0, 0.7); |
||||
|
color: #fff; |
||||
|
} |
||||
|
|
||||
|
@media screen and (min-width: 768px) { |
||||
|
.apexcharts-canvas:hover .apexcharts-toolbar { |
||||
|
opacity: 1; |
||||
|
} |
||||
|
} |
||||
|
.apexcharts-datalabel.apexcharts-element-hidden { |
||||
|
opacity: 0; |
||||
|
} |
||||
|
|
||||
|
.apexcharts-pie-label, |
||||
|
.apexcharts-datalabels, |
||||
|
.apexcharts-datalabel, |
||||
|
.apexcharts-datalabel-label, |
||||
|
.apexcharts-datalabel-value { |
||||
|
cursor: default; |
||||
|
pointer-events: none; |
||||
|
} |
||||
|
|
||||
|
.apexcharts-pie-label-delay { |
||||
|
opacity: 0; |
||||
|
animation-name: opaque; |
||||
|
animation-duration: 0.3s; |
||||
|
animation-fill-mode: forwards; |
||||
|
animation-timing-function: ease; |
||||
|
} |
||||
|
|
||||
|
.apexcharts-canvas .apexcharts-element-hidden { |
||||
|
opacity: 0; |
||||
|
} |
||||
|
|
||||
|
.apexcharts-hide .apexcharts-series-points { |
||||
|
opacity: 0; |
||||
|
} |
||||
|
|
||||
|
.apexcharts-gridline, |
||||
|
.apexcharts-annotation-rect, |
||||
|
.apexcharts-tooltip .apexcharts-marker, |
||||
|
.apexcharts-area-series .apexcharts-area, |
||||
|
.apexcharts-line, |
||||
|
.apexcharts-zoom-rect, |
||||
|
.apexcharts-toolbar svg, |
||||
|
.apexcharts-area-series .apexcharts-series-markers .apexcharts-marker.no-pointer-events, |
||||
|
.apexcharts-line-series .apexcharts-series-markers .apexcharts-marker.no-pointer-events, |
||||
|
.apexcharts-radar-series path, |
||||
|
.apexcharts-radar-series polygon { |
||||
|
pointer-events: none; |
||||
|
} |
||||
|
|
||||
|
/* markers */ |
||||
|
.apexcharts-marker { |
||||
|
transition: 0.15s ease all; |
||||
|
} |
||||
|
|
||||
|
@keyframes opaque { |
||||
|
0% { |
||||
|
opacity: 0; |
||||
|
} |
||||
|
100% { |
||||
|
opacity: 1; |
||||
|
} |
||||
|
} |
||||
|
/* Resize generated styles */ |
||||
|
@keyframes resizeanim { |
||||
|
from { |
||||
|
opacity: 0; |
||||
|
} |
||||
|
to { |
||||
|
opacity: 0; |
||||
|
} |
||||
|
} |
||||
|
.resize-triggers { |
||||
|
animation: 1ms resizeanim; |
||||
|
visibility: hidden; |
||||
|
opacity: 0; |
||||
|
} |
||||
|
|
||||
|
.resize-triggers, |
||||
|
.resize-triggers > div, |
||||
|
.contract-trigger:before { |
||||
|
content: " "; |
||||
|
display: block; |
||||
|
position: absolute; |
||||
|
top: 0; |
||||
|
left: 0; |
||||
|
height: 100%; |
||||
|
width: 100%; |
||||
|
overflow: hidden; |
||||
|
} |
||||
|
|
||||
|
.resize-triggers > div { |
||||
|
background: #eee; |
||||
|
overflow: auto; |
||||
|
} |
||||
|
|
||||
|
.contract-trigger:before { |
||||
|
width: 200%; |
||||
|
height: 200%; |
||||
|
} |
||||
|
|
||||
|
.light-style .apexcharts-canvas .apexcharts-tooltip { |
||||
|
background: #fff; |
||||
|
border-color: #d9dee3; |
||||
|
box-shadow: 0 0.25rem 1rem rgba(161, 172, 184, 0.45); |
||||
|
} |
||||
|
.light-style .apexcharts-canvas .apexcharts-tooltip .apexcharts-tooltip-title { |
||||
|
background: #fff; |
||||
|
border-color: #d9dee3; |
||||
|
font-family: var(--bs-font-sans-serif) !important; |
||||
|
font-weight: 600; |
||||
|
} |
||||
|
.light-style .apexcharts-canvas .apexcharts-xaxistooltip, |
||||
|
.light-style .apexcharts-canvas .apexcharts-yaxistooltip { |
||||
|
background: #f5f5f9; |
||||
|
border-color: #d9dee3; |
||||
|
} |
||||
|
.light-style .apexcharts-canvas .apexcharts-xaxistooltip.apexcharts-xaxistooltip-bottom:after, .light-style .apexcharts-canvas .apexcharts-xaxistooltip.apexcharts-yaxistooltip-bottom:after, |
||||
|
.light-style .apexcharts-canvas .apexcharts-yaxistooltip.apexcharts-xaxistooltip-bottom:after, |
||||
|
.light-style .apexcharts-canvas .apexcharts-yaxistooltip.apexcharts-yaxistooltip-bottom:after { |
||||
|
border-bottom-color: #f5f5f9; |
||||
|
} |
||||
|
.light-style .apexcharts-canvas .apexcharts-xaxistooltip.apexcharts-xaxistooltip-bottom:before, .light-style .apexcharts-canvas .apexcharts-xaxistooltip.apexcharts-yaxistooltip-bottom:before, |
||||
|
.light-style .apexcharts-canvas .apexcharts-yaxistooltip.apexcharts-xaxistooltip-bottom:before, |
||||
|
.light-style .apexcharts-canvas .apexcharts-yaxistooltip.apexcharts-yaxistooltip-bottom:before { |
||||
|
border-bottom-color: #d9dee3; |
||||
|
} |
||||
|
.light-style .apexcharts-canvas .apexcharts-xaxistooltip.apexcharts-xaxistooltip-left:after, .light-style .apexcharts-canvas .apexcharts-xaxistooltip.apexcharts-yaxistooltip-left:after, |
||||
|
.light-style .apexcharts-canvas .apexcharts-yaxistooltip.apexcharts-xaxistooltip-left:after, |
||||
|
.light-style .apexcharts-canvas .apexcharts-yaxistooltip.apexcharts-yaxistooltip-left:after { |
||||
|
border-left-color: #f5f5f9; |
||||
|
} |
||||
|
.light-style .apexcharts-canvas .apexcharts-xaxistooltip.apexcharts-xaxistooltip-left:before, .light-style .apexcharts-canvas .apexcharts-xaxistooltip.apexcharts-yaxistooltip-left:before, |
||||
|
.light-style .apexcharts-canvas .apexcharts-yaxistooltip.apexcharts-xaxistooltip-left:before, |
||||
|
.light-style .apexcharts-canvas .apexcharts-yaxistooltip.apexcharts-yaxistooltip-left:before { |
||||
|
border-left-color: #d9dee3; |
||||
|
} |
||||
|
.light-style .apexcharts-canvas .apexcharts-xaxistooltip.apexcharts-xaxistooltip-right:after, .light-style .apexcharts-canvas .apexcharts-xaxistooltip.apexcharts-yaxistooltip-right:after, |
||||
|
.light-style .apexcharts-canvas .apexcharts-yaxistooltip.apexcharts-xaxistooltip-right:after, |
||||
|
.light-style .apexcharts-canvas .apexcharts-yaxistooltip.apexcharts-yaxistooltip-right:after { |
||||
|
border-right-color: #f5f5f9; |
||||
|
} |
||||
|
.light-style .apexcharts-canvas .apexcharts-xaxistooltip.apexcharts-xaxistooltip-right:before, .light-style .apexcharts-canvas .apexcharts-xaxistooltip.apexcharts-yaxistooltip-right:before, |
||||
|
.light-style .apexcharts-canvas .apexcharts-yaxistooltip.apexcharts-xaxistooltip-right:before, |
||||
|
.light-style .apexcharts-canvas .apexcharts-yaxistooltip.apexcharts-yaxistooltip-right:before { |
||||
|
border-right-color: #d9dee3; |
||||
|
} |
||||
|
.light-style .apexcharts-canvas .apexcharts-xaxistooltip.apexcharts-xaxistooltip-top:after, .light-style .apexcharts-canvas .apexcharts-xaxistooltip.apexcharts-yaxistooltip-top:after, |
||||
|
.light-style .apexcharts-canvas .apexcharts-yaxistooltip.apexcharts-xaxistooltip-top:after, |
||||
|
.light-style .apexcharts-canvas .apexcharts-yaxistooltip.apexcharts-yaxistooltip-top:after { |
||||
|
border-top-color: #f5f5f9; |
||||
|
} |
||||
|
.light-style .apexcharts-canvas .apexcharts-xaxistooltip.apexcharts-xaxistooltip-top:before, .light-style .apexcharts-canvas .apexcharts-xaxistooltip.apexcharts-yaxistooltip-top:before, |
||||
|
.light-style .apexcharts-canvas .apexcharts-yaxistooltip.apexcharts-xaxistooltip-top:before, |
||||
|
.light-style .apexcharts-canvas .apexcharts-yaxistooltip.apexcharts-yaxistooltip-top:before { |
||||
|
border-top-color: #d9dee3; |
||||
|
} |
||||
|
.light-style .apexcharts-canvas .apexcharts-tooltip-text { |
||||
|
font-family: var(--bs-font-sans-serif) !important; |
||||
|
filter: none; |
||||
|
} |
||||
|
.light-style .apexcharts-canvas .apexcharts-marker { |
||||
|
filter: drop-shadow(0 2px 4px #a1acb866); |
||||
|
} |
||||
File diff suppressed because one or more lines are too long
@ -0,0 +1 @@ |
|||||
|
@import '../../node_modules/highlight.js/styles/github.css'; |
||||
@ -0,0 +1,95 @@ |
|||||
|
/* |
||||
|
|
||||
|
Atom One Light by Daniel Gamage |
||||
|
Original One Light Syntax theme from https://github.com/atom/one-light-syntax |
||||
|
|
||||
|
base: #fafafa |
||||
|
mono-1: #383a42 |
||||
|
mono-2: #686b77 |
||||
|
mono-3: #a0a1a7 |
||||
|
hue-1: #0184bb |
||||
|
hue-2: #4078f2 |
||||
|
hue-3: #a626a4 |
||||
|
hue-4: #50a14f |
||||
|
hue-5: #e45649 |
||||
|
hue-5-2: #c91243 |
||||
|
hue-6: #986801 |
||||
|
hue-6-2: #c18401 |
||||
|
|
||||
|
*/ |
||||
|
.hljs { |
||||
|
display: block; |
||||
|
overflow-x: auto; |
||||
|
padding: 0.5em; |
||||
|
color: #383a42; |
||||
|
background: #fafafa; |
||||
|
} |
||||
|
|
||||
|
.hljs-comment, |
||||
|
.hljs-quote { |
||||
|
color: #a0a1a7; |
||||
|
font-style: italic; |
||||
|
} |
||||
|
|
||||
|
.hljs-doctag, |
||||
|
.hljs-keyword, |
||||
|
.hljs-formula { |
||||
|
color: #a626a4; |
||||
|
} |
||||
|
|
||||
|
.hljs-section, |
||||
|
.hljs-name, |
||||
|
.hljs-selector-tag, |
||||
|
.hljs-deletion, |
||||
|
.hljs-subst { |
||||
|
color: #e45649; |
||||
|
} |
||||
|
|
||||
|
.hljs-literal { |
||||
|
color: #0184bb; |
||||
|
} |
||||
|
|
||||
|
.hljs-string, |
||||
|
.hljs-regexp, |
||||
|
.hljs-addition, |
||||
|
.hljs-attribute, |
||||
|
.hljs-meta-string { |
||||
|
color: #50a14f; |
||||
|
} |
||||
|
|
||||
|
.hljs-built_in, |
||||
|
.hljs-class .hljs-title { |
||||
|
color: #c18401; |
||||
|
} |
||||
|
|
||||
|
.hljs-attr, |
||||
|
.hljs-variable, |
||||
|
.hljs-template-variable, |
||||
|
.hljs-type, |
||||
|
.hljs-selector-class, |
||||
|
.hljs-selector-attr, |
||||
|
.hljs-selector-pseudo, |
||||
|
.hljs-number { |
||||
|
color: #986801; |
||||
|
} |
||||
|
|
||||
|
.hljs-symbol, |
||||
|
.hljs-bullet, |
||||
|
.hljs-link, |
||||
|
.hljs-meta, |
||||
|
.hljs-selector-id, |
||||
|
.hljs-title { |
||||
|
color: #4078f2; |
||||
|
} |
||||
|
|
||||
|
.hljs-emphasis { |
||||
|
font-style: italic; |
||||
|
} |
||||
|
|
||||
|
.hljs-strong { |
||||
|
font-weight: bold; |
||||
|
} |
||||
|
|
||||
|
.hljs-link { |
||||
|
text-decoration: underline; |
||||
|
} |
||||
File diff suppressed because one or more lines are too long
File diff suppressed because one or more lines are too long
File diff suppressed because one or more lines are too long
@ -0,0 +1,211 @@ |
|||||
|
/* |
||||
|
* Container style |
||||
|
*/ |
||||
|
.ps { |
||||
|
overflow: hidden !important; |
||||
|
overflow-anchor: none; |
||||
|
-ms-overflow-style: none; |
||||
|
touch-action: auto; |
||||
|
-ms-touch-action: auto; |
||||
|
} |
||||
|
|
||||
|
/* |
||||
|
* Scrollbar rail styles |
||||
|
*/ |
||||
|
.ps__rail-x { |
||||
|
display: none; |
||||
|
opacity: 0; |
||||
|
transition: background-color 0.2s linear, opacity 0.2s linear; |
||||
|
-webkit-transition: background-color 0.2s linear, opacity 0.2s linear; |
||||
|
height: 15px; |
||||
|
/* there must be 'bottom' or 'top' for ps__rail-x */ |
||||
|
bottom: 0px; |
||||
|
/* please don't change 'position' */ |
||||
|
position: absolute; |
||||
|
} |
||||
|
|
||||
|
.ps__rail-y { |
||||
|
display: none; |
||||
|
opacity: 0; |
||||
|
transition: background-color 0.2s linear, opacity 0.2s linear; |
||||
|
-webkit-transition: background-color 0.2s linear, opacity 0.2s linear; |
||||
|
width: 15px; |
||||
|
/* there must be 'right' or 'left' for ps__rail-y */ |
||||
|
right: 0; |
||||
|
/* please don't change 'position' */ |
||||
|
position: absolute; |
||||
|
} |
||||
|
|
||||
|
.ps--active-x > .ps__rail-x, |
||||
|
.ps--active-y > .ps__rail-y { |
||||
|
display: block; |
||||
|
background-color: transparent; |
||||
|
} |
||||
|
|
||||
|
.ps:hover > .ps__rail-x, |
||||
|
.ps:hover > .ps__rail-y, |
||||
|
.ps--focus > .ps__rail-x, |
||||
|
.ps--focus > .ps__rail-y, |
||||
|
.ps--scrolling-x > .ps__rail-x, |
||||
|
.ps--scrolling-y > .ps__rail-y { |
||||
|
opacity: 0.6; |
||||
|
} |
||||
|
|
||||
|
.ps .ps__rail-x:hover, |
||||
|
.ps .ps__rail-y:hover, |
||||
|
.ps .ps__rail-x:focus, |
||||
|
.ps .ps__rail-y:focus, |
||||
|
.ps .ps__rail-x.ps--clicking, |
||||
|
.ps .ps__rail-y.ps--clicking { |
||||
|
background-color: #eee; |
||||
|
opacity: 0.9; |
||||
|
} |
||||
|
|
||||
|
/* |
||||
|
* Scrollbar thumb styles |
||||
|
*/ |
||||
|
.ps__thumb-x { |
||||
|
background-color: #aaa; |
||||
|
border-radius: 6px; |
||||
|
transition: background-color 0.2s linear, height 0.2s ease-in-out; |
||||
|
-webkit-transition: background-color 0.2s linear, height 0.2s ease-in-out; |
||||
|
height: 6px; |
||||
|
/* there must be 'bottom' for ps__thumb-x */ |
||||
|
bottom: 2px; |
||||
|
/* please don't change 'position' */ |
||||
|
position: absolute; |
||||
|
} |
||||
|
|
||||
|
.ps__thumb-y { |
||||
|
background-color: #aaa; |
||||
|
border-radius: 6px; |
||||
|
transition: background-color 0.2s linear, width 0.2s ease-in-out; |
||||
|
-webkit-transition: background-color 0.2s linear, width 0.2s ease-in-out; |
||||
|
width: 6px; |
||||
|
/* there must be 'right' for ps__thumb-y */ |
||||
|
right: 2px; |
||||
|
/* please don't change 'position' */ |
||||
|
position: absolute; |
||||
|
} |
||||
|
|
||||
|
.ps__rail-x:hover > .ps__thumb-x, |
||||
|
.ps__rail-x:focus > .ps__thumb-x, |
||||
|
.ps__rail-x.ps--clicking .ps__thumb-x { |
||||
|
background-color: #999; |
||||
|
height: 11px; |
||||
|
} |
||||
|
|
||||
|
.ps__rail-y:hover > .ps__thumb-y, |
||||
|
.ps__rail-y:focus > .ps__thumb-y, |
||||
|
.ps__rail-y.ps--clicking .ps__thumb-y { |
||||
|
background-color: #999; |
||||
|
width: 11px; |
||||
|
} |
||||
|
|
||||
|
/* MS supports */ |
||||
|
@supports (-ms-overflow-style: none) { |
||||
|
.ps { |
||||
|
overflow: auto !important; |
||||
|
} |
||||
|
} |
||||
|
@media screen and (-ms-high-contrast: active), (-ms-high-contrast: none) { |
||||
|
.ps { |
||||
|
overflow: auto !important; |
||||
|
} |
||||
|
} |
||||
|
.ps { |
||||
|
position: relative; |
||||
|
} |
||||
|
|
||||
|
.ps__rail-x { |
||||
|
height: 0.25rem; |
||||
|
} |
||||
|
|
||||
|
.ps__rail-y { |
||||
|
width: 0.25rem; |
||||
|
} |
||||
|
|
||||
|
.ps__rail-x, |
||||
|
.ps__rail-y, |
||||
|
.ps__thumb-x, |
||||
|
.ps__thumb-y { |
||||
|
border-radius: 10rem; |
||||
|
} |
||||
|
|
||||
|
.ps__rail-x:hover, |
||||
|
.ps__rail-x:focus, |
||||
|
.ps__rail-x.ps--clicking, |
||||
|
.ps__rail-x:hover > .ps__thumb-x, |
||||
|
.ps__rail-x:focus > .ps__thumb-x, |
||||
|
.ps__rail-x.ps--clicking > .ps__thumb-x { |
||||
|
height: 0.375rem; |
||||
|
} |
||||
|
|
||||
|
.ps__rail-y:hover, |
||||
|
.ps__rail-y:focus, |
||||
|
.ps__rail-y.ps--clicking, |
||||
|
.ps__rail-y:hover > .ps__thumb-y, |
||||
|
.ps__rail-y:focus > .ps__thumb-y, |
||||
|
.ps__rail-y.ps--clicking > .ps__thumb-y { |
||||
|
width: 0.375rem; |
||||
|
} |
||||
|
|
||||
|
.ps__thumb-x { |
||||
|
height: 0.25rem; |
||||
|
bottom: 0; |
||||
|
} |
||||
|
|
||||
|
.ps__thumb-y { |
||||
|
width: 0.25rem; |
||||
|
right: 0; |
||||
|
} |
||||
|
|
||||
|
.light-style .ps__thumb-x, |
||||
|
.light-style .ps__thumb-y { |
||||
|
background-color: rgba(67, 89, 113, 0.4); |
||||
|
} |
||||
|
.light-style .ps__rail-x:hover, |
||||
|
.light-style .ps__rail-y:hover, |
||||
|
.light-style .ps__rail-x:focus, |
||||
|
.light-style .ps__rail-y:focus, |
||||
|
.light-style .ps__rail-x.ps--clicking, |
||||
|
.light-style .ps__rail-y.ps--clicking { |
||||
|
background-color: rgba(67, 89, 113, 0.2); |
||||
|
} |
||||
|
.light-style .ps__rail-x:hover > .ps__thumb-x, |
||||
|
.light-style .ps__rail-y:hover > .ps__thumb-y, |
||||
|
.light-style .ps__rail-x:focus > .ps__thumb-x, |
||||
|
.light-style .ps__rail-y:focus > .ps__thumb-y, |
||||
|
.light-style .ps__rail-x.ps--clicking > .ps__thumb-x, |
||||
|
.light-style .ps__rail-y.ps--clicking > .ps__thumb-y { |
||||
|
background-color: rgba(67, 89, 113, 0.7); |
||||
|
} |
||||
|
.light-style .ps-inverted .ps__rail-x:hover, |
||||
|
.light-style .ps-inverted .ps__rail-y:hover, |
||||
|
.light-style .ps-inverted .ps__rail-x:focus, |
||||
|
.light-style .ps-inverted .ps__rail-y:focus, |
||||
|
.light-style .ps-inverted .ps__rail-x.ps--clicking, |
||||
|
.light-style .ps-inverted .ps__rail-y.ps--clicking { |
||||
|
background-color: rgba(255, 255, 255, 0.5); |
||||
|
} |
||||
|
.light-style .ps-inverted .ps__thumb-x, |
||||
|
.light-style .ps-inverted .ps__thumb-y { |
||||
|
background-color: rgba(255, 255, 255, 0.7); |
||||
|
} |
||||
|
.light-style .ps-inverted .ps__rail-x:hover > .ps__thumb-x, |
||||
|
.light-style .ps-inverted .ps__rail-y:hover > .ps__thumb-y, |
||||
|
.light-style .ps-inverted .ps__rail-x:focus > .ps__thumb-x, |
||||
|
.light-style .ps-inverted .ps__rail-y:focus > .ps__thumb-y, |
||||
|
.light-style .ps-inverted .ps__rail-x.ps--clicking > .ps__thumb-x, |
||||
|
.light-style .ps-inverted .ps__rail-y.ps--clicking > .ps__thumb-y { |
||||
|
background-color: #fff; |
||||
|
} |
||||
|
|
||||
|
@supports (-moz-appearance: none) { |
||||
|
#both-scrollbars-example { |
||||
|
max-width: 1080px; |
||||
|
margin: 0 auto; |
||||
|
padding-left: 0; |
||||
|
padding-right: 0; |
||||
|
} |
||||
|
} |
||||
File diff suppressed because one or more lines are too long
File diff suppressed because one or more lines are too long
Loading…
Reference in new issue