Sass: panels to cards

src/app/theme/sass/_typography.scss

@@ -47,20 +47,20 @@ h5 {
   .typography-widget {
     height: 100%;
 
-    .panel {
+    .card {
       height: 620px;
     }
 
-    .panel-title{
+    .card-title{
       text-align: center;
       width: 100%;
     }
 
-    .panel.with-scroll .panel-body{
+    .card.with-scroll .card-body{
       height: calc(100% - 45px);
     }
 
-    .panel-content{
+    .card-content{
       padding: 15px 22px 5px 22px;
     }
 
@@ -421,11 +421,11 @@ a.learn-more {
   padding: 0 20px 50px 20px;
 }
 
-.panel.banner-column-panel {
+.card.banner-column-card {
   padding: 0;
   margin-bottom: 90px;
 
-  .panel-body{
+  .card-body{
     padding: 0;
   }
 }

src/app/theme/sass/bootstrap-overrides/_card.scss

@@ -1,5 +1,5 @@
 $card-title-height: 44px;
-$card-heading-font-size: 16px;
+$card-header-font-size: 16px;
 
 .card {
   border: none;
@@ -47,11 +47,11 @@ $card-heading-font-size: 16px;
   height: 100%;
 }
 
-.card-heading, .card-footer {
+.card-header, .card-footer {
   height: $card-title-height;
-  font-size: $card-heading-font-size;
+  font-size: $card-header-font-size;
 
-  $vertical-padding: ($card-title-height - $card-heading-font-size) / 2;
+  $vertical-padding: ($card-title-height - $card-header-font-size) / 2;
   padding: $vertical-padding 22px;
 
 }
@@ -65,7 +65,7 @@ $card-heading-font-size: 16px;
 
 .card-white, .card-blur {
   background-size: cover;
-  > .card-heading {
+  > .card-header {
     background-color: transparent;
     border: none;
     color: $default-text;
@@ -83,7 +83,7 @@ $card-heading-font-size: 16px;
 }
 
 .card-primary {
-  > .card-heading {
+  > .card-header {
     color: $primary;
     background-color: $primary-bg;
     border-color: $primary-bg;
@@ -91,7 +91,7 @@ $card-heading-font-size: 16px;
 }
 
 .card-success {
-  > .card-heading {
+  > .card-header {
     color: $success;
     background-color: $success-bg;
     border-color: $success-bg;
@@ -99,7 +99,7 @@ $card-heading-font-size: 16px;
 }
 
 .card-info {
-  > .card-heading {
+  > .card-header {
     color: $info;
     background-color: $info-bg;
     border-color: $info-bg;
@@ -107,7 +107,7 @@ $card-heading-font-size: 16px;
 }
 
 .card-warning {
-  > .card-heading {
+  > .card-header {
     color: $warning;
     background-color: $warning-bg;
     border-color: $warning-bg;
@@ -115,7 +115,7 @@ $card-heading-font-size: 16px;
 }
 
 .card-danger {
-  > .card-heading {
+  > .card-header {
     color: $danger;
     background-color: $danger-bg;
     border-color: $danger-bg;
@@ -123,13 +123,13 @@ $card-heading-font-size: 16px;
 }
 
 .card-primary, .card-success, .card-info, .card-warning, .card-danger {
-  .card-heading {
+  .card-header {
     color: rgba(255, 255, 255, 0.8);
   }
 }
 
 .card.bootstrap-card {
-  .card-body, .card-heading {
+  .card-body, .card-header {
     p, div, span {
       color: $default-text;
     }
@@ -142,7 +142,7 @@ $card-heading-font-size: 16px;
   &.card-info,
   &.card-warning,
   &.card-danger {
-    .card-heading {
+    .card-header {
       p, div, span {
         color: rgba(255, 255, 255, 0.8);
       }
@@ -151,13 +151,13 @@ $card-heading-font-size: 16px;
 }
 
 .card-group .card.accordion-card {
-  .card-heading {
+  .card-header {
     border-bottom: 0;
   }
 }
 
 .card-group .card {
-  .card-heading {
+  .card-header {
     border-bottom: 1px solid #ddd;
   }
 }

src/app/theme/sass/bootstrap-overrides/_tabs.scss

@@ -168,26 +168,26 @@
   border: none;
 }
 
-.panel-primary, .panel-info, .panel-success, .panel-warning, .panel-danger, {
-  .panel-heading {
+.card-primary, .card-info, .card-success, .card-warning, .card-danger, {
+  .card-header {
     border-radius: 4px;
   }
 
-  &.panel-open .panel-heading {
+  &.card-open .card-header {
     border-bottom-left-radius: 0;
     border-bottom-right-radius: 0;
   }
 
-  &:not(.panel-open) .panel-heading {
+  &:not(.card-open) .card-header {
     transition-delay: .3s;
   }
 
-  > .panel-heading + .panel-collapse > .panel-body {
+  > .card-header + .card-collapse > .card-body {
     border-top: none;
   }
 }
 
-.accordion-panel .panel-heading {
+.accordion-card .card-header {
   padding: 0;
   .accordion-toggle {
     display: inline-block;

src/app/theme/sass/bootstrap-overrides/overrides.scss

@@ -1,3 +1,3 @@
-@import "panel";
+@import "card";
 @import "dropdown";
 @import "tabs";

src/app/theme/sass/conf/_mixins.scss

@@ -96,7 +96,7 @@
   p,
   h1, h2, h3, h4, h5, h6,
   .pie-chart-item,
-  .card-heading > .dropdown .dropdown-toggle,
+  .card-header > .dropdown .dropdown-toggle,
   .card-title,
   ol.blur span,
   ul.blur,