Merge branch 'master' of https://github.com/IgniteUI/igniteui-angular into rkaraivanov/keyboard-fixes

Author: rkaraivanov

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);

projects/igniteui-angular/src/lib/core/styles/components/dialog/_dialog-theme.scss

@@ -148,6 +148,7 @@
     }
 
     %igx-dialog-title {
+        display: flex;
         color: --var($theme, 'title-color');
         padding: $dialog-title-padding;
 

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>

src/app/dialog/dialog.sample.css

@@ -3,7 +3,7 @@
 }
 
 .login-form {
-    padding: 24px;
+    padding: 0 24px 24px 24px;
 }
 
 .icon {

src/app/dialog/dialog.sample.html

@@ -90,5 +90,38 @@ <h4 class="sample-title">Custom Dialog</h4>
                 </div>
             </igx-dialog>
         </article>
+
+        <article class="sample-column">
+            <h4 class="sample-title">Templated Dialog</h4>
+            <p class="sample-description">Detailed description to be added</p>
+            <br>
+            <button igxButton="raised" igxRipple (click)="templated.open()">Trigger</button>
+
+            <igx-dialog #templated [closeOnOutsideSelect]="true">
+                <igx-dialog-title>Title</igx-dialog-title>
+
+                <div class="login-form">
+                    <igx-input-group>
+                        <igx-prefix>
+                            <igx-icon>person</igx-icon>
+                        </igx-prefix>
+                        <input type="text" igxInput />
+                        <label igxLabel>Username</label>
+                    </igx-input-group>
+                    <igx-input-group>
+                        <igx-prefix>
+                            <igx-icon>lock</igx-icon>
+                        </igx-prefix>
+                        <label igxLabel>Password</label>
+                        <input type="password" igxInput />
+                    </igx-input-group>
+                </div>
+
+                <igx-dialog-actions>
+                    <button igxButton (click)="templated.close()">CANCEL</button>
+                    <button igxButton (click)="templated.close()">SIGN IN</button>
+                </igx-dialog-actions>
+            </igx-dialog>
+        </article>
     </section>
 </div>