admin-lte 4.0.0-alpha1 → 4.0.0-alpha2

package/src/scss/_miscellaneous.scss

@@ -2,173 +2,6 @@
 // Misc: Miscellaneous
 //
 
-.border-transparent {
-  border-color: transparent !important;
-}
-
-// Description Blocks
-.description-block {
-  display: block;
-  margin: 10px 0;
-  text-align: center;
-
-  &.margin-bottom {
-    margin-bottom: 25px;
-  }
-
-  > .description-header {
-    padding: 0;
-    margin: 0;
-    font-size: 16px;
-    font-weight: 600;
-  }
-
-  > .description-text {
-    text-transform: uppercase;
-  }
-
-  // Description Block Extension
-  .description-icon {
-    font-size: 16px;
-  }
-}
-
-// List utility classes
-.list-group-unbordered {
-  > .list-group-item {
-    padding-right: 0;
-    padding-left: 0;
-    border-right: 0;
-    border-left: 0;
-    @include border-radius(0);
-  }
-}
-
-.list-header {
-  padding: 10px 4px;
-  font-size: 15px;
-  font-weight: 700;
-  color: $gray-600;
-}
-
-.list-seperator {
-  height: 1px;
-  margin: 15px 0 9px;
-  background-color: $card-border-color;
-}
-
-.list-link {
-  > a {
-    padding: 4px;
-    color: $gray-600;
-
-    &:hover {
-      color: $gray-900;
-    }
-  }
-}
-
-// User block
-.user-block {
-  float: left;
-
-  img {
-    float: left;
-    width: 40px;
-    height: 40px;
-  }
-
-  .username,
-  .description,
-  .comment {
-    display: block;
-    margin-left: 50px;
-  }
-
-  .username {
-    margin-top: -1px;
-    font-size: 16px;
-    font-weight: 600;
-  }
-
-  .description {
-    margin-top: -3px;
-    font-size: 13px;
-    color: $gray-600;
-  }
-
-  &.user-block-sm {
-    img {
-      width: $lte-img-size-sm;
-      height: $lte-img-size-sm;
-    }
-
-    .username,
-    .description,
-    .comment {
-      margin-left: 40px;
-    }
-
-    .username {
-      font-size: 14px;
-    }
-  }
-}
-
-// Image sizes
-.img-sm,
-.img-md,
-.img-lg {
-  float: left;
-}
-
-.img-sm {
-  width: $lte-img-size-sm;
-  height: $lte-img-size-sm;
-
-  + .img-push {
-    margin-left: $lte-img-size-sm + $lte-img-size-push;
-  }
-}
-
-.img-md {
-  width: $lte-img-size-md;
-  height: $lte-img-size-md;
-
-  + .img-push {
-    margin-left: $lte-img-size-md + $lte-img-size-push;
-  }
-}
-
-.img-lg {
-  width: $lte-img-size-lg;
-  height: $lte-img-size-lg;
-
-  + .img-push {
-    margin-left: $lte-img-size-lg + $lte-img-size-push;
-  }
-}
-
-// Image bordered
-.img-bordered {
-  padding: 3px;
-  border: 3px solid $gray-500;
-}
-
-.img-bordered-sm {
-  padding: 2px;
-  border: 2px solid $gray-500;
-}
-
-// Rounded and Circle Images
-.img-rounded {
-  @include border-radius($border-radius);
-}
-
-.img-circle {
-  @include border-radius(50%);
-}
-
 // Image sizes
 .img-size-64,
 .img-size-50,
@@ -187,291 +20,3 @@
 .img-size-32 {
   width: 32px;
 }
