fix(drop-down): remove shadow when list is empty #3977

Author: Lipata

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

@@ -17,6 +17,11 @@
         @extend %igx-drop-down__list !optional;
     }
 
+    @include e(list, $m: empty) {
+        @extend %igx-drop-down__list !optional;
+        @extend %igx-drop-down__list--empty !optional;
+    }
+
     @include e(list-scroll) {
         @extend %igx-drop-down__list-scroll !optional;
     }

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

@@ -229,15 +229,15 @@
         border: --var($theme, 'border-width') solid --var($theme, 'border-color');
     }
 
+    %igx-drop-down__list--empty {
+        box-shadow: none;
+    }
+
     %igx-drop-down__list-scroll {
         overflow-y: auto;
         overflow-x: hidden;
         position: relative;
 
-        &:empty {
-            box-shadow: none;
-        }
-
         igx-input-group {
             margin-top: -16px !important;
         }

projects/igniteui-angular/src/lib/drop-down/drop-down.component.html

@@ -1,4 +1,4 @@
-<div class="igx-drop-down__list" igxToggle [style.width]="width"
+<div [ngClass]="listClass()" igxToggle [style.width]="width"
 (onOpening)="onToggleOpening($event)" (onOpened)="onToggleOpened()" (onAppended)="onToggleContentAppended()"
 (onClosing)="onToggleClosing($event)" (onClosed)="onToggleClosed()">
     <div class="igx-drop-down__list-scroll" #scrollContainer [attr.id]="this.listId" role="listbox"

projects/igniteui-angular/src/lib/drop-down/drop-down.component.ts

@@ -524,6 +524,13 @@ export class IgxDropDownComponent extends IgxDropDownBaseDirective implements ID
         }
     }
 
+    /**
+     * @hidden @internal
+     */
+    public listClass() {
+        return this.items.length > 0 ? 'igx-drop-down__list' : 'igx-drop-down__list--empty';
+    }
+
     /**
      * Handles the `onSelection` emit and the drop down toggle when selection changes
      * @hidden