style(drop-down): Aadding classes for different density types

Closes #2960
IgniteUI · Jun 10, 2019 · c6dccb1 · c6dccb1
1 parent a2cf288
commit c6dccb1
Show file tree

Hide file tree

Showing 2 changed files with 66 additions and 13 deletions.
diff --git a/projects/igniteui-angular/src/lib/core/styles/components/drop-down/_drop-down-component.scss b/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: compact) {
+        @extend %igx-drop-down__header--compact !optional;
+    }
+
     @include e(group) {
         @extend %igx-drop-down__group !optional;
     }

diff --git a/projects/igniteui-angular/src/lib/core/styles/components/drop-down/_drop-down-theme.scss b/projects/igniteui-angular/src/lib/core/styles/components/drop-down/_drop-down-theme.scss
@@ -181,13 +181,21 @@
 @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),
+        compact: rem(24px)
+    );
 
-    $item-padding: 16px;
+    $item-padding-confortable:rem(16px);
+    $item-padding-cosy:rem(8px);
+    $item-padding-compact:rem(16px);
 
-    $desktop-header-padding: 16px;
-    $mobile-header-padding: 8px;
+    $item-padding: (
+        confortable: 0 $item-padding-confortable,
+        cosy: 0 $item-padding-cosy,
+        compact: 0 $item-padding-compact
+    );
 
     %igx-drop-down {
         max-height: 100%;
@@ -212,24 +220,42 @@
         }
     }
 
-    %igx-drop-down__list--select {
-        max-width: calc(100% + #{$item-padding} * 2);
-    }
-
     %igx-drop-down__header,
     %igx-drop-down__item {
         display: flex;
         justify-content: flex-start;
         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');
+        padding: map-get($item-padding, 'cosy');
+        //
+        //&%igx-drop-down__list--select {
+        //    max-width: calc(100% + #{$item-padding-cosy} * 2);
+        //}
+    }
+
+    %igx-drop-down__item--compact {
+        height: map-get($item-height, 'compact');
+        padding: map-get($item-padding, 'compact');
+        //
+        //&%igx-drop-down__list--select {
+        //    max-width: calc(100% + #{$item-padding-compact} * 2);
+        //}
     }
 
     %igx-drop-down__item {
         color: --var($theme, 'item-text-color');
         cursor: pointer;
-        height: rem($desktop-item-height);
-        padding: 0 rem($item-padding);
+        padding: map-get($item-padding, 'confortable');
+
+        //&%igx-drop-down__list--select {
+        //    max-width: calc(100% + #{$item-padding-confortable} * 2);
+        //}
 
         &:focus {
             outline: 0;
@@ -254,7 +280,18 @@
     %igx-drop-down__header {
         color: --var($theme, 'header-text-color');
         pointer-events: none;
-        padding: rem(8px) rem($desktop-header-padding);
+        padding: map-get($item-padding, 'confortable');
+    }
+
+    %igx-drop-down__header--cosy {
+        height: map-get($item-height, 'cosy');
+        padding: map-get($item-padding, 'confortable');
+
+    }
+
+    %igx-drop-down__header--compact {
+        height: map-get($item-height, 'compact');
+        padding: map-get($item-padding, 'confortable');
     }
 
     %igx-drop-down__group {
@@ -265,7 +302,7 @@
         }
 
         %igx-drop-down__item {
-            text-indent: rem($desktop-header-padding);
+            text-indent: map-get($item-padding, 'confortable') ;
         }
     }