Fixing card layout

Author: MPopov

projects/igniteui-angular/src/lib/core/styles/components/drop-down/_drop-down-component.scss

@@ -24,6 +24,14 @@
         @extend %igx-drop-down__item !optional;
     }
 
+    @include e(item, $m: cosy) {
+        @extend %igx-drop-down__item--cosy !optional;
+    }
+
+    @include e(item, $m: compact) {
+        @extend %igx-drop-down__item--compact !optional;
+    }
+
     @include e(item, $m: focused) {
         @extend %igx-drop-down__item--focused !optional;
     }
@@ -44,6 +52,14 @@
         @extend %igx-drop-down__header !optional;
     }
 
+    @include e(header, $m: cosy) {
+        @extend %igx-drop-down__header--cosy !optional;
+    }
+
+    @include e(header, $m: cosy) {
+        @extend %igx-drop-down__header--compact !optional;
+    }
+
     @include e(group) {
         @extend %igx-drop-down__group !optional;
     }

projects/igniteui-angular/src/lib/core/styles/components/drop-down/_drop-down-theme.scss

@@ -181,11 +181,13 @@
 @mixin igx-drop-down($theme) {
     @include igx-root-css-vars($theme);
 
-    $desktop-item-height: 48px;
-    $mobile-item-height: 32px;
+    $item-height: (
+        confortable: rem(48px),
+        cosy: rem(32px),
+        compoact: rem(24px)
+    );
 
     $item-padding: 16px;
-
     $desktop-header-padding: 16px;
     $mobile-header-padding: 8px;
 
@@ -223,12 +225,20 @@
         align-items: center;
         width: 100%;
         white-space: nowrap;
+        height: map-get($item-height, 'confortable');
+    }
+
+    %igx-drop-down__item--cosy {
+        height: map-get($item-height, 'cosy');
+    }
+
+    %igx-drop-down__item--compact {
+        height: map-get($item-height, 'compact');
     }
 
     %igx-drop-down__item {
         color: --var($theme, 'item-text-color');
         cursor: pointer;
-        height: rem($desktop-item-height);
         padding: 0 rem($item-padding);
 
         &:focus {
@@ -257,6 +267,14 @@
         padding: rem(8px) rem($desktop-header-padding);
     }
 
+    %igx-drop-down__header--cosy {
+        height: map-get($item-height, 'cosy');
+    }
+
+    %igx-drop-down__header--compact {
+        height: map-get($item-height, 'compact');
+    }
+
     %igx-drop-down__group {
         pointer-events: auto;