Home Explore Help
Register Sign In
wilson.silva
/
AdminLte
mirror of https://github.com/almasaeed2010/AdminLTE
1
0
Fork 0
Files Issues 0 Wiki
Browse Source

BREAKING CHANGES IMPROVED CSS AND HTML USES

Daniel 2 years ago
parent
4455d45f66
commit
a2e8879f65
40 changed files with 481 additions and 719 deletions
Split View Show Diff Stats
  1. 1 1
      src/index.html
  2. 9 9
      src/index2.html
  3. 1 1
      src/index3.html
  4. 1 1
      src/pages/UI/timeline.html
  5. 1 1
      src/pages/examples/login.html
  6. 1 1
      src/pages/examples/register.html
  7. 1 1
      src/pages/forms/general.html
  8. 1 1
      src/pages/layout/fixed-sidebar.html
  9. 1 1
      src/pages/tables/simple.html
  10. 171 2
      src/pages/widgets/cards.html
  11. 1 1
      src/pages/widgets/info-box.html
  12. 1 1
      src/pages/widgets/small-box.html
  13. 1 1
      src/partials/dashboard/_sidenav.html
  14. 1 1
      src/partials/dashboard/_topbar.html
  15. 3 3
      src/scss/_brand-container.scss
  16. 51 240
      src/scss/_cards.scss
  17. 1 3
      src/scss/_content-wrapper.scss
  18. 15 9
      src/scss/_direct-chat.scss
  19. 3 3
      src/scss/_dropdown.scss
  20. 2 6
      src/scss/_info-box.scss
  21. 1 1
      src/scss/_main-footer.scss
  22. 1 18
      src/scss/_main-header.scss
  23. 197 40
      src/scss/_main-sidebar.scss
  24. 0 14
      src/scss/_miscellaneous.scss
  25. 0 6
      src/scss/_mixins.scss
  26. 1 1
      src/scss/_products.scss
  27. 2 45
      src/scss/_root.scss
  28. 4 4
      src/scss/_sidebar-horizontal.scss
  29. 1 1
      src/scss/_users-list.scss
  30. 1 9
      src/scss/_variables.scss
  31. 3 3
      src/scss/_wrapper.scss
  32. 0 9
      src/scss/mixins/_brand-variant.scss
  33. 0 53
      src/scss/mixins/_cards.scss
  34. 0 17
      src/scss/mixins/_direct-chat.scss
  35. 0 22
      src/scss/mixins/_header-variant.scss
  36. 0 87
      src/scss/mixins/_nav-treeview-dark.scss
  37. 0 89
      src/scss/mixins/_nav-treeview-light.scss
  38. 2 2
      src/scss/mixins/_scrollbar.scss
  39. 0 9
      src/scss/mixins/_sidebar-color.scss
  40. 1 2
      src/scss/pages/_login_and_register.scss

+ 1 - 1
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": "."

+ 9 - 9
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 -->

+ 1 - 1
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": "."

+ 1 - 1
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": "../.."

+ 1 - 1
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>

+ 1 - 1
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>

+ 1 - 1
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": "../.."

+ 1 - 1
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": "../.."

+ 1 - 1
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": "../.."

+ 171 - 2
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>

+ 1 - 1
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": "../.."

+ 1 - 1
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": "../.."

+ 1 - 1
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>

+ 1 - 1
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">

+ 3 - 3
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 & {

+ 51 - 240
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;
 
-    }
 
-  }
 
 }

+ 1 - 3
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);
 
 }

+ 15 - 9
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};
 
   }
 
 }

+ 3 - 3
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);

+ 2 - 6
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);
 
       }
 
     }
 
   }

+ 1 - 1
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;

+ 1 - 18
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;
 
-  }
 
-}

+ 197 - 40
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};
 
+    }
 
+  }
 
+}

+ 0 - 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;
 
-}
 
-

+ 0 - 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";

+ 1 - 1
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);

+ 2 - 45
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};
 
   }
 
 }

+ 4 - 4
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;
 
     }

+ 1 - 1
src/scss/_users-list.scss
View File 

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

+ 1 - 9
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;

+ 3 - 3
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;

+ 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;
 
-  }
 
-}

+ 0 - 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);
 
-        }
 
-      }
 
-    }
 
-  }
 
-}

+ 0 - 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;
 
-    }
 
-  }
 
-}

+ 0 - 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;
 
-    }
 
-  }
 
-}

+ 0 - 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;
 
-        }
 
-      }
 
-    }
 
-  }
 
-}

+ 0 - 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;
 
-      }
 
-    }
 
-  }
 
-}

+ 2 - 2
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 {

+ 0 - 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;
 
-    }
 
-  }
 
-}

+ 1 - 2
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,