refactor: improve styles

src/styles/_custom.scss

@@ -1,29 +1 @@
-// Custom styles for this theme
+// Here you can add other styles
-
-.header > .container-fluid,
-.sidebar-header {
-  min-height: calc(4rem + 1px); // stylelint-disable-line function-disallowed-list
-}
-
-.header > .container-fluid + .container-fluid {
-  min-height: 3rem;
-}
-
-.sidebar-brand-full {
-  margin-left: 3px;
-}
-
-.sidebar-toggler {
-  @include ltr-rtl("margin-left", auto);
-}
-
-.sidebar-narrow,
-.sidebar-narrow-unfoldable:not(:hover) {
-  .sidebar-toggler {
-    @include ltr-rtl("margin-right", auto);
-  }
-}
-
-.footer {
-  min-height: calc(3rem + 1px); // stylelint-disable-line function-disallowed-list
-}

src/styles/_layout.scss

@@ -1,22 +0,0 @@
-body {
-  background-color: var(--cui-tertiary-bg);
-}
-
-.wrapper {
-  width: 100%;
-  @include ltr-rtl("padding-left", var(--cui-sidebar-occupy-start, 0));
-  will-change: auto;
-  @include transition(padding .15s);
-}
-
-@if $enable-dark-mode {
-  @include color-mode(dark) {
-    body {
-      background-color: var(--cui-dark-bg-subtle);
-    }
-
-    .footer {
-      --cui-footer-bg: var(--cui-body-bg);
-    }
-  }
-}

src/styles/_theme.scss

@@ -0,0 +1,64 @@
+body {
+  background-color: var(--cui-tertiary-bg);
+}
+
+.wrapper {
+  width: 100%;
+  @include ltr-rtl("padding-left", var(--cui-sidebar-occupy-start, 0));
+  @include ltr-rtl("padding-right", var(--cui-sidebar-occupy-end, 0));
+  will-change: auto;
+  @include transition(padding .15s);
+}
+
+.header > .container-fluid,
+.sidebar-header {
+  min-height: calc(4rem + 1px); // stylelint-disable-line function-disallowed-list
+}
+
+.sidebar-brand-full {
+  margin-left: 3px;
+}
+
+.sidebar-header {
+  .nav-underline-border {
+    --cui-nav-underline-border-link-padding-x: 1rem;
+    --cui-nav-underline-border-gap: 0;
+  }
+
+  .nav-link {
+    display: flex;
+    align-items: center;
+    min-height: calc(4rem + 1px); // stylelint-disable-line function-disallowed-list
+  }
+}
+
+.sidebar-toggler {
+  @include ltr-rtl("margin-left", auto);
+}
+
+.sidebar-narrow,
+.sidebar-narrow-unfoldable:not(:hover) {
+  .sidebar-toggler {
+    @include ltr-rtl("margin-right", auto);
+  }
+}
+
+.header > .container-fluid + .container-fluid {
+  min-height: 3rem;
+}
+
+.footer {
+  min-height: calc(3rem + 1px); // stylelint-disable-line function-disallowed-list
+}
+
+@if $enable-dark-mode {
+  @include color-mode(dark) {
+    body {
+      background-color: var(--cui-dark-bg-subtle);
+    }
+
+    .footer {
+      --cui-footer-bg: var(--cui-body-bg);
+    }
+  }
+}

src/styles/_variables.scss

@@ -2,5 +2,4 @@
 //
 // If you want to customize your project please add your variables below.
 
-$enable-rtl: true; /* stylelint-disable-line scss/dollar-variable-default */
+$enable-deprecation-messages: false !default;
-$enable-deprecation-messages: false; /* stylelint-disable-line scss/dollar-variable-default */

src/styles/examples.scss

@@ -1,4 +1,6 @@
 /* stylelint-disable declaration-no-important, scss/selector-no-redundant-nesting-selector */
+$enable-deprecation-messages: false; /* stylelint-disable-line scss/dollar-variable-default */
+
 @import "@coreui/coreui/scss/functions";
 @import "@coreui/coreui/scss/variables";
 @import "@coreui/coreui/scss/mixins";
@@ -51,9 +53,6 @@
     }
 
     // Buttons
-    .col > .btn,
-    .col-auto > .btn,
-    .d-md-block > .btn,
     > .btn,
     > .btn-group {
       margin: .25rem .125rem;
@@ -114,4 +113,4 @@
       background-color: var(--#{$prefix}secondary-bg) !important;
     }
   }
-}
+}

src/styles/style.scss

@@ -1,16 +1,14 @@
 // If you want to override variables do it here
 @import "variables";
 
-// Import CoreUI for React components library
+// Import styles
 @import "@coreui/coreui/scss/coreui";
 
-// Import Chart.js custom tooltips styles
+// Vendors
-@import "@coreui/chartjs/scss/coreui-chartjs";
+@import "vendors/simplebar";
 
-@import "layout";
+// Custom styles for this theme
+@import "theme";
 
-// Preview
+// If you want to add custom CSS you can put it here
-@import "examples";
-
-// If you want to add custom CSS you can put it here.
 @import "custom";

src/styles/vendors/simplebar.scss

@@ -0,0 +1,5 @@
+.simplebar-content {
+  display: flex;
+  flex-direction: column;
+  min-height: 100%;
+}