[Card]: refactor spacings (#1620)

Author: desig9stein

src/components/card/themes/card.actions.base.scss

@@ -6,7 +6,7 @@
     flex-flow: column nowrap;
     align-items: flex-end;
     justify-content: space-between;
-    padding: rem(8px);
+    padding: rem(8px) rem(16px);
     flex-basis: min-content;
 }
 

src/components/card/themes/container.ts

@@ -14,6 +14,7 @@ import { styles as indigoLight } from './light/container/card.indigo.css.js';
 import { styles as materialLight } from './light/container/card.material.css.js';
 import { styles as sharedLight } from './light/container/card.shared.css.js';
 // Shared Styles
+import { styles as bootstrap } from './shared/container/card.bootstrap.css.js';
 import { styles as fluent } from './shared/container/card.fluent.css.js';
 import { styles as indigo } from './shared/container/card.indigo.css.js';
 
@@ -22,7 +23,7 @@ const light = {
     ${sharedLight}
   `,
   bootstrap: css`
-    ${bootstrapLight}
+    ${bootstrap} ${bootstrapLight}
   `,
   material: css`
     ${materialLight}

src/components/card/themes/shared/container/card.bootstrap.scss

@@ -0,0 +1,15 @@
+@use 'styles/utilities' as *;
+@use '../../light/themes' as *;
+
+$theme: $bootstrap;
+
+:host {
+    ::slotted(igc-card-content:only-child) {
+        padding-block-end: rem(16px);
+    }
+
+    ::slotted(igc-card-content:last-child) {
+        padding-block-end: rem(16px);
+    }
+}
+

src/components/card/themes/shared/container/card.indigo.scss

@@ -4,6 +4,10 @@
 $theme: $indigo;
 
 :host {
+    ::slotted(igc-card-header) {
+        padding-block-end: 0;
+    }
+
     ::slotted(igc-card-header:first-child),
     ::slotted(igc-card-header:last-child) {
         padding-block-end: rem(16px);

src/components/card/themes/shared/content/card.content.bootstrap.scss

@@ -3,8 +3,8 @@
 :host {
     @include type-style('body-1');
 
-    padding-block: rem(16px) rem(24px);
-    padding-inline: rem(24px);
+    padding-inline: rem(16px);
+    padding-block: rem(16px) rem(24px) ;
 }
 
 ::slotted(*) {

src/components/card/themes/shared/header/card.header.bootstrap.scss

@@ -1,7 +1,9 @@
 @use 'styles/utilities' as *;
 
 ::slotted([slot='title']) {
-    @include type-style('h5');
+    @include type-style('h5') {
+        margin: 0;
+    };
 }
 
 ::slotted([slot='subtitle']) {

src/components/card/themes/shared/header/card.header.fluent.scss

@@ -9,5 +9,5 @@
 }
 
 :host {
-    padding: rem(16px) rem(8px);
+    padding: rem(16px);
 }

src/components/card/themes/shared/header/card.header.indigo.scss

@@ -1,8 +1,6 @@
 @use 'styles/utilities' as *;
 
 :host {
-    padding-block-end: 0;
-
     ::slotted(igc-avatar) {
         --ig-size: 3;
     }