Update Metronic v8.2.1

This commit is contained in:
Daeng Deni Mardaeni 2023-11-03 16:12:15 +07:00
parent 054743f3a0
commit 1c297c9c8a
177 changed files with 6577 additions and 3887 deletions

BIN
.DS_Store vendored Normal file

Binary file not shown.

BIN
app/.DS_Store vendored Normal file

Binary file not shown.

View File

@ -0,0 +1,100 @@
<?php
namespace App\Actions;
use Illuminate\Http\Request;
use Illuminate\Support\Facades\DB;
use Illuminate\Support\Facades\Validator;
use Spatie\Permission\Models\Permission;
class SamplePermissionApi
{
public function datatableList(Request $request)
{
$draw = $request->input('draw', 0);
$start = $request->input('start', 0);
$length = $request->input('length', 10);
$columns = $request->input('columns');
$searchValue = $request->input('search.value');
$orderColumn = $request->input('order.0.column', 0); // Get the order column index
$orderDir = $request->input('order.0.dir', 'asc'); // Get the order direction (ASC or DESC)
$query = Permission::query()->with('roles');
if ($searchValue) {
$searchColumns = ['name'];
$query->where(function ($query) use ($searchValue, $searchColumns) {
foreach ($searchColumns as $column) {
$query->orWhere(DB::raw("LOWER($column)"), 'LIKE', '%' . strtolower($searchValue) . '%');
}
});
}
// Get the column name for ordering based on the orderColumn index
$orderColumnName = $columns[$orderColumn]['data'] ?? 'id';
// Apply ordering to the query
$query->orderBy($orderColumnName, $orderDir);
$totalRecords = $query->count();
$records = $query->offset($start)->limit($length)->get();
$data = [
'draw' => $draw,
'recordsTotal' => $totalRecords,
'recordsFiltered' => $totalRecords,
'data' => $records,
'orderColumnName' => $orderColumnName,
];
return $data;
}
public function create(Request $request)
{
$permission = $request->all();
$rules = [
'name' => 'required|string',
];
$validator = Validator::make($permission, $rules);
if ($validator->fails()) {
return response()->json(['errors' => $validator->errors()], 400);
}
$updated = Permission::create($permission);
return response()->json(['success' => $updated]);
}
public function get($id)
{
return Permission::findOrFail($id);
}
public function update($id, Request $request)
{
$permission = $request->all();
$rules = [
'name' => 'required|string',
];
$validator = Validator::make($permission, $rules);
if ($validator->fails()) {
return response()->json(['errors' => $validator->errors()], 400);
}
$updated = Permission::findOrFail($id)->update($permission);
return response()->json(['success' => $updated]);
}
public function delete($id)
{
return Permission::destroy($id);
}
}

View File

@ -0,0 +1,171 @@
<?php
namespace App\Actions;
use App\Models\User;
use Illuminate\Http\Request;
use Illuminate\Support\Facades\DB;
use Illuminate\Support\Facades\Validator;
use Spatie\Permission\Models\Role;
class SampleRoleApi
{
public $roles_description = [
'administrator' => 'Best for business owners and company administrators',
'developer' => 'Best for developers or people primarily using the API',
'analyst' => 'Best for people who need full access to analytics data, but don\'t need to update business settings',
'support' => 'Best for employees who regularly refund payments and respond to disputes',
'trial' => 'Best for people who need to preview content data, but don\'t need to make any updates',
];
public function datatableList(Request $request)
{
$draw = $request->input('draw', 0);
$start = $request->input('start', 0);
$length = $request->input('length', 10);
$columns = $request->input('columns');
$searchValue = $request->input('search.value');
$orderColumn = $request->input('order.0.column', 0); // Get the order column index
$orderDir = $request->input('order.0.dir', 'asc'); // Get the order direction (ASC or DESC)
$query = Role::query()->with('permissions')->with('users');
if ($searchValue) {
$searchColumns = ['name'];
$query->where(function ($query) use ($searchValue, $searchColumns) {
foreach ($searchColumns as $column) {
$query->orWhere(DB::raw("LOWER($column)"), 'LIKE', '%' . strtolower($searchValue) . '%');
}
});
}
// Get the column name for ordering based on the orderColumn index
$orderColumnName = $columns[$orderColumn]['data'] ?? 'id';
// Apply ordering to the query
$query->orderBy($orderColumnName, $orderDir);
$totalRecords = $query->count();
$records = $query->offset($start)->limit($length)->get();
foreach ($records as $i => $role) {
$records[$i]->description = $this->roles_description[$role->name] ?? '';
}
$data = [
'draw' => $draw,
'recordsTotal' => $totalRecords,
'recordsFiltered' => $totalRecords,
'data' => $records,
'orderColumnName' => $orderColumnName,
];
return $data;
}
public function usersDatatableList(Request $request)
{
$role_id = $request->input('id', 0);
$draw = $request->input('draw', 0);
$start = $request->input('start', 0);
$length = $request->input('length', 10);
$columns = $request->input('columns');
$searchValue = $request->input('search.value');
$orderColumn = $request->input('order.0.column', 0); // Get the order column index
$orderDir = $request->input('order.0.dir', 'asc'); // Get the order direction (ASC or DESC)
$query = User::whereHas('roles', function ($query) use ($role_id) {
$query->where('id', $role_id);
})->with('roles');
if ($searchValue) {
$searchColumns = ['name'];
$query->where(function ($query) use ($searchValue, $searchColumns) {
foreach ($searchColumns as $column) {
$query->orWhere(DB::raw("LOWER($column)"), 'LIKE', '%' . strtolower($searchValue) . '%');
}
});
}
// Get the column name for ordering based on the orderColumn index
$orderColumnName = $columns[$orderColumn]['data'] ?? 'id';
// Apply ordering to the query
$query->orderBy($orderColumnName, $orderDir);
$totalRecords = $query->count();
$records = $query->offset($start)->limit($length)->get();
$data = [
'role_id' => $role_id,
'draw' => $draw,
'recordsTotal' => $totalRecords,
'recordsFiltered' => $totalRecords,
'data' => $records,
'orderColumnName' => $orderColumnName,
];
return $data;
}
public function create(Request $request)
{
$role = $request->all();
$rules = [
'name' => 'required|string',
];
$validator = Validator::make($role, $rules);
if ($validator->fails()) {
return response()->json(['errors' => $validator->errors()], 400);
}
$updated = Role::create($role);
return response()->json(['success' => $updated]);
}
public function get($id, $relations = ['permissions', 'users'])
{
return Role::with($relations)->findOrFail($id);
}
public function update($id, Request $request)
{
$role = $request->all();
$rules = [
'name' => 'required|string',
];
$validator = Validator::make($role, $rules);
if ($validator->fails()) {
return response()->json(['errors' => $validator->errors()], 400);
}
$updated = Role::findOrFail($id)->update($role);
return response()->json(['success' => $updated]);
}
public function delete($id)
{
return Role::destroy($id);
}
public function deleteUser($id, $user_id = null)
{
$user = User::find($user_id);
if ($user) {
return $user->roles()->detach($id);
}
return false;
}
}

View File

@ -0,0 +1,102 @@
<?php
namespace App\Actions;
use App\Models\User;
use Illuminate\Http\Request;
use Illuminate\Support\Facades\DB;
use Illuminate\Support\Facades\Validator;
class SampleUserApi
{
public function datatableList(Request $request)
{
$draw = $request->input('draw', 0);
$start = $request->input('start', 0);
$length = $request->input('length', 10);
$columns = $request->input('columns');
$searchValue = $request->input('search.value');
$orderColumn = $request->input('order.0.column', 0); // Get the order column index
$orderDir = $request->input('order.0.dir', 'asc'); // Get the order direction (ASC or DESC)
$query = User::query()->with('roles');
if ($searchValue) {
$searchColumns = ['name', 'email'];
$query->where(function ($query) use ($searchValue, $searchColumns) {
foreach ($searchColumns as $column) {
$query->orWhere(DB::raw("LOWER($column)"), 'LIKE', '%' . strtolower($searchValue) . '%');
}
});
}
// Get the column name for ordering based on the orderColumn index
$orderColumnName = $columns[$orderColumn]['data'] ?? 'id';
// exclude core user for demo purpose
$query->whereNotIn('id', [1]);
// Apply ordering to the query
$query->orderBy($orderColumnName, $orderDir);
$totalRecords = $query->count();
$records = $query->offset($start)->limit($length)->get();
$data = [
'draw' => $draw,
'recordsTotal' => $totalRecords,
'recordsFiltered' => $totalRecords,
'data' => $records,
'orderColumnName' => $orderColumnName,
];
return $data;
}
public function create(Request $request)
{
$user = $request->all();
$rules = [
'name' => 'required|string',
'email' => 'required|email|unique:users,email',
];
$validator = Validator::make($user, $rules);
if ($validator->fails()) {
return response()->json(['errors' => $validator->errors()], 400);
}
$updated = User::create($user);
return response()->json(['success' => $updated]);
}
public function get($id)
{
return User::findOrFail($id);
}
public function update($id, Request $request)
{
$data = $request->validate([
'name' => 'required|string',
'email' => 'required|email|unique:users,email,' . $id,
'role' => 'required|string',
]);
$user = User::findOrFail($id);
$user->update($data);
$user->assignRole($request->role);
return response()->json(['success' => true]);
}
public function delete($id)
{
return User::destroy($id);
}
}

View File

@ -24,13 +24,13 @@ class PermissionsDataTable extends DataTable
})
->addColumn('assigned_to', function (Permission $permission) {
$roles = $permission->roles;
return view('pages.apps.user-management.permissions.columns._assign-to', compact('roles'));
return view('pages/apps.user-management.permissions.columns._assign-to', compact('roles'));
})
->editColumn('created_at', function (Permission $permission) {
return $permission->created_at->format('d M Y, h:i a');
})
->addColumn('actions', function (Permission $permission) {
return view('pages.apps.user-management.permissions.columns._actions', compact('permission'));
return view('pages/apps.user-management.permissions.columns._actions', compact('permission'));
})
->setRowId('id');
}
@ -56,7 +56,7 @@ class PermissionsDataTable extends DataTable
->addTableClass('table align-middle table-row-dashed fs-6 gy-5 dataTable no-footer text-gray-600 fw-semibold')
->setTableHeadClass('text-start text-muted fw-bold fs-7 text-uppercase gs-0')
->orderBy(0)
->drawCallback("function() {" . file_get_contents(resource_path('views/pages//apps/user-management/permissions/columns/_draw-scripts.js')) . "}");
->drawCallback("function() {" . file_get_contents(resource_path('views/pages/apps/user-management/permissions/columns/_draw-scripts.js')) . "}");
}
/**

View File

@ -23,13 +23,13 @@ class UsersAssignedRoleDataTable extends DataTable
return (new EloquentDataTable($query))
->rawColumns(['user'])
->editColumn('user', function (User $user) {
return view('pages.apps.user-management.roles.columns._user', compact('user'));
return view('pages/apps.user-management.roles.columns._user', compact('user'));
})
->editColumn('created_at', function (User $user) {
return $user->created_at->format('d M Y, h:i a');
})
->addColumn('action', function (User $user) {
return view('pages.apps.user-management.roles.columns._actions', compact('user'));
return view('pages/apps.user-management.roles.columns._actions', compact('user'));
})
->setRowId('id');
}
@ -57,7 +57,7 @@ class UsersAssignedRoleDataTable extends DataTable
->addTableClass('table align-middle table-row-dashed fs-6 gy-5 dataTable no-footer text-gray-600 fw-semibold')
->setTableHeadClass('text-start text-muted fw-bold fs-7 text-uppercase gs-0')
->orderBy(1)
->drawCallback("function() {" . file_get_contents(resource_path('views/pages//apps/user-management/users/columns/_draw-scripts.js')) . "}");
->drawCallback("function() {" . file_get_contents(resource_path('views/pages/apps/user-management/users/columns/_draw-scripts.js')) . "}");
}
/**

View File

@ -21,7 +21,7 @@ class UsersDataTable extends DataTable
return (new EloquentDataTable($query))
->rawColumns(['user', 'last_login_at'])
->editColumn('user', function (User $user) {
return view('pages.apps.user-management.users.columns._user', compact('user'));
return view('pages/apps.user-management.users.columns._user', compact('user'));
})
->editColumn('role', function (User $user) {
return ucwords($user->roles->first()?->name);
@ -33,7 +33,7 @@ class UsersDataTable extends DataTable
return $user->created_at->format('d M Y, h:i a');
})
->addColumn('action', function (User $user) {
return view('pages.apps.user-management.users.columns._actions', compact('user'));
return view('pages/apps.user-management.users.columns._actions', compact('user'));
})
->setRowId('id');
}
@ -60,7 +60,7 @@ class UsersDataTable extends DataTable
->addTableClass('table align-middle table-row-dashed fs-6 gy-5 dataTable no-footer text-gray-600 fw-semibold')
->setTableHeadClass('text-start text-muted fw-bold fs-7 text-uppercase gs-0')
->orderBy(2)
->drawCallback("function() {" . file_get_contents(resource_path('views/pages//apps/user-management/users/columns/_draw-scripts.js')) . "}");
->drawCallback("function() {" . file_get_contents(resource_path('views/pages/apps/user-management/users/columns/_draw-scripts.js')) . "}");
}
/**

View File

@ -13,7 +13,7 @@ class PermissionManagementController extends Controller
*/
public function index(PermissionsDataTable $dataTable)
{
return $dataTable->render('pages.apps.user-management.permissions.list');
return $dataTable->render('pages/apps.user-management.permissions.list');
}
/**

View File

@ -14,7 +14,7 @@ class RoleManagementController extends Controller
*/
public function index()
{
return view('pages.apps.user-management.roles.list');
return view('pages/apps.user-management.roles.list');
}
/**
@ -39,7 +39,7 @@ class RoleManagementController extends Controller
public function show(Role $role, UsersAssignedRoleDataTable $dataTable)
{
return $dataTable->with('role', $role)
->render('pages.apps.user-management.roles.show', compact('role'));
->render('pages/apps.user-management.roles.show', compact('role'));
}
/**

View File

@ -14,7 +14,7 @@ class UserManagementController extends Controller
*/
public function index(UsersDataTable $dataTable)
{
return $dataTable->render('pages.apps.user-management.users.list');
return $dataTable->render('pages/apps.user-management.users.list');
}
/**
@ -38,7 +38,7 @@ class UserManagementController extends Controller
*/
public function show(User $user)
{
return view('pages.apps.user-management.users.show', compact('user'));
return view('pages/apps.user-management.users.show', compact('user'));
}
/**

View File

@ -20,7 +20,7 @@ class AuthenticatedSessionController extends Controller
{
addJavascriptFile('assets/js/custom/authentication/sign-in/general.js');
return view('pages.auth.login');
return view('pages/auth.login');
}
/**

View File

@ -17,7 +17,7 @@ class ConfirmablePasswordController extends Controller
*/
public function show()
{
return view('pages.auth.confirm-password');
return view('pages/auth.confirm-password');
}
/**

View File

@ -18,6 +18,6 @@ class EmailVerificationPromptController extends Controller
{
return $request->user()->hasVerifiedEmail()
? redirect()->intended(RouteServiceProvider::HOME)
: view('pages.auth.verify-email');
: view('pages/auth.verify-email');
}
}

View File

@ -22,7 +22,7 @@ class NewPasswordController extends Controller
{
addJavascriptFile('assets/js/custom/authentication/reset-password/new-password.js');
return view('pages.auth.reset-password', ['request' => $request]);
return view('pages/auth.reset-password', ['request' => $request]);
}
/**

View File

@ -17,7 +17,7 @@ class PasswordResetLinkController extends Controller
{
addJavascriptFile('assets/js/custom/authentication/reset-password/reset-password.js');
return view('pages.auth.forgot-password');
return view('pages/auth.forgot-password');
}
/**

View File

@ -23,7 +23,7 @@ class RegisteredUserController extends Controller
{
addJavascriptFile('assets/js/custom/authentication/sign-up/general.js');
return view('pages.auth.register');
return view('pages/auth.register');
}
/**

View File

@ -8,6 +8,6 @@ class DashboardController extends Controller
{
addVendors(['amcharts', 'amcharts-maps', 'amcharts-stock']);
return view('pages.dashboards.index');
return view('pages/dashboards.index');
}
}

View File

@ -15,6 +15,7 @@ class AddUserModal extends Component
{
use WithFileUploads;
public $user_id;
public $name;
public $email;
public $role;
@ -76,10 +77,16 @@ class AddUserModal extends Component
}
// Create a new user record in the database
$user = User::updateOrCreate([
$user = $this->user_id ? User::find($this->user_id) : User::updateOrCreate([
'email' => $this->email,
], $data);
if ($this->edit_mode) {
foreach ($data as $k => $v) {
$user->$k = $v;
}
}
if ($this->edit_mode) {
// Assign selected role for user
$user->syncRoles($this->role);
@ -123,6 +130,7 @@ class AddUserModal extends Component
$user = User::find($id);
$this->user_id = $user->id;
$this->saved_avatar = $user->profile_photo_url;
$this->name = $user->name;
$this->email = $user->email;

11
app/Models/Address.php Normal file
View File

@ -0,0 +1,11 @@
<?php
namespace App\Models;
use Illuminate\Database\Eloquent\Factories\HasFactory;
use Illuminate\Database\Eloquent\Model;
class Address extends Model
{
use HasFactory;
}

View File

@ -2,15 +2,14 @@
namespace App\Models;
// use Illuminate\Contracts\Auth\MustVerifyEmail;
use Illuminate\Contracts\Auth\MustVerifyEmail;
use Illuminate\Database\Eloquent\Factories\HasFactory;
use Illuminate\Foundation\Auth\User as Authenticatable;
use Illuminate\Notifications\Notifiable;
use Illuminate\Support\Facades\Storage;
use Laravel\Sanctum\HasApiTokens;
use Spatie\Permission\Traits\HasRoles;
class User extends Authenticatable
class User extends Authenticatable implements MustVerifyEmail
{
use HasApiTokens, HasFactory, Notifiable;
use HasRoles;
@ -57,4 +56,14 @@ class User extends Authenticatable
return $this->profile_photo_path;
}
public function addresses()
{
return $this->hasMany(Address::class);
}
public function getDefaultAddressAttribute()
{
return $this->addresses?->first();
}
}

View File

@ -0,0 +1,33 @@
<?php
namespace Database\Factories;
use App\Models\User;
use Illuminate\Database\Eloquent\Factories\Factory;
/**
* @extends \Illuminate\Database\Eloquent\Factories\Factory<\App\Models\Address>
*/
class AddressFactory extends Factory
{
/**
* Define the model's default state.
*
* @return array<string, mixed>
*/
public function definition(): array
{
$user = User::inRandomOrder()->first(); // Retrieve a random user
return [
'user_id' => $user->id,
'address_line_1' => $this->faker->address(),
'address_line_2' => null,
'city' => $this->faker->city(),
'postal_code' => $this->faker->postcode(),
'state' => $this->faker->state(),
'country' => $this->faker->country(),
'type' => 1,
];
}
}

