admin-lte 4.0.0-alpha1 → 4.0.0-alpha2

package/src/scss/_sidebar-collapse.scss

@@ -1,120 +0,0 @@
-//
-// Core: Sidebar Mini
-//
-
-// A fix for text overflow while transitioning from sidebar mini to full sidebar
-.nav-sidebar,
-.nav-sidebar > .nav-header,
-.nav-sidebar .nav-link {
-  white-space: nowrap;
-}
-
-.sidebar-collapse:not(.sidebar-horizontal) {
-  .main-sidebar {
-    min-width: $lte-sidebar-mini-width;
-    max-width: $lte-sidebar-mini-width;
-  }
-
-  // Make the sidebar headers
-  .nav-sidebar .nav-header {
-    display: none;
-  }
-
-  .nav-sidebar {
-    .nav-link {
-      width: $lte-sidebar-mini-width - $lte-sidebar-padding-x * 2;
-    }
-  }
-
-  .nav-sidebar .nav-link p {
-    width: 0;
-    white-space: nowrap;
-  }
-
-  .nav-sidebar .nav-link p,
-  .brand-link {
-    margin-left: -10px;
-    visibility: hidden;
-    animation-name: fadeOut;
-    animation-duration: $lte-transition-speed;
-    animation-fill-mode: both;
-  }
-
-  &.sidebar-is-hover {
-    .main-sidebar {
-      min-width: var(--#{$lte-prefix}sidebar-width);
-      max-width: var(--#{$lte-prefix}sidebar-width);
-    }
-
-    .nav-sidebar .nav-header {
-      display: inline-block;
-    }
-
-    .nav-sidebar .nav-link {
-      width: subtract(var(--#{$lte-prefix}sidebar-width), $lte-sidebar-padding-x * 2);
-    }
-
-    .nav-sidebar .nav-link p,
-    .brand-link {
-      margin-left: 0;
-      visibility: visible;
-      animation-name: fadeIn;
-      animation-duration: $lte-transition-speed;
-      animation-fill-mode: both;
-    }
-  }
-}
-
-// .sidebar-mini.sidebar-collapse:not(.layout-fixed):not(.sidebar-horizontal) {
-//   .sidebar {
-//     overflow: visible;
-
-//     .nav-sidebar .nav-item:hover {
-//       position: relative;
-
-//       .nav-link {
-//         border-top-right-radius: 0;
-//         border-bottom-right-radius: 0;
-//       }
-
-//       span {
-//         animation: none;
-//         z-index: $lte-zindex-sidebar + 12;
-//         visibility: visible;
-//         display: inline-block;
-//         position: absolute;
-//         width: var(--#{$lte-prefix}sidebar-width);
-//         left: $lte-sidebar-mini-width;
-//         top: 0;
-//         background-color: inherit;
-//         padding: inherit;
-//         padding-left: 1rem;
-//         margin-left: -1rem;
-//         border-top-left-radius: 0;
-//         border-bottom-left-radius: 0;
-//       }
-//     }
-//   }
-// }
-
-// .sidebar-is-opening {
-//   .nav-sidebar .nav-link p,
-//   .brand-link {
-//     margin-left: 0;
-//     animation-name: fadeIn;
-//     animation-duration: $lte-transition-speed;
-//     animation-fill-mode: both;
-//     visibility: visible;
-//   }
-// }
-
-// .sidebar-is-collapsing {
-//   .nav-sidebar .nav-link p,
-//   .brand-link {
-//     margin-left: -10px;
-//     animation-name: fadeOut;
-//     animation-duration: $lte-transition-speed;
-//     animation-fill-mode: both;
-//     visibility: visible;
-//   }
-// }

package/src/scss/_sidebar-horizontal.scss

@@ -1,67 +0,0 @@
-@include media-breakpoint-up(lg) {
-  .sidebar-horizontal {
-    .wrapper {
-      grid-template-areas:
-        "main-header"
-        "main-sidebar"
-        "content-wrapper"
-        "main-footer";
-      grid-template-rows: max-content max-content auto max-content;
-      grid-template-columns: auto;
-    }
-
-    .main-sidebar {
-      z-index: $lte-zindex-sidebar-horizontal;
-      display: grid;
-      justify-content: start;
-      min-width: $lte-sidebar-horizontal-width;
-      max-width: $lte-sidebar-horizontal-width;
-      height: $lte-sidebar-horizontal-height;
-    }
-
-    .brand-container {
-      display: none;
-    }
-
-    .sidebar {
-      // overflow: visible;
-      overflow-x: auto;
-      overflow-y: hidden;
-
-      // padding-top: .75rem;
-
-      .nav-sidebar {
-        display: grid;
-        grid-auto-columns: 130px;
-        grid-auto-flow: column;
-        list-style-type: none;
-        // grid-gap: 5px;
-
-        .nav-header {
-          display: none;
-        }
-
-        .nav-item > .nav-link {
-          display: grid;
-          grid-auto-flow: row;
-          justify-content: center;
-
-          .nav-icon {
-            padding-left: 0;
-            text-align: center;
-          }
-
-          p {
-            padding-left: 0;
-          }
-        }
-      }
-    }
-
-    &.sidebar-close {
-      .main-sidebar {
-        margin-top: -#{$lte-sidebar-horizontal-height};
-      }
-    }
-  }
-}

package/src/scss/_sidebar.scss

@@ -1,11 +0,0 @@
-.sidebar {
-  // min-height: 100%;
-  padding-top: $lte-sidebar-padding-y;
-  padding-right: $lte-sidebar-padding-x;
-  padding-bottom: $lte-sidebar-padding-y;
-  padding-left: $lte-sidebar-padding-x;
-  overflow-x: hidden;
-  overflow-y: auto;
-  @include scrollbar-color-gray();
-  @include scrollbar-width-thin();
-}

package/src/scss/_users-list.scss

@@ -1,45 +0,0 @@
-//
-// Component: Users List
-//
-
-.users-list {
-  @include list-unstyled ();
-
-  > li {
-    float: left;
-    width: 25%;
-    padding: 10px;
-    text-align: center;
-
-    img {
-      @include border-radius(50%);
-      max-width: 100%;
-      height: auto;
-    }
-
-    > a:hover {
-      &,
-      .users-list-name {
-        color: var(--#{$prefix}body-color);
-      }
-    }
-  }
-}
-
-.users-list-name,
-.users-list-date {
-  display: block;
-}
-
-.users-list-name {
-  overflow: hidden;
-  font-size: $font-size-sm;
-  color: var(--#{$prefix}secondary-color);
-  text-overflow: ellipsis;
-  white-space: nowrap;
-}
-
-.users-list-date {
-  font-size: 12px;
-  color: var(--#{$prefix}tertiary-color);
-}

package/src/scss/mixins/_brand-variant.scss

@@ -1,9 +0,0 @@
-@mixin brand-variant(
-  $brand-bg,
-  $brand-color
-) {
-  .brand-container {
-    color: $brand-color;
-    background-color: $brand-bg;
-  }
-}

package/src/scss/mixins/_cards.scss

@@ -1,53 +0,0 @@
-//
-// Mixins: Cards Variant
-//
-
-@mixin cards-variant($name, $color) {
-  .card-#{$name} {
-    &:not(.card-outline) {
-      > .card-header {
-        background-color: $color;
-
-        &,
-        a {
-          color: color-contrast($color);
-        }
-
-        a.active {
-          color: color-contrast($white);
-        }
-      }
-    }
-
-    &.card-outline {
-      border-top: 3px solid $color;
-    }
-
-    &.card-outline-tabs {
-      > .card-header {
-        a {
-          &:hover {
-            border-top: 3px solid $nav-tabs-border-color;
-          }
-
-          &.active {
-            border-top: 3px solid $color;
-          }
-        }
-      }
-    }
-  }
-
-  .bg-#{$name},
-  .card-#{$name}:not(.card-outline) {
-    > .card-header {
-      .btn-tool {
-        color: rgba(color-contrast($color), .8);
-
-        &:hover {
-          color: color-contrast($color);
-        }
-      }
-    }
-  }
-}

package/src/scss/mixins/_direct-chat.scss

@@ -1,17 +0,0 @@
-//
-// Mixins: Direct Chat
-//
-
-// Direct Chat Variant
-@mixin direct-chat-variant($bg-color, $color: $white) {
-  .end > .direct-chat-text {
-    color: color-contrast($bg-color);
-    background-color: $bg-color;
-    border-color: $bg-color;
-
-    &::after,
-    &::before {
-      border-left-color: $bg-color;
-    }
-  }
-}

package/src/scss/mixins/_header-variant.scss

@@ -1,22 +0,0 @@
-//
-// Mixins: Sidebar Variant
-//
-
-@mixin header-variant(
-  $lte-header-bg,
-  $lte-header-color,
-  $lte-header-mobile-bg,
-  $lte-header-mobile-color
-) {
-  .main-header {
-    color: $lte-header-color;
-    background-color: $lte-header-bg;
-  }
-
-  @include media-breakpoint-down(lg) {
-    .main-header {
-      color: $lte-header-mobile-color;
-      background-color: $lte-header-mobile-bg;
-    }
-  }
-}

package/src/scss/mixins/_nav-treeview-dark.scss

@@ -1,87 +0,0 @@
-@mixin nav-treeview-dark(
-  $lte-sidebar-bg,
-  $lte-sidebar-hover-bg,
-  $lte-sidebar-color,
-  $lte-sidebar-hover-color,
-  $lte-sidebar-active-color,
-  $lte-sidebar-submenu-bg,
-  $lte-sidebar-submenu-color,
-  $lte-sidebar-submenu-hover-color,
-  $lte-sidebar-submenu-hover-bg,
-  $lte-sidebar-submenu-active-color,
-  $lte-sidebar-submenu-active-bg,
-  $lte-sidebar-header-color
-) {
-  // Sidebar background color
-  background-color: $lte-sidebar-bg;
-
-  // Sidebar Menu. First level links
-  .nav-sidebar > .nav-item {
-    // links
-    > .nav-link {
-      // border-left: 3px solid transparent;
-      &:active {
-        color: $lte-sidebar-color;
-      }
-    }
-
-    // Hover and active states
-    &.menu-open > .nav-link,
-    &:hover > .nav-link,
-    > .nav-link:focus  {
-      color: $lte-sidebar-hover-color;
-      background-color: $lte-sidebar-hover-bg;
-    }
-
-    > .nav-link.active {
-      color: $lte-sidebar-hover-color;
-    }
-
-    // First Level Submenu
-    > .nav-treeview {
-      background-color: $lte-sidebar-submenu-bg;
-    }
-  }
-
-  // Section Heading
-  .nav-header {
-    color: $lte-sidebar-header-color;
-    background-color: inherit; //darken($lte-sidebar-bg, 3%);
-  }
-
-  // All links within the sidebar menu
-  .sidebar {
-    a {
-      color: $lte-sidebar-color;
-
-      &:hover,
-      &:focus {
-        text-decoration: none;
-      }
-    }
-  }
-
-  // All submenus
-  .nav-treeview {
-    > .nav-item {
-      > .nav-link {
-        color: $lte-sidebar-submenu-color;
-
-        &:hover,
-        &:focus {
-          color: $lte-sidebar-submenu-hover-color;
-          background-color: $lte-sidebar-submenu-hover-bg;
-        }
-      }
-
-      > .nav-link.active {
-        &,
-        &:hover,
-        &:focus {
-          color: $lte-sidebar-submenu-active-color;
-          background-color: $lte-sidebar-submenu-active-bg;
-        }
-      }
-    }
-  }
-}

package/src/scss/mixins/_nav-treeview-light.scss

@@ -1,89 +0,0 @@
-@mixin nav-treeview-light(
-  $lte-sidebar-bg,
-  $lte-sidebar-hover-bg,
-  $lte-sidebar-color,
-  $lte-sidebar-hover-color,
-  $lte-sidebar-active-color,
-  $lte-sidebar-submenu-bg,
-  $lte-sidebar-submenu-color,
-  $lte-sidebar-submenu-hover-color,
-  $lte-sidebar-submenu-hover-bg,
-  $lte-sidebar-submenu-active-color,
-  $lte-sidebar-submenu-active-bg,
-  $lte-sidebar-header-color
-) {
-  // Sidebar background color
-  background-color: $lte-sidebar-bg;
-
-  // Sidebar Menu. First level links
-  .nav-sidebar > .nav-item {
-    // links
-    > .nav-link {
-      // border-left: 3px solid transparent;
-      &:active,
-      &:focus {
-        color: $lte-sidebar-color;
-      }
-    }
-
-    // Hover and active states
-    &.menu-open > .nav-link,
-    &:hover > .nav-link {
-      color: $lte-sidebar-hover-color;
-      background-color: $lte-sidebar-hover-bg;
-    }
-
-    > .nav-link.active {
-      color: $lte-sidebar-active-color;
-    }
-
-    // First Level Submenu
-    > .nav-treeview {
-      background-color: $lte-sidebar-submenu-bg;
-    }
-  }
-
-  // Section Heading
-  .nav-header {
-    color: $lte-sidebar-header-color;
-    background-color: inherit;
-  }
-
-  // All links within the sidebar menu
-  .sidebar {
-    a {
-      color: $lte-sidebar-color;
-
-      &:hover {
-        text-decoration: none;
-      }
-    }
-  }
-
-  // All submenus
-  .nav-treeview {
-    > .nav-item {
-      > .nav-link {
-        color: $lte-sidebar-submenu-color;
-
-        &:hover,
-        &:focus {
-          color: $lte-sidebar-submenu-hover-color;
-          background-color: $lte-sidebar-submenu-hover-bg;
-        }
-      }
-
-      > .nav-link.active {
-        &,
-        &:hover {
-          color: $lte-sidebar-submenu-active-color;
-          background-color: $lte-sidebar-submenu-active-bg;
-        }
-      }
-
-      > .nav-link:hover {
-        background-color: $lte-sidebar-submenu-hover-bg;
-      }
-    }
-  }
-}

package/src/scss/mixins/_sidebar-color.scss

@@ -1,9 +0,0 @@
-// Sidebar Color
-@mixin sidebar-color($color) {
-  .nav-sidebar > .nav-item {
-    > .nav-link.active {
-      color: color-contrast($color);
-      background-color: $color;
-    }
-  }
-}