minor bug fixes

.stylelintrc

@@ -4,12 +4,31 @@
   ],
   "rules": {
     "declaration-no-important": null,
+    "declaration-property-value-disallowed-list": {
+      "border": "none",
+      "outline": "none"
+    },
     "function-disallowed-list": [
       "calc",
       "lighten",
       "darken"
     ],
     "keyframes-name-pattern": null,
+    "property-disallowed-list": [
+      "border-radius",
+      "border-top-left-radius",
+      "border-top-right-radius",
+      "border-bottom-right-radius",
+      "border-bottom-left-radius",
+      "transition"
+    ],
+    "scss/dollar-variable-default": [
+      true,
+      {
+        "ignore": "local"
+      }
+    ],
+    "scss/selector-no-union-class-name": true,
     "selector-max-class": null,
     "selector-max-combinators": null,
     "selector-max-compound-selectors": null,

gulpfile.js

@@ -168,7 +168,7 @@ const serve = () => {
 // Clean
 const cleanDist = () => del([paths.dist.base])
 
-const lintDistScss = () => src([paths.src.scss + '/**/*.scss'])
+const lintDistScss = () => src([paths.src.scss + '/**/*.scss'], ['./.temp/**/*.css'])
     .pipe(gulpStylelint({
       failAfterError: false,
       reporters: [

src/partials/_head.html

@@ -4,7 +4,7 @@
 <meta name="viewport" content="width=device-width, initial-scale=1.0">
 <meta name="title" content="@@title">
 <meta name="author" content="ColorlibHQ">
-<meta name="description" content="Volt Pro is a Premium Bootstrap 5 Admin Dashboard featuring over 800 components, 10+ plugins and 20 example pages using Vanilla JS.">
+<meta name="description" content="AdminLTE is a Free Bootstrap 5 Admin Dashboard featuring over 800 components, 10+ plugins and 20 example pages using Vanilla JS.">
 <meta name="keywords" content="bootstrap 5, bootstrap, bootstrap 5 admin dashboard, bootstrap 5 dashboard, bootstrap 5 charts, bootstrap 5 calendar, bootstrap 5 datepicker, bootstrap 5 tables, bootstrap 5 datatable, vanilla js datatable, colorlibhq, colorlibhq dashboard, colorlibhq admin dashboard" />
 <!-- By adding @@path/css/dark/adminlte-dark-addon.css then the page supports both dark color schemes, and the page author prefers / default is light. -->
 <meta name="color-scheme" content="light dark">

src/partials/dashboard/_topbar.html

@@ -27,7 +27,7 @@
       <li class="nav-item dropdown">
         <a class="nav-link" data-bs-toggle="dropdown" href="#">
           <i class="far fa-comments"></i>
-          <span class="badge bg-danger navbar-badge">3</span>
+          <span class="navbar-badge badge bg-danger">3</span>
         </a>
         <div class="dropdown-menu dropdown-menu-lg dropdown-menu-end">
           <a href="#" class="dropdown-item">
@@ -91,7 +91,7 @@
       <li class="nav-item dropdown">
         <a class="nav-link" data-bs-toggle="dropdown" href="#">
           <i class="far fa-bell"></i>
-          <span class="badge bg-warning navbar-badge">15</span>
+          <span class="navbar-badge badge bg-warning">15</span>
         </a>
         <div class="dropdown-menu dropdown-menu-lg dropdown-menu-end">
           <span class="dropdown-item dropdown-header">15 Notifications</span>

src/scss/_bootstrap-variables.scss

@@ -724,7 +724,7 @@ $table-border-color:          $border-color !default;
 
 $table-striped-order:         odd !default;
 
-$table-group-separator-color: currentColor !default;
+$table-group-separator-color: currentcolor !default;
 
 $table-caption-color:         $text-muted !default;
 

src/scss/_brand-container.scss

@@ -12,7 +12,7 @@
   overflow: hidden;
   font-size: $navbar-brand-font-size;
   white-space: nowrap;
-  transition: width $lte-transition-speed $lte-transition-fn;
+  @include transition(width $lte-transition-speed $lte-transition-fn);
 
   .brand-link {
     grid-area: brand-link;

src/scss/_cards.scss

@@ -378,12 +378,12 @@ html.maximized-card {
 
   // Todo list element
   > li {
-    @include border-radius(2px);
     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;

src/scss/_custom-utilities.scss

@@ -1,20 +1,25 @@
-// Utilities
+// Custom Utilities
 
-// util-opacity
+$utilities: () !default;
-$utilities: (
+// stylelint-disable-next-line scss/dollar-variable-default
-  "opacity": (
+$utilities: map-merge(
-    property: opacity,
+  (
-    values: (
+    // util-opacity
-      0: 0,
+    "opacity": (
-      20: .2,
+      property: opacity,
-      30: .3,
+      values: (
-      40: .4,
+        0: 0,
-      50: .5,
+        20: .2,
-      60: .6,
+        30: .3,
-      70: .7,
+        40: .4,
-      80: .8,
+        50: .5,
-      90: .9,
+        60: .6,
-      100: 1,
+        70: .7,
+        80: .8,
+        90: .9,
+        100: 1,
+      )
     )
-  )
+  ),
+  $utilities
 );

src/scss/_direct-chat.scss

@@ -48,7 +48,7 @@
 
 .direct-chat-messages,
 .direct-chat-contacts {
-  transition: transform .5s ease-in-out;
+  @include transition(transform .5s ease-in-out);
 }
 
 .direct-chat-text {

src/scss/_dropdown.scss

@@ -240,6 +240,6 @@
     height: $lte-sidebar-user-image-width;
     margin-top: -2px;
     // margin-right: 10px;
-    border-radius: 50%;
+    @include border-radius(50%);
   }
 }

src/scss/_info-box.scss

@@ -25,16 +25,13 @@
   }
 
   .info-box-icon {
-    @if $enable-rounded {
-      border-radius: $border-radius;
-    }
-
     display: flex;
     align-items: center;
     justify-content: center;
     width: 70px;
     font-size: 1.875rem;
     text-align: center;
+    @include border-radius($border-radius);
 
     > img {
       max-width: 100%;

src/scss/_layout-fixed.scss

@@ -16,7 +16,7 @@
     .content-wrapper,
     .main-footer {
       margin-left: $lte-sidebar-width;
-      transition: $lte-transition-speed $lte-transition-fn;
+      @include transition($lte-transition-speed $lte-transition-fn);
     }
 
     &.sidebar-collapse {

src/scss/_main-header.scss

@@ -27,7 +27,6 @@
   right: 5px;
   padding: 2px 4px;
   font-size: .6rem;
-  font-weight: 300;
 }
 
 .layout-navbar-fixed {

src/scss/_main-sidebar.scss

@@ -57,7 +57,7 @@
 
 .hold-transition {
   .main-sidebar {
-    transition: none !important;
+    @include transition(none !important);
     animation: none !important;
   }
 }

src/scss/_miscellaneous.scss

@@ -40,7 +40,7 @@
     padding-left: 0;
     border-right: 0;
     border-left: 0;
-    border-radius: 0;
+    @include border-radius(0);
   }
 }
 
@@ -296,8 +296,8 @@
       height: add(100%, (2 * $card-spacer-x));
       margin-top: -$card-spacer-x;
       margin-left: -$card-spacer-x;
-      border-top-left-radius: 0;
+      @include border-top-start-radius(0);
-      border-top-right-radius: 0;
+      @include border-top-end-radius(0);
       &.dark {
         color: $white;
       }
@@ -468,7 +468,7 @@ blockquote {
   padding: $lte-button-padding-y-xs * 2 $lte-button-padding-x-xs * 2;
   font-size: $lte-button-font-size-xs;
   font-weight: 400;
-  border-radius: $lte-button-border-radius-xs;
+  @include border-radius($lte-button-border-radius-xs);
 }
 
 .badge-btn.badge-pill {

src/scss/_small-box.scss

@@ -101,7 +101,7 @@
       top: 15px;
       right: 15px;
       font-size: 90px;
-      transition: transform $lte-transition-speed linear;
+      @include transition(transform $lte-transition-speed linear);
 
       &.inner-icon {
         top: 20px;
@@ -114,7 +114,7 @@
       top: 15px;
       right: 15px;
       font-size: 70px;
-      transition: transform $lte-transition-speed linear;
+      @include transition(transform $lte-transition-speed linear);
     }
   }
 

src/scss/_table.scss

@@ -84,7 +84,7 @@
   cursor: pointer;
 
   i.expandable-table-caret {
-    transition: transform $lte-transition-speed linear;
+    @include transition(transform $lte-transition-speed linear);
   }
   &[aria-expanded="true"] {
     td i.expandable-table-caret {

src/scss/_variables.scss

@@ -68,7 +68,7 @@ $lte-sidebar-custom-padding-y:    .5rem !default;
 $lte-sidebar-transition:          min-width $lte-transition-speed $lte-transition-fn,
   max-width $lte-transition-speed $lte-transition-fn,
   margin-left $lte-transition-speed $lte-transition-fn,
-  margin-right $lte-transition-speed $lte-transition-fn;
+  margin-right $lte-transition-speed $lte-transition-fn !default;
 
 // margin-top $lte-transition-speed $lte-transition-fn,
 // transform $lte-transition-speed $lte-transition-fn;
@@ -112,7 +112,7 @@ $lte-sidebar-user-image-width:    $lte-sidebar-nav-icon-width + ($nav-link-paddi
 
 // SIDEBAR HORIZONTAL
 // --------------------------------------------------------
-$lte-sidebar-horizontal-width:    100%;
+$lte-sidebar-horizontal-width:    100% !default;
 $lte-sidebar-horizontal-height:   80px !default;
 
 // CONTROL SIDEBAR
@@ -136,16 +136,16 @@ $lte-main-header-height-sm:            add($lte-main-header-height-sm-inner, $lt
 // --------------------------------------------------------
 
 // Dark sidebar
-$lte-header-dark-bg:              $dark;
+$lte-header-dark-bg:              $dark !default;
-$lte-header-dark-color:           $white;
+$lte-header-dark-color:           $white !default;
-$lte-header-mobile-dark-bg:       $dark;
+$lte-header-mobile-dark-bg:       $dark !default;
-$lte-header-mobile-dark-color:    $white;
+$lte-header-mobile-dark-color:    $white !default;
 
 // Light sidebar
-$lte-header-light-bg:             $white;
+$lte-header-light-bg:             $white !default;
-$lte-header-light-color:          $dark;
+$lte-header-light-color:          $dark !default;
-$lte-header-mobile-light-bg:      $light;
+$lte-header-mobile-light-bg:      $light !default;
-$lte-header-mobile-light-color:   $dark;
+$lte-header-mobile-light-color:   $dark !default;
 
 // Content padding
 $lte-content-padding-y:           0 !default;
@@ -174,8 +174,8 @@ $lte-main-footer-color:             tint-color($gray-700, 25%) !default;
 
 // BRAND LINK
 // --------------------------------------------------------
-$lte-brand-link-padding-y:        $navbar-brand-padding-y + $navbar-padding-y;
+$lte-brand-link-padding-y:        $navbar-brand-padding-y + $navbar-padding-y !default;
-$lte-brand-link-border-buttom:    1px;
+$lte-brand-link-border-buttom:    1px !default;
 
 
 // Cards

src/scss/bootstrap-dark/_placeholders.scss

@@ -1,5 +1,5 @@
 .placeholder {
-  background-color: currentColor;
+  background-color: currentcolor;
   opacity: $placeholder-opacity-max-alt;
 }
 

src/scss/bootstrap-dark/_reboot.scss

@@ -19,7 +19,7 @@ body {
 
 hr {
   color: $hr-color-alt; // 1
-  // background-color: currentColor;
+  // background-color: currentcolor;
   opacity: $hr-opacity-alt;
 }
 

src/scss/bootstrap-dark/_variables-alt.scss

@@ -413,7 +413,7 @@ $table-hover-bg-alt:              rgba($white-alt, $table-hover-bg-factor-alt) !
 $table-border-factor-alt:         .1 !default;
 $table-border-color-alt:          $border-color-alt !default;
 
-$table-group-separator-color-alt: currentColor !default;
+$table-group-separator-color-alt: currentcolor !default;
 
 $table-caption-color-alt:         $text-muted-alt !default;
 

src/scss/bootstrap-dark/helpers/_vr.scss

@@ -1,6 +1,6 @@
 // from commit [aee169d19](https://github.com/twbs/bootstrap/commit/aee169d19288d78330be2df0960ea8924353f84f)
 
 .vr {
-  background-color: currentColor;
+  background-color: currentcolor;
   opacity: $hr-opacity-alt;
 }

src/scss/pages/_login_and_register.scss

@@ -84,9 +84,9 @@
       color: #777;
       background-color: transparent;
       border-left: 0;
-      border-top-right-radius: $border-radius;
+      @include border-top-end-radius($border-radius);
-      border-bottom-right-radius: $border-radius;
+      @include border-bottom-end-radius($border-radius);
-      transition: $input-transition;
+      @include transition($input-transition);
     }
   }
 }