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

BREAKING CHANGES IMPROVED CSS AND HTML USES

pull/4889/head
Daniel 2023-02-04 20:50:12 +05:30
parent 4455d45f66
commit a2e8879f65
40 changed files with 481 additions and 719 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

2
src/index.html
View File

@ -9,7 +9,7 @@
})
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/ionicons@2.0.1/css/ionicons.min.css" integrity="sha256-kqxQgiD1u2DslOB2UFKOtmYl+CpHQK2gaM3gU2V4EoY=" crossorigin="anonymous">
</head>
<body class="layout-fixed">
<body class="layout-fixed bg-body-tertiary">
<div class="wrapper">
@@include('./dashboard/_topbar.html', {
"path": "."

18
src/index2.html
View File

@ -8,7 +8,7 @@
"title": "AdminLTE 4 | Dashboard 2"
})
</head>
<body class="layout-fixed">
<body class="layout-fixed bg-body-tertiary">
<div class="wrapper">
@@include('./dashboard/_topbar.html', {
"path": "."
@ -524,7 +524,7 @@
<!-- TABLE: LATEST ORDERS -->
<div class="card">
<div class="card-header border-transparent">
<div class="card-header">
<h3 class="card-title">Latest Orders</h3>
<div class="card-tools">
@ -688,13 +688,13 @@
</div>
<!-- /.col -->
<div class="col-md-4">
<ul class="chart-legend clearfix">
<li><i class="fa-regular fa-circle text-danger"></i> Chrome</li>
<li><i class="fa-regular fa-circle text-success"></i> IE</li>
<li><i class="fa-regular fa-circle text-warning"></i> FireFox</li>
<li><i class="fa-regular fa-circle text-info"></i> Safari</li>
<li><i class="fa-regular fa-circle text-primary"></i> Opera</li>
<li><i class="fa-regular fa-circle text-secondary"></i> Navigator</li>
<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>
</ul>
</div>
<!-- /.col -->

2
src/index3.html
View File

@ -9,7 +9,7 @@
})
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/ionicons@2.0.1/css/ionicons.min.css" integrity="sha256-kqxQgiD1u2DslOB2UFKOtmYl+CpHQK2gaM3gU2V4EoY=" crossorigin="anonymous">
</head>
<body class="layout-fixed">
<body class="layout-fixed bg-body-tertiary">
<div class="wrapper">
@@include('./dashboard/_topbar.html', {
"path": "."

2
src/pages/UI/timeline.html
View File

@ -8,7 +8,7 @@
"title": "AdminLTE 4 | Timeline Elements"
})
</head>
<body class="layout-fixed">
<body class="layout-fixed bg-body-tertiary">
<div class="wrapper">
@@include('./dashboard/_topbar.html', {
"path": "../.."

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

@ -9,7 +9,7 @@
"title": "AdminLTE 4 | Login Page"
})
</head>
<body class="login-page">
<body class="login-page bg-body-secondary">
<div class="login-box">
<div class="login-logo">
<a href="../../index2.html"><b>Admin</b>LTE</a>

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

@ -9,7 +9,7 @@
"title": "AdminLTE 4 | Register Page"
})
</head>
<body class="register-page">
<body class="register-page bg-body-secondary">
<div class="register-box">
<div class="register-logo">
<a href="../../index2.html"><b>Admin</b>LTE</a>

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