View File

@ -0,0 +1,35 @@
<?php
use Illuminate\Database\Migrations\Migration;
use Illuminate\Database\Schema\Blueprint;
use Illuminate\Support\Facades\Schema;
return new class extends Migration
{
/**
* Run the migrations.
*/
public function up(): void
{
Schema::create('addresses', function (Blueprint $table) {
$table->id();
$table->unsignedBigInteger('user_id');
$table->string('address_line_1');
$table->string('address_line_2')->nullable();
$table->string('city');
$table->string('postal_code');
$table->string('state');
$table->string('country');
$table->unsignedTinyInteger('type');
$table->timestamps();
});
}
/**
* Reverse the migrations.
*/
public function down(): void
{
Schema::dropIfExists('addresses');
}
};

View File

@ -3,6 +3,8 @@
namespace Database\Seeders;
// use Illuminate\Database\Console\Seeds\WithoutModelEvents;
use App\Models\Address;
use Illuminate\Database\Seeder;
class DatabaseSeeder extends Seeder
@ -19,7 +21,9 @@ class DatabaseSeeder extends Seeder
RolesPermissionsSeeder::class,
]);
\App\Models\User::factory(10)->create();
\App\Models\User::factory(20)->create();
Address::factory(20)->create();
// \App\Models\User::factory()->create([
// 'name' => 'Test User',

Binary file not shown.

View File

