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

18
src/index2.html
View File

@ -8,7 +8,7 @@
"title": "AdminLTE 4 | Dashboard 2" "title": "AdminLTE 4 | Dashboard 2"
}) })
</head> </head>
<body class="layout-fixed"> <body class="layout-fixed bg-body-tertiary">
<div class="wrapper"> <div class="wrapper">
@@include('./dashboard/_topbar.html', { @@include('./dashboard/_topbar.html', {
"path": "." "path": "."
@ -524,7 +524,7 @@
<!-- TABLE: LATEST ORDERS --> <!-- TABLE: LATEST ORDERS -->
<div class="card"> <div class="card">
<div class="card-header border-transparent"> <div class="card-header">
<h3 class="card-title">Latest Orders</h3> <h3 class="card-title">Latest Orders</h3>
<div class="card-tools"> <div class="card-tools">
@ -688,13 +688,13 @@
</div> </div>
<!-- /.col --> <!-- /.col -->
<div class="col-md-4"> <div class="col-md-4">
<ul class="chart-legend clearfix"> <ul class="row list-unstyled text-nowrap">
<li><i class="fa-regular fa-circle text-danger"></i> Chrome</li> <li class="col"><i class="fa-regular fa-circle text-danger"></i> Chrome</li>
<li><i class="fa-regular fa-circle text-success"></i> IE</li> <li class="col"><i class="fa-regular fa-circle text-success"></i> IE</li>
<li><i class="fa-regular fa-circle text-warning"></i> FireFox</li> <li class="col"><i class="fa-regular fa-circle text-warning"></i> FireFox</li>
<li><i class="fa-regular fa-circle text-info"></i> Safari</li> <li class="col"><i class="fa-regular fa-circle text-info"></i> Safari</li>
<li><i class="fa-regular fa-circle text-primary"></i> Opera</li> <li class="col"><i class="fa-regular fa-circle text-primary"></i> Opera</li>
<li><i class="fa-regular fa-circle text-secondary"></i> Navigator</li> <li class="col"><i class="fa-regular fa-circle text-secondary"></i> Navigator</li>
</ul> </ul>
</div> </div>
<!-- /.col --> <!-- /.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"> <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/ionicons@2.0.1/css/ionicons.min.css" integrity="sha256-kqxQgiD1u2DslOB2UFKOtmYl+CpHQK2gaM3gU2V4EoY=" crossorigin="anonymous">
</head> </head>
<body class="layout-fixed"> <body class="layout-fixed bg-body-tertiary">
<div class="wrapper"> <div class="wrapper">
@@include('./dashboard/_topbar.html', { @@include('./dashboard/_topbar.html', {
"path": "." "path": "."

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

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

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

@ -9,7 +9,7 @@
"title": "AdminLTE 4 | Login Page" "title": "AdminLTE 4 | Login Page"
}) })
</head> </head>
<body class="login-page"> <body class="login-page bg-body-secondary">
<div class="login-box"> <div class="login-box">
<div class="login-logo"> <div class="login-logo">
<a href="../../index2.html"><b>Admin</b>LTE</a> <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" "title": "AdminLTE 4 | Register Page"
}) })
</head> </head>
<body class="register-page"> <body class="register-page bg-body-secondary">
<div class="register-box"> <div class="register-box">
<div class="register-logo"> <div class="register-logo">
<a href="../../index2.html"><b>Admin</b>LTE</a> <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" "title": "AdminLTE 4 | General Form Elements"
}) })
</head> </head>
<body class="layout-fixed"> <body class="layout-fixed bg-body-tertiary">
<div class="wrapper"> <div class="wrapper">
@@include('./dashboard/_topbar.html', { @@include('./dashboard/_topbar.html', {
"path": "../.." "path": "../.."

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

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

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

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

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

@ -8,7 +8,7 @@
"title": "AdminLTE 4 | Widgets - Cards" "title": "AdminLTE 4 | Widgets - Cards"
}) })
</head> </head>
<body class="layout-fixed"> <body class="layout-fixed bg-body-tertiary">
<div class="wrapper"> <div class="wrapper">
@@include('./dashboard/_topbar.html', { @@include('./dashboard/_topbar.html', {
"path": "../.." "path": "../.."
@ -39,7 +39,8 @@
<!-- Main content --> <!-- Main content -->
<div class="content"> <div class="content">
<div class="container-fluid"> <div class="container-fluid">
<h4 class="mb-2 mt-4">Cards</h4> <h4 class="mb-2">Cards</h4>
<h5 class="mb-2">Abilities</h5> <h5 class="mb-2">Abilities</h5>
<div class="row"> <div class="row">
<div class="col-md-3"> <div class="col-md-3">
@ -123,6 +124,174 @@
</div> </div>
<!-- /.col --> <!-- /.col -->
</div> </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 --> <!-- /.row -->
</div><!-- /.container-fluid --> </div><!-- /.container-fluid -->
</div> </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"> <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/ionicons@2.0.1/css/ionicons.min.css" integrity="sha256-kqxQgiD1u2DslOB2UFKOtmYl+CpHQK2gaM3gU2V4EoY=" crossorigin="anonymous">
</head> </head>
<body class="layout-fixed"> <body class="layout-fixed bg-body-tertiary">
<div class="wrapper"> <div class="wrapper">
@@include('./dashboard/_topbar.html', { @@include('./dashboard/_topbar.html', {
"path": "../.." "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"> <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/ionicons@2.0.1/css/ionicons.min.css" integrity="sha256-kqxQgiD1u2DslOB2UFKOtmYl+CpHQK2gaM3gU2V4EoY=" crossorigin="anonymous">
</head> </head>
<body class="layout-fixed"> <body class="layout-fixed bg-body-tertiary">
<div class="wrapper"> <div class="wrapper">
@@include('./dashboard/_topbar.html', { @@include('./dashboard/_topbar.html', {
"path": "../.." "path": "../.."

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

@ -76,7 +76,7 @@
<i class="nav-icon fa-solid fa-copy"></i> <i class="nav-icon fa-solid fa-copy"></i>
<p> <p>
Layout Options 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> <i class="end fa-solid fa-angle-right"></i>
</p> </p>
</a> </a>

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

@ -1,5 +1,5 @@
<!-- Navbar --> <!-- 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"> <div class="container-fluid">
<!-- Start navbar links --> <!-- Start navbar links -->
<ul class="navbar-nav"> <ul class="navbar-nav">

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

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

291
src/scss/_cards.scss
View File

@ -3,29 +3,44 @@
// //
// Color variants // Color variants
@each $name, $color in $theme-colors {
@include cards-variant($name, $color);
}
@each $name, $color in $colors {
@include cards-variant($name, $color);
}
.card { .card {
@include box-shadow($lte-card-shadow); @include box-shadow($lte-card-shadow);
margin-bottom: map-get($spacers, 3); margin-bottom: map-get($spacers, 3);
&.bg-dark { &:not(.card-outline) {
.card-header { > .card-header {
border-color: $lte-card-dark-border-color; background-color: var(--#{$lte-prefix}card-variant-bg);
}
&, &,
.card-body { a {
color: $white; 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 { &.maximized-card {
position: fixed; position: fixed;
top: 0; 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 // Maximized Card Body Scroll fix
html.maximized-card { html.maximized-card {
overflow: hidden; overflow: hidden;
@ -206,7 +232,7 @@ html.maximized-card {
.card-header, .card-header,
.card-body, .card-body,
.card-footer { .card-footer {
@include clearfix (); @include clearfix();
} }
// Box header // Box header
@ -248,231 +274,16 @@ html.maximized-card {
font-weight: $lte-card-title-font-weight; font-weight: $lte-card-title-font-weight;
} }
.card-text {
clear: both;
}
// Box Tools Buttons // Box Tools Buttons
.btn-tool { .btn-tool {
padding: .25rem .5rem; --#{$prefix}btn-padding-x: .5rem;
margin: -(($card-spacer-y * .5) * 2) 0; --#{$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; 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 { .content-wrapper {
grid-area: content-wrapper; grid-area: #{lte-prefix}content-wrapper;
padding-bottom: 1rem; 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 { .direct-chat-msg {
@include clearfix (); @include clearfix();
margin-bottom: 10px; margin-bottom: 10px;
} }
@ -163,10 +163,10 @@
//Contacts list -- for displaying contacts in direct chat contacts pane //Contacts list -- for displaying contacts in direct chat contacts pane
.contacts-list { .contacts-list {
@include list-unstyled (); @include list-unstyled();
> li { > li {
@include clearfix (); @include clearfix();
padding: 10px; padding: 10px;
margin: 0; margin: 0;
border-bottom: 1px solid rgba($black, .2); border-bottom: 1px solid rgba($black, .2);
@ -210,15 +210,21 @@
color: var(--#{$prefix}secondary-bg); color: var(--#{$prefix}secondary-bg);
} }
// Color variants .end > .direct-chat-text {
@each $name, $color in $theme-colors { color: var(--#{$lte-prefix}direct-chat-color);
.direct-chat-#{$name} { background-color: var(--#{$lte-prefix}direct-chat-bg);
@include direct-chat-variant($color); 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} { .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; position: relative;
> a::after { > a::after {
@include caret-end (); @include caret-end();
float: right; float: right;
margin-top: .5rem; margin-top: .5rem;
margin-left: .5rem; margin-left: .5rem;
@ -196,7 +196,7 @@
// Menu Body // Menu Body
> .user-body { > .user-body {
@include clearfix (); @include clearfix();
padding: 15px; padding: 15px;
border-top: 1px solid var(--#{$prefix}border-color); border-top: 1px solid var(--#{$prefix}border-color);
border-bottom: 1px solid var(--#{$prefix}border-color-translucent); border-bottom: 1px solid var(--#{$prefix}border-color-translucent);
@ -211,7 +211,7 @@
// Menu Footer // Menu Footer
> .user-footer { > .user-footer {
@include clearfix (); @include clearfix();
padding: 10px; padding: 10px;
background-color: var(--#{$prefix}light-bg); background-color: var(--#{$prefix}light-bg);

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

@ -64,12 +64,8 @@
@each $name, $color in $theme-colors { @each $name, $color in $theme-colors {
.info-box { .info-box {
.bg-#{$name} { .progress-bar {
color: color-contrast($color); 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 { .main-footer {
grid-area: main-footer; grid-area: #{lte-prefix}main-footer;
width: inherit; width: inherit;
padding: $lte-main-footer-padding; padding: $lte-main-footer-padding;
color: $lte-main-footer-color; color: $lte-main-footer-color;

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

@ -2,16 +2,9 @@
// Core: Main Header // 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 { .main-header {
z-index: $lte-zindex-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; border-bottom: $lte-main-header-bottom-border;
.nav-link { .nav-link {
@ -29,13 +22,3 @@
font-size: .6rem; font-size: .6rem;
font-weight: 400; 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 // 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 { .main-sidebar {
@include transition($lte-sidebar-transition); @include transition($lte-sidebar-transition);
z-index: $lte-zindex-sidebar; z-index: $lte-zindex-sidebar;
grid-area: main-sidebar; grid-area: #{lte-prefix}main-sidebar;
min-width: var(--#{$lte-prefix}sidebar-width); min-width: var(--#{$lte-prefix}sidebar-width);
max-width: var(--#{$lte-prefix}sidebar-width); max-width: var(--#{$lte-prefix}sidebar-width);
.nav-sidebar > .nav-item { .nav-sidebar > .nav-item {
> .nav-link.active { > .nav-link.active {
color: var(--#{$lte-prefix}sidebar-menu-active-color); color: var(--#{$lte-prefix}sidebar-menu-active-color) !important;
background-color: var(--#{$lte-prefix}sidebar-menu-active-bg); 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; 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-top: none;
border-bottom: $nav-tabs-border-width solid $nav-tabs-border-color; 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/animations";
@import "mixins/scrollbar"; @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; list-style: none;
> .item { > .item {
@include clearfix (); @include clearfix();
@if $enable-rounded { @if $enable-rounded {
@include border-radius($border-radius); @include border-radius($border-radius);

47
src/scss/_root.scss
View File

@ -1,48 +1,11 @@
:root { :root,
[data-bs-theme="light"] {
// Content Wrapper // Content Wrapper
--#{$lte-prefix}main-color: #{$lte-main-color}; --#{$lte-prefix}main-color: #{$lte-main-color};
--#{$lte-prefix}main-bg: #{$lte-main-bg}; --#{$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 // Sidebar
--#{$lte-prefix}sidebar-width: #{$lte-sidebar-width}; --#{$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 { @if $enable-dark-mode {
@ -51,11 +14,5 @@
// Body Color // Body Color
--#{$lte-prefix}main-color: #{$lte-main-color-dark}; --#{$lte-prefix}main-color: #{$lte-main-color-dark};
--#{$lte-prefix}main-bg: #{$lte-main-bg-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 { .sidebar-horizontal {
.wrapper { .wrapper {
grid-template-areas: grid-template-areas:
"main-header" "#{lte-prefix}main-header"
"main-sidebar" "#{lte-prefix}main-sidebar"
"content-wrapper" "#{lte-prefix}content-wrapper"
"main-footer"; "#{lte-prefix}main-footer";
grid-template-rows: max-content max-content auto max-content; grid-template-rows: max-content max-content auto max-content;
grid-template-columns: auto; grid-template-columns: auto;
} }

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

@ -3,7 +3,7 @@
// //
.users-list { .users-list {
@include list-unstyled (); @include list-unstyled();
> li { > li {
float: left; 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 SKINS
// -------------------------------------------------------- // --------------------------------------------------------
// Sidebar active links
$lte-sidebar-menu-active-bg: $primary !default;
$lte-sidebar-menu-active-color: $white !default;
// Dark sidebar // 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-hover-bg: rgba(255, 255, 255, .1) !default;
$lte-sidebar-dark-color: #c2c7d0 !default; $lte-sidebar-dark-color: #c2c7d0 !default;
$lte-sidebar-dark-hover-color: $white !default; $lte-sidebar-dark-hover-color: $white !default;
@ -170,10 +166,6 @@ $lte-main-color: $black !default;
// BUTTON // 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-y-xs: .125rem !default;
$lte-button-padding-x-xs: .25rem !default; $lte-button-padding-x-xs: .25rem !default;
$lte-button-line-height-xs: $line-height-sm !default; $lte-button-line-height-xs: $line-height-sm !default;

6
src/scss/_wrapper.scss
View File

@ -6,9 +6,9 @@
position: relative; position: relative;
display: grid; display: grid;
grid-template-areas: grid-template-areas:
"main-sidebar main-header" "#{lte-prefix}main-sidebar #{lte-prefix}main-header"
"main-sidebar content-wrapper" "#{lte-prefix}main-sidebar #{lte-prefix}content-wrapper"
"main-sidebar main-footer"; "#{lte-prefix}main-sidebar #{lte-prefix}main-footer";
grid-template-rows: min-content 1fr min-content; grid-template-rows: min-content 1fr min-content;
grid-template-columns: auto 1fr; grid-template-columns: auto 1fr;
grid-gap: 0; 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() { @mixin scrollbar-color-gray() {
scrollbar-color: #a9a9a9 transparent; scrollbar-color: var(--#{$prefix}secondary-bg) transparent;
&::-webkit-scrollbar-thumb { &::-webkit-scrollbar-thumb {
background-color: #a9a9a9; background-color: var(--#{$prefix}secondary-bg);
} }
&::-webkit-scrollbar-track { &::-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; flex-direction: column;
align-items: center; align-items: center;
justify-content: center; justify-content: center;
height: 100vh; min-height: 100vh;
background-color: var(--#{$prefix}secondary-bg);
} }
.login-box, .login-box,