Merge branch 'dropdown-poc' of https://github.com/IgniteUI/igniteui-a…

…ngular into dropdown-poc
IgniteUI · May 18, 2018 · 404433a · 404433a
2 parents 5f61524 + 7466b7c
commit 404433a
Show file tree

Hide file tree

Showing 2 changed files with 19 additions and 19 deletions.
diff --git a/demos/app/drop-down/sample.component.css b/demos/app/drop-down/sample.component.css
@@ -7,4 +7,5 @@
     overflow: hidden;
     text-overflow: ellipsis;
     white-space: nowrap;
+    width: 100%
 }
diff --git a/src/core/styles/components/drop-down/_drop-down-theme.scss b/src/core/styles/components/drop-down/_drop-down-theme.scss
@@ -25,7 +25,7 @@
 @function igx-drop-down-theme(
     $palette: $default-palette,
 
-    $drop-down-background-color: null,
+    $background-color: null,
     $header-text-color: null,
 
     $item-text-color: null,
@@ -45,7 +45,7 @@
 
     $default-theme: (
         name: 'igx-drop-down',
-        drop-down-background-color: #fff,
+        background-color: #fff,
         header-text-color: igx-color($palette, 'secondary', 500),
         item-text-color: igx-color($palette, 'grays', 800),
         hover-item-text-color: igx-color($palette, 'grays', 800),
@@ -58,22 +58,22 @@
         disabled-item-text-color: igx-color($palette, 'grays', 500)
     );
 
-    @if not($item-text-color) and $drop-down-background-color {
-        $item-text-color: text-contrast($drop-down-background-color);
+    @if not($item-text-color) and $background-color {
+        $item-text-color: text-contrast($background-color);
     }
 
-    @if not($hover-item-background) and $drop-down-background-color {
-        $hover-item-background: rgba(text-contrast($drop-down-background-color), .12);
-        $hover-item-text-color: text-contrast($drop-down-background-color);
+    @if not($hover-item-background) and $background-color {
+        $hover-item-background: rgba(text-contrast($background-color), .12);
+        $hover-item-text-color: text-contrast($background-color);
     }
 
-    @if not($hover-item-text-color) and $drop-down-background-color {
-        $hover-item-text-color: text-contrast($drop-down-background-color);
+    @if not($hover-item-text-color) and $background-color {
+        $hover-item-text-color: text-contrast($background-color);
     }
 
-    @if not($focused-item-background) and $drop-down-background-color {
-        $focused-item-background: rgba(text-contrast($drop-down-background-color), .12);
-        $focus-item-text-color: text-contrast($drop-down-background-color);
+    @if not($focused-item-background) and $background-color {
+        $focused-item-background: rgba(text-contrast($background-color), .12);
+        $focus-item-text-color: text-contrast($background-color);
     }
 
     @if not($focus-item-text-color) and $focused-item-background {
@@ -84,22 +84,22 @@
         $selected-item-text-color: text-contrast($selected-item-background);
     }
 
-    @if not($disabled-item-text-color) and $drop-down-background-color {
-        $disabled-item-text-color: rgba(text-contrast($drop-down-background-color), .36);
+    @if not($disabled-item-text-color) and $background-color {
+        $disabled-item-text-color: rgba(text-contrast($background-color), .36);
     }
 
     @if not($disabled-item-text-color) and $disabled-item-background {
         $disabled-item-text-color: rgba(text-contrast($disabled-item-background), .36);
     }
 
-    @if not($header-text-color) and $drop-down-background-color {
-        $header-text-color: rgba(text-contrast($drop-down-background-color), .7);
+    @if not($header-text-color) and $background-color {
+        $header-text-color: rgba(text-contrast($background-color), .7);
     }
 
     @return extend($default-theme,
     (
         pallete: $palette,
-        drop-down-background-color: $drop-down-background-color,
+        background-color: $background-color,
         header-text-color: $header-text-color,
         item-text-color: $item-text-color,
         hover-item-text-color: $hover-item-text-color,
@@ -154,7 +154,7 @@
         // We need that calc to fix a bug with ellipsis which makes the ellipsis to appear even when there is no need
         min-width: calc(100% + 32px);
         box-shadow: $dd-shadow;
-        background: --var($theme, 'drop-down-background-color');
+        background: --var($theme, 'background-color');
     }
 
     %igx-drop-down__header,
@@ -247,4 +247,3 @@
         }
     }
 }
-