refactor(card): Change spacings according to the new design

Author: desig9stein

projects/igniteui-angular/src/lib/core/styles/components/card/_card-theme.scss

@@ -115,7 +115,6 @@
 
     $card-heading-padding: rem(16px, 16px);
     $card-content-padding: rem(16px);
-    $card-actions-padding: rem(8px);
 
     $card-tgroup-margin: 0 em(16px);
 
@@ -259,6 +258,14 @@
     }
 
     %igx-card-actions {
+        $card-actions-padding: map.get((
+            'material': rem(8px) rem(16px),
+            'fluent': rem(8px) rem(16px),
+            'bootstrap': rem(16px),
+            'indigo': rem(16px),
+        ), $variant);
+
+
         display: flex;
         flex-flow: row wrap;
         justify-content: space-between;
@@ -282,21 +289,13 @@
     }
 
     @if $variant == 'bootstrap' {
-        %igx-card-content {
-            @if $variant == 'bootstrap' {
-                padding-block: rem(16px) rem(24px);
-                padding-inline: rem(24px);
-            }
-        }
-
-        %igx-card-actions {
-            padding: rem(16px);
+        %igx-card-content + %igx-card-actions {
+            padding-block-start: rem(24px);
         }
     }
 
     @if $variant == 'indigo' {
-        %igx-card-content,
-        %igx-card-actions {
+        %igx-card-content {
             padding: rem(16px);
         }
 

src/app/card/card.sample.html

@@ -154,7 +154,7 @@ <h5 igxCardHeaderSubtitle>{{ cards[2].subtitle }}</h5>
                     </igx-card-actions>
                 </div>
 
-                <igx-card-media width="86px" height="132px">
+                <igx-card-media width="86px" height="auto">
                     <img [src]="cards[2].imageUrl" />
                 </igx-card-media>
             </igx-card>