diff --git a/src/animation/demo.html b/src/animation/demo.html index b455bdfc..7f804d67 100644 --- a/src/animation/demo.html +++ b/src/animation/demo.html @@ -14,7 +14,7 @@
Click me to animate
-
+
diff --git a/src/button/_button.scss b/src/button/_button.scss index 54f78153..74a85253 100644 --- a/src/button/_button.scss +++ b/src/button/_button.scss @@ -78,10 +78,10 @@ // Raised buttons .mdl-button--raised { background: $button-primary-color; - @include shadow-z1(); + @include shadow-2dp(); &:active { - @include shadow-z3(); + @include shadow-4dp(); background-color: $button-active-color; } @@ -115,7 +115,7 @@ &[disabled][disabled] { background-color: $button-primary-color-disabled; color: $button-secondary-color-disabled; - @include shadow-z1(); + @include shadow-2dp(); } } @@ -159,7 +159,7 @@ } &:active { - @include shadow-z3(); + @include shadow-4dp(); background-color: $button-active-color; } @@ -193,7 +193,7 @@ &[disabled][disabled] { background-color: $button-primary-color-disabled; color: $button-secondary-color-disabled; - @include shadow-z1(); + @include shadow-2dp(); } } diff --git a/src/card/README.md b/src/card/README.md index 23a94ff6..192f909d 100755 --- a/src/card/README.md +++ b/src/card/README.md @@ -94,7 +94,7 @@ A card (no shadow) with a heading, image, text, and action. Card (level-3 shadow) with an image, caption, and text: ```html -
+
@@ -112,7 +112,7 @@ The MDL CSS classes apply various predefined visual and behavioral enhancements | MDL class | Effect | Remarks | |-----------|--------|---------| | `mdl-card` | Defines div element as an MDL card container | Required on "outer" div | -| `mdl-shadow--z1 through mdl-shadow--z5` | Assigns variable shadow depths (1-5) to card | Optional, goes on "outer" div; if omitted, no shadow is present | +| `mdl-shadow--2dp through mdl-shadow--8dp` | Assigns variable shadow depths (1-5) to card | Optional, goes on "outer" div; if omitted, no shadow is present | | `mdl-card--heading` | Defines div as a card heading container(1) | Required on "inner" heading div | | `mdl-card--heading-text` | Assigns appropriate text characteristics to card heading | Required on head tag (H1 - H6) inside heading div | | `mdl-card--img-container` | Defines div as a card image container | Required on "inner" image div | diff --git a/src/card/demo.html b/src/card/demo.html index 0f167138..633cff3f 100644 --- a/src/card/demo.html +++ b/src/card/demo.html @@ -11,7 +11,7 @@
-
+
@@ -27,7 +27,7 @@ Some Action
-
+
@@ -43,7 +43,7 @@ Some Action
-
+
diff --git a/src/layout/_layout.scss b/src/layout/_layout.scss index f6f93bdb..24992315 100644 --- a/src/layout/_layout.scss +++ b/src/layout/_layout.scss @@ -82,7 +82,7 @@ top: 0; left: 0; - @include shadow-z1(); + @include shadow-2dp(); box-sizing: border-box; border-right: 1px solid $layout-drawer-border-color; @@ -211,7 +211,7 @@ color: $layout-header-text-color; z-index: 3; @include material-animation-default(); - @include shadow-z1(); + @include shadow-2dp(); transition-property: min-height, box-shadow; padding-left: $layout-header-basic-desktop-indent; overflow: visible; @@ -366,7 +366,7 @@ box-shadow: none; &.is-casting-shadow { - @include shadow-z1(); + @include shadow-2dp(); } } @@ -502,7 +502,7 @@ } &.is-casting-shadow { - @include shadow-z1(); + @include shadow-2dp(); } } @@ -516,7 +516,7 @@ z-index: 3; flex-grow: 0; flex-shrink: 0; - @include shadow-z1(); + @include shadow-2dp(); .mdl-layout__container > & { position: absolute; diff --git a/src/menu/_menu.scss b/src/menu/_menu.scss index 68ada6a6..7ab0320e 100644 --- a/src/menu/_menu.scss +++ b/src/menu/_menu.scss @@ -41,7 +41,7 @@ opacity: 0; transform: scale(0); transform-origin: 0 0; - @include shadow-z1(); + @include shadow-2dp(); will-change: transform; transition: transform $menu-expand-duration $animation-curve-default, opacity $menu-fade-duration $animation-curve-default; diff --git a/src/shadow/README.md b/src/shadow/README.md index 92affc55..c74663dc 100644 --- a/src/shadow/README.md +++ b/src/shadow/README.md @@ -1 +1,3 @@ # Shadows + +Shadows render a shadow simulating the effect of a lifted piece of paper. diff --git a/src/shadow/demo.html b/src/shadow/demo.html index 6f71bc55..f17666d6 100644 --- a/src/shadow/demo.html +++ b/src/shadow/demo.html @@ -14,17 +14,21 @@ +

Hand-Crafted Artisanal

+
-
+
2dp
-
+
3dp
-
+
4dp
-
+
6dp
-
+
8dp
+ +
16dp
diff --git a/src/shadow/demo.scss b/src/shadow/demo.scss index 14db956f..328b7469 100644 --- a/src/shadow/demo.scss +++ b/src/shadow/demo.scss @@ -20,14 +20,22 @@ background-color : #fff; border-radius : 2px; display : block; - height : 300px; + height : 72px; margin-bottom : 20px; - + margin-right : 32px; + padding : 10px; + text-align : center; + float : left; + color : #9E9E9E; + display : flex; + align-items : center; + justify-content : center; transition-property: opacity, transform; + @include material-animation-default(300ms); - width : 300px; + width : 72px; @media screen and (max-width: 360px ) { - width: 272px; + width: 27px; } } diff --git a/src/switch/_switch.scss b/src/switch/_switch.scss index 8c675648..cbd20d1a 100644 --- a/src/switch/_switch.scss +++ b/src/switch/_switch.scss @@ -97,7 +97,7 @@ cursor: pointer; - @include shadow-z1(); + @include shadow-2dp(); @include material-animation-default(0.28s); transition-property: left; @@ -106,7 +106,7 @@ background: $switch-thumb-color; left: $switch-track-length - $switch-thumb-size; - @include shadow-z2(); + @include shadow-3dp(); } .mdl-switch.is-disabled & {