Merge pull request #2727 from XhmikosR/stylelint

Add stylelint support

.github/workflows/node-install.yml → .github/workflows/ci.yml

@@ -1,4 +1,4 @@
-name: Node.js Install Test
+name: CI
 
 on:
   pull_request:
@@ -26,9 +26,16 @@ jobs:
           - "windows-latest"
 
     steps:
-      - uses: actions/checkout@v2
+      - name: Clone repository
+        uses: actions/checkout@v2
+
       - name: Use Node.js ${{ matrix.node }}
         uses: actions/setup-node@v1
         with:
           node-version: ${{ matrix.node }}
-      - run: npm ci
+
+      - name: Install npm dependencies
+        run: npm ci
+
+      - name: Build files
+        run: npm run compile

.github/workflows/lint.yml

@@ -0,0 +1,39 @@
+name: Lint
+
+on:
+  pull_request:
+  release:
+    types:
+      - created
+
+env:
+  CI: true
+  NODE: 12.x
+
+jobs:
+  run:
+    runs-on: ubuntu-latest
+
+    steps:
+      - name: Clone repository
+        uses: actions/checkout@v2
+
+      - name: Set up Node.js
+        uses: actions/setup-node@v1
+        with:
+          node-version: "${{ env.NODE }}"
+
+      - name: Set up npm cache
+        uses: actions/cache@v2
+        with:
+          path: ~/.npm
+          key: ${{ runner.os }}-node-v${{ env.node }}-${{ hashFiles('package.json') }}-${{ hashFiles('package-lock.json') }}}
+          restore-keys: |
+            ${{ runner.OS }}-node-v${{ env.node }}-${{ hashFiles('package.json') }}-${{ hashFiles('package-lock.json') }}
+            ${{ runner.OS }}-node-v${{ env.node }}-
+
+      - name: Install npm dependencies
+        run: npm ci
+
+      - name: Run lint
+        run: npm run lint

.gitignore

@@ -35,3 +35,4 @@ docs_html/
 TODO
 test.html
 ad.js
+/.cache/

.stylelintignore

@@ -0,0 +1,4 @@
+**/*.min.css
+**/dist/
+**/docs_html/
+**/plugins/

.stylelintrc

@@ -0,0 +1,16 @@
+{
+  "extends": [
+    "stylelint-config-twbs-bootstrap/scss"
+  ],
+  "rules": {
+    "declaration-no-important": null,
+    "order/properties-order": null,
+    "selector-max-class": null,
+    "selector-max-combinators": null,
+    "selector-max-compound-selectors": null,
+    "selector-max-id": null,
+    "selector-max-specificity": null,
+    "selector-max-type": null,
+    "selector-no-qualifying-type": null
+  }
+}

build/scss/.csslintrc

@@ -1,23 +0,0 @@
-{
-  "adjoining-classes": false,
-  "box-sizing": false,
-  "box-model": false,
-  "compatible-vendor-prefixes": false,
-  "floats": false,
-  "font-sizes": false,
-  "gradients": false,
-  "important": false,
-  "known-properties": false,
-  "outline-none": false,
-  "qualified-headings": false,
-  "regex-selectors": false,
-  "shorthand": false,
-  "text-indent": false,
-  "unique-headings": false,
-  "universal-selector": false,
-  "unqualified-attributes": false,
-  "ids": false,
-  "fallback-colors": false,
-  "vendor-prefix": false,
-  "import": false
-}

build/scss/AdminLTE-components.scss

@@ -7,14 +7,14 @@
  */
 // Bootstrap
 // ---------------------------------------------------
-@import '~bootstrap/scss/functions';
-@import 'bootstrap-variables';
-@import '~bootstrap/scss/mixins';
+@import "~bootstrap/scss/functions";
+@import "bootstrap-variables";
+@import "~bootstrap/scss/mixins";
 // @import '~bootstrap/scss/bootstrap';
 
 // Variables and Mixins
 // ---------------------------------------------------
-@import 'variables';
-@import 'mixins';
+@import "variables";
+@import "mixins";
 
-@import 'parts/components';
+@import "parts/components";

build/scss/AdminLTE-core.scss

@@ -7,14 +7,14 @@
  */
 // Bootstrap
 // ---------------------------------------------------
-@import '~bootstrap/scss/functions';
-@import 'bootstrap-variables';
-@import '~bootstrap/scss/bootstrap';
+@import "~bootstrap/scss/functions";
+@import "bootstrap-variables";
+@import "~bootstrap/scss/bootstrap";
 
 // Variables and Mixins
 // ---------------------------------------------------
-@import 'variables';
-@import 'mixins';
+@import "variables";
+@import "mixins";
 
-@import 'parts/core';
-@import 'parts/miscellaneous';
+@import "parts/core";
+@import "parts/miscellaneous";

build/scss/AdminLTE-extra-components.scss

@@ -7,14 +7,14 @@
  */
 // Bootstrap
 // ---------------------------------------------------
-@import '~bootstrap/scss/functions';
-@import 'bootstrap-variables';
-@import '~bootstrap/scss/mixins';
+@import "~bootstrap/scss/functions";
+@import "bootstrap-variables";
+@import "~bootstrap/scss/mixins";
 // @import '~bootstrap/scss/bootstrap';
 
 // Variables and Mixins
 // ---------------------------------------------------
-@import 'variables';
-@import 'mixins';
+@import "variables";
+@import "mixins";
 
-@import 'parts/extra-components';
+@import "parts/extra-components";

build/scss/AdminLTE-pages.scss

@@ -7,14 +7,14 @@
  */
 // Bootstrap
 // ---------------------------------------------------
-@import '~bootstrap/scss/functions';
-@import 'bootstrap-variables';
-@import '~bootstrap/scss/mixins';
-@import '~bootstrap/scss/close';
+@import "~bootstrap/scss/functions";
+@import "bootstrap-variables";
+@import "~bootstrap/scss/mixins";
+@import "~bootstrap/scss/close";
 
 // Variables and Mixins
 // ---------------------------------------------------
-@import 'variables';
-@import 'mixins';
+@import "variables";
+@import "mixins";
 
-@import 'parts/pages';
+@import "parts/pages";

build/scss/AdminLTE-plugins.scss

@@ -7,14 +7,14 @@
  */
 // Bootstrap
 // ---------------------------------------------------
-@import '~bootstrap/scss/functions';
-@import 'bootstrap-variables';
-@import '~bootstrap/scss/mixins';
+@import "~bootstrap/scss/functions";
+@import "bootstrap-variables";
+@import "~bootstrap/scss/mixins";
 // @import '~bootstrap/scss/bootstrap';
 
 // Variables and Mixins
 // ---------------------------------------------------
-@import 'variables';
-@import 'mixins';
+@import "variables";
+@import "mixins";
 
-@import 'parts/plugins';
+@import "parts/plugins";

build/scss/AdminLTE-raw.scss

@@ -15,13 +15,13 @@
 //
 // Variables and Mixins
 // ---------------------------------------------------
-@import 'bootstrap-variables';
-@import 'variables';
-@import 'mixins';
+@import "bootstrap-variables";
+@import "variables";
+@import "mixins";
 
-@import 'parts/core';
-@import 'parts/components';
-@import 'parts/extra-components';
-@import 'parts/pages';
-@import 'parts/plugins';
-@import 'parts/miscellaneous';
+@import "parts/core";
+@import "parts/components";
+@import "parts/extra-components";
+@import "parts/pages";
+@import "parts/plugins";
+@import "parts/miscellaneous";

build/scss/AdminLTE.scss

@@ -6,19 +6,19 @@
  */
 // Bootstrap
 // ---------------------------------------------------
