Merge branch 'master' into mpopov/bootstrap-dialog

Author: simeonoff

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

@@ -67,10 +67,6 @@
 
 @include b(igx-card-content) {
     @extend %igx-card-content !optional;
-
-    @include e(text) {
-        @extend %igx-card-content-text !optional;
-    }
 }
 
 @include b(igx-card-actions) {

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

@@ -123,43 +123,14 @@
 
     $variant: map-get($theme, 'variant');
     $not-material-theme: $variant != 'material';
-    $bootstrap-theme: $variant == 'bootstrap';
-
-    // Bootstrap card spacing
-    // if you need to change the spacing for the bootstrap card, please, change only $bs-spacing-val.
-    // All the margin will automatically calculate accordingly in order to keep the right proportion.
-    $bs-spacing-val: rem(20px);
-    $bs-margin-media: $bs-spacing-val;
-    $bs-margin-heading: rem(12px);
-    $bs-margin-heading-difference: calc(#{$bs-spacing-val} - #{$bs-margin-heading});
-    $bs-margin-content: rem(16px);
-    $bs-margin-actions: $bs-spacing-val;
-
-    $card-heading-padding: map-get((
-        material: rem(16px),
-        fluent: rem(16px),
-        bootstrap: 0 $bs-spacing-val,
-    ), $variant);
-
-    $card-heading-compact-padding: map-get((
-        material: rem(16px, 16px),
-        fluent: rem(16px, 16px),
-        bootstrap: 0 $bs-spacing-val,
-    ), $variant);
-
-    $card-content-padding: map-get((
-        material: rem(14px),
-        fluent: rem(14px),
-        bootstrap: 0 $bs-spacing-val,
-    ), $variant);
-
-    $card-actions-padding: map-get((
-        material: rem(8px),
-        fluent: rem(8px),
-        bootstrap: 0 $bs-spacing-val,
-    ), $variant);
+
+    $card-heading-padding: rem(16px);
+    $card-heading-compact-padding: rem(16px, 16px);
+    $card-content-padding: rem(14px);
+    $card-actions-padding: rem(8px);
 
     $card-tgroup-margin: 0 em(16px);
+
     $card-transitions: box-shadow .3s cubic-bezier(.25, .8, .25, 1);
     $left: if-ltr(left, right);
     $right: if-ltr(right, left);
@@ -204,21 +175,9 @@
         width: 100%;
         padding: $card-heading-padding;
         color: --var($theme, 'header-text-color');
-        @if $bootstrap-theme {
-            margin-bottom: $bs-margin-heading;
-
-            &:first-child {
-                padding-top: $bs-spacing-val;
-            }
-
-            &:last-child {
-                margin-bottom: calc(#{$bs-margin-heading-difference} + #{$bs-margin-heading});
-            }
-        }
 
         &:empty {
             display: block;
-            min-height: $bs-spacing-val;
             padding: 0;
         }
     }
@@ -277,31 +236,12 @@
         flex: 1 1 auto;
         padding: $card-content-padding;
         color: --var($theme, 'content-text-color');
-
-        @if $bootstrap-theme {
-            margin-bottom: $bs-margin-content;
-
-            &:first-child {
-                padding-top: $bs-spacing-val;
-            }
-
-            &:last-child {
-                margin-bottom: calc(#{$bs-margin-heading-difference} + #{$bs-margin-heading});
-            }
-        }
     }
 
     %igx-card-media {
         display: block;
         overflow: hidden;
         line-height: 0;
-        @if $bootstrap-theme {
-            margin-bottom: $bs-margin-media;
-
-            &:last-child {
-                margin-bottom: 0;
-            }
-        }
 
         > * {
             width: 100%;
@@ -323,13 +263,6 @@
         flex: 0 1 auto;
         align-items: center;
         padding: $card-actions-padding;
-        @if $bootstrap-theme {
-            margin-bottom: $bs-margin-actions;
-
-            &:first-child {
-                padding-top: $bs-spacing-val;
-            }
-        }
 
         [igxButton] ~ [igxButton] {
             margin-#{$left}: rem(8px);

src/app/card/card.sample.html

@@ -193,7 +193,7 @@ <h3 class="igx-card-header__title--small">{{ cards[6].title }}</h3>
                         <h5 class="igx-card-header__subtitle">{{ cards[6].subtitle }}</h5>
                     </div>
                 </igx-card-header>
-                <div style="overflow: hidden">
+                <div style="overflow: hidden; line-height: 0">
                     <img width="100%" height="100%" [src]="cards[6].imageUrl">
                 </div>
                 <igx-card-actions>