feat(bottom-navigation): box-shadow for scrolled state

shoeffner · Aug 26, 2019 · c8cb97e · c8cb97e
1 parent 533fe6b
commit c8cb97e
Show file tree

Hide file tree

Showing 3 changed files with 18 additions and 0 deletions.
diff --git a/packages/mdc-bottom-navigation/mdc-bottom-navigation.scss b/packages/mdc-bottom-navigation/mdc-bottom-navigation.scss
@@ -20,6 +20,7 @@
 // THE SOFTWARE.
 //
 
+@import "@material/elevation/mixins";
 @import "./mixins";
 @import "./variables";
 @include mdc-bottom-navigation-menu-ripple;
@@ -34,6 +35,12 @@
   text-align: center;
   z-index: 4;
 
+  &--scrolled {
+    @include mdc-elevation(4);
+
+    transition: box-shadow 200ms linear;
+  }
+
   &__icon {
     @include mdc-bottom-navigation-menu-icon-color(on-primary);
 

diff --git a/packages/mdc-bottom-navigation/package-lock.json b/packages/mdc-bottom-navigation/package-lock.json
diff --git a/packages/mdc-bottom-navigation/package.json b/packages/mdc-bottom-navigation/package.json
@@ -1,5 +1,6 @@
 {
   "dependencies": {
+    "@material/elevation": "^3.1.0",
     "@material/feature-targeting": "^3.1.0",
     "@material/ripple": "^3.1.0",
     "@material/theme": "^3.1.0",