admin-lte 4.0.0-alpha1 → 4.0.0-alpha2

package/src/scss/_bootstrap-variables.scss

@@ -384,7 +384,7 @@ $enable-cssgrid:              false !default;
 $enable-button-pointers:      true !default;
 $enable-rfs:                  true !default;
 $enable-validation-icons:     true !default;
-$enable-negative-margins:     false !default;
+$enable-negative-margins:     true !default;
 $enable-deprecation-messages: true !default;
 $enable-important-utilities:  true !default;
 
@@ -463,6 +463,15 @@ $link-hover-decoration:                   null !default;
 $stretched-link-pseudo-element:           after !default;
 $stretched-link-z-index:                  1 !default;
 
+// Icon links
+// scss-docs-start icon-link-variables
+$icon-link-gap:               .375rem !default;
+$icon-link-underline-offset:  .25em !default;
+$icon-link-icon-size:         1em !default;
+$icon-link-icon-transition:   .2s ease-in-out transform !default;
+$icon-link-icon-transform:    translate3d(.25em, 0, 0) !default;
+// scss-docs-end icon-link-variables
+
 // Paragraphs
 //
 // Style p element.
@@ -811,6 +820,7 @@ $input-btn-border-width:      var(--#{$prefix}border-width) !default;
 // For each of Bootstrap's buttons, define text, background, and border color.
 
 // scss-docs-start btn-variables
+$btn-color:                   var(--#{$prefix}body-color) !default;
 $btn-padding-y:               $input-btn-padding-y !default;
 $btn-padding-x:               $input-btn-padding-x !default;
 $btn-font-family:             $input-btn-font-family !default;
@@ -840,9 +850,9 @@ $btn-link-hover-color:        var(--#{$prefix}link-hover-color) !default;
 $btn-link-disabled-color:     $gray-600 !default;
 
 // Allows for customizing button radius independently from global border radius
-$btn-border-radius:           $border-radius !default;
-$btn-border-radius-sm:        $border-radius-sm !default;
-$btn-border-radius-lg:        $border-radius-lg !default;
+$btn-border-radius:           var(--#{$prefix}border-radius) !default;
+$btn-border-radius-sm:        var(--#{$prefix}border-radius-sm) !default;
+$btn-border-radius-lg:        var(--#{$prefix}border-radius-lg) !default;
 
 $btn-transition:              color .15s ease-in-out, background-color .15s ease-in-out, border-color .15s ease-in-out, box-shadow .15s ease-in-out !default;
 
@@ -901,9 +911,9 @@ $input-border-color:                    var(--#{$prefix}border-color) !default;
 $input-border-width:                    $input-btn-border-width !default;
 $input-box-shadow:                      $box-shadow-inset !default;
 
-$input-border-radius:                   $border-radius !default;
-$input-border-radius-sm:                $border-radius-sm !default;
-$input-border-radius-lg:                $border-radius-lg !default;
+$input-border-radius:                   var(--#{$prefix}border-radius) !default;
+$input-border-radius-sm:                var(--#{$prefix}border-radius-sm) !default;
+$input-border-radius-lg:                var(--#{$prefix}border-radius-lg) !default;
 
 $input-focus-bg:                        $input-bg !default;
 $input-focus-border-color:              tint-color($component-active-bg, 50%) !default;
@@ -914,7 +924,7 @@ $input-focus-box-shadow:                $input-btn-focus-box-shadow !default;
 $input-placeholder-color:               var(--#{$prefix}secondary-color) !default;
 $input-plaintext-color:                 var(--#{$prefix}body-color) !default;
 
-$input-height-border:                   calc($input-border-width * 2) !default; // stylelint-disable-line function-disallowed-list
+$input-height-border:                   calc(#{$input-border-width} * 2) !default; // stylelint-disable-line function-disallowed-list
 
 $input-height-inner:                    add($input-line-height * 1em, $input-padding-y * 2) !default;
 $input-height-inner-half:               add($input-line-height * .5em, $input-padding-y) !default;
@@ -1068,7 +1078,7 @@ $form-floating-padding-x:               $input-padding-x !default;
 $form-floating-padding-y:               1rem !default;
 $form-floating-input-padding-t:         1.625rem !default;
 $form-floating-input-padding-b:         .625rem !default;
-$form-floating-label-height:            1.875em !default;
+$form-floating-label-height:            1.5em !default;
 $form-floating-label-opacity:           .65 !default;
 $form-floating-label-transform:         scale(.85) translateY(-.5rem) translateX(.15rem) !default;
 $form-floating-label-disabled-color:    $gray-600 !default;
@@ -1090,23 +1100,30 @@ $form-feedback-icon-invalid-color:  $form-feedback-invalid-color !default;
 $form-feedback-icon-invalid:        url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 12' width='12' height='12' fill='none' stroke='#{$form-feedback-icon-invalid-color}'><circle cx='6' cy='6' r='4.5'/><path stroke-linejoin='round' d='M5.8 3.6h.4L6 6.5z'/><circle cx='6' cy='8.2' r='.6' fill='#{$form-feedback-icon-invalid-color}' stroke='none'/></svg>") !default;
 // scss-docs-end form-feedback-variables
 
+// scss-docs-start form-validation-colors
+$form-valid-color:                  $form-feedback-valid-color !default;
+$form-valid-border-color:           $form-feedback-valid-color !default;
+$form-invalid-color:                $form-feedback-invalid-color !default;
+$form-invalid-border-color:         $form-feedback-invalid-color !default;
+// scss-docs-end form-validation-colors
+
 // scss-docs-start form-validation-states
 $form-validation-states: (
   "valid": (
-    "color": var(--#{$prefix}success-text),
+    "color": var(--#{$prefix}form-valid-color),
     "icon": $form-feedback-icon-valid,
     "tooltip-color": #fff,
     "tooltip-bg-color": var(--#{$prefix}success),
     "focus-box-shadow": 0 0 $input-btn-focus-blur $input-focus-width rgba(var(--#{$prefix}success-rgb), $input-btn-focus-color-opacity),
-    "border-color": var(--#{$prefix}success),
+    "border-color": var(--#{$prefix}form-valid-border-color),
   ),
   "invalid": (
-    "color": var(--#{$prefix}danger-text),
+    "color": var(--#{$prefix}form-invalid-color),
     "icon": $form-feedback-icon-invalid,
     "tooltip-color": #fff,
     "tooltip-bg-color": var(--#{$prefix}danger),
     "focus-box-shadow": 0 0 $input-btn-focus-blur $input-focus-width rgba(var(--#{$prefix}danger-rgb), $input-btn-focus-color-opacity),
-    "border-color": var(--#{$prefix}danger),
+    "border-color": var(--#{$prefix}form-invalid-border-color),
   )
 ) !default;
 // scss-docs-end form-validation-states
@@ -1151,7 +1168,6 @@ $nav-link-color:                    var(--#{$prefix}link-color) !default;
 $nav-link-hover-color:              var(--#{$prefix}link-hover-color) !default;
 $nav-link-transition:               color .15s ease-in-out, background-color .15s ease-in-out, border-color .15s ease-in-out !default;
 $nav-link-disabled-color:           var(--#{$prefix}secondary-color) !default;
-$nav-link-disabled-color:           $gray-600 !default;
 $nav-link-focus-box-shadow:         $focus-ring-box-shadow !default;
 
 $nav-tabs-border-color:             var(--#{$prefix}border-color) !default;
@@ -1162,7 +1178,7 @@ $nav-tabs-link-active-color:        var(--#{$prefix}emphasis-color) !default;
 $nav-tabs-link-active-bg:           var(--#{$prefix}body-bg) !default;
 $nav-tabs-link-active-border-color: var(--#{$prefix}border-color) var(--#{$prefix}border-color) $nav-tabs-link-active-bg !default;
 
-$nav-pills-border-radius:           $border-radius !default;
+$nav-pills-border-radius:           var(--#{$prefix}border-radius) !default;
 $nav-pills-link-active-color:       $component-active-color !default;
 $nav-pills-link-active-bg:          $component-active-bg !default;
 
@@ -1230,9 +1246,9 @@ $dropdown-font-size:                $font-size-base !default;
 $dropdown-color:                    var(--#{$prefix}body-color) !default;
 $dropdown-bg:                       var(--#{$prefix}body-bg) !default;
 $dropdown-border-color:             var(--#{$prefix}border-color-translucent) !default;
-$dropdown-border-radius:            $border-radius !default;
+$dropdown-border-radius:            var(--#{$prefix}border-radius) !default;
 $dropdown-border-width:             var(--#{$prefix}border-width) !default;
-$dropdown-inner-border-radius:      calc($dropdown-border-radius - $dropdown-border-width) !default; // stylelint-disable-line function-disallowed-list
+$dropdown-inner-border-radius:      calc(#{$dropdown-border-radius} - #{$dropdown-border-width}) !default; // stylelint-disable-line function-disallowed-list
 $dropdown-divider-bg:               $dropdown-border-color !default;
 $dropdown-divider-margin-y:         $spacer * .5 !default;
 $dropdown-box-shadow:               $box-shadow !default;
@@ -1244,7 +1260,7 @@ $dropdown-link-hover-bg:            var(--#{$prefix}tertiary-bg) !default;
 $dropdown-link-active-color:        $component-active-color !default;
 $dropdown-link-active-bg:           $component-active-bg !default;
 
-$dropdown-link-disabled-color:      $gray-500 !default;
+$dropdown-link-disabled-color:      var(--#{$prefix}tertiary-color) !default;
 
 $dropdown-item-padding-y:           $spacer * .25 !default;
 $dropdown-item-padding-x:           $spacer !default;
@@ -1289,7 +1305,7 @@ $pagination-color:                  var(--#{$prefix}link-color) !default;
 $pagination-bg:                     var(--#{$prefix}body-bg) !default;
 $pagination-border-radius:          var(--#{$prefix}border-radius) !default;
 $pagination-border-width:           var(--#{$prefix}border-width) !default;
-$pagination-margin-start:           calc($pagination-border-width * -1) !default; // stylelint-disable-line function-disallowed-list
+$pagination-margin-start:           calc(#{$pagination-border-width} * -1) !default; // stylelint-disable-line function-disallowed-list
 $pagination-border-color:           var(--#{$prefix}border-color) !default;
 
 $pagination-focus-color:            var(--#{$prefix}link-hover-color) !default;
@@ -1311,8 +1327,8 @@ $pagination-disabled-border-color:  var(--#{$prefix}border-color) !default;
 
 $pagination-transition:              color .15s ease-in-out, background-color .15s ease-in-out, border-color .15s ease-in-out, box-shadow .15s ease-in-out !default;
 
-$pagination-border-radius-sm:       $border-radius-sm !default;
-$pagination-border-radius-lg:       $border-radius-lg !default;
+$pagination-border-radius-sm:       var(--#{$prefix}border-radius-sm) !default;
+$pagination-border-radius-lg:       var(--#{$prefix}border-radius-lg) !default;
 // scss-docs-end pagination-variables
 
 
@@ -1368,7 +1384,7 @@ $accordion-button-color:                  var(--#{$prefix}body-color) !default;
 $accordion-button-bg:                     var(--#{$prefix}accordion-bg) !default;
 $accordion-transition:                    $btn-transition, border-radius .15s ease !default;
 $accordion-button-active-bg:              var(--#{$prefix}primary-bg-subtle) !default;
-$accordion-button-active-color:           var(--#{$prefix}primary-text) !default;
+$accordion-button-active-color:           var(--#{$prefix}primary-text-emphasis) !default;
 
 $accordion-button-focus-border-color:     $input-focus-border-color !default;
 $accordion-button-focus-box-shadow:       $btn-focus-box-shadow !default;
@@ -1423,7 +1439,7 @@ $popover-max-width:                 276px !default;
 $popover-border-width:              var(--#{$prefix}border-width) !default;
 $popover-border-color:              var(--#{$prefix}border-color-translucent) !default;
 $popover-border-radius:             var(--#{$prefix}border-radius-lg) !default;
-$popover-inner-border-radius:       calc($popover-border-radius - $popover-border-width) !default; // stylelint-disable-line function-disallowed-list
+$popover-inner-border-radius:       calc(#{$popover-border-radius} - #{$popover-border-width}) !default; // stylelint-disable-line function-disallowed-list
 $popover-box-shadow:                $box-shadow !default;
 
 $popover-header-font-size:          $font-size-base !default;
@@ -1476,7 +1492,7 @@ $badge-font-weight:                 $font-weight-bold !default;
 $badge-color:                       $white !default;
 $badge-padding-y:                   .35em !default;
 $badge-padding-x:                   .65em !default;
-$badge-border-radius:               $border-radius !default;
+$badge-border-radius:               var(--#{$prefix}border-radius) !default;
 // scss-docs-end badge-variables
 
 
@@ -1534,7 +1550,7 @@ $modal-scale-transform:             scale(1.02) !default;
 $alert-padding-y:               $spacer !default;
 $alert-padding-x:               $spacer !default;
 $alert-margin-bottom:           1rem !default;
-$alert-border-radius:           $border-radius !default;
+$alert-border-radius:           var(--#{$prefix}border-radius) !default;
 $alert-link-font-weight:        $font-weight-bold !default;
 $alert-border-width:            var(--#{$prefix}border-width) !default;
 $alert-bg-scale:                -80% !default;
@@ -1694,7 +1710,6 @@ $btn-close-height:           $btn-close-width !default;
 $btn-close-padding-x:        .25em !default;
 $btn-close-padding-y:        $btn-close-padding-x !default;
 $btn-close-color:            $black !default;
-$btn-close-focus-shadow:     $input-btn-focus-box-shadow !default;
 $btn-close-bg:               url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='#{$btn-close-color}'><path d='M.293.293a1 1 0 0 1 1.414 0L8 6.586 14.293.293a1 1 0 1 1 1.414 1.414L9.414 8l6.293 6.293a1 1 0 0 1-1.414 1.414L8 9.414l-6.293 6.293a1 1 0 0 1-1.414-1.414L6.586 8 .293 1.707a1 1 0 0 1 0-1.414z'/></svg>") !default;
 $btn-close-focus-shadow:     $focus-ring-box-shadow !default;
 $btn-close-opacity:          .5 !default;

package/src/scss/_callouts.scss

@@ -0,0 +1,34 @@
+//
+// Callouts
+//
+
+.callout {
+  --#{$prefix}link-color-rgb: var(--#{$lte-prefix}callout-link);
+  --#{$prefix}code-color: var(--#{$lte-prefix}callout-code-color);
+
+  padding: 1.25rem;
+  color: var(--#{$lte-prefix}callout-color, inherit);
+  background-color: var(--#{$lte-prefix}callout-bg, var(--bs-gray-100));
+  border-left: .25rem solid var(--#{$lte-prefix}callout-border, var(--bs-gray-300));
+
+  h4 {
+    margin-bottom: .25rem;
+  }
+
+  > :last-child {
+    margin-bottom: 0;
+  }
+
+  + .callout {
+    margin-top: -.25rem;
+  }
+}
+
+// Variations
+@each $name, $color in $theme-colors {
+  .callout-#{$name} {
+    --#{$lte-prefix}callout-color: var(--#{$prefix}#{$name}-text-emphasis);
+    --#{$lte-prefix}callout-bg: var(--#{$prefix}#{$name}-bg-subtle);
+    --#{$lte-prefix}callout-border: var(--#{$prefix}#{$name}-border-subtle);
+  }
+}

package/src/scss/_cards.scss

@@ -3,29 +3,26 @@
 //
 
 // 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;
-    }
+  &[class*="card-"]:not(.card-outline) {
+    > .card-header {
+      color: var(--#{$lte-prefix}card-variant-color);
+      background-color: var(--#{$lte-prefix}card-variant-bg);
 
-    &,
-    .card-body {
-      color: $white;
+      .btn-tool {
+        --#{$prefix}btn-color: rgba(var(--#{$lte-prefix}card-variant-color-rgb), .8);
+        --#{$prefix}btn-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;
@@ -206,7 +203,7 @@ html.maximized-card {
 .card-header,
 .card-body,
 .card-footer {
-  @include clearfix ();
+  @include clearfix();
 }
 
 // Box header
@@ -248,47 +245,33 @@ 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: var(--#{$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;
+@each $name, $color in $theme-colors {
+  .card-#{$name},
+  .bg-#{$name},
+  .text-bg-#{$name} {
+    --#{$lte-prefix}card-variant-bg: #{$color};
+    --#{$lte-prefix}card-variant-bg-rgb: #{to-rgb($color)};
+    --#{$lte-prefix}card-variant-color: #{color-contrast($color)};
+    --#{$lte-prefix}card-variant-color-rgb: #{to-rgb(color-contrast($color))};
   }
 }
 
 // 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;
@@ -298,181 +281,4 @@ html.maximized-card {
       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;
-    }
-  }
 }

package/src/scss/_direct-chat.scss

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

package/src/scss/_docs.scss

@@ -0,0 +1,4 @@
+.astro-code {
+  padding: .75rem;
+  @include border-radius($border-radius);
+}

package/src/scss/_dropdown.scss

@@ -49,6 +49,7 @@
 
   p {
     margin: 0;
+    word-wrap: break-word;
     white-space: normal;
   }
 }
@@ -58,7 +59,7 @@
   position: relative;
 
   > a::after {
-    @include caret-end ();
+    @include caret-end();
     float: right;
     margin-top: .5rem;
     margin-left: .5rem;
@@ -101,6 +102,7 @@
 
   p {
     margin: 0;
+    word-wrap: break-word;
     white-space: normal;
   }
 }
@@ -167,7 +169,7 @@
 
     // Header menu
     > li.user-header {
-      height: 175px;
+      min-height: 175px;
       padding: 10px;
       text-align: center;
 
@@ -185,7 +187,7 @@
         z-index: 5;
         margin-top: 10px;
         font-size: 17px;
-        //text-shadow: 2px 2px 3px #333333;
+        word-wrap: break-word;
 
         > small {
           display: block;
@@ -196,7 +198,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 +213,7 @@
 
     // Menu Footer
     > .user-footer {
-      @include clearfix ();
+      @include clearfix();
       padding: 10px;
       background-color: var(--#{$prefix}light-bg);
 

package/src/scss/_info-box.scss

@@ -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);
       }
     }
   }