google
/
material-design-lite
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

Update components to use new shadows

master
Addy Osmani 2015-04-28 15:57:04 +01:00
parent 666feaca29
commit ef696b571b
10 changed files with 42 additions and 28 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

2
src/animation/demo.html
View File

@ -14,7 +14,7 @@
<div class="demo-animation__container">
<div class="demo-animation__container-background">Click me to animate</div>
<div class="demo-animation__container-foreground"></div>
<div class="demo-animation__movable demo-animation--position-1 mdl-shadow--z1"></div>
<div class="demo-animation__movable demo-animation--position-1 mdl-shadow--2dp"></div>
</div>
</div>
<!-- build:js(app/styleguide/animation/) ../../scripts/main.min.js -->

10
src/button/_button.scss
View File

@ -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();
}
}

4
src/card/README.md
View File

@ -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
<div class="mdl-card mdl-shadow--z3">
<div class="mdl-card mdl-shadow--4dp">
<div class="mdl-card--img-container"><img src="skytower.jpg" width="173" height="157" border="0" alt="" style="padding:10px;">
</div>
<div class="mdl-card--caption">
@ -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 |

6
src/card/demo.html
View File

@ -11,7 +11,7 @@
</head>
<body class="demo-page demo-page--card">
<div class="demo-preview-block">
<div class="mdl-card mdl-shadow--z1">
<div class="mdl-card mdl-shadow--2dp">
<div class="mdl-card--img-container">
</div>
<div class="mdl-card--heading">
@ -27,7 +27,7 @@
<a href="#">Some Action</a>
</div>
</div>
<div class="mdl-card mdl-shadow--z2 demo-card--wide">
<div class="mdl-card mdl-shadow--3dp demo-card--wide">
<div class="mdl-card--img-container">
</div>
<div class="mdl-card--heading">
@ -43,7 +43,7 @@
<a href="#">Some Action</a>
</div>
</div>
<div class="mdl-card mdl-shadow--z3">
<div class="mdl-card mdl-shadow--4dp">
<div class="mdl-card--img-container">
</div>
<div class="mdl-card--heading">

10
src/layout/_layout.scss
View File

@ -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;

2
src/menu/_menu.scss
View File

@ -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;

2
src/shadow/README.md
View File

@ -1 +1,3 @@
# Shadows
Shadows render a shadow simulating the effect of a lifted piece of paper.

14
src/shadow/demo.html
View File

@ -14,17 +14,21 @@
</head>
<body class="demo-page demo-page--shadow">
<h3>Hand-Crafted Artisanal</h3>
<div class="demo-preview-block">
<div class="demo-shadow-card mdl-shadow--z1"></div>
<div class="demo-shadow-card mdl-shadow--2dp">2dp</div>
<div class="demo-shadow-card mdl-shadow--z2"></div>
<div class="demo-shadow-card mdl-shadow--3dp">3dp</div>
<div class="demo-shadow-card mdl-shadow--z3"></div>
<div class="demo-shadow-card mdl-shadow--4dp">4dp</div>
<div class="demo-shadow-card mdl-shadow--z4"></div>
<div class="demo-shadow-card mdl-shadow--6dp">6dp</div>
<div class="demo-shadow-card mdl-shadow--z5"></div>
<div class="demo-shadow-card mdl-shadow--8dp">8dp</div>
<div class="demo-shadow-card mdl-shadow--16dp">16dp</div>
</div>

16
src/shadow/demo.scss
View File

@ -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;
}
}

4
src/switch/_switch.scss
View File

@ -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 & {