Merge pull request #7809 from IgniteUI/mpopov/navdrawer-glued-items

Fix navdrawer issues

Author: simeonoff

projects/igniteui-angular/src/lib/core/styles/components/navdrawer/_navdrawer-theme.scss

@@ -158,6 +158,7 @@
 
     $drawer-icon-size: rem(24px);
     $drawer-item-margin: rem(8px);
+    $text-side-padding: rem(8px);
     $drawer-item-min-h: auto;
     $drawer-item-max-h: rem(48px);
     $drawer-item-min-w: rem(32px);
@@ -297,15 +298,15 @@
         color: --var($theme, 'item-text-color');
         max-height: $drawer-item-max-h;
         min-width: $drawer-item-min-w;
-        margin: $drawer-item-margin;
 
         @if $variant != 'indigo-design' {
+            // important is needed to override the typography margins
+            margin: $drawer-item-margin !important;
             padding: rem(12px) rem(8px);
         } @else {
-            padding: rem(4px) rem(4px);
-
             // important is needed to override the typography margins
             margin: rem(15px) $drawer-item-margin !important;
+            padding: rem(4px);
         }
 
         cursor: pointer;
@@ -319,7 +320,17 @@
         justify-content: flex-start;
 
         > igx-icon + span {
-            margin-#{$left}: rem(32px);
+            @if $variant == 'indigo-design' {
+                margin-#{$left}: calc(32px - #{$text-side-padding});
+            } @else {
+                margin-#{$left}: rem(32px);
+            }
+        }
+
+        span {
+            @if $variant == 'indigo-design' {
+                padding-#{$left}: $text-side-padding;
+            }
         }
 
         igx-icon {