enhanced CardWidget & card style with nav-tabs

build/js/CardWidget.js

@@ -27,6 +27,8 @@ const CardWidget = (($) => {
   const ClassName = {
     CARD: 'card',
     COLLAPSED: 'collapsed-card',
+    COLLAPSING: 'collapsing-card',
+    EXPANDING: 'expanding-card',
     WAS_COLLAPSED: 'was-collapsed',
     MAXIMIZED: 'maximized-card',
   }
@@ -66,9 +68,9 @@ const CardWidget = (($) => {
     }
 
     collapse() {
-      this._parent.children(`${Selector.CARD_BODY}, ${Selector.CARD_FOOTER}`)
+      this._parent.addClass(ClassName.COLLAPSING).children(`${Selector.CARD_BODY}, ${Selector.CARD_FOOTER}`)
         .slideUp(this._settings.animationSpeed, () => {
-          this._parent.addClass(ClassName.COLLAPSED)
+          this._parent.addClass(ClassName.COLLAPSED).removeClass(ClassName.COLLAPSING)
         })
 
       this._parent.find('> ' + Selector.CARD_HEADER + ' ' + this._settings.collapseTrigger + ' .' + this._settings.collapseIcon)
@@ -81,9 +83,9 @@ const CardWidget = (($) => {
     }
 
     expand() {
-      this._parent.children(`${Selector.CARD_BODY}, ${Selector.CARD_FOOTER}`)
+      this._parent.addClass(ClassName.EXPANDING).children(`${Selector.CARD_BODY}, ${Selector.CARD_FOOTER}`)
         .slideDown(this._settings.animationSpeed, () => {
-          this._parent.removeClass(ClassName.COLLAPSED)
+          this._parent.removeClass(ClassName.COLLAPSED).removeClass(ClassName.EXPANDING)
         })
 
       this._parent.find('> ' + Selector.CARD_HEADER + ' ' + this._settings.collapseTrigger + ' .' + this._settings.expandIcon)

build/scss/_cards.scss

@@ -108,6 +108,34 @@
         }
       }
     }
+
+    .card-tools {
+      margin: .3rem .5rem;
+    }
+
+    &:not(.expanding-card).collapsed-card {
+      .card-header {
+        border-bottom: 0;
+
+        .nav-tabs {
+          border-bottom: 0;
+
+          .nav-item {
+            margin-bottom: 0;
+          }
+        }
+      }
+    }
+
+    &.expanding-card {
+      .card-header {
+        .nav-tabs {
+          .nav-item {
+            margin-bottom: -1px;
+          }
+        }
+      }
+    }
   }
 
   &.card-outline-tabs {
@@ -135,6 +163,32 @@
         }
       }
     }
+
+    .card-tools {
+      margin: .5rem .5rem .3rem;
+    }
+
+    &:not(.expanding-card).collapsed-card .card-header {
+      border-bottom: 0;
+
+      .nav-tabs {
+        border-bottom: 0;
+
+        .nav-item {
+          margin-bottom: 0;
+        }
+      }
+    }
+
+    &.expanding-card {
+      .card-header {
+        .nav-tabs {
+          .nav-item {
+            margin-bottom: -1px;
+          }
+        }
+      }
+    }
   }
 
 }

dist/css/adminlte.css

@@ -17561,6 +17561,26 @@ textarea.form-control.is-warning {
   margin-left: 0;
 }
 
+.card.card-tabs .card-tools {
+  margin: .3rem .5rem;
+}
+
+.card.card-tabs:not(.expanding-card).collapsed-card .card-header {
+  border-bottom: 0;
+}
+
+.card.card-tabs:not(.expanding-card).collapsed-card .card-header .nav-tabs {
+  border-bottom: 0;
+}
+
+.card.card-tabs:not(.expanding-card).collapsed-card .card-header .nav-tabs .nav-item {
+  margin-bottom: 0;
+}
+
+.card.card-tabs.expanding-card  .card-header .nav-tabs .nav-item {
+  margin-bottom: -1px;
+}
+
 .card.card-outline-tabs {
   border-top: 0;
 }
@@ -17582,6 +17602,26 @@ textarea.form-control.is-warning {
   margin-top: 0;
 }
 
+.card.card-outline-tabs .card-tools {
+  margin: .5rem .5rem .3rem;
+}
+
+.card.card-outline-tabs:not(.expanding-card).collapsed-card .card-header {
+  border-bottom: 0;
+}
+
+.card.card-outline-tabs:not(.expanding-card).collapsed-card .card-header .nav-tabs {
+  border-bottom: 0;
+}
+
+.card.card-outline-tabs:not(.expanding-card).collapsed-card .card-header .nav-tabs .nav-item {
+  margin-bottom: 0;
+}
+
+.card.card-outline-tabs.expanding-card  .card-header .nav-tabs .nav-item {
+  margin-bottom: -1px;
+}
+
 html.maximized-card {
   overflow: hidden;
 }

dist/js/adminlte.js

@@ -1126,6 +1126,8 @@
     var ClassName = {
       CARD: 'card',
       COLLAPSED: 'collapsed-card',
+      COLLAPSING: 'collapsing-card',
+      EXPANDING: 'expanding-card',
       WAS_COLLAPSED: 'was-collapsed',
       MAXIMIZED: 'maximized-card'
     };
@@ -1169,8 +1171,8 @@
       _proto.collapse = function collapse() {
         var _this = this;
 
-        this._parent.children(Selector.CARD_BODY + ", " + Selector.CARD_FOOTER).slideUp(this._settings.animationSpeed, function () {
-          _this._parent.addClass(ClassName.COLLAPSED);
+        this._parent.addClass(ClassName.COLLAPSING).children(Selector.CARD_BODY + ", " + Selector.CARD_FOOTER).slideUp(this._settings.animationSpeed, function () {
+          _this._parent.addClass(ClassName.COLLAPSED).removeClass(ClassName.COLLAPSING);
         });
 
         this._parent.find('> ' + Selector.CARD_HEADER + ' ' + this._settings.collapseTrigger + ' .' + this._settings.collapseIcon).addClass(this._settings.expandIcon).removeClass(this._settings.collapseIcon);
@@ -1183,8 +1185,8 @@
       _proto.expand = function expand() {
         var _this2 = this;
 
-        this._parent.children(Selector.CARD_BODY + ", " + Selector.CARD_FOOTER).slideDown(this._settings.animationSpeed, function () {
-          _this2._parent.removeClass(ClassName.COLLAPSED);
+        this._parent.addClass(ClassName.EXPANDING).children(Selector.CARD_BODY + ", " + Selector.CARD_FOOTER).slideDown(this._settings.animationSpeed, function () {
+          _this2._parent.removeClass(ClassName.COLLAPSED).removeClass(ClassName.EXPANDING);
         });
 
         this._parent.find('> ' + Selector.CARD_HEADER + ' ' + this._settings.collapseTrigger + ' .' + this._settings.expandIcon).addClass(this._settings.collapseIcon).removeClass(this._settings.expandIcon);