-
-// Block sizes
-.size-32,
-.size-40,
-.size-50 {
-  display: block;
-  text-align: center;
-}
-
-.size-32 {
-  width: 32px;
-  height: 32px;
-  line-height: 32px;
-}
-
-.size-40 {
-  width: 40px;
-  height: 40px;
-  line-height: 40px;
-}
-
-.size-50 {
-  width: 50px;
-  height: 50px;
-  line-height: 50px;
-}
-
-// General attachemnt block
-.attachment-block {
-  padding: 5px;
-  margin-bottom: 10px;
-  background-color: $gray-100;
-  border: 1px solid $card-border-color;
-
-  .attachment-img {
-    float: left;
-    max-width: 100px;
-    height: auto;
-    max-height: 100px;
-  }
-
-  .attachment-pushed {
-    margin-left: 110px;
-  }
-
-  .attachment-heading {
-    margin: 0;
-  }
-
-  .attachment-text {
-    color: $gray-700;
-  }
-}
-
-// Overlays for Card, InfoBox & SmallBox
-.card,
-.overlay-wrapper,
-.info-box,
-.small-box {
-  // Box overlay for LOADING STATE effect
-  > .overlay,
-  > .loading-img {
-    position: absolute;
-    top: 0;
-    left: 0;
-    width: 100%;
-    height: 100%;
-  }
-
-  .overlay {
-    @include border-radius($border-radius);
-    z-index: 50;
-    display: flex;
-    align-items: center;
-    justify-content: center;
-    background-color: rgba($white, .7);
-
-    > i,
-    > svg,
-    > img,
-    > object,
-    > iframe {
-      color: $gray-800;
-    }
-
-    &.dark {
-      background-color: rgba($black, .5);
-
-      > i,
-      > svg,
-      > img,
-      > object,
-      > iframe {
-        color: $gray-400;
-      }
-    }
-  }
-}
-
-.tab-pane {
-  // Box overlay for LOADING STATE effect on Tab Panels
-  > .overlay-wrapper {
-    position: relative;
-    > .overlay {
-      flex-direction: column;
-      width: add(100%, (2 * $card-spacer-x));
-      height: add(100%, (2 * $card-spacer-x));
-      margin-top: -$card-spacer-x;
-      margin-left: -$card-spacer-x;
-      @include border-top-start-radius(0);
-      @include border-top-end-radius(0);
-      &.dark {
-        color: $white;
-      }
-    }
-  }
-}
-
-// Ribbon
-.ribbon-wrapper {
-  position: absolute;
-  top: -2px;
-  right: -2px;
-  z-index: 10;
-  width: $lte-ribbon-wrapper-size;
-  height: $lte-ribbon-wrapper-size;
-  overflow: hidden;
-
-  &.ribbon-lg {
-    width: $lte-ribbon-lg-wrapper-size;
-    height: $lte-ribbon-lg-wrapper-size;
-
-    .ribbon {
-      top: $lte-ribbon-lg-top;
-      right: $lte-ribbon-lg-right;
-      width: $lte-ribbon-lg-width;
-    }
-  }
-
-  &.ribbon-xl {
-    width: $lte-ribbon-xl-wrapper-size;
-    height: $lte-ribbon-xl-wrapper-size;
-
-    .ribbon {
-      top: $lte-ribbon-xl-top;
-      right: $lte-ribbon-xl-right;
-      width: $lte-ribbon-xl-width;
-    }
-  }
-
-  .ribbon {
-    position: relative;
-    top: $lte-ribbon-top;
-    right: $lte-ribbon-right;
-    width: $lte-ribbon-width;
-    padding: $lte-ribbon-padding;
-    font-size: $lte-ribbon-font-size;
-    line-height: $lte-ribbon-line-height;
-    text-align: center;
-    text-shadow: 0 -1px 0 rgba($black, .4);
-    text-transform: uppercase;
-    box-shadow: 0 0 $lte-ribbon-border-size rgba($black, .3);
-    transform: rotate(45deg);
-
-    &::before,
-    &::after {
-      position: absolute;
-      bottom: -$lte-ribbon-border-size;
-      content: "";
-      border-top: $lte-ribbon-border-size solid #9e9e9e;
-      border-right: $lte-ribbon-border-size solid transparent;
-      border-left: $lte-ribbon-border-size solid transparent;
-    }
-
-    &::before {
-      left: 0;
-    }
-
-    &::after {
-      right: 0;
-    }
-  }
-}
-
-// Scroll To Top
-.back-to-top {
-  position: fixed;
-  right: 1.25rem;
-  bottom: 1.25rem;
-  z-index: $lte-zindex-control-sidebar + 1;
-
-  &:focus {
-    box-shadow: none;
-  }
-}
-
-// Pre
-pre {
-  padding: .75rem;
-}
-
-// Blockquotes styles
-blockquote {
-  padding: .5em .7rem;
-  margin: 1.5em .7rem;
-  background-color: $white;
-  border-left: .7rem solid $primary;
-
-  .box & {
-    background-color: $gray-200;
-  }
-
-  p:last-child {
-    margin-bottom: 0;
-  }
-
-  h1,
-  h2,
-  h3,
-  h4,
-  h5,
-  h6 {
-    font-size: 1.25rem;
-    font-weight: 600;
-    color: $primary;
-  }
-
-  @each $color, $value in $theme-colors {
-    &.quote-#{$color} {
-      border-color: $value;
-
-      h1,
-      h2,
-      h3,
-      h4,
-      h5,
-      h6 {
-        color: $value;
-      }
-    }
-  }
-
-  @each $color, $value in $colors {
-    &.quote-#{$color} {
-      border-color: $value;
-
-      h1,
-      h2,
-      h3,
-      h4,
-      h5,
-      h6 {
-        color: $value;
-      }
-    }
-  }
-}
-
-
-// Tab Custom Content
-
-.tab-custom-content {
-  padding-top: .5rem;
-  margin-top: .5rem;
-  border-top: $nav-tabs-border-width solid $nav-tabs-border-color;
-}
-
-.nav + .tab-custom-content {
-  padding-bottom: .5rem;
-  margin-top: 0;
-  margin-bottom: .5rem;
-  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;
-}
-

