github
/
AdminLTE
mirror of https://github.com/ColorlibHQ/AdminLTE
1
0
Fork 0
Code Issues Releases Wiki Activity

replacing with built-in css

pull/4889/head
Daniel 2023-02-06 21:25:43 +05:30
parent d956ea5d3c
commit 93c1e370fa
19 changed files with 164 additions and 699 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

159
src/index2.html
View File

@ -1,7 +1,5 @@
<!DOCTYPE html>
<html lang="en">
<!-- For RTL verison -->
<!-- <html lang="en" dir="rtl"> -->
<head>
@@include('./_head.html', {
"path": ".",
@ -192,40 +190,41 @@
<!-- ./card-body -->
<div class="card-footer">
<div class="row">
<div class="col-sm-3 col-6">
<div class="description-block border-end">
<span class="description-percentage text-success"><i class="fa-solid fa-caret-up"></i> 17%</span>
<h5 class="description-header">$35,210.43</h5>
<span class="description-text">TOTAL REVENUE</span>
<div class="col-md-3 col-6">
<div class="text-center border-end">
<span class="text-success-emphasis"><i class="fa-solid fa-caret-up"></i> 17%</span>
<h5 class="fw-bold mb-0">$35,210.43</h5>
<span class="text-uppercase">TOTAL REVENUE</span>
</div>
<!-- /.description-block -->
</div>
<!-- /.col -->
<div class="col-md-3 col-6">
<div class="text-center border-end">
<span class="text-info-emphasis"><i class="fa-solid fa-caret-left"></i> 0%</span>
<h5 class="fw-bold mb-0">$10,390.90</h5>
<span class="text-uppercase">TOTAL COST</span>
</div>
</div>
<!-- /.col -->
<div class="col-sm-3 col-6">
<div class="description-block border-end">
<span class="description-percentage text-info"><i class="fa-solid fa-caret-left"></i> 0%</span>
<h5 class="description-header">$10,390.90</h5>
<span class="description-text">TOTAL COST</span>
<div class="col-md-3 col-6">
<div class="text-center border-end">
<span class="text-success-emphasis"><i class="fa-solid fa-caret-up"></i> 20%</span>
<h5 class="fw-bold mb-0">$24,813.53</h5>
<span class="text-uppercase">TOTAL PROFIT</span>
</div>
<!-- /.description-block -->
</div>
<!-- /.col -->
<div class="col-sm-3 col-6">
<div class="description-block border-end">
<span class="description-percentage text-success"><i class="fa-solid fa-caret-up"></i> 20%</span>
<h5 class="description-header">$24,813.53</h5>
<span class="description-text">TOTAL PROFIT</span>
<div class="col-md-3 col-6">
<div class="text-center">
<span class="text-danger-emphasis"><i class="fa-solid fa-caret-down"></i> 18%</span>
<h5 class="fw-bold mb-0">1200</h5>
<span class="text-uppercase">GOAL COMPLETIONS</span>
</div>
<!-- /.description-block -->
</div>
<!-- /.col -->
<div class="col-sm-3 col-6">
<div class="description-block">
<span class="description-percentage text-danger"><i class="fa-solid fa-caret-down"></i> 18%</span>
<h5 class="description-header">1200</h5>
<span class="description-text">GOAL COMPLETIONS</span>
</div>
<!-- /.description-block -->
</div>
</div>
<!-- /.row -->
@ -466,48 +465,48 @@
</div>
<!-- /.card-header -->
<div class="card-body p-0">
<ul class="users-list clearfix">
<li>
<img src="./assets/img/user1-128x128.jpg" alt="User Image">
<a class="users-list-name" href="#">Alexander Pierce</a>
<span class="users-list-date">Today</span>
</li>
<li>
<img src="./assets/img/user8-128x128.jpg" alt="User Image">
<a class="users-list-name" href="#">Norman</a>
<span class="users-list-date">Yesterday</span>
</li>
<li>
<img src="./assets/img/user7-128x128.jpg" alt="User Image">
<a class="users-list-name" href="#">Jane</a>
<span class="users-list-date">12 Jan</span>
</li>
<li>
<img src="./assets/img/user6-128x128.jpg" alt="User Image">
<a class="users-list-name" href="#">John</a>
<span class="users-list-date">12 Jan</span>
</li>
<li>
<img src="./assets/img/user2-160x160.jpg" alt="User Image">
<a class="users-list-name" href="#">Alexander</a>
<span class="users-list-date">13 Jan</span>
</li>
<li>
<img src="./assets/img/user5-128x128.jpg" alt="User Image">
<a class="users-list-name" href="#">Sarah</a>
<span class="users-list-date">14 Jan</span>
</li>
<li>
<img src="./assets/img/user4-128x128.jpg" alt="User Image">
<a class="users-list-name" href="#">Nora</a>
<span class="users-list-date">15 Jan</span>
</li>
<li>
<img src="./assets/img/user3-128x128.jpg" alt="User Image">
<a class="users-list-name" href="#">Nadia</a>
<span class="users-list-date">15 Jan</span>
</li>
</ul>
<div class="row text-center m-1">
<div class="col-3 p-2">
<img class="img-fluid rounded-circle" src="./assets/img/user1-128x128.jpg" alt="User Image">
<a class="btn fw-bold fs-7 text-secondary-emphasis text-truncate w-100 p-0" href="#">Alexander Pierce</a>
<div class="fs-8">Today</div>
</div>
<div class="col-3 p-2">
<img class="img-fluid rounded-circle" src="./assets/img/user8-128x128.jpg" alt="User Image">
<a class="btn fw-bold fs-7 text-secondary-emphasis text-truncate w-100 p-0" href="#">Norman</a>
<div class="fs-8">Yesterday</div>
</div>
<div class="col-3 p-2">
<img class="img-fluid rounded-circle" src="./assets/img/user7-128x128.jpg" alt="User Image">
<a class="btn fw-bold fs-7 text-secondary-emphasis text-truncate w-100 p-0" href="#">Jane</a>
<div class="fs-8">12 Jan</div>
</div>
<div class="col-3 p-2">
<img class="img-fluid rounded-circle" src="./assets/img/user6-128x128.jpg" alt="User Image">
<a class="btn fw-bold fs-7 text-secondary-emphasis text-truncate w-100 p-0" href="#">John</a>
<div class="fs-8">12 Jan</div>
</div>
<div class="col-3 p-2">
<img class="img-fluid rounded-circle" src="./assets/img/user2-160x160.jpg" alt="User Image">
<a class="btn fw-bold fs-7 text-secondary-emphasis text-truncate w-100 p-0" href="#">Alexander</a>
<div class="fs-8">13 Jan</div>
</div>
<div class="col-3 p-2">
<img class="img-fluid rounded-circle" src="./assets/img/user5-128x128.jpg" alt="User Image">
<a class="btn fw-bold fs-7 text-secondary-emphasis text-truncate w-100 p-0" href="#">Sarah</a>
<div class="fs-8">14 Jan</div>
</div>
<div class="col-3 p-2">
<img class="img-fluid rounded-circle" src="./assets/img/user4-128x128.jpg" alt="User Image">
<a class="btn fw-bold fs-7 text-secondary-emphasis text-truncate w-100 p-0" href="#">Nora</a>
<div class="fs-8">15 Jan</div>
</div>
<div class="col-3 p-2">
<img class="img-fluid rounded-circle" src="./assets/img/user3-128x128.jpg" alt="User Image">
<a class="btn fw-bold fs-7 text-secondary-emphasis text-truncate w-100 p-0" href="#">Nadia</a>
<div class="fs-8">15 Jan</div>
</div>
</div>
<!-- /.users-list -->
</div>
<!-- /.card-body -->
@ -689,12 +688,12 @@
<!-- /.col -->
<div class="col-md-4">
<ul class="row list-unstyled text-nowrap">
<li class="col"><i class="fa-regular fa-circle text-danger"></i> Chrome</li>
<li class="col"><i class="fa-regular fa-circle text-success"></i> IE</li>
<li class="col"><i class="fa-regular fa-circle text-warning"></i> FireFox</li>
<li class="col"><i class="fa-regular fa-circle text-info"></i> Safari</li>
<li class="col"><i class="fa-regular fa-circle text-primary"></i> Opera</li>
<li class="col"><i class="fa-regular fa-circle text-secondary"></i> Navigator</li>
<li class="col"><i class="fa-regular fa-circle text-danger-emphasis"></i> Chrome</li>
<li class="col"><i class="fa-regular fa-circle text-success-emphasis"></i> IE</li>
<li class="col"><i class="fa-regular fa-circle text-warning-emphasis"></i> FireFox</li>
<li class="col"><i class="fa-regular fa-circle text-info-emphasis"></i> Safari</li>
<li class="col"><i class="fa-regular fa-circle text-primary-emphasis"></i> Opera</li>
<li class="col"><i class="fa-regular fa-circle text-secondary-emphasis"></i> Navigator</li>
</ul>
</div>
<!-- /.col -->
@ -707,7 +706,7 @@
<li class="nav-item">
<a href="#" class="nav-link">
United States of America
<span class="float-end text-danger">
<span class="float-end text-danger-emphasis">
<i class="fa-solid fa-arrow-down fs-7"></i>
12%</span>
</a>
@ -715,7 +714,7 @@
<li class="nav-item">
<a href="#" class="nav-link">
India
<span class="float-end text-success">
<span class="float-end text-success-emphasis">
<i class="fa-solid fa-arrow-up fs-7"></i> 4%
</span>
</a>
@ -723,7 +722,7 @@
<li class="nav-item">
<a href="#" class="nav-link">
China
<span class="float-end text-info">
<span class="float-end text-info-emphasis">
<i class="fa-solid fa-arrow-left fs-7"></i> 0%
</span>
</a>

64
src/index3.html
View File

@ -1,7 +1,5 @@
<!DOCTYPE html>
<html lang="en">
<!-- For RTL verison -->
<!-- <html lang="en" dir="rtl"> -->
<head>
@@include('./_head.html', {
"path": ".",
@ -51,14 +49,14 @@
<div class="card-body">
<div class="d-flex">
<p class="d-flex flex-column">
<span class="fw-bold text-lg">820</span>
<span class="fw-bold fs-5">820</span>
<span>Visitors Over Time</span>
</p>
<p class="ms-auto d-flex flex-column text-end">
<span class="text-success">
<span class="text-success-emphasis-emphasis">
<i class="fa-solid fa-arrow-up"></i> 12.5%
</span>
<span class="text-muted">Since last week</span>
<span class="text-secondary-emphasis">Since last week</span>
</p>
</div>
<!-- /.d-flex -->
@ -69,11 +67,11 @@
<div class="d-flex flex-row justify-content-end">
<span class="me-2">
<i class="fa-solid fa-square text-primary"></i> This Week
<i class="fa-solid fa-square text-primary-emphasis"></i> This Week
</span>
<span>
<i class="fa-solid fa-square text-gray"></i> Last Week
<i class="fa-solid fa-square text-secondary-emphasis"></i> Last Week
</span>
</div>
</div>
@ -105,77 +103,77 @@
<tbody>
<tr>
<td>
<img src="./assets/img/default-150x150.png" alt="Product 1" class="img-circle img-size-32 me-2">
<img src="./assets/img/default-150x150.png" alt="Product 1" class="rounded-circle img-size-32 me-2">
Some Product
</td>
<td>$13 USD</td>
<td>
<small class="text-success me-1">
<small class="text-success-emphasis me-1">
<i class="fa-solid fa-arrow-up"></i>
12%
</small>
12,000 Sold
</td>
<td>
<a href="#" class="text-muted">
<a href="#" class="text-secondary-emphasis">
<i class="fa-solid fa-search"></i>
</a>
</td>
</tr>
<tr>
<td>
<img src="./assets/img/default-150x150.png" alt="Product 1" class="img-circle img-size-32 me-2">
<img src="./assets/img/default-150x150.png" alt="Product 1" class="rounded-circle img-size-32 me-2">
Another Product
</td>
<td>$29 USD</td>
<td>
<small class="text-warning me-1">
<small class="text-warning-emphasis me-1">
<i class="fa-solid fa-arrow-down"></i>
0.5%
</small>
123,234 Sold
</td>
<td>
<a href="#" class="text-muted">
<a href="#" class="text-secondary-emphasis">
<i class="fa-solid fa-search"></i>
</a>
</td>
</tr>
<tr>
<td>
<img src="./assets/img/default-150x150.png" alt="Product 1" class="img-circle img-size-32 me-2">
<img src="./assets/img/default-150x150.png" alt="Product 1" class="rounded-circle img-size-32 me-2">
Amazing Product
</td>
<td>$1,230 USD</td>
<td>
<small class="text-danger me-1">
<small class="text-danger-emphasis me-1">
<i class="fa-solid fa-arrow-down"></i>
3%
</small>
198 Sold
</td>
<td>
<a href="#" class="text-muted">
<a href="#" class="text-secondary-emphasis">
<i class="fa-solid fa-search"></i>
</a>
</td>
</tr>
<tr>
<td>
<img src="./assets/img/default-150x150.png" alt="Product 1" class="img-circle img-size-32 me-2">
<img src="./assets/img/default-150x150.png" alt="Product 1" class="rounded-circle img-size-32 me-2">
Perfect Item
<span class="badge text-bg-danger">NEW</span>
</td>
<td>$199 USD</td>
<td>
<small class="text-success me-1">
<small class="text-success-emphasis me-1">
<i class="fa-solid fa-arrow-up"></i>
63%
</small>
87 Sold
</td>
<td>
<a href="#" class="text-muted">
<a href="#" class="text-secondary-emphasis">
<i class="fa-solid fa-search"></i>
</a>
</td>
@ -198,14 +196,14 @@
<div class="card-body">
<div class="d-flex">
<p class="d-flex flex-column">
<span class="fw-bold text-lg">$18,230.00</span>
<span class="fw-bold fs-5">$18,230.00</span>
<span>Sales Over Time</span>
</p>
<p class="ms-auto d-flex flex-column text-end">
<span class="text-success">
<span class="text-success-emphasis">
<i class="fa-solid fa-arrow-up"></i> 33.1%
</span>
<span class="text-muted">Since last month</span>
<span class="text-secondary-emphasis">Since last month</span>
</p>
</div>
<!-- /.d-flex -->
@ -216,11 +214,11 @@
<div class="d-flex flex-row justify-content-end">
<span class="me-2">
<i class="fa-solid fa-square text-primary"></i> This year
<i class="fa-solid fa-square text-primary-emphasis"></i> This year
</span>
<span>
<i class="fa-solid fa-square text-gray"></i> Last year
<i class="fa-solid fa-square text-secondary-emphasis"></i> Last year
</span>
</div>
</div>
@ -241,38 +239,38 @@
</div>
<div class="card-body">
<div class="d-flex justify-content-between align-items-center border-bottom mb-3">
<p class="text-success fs-2">
<p class="text-success-emphasis fs-2">
<i class="ion ion-ios-refresh-empty"></i>
</p>
<p class="d-flex flex-column text-end">
<span class="fw-bold">
<i class="ion ion-android-arrow-up text-success"></i> 12%
<i class="ion ion-android-arrow-up text-success-emphasis"></i> 12%
</span>
<span class="text-muted">CONVERSION RATE</span>
<span class="text-secondary-emphasis">CONVERSION RATE</span>
</p>
</div>
<!-- /.d-flex -->
<div class="d-flex justify-content-between align-items-center border-bottom mb-3">
<p class="text-warning fs-2">
<p class="text-warning-emphasis fs-2">
<i class="ion ion-ios-cart-outline"></i>
</p>
<p class="d-flex flex-column text-end">
<span class="fw-bold">
<i class="ion ion-android-arrow-up text-warning"></i> 0.8%
<i class="ion ion-android-arrow-up text-warning-emphasis"></i> 0.8%
</span>
<span class="text-muted">SALES RATE</span>
<span class="text-secondary-emphasis">SALES RATE</span>
</p>
</div>
<!-- /.d-flex -->
<div class="d-flex justify-content-between align-items-center mb-0">
<p class="text-danger fs-2">
<p class="text-danger-emphasis fs-2">
<i class="ion ion-ios-people-outline"></i>
</p>
<p class="d-flex flex-column text-end">
<span class="fw-bold">
<i class="ion ion-android-arrow-down text-danger"></i> 1%
<i class="ion ion-android-arrow-down text-danger-emphasis"></i> 1%
</span>
<span class="text-muted">REGISTRATION RATE</span>
<span class="text-secondary-emphasis">REGISTRATION RATE</span>
</p>
</div>
<!-- /.d-flex -->

2
src/pages/examples/login.html
View File

@ -1,7 +1,5 @@
<!DOCTYPE html>
<html lang="en">
<!-- For RTL verison -->
<!-- <html lang="en" dir="rtl"> -->
<head>
<!-- icheck bootstrap -->
@@include('./_head.html', {

2
src/pages/examples/register.html
View File

@ -1,7 +1,5 @@
<!DOCTYPE html>
<html lang="en">
<!-- For RTL verison -->
<!-- <html lang="en" dir="rtl"> -->
<head>
<!-- icheck bootstrap -->
@@include('./_head.html', {

2
src/pages/forms/general.html
View File

@ -1,7 +1,5 @@
<!DOCTYPE html>
<html lang="en">
<!-- For RTL verison -->
<!-- <html lang="en" dir="rtl"> -->
<head>
@@include('./_head.html', {
"path": "../..",

2
src/pages/layout/unfixed-sidebar.html
View File

@ -1,7 +1,5 @@
<!DOCTYPE html>
<html lang="en">
<!-- For RTL verison -->
<!-- <html lang="en" dir="rtl"> -->
<head>
@@include('./_head.html', {
"path": "../..",

2
src/pages/tables/simple.html
View File

@ -1,7 +1,5 @@
<!DOCTYPE html>
<html lang="en">
<!-- For RTL verison -->
<!-- <html lang="en" dir="rtl"> -->
<head>
@@include('./_head.html', {
"path": "../..",

2
src/pages/widgets/cards.html
View File

@ -1,7 +1,5 @@
<!DOCTYPE html>
<html lang="en">
<!-- For RTL verison -->
<!-- <html lang="en" dir="rtl"> -->
<head>
@@include('./_head.html', {
"path": "../..",

2
src/pages/widgets/info-box.html
View File

@ -1,7 +1,5 @@
<!DOCTYPE html>
<html lang="en">
<!-- For RTL verison -->
<!-- <html lang="en" dir="rtl"> -->
<head>
@@include('./_head.html', {
"path": "../..",

2
src/pages/widgets/small-box.html
View File

@ -1,7 +1,5 @@
<!DOCTYPE html>
<html lang="en">
<!-- For RTL verison -->
<!-- <html lang="en" dir="rtl"> -->
<head>
@@include('./_head.html', {
"path": "../..",

38
src/partials/dashboard/_sidenav.html
View File

@ -5,7 +5,7 @@
<img src="@@path/assets/img/AdminLTELogo.png" alt="AdminLTE Logo" class="brand-image opacity-75 shadow">
<span class="brand-text fw-light">AdminLTE 4</span>
</a>
<a class="pushmenu mx-1" data-lte-toggle="sidebar-mini" href="javascript:;" role="button"><i class="fa-solid fa-angle-double-left"></i></a>
<a class="pushmenu mx-1 d-none d-lg-block" data-lte-toggle="sidebar-mini" href="javascript:;" role="button"><i class="fa-solid fa-angle-double-left"></i></a>
</div>
<!-- Sidebar -->
<div class="sidebar">
@ -17,7 +17,7 @@
<i class="nav-icon fa-solid fa-gauge-high"></i>
<p>
Dashboard
<i class="end fa-solid fa-angle-right"></i>
<i class="nav-arrow fa-solid fa-angle-right"></i>
</p>
</a>
<ul class="nav nav-treeview">
@ -46,7 +46,7 @@
<i class="nav-icon fa-solid fa-box-open"></i>
<p>
Widgets
<i class="end fa-solid fa-angle-right"></i>
<i class="nav-arrow fa-solid fa-angle-right"></i>
</p>
</a>
<ul class="nav nav-treeview">
@ -77,7 +77,7 @@
<p>
Layout Options
<span class="badge text-bg-primary float-end me-3">6</span>
<i class="end fa-solid fa-angle-right"></i>
<i class="nav-arrow fa-solid fa-angle-right"></i>
</p>
</a>
<ul class="nav nav-treeview">
@ -93,6 +93,18 @@
<p>Fixed Sidebar</p>
</a>
</li>
<li class="nav-item">
<a href="@@path/pages/layout/sidebar-mini.html" class="nav-link @@if (context.page === 'sidebar-mini') {active}">
<i class="nav-icon fa-regular fa-circle"></i>
<p>Sidebar Mini</p>
</a>
</li>
<li class="nav-item">
<a href="@@path/pages/layout/layout-rtl.html" class="nav-link @@if (context.page === 'layout-rtl') {active}">
<i class="nav-icon fa-regular fa-circle"></i>
<p>Layout RTL</p>
</a>
</li>
</ul>
</li>
<li class="nav-item @@if (context.mainPage === 'ui-elements') {menu-open}">
@ -100,7 +112,7 @@
<i class="nav-icon fa-solid fa-tree"></i>
<p>
UI Elements
<i class="end fa-solid fa-angle-right"></i>
<i class="nav-arrow fa-solid fa-angle-right"></i>
</p>
</a>
<ul class="nav nav-treeview">
@ -117,7 +129,7 @@
<i class="nav-icon fa-solid fa-pen-to-square"></i>
<p>
Forms
<i class="end fa-solid fa-angle-right"></i>
<i class="nav-arrow fa-solid fa-angle-right"></i>
</p>
</a>
<ul class="nav nav-treeview">
@ -134,7 +146,7 @@
<i class="nav-icon fa-solid fa-table"></i>
<p>
Tables
<i class="end fa-solid fa-angle-right"></i>
<i class="nav-arrow fa-solid fa-angle-right"></i>
</p>
</a>
<ul class="nav nav-treeview">
@ -152,7 +164,7 @@
<i class="nav-icon fa-solid fa-arrow-right-to-bracket"></i>
<p>
Login & Register
<i class="end fa-solid fa-angle-right"></i>
<i class="nav-arrow fa-solid fa-angle-right"></i>
</p>
</a>
<ul class="nav nav-treeview">
@ -182,7 +194,7 @@
<i class="nav-icon fa-solid fa-circle"></i>
<p>
Level 1
<i class="end fa-solid fa-angle-right"></i>
<i class="nav-arrow fa-solid fa-angle-right"></i>
</p>
</a>
<ul class="nav nav-treeview">
@ -197,7 +209,7 @@
<i class="nav-icon fa-regular fa-circle"></i>
<p>
Level 2
<i class="end fa-solid fa-angle-right"></i>
<i class="nav-arrow fa-solid fa-angle-right"></i>
</p>
</a>
<ul class="nav nav-treeview">
@ -238,19 +250,19 @@
<li class="nav-header">LABELS</li>
<li class="nav-item">
<a href="javascript:;" class="nav-link">
<i class="nav-icon fa-regular fa-circle text-danger"></i>
<i class="nav-icon fa-regular fa-circle text-danger-emphasis"></i>
<p class="text">Important</p>
</a>
</li>
<li class="nav-item">
<a href="javascript:;" class="nav-link">
<i class="nav-icon fa-regular fa-circle text-warning"></i>
<i class="nav-icon fa-regular fa-circle text-warning-emphasis"></i>
<p>Warning</p>
</a>
</li>
<li class="nav-item">
<a href="javascript:;" class="nav-link">
<i class="nav-icon fa-regular fa-circle text-info"></i>
<i class="nav-icon fa-regular fa-circle text-info-emphasis"></i>
<p>Informational</p>
</a>
</li>

34
src/partials/dashboard/_topbar.html
View File

@ -34,15 +34,15 @@
<!-- Message Start -->
<div class="d-flex">
<div class="flex-shrink-0">
<img src="@@path/assets/img/user1-128x128.jpg" alt="User Avatar" class="img-size-50 img-circle me-3">
<img src="@@path/assets/img/user1-128x128.jpg" alt="User Avatar" class="img-size-50 rounded-circle me-3">
</div>
<div class="flex-grow-1">
<h3 class="dropdown-item-title">
Brad Diesel
<span class="float-end fs-7 text-danger"><i class="fa-solid fa-star"></i></span>
<span class="float-end fs-7 text-danger-emphasis"><i class="fa-solid fa-star"></i></span>
</h3>
<p class="fs-7">Call me whenever you can...</p>
<p class="fs-7 text-muted"><i class="fa-regular fa-clock me-1"></i> 4 Hours Ago</p>
<p class="fs-7 text-secondary-emphasis"><i class="fa-regular fa-clock me-1"></i> 4 Hours Ago</p>
</div>
</div>
<!-- Message End -->
@ -52,15 +52,15 @@
<!-- Message Start -->
<div class="d-flex">
<div class="flex-shrink-0">
<img src="@@path/assets/img/user8-128x128.jpg" alt="User Avatar" class="img-size-50 img-circle me-3">
<img src="@@path/assets/img/user8-128x128.jpg" alt="User Avatar" class="img-size-50 rounded-circle me-3">
</div>
<div class="flex-grow-1">
<h3 class="dropdown-item-title">
John Pierce
<span class="float-end fs-7 text-muted"><i class="fa-solid fa-star"></i></span>
<span class="float-end fs-7 text-secondary-emphasis"><i class="fa-solid fa-star"></i></span>
</h3>
<p class="fs-7">I got your message bro</p>
<p class="fs-7 text-muted"><i class="fa-regular fa-clock me-1"></i> 4 Hours Ago</p>
<p class="fs-7 text-secondary-emphasis"><i class="fa-regular fa-clock me-1"></i> 4 Hours Ago</p>
</div>
</div>
<!-- Message End -->
@ -70,15 +70,15 @@
<!-- Message Start -->
<div class="d-flex">
<div class="flex-shrink-0">
<img src="@@path/assets/img/user3-128x128.jpg" alt="User Avatar" class="img-size-50 img-circle me-3">
<img src="@@path/assets/img/user3-128x128.jpg" alt="User Avatar" class="img-size-50 rounded-circle me-3">
</div>
<div class="flex-grow-1">
<h3 class="dropdown-item-title">
Nora Silvester
<span class="float-end fs-7 text-warning"><i class="fa-solid fa-star"></i></span>
<span class="float-end fs-7 text-warning-emphasis"><i class="fa-solid fa-star"></i></span>
</h3>
<p class="fs-7">The subject goes here</p>
<p class="fs-7 text-muted"><i class="fa-regular fa-clock me-1"></i> 4 Hours Ago</p>
<p class="fs-7 text-secondary-emphasis"><i class="fa-regular fa-clock me-1"></i> 4 Hours Ago</p>
</div>
</div>
<!-- Message End -->
@ -98,17 +98,17 @@
<div class="dropdown-divider"></div>
<a href="#" class="dropdown-item">
<i class="fa-solid fa-envelope me-2"></i> 4 new messages
<span class="float-end text-muted fs-7">3 mins</span>
<span class="float-end text-secondary-emphasis fs-7">3 mins</span>
</a>
<div class="dropdown-divider"></div>
<a href="#" class="dropdown-item">
<i class="fa-solid fa-users me-2"></i> 8 friend requests
<span class="float-end text-muted fs-7">12 hours</span>
<span class="float-end text-secondary-emphasis fs-7">12 hours</span>
</a>
<div class="dropdown-divider"></div>
<a href="#" class="dropdown-item">
<i class="fa-solid fa-file me-2"></i> 3 new reports
<span class="float-end text-muted fs-7">2 days</span>
<span class="float-end text-secondary-emphasis fs-7">2 days</span>
</a>
<div class="dropdown-divider"></div>
<a href="#" class="dropdown-item dropdown-footer">See All Notifications</a>
@ -116,13 +116,13 @@
</li>
<li class="nav-item dropdown user-menu">
<a href="#" class="nav-link dropdown-toggle" data-bs-toggle="dropdown">
<img src="@@path/assets/img/user2-160x160.jpg" class="user-image img-circle shadow" alt="User Image">
<img src="@@path/assets/img/user2-160x160.jpg" class="user-image rounded-circle shadow" alt="User Image">
<span class="d-none d-md-inline">Alexander Pierce</span>
</a>
<ul class="dropdown-menu dropdown-menu-lg dropdown-menu-end">
<!-- User image -->
<li class="user-header text-bg-primary">
<img src="@@path/assets/img/user2-160x160.jpg" class="img-circle shadow" alt="User Image">
<img src="@@path/assets/img/user2-160x160.jpg" class="rounded-circle shadow" alt="User Image">
<p>
Alexander Pierce - Web Developer
@ -160,21 +160,21 @@
<ul class="dropdown-menu dropdown-menu-end" aria-labelledby="bd-theme" style="--bs-dropdown-min-width: 8rem;">
<li>
<button type="button" class="dropdown-item d-flex align-items-center active" data-bs-theme-value="light">
<i class="fa-regular fa-sun me-2 opacity-50"></i>
<i class="fa-regular fa-sun me-2"></i>
Light
<i class="fa-solid fa-check ms-auto d-none"></i>
</button>
</li>
<li>
<button type="button" class="dropdown-item d-flex align-items-center" data-bs-theme-value="dark">
<i class="fa-solid fa-moon me-2 opacity-50"></i>
<i class="fa-solid fa-moon me-2"></i>
Dark
<i class="fa-solid fa-check ms-auto d-none"></i>
</button>
</li>
<li>
<button type="button" class="dropdown-item d-flex align-items-center" data-bs-theme-value="auto">
<i class="fa-solid fa-circle-half-stroke me-2 opacity-50"></i>
<i class="fa-solid fa-circle-half-stroke me-2"></i>
Auto
<i class="fa-solid fa-check ms-auto d-none"></i>
</button>

39
src/scss/_cards.scss
View File

@ -9,24 +9,9 @@
&:not(.card-outline) {
> .card-header {
color: var(--#{$lte-prefix}card-variant-color);
background-color: var(--#{$lte-prefix}card-variant-bg);
&,
a {
color: var(--#{$lte-prefix}card-variant-color);
}
a {
&:hover {
border-top: 3px solid $nav-tabs-border-color;
}
&.active {
color: color-contrast($white);
border-top: 3px solid var(--#{$lte-prefix}card-variant-bg);
}
}
.btn-tool {
color: rgba(var(--#{$lte-prefix}card-variant-color-rgb), .8);
@ -212,17 +197,6 @@
}
@each $name, $color in $theme-colors {
@debug($name);
.card-#{$name},
.card.bg-#{$name},
.card.text-bg-#{$name} {
--#{$lte-prefix}card-variant-bg: #{$color};
--#{$lte-prefix}card-variant-color: #{color-contrast($color)};
--#{$lte-prefix}card-variant-color-rgb: #{to-rgb(color-contrast($color))};
}
}
// Maximized Card Body Scroll fix
html.maximized-card {
overflow: hidden;
@ -287,3 +261,14 @@ html.maximized-card {
margin: -$card-spacer-y 0;
font-size: $font-size-sm;
}
@each $name, $color in $theme-colors {
.card-#{$name},
.card.bg-#{$name},
.card.text-bg-#{$name} {
--#{$lte-prefix}card-variant-bg: #{$color};
--#{$lte-prefix}card-variant-color: #{color-contrast($color)};
--#{$lte-prefix}card-variant-bg-rgb: #{to-rgb($color)};
--#{$lte-prefix}card-variant-color-rgb: #{to-rgb(color-contrast($color))};
}
}

5
src/scss/_layout-fixed.scss
View File

@ -35,9 +35,4 @@
}
}
}
// .layout-fixed.fs-7 .wrapper .sidebar {
// // stylelint-disable-next-line
// height: calc(100vh - (#{$lte-main-header-height-sm-inner} + #{$lte-main-header-bottom-border-width}));
// }
}

441
src/scss/_miscellaneous.scss
View File

@ -2,173 +2,6 @@
// Misc: Miscellaneous
//
.border-transparent {
border-color: transparent !important;
}
// Description Blocks
.description-block {
display: block;
margin: 10px 0;
text-align: center;
&.margin-bottom {
margin-bottom: 25px;
}
> .description-header {
padding: 0;
margin: 0;
font-size: 16px;
font-weight: 600;
}
> .description-text {
text-transform: uppercase;
}
// Description Block Extension
.description-icon {
font-size: 16px;
}
}
// List utility classes
.list-group-unbordered {
> .list-group-item {
padding-right: 0;
padding-left: 0;
border-right: 0;
border-left: 0;
@include border-radius(0);
}
}
.list-header {
padding: 10px 4px;
font-size: 15px;
font-weight: 700;
color: $gray-600;
}
.list-seperator {
height: 1px;
margin: 15px 0 9px;
background-color: $card-border-color;
}
.list-link {
> a {
padding: 4px;
color: $gray-600;
&:hover {
color: $gray-900;
}
}
}
// User block
.user-block {
float: left;
img {
float: left;
width: 40px;
height: 40px;
}
.username,
.description,
.comment {
display: block;
margin-left: 50px;
}
.username {
margin-top: -1px;
font-size: 16px;
font-weight: 600;
}
.description {
margin-top: -3px;
font-size: 13px;
color: $gray-600;
}
&.user-block-sm {
img {
width: $lte-img-size-sm;
height: $lte-img-size-sm;
}
.username,
.description,
.comment {
margin-left: 40px;
}
.username {
font-size: 14px;
}
}
}
// Image sizes
.img-sm,
.img-md,
.img-lg {
float: left;
}
.img-sm {
width: $lte-img-size-sm;
height: $lte-img-size-sm;
+ .img-push {
margin-left: $lte-img-size-sm + $lte-img-size-push;
}
}
.img-md {
width: $lte-img-size-md;
height: $lte-img-size-md;
+ .img-push {
margin-left: $lte-img-size-md + $lte-img-size-push;
}
}
.img-lg {
width: $lte-img-size-lg;
height: $lte-img-size-lg;
+ .img-push {
margin-left: $lte-img-size-lg + $lte-img-size-push;
}
}
// Image bordered
.img-bordered {
padding: 3px;
border: 3px solid $gray-500;
}
.img-bordered-sm {
padding: 2px;
border: 2px solid $gray-500;
}
// Rounded and Circle Images
.img-rounded {
@include border-radius($border-radius);
}
.img-circle {
@include border-radius(50%);
}
// Image sizes
.img-size-64,
.img-size-50,
@ -187,277 +20,3 @@
.img-size-32 {
width: 32px;
}
// Block sizes
.size-32,
.size-40,
.size-50 {
display: block;
text-align: center;
}
.size-32 {
width: 32px;
height: 32px;
line-height: 32px;
}
.size-40 {
width: 40px;
height: 40px;
line-height: 40px;
}
.size-50 {
width: 50px;
height: 50px;
line-height: 50px;
}
// General attachemnt block
.attachment-block {
padding: 5px;
margin-bottom: 10px;
background-color: $gray-100;
border: 1px solid $card-border-color;
.attachment-img {
float: left;
max-width: 100px;
height: auto;
max-height: 100px;
}
.attachment-pushed {
margin-left: 110px;
}
.attachment-heading {
margin: 0;
}
.attachment-text {
color: $gray-700;
}
}
// Overlays for Card, InfoBox & SmallBox
.card,
.overlay-wrapper,
.info-box,
.small-box {
// Box overlay for LOADING STATE effect
> .overlay,
> .loading-img {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
}
.overlay {
@include border-radius($border-radius);
z-index: 50;
display: flex;
align-items: center;
justify-content: center;
background-color: rgba($white, .7);
> i,
> svg,
> img,
> object,
> iframe {
color: $gray-800;
}
&.dark {
background-color: rgba($black, .5);
> i,
> svg,
> img,
> object,
> iframe {
color: $gray-400;
}
}
}
}
.tab-pane {
// Box overlay for LOADING STATE effect on Tab Panels
> .overlay-wrapper {
position: relative;
> .overlay {
flex-direction: column;
width: add(100%, (2 * $card-spacer-x));
height: add(100%, (2 * $card-spacer-x));
margin-top: -$card-spacer-x;
margin-left: -$card-spacer-x;
@include border-top-start-radius(0);
@include border-top-end-radius(0);
&.dark {
color: $white;
}
}
}
}
// Ribbon
.ribbon-wrapper {
position: absolute;
top: -2px;
right: -2px;
z-index: 10;
width: $lte-ribbon-wrapper-size;
height: $lte-ribbon-wrapper-size;
overflow: hidden;
&.ribbon-lg {
width: $lte-ribbon-lg-wrapper-size;
height: $lte-ribbon-lg-wrapper-size;
.ribbon {
top: $lte-ribbon-lg-top;
right: $lte-ribbon-lg-right;
width: $lte-ribbon-lg-width;
}
}
&.ribbon-xl {
width: $lte-ribbon-xl-wrapper-size;
height: $lte-ribbon-xl-wrapper-size;
.ribbon {
top: $lte-ribbon-xl-top;
right: $lte-ribbon-xl-right;
width: $lte-ribbon-xl-width;
}
}
.ribbon {
position: relative;
top: $lte-ribbon-top;
right: $lte-ribbon-right;
width: $lte-ribbon-width;
padding: $lte-ribbon-padding;
font-size: $lte-ribbon-font-size;
line-height: $lte-ribbon-line-height;
text-align: center;
text-shadow: 0 -1px 0 rgba($black, .4);
text-transform: uppercase;
box-shadow: 0 0 $lte-ribbon-border-size rgba($black, .3);
transform: rotate(45deg);
&::before,
&::after {
position: absolute;
bottom: -$lte-ribbon-border-size;
content: "";
border-top: $lte-ribbon-border-size solid #9e9e9e;
border-right: $lte-ribbon-border-size solid transparent;
border-left: $lte-ribbon-border-size solid transparent;
}
&::before {
left: 0;
}
&::after {
right: 0;
}
}
}
// Scroll To Top
.back-to-top {
position: fixed;
right: 1.25rem;
bottom: 1.25rem;
z-index: $lte-zindex-control-sidebar + 1;
&:focus {
box-shadow: none;
}
}
// Pre
pre {
padding: .75rem;
}
// Blockquotes styles
blockquote {
padding: .5em .7rem;
margin: 1.5em .7rem;
background-color: $white;
border-left: .7rem solid $primary;
.box & {
background-color: $gray-200;
}
p:last-child {
margin-bottom: 0;
}
h1,
h2,
h3,
h4,
h5,
h6 {
font-size: 1.25rem;
font-weight: 600;
color: $primary;
}
@each $color, $value in $theme-colors {
&.quote-#{$color} {
border-color: $value;
h1,
h2,
h3,
h4,
h5,
h6 {
color: $value;
}
}
}
@each $color, $value in $colors {
&.quote-#{$color} {
border-color: $value;
h1,
h2,
h3,
h4,
h5,
h6 {
color: $value;
}
}
}
}
// Tab Custom Content
.tab-custom-content {
padding-top: .5rem;
margin-top: .5rem;
border-top: $nav-tabs-border-width solid $nav-tabs-border-color;
}
.nav + .tab-custom-content {
padding-bottom: .5rem;
margin-top: 0;
margin-bottom: .5rem;
border-top: none;
border-bottom: $nav-tabs-border-width solid $nav-tabs-border-color;
}

13
src/scss/_root.scss
View File

@ -1,18 +1,5 @@
:root,
[data-bs-theme="light"] {
// Content Wrapper
--#{$lte-prefix}main-color: #{$lte-main-color};
--#{$lte-prefix}main-bg: #{$lte-main-bg};
// Sidebar
--#{$lte-prefix}sidebar-width: #{$lte-sidebar-width};
}
@if $enable-dark-mode {
@include color-mode(dark, true) {
color-scheme: dark;
// Body Color
--#{$lte-prefix}main-color: #{$lte-main-color-dark};
--#{$lte-prefix}main-bg: #{$lte-main-bg-dark};
}
}

45
src/scss/_users-list.scss
View File

@ -1,45 +0,0 @@
//
// Component: Users List
//
.users-list {
@include list-unstyled();
> li {
float: left;
width: 25%;
padding: 10px;
text-align: center;
img {
@include border-radius(50%);
max-width: 100%;
height: auto;
}
> a:hover {
&,
.users-list-name {
color: var(--#{$prefix}body-color);
}
}
}
}
.users-list-name,
.users-list-date {
display: block;
}
.users-list-name {
overflow: hidden;
font-size: $font-size-sm;
color: var(--#{$prefix}secondary-color);
text-overflow: ellipsis;
white-space: nowrap;
}
.users-list-date {
font-size: 12px;
color: var(--#{$prefix}tertiary-color);
}

8
src/scss/_variables.scss
View File

@ -89,14 +89,6 @@ $lte-nav-link-sm-height: ($font-size-sm * $line-height-sm + $lte-n
$lte-main-header-height-sm-inner: ($lte-nav-link-sm-height + ($lte-main-header-link-padding-y * 2)) !default;
$lte-main-header-height-sm: add($lte-main-header-height-sm-inner, $lte-main-header-bottom-border-width) !default;
// HEADER SKINS
// --------------------------------------------------------
$lte-header-light-bg: var(--#{$prefix}body-bg) !default;
$lte-header-light-color: var(--#{$prefix}body-color) !default;
$lte-header-mobile-light-bg: $lte-header-light-bg !default;
$lte-header-mobile-light-color: $lte-header-light-color !default;
// Content padding
$lte-content-padding-y: 0 !default;
$lte-content-padding-x: .5rem !default;

1
src/scss/parts/_extra-components.scss
View File

@ -7,4 +7,3 @@
@import "../timeline";
@import "../products";
@import "../direct-chat";
@import "../users-list";