@ -8,7 +8,7 @@
"title": "AdminLTE 4 | General Form Elements"
})
</head>
<body class="layout-fixed">
<body class="layout-fixed bg-body-tertiary">
<div class="wrapper">
@@include('./dashboard/_topbar.html', {
"path": "../.."

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

@ -8,7 +8,7 @@
"title": "AdminLTE 4 | Fixed Sidebar"
})
</head>
<body class="layout-fixed">
<body class="layout-fixed bg-body-tertiary">
<div class="wrapper">
@@include('./dashboard/_topbar.html', {
"path": "../.."

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

@ -8,7 +8,7 @@
"title": "AdminLTE 4 | Simple Tables"
})
</head>
<body class="layout-fixed">
<body class="layout-fixed bg-body-tertiary">
<div class="wrapper">
@@include('./dashboard/_topbar.html', {
"path": "../.."

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

@ -8,7 +8,7 @@
"title": "AdminLTE 4 | Widgets - Cards"
})
</head>
<body class="layout-fixed">
<body class="layout-fixed bg-body-tertiary">
<div class="wrapper">
@@include('./dashboard/_topbar.html', {
"path": "../.."
@ -39,7 +39,8 @@
<!-- Main content -->
<div class="content">
<div class="container-fluid">
<h4 class="mb-2 mt-4">Cards</h4>
<h4 class="mb-2">Cards</h4>
<h5 class="mb-2">Abilities</h5>
<div class="row">
<div class="col-md-3">
@ -123,6 +124,174 @@
</div>
<!-- /.col -->
</div>
<h5 class="mb-2">Card Outlined</h5>
<div class="row">
<div class="col-md-3">
<div class="card card-outline card-primary collapsed-card">
<div class="card-header">
<h3 class="card-title">Expandable</h3>
<div class="card-tools">
<button type="button" class="btn btn-tool" data-lte-toggle="card-collapse"><i class="fa-solid fa-plus"></i>
</button>
</div>
<!-- /.card-tools -->
</div>
<!-- /.card-header -->
<div class="card-body">
The body of the card
</div>
<!-- /.card-body -->
</div>
<!-- /.card -->
</div>
<!-- /.col -->
<div class="col-md-3">
<div class="card card-outline card-success">
<div class="card-header">
<h3 class="card-title">Collapsable</h3>
<div class="card-tools">
<button type="button" class="btn btn-tool" data-lte-toggle="card-collapse"><i class="fa-solid fa-minus"></i>
</button>
</div>
<!-- /.card-tools -->
</div>
<!-- /.card-header -->
<div class="card-body">
The body of the card
</div>
<!-- /.card-body -->
</div>
<!-- /.card -->
</div>
<!-- /.col -->
<div class="col-md-3">
<div class="card card-outline card-warning">
<div class="card-header">
<h3 class="card-title">Removable</h3>
<div class="card-tools">
<button type="button" class="btn btn-tool" data-lte-dismiss="card-remove"><i class="fa-solid fa-times"></i>
</button>
</div>
<!-- /.card-tools -->
</div>
<!-- /.card-header -->
<div class="card-body">
The body of the card
</div>
<!-- /.card-body -->
</div>
<!-- /.card -->
</div>
<!-- /.col -->
<div class="col-md-3">
<div class="card card-outline card-danger">
<div class="card-header">
<h3 class="card-title">Maximizable</h3>
<div class="card-tools">
<button type="button" class="btn btn-tool" data-lte-toggle="card-maximize"><i class="fa-solid fa-expand"></i>
</button>
</div>
<!-- /.card-tools -->
</div>
<!-- /.card-header -->
<div class="card-body">
The body of the card
</div>
<!-- /.card-body -->
</div>
<!-- /.card -->
</div>
<!-- /.col -->
</div>
<h5 class="mb-2">Card with <code>.text-bg-*</code> </h5>
<div class="row">
<div class="col-md-3">
<div class="card text-bg-primary collapsed-card">
<div class="card-header">
<h3 class="card-title">Expandable</h3>
<div class="card-tools">
<button type="button" class="btn btn-tool" data-lte-toggle="card-collapse"><i class="fa-solid fa-plus"></i>
</button>
</div>
<!-- /.card-tools -->
</div>
<!-- /.card-header -->
<div class="card-body">
The body of the card
</div>
<!-- /.card-body -->
</div>
<!-- /.card -->
</div>
<!-- /.col -->
<div class="col-md-3">
<div class="card text-bg-success">
<div class="card-header">
<h3 class="card-title">Collapsable</h3>
<div class="card-tools">
<button type="button" class="btn btn-tool" data-lte-toggle="card-collapse"><i class="fa-solid fa-minus"></i>
</button>
</div>
<!-- /.card-tools -->
</div>
<!-- /.card-header -->
<div class="card-body">
The body of the card
</div>
<!-- /.card-body -->
</div>
<!-- /.card -->
</div>
<!-- /.col -->
<div class="col-md-3">
<div class="card text-bg-warning">
<div class="card-header">
<h3 class="card-title">Removable</h3>
<div class="card-tools">
<button type="button" class="btn btn-tool" data-lte-dismiss="card-remove"><i class="fa-solid fa-times"></i>
</button>
</div>
<!-- /.card-tools -->
</div>
<!-- /.card-header -->
<div class="card-body">
The body of the card
</div>
<!-- /.card-body -->
</div>
<!-- /.card -->
</div>
<!-- /.col -->
<div class="col-md-3">
<div class="card text-bg-danger">
<div class="card-header">
<h3 class="card-title">Maximizable</h3>
<div class="card-tools">
<button type="button" class="btn btn-tool" data-lte-toggle="card-maximize"><i class="fa-solid fa-expand"></i>
</button>
</div>
<!-- /.card-tools -->
</div>
<!-- /.card-header -->
<div class="card-body">
The body of the card
</div>
<!-- /.card-body -->
</div>
<!-- /.card -->
</div>
<!-- /.col -->
</div>
<!-- /.row -->
</div><!-- /.container-fluid -->
</div>

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

@ -9,7 +9,7 @@
})
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/ionicons@2.0.1/css/ionicons.min.css" integrity="sha256-kqxQgiD1u2DslOB2UFKOtmYl+CpHQK2gaM3gU2V4EoY=" crossorigin="anonymous">
</head>
<body class="layout-fixed">
<body class="layout-fixed bg-body-tertiary">
<div class="wrapper">
@@include('./dashboard/_topbar.html', {
"path": "../.."

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

@ -9,7 +9,7 @@
})
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/ionicons@2.0.1/css/ionicons.min.css" integrity="sha256-kqxQgiD1u2DslOB2UFKOtmYl+CpHQK2gaM3gU2V4EoY=" crossorigin="anonymous">
</head>
<body class="layout-fixed">
<body class="layout-fixed bg-body-tertiary">
<div class="wrapper">
@@include('./dashboard/_topbar.html', {
"path": "../.."

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

@ -76,7 +76,7 @@
<i class="nav-icon fa-solid fa-copy"></i>
<p>
Layout Options
<span class="badge text-bg-info float-end me-3">6</span>
<span class="badge text-bg-primary float-end me-3">6</span>
<i class="end fa-solid fa-angle-right"></i>
</p>
</a>

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

@ -1,5 +1,5 @@
<!-- Navbar -->
<nav class="main-header navbar navbar-expand navbar-light">
<nav class="main-header navbar navbar-expand navbar-light bg-body">
<div class="container-fluid">
<!-- Start navbar links -->
<ul class="navbar-nav">

6
src/scss/_brand-container.scss
View File

@ -4,7 +4,7 @@
.brand-container {
display: grid;
grid-template-areas: "brand-link pushmenu";
grid-template-areas: "#{lte-prefix}brand-link #{lte-prefix}pushmenu";
justify-content: space-between;
padding: $lte-brand-link-padding-y $lte-sidebar-padding-x;
overflow: hidden;
@ -13,7 +13,7 @@
@include transition(width $lte-transition-speed $lte-transition-fn);
.brand-link {
grid-area: brand-link;
grid-area: #{lte-prefix}brand-link;
&:hover {
text-decoration: none;
@ -31,7 +31,7 @@
}
.pushmenu {
grid-area: pushmenu;
grid-area: #{lte-prefix}pushmenu;
}
.sidebar-bg-dark & {

291
src/scss/_cards.scss
View File

@ -3,29 +3,44 @@
//
// Color variants
@each $name, $color in $theme-colors {
@include cards-variant($name, $color);
}
@each $name, $color in $colors {
@include cards-variant($name, $color);
}
.card {
@include box-shadow($lte-card-shadow);
margin-bottom: map-get($spacers, 3);
&.bg-dark {
.card-header {
border-color: $lte-card-dark-border-color;
}
&:not(.card-outline) {
> .card-header {
background-color: var(--#{$lte-prefix}card-variant-bg);
&,
.card-body {
color: $white;
&,
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);
&:hover {
color: var(--#{$lte-prefix}card-variant-color);
}
}
}
}
&.card-outline {
border-top: 3px solid var(--#{$lte-prefix}card-variant-bg);
}
&.maximized-card {
position: fixed;
top: 0;
@ -197,6 +212,17 @@
}
@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;
@ -206,7 +232,7 @@ html.maximized-card {
.card-header,
.card-body,
.card-footer {
@include clearfix ();
@include clearfix();
}
// Box header
@ -248,231 +274,16 @@ html.maximized-card {
font-weight: $lte-card-title-font-weight;
}
.card-text {
clear: both;
}
// Box Tools Buttons
.btn-tool {
padding: .25rem .5rem;
margin: -(($card-spacer-y * .5) * 2) 0;
--#{$prefix}btn-padding-x: .5rem;
--#{$prefix}btn-padding-y: .25rem;
--#{$prefix}btn-color: var(--#{$prefix}tertiary-color);
--#{$prefix}btn-bg: transparent;
--#{$prefix}btn-box-shadow: none;
--#{$prefix}btn-hover-color: --#{$prefix}secondary-color;
--#{$prefix}btn-active-border-color: transparent;
margin: -$card-spacer-y 0;
font-size: $font-size-sm;
color: $gray-500;
background-color: transparent;
.btn-group.show &,
&:hover {
color: $gray-700;
}
.show &,
&:focus {
box-shadow: none !important;
}
}
.fs-7 {
.card-title {
font-size: $lte-card-title-font-size-sm;
}
.nav-link {
padding: $lte-card-nav-link-padding-sm-y $lte-card-nav-link-padding-sm-x;
}
}
// Box Body
.card-body {
// @include border-radius-sides(0, 0, $border-radius, $border-radius);
// .no-header & {
// @include border-top-radius($border-radius);
// }
// Tables within the box body
> .table {
margin-bottom: 0;
> thead > tr > th,
> thead > tr > td {
border-top-width: 0;
}
}
// Calendar within the box body
.fc {
margin-top: 5px;
}
.full-width-chart {
margin: -19px;
}
&.p-0 .full-width-chart {
margin: -9px;
}
}
.chart-legend {
@include list-unstyled ();
margin: 10px 0;
> li {
@media (max-width: map-get($grid-breakpoints, sm)) {
float: left;
margin-right: 10px;
}
}
}
// Comment Box
.card-comments {
background-color: $gray-100;
.card-comment {
@include clearfix ();
padding: 8px 0;
border-bottom: 1px solid $gray-200;
&:last-of-type {
border-bottom: 0;
}
&:first-of-type {
padding-top: 0;
}
img {
float: left;
width: $lte-card-img-size;
height: $lte-card-img-size;
}
}
.comment-text {
margin-left: 40px;
color: tint-color($gray-700, 20%);
}
.username {
display: block;
font-weight: 600;
color: $gray-700;
}
.text-muted {
font-size: 12px;
font-weight: 400;
}
}
// Widgets
//-----------
// Widget: TODO LIST
.todo-list {
padding: 0;
margin: 0;
overflow: auto;
list-style: none;
// Todo list element
> li {
padding: 10px;
margin-bottom: 2px;
color: $gray-700;
background-color: $gray-100;
border-left: 2px solid $gray-200;
@include border-radius(2px);
&:last-of-type {
margin-bottom: 0;
}
> input[type="checkbox"] {
margin: 0 10px 0 5px;
}
.text {
display: inline-block;
margin-left: 5px;
font-weight: 600;
}
// Time labels
.badge {
margin-left: 10px;
font-size: .7rem;
}
// Tools and options box
.tools {
display: none;
float: right;
color: $danger;
// TODO: create new class for reduce files
// icons
> i,
> svg,
> img,
> object,
> iframe {
margin-right: 5px;
cursor: pointer;
}
}
&:hover .tools {
display: inline-block;
}
&.done {
color: shade-color($gray-500, 25%);
.text {
font-weight: 500;
text-decoration: line-through;
}
.badge {
background-color: $gray-500 !important;
}
}
}
// Color variants
@each $name, $color in $theme-colors {
.#{$name} {
border-left-color: $color;
}
}
@each $name, $color in $colors {
.#{$name} {
border-left-color: $color;
}
}
.handle {
display: inline-block;
margin: 0 5px;
cursor: move;
}
}
// END TODO WIDGET
// Input in box
.card-input {
max-width: 200px;
}
// Nav Tabs override
.card-default {
.nav-item {
&:first-child .nav-link {
border-left: 0;
}
}
}

4
src/scss/_content-wrapper.scss
View File

@ -1,6 +1,4 @@
.content-wrapper {
grid-area: content-wrapper;
grid-area: #{lte-prefix}content-wrapper;
padding-bottom: 1rem;
color: var(--#{$lte-prefix}main-color);
background-color: var(--#{$lte-prefix}main-bg);
}

24
src/scss/_direct-chat.scss
View File

@ -42,7 +42,7 @@
}
.direct-chat-msg {
@include clearfix ();
@include clearfix();
margin-bottom: 10px;
}
@ -163,10 +163,10 @@
//Contacts list -- for displaying contacts in direct chat contacts pane
.contacts-list {
@include list-unstyled ();
@include list-unstyled();
> li {
@include clearfix ();
@include clearfix();
padding: 10px;
margin: 0;
border-bottom: 1px solid rgba($black, .2);
@ -210,15 +210,21 @@
color: var(--#{$prefix}secondary-bg);
}
// Color variants
@each $name, $color in $theme-colors {
.direct-chat-#{$name} {
@include direct-chat-variant($color);
.end > .direct-chat-text {
color: var(--#{$lte-prefix}direct-chat-color);
background-color: var(--#{$lte-prefix}direct-chat-bg);
border-color: var(--#{$lte-prefix}direct-chat-bg);
&::after,
&::before {
border-left-color: var(--#{$lte-prefix}direct-chat-bg);
}
}
@each $name, $color in $colors {
// Color variants
@each $name, $color in $theme-colors {
.direct-chat-#{$name} {
@include direct-chat-variant($color);
--#{$lte-prefix}direct-chat-color: #{color-contrast($color)};
--#{$lte-prefix}direct-chat-bg: #{$color};
}
}

6
src/scss/_dropdown.scss
View File

@ -58,7 +58,7 @@
position: relative;
> a::after {
@include caret-end ();
@include caret-end();
float: right;
margin-top: .5rem;
margin-left: .5rem;
@ -196,7 +196,7 @@
// Menu Body
> .user-body {
@include clearfix ();
@include clearfix();
padding: 15px;
border-top: 1px solid var(--#{$prefix}border-color);
border-bottom: 1px solid var(--#{$prefix}border-color-translucent);
@ -211,7 +211,7 @@
// Menu Footer
> .user-footer {
@include clearfix ();
@include clearfix();
padding: 10px;
background-color: var(--#{$prefix}light-bg);

8
src/scss/_info-box.scss
View File

@ -64,12 +64,8 @@
@each $name, $color in $theme-colors {
.info-box {
.bg-#{$name} {
color: color-contrast($color);
.progress-bar {
background-color: color-contrast($color);
}
.progress-bar {
background-color: color-contrast($color);
}
}
}

2
src/scss/_main-footer.scss
View File

@ -3,7 +3,7 @@
//
.main-footer {
grid-area: main-footer;
grid-area: #{lte-prefix}main-footer;
width: inherit;
padding: $lte-main-footer-padding;
color: $lte-main-footer-color;

19
src/scss/_main-header.scss
View File

@ -2,16 +2,9 @@
// Core: Main Header
//
@include header-variant(
var(--#{$lte-prefix}header-light-bg),
var(--#{$lte-prefix}header-light-color),
var(--#{$lte-prefix}header-mobile-light-bg),
var(--#{$lte-prefix}header-mobile-light-color)
);
.main-header {
z-index: $lte-zindex-main-header;
grid-area: main-header;
grid-area: #{lte-prefix}main-header;
border-bottom: $lte-main-header-bottom-border;
.nav-link {
@ -29,13 +22,3 @@
font-size: .6rem;
font-weight: 400;
}
.layout-navbar-fixed {
.main-header {
// position: fixed;
}
.content-wrapper {
// margin-top: $lte-main-header-height;
}
}

237
src/scss/_main-sidebar.scss
View File

@ -2,55 +2,201 @@
// Core: Main Sidebar
//
.sidebar-bg-dark {
@include nav-treeview-dark (
var(--#{$lte-prefix}sidebar-dark-bg),
var(--#{$lte-prefix}sidebar-dark-hover-bg),
var(--#{$lte-prefix}sidebar-dark-color),
var(--#{$lte-prefix}sidebar-dark-hover-color),
var(--#{$lte-prefix}sidebar-dark-active-color),
var(--#{$lte-prefix}sidebar-dark-submenu-bg),
var(--#{$lte-prefix}sidebar-dark-submenu-color),
var(--#{$lte-prefix}sidebar-dark-submenu-hover-color),
var(--#{$lte-prefix}sidebar-dark-submenu-hover-bg),
var(--#{$lte-prefix}sidebar-dark-submenu-active-color),
var(--#{$lte-prefix}sidebar-dark-submenu-active-bg),
var(--#{$lte-prefix}sidebar-dark-header-color)
);
}
.sidebar-bg-light {
@include nav-treeview-light (
var(--#{$lte-prefix}sidebar-light-bg),
var(--#{$lte-prefix}sidebar-light-hover-bg),
var(--#{$lte-prefix}sidebar-light-color),
var(--#{$lte-prefix}sidebar-light-hover-color),
var(--#{$lte-prefix}sidebar-light-active-color),
var(--#{$lte-prefix}sidebar-light-submenu-bg),
var(--#{$lte-prefix}sidebar-light-submenu-color),
var(--#{$lte-prefix}sidebar-light-submenu-hover-color),
var(--#{$lte-prefix}sidebar-light-submenu-hover-bg),
var(--#{$lte-prefix}sidebar-light-submenu-active-color),
var(--#{$lte-prefix}sidebar-light-submenu-active-bg),
var(--#{$lte-prefix}sidebar-light-header-color)
);
}
// .sidebar-color-primary {
// @include sidebar-color($primary);
// }
.main-sidebar {
@include transition($lte-sidebar-transition);
z-index: $lte-zindex-sidebar;
grid-area: main-sidebar;
grid-area: #{lte-prefix}main-sidebar;
min-width: var(--#{$lte-prefix}sidebar-width);
max-width: var(--#{$lte-prefix}sidebar-width);
.nav-sidebar > .nav-item {
> .nav-link.active {
color: var(--#{$lte-prefix}sidebar-menu-active-color);
background-color: var(--#{$lte-prefix}sidebar-menu-active-bg);
color: var(--#{$lte-prefix}sidebar-menu-active-color) !important;
background-color: var(--#{$lte-prefix}sidebar-menu-active-bg) !important;
}
}
}
@each $color, $value in $theme-colors {
.sidebar-color-#{$color} {
--#{$lte-prefix}sidebar-menu-active-bg: #{$value};
--#{$lte-prefix}sidebar-menu-active-color: #{color-contrast($value)};
}
}
.sidebar-bg-dark {
--#{$lte-prefix}sidebar-dark-bg: #{$lte-sidebar-dark-bg};
--#{$lte-prefix}sidebar-dark-hover-bg: #{$lte-sidebar-dark-hover-bg};
--#{$lte-prefix}sidebar-dark-color: #{$lte-sidebar-dark-color};
--#{$lte-prefix}sidebar-dark-hover-color: #{$lte-sidebar-dark-hover-color};
--#{$lte-prefix}sidebar-dark-active-color: #{$lte-sidebar-dark-active-color};
--#{$lte-prefix}sidebar-dark-submenu-bg: #{$lte-sidebar-dark-submenu-bg};
--#{$lte-prefix}sidebar-dark-submenu-color: #{$lte-sidebar-dark-submenu-color};
--#{$lte-prefix}sidebar-dark-submenu-hover-color: #{$lte-sidebar-dark-submenu-hover-color};
--#{$lte-prefix}sidebar-dark-submenu-hover-bg: #{$lte-sidebar-dark-submenu-hover-bg};
--#{$lte-prefix}sidebar-dark-submenu-active-color: #{$lte-sidebar-dark-submenu-active-color};
--#{$lte-prefix}sidebar-dark-submenu-active-bg: #{$lte-sidebar-dark-submenu-active-bg};
--#{$lte-prefix}sidebar-dark-header-color: #{$lte-sidebar-dark-header-color};
// Sidebar background color
background-color: var(--#{$lte-prefix}sidebar-dark-bg);
// Sidebar Menu. First level links
.nav-sidebar > .nav-item {
// links
> .nav-link {
&:active {
color: var(--#{$lte-prefix}sidebar-dark-color);
}
}
// Hover and active states
&.menu-open > .nav-link,
&:hover > .nav-link,
> .nav-link:focus {
color: var(--#{$lte-prefix}sidebar-dark-hover-color);
background-color: var(--#{$lte-prefix}sidebar-dark-hover-bg);
}
> .nav-link.active {
color: var(--#{$lte-prefix}sidebar-dark-hover-color);
}
// First Level Submenu
> .nav-treeview {
background-color: var(--#{$lte-prefix}sidebar-dark-submenu-bg);
}
}
// Section Heading
.nav-header {
color: var(--#{$lte-prefix}sidebar-dark-header-color);
background-color: inherit;
}
// All links within the sidebar menu
.sidebar {
a {
color: var(--#{$lte-prefix}sidebar-dark-color);
&:hover,
&:focus {
text-decoration: none;
}
}
}
// All submenus
.nav-treeview {
> .nav-item {
> .nav-link {
color: var(--#{$lte-prefix}sidebar-dark-submenu-color);
&:hover,
&:focus {
color: var(--#{$lte-prefix}sidebar-dark-submenu-hover-color);
background-color: var(--#{$lte-prefix}sidebar-dark-submenu-hover-bg);
}
}
> .nav-link.active {
&,
&:hover,
&:focus {
color: var(--#{$lte-prefix}sidebar-dark-submenu-active-color);
background-color: var(--#{$lte-prefix}sidebar-dark-submenu-active-bg);
}
}
}
}
}
.sidebar-bg-light {
--#{$lte-prefix}sidebar-light-bg: #{$lte-sidebar-light-bg};
--#{$lte-prefix}sidebar-light-hover-bg: #{$lte-sidebar-light-hover-bg};
--#{$lte-prefix}sidebar-light-color: #{$lte-sidebar-light-color};
--#{$lte-prefix}sidebar-light-hover-color: #{$lte-sidebar-light-hover-color};
--#{$lte-prefix}sidebar-light-active-color: #{$lte-sidebar-light-active-color};
--#{$lte-prefix}sidebar-light-submenu-bg: #{$lte-sidebar-light-submenu-bg};
--#{$lte-prefix}sidebar-light-submenu-color: #{$lte-sidebar-light-submenu-color};
--#{$lte-prefix}sidebar-light-submenu-hover-color: #{$lte-sidebar-light-submenu-hover-color};
--#{$lte-prefix}sidebar-light-submenu-hover-bg: #{$lte-sidebar-light-submenu-hover-bg};
--#{$lte-prefix}sidebar-light-submenu-active-color: #{$lte-sidebar-light-submenu-active-color};
--#{$lte-prefix}sidebar-light-submenu-active-bg: #{$lte-sidebar-light-submenu-active-bg};
--#{$lte-prefix}sidebar-light-header-color: #{$lte-sidebar-light-header-color};
// Sidebar background color
background-color: var(--#{$lte-prefix}sidebar-light-bg);
// Sidebar Menu. First level links
.nav-sidebar > .nav-item {
// links
> .nav-link {
&:active,
&:focus {
color: var(--#{$lte-prefix}sidebar-light-color);
}
}
// Hover and active states
&.menu-open > .nav-link,
&:hover > .nav-link {
color: var(--#{$lte-prefix}sidebar-light-hover-color);
background-color: var(--#{$lte-prefix}sidebar-light-hover-bg);
}
> .nav-link.active {
color: var(--#{$lte-prefix}sidebar-light-active-color);
}
// First Level Submenu
> .nav-treeview {
background-color: var(--#{$lte-prefix}sidebar-light-submenu-bg);
}
}
// Section Heading
.nav-header {
color: var(--#{$lte-prefix}sidebar-light-header-color);
background-color: inherit;
}
// All links within the sidebar menu
.sidebar {
a {
color: var(--#{$lte-prefix}sidebar-light-color);
&:hover {
text-decoration: none;
}
}
}
// All submenus
.nav-treeview {
> .nav-item {
> .nav-link {
color: var(--#{$lte-prefix}sidebar-light-submenu-color);
&:hover,
&:focus {
color: var(--#{$lte-prefix}sidebar-light-submenu-hover-color);
background-color: var(--#{$lte-prefix}sidebar-light-submenu-hover-bg);
}
}
> .nav-link.active {
&,
&:hover {
color: var(--#{$lte-prefix}sidebar-light-submenu-active-color);
background-color: var(--#{$lte-prefix}sidebar-light-submenu-active-bg);
}
}
> .nav-link:hover {
background-color: var(--#{$lte-prefix}sidebar-light-submenu-hover-bg);
}
}
}
}
@ -61,3 +207,14 @@
animation: none !important;
}
}
@if $enable-dark-mode {
@include color-mode(dark) {
.sidebar-bg-dark {
--#{$lte-prefix}sidebar-dark-bg: #{$lte-sidebar-dark-bg-dark};
}
.sidebar-bg-light {
--#{$lte-prefix}sidebar-light-bg: #{$lte-sidebar-light-bg-dark};
}
}
}

14
src/scss/_miscellaneous.scss
View File

@ -461,17 +461,3 @@ blockquote {
border-top: none;
border-bottom: $nav-tabs-border-width solid $nav-tabs-border-color;
}
// Badge BTN Style
.badge-btn {
padding: $lte-button-padding-y-xs * 2 $lte-button-padding-x-xs * 2;
font-size: $lte-button-font-size-xs;
font-weight: 400;
@include border-radius($lte-button-border-radius-xs);
}
.badge-btn.badge-pill {
padding: .375rem .6rem;
}

6
src/scss/_mixins.scss
View File

@ -4,9 +4,3 @@
@import "mixins/animations";
@import "mixins/scrollbar";
@import "mixins/brand-variant";
@import "mixins/header-variant";
@import "mixins/nav-treeview-dark";
@import "mixins/nav-treeview-light";
@import "mixins/cards";
@import "mixins/direct-chat";

2
src/scss/_products.scss
View File

@ -8,7 +8,7 @@
list-style: none;
> .item {
@include clearfix ();
@include clearfix();
@if $enable-rounded {
@include border-radius($border-radius);

47
src/scss/_root.scss
View File

@ -1,48 +1,11 @@
:root {
:root,
[data-bs-theme="light"] {
// Content Wrapper
--#{$lte-prefix}main-color: #{$lte-main-color};
--#{$lte-prefix}main-bg: #{$lte-main-bg};
// Main Header
--#{$lte-prefix}header-light-bg: #{$lte-header-light-bg};
--#{$lte-prefix}header-light-color: #{$lte-header-light-color};
--#{$lte-prefix}header-mobile-light-bg: #{$lte-header-mobile-light-bg};
--#{$lte-prefix}header-mobile-light-color: #{$lte-header-mobile-light-color};
// Sidebar
--#{$lte-prefix}sidebar-width: #{$lte-sidebar-width};
// Sidebar active links
--#{$lte-prefix}sidebar-menu-active-bg: #{$lte-sidebar-menu-active-bg};
--#{$lte-prefix}sidebar-menu-active-color: #{$lte-sidebar-menu-active-color};
// Dark Sidebar Native Variables
--#{$lte-prefix}sidebar-dark-bg: #{$lte-sidebar-dark-bg};
--#{$lte-prefix}sidebar-dark-hover-bg: #{$lte-sidebar-dark-hover-bg};
--#{$lte-prefix}sidebar-dark-color: #{$lte-sidebar-dark-color};
--#{$lte-prefix}sidebar-dark-hover-color: #{$lte-sidebar-dark-hover-color};
--#{$lte-prefix}sidebar-dark-active-color: #{$lte-sidebar-dark-active-color};
--#{$lte-prefix}sidebar-dark-submenu-bg: #{$lte-sidebar-dark-submenu-bg};
--#{$lte-prefix}sidebar-dark-submenu-color: #{$lte-sidebar-dark-submenu-color};
--#{$lte-prefix}sidebar-dark-submenu-hover-color: #{$lte-sidebar-dark-submenu-hover-color};
--#{$lte-prefix}sidebar-dark-submenu-hover-bg: #{$lte-sidebar-dark-submenu-hover-bg};
--#{$lte-prefix}sidebar-dark-submenu-active-color: #{$lte-sidebar-dark-submenu-active-color};
--#{$lte-prefix}sidebar-dark-submenu-active-bg: #{$lte-sidebar-dark-submenu-active-bg};
--#{$lte-prefix}sidebar-dark-header-color: #{$lte-sidebar-dark-header-color};
// Light Sidebar Native Variables
--#{$lte-prefix}sidebar-light-bg: #{$lte-sidebar-light-bg};
--#{$lte-prefix}sidebar-light-hover-bg: #{$lte-sidebar-light-hover-bg};
--#{$lte-prefix}sidebar-light-color: #{$lte-sidebar-light-color};
--#{$lte-prefix}sidebar-light-hover-color: #{$lte-sidebar-light-hover-color};
--#{$lte-prefix}sidebar-light-active-color: #{$lte-sidebar-light-active-color};
--#{$lte-prefix}sidebar-light-submenu-bg: #{$lte-sidebar-light-submenu-bg};
--#{$lte-prefix}sidebar-light-submenu-color: #{$lte-sidebar-light-submenu-color};
--#{$lte-prefix}sidebar-light-submenu-hover-color: #{$lte-sidebar-light-submenu-hover-color};
--#{$lte-prefix}sidebar-light-submenu-hover-bg: #{$lte-sidebar-light-submenu-hover-bg};
--#{$lte-prefix}sidebar-light-submenu-active-color: #{$lte-sidebar-light-submenu-active-color};
--#{$lte-prefix}sidebar-light-submenu-active-bg: #{$lte-sidebar-light-submenu-active-bg};
--#{$lte-prefix}sidebar-light-header-color: #{$lte-sidebar-light-header-color};
}
@if $enable-dark-mode {
@ -51,11 +14,5 @@
// Body Color
--#{$lte-prefix}main-color: #{$lte-main-color-dark};
--#{$lte-prefix}main-bg: #{$lte-main-bg-dark};
// // Dark Sidebar Native Variables
--#{$lte-prefix}sidebar-dark-bg: #{$lte-sidebar-dark-bg-dark};
// // Light Sidebar Native Variables
--#{$lte-prefix}sidebar-light-bg: #{$lte-sidebar-light-bg-dark};
}
}

8
src/scss/_sidebar-horizontal.scss
View File

@ -2,10 +2,10 @@
.sidebar-horizontal {
.wrapper {
grid-template-areas:
"main-header"
"main-sidebar"
"content-wrapper"
"main-footer";
"#{lte-prefix}main-header"
"#{lte-prefix}main-sidebar"
"#{lte-prefix}content-wrapper"
"#{lte-prefix}main-footer";
grid-template-rows: max-content max-content auto max-content;
grid-template-columns: auto;
}

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

@ -3,7 +3,7 @@
//
.users-list {
@include list-unstyled ();
@include list-unstyled();
> li {
float: left;

10
src/scss/_variables.scss
View File

@ -33,12 +33,8 @@ $lte-sidebar-transition: min-width $lte-transition-speed $lte-transitio
// SIDEBAR SKINS
// --------------------------------------------------------
// Sidebar active links
$lte-sidebar-menu-active-bg: $primary !default;
$lte-sidebar-menu-active-color: $white !default;
// Dark sidebar
$lte-sidebar-dark-bg: #343a40 !default;
$lte-sidebar-dark-bg: $gray-800 !default;
$lte-sidebar-dark-hover-bg: rgba(255, 255, 255, .1) !default;
$lte-sidebar-dark-color: #c2c7d0 !default;
$lte-sidebar-dark-hover-color: $white !default;
@ -170,10 +166,6 @@ $lte-main-color: $black !default;
// BUTTON
// --------------------------------------------------------
$lte-button-default-background-color: $gray-100 !default;
$lte-button-default-color: #444 !default;
$lte-button-default-border-color: #ddd !default;
$lte-button-padding-y-xs: .125rem !default;
$lte-button-padding-x-xs: .25rem !default;
$lte-button-line-height-xs: $line-height-sm !default;

6
src/scss/_wrapper.scss
View File

@ -6,9 +6,9 @@
position: relative;
display: grid;
grid-template-areas:
"main-sidebar main-header"
"main-sidebar content-wrapper"
"main-sidebar main-footer";
"#{lte-prefix}main-sidebar #{lte-prefix}main-header"
"#{lte-prefix}main-sidebar #{lte-prefix}content-wrapper"
"#{lte-prefix}main-sidebar #{lte-prefix}main-footer";
grid-template-rows: min-content 1fr min-content;
grid-template-columns: auto 1fr;
grid-gap: 0;

9
src/scss/mixins/_brand-variant.scss
View File

@ -1,9 +0,0 @@
@mixin brand-variant(
$brand-bg,
$brand-color
) {
.brand-container {
color: $brand-color;
background-color: $brand-bg;
}
}

53
src/scss/mixins/_cards.scss
View File

@ -1,53 +0,0 @@
//
// Mixins: Cards Variant
//
@mixin cards-variant($name, $color) {
.card-#{$name} {
&:not(.card-outline) {
> .card-header {
background-color: $color;
&,
a {
color: color-contrast($color);
}
a.active {
color: color-contrast($white);
}
}
}
&.card-outline {
border-top: 3px solid $color;
}
&.card-outline-tabs {
> .card-header {
a {
&:hover {
border-top: 3px solid $nav-tabs-border-color;
}
&.active {
border-top: 3px solid $color;
}
}
}
}
}
.bg-#{$name},
.card-#{$name}:not(.card-outline) {
> .card-header {
.btn-tool {
color: rgba(color-contrast($color), .8);
&:hover {
color: color-contrast($color);
}
}
}
}
}

17
src/scss/mixins/_direct-chat.scss
View File

@ -1,17 +0,0 @@
//
// Mixins: Direct Chat
//
// Direct Chat Variant
@mixin direct-chat-variant($bg-color, $color: $white) {
.end > .direct-chat-text {
color: color-contrast($bg-color);
background-color: $bg-color;
border-color: $bg-color;
&::after,
&::before {
border-left-color: $bg-color;
}
}
}

22
src/scss/mixins/_header-variant.scss
View File

@ -1,22 +0,0 @@
//
// Mixins: Sidebar Variant
//
@mixin header-variant(
$lte-header-bg,
$lte-header-color,
$lte-header-mobile-bg,
$lte-header-mobile-color
) {
.main-header {
color: $lte-header-color;
background-color: $lte-header-bg;
}
@include media-breakpoint-down(lg) {
.main-header {
color: $lte-header-mobile-color;
background-color: $lte-header-mobile-bg;
}
}
}

87
src/scss/mixins/_nav-treeview-dark.scss
View File

@ -1,87 +0,0 @@
@mixin nav-treeview-dark(
$lte-sidebar-bg,
$lte-sidebar-hover-bg,
$lte-sidebar-color,
$lte-sidebar-hover-color,
$lte-sidebar-active-color,
$lte-sidebar-submenu-bg,
$lte-sidebar-submenu-color,
$lte-sidebar-submenu-hover-color,
$lte-sidebar-submenu-hover-bg,
$lte-sidebar-submenu-active-color,
$lte-sidebar-submenu-active-bg,
$lte-sidebar-header-color
) {
// Sidebar background color
background-color: $lte-sidebar-bg;
// Sidebar Menu. First level links
.nav-sidebar > .nav-item {
// links
> .nav-link {
// border-left: 3px solid transparent;
&:active {
color: $lte-sidebar-color;
}
}
// Hover and active states
&.menu-open > .nav-link,
&:hover > .nav-link,
> .nav-link:focus {
color: $lte-sidebar-hover-color;
background-color: $lte-sidebar-hover-bg;
}
> .nav-link.active {
color: $lte-sidebar-hover-color;
}
// First Level Submenu
> .nav-treeview {
background-color: $lte-sidebar-submenu-bg;
}
}
// Section Heading
.nav-header {
color: $lte-sidebar-header-color;
background-color: inherit; //darken($lte-sidebar-bg, 3%);
}
// All links within the sidebar menu
.sidebar {
a {
color: $lte-sidebar-color;
&:hover,
&:focus {
text-decoration: none;
}
}
}
// All submenus
.nav-treeview {
> .nav-item {
> .nav-link {
color: $lte-sidebar-submenu-color;
&:hover,
&:focus {
color: $lte-sidebar-submenu-hover-color;
background-color: $lte-sidebar-submenu-hover-bg;
}
}
> .nav-link.active {
&,
&:hover,
&:focus {
color: $lte-sidebar-submenu-active-color;
background-color: $lte-sidebar-submenu-active-bg;
}
}
}
}
}

89
src/scss/mixins/_nav-treeview-light.scss
View File

@ -1,89 +0,0 @@
@mixin nav-treeview-light(
$lte-sidebar-bg,
$lte-sidebar-hover-bg,
$lte-sidebar-color,
$lte-sidebar-hover-color,
$lte-sidebar-active-color,
$lte-sidebar-submenu-bg,
$lte-sidebar-submenu-color,
$lte-sidebar-submenu-hover-color,
$lte-sidebar-submenu-hover-bg,
$lte-sidebar-submenu-active-color,
$lte-sidebar-submenu-active-bg,
$lte-sidebar-header-color
) {
// Sidebar background color
background-color: $lte-sidebar-bg;
// Sidebar Menu. First level links
.nav-sidebar > .nav-item {
// links
> .nav-link {
// border-left: 3px solid transparent;
&:active,
&:focus {
color: $lte-sidebar-color;
}
}
// Hover and active states
&.menu-open > .nav-link,
&:hover > .nav-link {
color: $lte-sidebar-hover-color;
background-color: $lte-sidebar-hover-bg;
}
> .nav-link.active {
color: $lte-sidebar-active-color;
}
// First Level Submenu
> .nav-treeview {
background-color: $lte-sidebar-submenu-bg;
}
}
// Section Heading
.nav-header {
color: $lte-sidebar-header-color;
background-color: inherit;
}
// All links within the sidebar menu
.sidebar {
a {
color: $lte-sidebar-color;
&:hover {
text-decoration: none;
}
}
}
// All submenus
.nav-treeview {
> .nav-item {
> .nav-link {
color: $lte-sidebar-submenu-color;
&:hover,
&:focus {
color: $lte-sidebar-submenu-hover-color;
background-color: $lte-sidebar-submenu-hover-bg;
}
}
> .nav-link.active {
&,
&:hover {
color: $lte-sidebar-submenu-active-color;
background-color: $lte-sidebar-submenu-active-bg;
}
}
> .nav-link:hover {
background-color: $lte-sidebar-submenu-hover-bg;
}
}
}
}

4
src/scss/mixins/_scrollbar.scss
View File

@ -3,10 +3,10 @@
//
@mixin scrollbar-color-gray() {
scrollbar-color: #a9a9a9 transparent;
scrollbar-color: var(--#{$prefix}secondary-bg) transparent;
&::-webkit-scrollbar-thumb {
background-color: #a9a9a9;
background-color: var(--#{$prefix}secondary-bg);
}
&::-webkit-scrollbar-track {

9
src/scss/mixins/_sidebar-color.scss
View File

@ -1,9 +0,0 @@
// Sidebar Color
@mixin sidebar-color($color) {
.nav-sidebar > .nav-item {
> .nav-link.active {
color: color-contrast($color);
background-color: $color;
}
}
}

3
src/scss/pages/_login_and_register.scss
View File

@ -20,8 +20,7 @@
flex-direction: column;
align-items: center;
justify-content: center;
height: 100vh;
background-color: var(--#{$prefix}secondary-bg);
min-height: 100vh;
}
.login-box,