feat(global elevation): Adding global elevation for all components that have elevation.

Author: MPopov

projects/igniteui-angular/src/lib/core/styles/components/chip/_chip-theme.scss

@@ -42,6 +42,7 @@
 @function igx-chip-theme(
     $palette: $default-palette,
     $schema: $light-schema,
+    $elevations: $elevations,
     $border-radius: null,
 
     $text-color: null,
@@ -67,7 +68,9 @@
 
     $focus-selected-text-color: null,
     $focus-selected-background: null,
-    $focus-selected-border-color: null
+    $focus-selected-border-color: null,
+
+    $ghost-shadow: null,
 ) {
     $name: 'igx-chip';
     $chip-schema: map-get($schema, $name);
@@ -165,6 +168,11 @@
         $focus-selected-border-color: $border-color;
     }
 
+    @if not($ghost-shadow) {
+        $ghost-elevation: map-get($chip-schema, 'ghost-elevation');
+        $ghost-shadow: igx-elevation($elevations, $ghost-elevation);
+    }
+
     @return extend($theme, (
         name: $name,
         palette: $palette,
@@ -193,7 +201,9 @@
 
         focus-selected-text-color: $focus-selected-text-color,
         focus-selected-background: $focus-selected-background,
-        focus-selected-border-color: $focus-selected-border-color
+        focus-selected-border-color: $focus-selected-border-color,
+
+        ghost-shadow: $ghost-shadow,
     ));
 }
 
@@ -486,7 +496,7 @@
     %igx-chip__ghost {
         position: absolute;
         z-index: 10;
-        box-shadow: igx-elevation($elevations, 8);
+        box-shadow: --var($theme, 'ghost-shadow');
         overflow: hidden;
         background: --var($theme, 'ghost-background');
 

projects/igniteui-angular/src/lib/core/styles/themes/_index.scss

@@ -124,11 +124,16 @@
             $palette,
             $schema,
             $border-radius: $roundness,
+            $shadow: if($elevation == false, 0, null),
         ));
     }
 
     @if not(index($exclude, 'igx-bottom-nav')) {
-        @include igx-bottom-nav(igx-bottom-nav-theme($palette, $schema));
+        @include igx-bottom-nav(igx-bottom-nav-theme(
+            $palette,
+            $schema,
+            $shadow: if($elevation == false, 0, null),
+        ));
     }
 
     @if not(index($exclude, 'igx-button')) {
@@ -140,14 +145,21 @@
             $outlined-border-radius: $roundness,
             $fab-border-radius: $roundness,
             $icon-border-radius: $roundness,
+            $raised-resting-shadow: if($elevation == false, 0, null),
+            $raised-hover-shadow: if($elevation == false, 0, null),
+            $raised-focus-shadow: if($elevation == false, 0, null),
+            $fab-resting-shadow: if($elevation == false, 0, null),
+            $fab-hover-shadow: if($elevation == false, 0, null),
+            $fab-focus-shadow: if($elevation == false, 0, null),
         ));
     }
 
     @if not(index($exclude, 'igx-button-group')) {
         @include igx-button-group(igx-button-group-theme(
             $palette,
             $schema,
-            $border-radius: $roundness
+            $border-radius: $roundness,
+            $shadow: if($elevation == false, 0, null),
         ));
     }
 
@@ -183,6 +195,7 @@
             $palette,
             $schema,
             $border-radius: $roundness,
+            $disable-button-shadow: if($elevation == false, 0, true),
         ));
     }
 
@@ -200,6 +213,7 @@
             $palette,
             $schema,
             $border-radius: $roundness,
+            $ghost-shadow: if($elevation == false, 0, null),
         ));
     }
 
@@ -224,6 +238,7 @@
             $palette,
             $schema,
             $border-radius: $roundness,
+            $shadow: if($elevation == false, 0, null),
         ));
     }
 
@@ -236,6 +251,7 @@
             $palette,
             $schema,
             $border-radius: $roundness,
+            $shadow: if($elevation == false, 0, null),
         ));
     }
 
@@ -252,6 +268,8 @@
             $palette,
             $schema,
             $drop-area-border-radius: $roundness,
+            $grid-shadow: if($elevation == false, 0, null),
+            $drag-shadow: if($elevation == false, 0, null),
         ));
     }
 
@@ -274,6 +292,9 @@
             $box-border-radius: $roundness,
             $border-border-radius: $roundness,
             $search-border-radius: $roundness,
+            $search-resting-shadow: if($elevation == false, 0, null),
+            $search-hover-shadow: if($elevation == false, 0, null),
+            $search-disabled-shadow: if($elevation == false, 0, null),
         ));
     }
 
@@ -287,7 +308,11 @@
     }
 
     @if not(index($exclude, 'igx-navbar')) {
-        @include igx-navbar(igx-navbar-theme($palette, $schema));
+        @include igx-navbar(igx-navbar-theme(
+            $palette,
+            $schema,
+            $shadow: if($elevation == false, 0, null),
+        ));
     }
 
     @if not(index($exclude, 'igx-nav-drawer')) {
@@ -296,6 +321,7 @@
             $schema,
             $border-radius: $roundness,
             $item-border-radius: $roundness,
+            $shadow: if($elevation == false, 0, null),
         ));
     }
 
@@ -328,6 +354,7 @@
             $palette,
             $schema,
             $border-radius: $roundness,
+            $shadow: if($elevation == false, 0, null),
         ));
     }
 
@@ -338,11 +365,18 @@
             $border-radius-track: $roundness,
             $border-radius-thumb: $roundness,
             $border-radius-ripple: $roundness,
+            $resting-shadow: if($elevation == false, 0, null),
+            $hover-shadow: if($elevation == false, 0, null),
+            $disabled-shadow: if($elevation == false, 0, null),
         ));
     }
 
     @if not(index($exclude, 'igx-tabs')) {
-        @include igx-tabs(igx-tabs-theme($palette, $schema));
+        @include igx-tabs(igx-tabs-theme(
+            $palette,
+            $schema,
+            $disable-shadow: if($elevation == false, true, false),
+        ));
     }
 
     @if not(index($exclude, 'igx-toast')) {
@@ -367,6 +401,8 @@
             $schema,
             $border-radius: $roundness,
             $active-item-border-radius: $roundness,
+            $modal-shadow: if($elevation == false, 0, null),
+            $dropdown-shadow: if($elevation == false, 0, null),
         ));
     }
 }

projects/igniteui-angular/src/lib/core/styles/themes/schemas/elevation/_chip.scss

@@ -0,0 +1,8 @@
+////
+/// @group schemas
+/// @access private
+/// @author <a href="https://github.com/simeonoff" target="_blank">Simeon Simeonoff</a>
+////
+$_default-elevation-chip: (
+    ghost-elevation: 8,
+);

projects/igniteui-angular/src/lib/core/styles/themes/schemas/light/_chip.scss

@@ -1,3 +1,4 @@
+@import '../elevation/chip';
 @import '../shape/chip';
 
 ////
@@ -28,6 +29,7 @@
 /// @see $default-palette
 $_light-chip: extend(
     $_default-shape-chip,
+    $_default-elevation-chip,
     (
         text-color: (
             igx-color: ('grays', 700)