-@import '~bootstrap/scss/functions';
-@import 'bootstrap-variables';
-@import '~bootstrap/scss/bootstrap';
+@import "~bootstrap/scss/functions";
+@import "bootstrap-variables";
+@import "~bootstrap/scss/bootstrap";
 
 // Variables and Mixins
 // ---------------------------------------------------
-@import 'variables';
-@import 'mixins';
+@import "variables";
+@import "mixins";
 
-@import 'parts/core';
-@import 'parts/components';
-@import 'parts/extra-components';
-@import 'parts/pages';
-@import 'parts/plugins';
-@import 'parts/miscellaneous';
+@import "parts/core";
+@import "parts/components";
+@import "parts/extra-components";
+@import "parts/pages";
+@import "parts/plugins";
+@import "parts/miscellaneous";
 

build/scss/_bootstrap-variables.scss

@@ -9,7 +9,7 @@
 //
 
 // stylelint-disable
-$white:    #ffffff !default;
+$white:    #fff !default;
 $gray-100: #f8f9fa !default;
 $gray-200: #e9ecef !default;
 $gray-300: #dee2e6 !default;
@@ -23,15 +23,15 @@ $black:    #000 !default;
 
 $grays: () !default;
 $grays: map-merge((
-        "100": $gray-100,
-        "200": $gray-200,
-        "300": $gray-300,
-        "400": $gray-400,
-        "500": $gray-500,
-        "600": $gray-600,
-        "700": $gray-700,
-        "800": $gray-800,
-        "900": $gray-900
+  "100": $gray-100,
+  "200": $gray-200,
+  "300": $gray-300,
+  "400": $gray-400,
+  "500": $gray-500,
+  "600": $gray-600,
+  "700": $gray-700,
+  "800": $gray-800,
+  "900": $gray-900
 ), $grays);
 
 $blue:    #007bff !default;
@@ -47,19 +47,19 @@ $cyan:    #17a2b8 !default;
 
 $colors: () !default;
 $colors: map-merge((
-        "blue":       $blue,
-        "indigo":     $indigo,
-        "purple":     $purple,
-        "pink":       $pink,
-        "red":        $red,
-        "orange":     $orange,
-        "yellow":     $yellow,
-        "green":      $green,
-        "teal":       $teal,
-        "cyan":       $cyan,
-        "white":      $white,
-        "gray":       $gray-600,
-        "gray-dark":  $gray-800
+  "blue":       $blue,
+  "indigo":     $indigo,
+  "purple":     $purple,
+  "pink":       $pink,
+  "red":        $red,
+  "orange":     $orange,
+  "yellow":     $yellow,
+  "green":      $green,
+  "teal":       $teal,
+  "cyan":       $cyan,
+  "white":      $white,
+  "gray":       $gray-600,
+  "gray-dark":  $gray-800
 ), $colors);
 
 $primary:       $blue !default;
@@ -73,14 +73,14 @@ $dark:          $gray-800 !default;
 
 $theme-colors: () !default;
 $theme-colors: map-merge((
-        "primary":    $primary,
-        "secondary":  $secondary,
-        "success":    $success,
-        "info":       $info,
-        "warning":    $warning,
-        "danger":     $danger,
-        "light":      $light,
-        "dark":       $dark
+  "primary":    $primary,
+  "secondary":  $secondary,
+  "success":    $success,
+  "info":       $info,
+  "warning":    $warning,
+  "danger":     $danger,
+  "light":      $light,
+  "dark":       $dark
 ), $theme-colors);
 // stylelint-enable
 
@@ -91,7 +91,7 @@ $theme-color-interval:      8% !default;
 $yiq-contrasted-threshold: 150 !default;
 
 // Customize the light and dark text colors for use in our YIQ color contrast function.
-$yiq-text-dark: #1F2D3D !default;
+$yiq-text-dark: #1f2d3d !default;
 $yiq-text-light: $white !default;
 
 // Options
@@ -122,21 +122,21 @@ $enable-deprecation-messages:                 true !default;
 $spacer: 1rem !default;
 $spacers: () !default;
 $spacers: map-merge((
-        0: 0,
-        1: ($spacer * .25),
-        2: ($spacer * .5),
-        3: $spacer,
-        4: ($spacer * 1.5),
-        5: ($spacer * 3)
+  0: 0,
+  1: ($spacer * .25),
+  2: ($spacer * .5),
+  3: $spacer,
+  4: ($spacer * 1.5),
+  5: ($spacer * 3)
 ), $spacers);
 
 // This variable affects the `.h-*` and `.w-*` classes.
 $sizes: () !default;
 $sizes: map-merge((
-        25: 25%,
-        50: 50%,
-        75: 75%,
-        100: 100%
+  25: 25%,
+  50: 50%,
+  75: 75%,
+  100: 100%
 ), $sizes);
 // stylelint-enable
 
@@ -169,11 +169,11 @@ $paragraph-margin-bottom:   1rem !default;
 // adapting to different screen sizes, for use in media queries.
 
 $grid-breakpoints: (
-        xs: 0,
-        sm: 576px,
-        md: 768px,
-        lg: 992px,
-        xl: 1200px
+  xs: 0,
+  sm: 576px,
+  md: 768px,
+  lg: 992px,
+  xl: 1200px
 ) !default;
 
 @include _assert-ascending($grid-breakpoints, "$grid-breakpoints");
@@ -185,10 +185,10 @@ $grid-breakpoints: (
 // Define the maximum width of `.container` for different screen sizes.
 
 $container-max-widths: (
-        sm: 540px,
-        md: 720px,
-        lg: 960px,
-        xl: 1140px
+  sm: 540px,
+  md: 720px,
+  lg: 960px,
+  xl: 1140px
 ) !default;
 
 @include _assert-ascending($container-max-widths, "$container-max-widths");
@@ -521,7 +521,7 @@ $custom-file-box-shadow:            $custom-select-focus-box-shadow !default;
 $custom-file-button-color:          $custom-file-color !default;
 $custom-file-button-bg:             $input-group-addon-bg !default;
 $custom-file-text: (
-        en: "Browse"
+  en: "Browse"
 ) !default;
 
 $custom-range-thumb-focus-box-shadow:        0 0 0 1px $body-bg, $input-btn-focus-box-shadow !default;

build/scss/_brand.scss

@@ -20,12 +20,12 @@
     font-size: inherit;
   }
 