@ -248,7 +248,11 @@ var KTApp = function () {
var parentEl = document.querySelector(element.getAttribute('data-dropdown-parent'));
if (parentEl && parentEl.hasAttribute("data-kt-menu")) {
var menu = new KTMenu(parentEl);
var menu = KTMenu.getInstance(parentEl);
if (!menu) {
menu = new KTMenu(parentEl);
}
if (menu) {
$(element).on('select2:unselect', function (e) {
@ -385,7 +389,8 @@ var KTApp = function () {
return;
}
initTinySlider(el);
const obj = initTinySlider(el);
KTUtil.data(el).set('tns', tns);
el.setAttribute("data-kt-initialized", "1");
});

View File

@ -16,6 +16,7 @@ var KTDialer = function(element, options) {
min: null,
max: null,
step: 1,
currency: false,
decimals: 0,
prefix: "",
suffix: ""
@ -46,6 +47,10 @@ var KTDialer = function(element, options) {
the.inputElement = the.element.querySelector('input[type]');
// Set Values
if (_getOption('currency') === 'true') {
the.options.currency = true;
}
if (_getOption('decimals')) {
the.options.decimals = parseInt(_getOption('decimals'));
}
@ -176,7 +181,13 @@ var KTDialer = function(element, options) {
// Format
var _format = function(val){
return the.options.prefix + parseFloat(val).toFixed(the.options.decimals) + the.options.suffix;
val = parseFloat(val).toFixed(the.options.decimals);
if (the.options.currency) {
val = val.toString().replace(/\B(?=(\d{3})+(?!\d))/g, ",");
}
return the.options.prefix + val + the.options.suffix;
}
// Get option

View File

@ -42,6 +42,7 @@ var KTDrawer = function(element, options) {
the.name = the.element.getAttribute('data-kt-drawer-name');
the.shown = false;
the.lastWidth;
the.lastHeight;
the.toggleElement = null;
// Set initialized
@ -137,6 +138,7 @@ var KTDrawer = function(element, options) {
var _update = function() {
var width = _getWidth();
var height = _getHeight();
var direction = _getOption('direction');
var top = _getOption('top');
@ -156,8 +158,15 @@ var KTDrawer = function(element, options) {
KTUtil.addClass(the.element, the.options.baseClass);
KTUtil.addClass(the.element, the.options.baseClass + '-' + direction);
KTUtil.css(the.element, 'width', width, true);
the.lastWidth = width;
if (width) {
KTUtil.css(the.element, 'width', width, true);
the.lastWidth = width;
}
if (height) {
KTUtil.css(the.element, 'height', height, true);
the.lastHeight = height;
}
if (top) {
KTUtil.css(the.element, 'top', top);
@ -187,6 +196,7 @@ var KTDrawer = function(element, options) {
KTUtil.removeClass(the.element, the.options.baseClass + '-' + direction);
KTUtil.css(the.element, 'width', '');
KTUtil.css(the.element, 'height', '');
if (top) {
KTUtil.css(the.element, 'top', '');
@ -275,6 +285,16 @@ var KTDrawer = function(element, options) {
return width;
}
var _getHeight = function() {
var height = _getOption('height');
if ( height === 'auto') {
height = KTUtil.css(the.element, 'height');
}
return height;
}
var _destroy = function() {
KTUtil.data(the.element).remove('drawer');
}

View File

@ -61,6 +61,10 @@ var KTMenu = function(element, options) {
// Event Handlers
// Toggle handler
var _click = function(element, e) {
if (element.hasAttribute('href') && element.getAttribute("href") !== "#") {
return;
}
e.preventDefault();
if (the.disabled === true) {

View File

@ -101,7 +101,7 @@ var KTAppCalendar = function () {
start: YM + '-01',
end: YM + '-02',
description: 'Toto lorem ipsum dolor sit incid idunt ut',
className: "fc-event-danger fc-event-solid-warning",
className: "border-success bg-success text-inverse-success",
location: 'Federation Square'
},
{
@ -110,7 +110,7 @@ var KTAppCalendar = function () {
start: YM + '-14T13:30:00',
description: 'Lorem ipsum dolor incid idunt ut labore',
end: YM + '-14T14:30:00',
className: "fc-event-success",
className: "border-warning bg-warning text-inverse-success",
location: 'Meeting Room 7.03'
},
{
@ -119,9 +119,8 @@ var KTAppCalendar = function () {
start: YM + '-02',
description: 'Lorem ipsum dolor sit tempor incid',
end: YM + '-03',
className: "fc-event-primary",
className: "border-info bg-info text-info-success",
location: 'Seoul, Korea'
},
{
id: uid(),

View File

@ -297,7 +297,7 @@ var KTAppEcommerceSaveProduct = function () {
}
}
},
'sku': {
'barcode': {
validators: {
notEmpty: {
message: 'Product barcode is required'

View File

@ -0,0 +1,156 @@
"use strict";
// Class definition
var KTChartsWidget47 = function () {
var chart = {
self: null,
rendered: false
};
// Private methods
var initChart = function(chart) {
var element = document.getElementById("kt_charts_widget_47");
if (!element) {
return;
}
var height = parseInt(KTUtil.css(element, 'height'));
var baseColor = KTUtil.getCssVariableValue('--bs-white');
var lightColor = KTUtil.getCssVariableValue('--bs-white');
var options = {
series: [{
name: 'Sales',
data: [5, 5, 15, 15, 19, 16, 27, 24, 34, 25, 40, 30, 19, 17, 22, 10, 14, 14]
}],
chart: {
fontFamily: 'inherit',
type: 'area',
height: height,
toolbar: {
show: false
}
},
legend: {
show: false
},
dataLabels: {
enabled: false
},
fill: {
type: "gradient",
gradient: {
shadeIntensity: 1,
opacityFrom: 0.5,
opacityTo: 0,
stops: [0, 80, 100]
}
},
stroke: {
curve: 'smooth',
show: true,
width: 2,
colors: [baseColor]
},
xaxis: {
axisBorder: {
show: false,
},
axisTicks: {
show: false
},
labels: {
show: false
},
crosshairs: {
position: 'front',
stroke: {
color: baseColor,
width: 1,
dashArray: 3
}
},
tooltip: {
enabled: false
}
},
yaxis: {
labels: {
show: false
}
},
states: {
normal: {
filter: {
type: 'none',
value: 0
}
},
hover: {
filter: {
type: 'none',
value: 0
}
},
active: {
allowMultipleDataPointsSelection: false,
filter: {
type: 'none',
value: 0
}
}
},
tooltip: {
enabled: false
},
colors: [lightColor],
grid: {
yaxis: {
lines: {
show: false
}
}
},
markers: {
strokeColor: baseColor,
strokeWidth: 2
}
};
chart.self = new ApexCharts(element, options);
// Set timeout to properly get the parent elements width
setTimeout(function() {
chart.self.render();
chart.rendered = true;
}, 200);
}
// Public methods
return {
init: function () {
initChart(chart);
// Update chart on theme mode change
KTThemeMode.on("kt.thememode.change", function() {
if (chart.rendered) {
chart.self.destroy();
}
initChart(chart);
});
}
}
}();
// Webpack support
if (typeof module !== 'undefined') {
module.exports = KTChartsWidget47;
}
// On document ready
KTUtil.onDOMContentLoaded(function() {
KTChartsWidget47.init();
});

View File

@ -0,0 +1,156 @@
"use strict";
// Class definition
var KTChartsWidget48 = function () {
var chart = {
self: null,
rendered: false
};
// Private methods
var initChart = function(chart) {
var element = document.getElementById("kt_charts_widget_48");
if (!element) {
return;
}
var height = parseInt(KTUtil.css(element, 'height'));
var baseColor = KTUtil.getCssVariableValue('--bs-danger');
var lightColor = KTUtil.getCssVariableValue('--bs-danger');
var options = {
series: [{
name: 'Sales',
data: [5, 5, 15, 15, 19, 16, 27, 24, 34, 25, 40, 30, 19, 17, 22, 10, 14, 14]
}],
chart: {
fontFamily: 'inherit',
type: 'area',
height: height,
toolbar: {
show: false
}
},
legend: {
show: false
},
dataLabels: {
enabled: false
},
fill: {
type: "gradient",
gradient: {
shadeIntensity: 1,
opacityFrom: 0.5,
opacityTo: 0,
stops: [0, 120, 50]
}
},
stroke: {
curve: 'smooth',
show: true,
width: 2,
colors: [baseColor]
},
xaxis: {
axisBorder: {
show: false,
},
axisTicks: {
show: false
},
labels: {
show: false
},
crosshairs: {
position: 'front',
stroke: {
color: baseColor,
width: 1,
dashArray: 3
}
},
tooltip: {
enabled: false,
}
},
yaxis: {
labels: {
show: false
}
},
states: {
normal: {
filter: {
type: 'none',
value: 0
}
},
hover: {
filter: {
type: 'none',
value: 0
}
},
active: {
allowMultipleDataPointsSelection: false,
filter: {
type: 'none',
value: 0
}
}
},
tooltip: {
enabled: false
},
colors: [lightColor],
grid: {
yaxis: {
lines: {
show: false
}
}
},
markers: {
strokeColor: baseColor,
strokeWidth: 2
}
};
chart.self = new ApexCharts(element, options);
// Set timeout to properly get the parent elements width
setTimeout(function() {
chart.self.render();
chart.rendered = true;
}, 200);
}
// Public methods
return {
init: function () {
initChart(chart);
// Update chart on theme mode change
KTThemeMode.on("kt.thememode.change", function() {
if (chart.rendered) {
chart.self.destroy();
}
initChart(chart);
});
}
}
}();
// Webpack support
if (typeof module !== 'undefined') {
module.exports = KTChartsWidget48;
}
// On document ready
KTUtil.onDOMContentLoaded(function() {
KTChartsWidget48.init();
});

View File

@ -210,6 +210,3 @@ if (typeof module !== 'undefined') {
KTUtil.onDOMContentLoaded(function() {
KTTablesWidget14.init();
});

View File

@ -0,0 +1,3 @@
<svg width="18" height="18" viewBox="0 0 18 18" fill="none" xmlns="http://www.w3.org/2000/svg">
<path d="M12.8025 3H5.1975C4.21686 3 3.27639 3.38956 2.58297 4.08297C1.88956 4.77639 1.5 5.71686 1.5 6.6975V11.3025C1.5 12.2831 1.88956 13.2236 2.58297 13.917C3.27639 14.6104 4.21686 15 5.1975 15H12.8025C13.2881 15 13.7689 14.9044 14.2175 14.7185C14.6661 14.5327 15.0737 14.2604 15.417 13.917C15.7604 13.5737 16.0327 13.1661 16.2185 12.7175C16.4044 12.2689 16.5 11.7881 16.5 11.3025V6.6975C16.5 6.21194 16.4044 5.73113 16.2185 5.28253C16.0327 4.83393 15.7604 4.42632 15.417 4.08297C15.0737 3.73963 14.6661 3.46727 14.2175 3.28146C13.7689 3.09564 13.2881 3 12.8025 3ZM10.5525 9.6825L8.25 11.0925C8.12869 11.1662 7.98987 11.206 7.84796 11.2079C7.70605 11.2097 7.56622 11.1736 7.443 11.1032C7.31978 11.0328 7.21765 10.9307 7.14722 10.8074C7.0768 10.6842 7.04064 10.5444 7.0425 10.4025V7.5975C7.04064 7.45559 7.0768 7.31577 7.14722 7.19256C7.21765 7.06934 7.31978 6.96723 7.443 6.89681C7.56622 6.8264 7.70605 6.79026 7.84796 6.79214C7.98987 6.79402 8.12869 6.83385 8.25 6.9075L10.59 8.3175C10.7077 8.38868 10.8049 8.48919 10.8721 8.60919C10.9394 8.72919 10.9743 8.86458 10.9736 9.00213C10.9728 9.13968 10.9364 9.27467 10.8678 9.39393C10.7993 9.51318 10.701 9.61261 10.5825 9.6825H10.5525Z" fill="#F1416C"/>
</svg>

After

Width:  |  Height:  |  Size: 1.3 KiB

View File

@ -9,10 +9,10 @@
<link rel="stylesheet" href="style.css"></head>
<body>
<div class="bgc1 clearfix">
<h1 class="mhmm mvm"><span class="fgc1">Font Name:</span> icomoon <small class="fgc1">(Glyphs:&nbsp;573)</small></h1>
<h1 class="mhmm mvm"><span class="fgc1">Font Name:</span> KeenIcons <small class="fgc1">(Glyphs:&nbsp;573)</small></h1>
</div>
<div class="clearfix mhl ptl">
<h1 class="mvm mtn fgc1">Grid Size: Unknown</h1>
<h1 class="mvm mtn fgc1">Grid Size: 24</h1>
<div class="glyph fs1">
<div class="clearfix bshadow0 pbs">
<span class="ki-duotone ki-abstract-1"><span class="path1"></span><span class="path2"></span></span>
@ -8047,12 +8047,12 @@
</label>
<input id="testText" type="text" class="phl size1of1 mvl"
placeholder="Type some text to test..." value=""/>
<div id="testDrive" class="ki-duotone ki-" style="font-family: icomoon">&nbsp;
<div id="testDrive" class="ki-duotone ki-" style="font-family: KeenIcons">&nbsp;
</div>
</div>
<!--<![endif]-->
<div class="bgc1 clearfix">
<p class="mhl">Generated by <a href="https://icomoon.io/app">IcoMoon</a></p>
<p class="mhl">Generated by <a href="https://KeenIcons.io/app">IcoMoon</a></p>
</div>
<script src="demo-files/demo.js"></script>

View File

@ -19,10 +19,23 @@
font-variant: normal;
text-transform: none;
line-height: 1;
position: relative;
/* Better Font Rendering =========== */
display: inline-flex;
direction: ltr;
position: relative;
display: inline-flex;
direction: ltr;
position: relative;
display: inline-flex;
direction: ltr;
position: relative;
display: inline-flex;
direction: ltr;
position: relative;
display: inline-flex;
direction: ltr;
position: relative;
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;
}

View File

@ -9,10 +9,10 @@
<link rel="stylesheet" href="style.css"></head>
<body>
<div class="bgc1 clearfix">
<h1 class="mhmm mvm"><span class="fgc1">Font Name:</span> icomoon <small class="fgc1">(Glyphs:&nbsp;573)</small></h1>
<h1 class="mhmm mvm"><span class="fgc1">Font Name:</span> KeenIcons <small class="fgc1">(Glyphs:&nbsp;573)</small></h1>
</div>
<div class="clearfix mhl ptl">
<h1 class="mvm mtn fgc1">Grid Size: Unknown</h1>
<h1 class="mvm mtn fgc1">Grid Size: 24</h1>
<div class="glyph fs1">
<div class="clearfix bshadow0 pbs">
<span class="ki-outline ki-abstract-1"></span>
@ -8047,12 +8047,12 @@
</label>
<input id="testText" type="text" class="phl size1of1 mvl"
placeholder="Type some text to test..." value=""/>
<div id="testDrive" class="ki-outline ki-" style="font-family: icomoon">&nbsp;
<div id="testDrive" class="ki-outline ki-" style="font-family: KeenIcons">&nbsp;
</div>
</div>
<!--<![endif]-->
<div class="bgc1 clearfix">
<p class="mhl">Generated by <a href="https://icomoon.io/app">IcoMoon</a></p>
<p class="mhl">Generated by <a href="https://KeenIcons.io/app">IcoMoon</a></p>
</div>
<script src="demo-files/demo.js"></script>

View File

@ -9,10 +9,10 @@
<link rel="stylesheet" href="style.css"></head>
<body>
<div class="bgc1 clearfix">
<h1 class="mhmm mvm"><span class="fgc1">Font Name:</span> icomoon <small class="fgc1">(Glyphs:&nbsp;573)</small></h1>
<h1 class="mhmm mvm"><span class="fgc1">Font Name:</span> KeenIcons <small class="fgc1">(Glyphs:&nbsp;573)</small></h1>
</div>
<div class="clearfix mhl ptl">
<h1 class="mvm mtn fgc1">Grid Size: Unknown</h1>
<h1 class="mvm mtn fgc1">Grid Size: 24</h1>
<div class="glyph fs1">
<div class="clearfix bshadow0 pbs">
<span class="ki-solid ki-abstract-1"></span>
@ -8047,12 +8047,12 @@
</label>
<input id="testText" type="text" class="phl size1of1 mvl"
placeholder="Type some text to test..." value=""/>
<div id="testDrive" class="ki-solid ki-" style="font-family: icomoon">&nbsp;
<div id="testDrive" class="ki-solid ki-" style="font-family: KeenIcons">&nbsp;
</div>
</div>
<!--<![endif]-->
<div class="bgc1 clearfix">
<p class="mhl">Generated by <a href="https://icomoon.io/app">IcoMoon</a></p>
<p class="mhl">Generated by <a href="https://KeenIcons.io/app">IcoMoon</a></p>
</div>
<script src="demo-files/demo.js"></script>

BIN
resources/_keenthemes/src/sass/.DS_Store vendored Normal file

Binary file not shown.

View File

@ -13,6 +13,7 @@
@import "components/variables.custom";
@import "components/variables";
@import "components/variables-dark";
@import "components/variables.override";
// Bootstrap initializaton
@import "bootstrap/scss/functions";

View File

@ -4,6 +4,9 @@
// Base
.card {
--#{$prefix}card-box-shadow: var(--#{$prefix}root-card-box-shadow);
--#{$prefix}card-border-color: var(--#{$prefix}root-card-border-color);
@if ($card-border-enabled) {
border: $card-border-width $card-border-style var(--#{$prefix}card-border-color);
} @else {
@ -59,7 +62,7 @@
.card-label {
font-weight: 500;
font-size: 1.275rem;
color: var(--#{$prefix}text-dark);
color: var(--#{$prefix}text-gray-900);
}
.card-label {

View File

@ -5,11 +5,20 @@
code:not([class*="language-"]) {
font-weight: $code-font-weight;
color: var(--#{$prefix}code-color);
line-height: inherit;
font-size: inherit;
border: 1px solid var(--#{$prefix}code-border-color);
background-color: var(--#{$prefix}code-bg);
@include border-radius($code-border-radius);
line-height: inherit;
font-size: $code-font-size;
padding: $code-padding;
margin: $code-margin;
box-shadow: var(--#{$prefix}code-box-shadow);
@include border-radius($code-border-radius);
box-shadow: $code-shadow;
@each $name, $value in $theme-colors {
&.code-#{$name} {
color: var(--#{$prefix}#{$name});
background-color: var(--#{$prefix}#{$name}-light);
border: 1px solid var(--#{$prefix}#{$name});
}
}
}

View File

@ -23,6 +23,22 @@
transform: translateX(100%);
}
&.drawer-bottom {
bottom: 0;
top: auto;
left: 0;
right: 0;
transform: translateY(100%);
}
&.drawer-top {
top: 0;
bottom: auto;
left: 0;
right: 0;
transform: translateY(-100%);
}
&.drawer-on {
transform: none;
box-shadow: var(--#{$prefix}drawer-box-shadow);

View File

@ -48,6 +48,11 @@
--#{$prefix}#{$name}-inverse: #{$value};
}
// Contextual clarity state colors
@each $name, $value in $theme-clarity-colors {
--#{$prefix}#{$name}-clarity: #{$value};
}
// Contextual rbg colors
@each $name, $value in $theme-colors {
--#{$prefix}#{$name}-rgb: #{to-rgb($value)};
@ -83,6 +88,9 @@
--#{$prefix}input-solid-bg-focus: #{$input-solid-bg-focus};
--#{$prefix}input-solid-placeholder-color: #{$input-solid-placeholder-color};
// Card
--#{$prefix}root-card-box-shadow: #{$card-box-shadow};
--#{$prefix}root-card-border-color: #{$card-border-color};
// Tooltip
--#{$prefix}tooltip-box-shadow: #{$tooltip-box-shadow-dark};
@ -97,7 +105,8 @@
// Code
--#{$prefix}code-bg: #{$code-bg};
--#{$prefix}code-box-shadow: #{$code-box-shadow};
--#{$prefix}code-shadow: #{$code-shadow};
--#{$prefix}code-border-color: #{$code-border-color};
--#{$prefix}code-color: #{$code-color};
// Symbol
@ -195,6 +204,11 @@
--#{$prefix}#{$name}-inverse: #{$value};
}
// Contextual clarity state colors
@each $name, $value in $theme-clarity-colors-dark {
--#{$prefix}#{$name}-clarity: #{$value};
}
// Contextual rbg colors
@each $name, $value in $theme-colors-dark {
--#{$prefix}#{$name}-rgb: #{to-rgb($value)};
@ -234,7 +248,8 @@
--#{$prefix}tooltip-box-shadow: #{$tooltip-box-shadow-dark};
// Card
--#{$prefix}card-box-shadow: #{$card-box-shadow-dark};
--#{$prefix}root-card-box-shadow: #{$card-box-shadow-dark};
--#{$prefix}root-card-border-color: #{$card-border-color-dark};
// Table
--#{$prefix}table-striped-bg: #{$table-striped-bg-dark};
@ -246,7 +261,8 @@
// Code
--#{$prefix}code-bg: #{$code-bg-dark};
--#{$prefix}code-box-shadow: #{$code-box-shadow-dark};
--#{$prefix}code-shadow: #{$code-shadow-dark};
--#{$prefix}code-border-color: #{$code-border-color-dark};
--#{$prefix}code-color: #{$code-color-dark};
// Symbol

View File

@ -80,32 +80,40 @@
}
// Utilities
.scroll-ps {
padding-left: var(--#{$prefix}scrollbar-size) !important;
@each $breakpoint in map-keys($grid-breakpoints) {
@include media-breakpoint-up($breakpoint) {
$infix: breakpoint-infix($breakpoint, $grid-breakpoints);
.scroll#{$infix}-ps {
padding-left: var(--#{$prefix}scrollbar-size) !important;
}
.scroll#{$infix}-ms {
margin-left: var(--#{$prefix}scrollbar-size) !important;
}
.scroll#{$infix}-mb {
margin-bottom: var(--#{$prefix}scrollbar-size) !important;
}
.scroll#{$infix}-pe {
padding-right: var(--#{$prefix}scrollbar-size) !important;
}
.scroll#{$infix}-me {
margin-right: var(--#{$prefix}scrollbar-size) !important;
}
.scroll#{$infix}-px {
padding-left: var(--#{$prefix}scrollbar-size) !important;
padding-right: var(--#{$prefix}scrollbar-size) !important;
}
.scroll#{$infix}-mx {
margin-left: var(--#{$prefix}scrollbar-size) !important;
margin-right: var(--#{$prefix}scrollbar-size) !important;
}
}
}
.scroll-ms {
margin-left: var(--#{$prefix}scrollbar-size) !important;
}
.scroll-mb {
margin-bottom: var(--#{$prefix}scrollbar-size) !important;
}
.scroll-pe {
padding-right: var(--#{$prefix}scrollbar-size) !important;
}
.scroll-me {
margin-right: var(--#{$prefix}scrollbar-size) !important;
}
.scroll-px {
padding-left: var(--#{$prefix}scrollbar-size) !important;
padding-right: var(--#{$prefix}scrollbar-size) !important;
}
.scroll-mx {
margin-left: var(--#{$prefix}scrollbar-size) !important;
margin-right: var(--#{$prefix}scrollbar-size) !important;
}

View File

@ -59,6 +59,22 @@
border-collapse: separate;
}
// Row Rounded
&.table-rows-rounded {
th,td {
&:first-child {
border-top-left-radius: 6px;
border-bottom-left-radius: 6px;
}
&:last-child {
border-top-right-radius: 6px;
border-bottom-right-radius: 6px;
}
}
}
// Flush
&.table-flush {
tr, th, td {

View File

@ -4,6 +4,10 @@
// Base
.timeline {
// Variables
--#{$prefix}timeline-icon-size: #{$timeline-icon-size};
--#{$prefix}timeline-icon-space: #{$timeline-icon-space};
// Item
.timeline-item {
position: relative;
@ -27,17 +31,15 @@
position: absolute;
z-index: 0;
left: 0;
top:0;
top: var(--#{$prefix}timeline-icon-size);
bottom: 0;
transform: translate(50%);
border-left-width: 1px;
border-left-style: dashed;
border-left-style: solid;
border-left-color: var(--#{$prefix}gray-300);
}
// Line solid
.timeline-line-solid {
border-left-style: solid !important;
width: var(--#{$prefix}timeline-icon-size);
margin-top: var(--#{$prefix}timeline-icon-space);
margin-bottom: var(--#{$prefix}timeline-icon-space);
}
// Icon
@ -45,6 +47,14 @@
z-index: 1;
flex-shrink: 0;
margin-right: 1rem;
width: var(--#{$prefix}timeline-icon-size);
height: var(--#{$prefix}timeline-icon-size);
display: flex;
text-align: center;
align-items: center;
justify-content: center;
border: 1px solid var(--#{$prefix}gray-300);
border-radius: 50%;
}
// Content
@ -72,4 +82,15 @@
}
}
}
// Line solid
&.timeline-border-dashed {
.timeline-line {
border-left-style: dashed !important;
}
.timeline-icon {
border-style: dashed !important;
}
}
}

View File

@ -0,0 +1,92 @@
//
// Tree
//
.tree {
// Css variables
--#{$prefix}tree-icon-size: #{$tree-icon-size};
--#{$prefix}tree-icon-gap: #{$tree-icon-gap};
--#{$prefix}tree-icon-color-open: var(--#{$prefix}success);
--#{$prefix}tree-icon-color-default: var(--#{$prefix}gray-500);
--#{$prefix}tree-icon-color-close: var(--#{$prefix}gray-500);
--#{$prefix}tree-line-color: var(--#{$prefix}gray-200);
.tree-node {
padding-left: $tree-node-padding-x;
display: flex;
flex-direction: column;
align-items: start;
}
.tree-sub {
padding: $tree-node-padding-y 0;
}
.tree-content {
display: flex;
align-items: center;
padding: $tree-node-padding-y 0;
}
.tree-wrapper {
padding-left: calc(var(--#{$prefix}tree-icon-size) + var(--#{$prefix}tree-icon-size));
}
.tree-section {
display: flex;
align-items: baseline;
padding-left: var(--#{$prefix}tree-icon-gap);
}
.tree-toggle {
display: flex;
align-items: center;
width: var(--#{$prefix}tree-icon-size);
.tree-icon-default {
font-size: 1.5rem;
color: var(--#{$prefix}tree-icon-color-default);
}
.tree-icon-open {
font-size: 1.5rem;
color: var(--#{$prefix}tree-icon-color-open);
}
.tree-icon-close {
font-size: 1.5rem;
color: var(--#{$prefix}tree-icon-color-close);
}
&.collapsed {
.tree-icon-close {
display: flex;
}
.tree-icon-open {
display: none;
}
}
&:not(.collapsed) {
.tree-icon-close {
display: none;
}
.tree-icon-open {
display: flex;
}
}
}
& > .tree-node {
padding-left: 0 !important;
}
&.tree-line {
.tree-sub {
border-left: 1px solid var(--#{$prefix}tree-line-color);
margin-left: calc(var(--#{$prefix}tree-icon-size) / 2);
}
}
}

View File

@ -5,6 +5,10 @@
$utilities: map-merge(
$utilities,
(
"cursor": (
property: cursor,
values: help wait crosshair not-allowed zoom-in grab pointer
),
"position": (
property: position,
responsive: true,

View File

@ -1,17 +1,19 @@
// Bootstrap color system
//
// Bootstrap & Custom Variables
// Safely override any variable in _variables.custom.scss
//
$gray-100-dark: #1b1b29 !default;
$gray-200-dark: #2B2B40 !default;
$gray-300-dark: #323248 !default;
$gray-400-dark: #474761 !default;
$gray-500-dark: #565674 !default;
$gray-600-dark: #6D6D80 !default;
$gray-700-dark: #92929F !default;
$gray-800-dark: #CDCDDE !default;
$gray-900-dark: #FFFFFF !default;
$gray-100-dark: #1B1C22 !default;
$gray-200-dark: #26272F !default;
$gray-300-dark: #363843 !default;
$gray-400-dark: #464852 !default;
$gray-500-dark: #636674 !default;
$gray-600-dark: #808290 !default;
$gray-700-dark: #9A9CAE !default;
$gray-800-dark: #B5B7C8 !default;
$gray-900-dark: #F5F5F5 !default;
$grays-dark: (
"100": $gray-100-dark,
@ -30,90 +32,131 @@ $text-muted-dark: $gray-500-dark !default;
// Bootstrap contextual colors
// Primary colors
$primary-light-dark: #212E48 !default;
$primary-dark: #006AE6 !default;
$primary-active-dark: #107EFF !default;
$primary-light-dark: #172331 !default;
$primary-clarity-dark: rgba(#006AE6, 0.2) !default;
$primary-inverse-dark: $white !default;
// Secondary colors
$secondary-dark: $gray-300-dark !default;
$secondary-active-dark: $gray-400-dark !default;
$secondary-light-dark: $gray-100-dark !default;
$secondary-inverse-dark: $gray-700-dark !default;
$secondary-dark: $gray-300-dark !default;
$secondary-active-dark: $gray-400-dark !default;
$secondary-light-dark: $gray-300-dark !default;
$secondary-clarity-dark: rgba($gray-300-dark, 0.2) !default;
$secondary-inverse-dark: $white !default;
// Light colors
$light-dark: $gray-200-dark !default;
$light-active-dark: $gray-300-dark !default;
$light-inverse-dark: $gray-600-dark !default;
$light-dark: $gray-100-dark !default;
$light-active-dark: #1F212A !default;
$light-light-dark: #1F212A !default;
$light-clarity-dark: rgba(31, 33, 42, 0.20) !default;
$light-inverse-dark: $gray-600-dark !default;
// Success colors
$success-light-dark: #1C3833 !default;
$success-dark: #00A261 !default;
$success-active-dark: #01BF73 !default;
$success-light-dark: #1F212A !default;
$success-clarity-dark: rgba(#00A261, 0.2) !default;
$success-inverse-dark: $white !default;
// Info colors
$info-light-dark: #2F264F !default;
$info-dark: #883FFF !default;
$info-active-dark: #9E63FF !default;
$info-light-dark: #272134 !default;
$info-clarity-dark: rgba(#883FFF, 0.2) !default;
$info-inverse-dark: $white !default;
// Warning colors
$warning-light-dark: #392F28 !default;
$warning-dark: #C59A00 !default;
$warning-active-dark: #D9AA00 !default;
$warning-light-dark: #242320 !default;
$warning-clarity-dark: rgba(#C59A00, 0.2) !default;
$warning-inverse-dark: $white !default;
// Danger colors
$danger-light-dark: #3A2434 !default;
$danger-dark: #E42855 !default;
$danger-active-dark: #FF3767 !default;
$danger-light-dark: #302024 !default;
$danger-clarity-dark: rgba(#E42855, 0.2) !default;
$danger-inverse-dark: $white !default;
// Dark colors
$dark-dark: $gray-900-dark !default;
$dark-active-dark: lighten($gray-900-dark, 3%) !default;
$dark-light-dark: $gray-200-dark !default;
$dark-inverse-dark: $gray-100-dark !default;
$dark-dark: #272A34 !default;
$dark-active-dark: #2D2F39 !default;
$dark-light-dark: #1E2027 !default;
$dark-clarity-dark: rgba(#272A34, 0.2) !default;
$dark-inverse-dark: $white !default;
// Contextual colors
$theme-colors-dark: (
"white": $white, // custom color type
"light": $light-dark,
"primary": $primary,
"success": $success,
"info": $info,
"warning": $warning,
"danger": $danger,
"dark": $dark-dark,
"primary": $primary-dark,
"secondary": $secondary-dark,
"success": $success-dark,
"info": $info-dark,
"warning": $warning-dark,
"danger": $danger-dark,
"dark": $dark-dark
) !default;
// Contextual active state colors
$theme-active-colors-dark: (
"primary": $primary-active,
"primary": $primary-active-dark,
"secondary": $secondary-active-dark,
"light": $light-active-dark,
"success": $success-active,
"info": $info-active,
"warning": $warning-active,
"danger": $danger-active,
"success": $success-active-dark,
"info": $info-active-dark,
"warning": $warning-active-dark,
"danger": $danger-active-dark,
"dark": $dark-active-dark
) !default;
// Contextual inverse state colors
$theme-inverse-colors-dark: (
"primary": $primary-inverse,
"primary": $primary-inverse-dark,
"secondary": $secondary-inverse-dark,
"light": $light-inverse,
"success": $success-inverse,
"info": $info-inverse,
"warning": $warning-inverse,
"danger": $danger-inverse,
"light": $light-inverse-dark,
"success": $success-inverse-dark,
"info": $info-inverse-dark,
"warning": $warning-inverse-dark,
"danger": $danger-inverse-dark,
"dark": $dark-inverse-dark
) !default;
// Contextual light state colors
$theme-light-colors-dark: (
"primary": $primary-light-dark,
"secondary": $secondary-light-dark,
"success": $success-light-dark,
"info": $info-light-dark,
"warning": $warning-light-dark,
"danger": $danger-light-dark,
"dark": $dark-light-dark,
"secondary": $secondary-light-dark
"light": $light-light-dark
) !default;
// Contextual light state colors
$theme-clarity-colors-dark: (
"primary": $primary-clarity-dark,
"secondary": $secondary-clarity-dark,
"success": $success-clarity-dark,
"info": $info-clarity-dark,
"warning": $warning-clarity-dark,
"danger": $danger-clarity-dark,
"dark": $dark-clarity-dark,
"light": $light-clarity-dark,
) !default;
// Text colors
$theme-text-colors-dark: (
"white": $white,
"primary": $primary,
"primary": $primary-dark,
"secondary": $secondary-dark,
"light": $light-dark,
"success": $success,
"info": $info,
"warning": $warning,
"danger": $danger,
"success": $success-dark,
"info": $info-dark,
"warning": $warning-dark,
"danger": $danger-dark,
"dark": $dark-dark,
"muted": $text-muted-dark,
"gray-100": $gray-100-dark,
@ -131,7 +174,7 @@ $theme-text-colors-dark: (
// Body
//
// Settings for the `<body>` element.
$body-bg-dark: #1e1e2d !default;
$body-bg-dark: #1C1D22 !default;
$body-bg-rgb-dark: to-rgb($body-bg-dark) !default;
$body-color-dark: $gray-900-dark !default;
@ -139,7 +182,7 @@ $body-color-dark: $gray-900-dark !default;
// Links
//
// Style anchor elements.
$link-color-dark: $primary !default;
$link-color-dark: $primary-dark !default;
// Components
@ -149,16 +192,16 @@ $border-color-dark: $gray-200-dark !default;
$border-dashed-color-dark: $gray-300-dark !default;
// Keenthemes hover states
$component-hover-color-dark: $primary !default;
$component-hover-color-dark: $primary-dark !default;
$component-hover-bg-dark: $gray-100-dark !default;
// Keenthemes active states
$component-active-color-dark: $primary-inverse !default;
$component-active-bg-dark: $primary !default;
$component-active-bg-dark: $primary-dark !default;
// Keenthemes checked states
$component-checked-color-dark: $primary-inverse !default;
$component-checked-bg-dark: $primary !default;
$component-checked-bg-dark: $primary-dark !default;
$headings-color-dark: $gray-900-dark !default;
$blockquote-footer-color-dark: $gray-600-dark !default;
@ -174,7 +217,7 @@ $box-shadow-inset-dark: inset 0 1px 2px rgba($black, .075) !default;
// Card
$card-box-shadow-dark: null !default;
$card-border-color-dark: $border-color-dark !default;
// Tables
$table-striped-bg-dark: rgba($gray-100-dark, 0.75) !default;
@ -191,7 +234,7 @@ $form-switch-bg-image-solid-dark: url("data:image/svg+xml,<svg
// Accordion
$accordion-icon-color-dark: $body-color-dark!default;
$accordion-icon-active-color-dark: $primary !default;
$accordion-icon-active-color-dark: $primary-dark !default;
$accordion-button-icon-dark: url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='#{$accordion-icon-color-dark}'><path fill-rule='evenodd' d='M1.646 4.646a.5.5 0 0 1 .708 0L8 10.293l5.646-5.647a.5.5 0 0 1 .708.708l-6 6a.5.5 0 0 1-.708 0l-6-6a.5.5 0 0 1 0-.708z'/></svg>") !default;
$accordion-button-active-icon-dark: url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='#{$accordion-icon-active-color-dark}'><path fill-rule='evenodd' d='M1.646 4.646a.5.5 0 0 1 .708 0L8 10.293l5.646-5.647a.5.5 0 0 1 .708.708l-6 6a.5.5 0 0 1-.708 0l-6-6a.5.5 0 0 1 0-.708z'/></svg>") !default;
@ -216,9 +259,10 @@ $tooltip-bg-dark: $gray-200-dark !default;
$tooltip-box-shadow-dark: 0px 0px 30px rgba(0, 0, 0, 0.15) !default;
// Code
$code-bg-dark: $gray-200-dark !default;
$code-color-dark: #b93993 !default;
$code-box-shadow-dark: 0px 3px 9px rgba(0, 0, 0, 0.08) !default;
$code-bg-dark: #2b2b40 !default;
$code-shadow-dark: rgba(0, 0, 0, 0.08) 0px 3px 9px 0px !default;
$code-color-dark: #b93993 !default;
$code-border-color-dark: transparent !default;
// Symbol
$symbol-border-color-dark: rgba($body-bg, 0.5);

View File

@ -4,60 +4,3 @@
// are not accessible in this file but you can override any global variable as shown below:
//
// Bootstrap color system
$white: #ffffff;
// Gray colors
$gray-100-dark: #1b1b29;
$gray-200-dark: #2B2B40;
$gray-300-dark: #323248;
$gray-400-dark: #474761;
$gray-500-dark: #565674;
$gray-600-dark: #6D6D80;
$gray-700-dark: #92929F;
$gray-800-dark: #CDCDDE;
$gray-900-dark: #FFFFFF;
// Theme colors
// Primary
$primary: #3E97FF;
$primary-active: #0095e8;
$primary-light: #f1faff;
$primary-light-dark: #212e48;
$primary-inverse: $white;
// Success
$success: #50cd89;
$success-active: #47be7d;
$success-light: #e8fff3;
$success-light-dark: #1c3238;
$success-inverse: $white;
// Info
$info: #7239ea;
$info-active: #5014d0;
$info-light: #f8f5ff;
$info-light-dark: #2f264f;
$info-inverse: $white;
// Danger
$danger: #f1416c;
$danger-active: #d9214e;
$danger-light: #fff5f8;
$danger-light-dark: #3a2434;
$danger-inverse: $white;
// Warning
$warning: #ffc700;
$warning-active: #f1bc00;
$warning-light: #fff8dd;
$warning-light-dark: #392f28;
$warning-inverse: $white;
// Card Box Shadow
$card-border-enabled: true;
$card-box-shadow: 0px 4px 12px 0px rgba(0, 0, 0, 0.03);
$card-box-shadow-dark: none;
// Body
$body-bg-dark: #1c1c1c;

View File

@ -0,0 +1,15 @@
//
// To make future updates easier consider overriding the global variables from _variables.bootstrap.scss and _variables.custom.scss for current demo in this file.
// Note that this file is included first and variables defined in _variables.bootstrap.scss and _variables.custom.scss
// are not accessible in this file but you can override any global variable as shown below:
//
// Body bg
$body-bg-dark: $coal-100;
// Card
$card-box-shadow: 0px 3px 4px 0px rgba(0, 0, 0, 0.03);
$card-box-shadow-dark: none;
$card-border-enabled: true;
$card-border-color: $gray-200;
$card-border-color-dark: $dark-light-dark;

View File

@ -6,6 +6,16 @@
// Prefix for :root CSS variables
$prefix: bs- !default; // Deprecated in v5.2.0 for the shorter `$prefix`
// Custom coal colors
$coal-100: #15171C !default;
$coal-200: #13141A !default;
$coal-300: #111217 !default;
$coal-400: #0F1014 !default;
$coal-500: #0D0E12 !default;
$coal-600: #0B0C10 !default;
$coal-black: #000000 !default;
$coal-clarity: rgba(#18191F, 50) !default;
// Bootstrap color system
$white: #ffffff !default;
@ -13,9 +23,9 @@ $black:#000000 !default;
// Bootstrap grey colors
$gray-100: #F9F9F9 !default;
$gray-200: #F1F1F2 !default;
$gray-200: #F1F1F4 !default;
$gray-300: #DBDFE9 !default;
$gray-400: #B5B5C3 !default;
$gray-400: #C4CADA !default;
$gray-500: #99A1B7 !default;
$gray-600: #78829D !default;
$gray-700: #4B5675 !default;
@ -40,52 +50,59 @@ $grays: (
// Bootstrap contextual colors
// Primary colors
$primary: #3699FF !default;
$primary-active: #187DE4 !default;
$primary-light: #F1FAFF !default;
$primary: #1B84FF !default;
$primary-active: #056EE9 !default;
$primary-light: #E9F3FF !default;
$primary-clarity: rgba(#1B84FF, 0.2) !default;
$primary-inverse: $white !default;
// Secondary colors
$secondary: $gray-300 !default;
$secondary-active: $gray-400 !default;
$secondary-light: $gray-100 !default;
$secondary-inverse: $gray-700 !default;
$secondary: #F9F9F9 !default;
$secondary-active: $gray-300 !default;
$secondary-light: #F9F9F9 !default;
$secondary-clarity: rgba(#F9F9F9, 0.2) !default;
$secondary-inverse: $gray-800 !default;
// Light colors
$light: $gray-100 !default;
$light-active: $gray-200 !default;
$light-light: gba($gray-100, 0.75) !default;
$light-inverse: $gray-600 !default;
$light-active: #FCFCFC !default;
$light-light: #ffffff !default;
$light-clarity: rgba($white, 0.2) !default;
$light-inverse: $gray-800 !default;
// Success colors
$success: #1BC5BD !default;
$success-active: #0BB7AF !default;
$success-light: #C9F7F5 !default;
$success: #17C653 !default;
$success-active: #04B440 !default;
$success-light: #DFFFEA !default;
$success-clarity: rgba(#17C653, 0.2) !default;
$success-inverse: $white !default;
// Info colors
$info: #8950FC !default;
$info-active: #7337EE !default;
$info-light: #EEE5FF !default;
$info: #7239EA !default;
$info-active: #5014D0 !default;
$info-light: #F8F5FF !default;
$info-clarity: rgba(#7239EA, 0.2) !default;
$info-inverse: $white !default;
// Warning colors
$warning: #FFA800 !default;
$warning-active: #EE9D01 !default;
$warning-light: #FFF4DE !default;
$warning: #F6C000 !default;
$warning-active: #DEAD00 !default;
$warning-light: #FFF8DD !default;
$warning-clarity: rgba(#F6C000, 0.2) !default;
$warning-inverse: $white !default;
// Danger colors
$danger: #F64E60 !default;
$danger-active: #EE2D41 !default;
$danger-light: #FFE2E5 !default;
$danger: #F8285A !default;
$danger-active: #D81A48 !default;
$danger-light: #FFEEF3 !default;
$danger-clarity: rgba(#F8285A, 0.2) !default;
$danger-inverse: $white !default;
// Dark colors
$dark: $gray-900 !default;
$dark-active: darken($gray-900, 3%) !default;
$dark-light: $gray-200 !default;
$dark: #1E2129 !default;
$dark-active: #111318 !default;
$dark-light: #F9F9F9 !default;
$dark-clarity: rgba(#1E2129, 0.2) !default;
$dark-inverse: $white !default;
// Contextual colors
@ -132,7 +149,20 @@ $theme-light-colors: (
"info": $info-light,
"warning": $warning-light,
"danger": $danger-light,
"dark": $dark-light
"dark": $dark-light,
"light": $light-light
) !default;
// Contextual light state colors
$theme-clarity-colors: (
"primary": $primary-clarity,
"secondary": $secondary-clarity,
"success": $success-clarity,
"info": $info-clarity,
"warning": $warning-clarity,
"danger": $danger-clarity,
"dark": $dark-clarity,
"light": $light-clarity,
) !default;
// Text colors
@ -335,6 +365,7 @@ $font-family-sans-serif: Inter, Helvetica, "sans-serif" !default;
$font-size-base: 1rem !default; // Assumes the browser default, typically `13px`
$font-size-lg: $font-size-base * 1.075 !default; // 14.04px
$font-size-xl: $font-size-base * 1.21 !default; // 16.04px
$font-size-sm: $font-size-base * .95 !default; // 12.025px
$font-weight-lighter: lighter !default;
@ -380,6 +411,7 @@ $font-sizes: (
sm: $font-size-sm,
base: $font-size-base, // 13px
lg: $font-size-lg,
xl: $font-size-xl,
fluid: 100%, // 100%
@ -500,7 +532,7 @@ $btn-line-height: $input-btn-line-height !default;
$btn-white-space: null !default; // Set to `nowrap` to prevent text wrapping
$btn-padding-y-sm: $input-btn-padding-y-sm !default;
$btn-padding-x-sm: 1.25rem !default;
$btn-padding-x-sm: 1rem !default;
$btn-font-size-sm: $input-btn-font-size-sm !default;
$btn-padding-y-lg: $input-btn-padding-y-lg !default;
@ -510,11 +542,11 @@ $btn-font-size-lg: $input-btn-font-size-lg !default;
$btn-border-width: $input-btn-border-width !default;
$btn-font-weight: $font-weight-semibold !default;
$btn-box-shadow: null !default;
$btn-box-shadow: none !default;
$btn-focus-width: $input-btn-focus-width !default;
$btn-focus-box-shadow: null !default;
$btn-focus-box-shadow: none !default;
$btn-disabled-opacity: .65 !default;
$btn-active-box-shadow: null !default;
$btn-active-box-shadow: none !default;
$btn-link-color: var(--#{$prefix}link-color) !default;
$btn-link-hover-color: var(--#{$prefix}link-hover-color) !default;
@ -747,7 +779,7 @@ $pagination-disabled-border-color: transparent !default;
// Card
$card-box-shadow: 0px 0px 20px 0px rgba(76,87,125,0.02) !default;
$card-border-color: var(--#{$prefix}border-color) !default;
$card-border-color: $border-color !default;
$card-border-width: 1px !default;
$card-border-style: solid !default;
$card-border-dashed-color: var(--#{$prefix}border-dashed-color) !default;
@ -759,7 +791,7 @@ $card-border-radius: $border-radius-lg !default;
$card-header-py: 0.5rem !default;
$card-header-height: 70px !default;
$card-border-enabled: false !default;
$card-title-color: var(--#{$prefix}gray-900) !default;
// Accordion
$accordion-color: var(--#{$prefix}body-color) !default;
@ -840,7 +872,6 @@ $badge-size: 1.75rem !default;
$badge-size-sm: 1.5rem !default;
$badge-size-lg: 2rem !default;
// Modals
// Padding applied to the modal body
$modal-inner-padding: 1.75rem !default;
@ -940,13 +971,15 @@ $btn-close-bg: url("data:image/svg+xml,<svg xmlns='http://www.
$btn-close-focus-shadow: none !default;
// Code
$code-bg: #F1F3F8 !default;
$code-box-shadow: 0px 3px 9px rgba(0, 0, 0, 0.08) !default;
$code-bg: #f1f3f8 !default;
$code-shadow: 0px 3px 9px rgba(0,0,0,.08);
$code-color: #b93993 !default;
$code-border-color: transparent !default;
$code-padding: 0.1rem 0.4rem !default;
$code-margin: 0 0.5rem !default;
$code-font-size: 1rem !default;
$code-font-weight: 400 !default;
$code-border-radius: 0.3rem !default;
$code-color: #b93993 !default;
$code-space: 0.25rem !default;
// Opacity
@ -1079,6 +1112,10 @@ $symbol-border-color: rgba(var(--#{$prefix}body-bg), 0.5);
$symbol-label-color: var(--#{$prefix}gray-800);
$symbol-label-bg: var(--#{$prefix}gray-100);
// Keenthemes timeline component
$timeline-icon-size: 38px;
$timeline-icon-space: 0.35rem;
// Keenthemes bullet component
$bullet-bg-color: var(--#{$prefix}gray-400) !default;
@ -1151,12 +1188,20 @@ $menu-arrow-size: 9px !default;
$menu-arrow-space: 5px !default;
$menu-heading-color: $text-muted !default;
// Keenthemes tree component
$tree-icon-size: 16px !default;
$tree-icon-gap: 14px !default;
$tree-node-padding-y: 0.35rem !default;
$tree-node-padding-x: 1.25rem !default;
// Keenthemes scrollbar component
$scrollbar-size: 5px !default;
$scrollbar-overlay-size: 19px !default;
$scrollbar-overlay-space: 7px !default;
$scrollbar-color: $gray-200 !default;
$scrollbar-hover-color: $gray-300 !default;
$body-scrollbar-width: 15px !default;
// Keenthemes overlay component
$overlay-bg: rgba($black, 0.05) !default;

View File

@ -15,7 +15,7 @@
}
// Remove border
&:not(.btn-outline):not(.btn-dashed):not(.btn-bordered):not(.border-hover):not(.border-active):not(.btn-flush):not(.btn-icon) {
&:not(.btn-outline):not(.btn-dashed):not(.btn-bordered):not(.border-hover):not(.border-active):not(.btn-flush):not(.btn-icon):not(.btn-hover-outline) {
border: 0;
padding: calc(#{$btn-padding-y} + #{$btn-border-width}) calc(#{$btn-padding-x} + #{$btn-border-width});

View File

@ -20,6 +20,24 @@
@include button-custom-variant($color, $icon-color, $border-color, $bg-color, $color-active, $icon-color-active, $border-color-active, $bg-color-active);
}
// Outline hover basic style
.btn.btn-hover-outline {
border-width: 1px;
border-style: solid;
$color: null;
$icon-color: null;
$border-color: null;
$bg-color: null;
$color-active: null;
$icon-color-active: null;
$border-color-active: $input-border-color;
$bg-color-active: null;
@include button-custom-variant($color, $icon-color, $border-color, $bg-color, $color-active, $icon-color-active, $border-color-active, $bg-color-active);
}
// Theme colors
@each $name, $value in $theme-colors {
// Base

View File

@ -0,0 +1,74 @@
//
// Buttons Base
//
// Base
.btn {
}
// With icon
.btn {
// Font icon
> i {
display: inline-flex;
font-size: $font-size-base;
padding-right: 0.35rem;
vertical-align: middle;
}
// Icon only button
&.btn-icon {
display: inline-flex;
align-items: center;
justify-content: center;
padding: 0;
height: $input-height;
width: $input-height;
line-height: 1;
i {
padding-right: 0;
}
// Sizes
&.btn-sm {
height: $input-height-sm;
width: $input-height-sm;
}
&.btn-lg {
height: $input-height-lg;
width: $input-height-lg;
}
&.btn-circle {
border-radius: 50%;
}
}
}
// Utilities
.btn {
.btn-reset {
background-color: transparent;
border: 0;
box-shadow: none;
user-select: none;
outline: none;
}
&.btn-flex {
display: inline-flex;
align-items: center;
}
&.btn-trim-start {
justify-content: flex-start !important;
padding-left: 0 !important;
}
&.btn-trim-end {
justify-content: flex-end !important;
padding-right: 0 !important;
}
}

View File

@ -0,0 +1,21 @@
//
// Buttons Theme
//
// Theme colors
@each $name, $value in $theme-colors {
// Base
.btn.btn-#{$name} {
$color: var(--#{$prefix}#{$name}-inverse);
$icon-color: var(--#{$prefix}#{$name}-inverse);
$border-color: var(--#{$prefix}#{$name});
$bg-color: var(--#{$prefix}#{$name});
$color-active: var(--#{$prefix}#{$name}-inverse);
$icon-color-active: var(--#{$prefix}#{$name}-inverse);
$border-color-active: var(--#{$prefix}#{$name}-active);
$bg-color-active: var(--#{$prefix}#{$name}-active);
@include button-custom-variant($color, $icon-color, $border-color, $bg-color, $color-active, $icon-color-active, $border-color-active, $bg-color-active);
}
}

View File

@ -64,6 +64,7 @@
@import "cookiealert";
@import "print";
@import "helpers";
@import "tree";
@import "testimonials-slider";
//
// Components

View File

@ -137,6 +137,13 @@
background-color: var(--#{$prefix}gray-#{$name});
}
.bg-hover-gray-#{$name} {
&:hover {
--#{$prefix}bg-rgb-color: var(--#{$prefix}gray-#{$name}-rgb);
background-color: var(--#{$prefix}gray-#{$name});
}
}
.bg-gray-#{$name}i {
--#{$prefix}bg-rgb-color: var(--#{$prefix}gray-#{$name}-rgb);
background-color: var(--#{$prefix}gray-#{$name}) !important;

View File

@ -126,6 +126,15 @@
}
}
// No wrap
.menu-nowrap {
.menu-title,
.menu-link {
flex-wrap: nowrap;
flex-shrink: 0;
}
}
// Center alignment
.menu-center {
justify-content: center;

View File

@ -358,6 +358,15 @@
}
}
.menu-state-gray-900 {
.menu-item {
@include menu-link-hover-state( var(--#{$prefix}gray-900), var(--#{$prefix}gray-900), var(--#{$prefix}gray-900), var(--#{$prefix}gray-900), null );
@include menu-link-show-state( var(--#{$prefix}gray-900), var(--#{$prefix}gray-900), var(--#{$prefix}gray-900), var(--#{$prefix}gray-900), null );
@include menu-link-here-state( var(--#{$prefix}gray-900), var(--#{$prefix}gray-900), var(--#{$prefix}gray-900), var(--#{$prefix}gray-900), null );
@include menu-link-active-state( var(--#{$prefix}gray-900), var(--#{$prefix}gray-900), var(--#{$prefix}gray-900), var(--#{$prefix}gray-900), null );
}
}
// Primary title color states
.menu-hover-title-primary {
.menu-item {

View File

@ -28,7 +28,7 @@
}
.stepper-title {
color: var(--#{$prefix}dark);
color: var(--#{$prefix}gray-900);
font-weight: 600;
font-size: 1.25rem;
}
@ -49,7 +49,7 @@
&.current.mark-completed:last-child,
&.completed {
.stepper-title {
color: var(--#{$prefix}gray-400);
color: var(--#{$prefix}gray-500);
}
}
}

View File

@ -34,8 +34,8 @@
--#{$prefix}stepper-label-desc-opacity-completed: 1;
--#{$prefix}stepper-label-desc-color: var(--#{$prefix}text-muted);
--#{$prefix}stepper-label-desc-color-current: var(--#{$prefix}gray-400);
--#{$prefix}stepper-label-desc-color-completed: var(--#{$prefix}gray-400);
--#{$prefix}stepper-label-desc-color-current: var(--#{$prefix}gray-500);
--#{$prefix}stepper-label-desc-color-completed: var(--#{$prefix}gray-500);
--#{$prefix}stepper-line-border: 1px dashed var(--#{$prefix}gray-300);

View File

@ -4,7 +4,7 @@
// Reboot
$app-bg-color: #fcfcfc;
$app-bg-color-dark: transparent;
$app-bg-color-dark: $coal-400;
$app-blank-bg-color: $app-bg-color;
$app-blank-bg-color-dark: $app-bg-color-dark;
@ -21,7 +21,7 @@ $app-container-padding-x-mobile: 20px;
$app-header-base-height: 74px;
$app-header-base-height-mobile: 60px;
$app-header-base-bg-color: transparent;
$app-header-base-bg-color-dark: #131313;
$app-header-base-bg-color-dark: $coal-500;
$app-header-base-bg-color-mobile: $app-header-base-bg-color;
$app-header-base-bg-color-mobile-dark: $app-header-base-bg-color-dark;
$app-header-base-box-shadow: none;
@ -40,7 +40,7 @@ $app-header-light-separator-color: #E4E6EF;
$app-header-light-separator-color-dark: $border-color-dark;
// Header dark
$app-header-dark-bg-color:#131313;
$app-header-dark-bg-color:$coal-600;
$app-header-dark-separator-color: #282a3d;
$app-header-dark-scrollbar-color: #3b3b64;
$app-header-dark-scrollbar-color-hover: lighten($app-header-dark-scrollbar-color, 3%);
@ -64,7 +64,7 @@ $app-sidebar-minimize-width: 75px;
// Sidebar light
$app-sidebar-light-bg-color: $body-bg;
$app-sidebar-light-bg-color-dark:#131313;
$app-sidebar-light-bg-color-dark:$coal-500;
$app-sidebar-light-box-shadow: 0 0 28px 0 rgba(82,63,105,.05);
$app-sidebar-light-box-shadow-dark: none;
@ -86,11 +86,11 @@ $app-sidebar-light-header-menu-link-bg-color-active: #F7F8FB;
$app-sidebar-light-header-menu-link-bg-color-active-dark: $gray-100-dark;
// Sidebar dark
$app-sidebar-dark-bg-color: #131313;
$app-sidebar-dark-separator-color: #393945;
$app-sidebar-dark-bg-color: $coal-500;
$app-sidebar-dark-separator-color: $light-light-dark;
$app-sidebar-dark-scrollbar-color-hover: lighten($app-sidebar-dark-separator-color, 2%);
$app-sidebar-dark-menu-heading-color: #626671;
$app-sidebar-dark-menu-sub-link-color: #888A8E;
$app-sidebar-dark-menu-heading-color: $gray-500-dark;
$app-sidebar-dark-menu-sub-link-color: $gray-600-dark;;
$app-sidebar-dark-menu-link-bg-color-active: #1C1C21;
// Aside base
@ -116,7 +116,7 @@ $app-footer-height: 60px;
$app-footer-height-mobile: auto;
$app-footer-bg-color: transparent;
$app-footer-bg-color-dark: transparent;
$app-footer-box-shadow: 0px 10px 30px 0px rgba(82,63,105,0.05);
$app-footer-box-shadow: 0px 10px 30px 0px rgba(49, 25, 79, 0.05);
$app-footer-box-shadow-dark: none;
// Scrolltop

View File

@ -139,6 +139,16 @@
);
}
// Aside
[data-kt-app-header-fixed="true"][data-kt-app-aside-fixed="true"][data-kt-app-aside-push-header="true"] &,
[data-kt-app-header-fixed="true"][data-kt-app-aside-sticky="on"][data-kt-app-aside-push-header="true"] & {
right: calc(
var(--#{$prefix}app-aside-width) +
var(--#{$prefix}app-aside-gap-start, 0px) +
var(--#{$prefix}app-aside-gap-end, 0px)
);
}
// Toolbar
[data-kt-app-header-fixed="true"][data-kt-app-toolbar-fixed="true"] & {
box-shadow: none;

View File

@ -9,8 +9,8 @@
.btn-custom {
@include button-custom-variant(
$color:var(--#{$prefix}gray-200),
$icon-color: var(--#{$prefix}gray-200),
$color: $gray-600-dark,
$icon-color: $gray-600-dark,
$border-color: null,
$bg-color: null,
$color-active: var(--#{$prefix}primary),
@ -28,10 +28,10 @@
// Menu root links
> .menu-item {
@include menu-link-default-state(
$title-color: #858585,
$icon-color:#C5C5D8,
$bullet-color:#787887,
$arrow-color: #787887,
$title-color: $gray-600-dark,
$icon-color:$gray-600-dark,
$bullet-color:$gray-600-dark,
$arrow-color: $gray-600-dark,
$bg-color: null,
$all-links: false
);

View File

@ -125,6 +125,13 @@
background-color: var(--#{$prefix}app-header-minimize-bg-color);
}
}
// Modal open fix
[data-kt-app-header-fixed="true"].modal-open {
.app-header {
padding-right: $body-scrollbar-width !important;
}
}
}
// Dark mode

View File

@ -30,72 +30,55 @@
}
.menu {
> .menu-item {
.menu-item {
.menu-heading {
color: $app-sidebar-dark-menu-heading-color !important;
}
@include menu-link-default-state(
$title-color: $gray-300,
$icon-color: #7F8194,
$bullet-color:#7F8194,
$arrow-color: var(--#{$prefix}gray-700),
$bg-color: null
);
@include menu-link-hover-state(
$title-color: var(--#{$prefix}primary-inverse),
$icon-color: var(--#{$prefix}primary-inverse),
$bullet-color: var(--#{$prefix}primary-inverse),
$arrow-color: var(--#{$prefix}primary-inverse),
$bg-color: null
$title-color: $gray-700-dark,
$icon-color: $gray-400-dark,
$bullet-color:$gray-400-dark,
$arrow-color: $gray-400-dark,
$bg-color: null,
$all-links: true
);
@include menu-link-here-state(
$title-color: $gray-300,
$icon-color: var(--#{$prefix}primary-inverse),
$bullet-color: var(--#{$prefix}primary-inverse),
$arrow-color: var(--#{$prefix}gray-700),
$bg-color: null
$title-color: $gray-900-dark,
$icon-color: $gray-900-dark,
$bullet-color: $gray-900-dark,
$arrow-color: $gray-900-dark,
$bg-color: null,
$all-links: true
);
@include menu-link-show-state(
$title-color: $gray-300,
$icon-color: var(--#{$prefix}primary-inverse),
$bullet-color: var(--#{$prefix}primary-inverse),
$arrow-color: var(--#{$prefix}gray-700),
$bg-color: null
$title-color: $gray-900-dark,
$icon-color: $gray-900-dark,
$bullet-color: $gray-900-dark,
$arrow-color: $gray-900-dark,
$bg-color: null,
$all-links: true
);
@include menu-link-hover-state(
$title-color: $gray-900-dark,
$icon-color: $gray-900-dark,
$bullet-color: $gray-900-dark,
$arrow-color: $gray-900-dark,
$bg-color: null,
$all-links: true
);
@include menu-link-active-state(
$title-color: var(--#{$prefix}primary-inverse),
$icon-color: var(--#{$prefix}primary-inverse),
$bullet-color: var(--#{$prefix}primary-inverse),
$arrow-color: var(--#{$prefix}primary-inverse),
$bg-color: $app-sidebar-dark-menu-link-bg-color-active
$title-color: $gray-900-dark,
$icon-color: $gray-900-dark,
$bullet-color: $gray-900-dark,
$arrow-color: $gray-900-dark,
$bg-color: $app-sidebar-dark-menu-link-bg-color-active,
$all-links: true
);
.menu-sub {
.menu-item {
.menu-link {
.menu-title {
color: $app-sidebar-dark-menu-sub-link-color;
}
&.active {
.menu-title {
color: var(--#{$prefix}white);
}
.menu-bullet {
.bullet {
background-color: var(--#{$prefix}white);
}
}
}
}
}
}
}
}
}
@ -116,7 +99,7 @@
@include color-mode(dark) {
[data-kt-app-layout="dark-sidebar"] {
.app-sidebar {
border-right: 1px dashed $app-sidebar-dark-separator-color;
border-right: 1px solid $app-sidebar-dark-separator-color;
}
}
}

View File

@ -185,7 +185,7 @@
color: var(--#{$prefix}gray-700);
&.available.off {
color: var(--#{$prefix}gray-400);
color: var(--#{$prefix}gray-500);
}
&.active {

View File

@ -9,7 +9,7 @@
&.draggable-mirror {
opacity: 0.8;
transition: opacity 0.3s ease;
border: 2px dashed var(--#{$prefix}gray-300) !important;
border: 1px dashed var(--#{$prefix}gray-300) !important;
@include border-radius($border-radius);
}

View File

@ -390,14 +390,14 @@ span.flatpickr-weekday {
&.notAllowed,
&.notAllowed.prevMonthDay,
&.notAllowed.nextMonthDay {
color: var(--#{$prefix}gray-400);
color: var(--#{$prefix}gray-500);
background: transparent;
border-color: transparent;
}
&.flatpickr-disabled,
&.flatpickr-disabled:hover {
cursor: not-allowed;
color: var(--#{$prefix}gray-400);
color: var(--#{$prefix}gray-500);
}
}

View File

@ -1,7 +1,7 @@
const gulpConfig = {
name: "metronic",
name: "{theme}",
desc: "Gulp build config",
version: "8.2.0",
version: "{version}",
config: {
debug: false,
compile: {
@ -23,11 +23,11 @@ const gulpConfig = {
cssSourcemaps: false,
},
path: {
src: "../src",
common_src: "../src",
src: "../src/{theme}/{demo}",
common_src: "../src/{theme}/{demo}",
node_modules: "node_modules",
},
dist: ["../../../public/assets"],
dist: ["../../../themes/{theme}/html/assets"],
},
build: {
base: {
@ -280,17 +280,7 @@ const gulpConfig = {
draggable: {
src: {
scripts: [
"{$config.path.node_modules}/@shopify/draggable/lib/draggable.bundle.js",
"{$config.path.node_modules}/@shopify/draggable/lib/draggable.bundle.legacy.js",
"{$config.path.node_modules}/@shopify/draggable/lib/draggable.js",
"{$config.path.node_modules}/@shopify/draggable/lib/sortable.js",
"{$config.path.node_modules}/@shopify/draggable/lib/droppable.js",
"{$config.path.node_modules}/@shopify/draggable/lib/swappable.js",
"{$config.path.node_modules}/@shopify/draggable/lib/plugins.js",
"{$config.path.node_modules}/@shopify/draggable/lib/plugins/collidable.js",
"{$config.path.node_modules}/@shopify/draggable/lib/plugins/resize-mirror.js",
"{$config.path.node_modules}/@shopify/draggable/lib/plugins/snappable.js",
"{$config.path.node_modules}/@shopify/draggable/lib/plugins/swap-animation.js",
"{$config.path.node_modules}/@shopify/draggable/build/umd/index.min.js",
],
},
dist: {

View File

@ -72,7 +72,7 @@ if (typeof docsOption !== 'undefined') {
theme += '.net-core'
}
build.config.path.src = '../../../themes/docs/{theme}/src';
build.config.dist = ['../../../themes/docs/{theme}/dist/assets'];
build.config.dist = ['../../../themes/docs/{theme}/assets'];
}

View File

@ -1,43 +1,42 @@
{
"name": "keenthemes",
"version": "1.0.0",
"version": "8.2.1",
"author": "Keenthemes",
"license": "ISC",
"homepage": "https://keenthemes.com/",
"description": "Packages used by yarn, npm, gulp and webpack",
"main": "gulpfile.js",
"type": "module",
"dependencies": {
"@ckeditor/ckeditor5-alignment": "38.1.1",
"@ckeditor/ckeditor5-build-balloon": "38.1.1",
"@ckeditor/ckeditor5-build-balloon-block": "38.1.1",
"@ckeditor/ckeditor5-build-classic": "38.1.1",
"@ckeditor/ckeditor5-build-decoupled-document": "38.1.1",
"@ckeditor/ckeditor5-build-inline": "38.1.1",
"@eonasdan/tempus-dominus": "^6.7.11",
"@fortawesome/fontawesome-free": "^6.4.0",
"@ckeditor/ckeditor5-alignment": "40.0.0",
"@ckeditor/ckeditor5-build-balloon": "40.0.0",
"@ckeditor/ckeditor5-build-balloon-block": "40.0.0",
"@ckeditor/ckeditor5-build-classic": "40.0.0",
"@ckeditor/ckeditor5-build-decoupled-document": "40.0.0",
"@ckeditor/ckeditor5-build-inline": "40.0.0",
"@eonasdan/tempus-dominus": "^6.7.16",
"@fortawesome/fontawesome-free": "^6.4.2",
"@popperjs/core": "2.11.8",
"@shopify/draggable": "^1.0.0-beta.12",
"@yaireo/tagify": "^4.17.8",
"@shopify/draggable": "^1.1.3",
"@yaireo/tagify": "^4.17.9",
"acorn": "^8.10.0",
"apexcharts": "3.41.0",
"apexcharts": "3.44.0",
"autosize": "^6.0.1",
"axios": "^1.4.0",
"bootstrap": "5.3.0",
"axios": "^1.6.0",
"bootstrap": "5.3.2",
"bootstrap-cookie-alert": "^1.2.2",
"bootstrap-daterangepicker": "^3.1.0",
"bootstrap-icons": "^1.10.5",
"bootstrap-icons": "^1.11.1",
"bootstrap-maxlength": "^1.10.1",
"bootstrap-multiselectsplitter": "^1.0.4",
"chalk": "^5.3.0",
"chart.js": "^4.3.0",
"chart.js": "^4.4.0",
"clipboard": "^2.0.11",
"countup.js": "^2.7.0",
"cropperjs": "^1.5.13",
"datatables.net": "^1.13.5",
"datatables.net-bs5": "^1.13.5",
"datatables.net-buttons": "^2.4.1",
"datatables.net-buttons-bs5": "^2.4.1",
"countup.js": "^2.8.0",
"cropperjs": "^1.6.1",
"datatables.net": "^1.13.6",
"datatables.net-bs5": "^1.13.6",
"datatables.net-buttons": "^2.4.2",
"datatables.net-buttons-bs5": "^2.4.2",
"datatables.net-colreorder": "^1.7.0",
"datatables.net-colreorder-bs5": "^1.7.0",
"datatables.net-datetime": "^1.5.0",
@ -45,13 +44,13 @@
"datatables.net-fixedcolumns-bs5": "^4.3.0",
"datatables.net-fixedheader": "^3.4.0",
"datatables.net-fixedheader-bs5": "^3.4.0",
"datatables.net-plugins": "^1.13.5",
"datatables.net-plugins": "^1.13.6",
"datatables.net-responsive": "^2.5.0",
"datatables.net-responsive-bs5": "^2.5.0",
"datatables.net-rowgroup": "^1.4.0",
"datatables.net-rowgroup-bs5": "^1.4.0",
"datatables.net-rowreorder": "^1.4.0",
"datatables.net-rowreorder-bs5": "^1.4.0",
"datatables.net-rowgroup": "^1.4.1",
"datatables.net-rowgroup-bs5": "^1.4.1",
"datatables.net-rowreorder": "^1.4.1",
"datatables.net-rowreorder-bs5": "^1.4.1",
"datatables.net-scroller": "^2.2.0",
"datatables.net-scroller-bs5": "^2.2.0",
"datatables.net-select": "^1.7.0",
@ -60,44 +59,42 @@
"es6-promise": "^4.2.8",
"es6-promise-polyfill": "^1.2.0",
"es6-shim": "^0.35.8",
"esri-leaflet": "^3.0.10",
"esri-leaflet": "^3.0.11",
"esri-leaflet-geocoder": "^3.1.4",
"flatpickr": "^4.6.13",
"flot": "^4.2.3",
"flot": "^4.2.6",
"fslightbox": "^3.4.1",
"fullcalendar": "^5.8.0",
"handlebars": "^4.7.7",
"handlebars": "^4.7.8",
"inputmask": "^5.0.8",
"jkanban": "^1.3.1",
"jquery": "3.7.0",
"jquery": "3.7.1",
"jquery.repeater": "^1.2.1",
"jstree": "^3.3.15",
"jstree": "^3.3.16",
"jszip": "^3.10.1",
"leaflet": "^1.9.4",
"line-awesome": "^1.3.0",
"lozad": "^1.16.0",
"moment": "^2.29.4",
"nouislider": "^15.7.1",
"npm": "^9.8.0",
"npm": "^10.2.1",
"pdfmake": "^0.2.7",
"prism-themes": "^1.9.0",
"prismjs": "^1.29.0",
"quill": "^1.3.7",
"select2": "^4.1.0-rc.0",
"smooth-scroll": "^16.1.3",
"sweetalert2": "11.7.16",
"sweetalert2": "11.4.8",
"tiny-slider": "^2.9.4",
"tinymce": "^5.8.2",
"toastr": "^2.1.4",
"typed.js": "2.0.16",
"vis-timeline": "^7.7.2",
"vis-timeline": "^7.7.3",
"wnumb": "^1.2.0"
},
"devDependencies": {
"@babel/core": "^7.22.5",
"@babel/plugin-transform-modules-commonjs": "^7.22.5",
"@babel/preset-env": "^7.22.5",
"@babel/register": "^7.22.5",
"@babel/core": "^7.23.0",
"@babel/runtime": "^7.23.1",
"copy-webpack-plugin": "^11.0.0",
"css-loader": "^5.2.7",
"css-minimizer-webpack-plugin": "^5.0.1",
@ -105,6 +102,7 @@
"extract-loader": "^5.1.0",
"file-loader": "^6.2.0",
"fs-extra": "^11.1.1",
"glob": "^10.3.10",
"gulp": "^4.0.2",
"gulp-clean-css": "^4.3.0",
"gulp-concat": "^2.6.1",
@ -121,22 +119,19 @@
"merge-stream": "^2.0.0",
"mini-css-extract-plugin": "^2.7.6",
"postcss-loader": "^7.3.3",
"pretty": "^2.0.0",
"replace-in-file-webpack-plugin": "^1.0.6",
"rtlcss-webpack-plugin": "^4.0.7",
"sass-loader": "^13.3.2",
"script-loader": "^0.7.2",
"terser-webpack-plugin": "^5.3.9",
"url-loader": "^4.1.1",
"webpack": "^5.88.1",
"webpack": "^5.88.2",
"webpack-cli": "^5.1.4",
"webpack-dev-server": "^4.15.1",
"webpack-exclude-assets-plugin": "^0.1.1",
"webpack-log": "^3.0.2",
"webpack-merge-and-include-globally": "^2.3.4",
"webpack-messages": "^2.0.4",
"yargs": "^17.7.2",
"yarn-install": "^1.0.0"
"yargs": "^17.7.2"
},
"scripts": {
"test": "echo \"Error: no test specified\" && exit 1",

BIN
resources/mix/.DS_Store vendored Normal file

Binary file not shown.

View File

@ -36,12 +36,12 @@ module.exports = [
// Select2 - Select2 is a jQuery based replacement for select boxes: https://select2.org/
'node_modules/select2/dist/js/select2.full.js',
'resources/_keenthemes/src/js/vendors/plugins/select2.init.js',
'resources/_keenthemes/src/metronic/demo1/js/vendors/plugins/select2.init.js',
// FormValidation - Best premium validation library for JavaScript. Zero dependencies. Learn more: https://formvalidation.io/
"resources/_keenthemes/src/plugins/@form-validation/umd/bundle/popular.min.js",
"resources/_keenthemes/src/plugins/@form-validation/umd/bundle/full.min.js",
"resources/_keenthemes/src/plugins/@form-validation/umd/plugin-bootstrap5/index.min.js",
"resources/_keenthemes/src/metronic/demo1/plugins/@form-validation/umd/bundle/popular.min.js",
"resources/_keenthemes/src/metronic/demo1/plugins/@form-validation/umd/bundle/full.min.js",
"resources/_keenthemes/src/metronic/demo1/plugins/@form-validation/umd/plugin-bootstrap5/index.min.js",
// Bootstrap Maxlength - This plugin integrates by default with Twitter bootstrap using badges to display the maximum length of the field where the user is inserting text: https://github.com/mimo84/bootstrap-maxlength
'node_modules/bootstrap-maxlength/src/bootstrap-maxlength.js',
@ -64,7 +64,7 @@ module.exports = [
// DropzoneJS - is an open source library that provides drag'n'drop file uploads with image previews: https://www.dropzonejs.com/
'node_modules/dropzone/dist/min/dropzone.min.js',
'resources/_keenthemes/src/js/vendors/plugins/dropzone.init.js',
'resources/_keenthemes/src/metronic/demo1/js/vendors/plugins/dropzone.init.js',
// Quill - is a free, open source WYSIWYG editor built for the modern web. Completely customize it for any need with its modular architecture and expressive API: https://quilljs.com/
'node_modules/quill/dist/quill.js',
@ -74,7 +74,7 @@ module.exports = [
'node_modules/@yaireo/tagify/dist/tagify.min.js',
// Toastr - is a Javascript library for non-blocking notifications. jQuery is required. The goal is to create a simple core library that can be customized and extended: https://github.com/CodeSeven/toastr
'resources/_keenthemes/src/plugins/toastr/build/toastr.min.js',
'resources/_keenthemes/src/metronic/demo1/plugins/toastr/build/toastr.min.js',
// Apexcharts - modern charting library that helps developers to create beautiful and interactive visualizations for web pages: https://apexcharts.com/
'node_modules/apexcharts/dist/apexcharts.min.js',
@ -84,7 +84,7 @@ module.exports = [
// Sweetalert2 - a beautiful, responsive, customizable and accessible (WAI-ARIA) replacement for JavaScript's popup boxes: https://sweetalert2.github.io/
'node_modules/sweetalert2/dist/sweetalert2.min.js',
'resources/_keenthemes/src/js/vendors/plugins/sweetalert2.init.js',
'resources/_keenthemes/src/metronic/demo1/js/vendors/plugins/sweetalert2.init.js',
// CountUp.js - is a dependency-free, lightweight JavaScript class that can be used to quickly create animations that display numerical data in a more interesting way.
'node_modules/countup.js/dist/countUp.umd.js',

View File

@ -12,7 +12,7 @@
@import "~apexcharts/dist/apexcharts.css";
// FormValidation - Best premium validation library for JavaScript. Zero dependencies. Learn more: https://formvalidation.io/
@import "../_keenthemes/src/plugins/@form-validation/umd/styles/index.css";
@import "../_keenthemes/src/metronic/demo1/plugins/@form-validation/umd/styles/index.css";
// Bootstrap Daterangepicker
@import "~bootstrap-daterangepicker/daterangepicker.css";
@ -35,7 +35,7 @@
@import "~@yaireo/tagify/dist/tagify.css";
// Toastr - is a Javascript library for non-blocking notifications. jQuery is required. The goal is to create a simple core library that can be customized and extended: https://github.com/CodeSeven/toastr
@import "../_keenthemes/src/plugins/toastr/build/toastr.css";
@import "../_keenthemes/src/metronic/demo1/plugins/toastr/build/toastr.css";
// Sweetalert2 - a beautiful, responsive, customizable and accessible (WAI-ARIA) replacement for JavaScript's popup boxes: https://sweetalert2.github.io/
@import "~sweetalert2/dist/sweetalert2.css";
@ -56,12 +56,12 @@
@import "~tiny-slider/dist/tiny-slider.css";
// Keenthemes Vendors customization
@import "../_keenthemes/src/sass/plugins";
@import "../_keenthemes/src/metronic/demo1/sass/plugins";
// Keenicons - High quality and pixel perfect font icons available in 3 styles, duotone, outline and solid for Metronic elements
@import "../_keenthemes/src/plugins/keenicons/duotone/style.css";
@import "../_keenthemes/src/plugins/keenicons/outline/style.css";
@import "../_keenthemes/src/plugins/keenicons/solid/style.css";
@import "../_keenthemes/src/metronic/demo1/plugins/keenicons/duotone/style.css";
@import "../_keenthemes/src/metronic/demo1/plugins/keenicons/outline/style.css";
@import "../_keenthemes/src/metronic/demo1/plugins/keenicons/solid/style.css";
// Tempus Dominus is the successor to the very popular Eonasdan/bootstrap-datetimepicker. The plugin provide a robust date and time picker designed to integrate into your Bootstrap project.
@import "@eonasdan/tempus-dominus/dist/css/tempus-dominus.min.css";

View File

@ -1,8 +1,8 @@
const glob = require('glob');
// Keenthemes' plugins
var componentJs = glob.sync(`resources/_keenthemes/src/js/components/*.js`) || [];
var coreLayoutJs = glob.sync(`resources/_keenthemes/src/js/layout/*.js`) || [];
var componentJs = glob.sync(`resources/_keenthemes/src/metronic/demo1/js/components/*.js`) || [];
var coreLayoutJs = glob.sync(`resources/_keenthemes/src/metronic/demo1/js/layout/*.js`) || [];
module.exports = [
...componentJs,

BIN
resources/mix/vendors/.DS_Store vendored Normal file

Binary file not shown.

View File

@ -2,7 +2,7 @@
module.exports = [
'node_modules/datatables.net/js/jquery.dataTables.js',
'node_modules/datatables.net-bs5/js/dataTables.bootstrap5.js',
'resources/_keenthemes/src/js/vendors/plugins/datatables.init.js',
'resources/_keenthemes/src/metronic/demo1/js/vendors/plugins/datatables.init.js',
'node_modules/jszip/dist/jszip.js',
'node_modules/pdfmake/build/pdfmake.js',
'node_modules/pdfmake/build/vfs_fonts.js',

View File

@ -1,15 +1,5 @@
// Draggable - a lightweight, responsive, modern drag & drop library: https://shopify.github.io/draggable/
module.exports = [
'node_modules/@shopify/draggable/lib/draggable.bundle.js',
'node_modules/@shopify/draggable/lib/draggable.bundle.legacy.js',
'node_modules/@shopify/draggable/lib/draggable.js',
'node_modules/@shopify/draggable/lib/sortable.js',
'node_modules/@shopify/draggable/lib/droppable.js',
'node_modules/@shopify/draggable/lib/swappable.js',
'node_modules/@shopify/draggable/lib/plugins.js',
'node_modules/@shopify/draggable/lib/plugins/collidable.js',
'node_modules/@shopify/draggable/lib/plugins/resize-mirror.js',
'node_modules/@shopify/draggable/lib/plugins/snappable.js',
'node_modules/@shopify/draggable/lib/plugins/swap-animation.js'
'node_modules/@shopify/draggable/build/umd',
];

View File

@ -1,4 +1,3 @@
module.exports = [
'node_modules/fullcalendar/main.js',
'node_modules/fullcalendar/locales-all.min.js',

View File

@ -1 +1 @@
@import "fullcalendar/main.min.css";
@import "~fullcalendar/main.min.css";

View File

@ -1,3 +1,3 @@
<x-system-layout>
@include('pages.system.not_found')
@include('pages/system.not_found')
</x-system-layout>

View File

@ -1,3 +1,3 @@
<x-system-layout>
@include('pages.system.error')
@include('pages/system.error')
</x-system-layout>

View File

@ -47,7 +47,7 @@
<!--end::Logo-->
<!--begin::Image-->
<img class="d-none d-lg-block mx-auto w-500px mb-10 mb-lg-20" src="{{ image('misc/bg-login.png') }}" alt=""/>
<img class="d-none d-lg-block mx-auto w-275px w-md-50 w-xl-500px mb-10 mb-lg-20" src="{{ image('misc/auth-screens.png') }}" alt=""/>
<!--end::Image-->
<!--begin::Title-->

View File

@ -38,8 +38,7 @@
@endforeach
<!--end::Custom Stylesheets-->
@yield('styles')
@livewireStyles
</head>
<!--end::Head-->
@ -69,13 +68,10 @@
@endforeach
<!--end::Custom Javascript-->
@stack('scripts')
@yield('scripts')
@stack('customscript')
<!--end::Javascript-->
<script>
document.addEventListener('livewire:initialized', () => {
document.addEventListener('livewire:load', () => {
Livewire.on('success', (message) => {
toastr.success(message);
});

View File

@ -3,7 +3,7 @@
<!--begin::Footer container-->
<div class="app-container container-xxl d-flex flex-column flex-md-row flex-center flex-md-stack py-3">
<!--begin::Copyright-->
<div class="text-dark order-2 order-md-1">
<div class="text-gray-900 order-2 order-md-1">
<span class="text-muted fw-semibold me-1">{{ date('Y') }}&copy;</span>
<a href="https://keenthemes.com" target="_blank" class="text-gray-800 text-hover-primary">Keenthemes</a>
</div>

View File

@ -1,7 +1,7 @@
<!--begin::Page title-->
<div class="page-title d-flex flex-column justify-content-center flex-wrap me-3">
<!--begin::Title-->
<h1 class="page-heading d-flex text-dark fw-bold fs-3 flex-column justify-content-center my-0">
<h1 class="page-heading d-flex text-gray-900 fw-bold fs-3 flex-column justify-content-center my-0">
@yield('title')
</h1>
<!--end::Title-->

View File

@ -80,7 +80,7 @@
<div class="menu-item p-0 m-0">
<!--begin:Menu link-->
<a href="{{ route('dashboard') }}" class="menu-link">
<span class="menu-custom-icon d-flex flex-center flex-shrink-0 rounded w-40px h-40px me-3">{!! getIcon('chart-simple', 'text-dark fs-1') !!}</span>
<span class="menu-custom-icon d-flex flex-center flex-shrink-0 rounded w-40px h-40px me-3">{!! getIcon('chart-simple', 'text-gray-900 fs-1') !!}</span>
<span class="d-flex flex-column">
<span class="fs-6 fw-bold text-gray-800">Marketing</span>
<span class="fs-7 fw-semibold text-muted">Campaings & conversions</span>

View File

@ -2,7 +2,7 @@
<!--begin::Preferences-->
<form data-kt-search-element="advanced-options-form" class="pt-1 d-none">
<!--begin::Heading-->
<h3 class="fw-bold text-dark mb-7">Advanced Search</h3>
<h3 class="fw-bold text-gray-900 mb-7">Advanced Search</h3>
<!--end::Heading-->
<!--begin::Input group-->
<div class="mb-5">

View File

@ -10,7 +10,7 @@
<!--end::Input-->
<!--begin::Spinner-->
<span class="position-absolute top-50 end-0 translate-middle-y lh-0 d-none me-1" data-kt-search-element="spinner">
<span class="spinner-border h-15px w-15px align-middle text-gray-400"></span>
<span class="spinner-border h-15px w-15px align-middle text-gray-500"></span>
</span>
<!--end::Spinner-->
<!--begin::Reset-->

View File

@ -3,7 +3,7 @@
<!--begin::Preferences-->
<form data-kt-search-element="preferences" class="pt-1 d-none">
<!--begin::Heading-->
<h3 class="fw-bold text-dark mb-7">Search Preferences</h3>
<h3 class="fw-bold text-gray-900 mb-7">Search Preferences</h3>
<!--end::Heading-->
<!--begin::Input group-->
<div class="pb-4 border-bottom">

View File

@ -8,7 +8,7 @@
<h3 class="fs-5 text-muted m-0 pb-5" data-kt-search-element="category-title">Users</h3>
<!--end::Category title-->
<!--begin::Item-->
<a href="#" class="d-flex text-dark text-hover-primary align-items-center mb-5">
<a href="#" class="d-flex text-gray-900 text-hover-primary align-items-center mb-5">
<!--begin::Symbol-->
<div class="symbol symbol-40px me-4">
<img src="{{ image('avatars/300-6.jpg') }}" alt="" />
@ -23,7 +23,7 @@
</a>
<!--end::Item-->
<!--begin::Item-->
<a href="#" class="d-flex text-dark text-hover-primary align-items-center mb-5">
<a href="#" class="d-flex text-gray-900 text-hover-primary align-items-center mb-5">
<!--begin::Symbol-->
<div class="symbol symbol-40px me-4">
<img src="{{ image('avatars/300-2.jpg') }}" alt="" />
@ -38,7 +38,7 @@
</a>
<!--end::Item-->
<!--begin::Item-->
<a href="#" class="d-flex text-dark text-hover-primary align-items-center mb-5">
<a href="#" class="d-flex text-gray-900 text-hover-primary align-items-center mb-5">
<!--begin::Symbol-->
<div class="symbol symbol-40px me-4">
<img src="{{ image('avatars/300-9.jpg') }}" alt="" />
@ -53,7 +53,7 @@
</a>
<!--end::Item-->
<!--begin::Item-->
<a href="#" class="d-flex text-dark text-hover-primary align-items-center mb-5">
<a href="#" class="d-flex text-gray-900 text-hover-primary align-items-center mb-5">
<!--begin::Symbol-->
<div class="symbol symbol-40px me-4">
<img src="{{ image('avatars/300-14.jpg') }}" alt="" />
@ -68,7 +68,7 @@
</a>
<!--end::Item-->
<!--begin::Item-->
<a href="#" class="d-flex text-dark text-hover-primary align-items-center mb-5">
<a href="#" class="d-flex text-gray-900 text-hover-primary align-items-center mb-5">
<!--begin::Symbol-->
<div class="symbol symbol-40px me-4">
<img src="{{ image('avatars/300-11.jpg') }}" alt="" />
@ -86,7 +86,7 @@
<h3 class="fs-5 text-muted m-0 pt-5 pb-5" data-kt-search-element="category-title">Customers</h3>
<!--end::Category title-->
<!--begin::Item-->
<a href="#" class="d-flex text-dark text-hover-primary align-items-center mb-5">
<a href="#" class="d-flex text-gray-900 text-hover-primary align-items-center mb-5">
<!--begin::Symbol-->
<div class="symbol symbol-40px me-4">
<span class="symbol-label bg-light">
@ -103,7 +103,7 @@
</a>
<!--end::Item-->
<!--begin::Item-->
<a href="#" class="d-flex text-dark text-hover-primary align-items-center mb-5">
<a href="#" class="d-flex text-gray-900 text-hover-primary align-items-center mb-5">
<!--begin::Symbol-->
<div class="symbol symbol-40px me-4">
<span class="symbol-label bg-light">
@ -120,7 +120,7 @@
</a>
<!--end::Item-->
<!--begin::Item-->
<a href="#" class="d-flex text-dark text-hover-primary align-items-center mb-5">
<a href="#" class="d-flex text-gray-900 text-hover-primary align-items-center mb-5">
<!--begin::Symbol-->
<div class="symbol symbol-40px me-4">
<span class="symbol-label bg-light">
@ -137,7 +137,7 @@
</a>
<!--end::Item-->
<!--begin::Item-->
<a href="#" class="d-flex text-dark text-hover-primary align-items-center mb-5">
<a href="#" class="d-flex text-gray-900 text-hover-primary align-items-center mb-5">
<!--begin::Symbol-->
<div class="symbol symbol-40px me-4">
<span class="symbol-label bg-light">
@ -154,7 +154,7 @@
</a>
<!--end::Item-->
<!--begin::Item-->
<a href="#" class="d-flex text-dark text-hover-primary align-items-center mb-5">
<a href="#" class="d-flex text-gray-900 text-hover-primary align-items-center mb-5">
<!--begin::Symbol-->
<div class="symbol symbol-40px me-4">
<span class="symbol-label bg-light">
@ -174,7 +174,7 @@
<h3 class="fs-5 text-muted m-0 pt-5 pb-5" data-kt-search-element="category-title">Projects</h3>
<!--end::Category title-->
<!--begin::Item-->
<a href="#" class="d-flex text-dark text-hover-primary align-items-center mb-5">
<a href="#" class="d-flex text-gray-900 text-hover-primary align-items-center mb-5">
<!--begin::Symbol-->
<div class="symbol symbol-40px me-4">
<span class="symbol-label bg-light">{!! getSvgIcon('duotune/general/gen005.svg', 'svg-icon svg-icon-2 svg-icon-primary') !!}</span>
@ -189,7 +189,7 @@
</a>
<!--end::Item-->
<!--begin::Item-->
<a href="#" class="d-flex text-dark text-hover-primary align-items-center mb-5">
<a href="#" class="d-flex text-gray-900 text-hover-primary align-items-center mb-5">
<!--begin::Symbol-->
<div class="symbol symbol-40px me-4">
<span class="symbol-label bg-light">{!! getSvgIcon('duotune/general/gen032.svg', 'svg-icon svg-icon-2 svg-icon-primary') !!}</span>
@ -204,7 +204,7 @@
</a>
<!--end::Item-->
<!--begin::Item-->
<a href="#" class="d-flex text-dark text-hover-primary align-items-center mb-5">
<a href="#" class="d-flex text-gray-900 text-hover-primary align-items-center mb-5">
<!--begin::Symbol-->
<div class="symbol symbol-40px me-4">
<span class="symbol-label bg-light">{!! getSvgIcon('duotune/communication/com012.svg', 'svg-icon svg-icon-2 svg-icon-primary') !!}</span>
@ -219,7 +219,7 @@
</a>
<!--end::Item-->
<!--begin::Item-->
<a href="#" class="d-flex text-dark text-hover-primary align-items-center mb-5">
<a href="#" class="d-flex text-gray-900 text-hover-primary align-items-center mb-5">
<!--begin::Symbol-->
<div class="symbol symbol-40px me-4">
<span class="symbol-label bg-light">{!! getSvgIcon('duotune/communication/com006.svg', 'svg-icon svg-icon-2 svg-icon-primary') !!}</span>

View File

@ -3,11 +3,24 @@
<!--begin::Footer container-->
<div class="app-container container-fluid d-flex flex-column flex-md-row flex-center flex-md-stack py-3">
<!--begin::Copyright-->
<div class="text-dark order-2 order-md-1">
<div class="text-gray-900 order-2 order-md-1">
<span class="text-muted fw-semibold me-1">{{ date('Y') }}&copy;</span>
<a href="https://putrakuningan.com" target="_blank" class="text-gray-800 text-hover-primary">Daeng Deni Mardaeni</a>
<a href="https://keenthemes.com" target="_blank" class="text-gray-800 text-hover-primary">Keenthemes</a>
</div>
<!--end::Copyright-->
<!--begin::Menu-->
<ul class="menu menu-gray-600 menu-hover-primary fw-semibold order-1">
<li class="menu-item">
<a href="https://keenthemes.com" target="_blank" class="menu-link px-2">About</a>
</li>
<li class="menu-item">
<a href="https://devs.keenthemes.com" target="_blank" class="menu-link px-2">Support</a>
</li>
<li class="menu-item">
<a href="https://1.envato.market/EA4JP" target="_blank" class="menu-link px-2">Purchase</a>
</li>
</ul>
<!--end::Menu-->
</div>
<!--end::Footer container-->
</div>

View File

@ -1,7 +1,7 @@
<!--begin::Page title-->
<div class="page-title d-flex flex-column justify-content-center flex-wrap me-3">
<!--begin::Title-->
<h1 class="page-heading d-flex text-dark fw-bold fs-3 flex-column justify-content-center my-0">
<h1 class="page-heading d-flex text-gray-900 fw-bold fs-3 flex-column justify-content-center my-0">
@yield('title')
</h1>
<!--end::Title-->

View File

@ -2,5 +2,6 @@
<div id="kt_app_sidebar" class="app-sidebar flex-column" data-kt-drawer="true" data-kt-drawer-name="app-sidebar" data-kt-drawer-activate="{default: true, lg: false}" data-kt-drawer-overlay="true" data-kt-drawer-width="225px" data-kt-drawer-direction="start" data-kt-drawer-toggle="#kt_app_sidebar_mobile_toggle">
@include(config('settings.KT_THEME_LAYOUT_DIR').'/partials/sidebar-layout/sidebar/_logo')
@include(config('settings.KT_THEME_LAYOUT_DIR').'/partials/sidebar-layout/sidebar/_menu')
@include(config('settings.KT_THEME_LAYOUT_DIR').'/partials/sidebar-layout/sidebar/_footer')
</div>
<!--end::Sidebar-->

View File

@ -80,7 +80,7 @@
<div class="menu-item p-0 m-0">
<!--begin:Menu link-->
<a href="{{ route('dashboard') }}" class="menu-link">
<span class="menu-custom-icon d-flex flex-center flex-shrink-0 rounded w-40px h-40px me-3">{!! getIcon('chart-simple', 'text-dark fs-1') !!}</span>
<span class="menu-custom-icon d-flex flex-center flex-shrink-0 rounded w-40px h-40px me-3">{!! getIcon('chart-simple', 'text-gray-900 fs-1') !!}</span>
<span class="d-flex flex-column">
<span class="fs-6 fw-bold text-gray-800">Marketing</span>
<span class="fs-7 fw-semibold text-muted">Campaings & conversions</span>

Some files were not shown because too many files have changed in this diff Show More