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

Closes #2960
IgniteUI · Jun 10, 2019 · 1c2bdd2 · 1c2bdd2
1 parent cb45c3e
commit 1c2bdd2
Show file tree

Hide file tree

Showing 2 changed files with 31 additions and 12 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
@@ -56,7 +56,7 @@
         @extend %igx-drop-down__header--cosy !optional;
     }
 
-    @include e(header, $m: cosy) {
+    @include e(header, $m: compact) {
         @extend %igx-drop-down__header--compact !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
@@ -184,12 +184,18 @@
     $item-height: (
         confortable: rem(48px),
         cosy: rem(32px),
-        compoact: rem(24px)
+        compact: rem(24px)
     );
 
-    $item-padding: 16px;
-    $desktop-header-padding: 16px;
-    $mobile-header-padding: 8px;
+    $item-padding-confortable:rem(16px);
+    $item-padding-cosy:rem(8px);
+    $item-padding-compact:rem(16px);
+
+    $item-padding: (
+        confortable: 0 $item-padding-confortable,
+        cosy: 0 $item-padding-cosy,
+        compact: 0 $item-padding-compact
+    );
 
     %igx-drop-down {
         max-height: 100%;
@@ -214,10 +220,6 @@
         }
     }
 
-    %igx-drop-down__list--select {
-        max-width: calc(100% + #{$item-padding} * 2);
-    }
-
     %igx-drop-down__header,
     %igx-drop-down__item {
         display: flex;
@@ -230,16 +232,30 @@
 
     %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;
-        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;
@@ -264,15 +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 {
@@ -283,7 +302,7 @@
         }
 
         %igx-drop-down__item {
-            text-indent: rem($desktop-header-padding);
+            text-indent: map-get($item-padding, 'confortable') ;
         }
     }