Merge branch 'master' into mtsvyatkova/fix-8786-master

Author: DiyanDimitrov

projects/igniteui-angular/src/lib/core/styles/base/utilities/_mixins.scss

@@ -345,3 +345,16 @@
         @content;
     }
 }
+
+/// Truncates text at a specific number of lines
+/// @param {number|string} $lines - The number of lines to show
+/// @param {Boolean} $inline - Sets whether an element displays inline-box or box
+/// @param {Boolean} $vertical - Sets whether an element lays out its contents horizontally or vertically
+/// @example scss Truncates text after the fourth line
+///    @include line-clamp(4, true, true);
+@mixin line-clamp($lines, $inline, $vertical) {
+    display: if($inline, -webkit-inline-box, -webkit-box);
+    -webkit-line-clamp: if($lines, $lines, initial);
+    -webkit-box-orient: if($vertical, vertical, initial);
+    overflow: hidden;
+}

projects/igniteui-angular/src/lib/core/styles/components/navbar/_navbar-theme.scss

@@ -90,7 +90,7 @@
 @mixin igx-navbar($theme) {
     @include igx-root-css-vars($theme);
 
-    $navbar-padding: 0 rem(16px);
+    $navbar-padding: rem(16px);
     $navbar-title-fz: rem(18px, 16px);
     $navbar-title-lh: rem(18px, 16px);
     $navbar-title-margin: 0;
@@ -103,12 +103,14 @@
         align-items: center;
         justify-content: space-between;
         width: 100%;
-        height: 56px;
+        min-height: 56px;
+        max-height: 128px;
         padding: $navbar-padding;
         background: --var($theme, 'background');
         color: --var($theme, 'text-color');
         box-shadow: --var($theme, 'shadow');
         z-index: 4;
+        overflow: hidden;
     }
 
     %igx-navbar-part {
@@ -117,6 +119,7 @@
     }
 
     %igx-navbar-title {
+        @include line-clamp(4, true, true);
         margin: $navbar-title-margin;
         flex-grow: 1;
         user-select: text;