-  [class*='sidebar-dark'] & {
+  [class*="sidebar-dark"] & {
     border-bottom: 1px solid lighten($dark, 10%);
     color: rgba($white, .8);
   }
 
-  [class*='sidebar-light'] & {
+  [class*="sidebar-light"] & {
     border-bottom: 1px solid $gray-300;
     color: rgba($black, .8);
   }

build/scss/_buttons.scss

@@ -20,7 +20,7 @@
     overflow: hidden;
     position: relative;
 
-    > input[type='file'] {
+    > input[type="file"] {
       background: $white;
       cursor: inherit;
       display: block;
@@ -88,7 +88,7 @@
 
   &:active,
   &:focus {
-    @include box-shadow(inset 0 3px 5px rgba($black, 0.125));
+    @include box-shadow(inset 0 3px 5px rgba($black, .125));
   }
 
   // The badge

build/scss/_callout.scss

@@ -34,18 +34,18 @@
 
   // Themes for different contexts
   &.callout-danger {
-    border-left-color: darken(theme-color('danger'), 10%);
+    border-left-color: darken(theme-color("danger"), 10%);
   }
 
   &.callout-warning {
-    border-left-color: darken(theme-color('warning'), 10%);
+    border-left-color: darken(theme-color("warning"), 10%);
   }
 
   &.callout-info {
-    border-left-color: darken(theme-color('info'), 10%);
+    border-left-color: darken(theme-color("info"), 10%);
   }
 
   &.callout-success {
-    border-left-color: darken(theme-color('success'), 10%);
+    border-left-color: darken(theme-color("success"), 10%);
   }
 }

build/scss/_cards.scss

@@ -40,7 +40,7 @@
       display: block !important;
     }
 
-    [data-widget='collapse'] {
+    [data-widget="collapse"] {
       display: none;
     }
 
@@ -202,7 +202,7 @@ html.maximized-card {
 .card-header,
 .card-body,
 .card-footer {
-  @include clearfix;
+  @include clearfix ();
 }
 
 // Box header
@@ -231,7 +231,7 @@ html.maximized-card {
       margin-top: -$card-spacer-y / 2.5;
     }
 
-    [data-toggle='tooltip'] {
+    [data-toggle="tooltip"] {
       position: relative;
     }
   }
@@ -310,7 +310,7 @@ html.maximized-card {
 }
 
 .chart-legend {
-  @include list-unstyled;
+  @include list-unstyled ();
   margin: 10px 0;
 
   > li {
@@ -326,7 +326,7 @@ html.maximized-card {
   background: $gray-100;
 
   .card-comment {
-    @include clearfix;
+    @include clearfix ();
     border-bottom: 1px solid $gray-200;
     padding: 8px 0;
 
@@ -385,7 +385,7 @@ html.maximized-card {
       margin-bottom: 0;
     }
 
-    > input[type='checkbox'] {
+    > input[type="checkbox"] {
       margin: 0 10px 0 5px;
     }
 
@@ -403,7 +403,7 @@ html.maximized-card {
 
     // Tools and options box
     .tools {
-      color: theme-color('danger');
+      color: theme-color("danger");
       display: none;
       float: right;
 

build/scss/_colors.scss

@@ -43,7 +43,7 @@
 }
 
 // Backgrund Color Disabled
-[class^='bg-'].disabled {
+[class^="bg-"].disabled {
   opacity: .65;
 }
 

build/scss/_control-sidebar.scss

@@ -1,7 +1,7 @@
 //
 // Component: Control Sidebar
 //
- 
+
 html.control-sidebar-animate {
   overflow-x: hidden;
 }
@@ -11,7 +11,7 @@ html.control-sidebar-animate {
   position: absolute;
   top: $main-header-height;
   z-index: $zindex-control-sidebar;
-  
+
   &,
   &::before {
     bottom: $main-footer-height;
@@ -22,7 +22,7 @@ html.control-sidebar-animate {
   }
 
   &::before {
-    content: '';
+    content: "";
     display: block;
     position: fixed;
     top: 0;
@@ -46,11 +46,11 @@ body.text-sm {
 }
 
 .control-sidebar-push-slide {
-    .content-wrapper,
-    .main-footer {
-      @include transition(margin-right $transition-speed $transition-fn);
-    }
+  .content-wrapper,
+  .main-footer {
+    @include transition(margin-right $transition-speed $transition-fn);
   }
+}
 
 // Control sidebar open state
 .control-sidebar-open {
@@ -95,17 +95,14 @@ body.text-sm {
 
 // Dark skin
 .control-sidebar-dark {
+  background: $sidebar-dark-bg;
+
   &,
   a,
   .nav-link {
     color: $sidebar-dark-color;
   }
 
-  //  Background
-  & {
-    background: $sidebar-dark-bg;
-  }
-
   a:hover {
     color: $sidebar-dark-hover-color;
   }
@@ -171,8 +168,6 @@ body.text-sm {
   color: lighten($sidebar-light-color, 10%);
 
   //  Background
-  & {
-    background: $sidebar-light-bg;
-    border-left: $main-header-bottom-border;
-  }
+  background: $sidebar-light-bg;
+  border-left: $main-header-bottom-border;
 }

build/scss/_direct-chat.scss

@@ -1,7 +1,7 @@
 //
 // Component: Direct Chat
 //
- 
+
 .direct-chat {
   .card-body {
     overflow-x: hidden;
@@ -42,7 +42,7 @@
 }
 
 .direct-chat-msg {
-  @include clearfix;
+  @include clearfix ();
   margin-bottom: 10px;
 }
 
@@ -68,7 +68,7 @@
   &::before {
     border: solid transparent;
     border-right-color: $direct-chat-default-msg-border-color;
-    content: ' ';
+    content: " ";
     height: 0;
     pointer-events: none;
     position: absolute;
@@ -163,11 +163,11 @@
 
 //Contacts list -- for displaying contacts in direct chat contacts pane
 .contacts-list {
-  @include list-unstyled;
+  @include list-unstyled ();
 
   > li {
-    @include clearfix;
-    border-bottom: 1px solid rgba($black, 0.2);
+    @include clearfix ();
+    border-bottom: 1px solid rgba($black, .2);
     margin: 0;
     padding: 10px;
 
@@ -203,7 +203,7 @@
 
 .contacts-list-date {
   color: $gray-400;
-  font-weight: normal;
+  font-weight: 400;
 }
 
 .contacts-list-msg {

build/scss/_dropdown.scss

@@ -18,7 +18,7 @@
   }
 
   .dropdown-toggle::after {
-    vertical-align: .2rem
+    vertical-align: .2rem;
   }
 }
 
@@ -57,8 +57,8 @@
 .dropdown-submenu {
   position: relative;
 
-  & > a:after {
-    @include caret-right;
+  & > a::after {
+    @include caret-right ();
     float: right;
     margin-left: .5rem;
     margin-top: .5rem;
@@ -66,8 +66,8 @@
 
   & > .dropdown-menu {
     left: 100%;
-    margin-left: 0px;
-    margin-top: 0px;
+    margin-left: 0;
+    margin-top: 0;
     top: 0;
   }
 }
@@ -85,7 +85,6 @@
 }
 
 
-
 // Dropdown Sizes
 .dropdown-menu-xl {
   max-width: 420px;
@@ -115,7 +114,7 @@
   text-align: center;
 }
 
-// Add fade animation to dropdown menus by appending 
+// Add fade animation to dropdown menus by appending
 // the class .animated-dropdown-menu to the .dropdown-menu ul (or ol)
 .open:not(.dropup) > .animated-dropdown-menu {
   @include animation(flipInX .7s both);
@@ -178,8 +177,8 @@
 
 // User Menu
 .navbar-nav > .user-menu {
-  > .nav-link:after {
-    content:none;
+  > .nav-link::after {
+    content: none;
   }
 
   > .dropdown-menu {
@@ -205,7 +204,7 @@
         width: 90px;
         border: 3px solid;
         border-color: transparent;
-        border-color: rgba(255, 255, 255, 0.2);
+        border-color: rgba(255, 255, 255, .2);
       }
 
       > p {
@@ -223,7 +222,7 @@
 
     // Menu Body
     > .user-body {
-      @include clearfix;
+      @include clearfix ();
       border-bottom: 1px solid $gray-700;
       border-top: 1px solid $gray-300;
       padding: 15px;
@@ -238,7 +237,7 @@
 
     // Menu Footer
     > .user-footer {
-      @include clearfix;
+      @include clearfix ();
       background-color: $gray-100;
       padding: 10px;
 

build/scss/_forms.scss

@@ -1,7 +1,7 @@
 //
 // Component: Forms
 //
- 
+
 .form-group {
   &.has-icon {
     position: relative;
@@ -46,7 +46,7 @@
   }
 }
 
-.input-lg  + .form-control-feedback,
+.input-lg + .form-control-feedback,
 .input-group-lg + .form-control-feedback {
   &.fa,
   &.fas,
@@ -71,7 +71,7 @@
   }
 }
 
-.input-sm  + .form-control-feedback,
+.input-sm + .form-control-feedback,
 .input-group-sm + .form-control-feedback {
   &.fa,
   &.fas,
@@ -102,7 +102,7 @@ label:not(.form-check-label):not(.custom-file-label) {
 
 .warning-feedback {
   @include font-size($form-feedback-font-size);
-  color: theme-color('warning');
+  color: theme-color("warning");
   display: none;
   margin-top: $form-feedback-margin-top;
   width: 100%;
@@ -111,8 +111,8 @@ label:not(.form-check-label):not(.custom-file-label) {
 .warning-tooltip {
   @include border-radius($form-feedback-tooltip-border-radius);
   @include font-size($form-feedback-tooltip-font-size);
-  background-color: rgba(theme-color('warning'), $form-feedback-tooltip-opacity);
-  color: color-yiq(theme-color('warning'));
+  background-color: rgba(theme-color("warning"), $form-feedback-tooltip-opacity);
+  color: color-yiq(theme-color("warning"));
   display: none;
   line-height: $form-feedback-tooltip-line-height;
   margin-top: .1rem;
@@ -125,7 +125,7 @@ label:not(.form-check-label):not(.custom-file-label) {
 
 .form-control {
   &.is-warning {
-    border-color: theme-color('warning');
+    border-color: theme-color("warning");
 
     @if $enable-validation-icons {
       // padding-right: $input-height-inner;
@@ -136,8 +136,8 @@ label:not(.form-check-label):not(.custom-file-label) {
     }
 
     &:focus {
-      border-color: theme-color('warning');
-      box-shadow: 0 0 0 $input-focus-width rgba(theme-color('warning'), .25);
+      border-color: theme-color("warning");
+      box-shadow: 0 0 0 $input-focus-width rgba(theme-color("warning"), .25);
     }
 
     ~ .warning-feedback,
@@ -159,7 +159,7 @@ textarea.form-control {
 
 .custom-select {
   &.is-warning {
-    border-color: theme-color('warning');
+    border-color: theme-color("warning");
 
     @if $enable-validation-icons {
       // padding-right: $custom-select-feedback-icon-padding-right;
@@ -167,8 +167,8 @@ textarea.form-control {
     }
 
     &:focus {
-      border-color: theme-color('warning');
-      box-shadow: 0 0 0 $input-focus-width rgba(theme-color('warning'), .25);
+      border-color: theme-color("warning");
+      box-shadow: 0 0 0 $input-focus-width rgba(theme-color("warning"), .25);
     }
 
     ~ .warning-feedback,
@@ -191,7 +191,7 @@ textarea.form-control {
 .form-check-input {
   &.is-warning {
     ~ .form-check-label {
-      color: theme-color('warning');
+      color: theme-color("warning");
     }
 
     ~ .warning-feedback,
@@ -203,10 +203,10 @@ textarea.form-control {
 
 .custom-control-input.is-warning {
   ~ .custom-control-label {
-    color: theme-color('warning');
+    color: theme-color("warning");
 
     &::before {
-      border-color: theme-color('warning');
+      border-color: theme-color("warning");
     }
   }
 
@@ -217,18 +217,18 @@ textarea.form-control {
 
   &:checked {
     ~ .custom-control-label::before {
-      @include gradient-bg(lighten(theme-color('warning'), 10%));
-      border-color: lighten(theme-color('warning'), 10%);
+      @include gradient-bg(lighten(theme-color("warning"), 10%));
+      border-color: lighten(theme-color("warning"), 10%);
     }
   }
 
   &:focus {
     ~ .custom-control-label::before {
-      box-shadow: 0 0 0 $input-focus-width rgba(theme-color('warning'), .25);
+      box-shadow: 0 0 0 $input-focus-width rgba(theme-color("warning"), .25);
     }
 
     &:not(:checked) ~ .custom-control-label::before {
-      border-color: theme-color('warning');
+      border-color: theme-color("warning");
     }
   }
 }
@@ -237,7 +237,7 @@ textarea.form-control {
 .custom-file-input {
   &.is-warning {
     ~ .custom-file-label {
-      border-color: theme-color('warning');
+      border-color: theme-color("warning");
     }
 
     ~ .warning-feedback,
@@ -247,8 +247,8 @@ textarea.form-control {
 
     &:focus {
       ~ .custom-file-label {
-        border-color: theme-color('warning');
-        box-shadow: 0 0 0 $input-focus-width rgba(theme-color('warning'), .25);
+        border-color: theme-color("warning");
+        box-shadow: 0 0 0 $input-focus-width rgba(theme-color("warning"), .25);
       }
     }
   }

build/scss/_info-box.scss

@@ -1,7 +1,7 @@
 //
 // Component: Info Box
 //
- 
+
 .info-box {
   @include box-shadow($card-shadow);
   @include border-radius($border-radius);

build/scss/_layout.scss

@@ -347,9 +347,7 @@ body,
     .control-sidebar {
       bottom: 0;
     }
-  }
 
-  .layout-footer-fixed & {
     .main-footer {
       bottom: 0;
       left: 0;
@@ -376,9 +374,7 @@ body,
         .control-sidebar {
           bottom: 0;
         }
-      }
 
-      .layout#{$infix}-footer-fixed & {
         .main-footer {
           bottom: 0;
           left: 0;
@@ -403,7 +399,7 @@ body,
   .layout-top-nav & {
     margin-left: 0;
 
-    .main-header {    
+    .main-header {
       .brand-image {
         margin-top: -.5rem;
         margin-right: .2rem;
@@ -617,7 +613,6 @@ body:not(.sidebar-mini-md) {
 }
 
 
-
 .hold-transition {
   .content-wrapper,
   .main-header,

build/scss/_main-header.scss

@@ -1,7 +1,7 @@
 //
 // Component: Main Header
 //
- 
+
 .main-header {
   border-bottom: $main-header-bottom-border;
   z-index: $zindex-main-header;
@@ -34,7 +34,7 @@
       margin: 0;
     }
 
-    &[class*='-right'] {
+    &[class*="-right"] {
       .dropdown-menu {
         left: auto;
         margin-top: -3px;

build/scss/_main-sidebar.scss

@@ -30,11 +30,11 @@
 .user-panel {
   position: relative;
 
-  [class*='sidebar-dark'] & {
+  [class*="sidebar-dark"] & {
     border-bottom: 1px solid lighten($dark, 12%);
   }
 
-  [class*='sidebar-light'] & {
+  [class*="sidebar-light"] & {
     border-bottom: 1px solid $gray-300;
   }
 
@@ -158,12 +158,12 @@
     }
 
     &.nav-legacy {
-      .nav-treeview {      
+      .nav-treeview {
         .nav-treeview {
           padding-left: 2rem;
           margin-left: -1rem;
 
-          .text-sm & {          
+          .text-sm & {
             padding-left: 1rem;
             margin-left: -.5rem;
           }
@@ -197,7 +197,7 @@
     }
   }
 
-  background-color: rgba($black, 0.1);
+  background-color: rgba($black, .1);
   bottom: 0;
   display: none;
   left: 0;
@@ -207,7 +207,7 @@
   z-index: $zindex-main-sidebar - 1;
 }
 
-[class*='sidebar-light-'] {
+[class*="sidebar-light-"] {
   // Sidebar background color
   background-color: $sidebar-light-bg;
 
@@ -330,7 +330,7 @@
   }
 }
 
-[class*='sidebar-dark-'] {
+[class*="sidebar-dark-"] {
   // Sidebar background color
   background-color: $sidebar-dark-bg;
 
@@ -461,14 +461,14 @@
 @each $name, $color in $theme-colors {
   .sidebar-dark-#{$name},
   .sidebar-light-#{$name} {
-    @include sidebar-color($color)
+    @include sidebar-color($color);
   }
 }
 
 @each $name, $color in $colors {
   .sidebar-dark-#{$name},
   .sidebar-light-#{$name} {
-    @include sidebar-color($color)
+    @include sidebar-color($color);
   }
 }
 
@@ -478,7 +478,7 @@
 .sidebar-mini-md .main-sidebar:not(.sidebar-no-expand):hover,
 .sidebar-mini .main-sidebar.sidebar-focused,
 .sidebar-mini-md .main-sidebar.sidebar-focused {
- .nav-compact.nav-sidebar.nav-child-indent:not(.nav-flat) .nav-treeview {
+  .nav-compact.nav-sidebar.nav-child-indent:not(.nav-flat) .nav-treeview {
     padding-left: 1rem;
     margin-left: -.5rem;
   }
@@ -486,7 +486,7 @@
 
 // Nav Flat
 .nav-flat {
-  margin: (-$sidebar-padding-x/2) (-$sidebar-padding-x) 0;
+  margin: (-$sidebar-padding-x / 2) (-$sidebar-padding-x) 0;
 
   .nav-item {
     > .nav-link {
@@ -500,7 +500,7 @@
   }
 
   &:not(.nav-child-indent) {
-    .nav-treeview {  
+    .nav-treeview {
       .nav-item {
         > .nav-link {
           > .nav-icon {
@@ -649,7 +649,7 @@
 }
 
 .nav-legacy {
-  margin: (-$sidebar-padding-x/2) (-$sidebar-padding-x) 0;
+  margin: (-$sidebar-padding-x / 2) (-$sidebar-padding-x) 0;
 
   &.nav-sidebar .nav-item {
     > .nav-link {
@@ -675,7 +675,7 @@
 
         > .nav-icon {
           margin-left: calc(.55rem - 3px);
-          
+
           .text-sm & {
             margin-left: calc(.75rem - 3px);
           }
@@ -746,15 +746,15 @@
       }
     }
 
-    &.nav-child-indent {   
+    &.nav-child-indent {
       .nav-treeview {
         .nav-treeview {
           padding-left: 0;
           margin-left: 0;
         }
       }
-      }
     }
+  }
 
 
   .sidebar-mini.sidebar-collapse.text-sm &,
@@ -772,7 +772,7 @@
     }
   }
 
-  [class*='sidebar-dark'] & {
+  [class*="sidebar-dark"] & {
     &.nav-sidebar > .nav-item {
       .nav-treeview,
       > .nav-treeview {
@@ -794,7 +794,7 @@
     }
   }
 
-  [class*='sidebar-light'] & {
+  [class*="sidebar-light"] & {
     &.nav-sidebar > .nav-item {
       .nav-treeview,
       > .nav-treeview {
@@ -875,7 +875,7 @@
 }
 
 // Sidebar Form Control
-[class*='sidebar-dark'] {
+[class*="sidebar-dark"] {
   .form-control-sidebar,
   .btn-sidebar {
     background: lighten($sidebar-dark-bg, 5%);
@@ -897,7 +897,7 @@
   }
 }
 
-[class*='sidebar-light'] {
+[class*="sidebar-light"] {
   .form-control-sidebar,
   .btn-sidebar {
     background: darken($sidebar-light-bg, 5%);
@@ -932,7 +932,7 @@
   &.sidebar-collapse .main-sidebar {
     margin-left: 0;
   }
-  .content-wrapper, 
+  .content-wrapper,
   .main-header,
   .main-footer {
     z-index: 9999;

build/scss/_miscellaneous.scss

@@ -47,7 +47,7 @@
 .list-header {
   color: $gray-600;
   font-size: 15px;
-  font-weight: bold;
+  font-weight: 700;
   padding: 10px 4px;
 }
 
@@ -162,7 +162,7 @@
 
 // Rounded and Circle Images
 .img-rounded {
-  @include border-radius($border-radius)
+  @include border-radius($border-radius);
 }
 
 .img-circle {
@@ -259,7 +259,7 @@
   .overlay {
     @include border-radius($border-radius);
     align-items: center;
-    background: rgba($white, 0.7);
+    background: rgba($white, .7);
     display: flex;
     justify-content: center;
     z-index: 50;
@@ -274,7 +274,7 @@
     }
 
     &.dark {
-      background: rgba($black, 0.5);
+      background: rgba($black, .5);
 
       > .fa,
       > .fas,
@@ -360,7 +360,7 @@
       border-right: $ribbon-border-size solid transparent;
       border-top: $ribbon-border-size solid #9e9e9e;
       bottom: -$ribbon-border-size;
-      content: '';
+      content: "";
       position: absolute;
     }
 
@@ -396,7 +396,7 @@ blockquote {
   background: $white;
   border-left: .7rem solid $primary;
   margin: 1.5em .7rem;
-  padding: 0.5em .7rem;
+  padding: .5em .7rem;
 
   .box & {
     background: $gray-200;
@@ -471,7 +471,7 @@ blockquote {
   border-radius: $button-border-radius-xs;
   font-size: $button-font-size-xs;
   font-weight: 400;
-  padding: $button-padding-y-xs*2 $button-padding-x-xs*2;
+  padding: $button-padding-y-xs * 2 $button-padding-x-xs * 2;
 }
 
 .badge-btn.badge-pill {

build/scss/_mixins.scss

@@ -2,12 +2,12 @@
 // General: Mixins
 //
 
-@import 'mixins/cards';
-@import 'mixins/sidebar';
-@import 'mixins/navbar';
-@import 'mixins/accent';
-@import 'mixins/custom-forms';
-@import 'mixins/backgrounds';
-@import 'mixins/direct-chat';
-@import 'mixins/toasts';
-@import 'mixins/miscellaneous';
+@import "mixins/cards";
+@import "mixins/sidebar";
+@import "mixins/navbar";
+@import "mixins/accent";
+@import "mixins/custom-forms";
+@import "mixins/backgrounds";
+@import "mixins/direct-chat";
+@import "mixins/toasts";
+@import "mixins/miscellaneous";

build/scss/_modals.scss

@@ -34,7 +34,7 @@
   &.bg-success, {
     .close {
       color: $white;
-      text-shadow: 0 1px 0 #000;
+      text-shadow: 0 1px 0 $black;
     }
   }
 }

build/scss/_navs.scss

@@ -7,7 +7,7 @@
     color: $gray-600;
 
     &:not(.active):hover {
-      color: theme-color('primary');
+      color: theme-color("primary");
     }
   }
 
@@ -30,7 +30,7 @@
     border-top-right-radius: 0;
     margin-right: -$nav-tabs-border-width;
 
-    @include hover-focus {
+    @include hover-focus () {
       border-color: $gray-200 transparent $gray-200 $gray-200;
     }
   }
@@ -51,7 +51,7 @@
       border-top-right-radius: $nav-tabs-border-radius;
       margin-left: -$nav-tabs-border-width;
 
-      @include hover-focus {
+      @include hover-focus () {
         border-color: $gray-200 $gray-200 $gray-200 transparent;
       }
     }

build/scss/_products.scss

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

build/scss/_sidebar-mini.scss

@@ -33,7 +33,7 @@
 .brand-link {
   &.logo-switch {
     &::before {
-      content: '\00a0';
+      content: "\00a0";
     }
   }
 }
@@ -41,7 +41,7 @@
 // Add sidebar-mini class to the body tag to activate this feature
 .sidebar-mini {
   @include media-breakpoint-up(lg) {
-    @include sidebar-mini-breakpoint;
+    @include sidebar-mini-breakpoint ();
   }
 }
 @include media-breakpoint-down(md) {
@@ -52,7 +52,7 @@
 
 .sidebar-mini-md {
   @include media-breakpoint-up(md) {
-    @include sidebar-mini-breakpoint;
+    @include sidebar-mini-breakpoint ();
   }
 }
 @include media-breakpoint-down(sm) {
@@ -170,5 +170,5 @@
 .main-sidebar .logo-xs,
 .main-sidebar .logo-xl,
 .sidebar .user-panel .info {
-  @include transition(margin-left $transition-speed linear, opacity $transition-speed ease, visibility $transition-speed ease)
+  @include transition(margin-left $transition-speed linear, opacity $transition-speed ease, visibility $transition-speed ease);
 }

build/scss/_small-box.scss

@@ -16,8 +16,8 @@
   }
 
   > .small-box-footer {
-    background: rgba($black, 0.1);
-    color: rgba($white, 0.8);
+    background: rgba($black, .1);
+    color: rgba($white, .8);
     display: block;
     padding: 3px 0;
     position: relative;
@@ -26,15 +26,15 @@
     z-index: 10;
 
     &:hover {
-      background: rgba($black, 0.15);
+      background: rgba($black, .15);
       color: $white;
     }
   }
 
   h3 {
     @include font-size(2.2rem);
-    font-weight: bold;
-    margin: 0 0 10px 0;
+    font-weight: 700;
+    margin: 0 0 10px;
     padding: 0;
     white-space: nowrap;
   }
@@ -81,7 +81,7 @@
     > small {
       color: $gray-100;
       display: block;
-      font-size: 0.9rem;
+      font-size: .9rem;
       margin-top: 5px;
     }
   }
@@ -93,7 +93,7 @@
 
   // the icon
   .icon {
-    color: rgba($black, 0.15);
+    color: rgba($black, .15);
     z-index: 0;
 
     > i {

build/scss/_social-widgets.scss

@@ -28,7 +28,7 @@
     font-weight: 300;
     margin-bottom: 0;
     margin-top: 0;
-    text-shadow: 0 1px 1px rgba($black, 0.2);
+    text-shadow: 0 1px 1px rgba($black, .2);
   }
 
   //User single line description

build/scss/_table.scss

@@ -12,8 +12,7 @@
     thead tr:nth-child(1) th {
       background-color: $white;
       border-bottom: 0;
-      box-shadow: inset 0 1px 0 $table-border-color,
-                  inset 0 -1px 0 $table-border-color;
+      box-shadow: inset 0 1px 0 $table-border-color, inset 0 -1px 0 $table-border-color;
       position: sticky;
       top: 0;
       z-index: 10;
@@ -23,8 +22,7 @@
       thead tr {
         &:nth-child(1) th {
           background-color: $table-dark-bg;
-          box-shadow: inset 0 1px 0 $table-dark-border-color,
-                      inset 0 -1px 0 $table-dark-border-color;
+          box-shadow: inset 0 1px 0 $table-dark-border-color, inset 0 -1px 0 $table-dark-border-color;
         }
       }
     }

build/scss/_text.scss

@@ -4,7 +4,9 @@
 
 // text modification
 .text-bold {
-  &, &.table td, &.table th {
+  &,
+  &.table td,
+  &.table th {
     font-weight: 700;
   }
 }

build/scss/_timeline.scss

@@ -11,7 +11,7 @@
     @include border-radius($border-radius);
     background: $gray-300;
     bottom: 0;
-    content: '';
+    content: "";
     left: 31px;
     margin: 0;
     position: absolute;
@@ -70,7 +70,9 @@
         > img {
           margin: 10px;
         }
-        > dl, ol, ul {
+        > dl,
+        ol,
+        ul {
           margin: 0;
         }
       }

build/scss/_users-list.scss

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

build/scss/_variables.scss

@@ -17,14 +17,17 @@ $maroon: #d81b60 !default;
 $black: #111 !default;
 $gray-x-light: #d2d6de !default;
 
-$colors: map-merge((
-    'lightblue': $lightblue,
-    'navy': $navy,
-    'olive': $olive,
-    'lime': $lime,
-    'fuchsia': $fuchsia,
-    'maroon': $maroon,
-), $colors);
+$colors: map-merge(
+  (
+    "lightblue": $lightblue,
+    "navy": $navy,
+    "olive": $olive,
+    "lime": $lime,
+    "fuchsia": $fuchsia,
+    "maroon": $maroon,
+  ),
+  $colors
+);
 
 // LAYOUT
 // --------------------------------------------------------
@@ -33,7 +36,7 @@ $font-size-root: 1rem !default;
 
 // Sidebar
 $sidebar-width: 250px !default;
-$sidebar-padding-x: 0.5rem !default;
+$sidebar-padding-x: .5rem !default;
 $sidebar-padding-y: 0 !default;
 
 // Boxed layout maximum width
@@ -74,19 +77,19 @@ $main-header-height-sm: calc(#{$main-header-height-sm-inner} + #{$main-header-bo
 
 
 // Main header skins
-$main-header-dark-form-control-bg: hsla(100, 100%, 100%, 0.2) !default;
-$main-header-dark-form-control-focused-bg: hsla(100, 100%, 100%, 0.6) !default;
+$main-header-dark-form-control-bg: rgba(255, 255, 255, .2) !default;
+$main-header-dark-form-control-focused-bg: rgba(255, 255, 255, .6) !default;
 $main-header-dark-form-control-focused-color: $gray-800 !default;
 $main-header-dark-form-control-border: 0 !default;
 $main-header-dark-form-control-focused-border: 0 !default;
-$main-header-dark-placeholder-color: hsla(100, 100%, 100%, 0.6) !default;
+$main-header-dark-placeholder-color: rgba(255, 255, 255, .6) !default;
 
 $main-header-light-form-control-bg: darken($gray-100, 2%) !default;
 $main-header-light-form-control-focused-bg: $gray-200 !default;
 $main-header-light-form-control-focused-color: $gray-800 !default;
 $main-header-light-form-control-border: 0 !default;
 $main-header-light-form-control-focused-border: 0 !default;
-$main-header-light-placeholder-color: hsla(0, 0%, 0%, 0.6) !default;
+$main-header-light-placeholder-color: rgba(0, 0, 0, .6) !default;
 
 // MAIN FOOTER
 // --------------------------------------------------------
@@ -106,16 +109,16 @@ $main-footer-bg: $white !default;
 
 // Dark sidebar
 $sidebar-dark-bg: $dark !default;
-$sidebar-dark-hover-bg: hsla(100, 100%, 100%, 0.1) !default;
-$sidebar-dark-color: #C2C7D0 !default;
+$sidebar-dark-hover-bg: rgba(255, 255, 255, .1) !default;
+$sidebar-dark-color: #c2c7d0 !default;
 $sidebar-dark-hover-color: $white !default;
 $sidebar-dark-active-color: $white !default;
 $sidebar-dark-submenu-bg: transparent !default;
-$sidebar-dark-submenu-color: #C2C7D0 !default;
+$sidebar-dark-submenu-color: #c2c7d0 !default;
 $sidebar-dark-submenu-hover-color: $white !default;
 $sidebar-dark-submenu-hover-bg: $sidebar-dark-hover-bg !default;
 $sidebar-dark-submenu-active-color: $sidebar-dark-bg !default;
-$sidebar-dark-submenu-active-bg: hsla(100, 100%, 100%, 0.9) !default;
+$sidebar-dark-submenu-active-bg: rgba(255, 255, 255, .9) !default;
 $sidebar-dark-header-color: $white !default;
 
 // Light sidebar
@@ -184,7 +187,7 @@ $zindex-toasts: $zindex-main-sidebar + 2 !default;
 // --------------------------------------------------------
 
 // Transition global options
-$transition-speed: 0.3s !default;
+$transition-speed: .3s !default;
 $transition-fn: ease-in-out !default;
 
 // TEXT
@@ -205,18 +208,21 @@ $button-line-height-xs: $line-height-sm !default;
 $button-font-size-xs: ($font-size-base * .75) !default;
 $button-border-radius-xs: .15rem !default;
 
-  
+
 // ELEVATION
 // --------------------------------------------------------
 $elevations: ();
-$elevations: map-merge((
-    1: unquote('0 1px 3px ' + rgba($black, 0.12) + ', 0 1px 2px ' + rgba($black, 0.24)),
-    2: unquote('0 3px 6px ' + rgba($black, 0.16) + ', 0 3px 6px ' + rgba($black, 0.23)),
-    3: unquote('0 10px 20px ' + rgba($black, 0.19) + ', 0 6px 6px ' + rgba($black, 0.23)),
-    4: unquote('0 14px 28px ' + rgba($black, 0.25) + ', 0 10px 10px ' + rgba($black, 0.22)),
-    5: unquote('0 19px 38px ' + rgba($black, 0.30) + ', 0 15px 12px ' + rgba($black, 0.22)),
-), $elevations);
-  
+$elevations: map-merge(
+  (
+    1: unquote("0 1px 3px " + rgba($black, .12) + ", 0 1px 2px " + rgba($black, .24)),
+    2: unquote("0 3px 6px " + rgba($black, .16) + ", 0 3px 6px " + rgba($black, .23)),
+    3: unquote("0 10px 20px " + rgba($black, .19) + ", 0 6px 6px " + rgba($black, .23)),
+    4: unquote("0 14px 28px " + rgba($black, .25) + ", 0 10px 10px " + rgba($black, .22)),
+    5: unquote("0 19px 38px " + rgba($black, .3) + ", 0 15px 12px " + rgba($black, .22)),
+  ),
+  $elevations
+);
+
 // RIBBON
 // --------------------------------------------------------
 $ribbon-border-size: 3px !default;
@@ -230,7 +236,7 @@ $ribbon-right: -2px !default;
 $ribbon-lg-wrapper-size: 120px !default;
 $ribbon-lg-width: 160px !default;
 $ribbon-lg-top: 26px !default;
-$ribbon-lg-right: 0px !default;
+$ribbon-lg-right: 0 !default;
 $ribbon-xl-wrapper-size: 180px !default;
 $ribbon-xl-width: 240px !default;
 $ribbon-xl-top: 47px !default;

build/scss/mixins/_accent.scss

@@ -14,7 +14,7 @@
     a:not(.dropdown-item):not(.btn-app):not(.nav-link):not(.brand-link):not(.page-link):not(.btn) {
       color: $link-color;
 
-      @include hover {
+      @include hover () {
         color: $link-hover-color;
       }
     }
@@ -34,8 +34,8 @@
       }
 
       &::after {
-        $newColor: color-yiq($color);
-        background-image: str-replace($custom-checkbox-indicator-icon-checked, str-replace(#{$custom-control-indicator-checked-color}, '#', '%23'), str-replace(#{$newColor}, '#', '%23'));
+        $new-color: color-yiq($color);
+        background-image: str-replace($custom-checkbox-indicator-icon-checked, str-replace(#{$custom-control-indicator-checked-color}, "#", "%23"), str-replace(#{$new-color}, "#", "%23"));
       }
     }
 
@@ -45,7 +45,7 @@
     .custom-file-input:focus ~ .custom-file-label {
       border-color: lighten($color, 25%);
     }
-    
+
     .page-item {
       .page-link {
         color: $link-color;
@@ -70,8 +70,8 @@
       .sidebar {
         a:not(.dropdown-item):not(.btn-app):not(.nav-link):not(.brand-link) {
           color: $sidebar-dark-color;
-      
-          @include hover {
+
+          @include hover () {
             color: $sidebar-dark-hover-color;
           }
         }
@@ -83,7 +83,7 @@
         a:not(.dropdown-item):not(.btn-app):not(.nav-link):not(.brand-link) {
           color: $sidebar-light-color;
 
-          @include hover {
+          @include hover () {
             color: $sidebar-light-hover-color;
           }
         }

build/scss/mixins/_backgrounds.scss

@@ -33,7 +33,7 @@
 // Background Gradient Variant
 @mixin background-gradient-variant($name, $color) {
   .bg-gradient-#{$name} {
-    @include bg-gradient-variant('&', $color);
+    @include bg-gradient-variant("&", $color);
     color: color-yiq($color);
 
     &.btn {
@@ -46,7 +46,7 @@
       }
 
       &:hover {
-        @include bg-gradient-variant('&', darken($color, 7.5%));
+        @include bg-gradient-variant("&", darken($color, 7.5%));
         border-color: darken($color, 10%);
         color: darken(color-yiq($color), 7.5%);
       }
@@ -55,7 +55,7 @@
       &:not(:disabled):not(.disabled).active,
       &:active,
       &.active {
-        @include bg-gradient-variant('&', darken($color, 10%));
+        @include bg-gradient-variant("&", darken($color, 10%));
         border-color: darken($color, 12.5%);
         color: color-yiq(darken($color, 10%));
       }

build/scss/mixins/_cards.scss

@@ -42,7 +42,7 @@
   .bg-gradient-#{$name},
   .card-#{$name}:not(.card-outline) {
     .btn-tool {
-      color: rgba(color-yiq($color), 0.8);
+      color: rgba(color-yiq($color), .8);
 
       &:hover {
         color: color-yiq($color);

build/scss/mixins/_direct-chat.scss

@@ -3,7 +3,7 @@
 //
 
 // Direct Chat Variant
-@mixin direct-chat-variant($bg-color, $color: #fff) {
+@mixin direct-chat-variant($bg-color, $color: $white) {
   .right > .direct-chat-text {
     background: $bg-color;
     border-color: $bg-color;

build/scss/mixins/_miscellaneous.scss

@@ -25,11 +25,8 @@
 }
 
 // Gradient background
-@mixin gradient($color: #F5F5F5, $start: #EEE, $stop: #FFF) {
+@mixin gradient($color: #f5f5f5, $start: #eee, $stop: $white) {
   background: $color;
-  background: -webkit-gradient(linear, left bottom, left top, color-stop(0, $start), color-stop(1, $stop));
-  background: -ms-linear-gradient(bottom, $start, $stop);
-  background: -moz-linear-gradient(center bottom, $start 0%, $stop 100%);
-  background: -o-linear-gradient($stop, $start);
+  background: gradient(linear, left bottom, left top, color-stop(0, $start), color-stop(1, $stop));
 }
 

build/scss/mixins/_navbar.scss

@@ -3,7 +3,7 @@
 //
 
 // Navbar Variant
-@mixin navbar-variant($color, $font-color: rgba(255, 255, 255, 0.8), $hover-color: #f6f6f6, $hover-bg: rgba(0, 0, 0, 0.1)) {
+@mixin navbar-variant($color, $font-color: rgba(255, 255, 255, .8), $hover-color: #f6f6f6, $hover-bg: rgba(0, 0, 0, .1)) {
   background-color: $color;
 
   .nav > li > a {

build/scss/mixins/_sidebar.scss

@@ -136,7 +136,7 @@
         .sidebar-form,
         .user-panel > .info {
           display: block !important;
-          -webkit-transform: translateZ(0);
+          transform: translateZ(0);
         }
 
         .nav-sidebar > .nav-item > .nav-link > span {

build/scss/mixins/_toasts.scss

@@ -10,7 +10,7 @@
 
       .close {
         color: color-yiq($color);
-        text-shadow: 0 1px 0 #000;
+        text-shadow: 0 1px 0 $black;
       }
     }
 

build/scss/pages/_404_500_errors.scss

@@ -1,7 +1,7 @@
 //
 // Pages: 400 and 500 error pages
 //
- 
+
 .error-page {
   margin: 20px auto 0;
   width: 600px;

build/scss/pages/_e-commerce.scss

@@ -4,7 +4,7 @@
 
 // product image
 .product-image {
-  @include img-fluid;
+  @include img-fluid ();
   width: 100%;
 }
 
@@ -28,12 +28,12 @@
   padding: $thumbnail-padding * 2;
 
   img {
-    @include img-fluid;
+    @include img-fluid ();
     align-self: center;
   }
 
   &:hover {
-    opacity: 0.5;
+    opacity: .5;
   }
 }
 

build/scss/pages/_mailbox.scss

@@ -41,7 +41,7 @@
 }
 
 .mailbox-attachments {
-  @include list-unstyled;
+  @include list-unstyled ();
   li {
     border: 1px solid #eee;
     float: left;
@@ -53,7 +53,7 @@
 
 .mailbox-attachment-name {
   color: #666;
-  font-weight: bold;
+  font-weight: 700;
 }
 
 .mailbox-attachment-icon,
@@ -73,7 +73,7 @@
 
   > span {
     display: inline-block;
-    padding-top: 0.75rem;
+    padding-top: .75rem;
   }
 }
 

build/scss/parts/_components.scss

@@ -2,13 +2,13 @@
 // Part: Components
 //
 
-@import '../forms';
-@import '../progress-bars';
-@import '../cards';
-@import '../modals';
-@import '../toasts';
-@import '../buttons';
-@import '../callout';
-@import '../alerts';
-@import '../table';
-@import '../carousel';
+@import "../forms";
+@import "../progress-bars";
+@import "../cards";
+@import "../modals";
+@import "../toasts";
+@import "../buttons";
+@import "../callout";
+@import "../alerts";
+@import "../table";
+@import "../carousel";

build/scss/parts/_core.scss

@@ -2,11 +2,11 @@
 // Part: Core
 //
 
-@import '../layout';
-@import '../main-header';
-@import '../brand';
-@import '../main-sidebar';
-@import '../sidebar-mini';
-@import '../control-sidebar';
-@import '../dropdown';
-@import '../navs';
+@import "../layout";
+@import "../main-header";
+@import "../brand";
+@import "../main-sidebar";
+@import "../sidebar-mini";
+@import "../control-sidebar";
+@import "../dropdown";
+@import "../navs";

build/scss/parts/_extra-components.scss

@@ -2,10 +2,10 @@
 // Part: Extra Components
 //
 
-@import '../small-box';
-@import '../info-box';
-@import '../timeline';
-@import '../products';
-@import '../direct-chat';
-@import '../users-list';
-@import '../social-widgets';
+@import "../small-box";
+@import "../info-box";
+@import "../timeline";
+@import "../products";
+@import "../direct-chat";
+@import "../users-list";
+@import "../social-widgets";

build/scss/parts/_miscellaneous.scss

@@ -2,8 +2,8 @@
 // Part: Miscellaneous
 //
 
-@import '../miscellaneous';
-@import '../print';
-@import '../text';
-@import '../elevation';
-@import '../colors';
+@import "../miscellaneous";
+@import "../print";
+@import "../text";
+@import "../elevation";
+@import "../colors";

build/scss/parts/_pages.scss

@@ -2,11 +2,11 @@
 // Part: Pages
 //
 
-@import '../pages/mailbox';
-@import '../pages/lockscreen';
-@import '../pages/login_and_register';
-@import '../pages/404_500_errors';
-@import '../pages/invoice';
-@import '../pages/profile';
-@import '../pages/e-commerce';
-@import '../pages/projects';
+@import "../pages/mailbox";
+@import "../pages/lockscreen";
+@import "../pages/login_and_register";
+@import "../pages/404_500_errors";
+@import "../pages/invoice";
+@import "../pages/profile";
+@import "../pages/e-commerce";
+@import "../pages/projects";

build/scss/parts/_plugins.scss

@@ -2,15 +2,15 @@
 // Part: Plugins
 //
 
-@import '../plugins/mixins';
-@import '../plugins/fullcalendar';
-@import '../plugins/select2';
-@import '../plugins/bootstrap-slider';
-@import '../plugins/icheck-bootstrap';
-@import '../plugins/mapael';
-@import '../plugins/jqvmap';
-@import '../plugins/sweetalert2';
-@import '../plugins/toastr';
-@import '../plugins/pace';
-@import '../plugins/bootstrap-switch';
-@import '../plugins/miscellaneous';
+@import "../plugins/mixins";
+@import "../plugins/fullcalendar";
+@import "../plugins/select2";
+@import "../plugins/bootstrap-slider";
+@import "../plugins/icheck-bootstrap";
+@import "../plugins/mapael";
+@import "../plugins/jqvmap";
+@import "../plugins/sweetalert2";
+@import "../plugins/toastr";
+@import "../plugins/pace";
+@import "../plugins/bootstrap-switch";
+@import "../plugins/miscellaneous";

build/scss/plugins/_fullcalendar.scss

@@ -121,7 +121,7 @@
 
   border-radius: $border-radius;
   cursor: move;
-  font-weight: bold;
+  font-weight: 700;
   margin-bottom: 4px;
   padding: 5px 10px;
 

build/scss/plugins/_mapael.scss

@@ -35,7 +35,7 @@
     border-radius: $btn-border-radius;
     color: $button-default-color;
     cursor: pointer;
-    font-weight: bold;
+    font-weight: 700;
     height: 16px;
     left: 10px;
     line-height: 14px;

build/scss/plugins/_select2.scss

@@ -34,7 +34,6 @@
   & .select2-results__option {
     padding: 6px 12px;
     user-select: none;
-    -webkit-user-select: none;
   }
 
   & .select2-selection--single .select2-selection__rendered {

build/scss/plugins/_toastr.scss

@@ -12,7 +12,7 @@
 //     font-weight: 900;
 //     line-height: 18px;
 //     float: left;
-//     color: #FFF;
+//     color: $white;
 //     padding-right: 0.5em;
 //     margin: auto 0.5em auto -1.5em;
 // }        

package.json

@@ -25,6 +25,7 @@
     "css-minify:extra-components": "npm run css-minify-bash -- dist/css/alt/adminlte.extra-components.min.css dist/css/alt/adminlte.extra-components.css",
     "css-minify:pages": "npm run css-minify-bash -- dist/css/alt/adminlte.pages.min.css dist/css/alt/adminlte.pages.css",
     "css-minify:plugins": "npm run css-minify-bash -- dist/css/alt/adminlte.plugins.min.css dist/css/alt/adminlte.plugins.css",
+    "css-lint": "stylelint \"build/scss/**/*.scss\" --cache --cache-location .cache/.stylelintcache",
     "compile": "npm-run-all --parallel js css-all",
     "dev": "npm-run-all --parallel watch sync",
     "docs": "npm-run-all --sequential docs-clean docs-prepare docs-compile",
@@ -36,12 +37,14 @@
     "js": "npm-run-all --sequential js-compile js-minify",
     "js-compile": "rollup --config build/config/rollup.config.js --sourcemap",
     "js-minify": "terser --compress typeofs=false --mangle --comments \"/^!/\" --source-map \"content=dist/js/adminlte.js.map,includeSources,url=adminlte.min.js.map\" --output dist/js/adminlte.min.js dist/js/adminlte.js",
+    "lint": "npm run css-lint",
     "production": "npm-run-all --sequential compile plugins",
-    "prepare-release": "npm-run-all --sequential compile plugins docs",
+    "prepare-release": "npm-run-all --sequential production docs",
+    "test": "npm-run-all lint production",
     "plugins": "node build/npm/Publish.js -v",
     "sync": "browser-sync start --server --files *.html pages/ dist/",
     "watch": "npm-run-all --parallel watch-css watch-js",
-    "watch-css": "nodemon --watch build/scss -e scss -x \"npm run css\"",
+    "watch-css": "nodemon --watch build/scss -e scss -x \"npm-run-all css-lint css\"",
     "watch-js": "nodemon --watch build/js -e js -x \"npm run js\""
   },
   "keywords": [
@@ -142,6 +145,8 @@
     "npm-run-all": "^4.1.5",
     "postcss-cli": "^7.1.1",
     "rollup": "^2.12.0",
+    "stylelint": "^13.5.0",
+    "stylelint-config-twbs-bootstrap": "^2.0.2",
     "terser": "^4.7.0"
   }
 }