package/src/scss/_mixins.scss

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

package/src/scss/_root.scss

@@ -1,61 +1,5 @@
-:root {
-  // 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};
-
+:root,
+[data-bs-theme="light"] {
   // 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 {
-  @include color-mode(dark, true) {
-    color-scheme: dark;
-    // 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};
-  }
 }

package/src/scss/_small-box.scss

@@ -5,10 +5,12 @@
 .small-box {
   @include border-radius($border-radius);
   @include box-shadow($lte-card-shadow);
-
   position: relative;
   display: block;
   margin-bottom: 1.25rem;
+  --bs-link-color-rgb: none;
+  --bs-link-hover-color-rgb: none;
+  --bs-heading-color: none;
 
   // content wrapper
   > .inner {
@@ -20,14 +22,12 @@
     z-index: 10;
     display: block;
     padding: 3px 0;
-    color: rgba($white, .8);
     text-align: center;
     text-decoration: none;
-    background-color: rgba($black, .1);
+    background-color: rgba($black, .07);
 
     &:hover {
-      color: $white;
-      background-color: rgba($black, .15);
+      background-color: rgba($black, .1);
     }
   }
 
@@ -92,30 +92,15 @@
   }
 
   // the icon
-  .icon {
+  .small-box-icon {
+    position: absolute;
+    top: 15px;
+    right: 15px;
     z-index: 0;
+    height: 70px;
+    font-size: 70px;
     color: rgba($black, .15);
-
-    > i {
-      position: absolute;
-      top: 15px;
-      right: 15px;
-      font-size: 90px;
-      @include transition(transform $lte-transition-speed linear);
-
-      &.inner-icon {
-        top: 20px;
-        font-size: 70px;
-      }
-    }
-
-    svg {
-      position: absolute;
-      top: 15px;
-      right: 15px;
-      font-size: 70px;
-      @include transition(transform $lte-transition-speed linear);
-    }
+    @include transition(transform $lte-transition-speed linear);
   }
 
   // Small box hover state
@@ -123,16 +108,8 @@
     text-decoration: none;
 
     // Animate icons on small box hover
-    .icon {
-      > i {
-        &,
-        &.inner-icon {
-          transform: scale(1.1);
-        }
-      }
-      > svg {
-        transform: scale(1.1);
-      }
+    .small-box-icon {
+      transform: scale(1.1);
     }
   }
 }
@@ -142,7 +119,7 @@
   .small-box {
     text-align: center;
 
-    .icon {
+    .small-box-icon {
       display: none;
     }
 

package/src/scss/_table.scss

@@ -73,53 +73,3 @@
     }
   }
 }
-
-// Expandable Table
-
-.table-hover tbody tr.expandable-body:hover {
-  background-color: inherit !important;
-}
-
-[data-widget="expandable-table"] {
-  cursor: pointer;
-
-  i.expandable-table-caret {
-    @include transition(transform $lte-transition-speed linear);
-  }
-  &[aria-expanded="true"] {
-    td i.expandable-table-caret {
-      // stylelint-disable selector-max-attribute
-      &[class*="right"] {
-        transform: rotate(90deg);
-      }
-      &[class*="left"] {
-        transform: rotate(-90deg);
-      }
-      // stylelint-enable selector-max-attribute
-    }
-  }
-}
-
-.expandable-body {
-  > td {
-    width: 100%;
-    padding: 0 !important;
-
-    > div,
-    > p {
-      padding: $table-cell-padding-y $table-cell-padding-x;
-    }
-  }
-
-  .table {
-    width: subtract(100%, $table-cell-padding-x);
-    margin: 0 0 0 $table-cell-padding-x;
-
-    tr:first-child {
-      td,
-      th {
-        border-top: none;
-      }
-    }
-  }
-}